|
@@ -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) {
|