zydx-plus 1.32.293 → 1.32.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.293",
+  "version": "1.32.294",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/flip/src/flip.vue

@@ -11,7 +11,19 @@
             <div class="wrap-can" ref="wrapCan">
               <canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown" @mousemove.stop="mouseMove" :id="id"></canvas>
               <canvas :id="`${id}2`"></canvas>
-              <div v-if="state === 'text'&&textY2>0&&textX2>0" class="text-frame" :style="{top: textY2/sratio + 'px', left: textX2/sratio + 'px','min-height': fontSize+8 +'px', border: `1px dashed ${color}`}">
+              <div
+                  v-show="state === 'text'&&textY2>0&&textX2>0"
+                  class="text-frame"
+                  @mousedown.stop="textMouseDown"
+                  @dblclick="textDblclick"
+                  :style="{
+                    top: textY2/sratio + 'px',
+                    left: textX2/sratio + 'px',
+                    'min-height': textHeight +'px',
+                    border: `1px dashed ${color}`,
+                    'min-width': textWidth + 'px',
+                    cursor: contenteditable? 'text': 'move'
+                  }">
                 <div class="text-input" ref="textInput" :style="{'font-size': fontSize + 'px',color: color}" :contenteditable="contenteditable"></div>
               </div>
             </div>
@@ -172,7 +184,12 @@ export default {
       pointsSelect: [],
       checkDrawing: false,
       checkX: 0,
-      checkY: 0
+      checkY: 0,
+      textWidth: 0,
+      textHeight: 0,
+      textDownX: 0,
+      textDownY: 0,
+      textMoveStart: false,
     }
   },
   props: {
@@ -246,21 +263,35 @@ export default {
   emits: ['flip','updateData'],
   mounted() {
     this.id = 'canvas-wrap' + Math.random().toString(36).substr(2)
+    window.addEventListener('keydown', this.handleKeyEvent)
     // 在画板以外松开鼠标后冻结画笔
     document.onmouseup = () => {
       if (this.isDrawing || this.checkDrawing) this.mouseUp()
+      this.textMoveStart = false
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyEvent)
+  },
   methods: {
+    handleKeyEvent(e) {
+      const {key} = e
+      if (key === 'Backspace' || key === 'Delete') {
+        this.backward()
+      }
+    },
     empty() {
+      this.setShow = false
       this.points = []
       this.clearRect(true)
     },
     preserve() {
+      this.setShow = false
       this.$emit('updateData', this.points)
     },
     // 后退
     backward() {
+      this.setShow = false
       if(this.points.length === 0) return
       if(this.points[this.points.length - 1].type === 'line') {
         const id = this.points[this.points.length - 1].id
@@ -283,7 +314,7 @@ export default {
     // 画笔
     brush() {
       this.state = 'brush'
-      this.setShow = !this.setShow
+      this.setShow = true
       this.top = 60
     },
     // 文字字号
@@ -293,34 +324,38 @@ export default {
     // 矩形
     rectangleTap() {
       this.state = 'rectangle'
-      this.setShow = !this.setShow
+      this.setShow = true
       this.top = 60*3
     },
     // 圆形
     circularTap() {
       this.state = 'circular'
-      this.setShow = !this.setShow
+      this.setShow = true
       this.top = 60*4
     },
     // 直线
     straightTap() {
       this.state = 'straight'
-      this.setShow = !this.setShow
+      this.setShow = true
       this.top = 60*5
     },
     // 箭头
     arrowTap() {
       this.state = 'arrow'
-      this.setShow = !this.setShow
+      this.setShow = true
       this.top = 60*6
     },
+    // 文字
     textTap() {
       this.state = 'text'
-      this.setShow = !this.setShow
+      this.setShow = true
       this.top = 60*2
       this.textStart = true
       this.textX2 = 0
       this.textY2 = 0
+      this.textWidth = 100
+      this.textHeight = this.fontSize + 1
+      this.$refs.textInput.innerText = ''
     },
     flipTool() {
       this.setShow = false
@@ -355,36 +390,42 @@ export default {
         if (this.points[i].index === this.pageIndex) {
           const x1 = this.points[i].x*this.scales/this.points[i].scale
           const y1 = this.points[i].y*this.scales/this.points[i].scale
-          if(this.points[i].type === 'arrow') {
-            const x2 = this.points[i+1].x*this.scales/this.points[i].scale
-            const y2 = this.points[i+1].y*this.scales/this.points[i].scale
-            const x3 = obj.x
-            const y3 = obj.y
-            const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
-            const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
-            const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
-            const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
-            if(a/b <= 5 && c <= b && d <= b) {
-              console.log(this.points[i])
+          // 判断点击的是否是圆
+          if(this.points[i]?.type === 'circular') {
+            const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
+            const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
+            const a = Math.sqrt(Math.pow(x1-obj.x,1.65)+Math.pow(y1-obj.y,1.65))
+            const b = Math.sqrt(Math.pow(x2-obj.x,1.65)+Math.pow(y2-obj.y,1.65))
+            const c = Math.sqrt(Math.pow(x1-obj.x,1.65)+Math.pow(y2-obj.y,1.65))
+            const d = Math.sqrt(Math.pow(x2-obj.x,1.65)+Math.pow(y1-obj.y,1.65))
+            const e = this.points[i].width*this.scales/this.points[i].scale/2
+            if(a <= e || b <= e || c <= e || d <= e) {
+              this.pointsSelect.push(this.points[i])
+              this.circularProcessing(this.points[i],{x:0,y:0})
+              this.points.splice(i,1)
             }
           }
-          if(this.points[i].type === 'text') {
-            const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].text[0].length*this.points[i].size*this.scales/this.points[i].scale
-            const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].text.length*this.points[i].size*this.scales/this.points[i].scale
+          if(this.points[i]?.type === 'text') {
+            // 取最长的一行文字
+            let len = 0
+            this.points[i].text.forEach(item => {
+              if(item.length > len) len = item.length
+            })
+            const x2 = this.points[i].x*this.scales/this.points[i].scale + len*this.points[i].size*this.sratio
+            const y2 = this.points[i].y*this.scales/this.points[i].scale + len*this.points[i].size*this.sratio
             if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
-              console.log(this.points[i])
-            }
-          }
-          if(this.points[i].type === 'circular') {
-            const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
-            const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
-            const a = Math.sqrt(Math.pow(obj.x-x1,2)+Math.pow(obj.y-y1,2))
-            const b = Math.sqrt(Math.pow(obj.x-x2,2)+Math.pow(obj.y-y2,2))
-            if(a <= this.points[i].width*this.scales/this.points[i].scale && b <= this.points[i].width*this.scales/this.points[i].scale) {
-              console.log(this.points[i])
+              this.state = 'text'
+              this.textX2 = x1
+              this.textY2 = y1
+              this.textWidth = 'auto'
+              this.color = this.points[i].color
+              this.textHeight = this.points[i].text.length*this.points[i].size + 1
+              this.$refs.textInput.innerText = this.points[i].text.join('\n')
+              this.points.splice(i,1)
+              this.clearRect()
             }
           }
-          if(this.points[i].type === 'rectangle') {
+          if(this.points[i]?.type === 'rectangle') {
             const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
             const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].height*this.scales/this.points[i].scale
             if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
@@ -393,7 +434,7 @@ export default {
               this.points.splice(i,1)
             }
           }
-          if(this.points[i].type === 'line') {
+          if(this.points[i]?.type === 'line') {
             const x2 = this.points[i+1]?this.points[i+1].x*this.scales/this.points[i].scale:0
             const y2 = this.points[i+1]?this.points[i+1].y*this.scales/this.points[i].scale:0
             const x3 = obj.x
@@ -402,27 +443,47 @@ export default {
             const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
             const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
             const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
-            if(a/b <= 7 && c <= b && d <= b) {
-              for(let i=0; i<this.points.length; i++) {
-                if(this.points[i].id === this.points[i].id) {
-                  this.pointsSelect.push(this.points[i])
-                  this.lineProcessing(this.points[i],this.points[i+1],{x:0,y:0})
-                  this.points.splice(i,1)
-                  i--
+            if(a/b <= 5 && c <= b && d <= b) {
+              const id = this.points[i].id
+              for(let j=0; j<this.points.length; j++) {
+                if(this.points[j].id === id) {
+                  this.pointsSelect.push(this.points[j])
+                  this.lineProcessing(this.points[j],this.points[j+1],{x:0,y:0})
+                  this.points.splice(j,1)
+                  j--
                 }
               }
             }
           }
+          if(this.points[i]?.type === 'straight' || this.points[i]?.type === 'arrow') {
+            const x2 = this.points[i].x2*this.scales/this.points[i].scale
+            const y2 = this.points[i].y2*this.scales/this.points[i].scale
+            const x3 = obj.x
+            const y3 = obj.y
+            const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
+            const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
+            const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
+            const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
+            if(a/b <= 5 && c <= b && d <= b) {
+              this.pointsSelect.push(this.points[i])
+              if(this.points[i].type === 'straight') {
+                this.straightProcessing(this.points[i],{x:0,y:0})
+              }else {
+                this.arrowProcessing(this.points[i],{x:0,y:0})
+              }
+              this.points.splice(i,1)
+            }
+          }
         }
       }
     },
     checkMove(e) {
+      if(this.pointsSelect.length === 0) return
       let obj = {
         x: e.offsetX*this.sratio - this.checkX,
         y: e.offsetY*this.sratio - this.checkY
       }
       this.clearRect()
-      console.log(this.pointsSelect)
       for(let i=0; i<this.pointsSelect.length; i++) {
         if(this.pointsSelect[i].type === 'line') {
           this.lineProcessing(this.pointsSelect[i],this.pointsSelect[i+1],obj)
@@ -430,6 +491,15 @@ export default {
         if(this.pointsSelect[i].type === 'rectangle') {
           this.rectangleProcessing(this.pointsSelect[i],obj)
         }
+        if(this.pointsSelect[i].type === 'straight') {
+          this.straightProcessing(this.pointsSelect[i],obj)
+        }
+        if(this.pointsSelect[i].type === 'arrow') {
+          this.arrowProcessing(this.pointsSelect[i],obj)
+        }
+        if(this.pointsSelect[i].type === 'circular') {
+          this.circularProcessing(this.pointsSelect[i],obj)
+        }
       }
     },
     checkUp(e) {
@@ -440,6 +510,10 @@ export default {
       for(let i=0; i<this.pointsSelect.length; i++) {
         this.pointsSelect[i].x = this.pointsSelect[i].x + obj.x
         this.pointsSelect[i].y = this.pointsSelect[i].y + obj.y
+        if(this.pointsSelect[i].type === 'straight' || this.pointsSelect[i].type === 'arrow') {
+          this.pointsSelect[i].x2 = this.pointsSelect[i].x2 + obj.x
+          this.pointsSelect[i].y2 = this.pointsSelect[i].y2 + obj.y
+        }
         this.points.push(this.pointsSelect[i])
       }
     },
@@ -449,7 +523,7 @@ export default {
       e.preventDefault()
       if(this.state === null) {
         this.checkDrawing = true
-        // this.checkDown(e)
+        this.checkDown(e)
         return
       }
       this.isDrawing = true
@@ -459,11 +533,24 @@ export default {
       }
       this.drawStart(obj)
     },
+    textDblclick() {
+      if(!this.contenteditable) this.contenteditable = true
+    },
+    textMouseDown(e) {
+      e = e || event
+      this.textDownX = e.offsetX
+      this.textDownY = e.offsetY
+      this.textMoveStart = true
+    },
     mouseMove (e) {
       e = e || event
       e.preventDefault()
+      if(this.textMoveStart) {
+        this.textX2 = e.offsetX*this.sratio - this.textDownX
+        this.textY2 = e.offsetY*this.sratio - this.textDownY
+      }
       if(this.state === null) {
-        // if(this.checkDrawing) this.checkMove(e)
+        if(this.checkDrawing) this.checkMove(e)
         return
       }
       if (this.isDrawing) {
@@ -479,7 +566,7 @@ export default {
       e.preventDefault()
       if(this.state === null) {
         this.checkDrawing = false
-        // this.checkUp(e)
+        this.checkUp(e)
         return
       }
       let obj = {
@@ -560,6 +647,7 @@ export default {
         this.ctx.fillStyle = this.color;
         this.ctx.fillText(arr[i],this.textX2,this.textY2 + this.fontSize*this.sratio*i + this.fontSize*this.sratio);
         this.ctx.stroke()
+        this.ctx.closePath()
       }
       this.points.push({
         x: this.textX2,
@@ -603,6 +691,7 @@ export default {
       arrowY = obj.y + botY;
       this.ctx.lineTo(arrowX, arrowY)
       this.ctx.stroke()
+      this.ctx.closePath()
       if(type === 'end') {
         this.points.push({
           x: this.textX,
@@ -633,6 +722,7 @@ export default {
       this.ctx.moveTo(this.textX, this.textY)
       this.ctx.lineTo(obj.x, obj.y)
       this.ctx.stroke()
+      this.ctx.closePath()
       if(type === 'end') {
         this.points.push({
           x: this.textX,
@@ -664,6 +754,7 @@ export default {
       this.ctx.moveTo(obj.x,this.textY)
       this.ctx.arc(this.textX, this.textY, obj.x-this.textX, 0, 2 * Math.PI, false);
       this.ctx.stroke()
+      this.ctx.closePath()
       if(type === 'end') {
         this.points.push({
           x: this.textX,
@@ -692,6 +783,7 @@ export default {
       this.ctx.strokeStyle = this.color
       this.ctx.rect(this.textX, this.textY, obj.x-this.textX, obj.y-this.textY);
       this.ctx.stroke()
+      this.ctx.closePath()
       if(type === 'end') {
         this.points.push({
           x: this.textX,
@@ -746,12 +838,65 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
     },
-    rectangleProcessing(data,v = {x:0,y:0}) {
+    rectangleProcessing(data,v) {
       this.ctx.beginPath()
       this.ctx.lineWidth = data.border * this.sratio
       this.ctx.strokeStyle = data.color
       this.ctx.strokeRect(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y, data.width*this.scales/data.scale, data.height*this.scales/data.scale);
       this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    circularProcessing(data,v) {
+      this.ctx.beginPath()
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      this.ctx.arc(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y, data.width*this.scales/data.scale, 0, 2 * Math.PI, false);
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    straightProcessing(data,v) {
+      this.ctx.beginPath()
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      this.ctx.moveTo(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y)
+      this.ctx.lineTo(data.x2*this.scales/data.scale + v.x, data.y2*this.scales/data.scale + v.y)
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    arrowProcessing(data,v) {
+      const angle = Math.atan2(data.y*this.scales/data.scale - data.y2*this.scales/data.scale, data.x*this.scales/data.scale - data.x2*this.scales/data.scale) * 180 / Math.PI
+      const angle1 = (angle + 20) * Math.PI / 180
+      const angle2 = (angle - 20) * Math.PI / 180
+      const topX = 30 * Math.cos(angle1)
+      const topY = 30 * Math.sin(angle1)
+      const botX = 30 * Math.cos(angle2)
+      const botY = 30 * Math.sin(angle2)
+      this.ctx.beginPath();
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      let arrowX, arrowY
+      this.ctx.moveTo(data.x2*this.scales/data.scale + v.x, data.y2*this.scales/data.scale + v.y);
+      this.ctx.lineTo(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y);
+      arrowX = data.x2*this.scales/data.scale + topX + v.x
+      arrowY = data.y2*this.scales/data.scale + topY + v.y
+      this.ctx.moveTo(arrowX, arrowY);
+      this.ctx.lineTo(data.x2*this.scales/data.scale + v.x, data.y2*this.scales/data.scale + v.y)
+      arrowX = data.x2*this.scales/data.scale + botX + v.x;
+      arrowY = data.y2*this.scales/data.scale + botY + v.y;
+      this.ctx.lineTo(arrowX, arrowY)
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    textProcessing(data,v) {
+      const arr = data.text
+      for(let i = 0; i < arr.length; i++) {
+        this.ctx.beginPath();
+        this.ctx.font = `${data.size*this.sratio}px 黑体`;
+        this.ctx.fillStyle = data.color;
+        this.ctx.fillText(arr[i],data.x*this.scales/data.scale + v.x,data.y*this.scales/data.scale + v.y + data.size*this.sratio*i + data.size*this.sratio);
+        this.ctx.stroke()
+        this.ctx.closePath()
+      }
     },
     // 处理数据
     processing() {
@@ -764,52 +909,16 @@ export default {
             this.rectangleProcessing(this.points[i],{x:0,y:0})
           }
           if(this.points[i].type === 'circular') {
-            this.ctx.beginPath()
-            this.ctx.lineWidth = this.points[i].border * this.sratio
-            this.ctx.strokeStyle = this.points[i].color
-            this.ctx.arc(this.points[i].x*this.scales/this.points[i].scale, this.points[i].y*this.scales/this.points[i].scale, this.points[i].width*this.scales/this.points[i].scale, 0, 2 * Math.PI, false);
-            this.ctx.stroke()
+            this.circularProcessing(this.points[i],{x:0,y:0})
           }
           if(this.points[i].type === 'straight') {
-            this.ctx.beginPath()
-            this.ctx.lineWidth = this.points[i].border * this.sratio
-            this.ctx.strokeStyle = this.points[i].color
-            this.ctx.moveTo(this.points[i].x*this.scales/this.points[i].scale, this.points[i].y*this.scales/this.points[i].scale)
-            this.ctx.lineTo(this.points[i].x2*this.scales/this.points[i].scale, this.points[i].y2*this.scales/this.points[i].scale)
-            this.ctx.stroke()
+            this.straightProcessing(this.points[i],{x:0,y:0})
           }
           if(this.points[i].type === 'arrow') {
-            const angle = Math.atan2(this.points[i].y*this.scales/this.points[i].scale - this.points[i].y2*this.scales/this.points[i].scale, this.points[i].x*this.scales/this.points[i].scale - this.points[i].x2*this.scales/this.points[i].scale) * 180 / Math.PI
-            const angle1 = (angle + 20) * Math.PI / 180
-            const angle2 = (angle - 20) * Math.PI / 180
-            const topX = 30 * Math.cos(angle1)
-            const topY = 30 * Math.sin(angle1)
-            const botX = 30 * Math.cos(angle2)
-            const botY = 30 * Math.sin(angle2)
-            this.ctx.beginPath();
-            this.ctx.lineWidth = this.points[i].border * this.sratio
-            this.ctx.strokeStyle = this.points[i].color
-            let arrowX, arrowY
-            this.ctx.moveTo(this.points[i].x2*this.scales/this.points[i].scale, this.points[i].y2*this.scales/this.points[i].scale);
-            this.ctx.lineTo(this.points[i].x*this.scales/this.points[i].scale, this.points[i].y*this.scales/this.points[i].scale);
-            arrowX = this.points[i].x2*this.scales/this.points[i].scale + topX
-            arrowY = this.points[i].y2*this.scales/this.points[i].scale + topY
-            this.ctx.moveTo(arrowX, arrowY);
-            this.ctx.lineTo(this.points[i].x2*this.scales/this.points[i].scale, this.points[i].y2*this.scales/this.points[i].scale)
-            arrowX = this.points[i].x2*this.scales/this.points[i].scale + botX;
-            arrowY = this.points[i].y2*this.scales/this.points[i].scale + botY;
-            this.ctx.lineTo(arrowX, arrowY)
-            this.ctx.stroke();
+            this.arrowProcessing(this.points[i],{x:0,y:0})
           }
           if(this.points[i].type === 'text') {
-            const arr = this.points[i].text
-            for(let j = 0; j < arr.length; j++) {
-              this.ctx.beginPath();
-              this.ctx.font = `${this.points[i].size*this.sratio}px 黑体`;
-              this.ctx.fillStyle = this.points[i].color;
-              this.ctx.fillText(arr[j],this.points[i].x*this.scales/this.points[i].scale,this.points[i].y*this.scales/this.points[i].scale + this.points[i].size*this.sratio*j + this.points[i].size*this.sratio);
-              this.ctx.stroke();
-            }
+            this.textProcessing(this.points[i],{x:0,y:0})
           }
         }
       }
@@ -926,7 +1035,9 @@ export default {
   position: absolute;
   z-index: 10;
   display: inline-block;
-  min-width: 100px;
+  line-height: 1.1;
+  user-select: none;
+  transition: all 0s;
 }
 .text-input{
   width: 100%;

package/src/index.js

@@ -81,7 +81,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.293',
+    version: '1.32.294',
     install,
     Calendar,
     Message,