Browse Source

fix: 更新整个区域的canvas时,新获取的区域的大小如果改变了的话,要计算到整个区域中;添加剪切快捷键;

wzl 1 year ago
parent
commit
1cf4d5a70a
1 changed files with 43 additions and 34 deletions
  1. 43 34
      packages/core/src/editor/text_editor.js

+ 43 - 34
packages/core/src/editor/text_editor.js

@@ -318,32 +318,12 @@ export class TextEditor {
     }
   }
 
-  calculate (start, end, pure) {
-    const initRect = this.rectCalc({ start, end });
-
-    if (pure) {
-      return {
-        top: initRect.top,
-        left: initRect.left,
-        width: initRect.width,
-        height: initRect.height,
-      }
-    } else {
-      return {
-        top: initRect.top - 5,
-        left: initRect.left - 5,
-        width: initRect.width + 10,
-        height: initRect.height + 10,
-      }
-    }
-  }
-
-  rectCalc ({ start, end }) {
+  rectCalc (start, end, padding = 5) {
     return {
-      top: start.y < end.y ? start.y : end.y,
-      left: start.x < end.x ? start.x : end.x,
-      width: Math.abs(end.x - start.x),
-      height: Math.abs(end.y - start.y),
+      top: (start.y < end.y ? start.y : end.y) - padding,
+      left: (start.x < end.x ? start.x : end.x) - padding,
+      width: Math.abs(end.x - start.x) + padding * 2,
+      height: Math.abs(end.y - start.y) + padding * 2,
     }
   }
   
@@ -503,8 +483,7 @@ export class TextEditor {
           editAreaPtr: this.editAreaPtr,
           rect
         })
-        const wholeArea = this.getEntireArea(oldPoint, newPoint)
-        this.updateCanvas(wholeArea)
+        this.updateCanvas({oldPoint, newPoint})
 
       } else if (!this.mouseMoved && flag) {
         this.state = 2
@@ -866,6 +845,13 @@ export class TextEditor {
       const copyText = await this.getText()
       copy(copyText)
       return
+    } else if ((e.metaKey || e.ctrlKey) && (e.key === 'x' || e.key === 'X') && this.selectedCharRange) { // 剪切
+      const copyText = await this.getText()
+      copy(copyText)
+
+      const newChar = await this.getCharPlace('DeleteChars')
+      this.activeCharPlace = newChar
+      this.selectedCharRange = null
     } else {
       return
     }
@@ -902,12 +888,12 @@ export class TextEditor {
     this.start = start
     this.end = end
 
-    const rect = this.calculate(start, end)
+    const rect = this.rectCalc(start, end)
     this.rect = rect
   }
 
   // 更新canvas图
-  async updateCanvas(wholeArea, oldRect) {
+  async updateCanvas(whole, oldRect) {
     await this.getRect()
 
     if (this.frameContainer && this.outerLine) {
@@ -924,13 +910,33 @@ export class TextEditor {
       })
     }
 
-    if (wholeArea) {
+    if (whole) {
+      const { oldPoint, newPoint } = whole
+      const wholeArea = this.getEntireArea(oldPoint, newPoint)
+
       const { start, end } = this.getActualRect(
         this.viewport,
         this.scale,
         wholeArea
       )
-      const wholeAreaRect = this.calculate(start, end)
+      let wholeAreaRect = this.rectCalc(start, end)
+
+      const oldRect = this.rectCalc(oldPoint.start, oldPoint.end)
+      const newWholeArea = this.getEntireArea(oldRect, this.rect)
+      const newWholeAreaRect = {
+        left: newWholeArea.left,
+        top: newWholeArea.top,
+        width: newWholeArea.right - newWholeArea.left,
+        height: newWholeArea.bottom - newWholeArea.top
+      }
+      if (
+        parseInt(wholeAreaRect.left) !== parseInt(newWholeArea.left) ||
+        parseInt(wholeAreaRect.top) !== parseInt(newWholeArea.top) ||
+        parseInt(wholeAreaRect.width) !== parseInt(newWholeArea.width) ||
+        parseInt(wholeAreaRect.height) !== parseInt(newWholeArea.height)
+      ) {
+        wholeAreaRect = newWholeAreaRect
+      }
 
       const imgRect = {
         left: parseInt(wholeAreaRect.left * this.ratio),
@@ -942,6 +948,9 @@ export class TextEditor {
       }
       this.imgRect = imgRect
 
+      this.canvas.width = this.rect.width * this.ratio
+      this.canvas.height = this.rect.height * this.ratio
+
     } else if (oldRect) {
       const wholeAreaRect = this.getEntireArea(oldRect, this.rect)
 
@@ -1094,7 +1103,7 @@ export class TextEditor {
 
   // 更新outerline框的位置大小
   updateOutline ({ start, end }) {
-    const rect = this.calculate(start, end)
+    const rect = this.rectCalc(start, end)
 
     this.newStart = start
     this.newEnd = end
@@ -1169,7 +1178,7 @@ export class TextEditor {
       this.start = start
       this.end = end
 
-      const selectedRect = this.calculate(start, end, true)
+      const selectedRect = this.rectCalc(start, end, 0)
       selectedRectList.push(selectedRect)
     }
     return selectedRectList
@@ -1380,7 +1389,7 @@ export class TextEditor {
     return {r, g, b}
   }
 
-  // 计算编辑区域移动后,影响的整个区域的位置
+  // 计算编辑区域大小变化后,影响的整个区域的位置
   getEntireArea (oldPoint, newPoint) {
     let area = null
     if (oldPoint.start && newPoint.start) {