<template>
  <div class="fp-base" >
    <svg :viewBox="viewBoxBase" draggable="false" :width="width*scale" :height="height*scale" ref="svg" class="svg-overflow">
      <g :transform="transformG">
        <rect fill="none" stroke="#2c8ef8" stroke-width="1.5" :width="cWidth" :height="cHeight" :x="current.x" :y="current.y" />
        <svg :viewBox="viewBox" :width="cWidth" :height="cHeight" :x="current.x" :y="current.y" class="svg-overflow">
          <rect class="fp-point fp-point-move" width="100%" height="100%" fill="transparent" @mousedown="dragElement" />
          <g stroke="#2c8ef8" stroke-width="1.5" fill="#fff">
            <rect width="20" class="fp-point fp-point-revolve" height="20" stroke="rgba(0, 0, 0, 0.2)" @mousedown="dragRotateHandle" :x="current.width/2-10" y="-32" rx="10" ry="10"></rect>
            <svg class="fp-point fp-point-revolve" :x="current.width/2-7" :y="-29" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8926" width="14" height="14">
              <path d="M929 849a30 30 0 0 1-30-30v-83.137a447.514 447.514 0 0 1-70.921 92.209C722.935 933.225 578.442 975.008 442 953.482a444.917 444.917 0 0 1-241.139-120.591 30 30 0 1 1 37.258-47.01l0.231-0.231A385.175 385.175 0 0 0 442 892.625v-0.006c120.855 22.123 250.206-13.519 343.656-106.975a386.646 386.646 0 0 0 70.6-96.653h-87.247a30 30 0 0 1 0-60H929a30 30 0 0 1 30 30V819a30 30 0 0 1-30 30zM512 392a120 120 0 1 1-120 120 120 120 0 0 1 120-120z m293.005-147.025a29.87 29.87 0 0 1-19.117-6.882l-0.232 0.231A386.5 386.5 0 0 0 689.478 168h-0.011c-145.646-75.182-329.021-51.747-451.117 70.35a386.615 386.615 0 0 0-70.6 96.65H255a30 30 0 0 1 0 60H95a30 30 0 0 1-30-30V205a30 30 0 0 1 60 0v83.129a447.534 447.534 0 0 1 70.923-92.206C317.981 73.866 493.048 37.2 647 85.836v-0.045a444.883 444.883 0 0 1 176.143 105.291 30 30 0 0 1-18.138 53.893z" fill="#2c8ef8" p-id="8927"></path>
            </svg>
            <circle class="fp-point" :style="getDragCursor('lt')" @mousedown="dragTopLeftHandle" title="tl" cx="0" r="4" cy="0" />
            <rect class="fp-point" :style="getDragCursor('t')" v-if="current.width>minLength&&!lockProportion.x" @mousedown="dragTopMiddleHandle" title="tm" width="16" height="6" :x="current.width/2-8" y="-3" rx="3" ry="3" />
            <circle class="fp-point" :style="getDragCursor('rt')" @mousedown="dragTopRightHandle" title="tr" cx="100%" r="4" cy="0" />
            <circle class="fp-point" :style="getDragCursor('lb')" @mousedown="dragBottomLeftHandle" title="bl" cx="0" r="4" cy="100%" />
            <rect class="fp-point" :style="getDragCursor('b')" v-if="current.width>minLength&&!lockProportion.x" @mousedown="dragBottomMiddleHandle" title="bm" width="16" height="6" :x="current.width/2-8" :y="current.height-3" rx="3" ry="3" />
            <circle class="fp-point" :style="getDragCursor('rb')" @mousedown="dragBottomRightHandle" title="br" cx="100%" r="4" cy="100%" />
            <rect class="fp-point" :style="getDragCursor('l')" v-if="current.height>minLength&&!lockProportion.y" @mousedown="dragMiddleLeftHandle" title="ml" width="6" height="16" x="-3" :y="current.height/2-8" rx="3" ry="3" />
            <rect class="fp-point" :style="getDragCursor('r')" v-if="current.height>minLength&&!lockProportion.y" @mousedown="dragMiddleRightHandle" title="mr" width="6" height="16" :x="current.width-3" :y="current.height/2-8" rx="3" ry="3" />
          </g>
        </svg>
      </g>
    </svg>
  </div>
</template>

<script>
import DivMixin from '@/mixins/DivMixin.js'
import _ from 'lodash'
import Common from './common'
import Utils from './utils'
//防抖时间
const THROTTLE_DELAY_TIME = 50
//最小
const MINIMUM_SIZE = 4
//隐藏的最小长度
const MIN_LENGTH = 20

export default {
  mixins:[DivMixin],
  data() {
    return {
      oldlineHeight:null,
      oldHeight:null,
      minLength: MIN_LENGTH,
      id: '',
      item: {
      },
      current: {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        rotate: 0,
      },
      cursors: {
       //动态拖动方向样式
      },
      lockProportion: {
        x:false,
        y:false
      },
       //文本类误差
       textFix: 1.5
    }
  },
  props: {
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    scale: {
      type: Number,
      default: 1
    },
  },
  computed: {
    transformG() {
      return `rotate(${this.current.rotate},${this.current.x + this.current.width / 2},${this.current.y + this.current.height / 2})`
    },
    viewBoxBase() {
      return `0 0 ${this.width * this.scale} ${this.height * this.scale}`
    },
    viewBox() {
      return `0 0 ${this.current.width} ${this.current.height}`
    },
    cHeight() {
      return this.current.height + this.textFix
    },
    cWidth() {
      return this.current.width + this.textFix
    }
  },
  watch: {
    scale(val, old) {
      if (val != old) {
        this.setItem(this.item)
      }
    }
  },
  methods: {
    setItem(item) {
      this.item = item
      this.id = item.uuid
      if(item.t=='text'){
        //如果是文本类型 只锁 水平方向上的
        this.lockProportion.x=true
        this.lockProportion.y=false
      }else{
        this.lockProportion.x=item.aspectRatio
        this.lockProportion.y=item.aspectRatio
      }
      const obj = { x: item.x * this.scale, y: item.y * this.scale, width: item.w * this.scale, height: item.h * this.scale, rotate: item.angle }
      Object.assign(this.current, obj)
      this.cursors = Utils.getCursor(obj.rotate)
    },
    getDragCursor(point) {
      return {
        cursor: this.cursors[point],
      }
    },
    /**
     * 获取关键变量（计算尺寸调整逻辑用）
     * @param  {String} handler 手柄名称
     * @return {Object}         关键变量集合
     */
    getKeyVariable(handler) {
      const viewportRef = this.$refs.svg
      const rect = {
        x: this.current.x,
        y: this.current.y,
        width: this.current.width,
        height: this.current.height,
        rotate: this.current.rotate
      }
      const center = {
        x: rect.x + (rect.width / 2),
        y: rect.y + (rect.height / 2)
      }
      const handlePoint = Common.getPoint(rect, center, handler)
      const sPoint = {
        x: center.x + Math.abs(handlePoint.x - center.x) * (handlePoint.x < center.x ? 1 : -1),
        y: center.y + Math.abs(handlePoint.y - center.y) * (handlePoint.y < center.y ? 1 : -1)
      }
      const proportion = this.lockProportion.x ? (rect.width / rect.height) : 1

      return {
        viewportRef,  // 页面SVG元素的引用（计算鼠标位置需要用到）
        rect,         // 元素原始几何信息（xy宽高）
        center,       // 元素原始中心点坐标
        handlePoint,  // 当前拖动手柄的虚拟坐标（旋转后的坐标）
        sPoint,       // 拖动手柄的对称点的坐标（假设拖动的是左上角手柄，那么他的对称点就是右下角的点）
        proportion    // 宽高比
      }
    },
    stopEvent(e) {
      e = e || window.event
      e.stopPropagation()
    },
    dragElement(e) {
      this.stopEvent(e)
      const viewportRef = this.$refs.svg
      const mouseDownPosition = Common.getPositionInSvg(viewportRef, e)
      const originPosition = {
        x: this.current.x,
        y: this.current.y
      }

      const dragMoveHandler = e => {

        const currentPosition = Common.getPositionInSvg(viewportRef, e)

        Object.assign(this.current, {
          x: originPosition.x + currentPosition.x - mouseDownPosition.x,
          y: originPosition.y + currentPosition.y - mouseDownPosition.y,
        })

        this.$emit('change', this.id, 'move', this.current)
      }

      const mousemoveHandler = _.throttle(dragMoveHandler, THROTTLE_DELAY_TIME, {trailing:false})
      this.configListener(mousemoveHandler, this.id, 'move')
    },

    dragRotateHandle(e) {
      this.stopEvent(e)
      const viewportRef = this.$refs.svg
      const rect = {
        x: this.current.x,
        y: this.current.y,
        width: this.current.width,
        height: this.current.height,
        rotate: this.current.rotate
      }

      const originCenter = {
        x: rect.x + (rect.width / 2),
        y: rect.y + (rect.height / 2)
      }

      const mousemoveHandler = _.throttle(e => {

        const currentPosition = Common.getPositionInSvg(viewportRef, e)

        const a = Math.abs(currentPosition.x - originCenter.x)
        const b = Math.abs(currentPosition.y - originCenter.y)
        const c = Math.sqrt(a * a + b * b)
        let rotate = Math.round((Math.asin(b / c) / Math.PI * 180))

        // 第一象限
        if (currentPosition.x >= originCenter.x && currentPosition.y <= originCenter.y) {
          rotate = 90 - rotate
        }
        // 第二象限
        else if (currentPosition.x <= originCenter.x && currentPosition.y <= originCenter.y) {
          rotate = 270 + rotate
        }
        // 第三象限
        else if (currentPosition.x <= originCenter.x && currentPosition.y >= originCenter.y) {
          rotate = 270 - rotate
        }
        // 第四象限
        else if (currentPosition.x >= originCenter.x && currentPosition.y >= originCenter.y) {
          rotate = 90 + rotate
        }

        this.current.rotate = rotate === 360 ? 0 : parseInt(rotate)
        this.cursors = Utils.getCursor(this.current.rotate)
        this.$emit('change', this.id, 'rotate', this.current)
      }, THROTTLE_DELAY_TIME, {trailing:false})
      this.configListener(mousemoveHandler, this.id, 'rotate')
    },

    dragTopLeftHandle(e) {
      this.stopEvent(e)
      const { viewportRef, sPoint, rect, proportion } = this.getKeyVariable('tl')

      const mousemoveHandler = _.throttle(e => {


        let currentPosition = Common.getPositionInSvg(viewportRef, e)
        let newCenterPoint = Common.getCenterPoint(currentPosition, sPoint)
        let newTopLeftPoint = Common.getRotatedPoint(currentPosition, newCenterPoint, -rect.rotate)
        let newBottomRightPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)

        let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
        let newHeight = newBottomRightPoint.y - newTopLeftPoint.y

        if (this.lockProportion.x) {
          if (newWidth / newHeight > proportion) {
            newTopLeftPoint.x = newTopLeftPoint.x + Math.abs(newWidth - newHeight * proportion)
            newWidth = newHeight * proportion
          } else {
            newTopLeftPoint.y = newTopLeftPoint.y + Math.abs(newHeight - newWidth / proportion)
            newHeight = newWidth / proportion
          }

          let rotatedTopLeftPoint = Common.getRotatedPoint(newTopLeftPoint, newCenterPoint, rect.rotate)
          newCenterPoint = Common.getCenterPoint(rotatedTopLeftPoint, sPoint)
          newTopLeftPoint = Common.getRotatedPoint(rotatedTopLeftPoint, newCenterPoint, -rect.rotate)
          newBottomRightPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)

          newWidth = newBottomRightPoint.x - newTopLeftPoint.x
          newHeight = newBottomRightPoint.y - newTopLeftPoint.y
        }

        if (newWidth < MINIMUM_SIZE || (newHeight < MINIMUM_SIZE)) {
          return
        }

        Object.assign(this.current, {
          x: newTopLeftPoint.x,
          y: newTopLeftPoint.y,
          height: newHeight,
          width: newWidth
        })
        this.getTextLine('tl', this.current)
        this.$emit('change', this.id, 'tl', this.current, newTopLeftPoint)
      }, THROTTLE_DELAY_TIME, {trailing:false})

      this.configListener(mousemoveHandler, this.id, 'tl')
    },

    dragTopMiddleHandle(e) {
      this.stopEvent(e)
      const { rect, viewportRef, sPoint, handlePoint } = this.getKeyVariable('tm')

      const mousemoveHandler = _.throttle(e => {

        const currentPosition = Common.getPositionInSvg(viewportRef, e)

        const rotatedCurrentPosition = Common.getRotatedPoint(currentPosition, handlePoint, -rect.rotate)
        const rotatedTopMiddlePoint = Common.getRotatedPoint({
          x: handlePoint.x,
          y: rotatedCurrentPosition.y
        }, handlePoint, rect.rotate)

        const newHeight = Math.sqrt(Math.pow(rotatedTopMiddlePoint.x - sPoint.x, 2) + Math.pow(rotatedTopMiddlePoint.y - sPoint.y, 2), 2)
        const newCenter = {
          x: rotatedTopMiddlePoint.x - (Math.abs(sPoint.x - rotatedTopMiddlePoint.x) / 2) * (rotatedTopMiddlePoint.x > sPoint.x ? 1 : -1),
          y: rotatedTopMiddlePoint.y + (Math.abs(sPoint.y - rotatedTopMiddlePoint.y) / 2) * (rotatedTopMiddlePoint.y > sPoint.y ? -1 : 1)
        }

        if (newHeight < MINIMUM_SIZE) {
          return
        }

        if (!Common.pointInRect(newCenter, handlePoint, sPoint)) {
          return
        }

        Object.assign(this.current, {
          height: newHeight,
          y: newCenter.y - (newHeight / 2),
          x: newCenter.x - (rect.width / 2)
        })

        this.$emit('change', this.id, 'tm', this.current, rotatedTopMiddlePoint, currentPosition)
      }, THROTTLE_DELAY_TIME, {trailing:false})
      this.configListener(mousemoveHandler, this.id, 'tm')
    },

    dragTopRightHandle(e) {
      this.stopEvent(e)
      const { viewportRef, sPoint, rect, proportion } = this.getKeyVariable('tr')

      const mousemoveHandler = _.throttle(e => {

        let currentPosition = Common.getPositionInSvg(viewportRef, e)
        let newCenterPoint = Common.getCenterPoint(currentPosition, sPoint)

        let newTopRightPoint = Common.getRotatedPoint(currentPosition, newCenterPoint, -rect.rotate)
        let newBottomLeftPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)

        let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
        let newHeight = newBottomLeftPoint.y - newTopRightPoint.y

        if (this.lockProportion.x) {
          if (newWidth / newHeight > proportion) {
            newTopRightPoint.x = newTopRightPoint.x - Math.abs(newWidth - newHeight * proportion)
            newWidth = newHeight * proportion
          } else {
            newTopRightPoint.y = newTopRightPoint.y + Math.abs(newHeight - newWidth / proportion)
            newHeight = newWidth / proportion
          }

          let rotatedTopRightPoint = Common.getRotatedPoint(newTopRightPoint, newCenterPoint, rect.rotate)
          newCenterPoint = Common.getCenterPoint(rotatedTopRightPoint, sPoint)
          newTopRightPoint = Common.getRotatedPoint(rotatedTopRightPoint, newCenterPoint, -rect.rotate)
          newBottomLeftPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)

          newWidth = newTopRightPoint.x - newBottomLeftPoint.x
          newHeight = newBottomLeftPoint.y - newTopRightPoint.y
        }

        if (newWidth < MINIMUM_SIZE || (newHeight < MINIMUM_SIZE)) {
          return
        }

        Object.assign(this.current, {
          x: newBottomLeftPoint.x,
          y: newTopRightPoint.y,
          height: newHeight,
          width: newWidth
        })
        this.getTextLine('tr', this.current)
        this.$emit('change', this.id, 'tr', this.current, newTopRightPoint, currentPosition)
      }, THROTTLE_DELAY_TIME, {trailing:false})
      this.configListener(mousemoveHandler, this.id, 'tr')
    },

    dragBottomLeftHandle(e) {
      this.stopEvent(e)
      const { viewportRef, sPoint, rect, proportion } = this.getKeyVariable('bl')

      const mousemoveHandler = _.throttle(e => {

        let currentPosition = Common.getPositionInSvg(viewportRef, e)
        let newCenterPoint = Common.getCenterPoint(currentPosition, sPoint)

        let newTopRightPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)
        let newBottomLeftPoint = Common.getRotatedPoint(currentPosition, newCenterPoint, -rect.rotate)

        let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
        let newHeight = newBottomLeftPoint.y - newTopRightPoint.y

        if (this.lockProportion.x) {
          if (newWidth / newHeight > proportion) {
            newBottomLeftPoint.x = newBottomLeftPoint.x + Math.abs(newWidth - newHeight * proportion)
            newWidth = newHeight * proportion
          } else {
            newBottomLeftPoint.y = newBottomLeftPoint.y - Math.abs(newHeight - newWidth / proportion)
            newHeight = newWidth / proportion
          }

          let rotatedBottomLeftPoint = Common.getRotatedPoint(newBottomLeftPoint, newCenterPoint, rect.rotate)
          newCenterPoint = Common.getCenterPoint(rotatedBottomLeftPoint, sPoint)
          newBottomLeftPoint = Common.getRotatedPoint(rotatedBottomLeftPoint, newCenterPoint, -rect.rotate)
          newTopRightPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)

          newWidth = newTopRightPoint.x - newBottomLeftPoint.x
          newHeight = newBottomLeftPoint.y - newTopRightPoint.y
        }

        if (newWidth < MINIMUM_SIZE || (newHeight < MINIMUM_SIZE)) {
          return
        }

        Object.assign(this.current, {
          x: newBottomLeftPoint.x,
          y: newTopRightPoint.y,
          height: newHeight,
          width: newWidth
        })
        this.getTextLine('bl', this.current)
        this.$emit('change', this.id, 'bl', this.current, newBottomLeftPoint)
      }, THROTTLE_DELAY_TIME, {trailing:false})

      this.configListener(mousemoveHandler, this.id, 'bl')
    },

    dragBottomMiddleHandle(e) {
      this.stopEvent(e)
      const { rect, viewportRef, sPoint, handlePoint } = this.getKeyVariable('bm')

      const mousemoveHandler = _.throttle(e => {

        const currentPosition = Common.getPositionInSvg(viewportRef, e)

        const rotatedCurrentPosition = Common.getRotatedPoint(currentPosition, handlePoint, -rect.rotate)
        const rotatedBottomMiddlePoint = Common.getRotatedPoint({
          x: handlePoint.x,
          y: rotatedCurrentPosition.y
        }, handlePoint, rect.rotate)

        const newHeight = Math.sqrt(Math.pow(rotatedBottomMiddlePoint.x - sPoint.x, 2) + Math.pow(rotatedBottomMiddlePoint.y - sPoint.y, 2), 2)
        const newCenter = {
          x: rotatedBottomMiddlePoint.x - (Math.abs(sPoint.x - rotatedBottomMiddlePoint.x) / 2) * (rotatedBottomMiddlePoint.x > sPoint.x ? 1 : -1),
          y: rotatedBottomMiddlePoint.y + (Math.abs(sPoint.y - rotatedBottomMiddlePoint.y) / 2) * (rotatedBottomMiddlePoint.y > sPoint.y ? -1 : 1)
        }

        if (newHeight < MINIMUM_SIZE) {
          return
        }

        if (!Common.pointInRect(newCenter, handlePoint, sPoint)) {
          return
        }

        Object.assign(this.current, {
          height: newHeight,
          y: newCenter.y - (newHeight / 2),
          x: newCenter.x - (rect.width / 2)
        })

        this.$emit('change', this.id, 'bm', this.current, rotatedBottomMiddlePoint, currentPosition)
      }, THROTTLE_DELAY_TIME, {trailing:false})

      this.configListener(mousemoveHandler, this.id, 'bm')
    },

    dragBottomRightHandle(e) {
      this.stopEvent(e)
      const { viewportRef, sPoint, rect, proportion } = this.getKeyVariable('br')

      const mousemoveHandler = _.throttle(e => {

        let currentPosition = Common.getPositionInSvg(viewportRef, e)
        let newCenterPoint = Common.getCenterPoint(currentPosition, sPoint)

        let newTopLeftPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)
        let newBottomRightPoint = Common.getRotatedPoint(currentPosition, newCenterPoint, -rect.rotate)

        let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
        let newHeight = newBottomRightPoint.y - newTopLeftPoint.y

        if (this.lockProportion.x) {
          if (newWidth / newHeight > proportion) {
            newBottomRightPoint.x = newBottomRightPoint.x - Math.abs(newWidth - newHeight * proportion)
            newWidth = newHeight * proportion
          } else {
            newBottomRightPoint.y = newBottomRightPoint.y - Math.abs(newHeight - newWidth / proportion)
            newHeight = newWidth / proportion
          }

          let rotatedBottomRightPoint = Common.getRotatedPoint(newBottomRightPoint, newCenterPoint, rect.rotate)
          newCenterPoint = Common.getCenterPoint(rotatedBottomRightPoint, sPoint)
          newBottomRightPoint = Common.getRotatedPoint(rotatedBottomRightPoint, newCenterPoint, -rect.rotate)
          newTopLeftPoint = Common.getRotatedPoint(sPoint, newCenterPoint, -rect.rotate)

          newWidth = newBottomRightPoint.x - newTopLeftPoint.x
          newHeight = newBottomRightPoint.y - newTopLeftPoint.y
        }

        if (newWidth < MINIMUM_SIZE || (newHeight < MINIMUM_SIZE)) {
          return
        }

        Object.assign(this.current, {
          x: newTopLeftPoint.x,
          y: newTopLeftPoint.y,
          height: newHeight,
          width: newWidth
        })
        this.getTextLine('br', this.current)
        this.$emit('change', this.id, 'br', this.current, newBottomRightPoint, currentPosition)
      }, THROTTLE_DELAY_TIME, {trailing:false})

      this.configListener(mousemoveHandler, this.id, 'br')
    },
    dragMiddleLeftHandle(e) {
      this.stopEvent(e)
      const { rect, viewportRef, sPoint, handlePoint } = this.getKeyVariable('ml')

      const mousemoveHandler = _.throttle(e => {

        const currentPosition = Common.getPositionInSvg(viewportRef, e)

        const rotatedCurrentPosition = Common.getRotatedPoint(currentPosition, handlePoint, -rect.rotate)
        const rotatedLeftMiddlePoint = Common.getRotatedPoint({
          x: rotatedCurrentPosition.x,
          y: handlePoint.y
        }, handlePoint, rect.rotate)

        const newWidth = Math.sqrt(Math.pow(rotatedLeftMiddlePoint.x - sPoint.x, 2) + Math.pow(rotatedLeftMiddlePoint.y - sPoint.y, 2), 2)
        const newCenter = {
          x: rotatedLeftMiddlePoint.x - (Math.abs(sPoint.x - rotatedLeftMiddlePoint.x) / 2) * (rotatedLeftMiddlePoint.x > sPoint.x ? 1 : -1),
          y: rotatedLeftMiddlePoint.y + (Math.abs(sPoint.y - rotatedLeftMiddlePoint.y) / 2) * (rotatedLeftMiddlePoint.y > sPoint.y ? -1 : 1)
        }

        if (newWidth < MINIMUM_SIZE) {
          return
        }

        if (!Common.pointInRect(newCenter, handlePoint, sPoint)) {
          return
        }

        Object.assign(this.current, {
          width: newWidth,
          y: newCenter.y - (rect.height / 2),
          x: newCenter.x - (newWidth / 2)
        })
        this.getTextLine('ml', this.current)
        this.$emit('change', this.id, 'ml', this.current, rotatedLeftMiddlePoint, currentPosition)
      }, THROTTLE_DELAY_TIME, {trailing:false})

      this.configListener(mousemoveHandler, this.id, 'ml')
    },

    dragMiddleRightHandle(e) {
      this.stopEvent(e)
      const { rect, viewportRef, sPoint, handlePoint } = this.getKeyVariable('mr')

      const mousemoveHandler = _.throttle(e => {

        const currentPosition = Common.getPositionInSvg(viewportRef, e)

        const rotatedCurrentPosition = Common.getRotatedPoint(currentPosition, handlePoint, -rect.rotate)
        const rotatedRightMiddlePoint = Common.getRotatedPoint({
          x: rotatedCurrentPosition.x,
          y: handlePoint.y
        }, handlePoint, rect.rotate)

        const newWidth = Math.sqrt(Math.pow(rotatedRightMiddlePoint.x - sPoint.x, 2) + Math.pow(rotatedRightMiddlePoint.y - sPoint.y, 2), 2)
        const newCenter = {
          x: rotatedRightMiddlePoint.x - (Math.abs(sPoint.x - rotatedRightMiddlePoint.x) / 2) * (rotatedRightMiddlePoint.x > sPoint.x ? 1 : -1),
          y: rotatedRightMiddlePoint.y + (Math.abs(sPoint.y - rotatedRightMiddlePoint.y) / 2) * (rotatedRightMiddlePoint.y > sPoint.y ? -1 : 1)
        }

        if (newWidth < MINIMUM_SIZE) {
          return
        }

        if (!Common.pointInRect(newCenter, handlePoint, sPoint)) {
          return
        }

        Object.assign(this.current, {
          width: newWidth,
          y: newCenter.y - (rect.height / 2),
          x: newCenter.x - (newWidth / 2)
        })
        this.getTextLine('mr', this.current)
        this.$emit('change', this.id, 'mr', this.current, rotatedRightMiddlePoint, currentPosition)
      }, THROTTLE_DELAY_TIME, {trailing:false})

      this.configListener(mousemoveHandler, this.id, 'mr')
    },
    /**
     * 监听移动以及移除事件
     * @param {*} mousemoveHandler 
     */
    configListener(mousemoveHandler, id, type) {
      const mouseupHandler = ev => {
        this.$emit('changeEnd', id, type)
        window.removeEventListener('mousemove', mousemoveHandler)
        window.removeEventListener('mouseup', mouseupHandler)
      }

      window.addEventListener('mousemove', mousemoveHandler)
      window.addEventListener('mouseup', mouseupHandler)
      if (this.item.t == 'text') {
        if (type == 'ml' || type == 'mr') {
        // 222
        }else{
          this.oldlineHeight= (Number(this.item.s||'0') + Number(this.item.vs||'0')) 
          this.oldHeight=this.item.h
        }
      }
    },
    getTextLine(type, drag) {
      if (this.item.t == 'text') {
        if (type == 'ml' || type == 'mr') {
          let h =  this.getDivHeight( this.item.s ,this.item.vs ,drag.width/this.scale, this.item.v)
          drag.height = h* this.scale
        } else {
          drag['s'] = drag.height/ this.scale *this.oldlineHeight/this.oldHeight -this.item.vs
        }
      }
    }
  },
  
}
</script>

<style lang="less" scoped>
.fp-base {
  position: absolute;
  top: 0px;
  z-index: 999;
  pointer-events: none;
}
.svg-overflow {
  overflow: visible;
}

.fp-point {
  pointer-events: fill;
  &-move {
    cursor: move;
  }
  &-revolve {
    cursor: grab;
  }
  &-revolve:active {
    cursor: grabbing;
  }
}
.fp-point:hover {
  background: #2c8ef8;
  color: #fff;
  border: 1px solid #2c8ef8;
}
</style>