fix: v2.4.2修复测试问题（按键删除整块文本/图片区域；添加/编辑文本/图片模式下只显示文本/图片区域；实时预览属性面板图片等）

packages/core/src/editor/content_container.js

@@ -24,6 +24,7 @@ export class ContentContainer {
     this._selectedFrameIndex = -1
 
     this.onHandleTool = this.handleTool.bind(this)
+    this.onKeydown = this.handleKeyDown.bind(this)
   }
 
   async init() {
@@ -52,6 +53,7 @@ export class ContentContainer {
     await this.init()
     
     this.eventBus._on('toolChanged', this.onHandleTool)
+    document.addEventListener('keydown', this.onKeydown)
 
     const result = await this.messageHandler.sendWithPromise('BeginEdit', {
       editPagePtr: this.editPagePtr,
@@ -86,7 +88,8 @@ export class ContentContainer {
           viewport: this.viewport,
           scale: this.scale,
           messageHandler: this.messageHandler,
-          pageViewer: this.pageViewer
+          pageViewer: this.pageViewer,
+          hidden: this.tool === 'addImage' || this.tool === 'editImage'
         })
         this.frameEditorList.push(frameEditor)
         continue
@@ -106,7 +109,8 @@ export class ContentContainer {
           scale: this.scale,
           messageHandler: this.messageHandler,
           pageViewer: this.pageViewer,
-          $t: this.$t
+          $t: this.$t,
+          hidden: this.tool === 'addText' || this.tool === 'editText'
         })
         this.frameEditorList.push(frameEditor)
       }
@@ -148,6 +152,7 @@ export class ContentContainer {
     this.destroyed = true
 
     this.eventBus._off('toolChanged', this.onHandleTool)
+    document.removeEventListener('keydown', this.onKeydown)
 
     this.messageHandler.sendWithPromise('ClearEditPage', this.editPagePtr)
   }
@@ -182,6 +187,15 @@ export class ContentContainer {
       }
       this.addImageManager()
     }
+
+    if (this.tool === 'addText' || this.tool === 'editText') {
+      this.eventBus.dispatch('showContentEditorType', 'text')
+    } else if (this.tool === 'addImage' || this.tool === 'editImage') {
+      this.eventBus.dispatch('showContentEditorType', 'image')
+    } else {
+      this.eventBus.dispatch('showContentEditorType', '')
+    }
+    this.eventBus.dispatch('contentPropertyChange', { isOpen: false })
   }
 
   addTextManager () {
@@ -289,6 +303,7 @@ export class ContentContainer {
 
   removeEditor (index) {
     this.frameEditorList.splice(index, 1)
+    this.frameEditorList.forEach((editor, i) => editor.editAreaIndex = i)
   }
 
   resetTools () {
@@ -301,4 +316,14 @@ export class ContentContainer {
       this.imageManager.reset()
     }
   }
+
+  handleKeyDown (e) {
+    const selectedEditor = this.frameEditorList[this._selectedFrameIndex]
+    if (!selectedEditor || selectedEditor.state !== 1) return
+
+    const keyCode = e.keyCode || e.which
+    if (keyCode === 8 || keyCode === 46) { // 8 delete键，46 backspace键
+      selectedEditor.remove()
+    }
+  }
 }

packages/core/src/editor/image_editor.js

@@ -15,7 +15,8 @@ export class ImageEditor {
     messageHandler,
     newAdd,
     pageViewer,
-    $t
+    $t,
+    hidden
   }) {
     this.eventBus = eventBus
     this.contentContainer = contentContainer
@@ -30,7 +31,9 @@ export class ImageEditor {
     this.newAdd = newAdd
     this.pageViewer = pageViewer
     this.$t = $t
+    this.hidden = hidden
 
+    this.type = 'image'
     this.deleteSvgStr = `<rect width="30" height="30" rx="2" fill="#DDE9FF"/>
       <path fill-rule="evenodd" clip-rule="evenodd" d="M19 6.5V9.5H24V10.5H21.5V23.5H8.5V10.5H6V9.5H11V6.5H19ZM9.5 10.5V22.5H20.5V10.5H9.5ZM18 7.5V9.5H12V7.5H18ZM13.5 13V20H12.5V13H13.5ZM17.5 20V13H16.5V20H17.5Z" fill="#333333"/>
     `
@@ -65,12 +68,14 @@ export class ImageEditor {
     this.onMousemove = this.handleMouseMove.bind(this)
     this.onHandlePropertyPanelChanged = this.handlePropertyPanelChanged.bind(this)
     this.onDelete = this.handleDelete.bind(this)
+    this.onShowContentEditorType = this.handleShow.bind(this)
 
     this.render()
   }
 
   async render () {
     this.eventBus._on('imagePropertyChanged', this.onHandlePropertyPanelChanged)
+    this.eventBus._on('showContentEditorType', this.onShowContentEditorType)
 
     await this.updateCanvas()
     this.opacity = await this.messageHandler.sendWithPromise('GetImageTransparency', this.editAreaPtr)
@@ -82,7 +87,8 @@ export class ImageEditor {
         left: this.rect.left + 'px',
         top: this.rect.top + 'px',
         width: this.rect.width + 'px',
-        height: this.rect.height + 'px'
+        height: this.rect.height + 'px',
+        display: this.hidden ? 'none' : 'block'
       },
       {
         class: 'frame-container',
@@ -380,7 +386,7 @@ export class ImageEditor {
   }
 
   handleMouseDown (e) {
-    if (e.button === 2) return // 右键点击不执行
+    if (e.button === 2 || this.hidden) return // 右键点击不执行
 
     if (this.state > 0) {
       const operatorId = e.target.getAttribute('data-id')
@@ -662,7 +668,7 @@ export class ImageEditor {
 
     this.state = 0
     this.imageUrl = null
-    this.contentContainer.selectedFrameIndex = -1
+    if (!this.removed) this.contentContainer.selectedFrameIndex = -1
     this.moveRect.style.cursor = 'all-scroll'
 
     this.updateRectStyle()
@@ -1069,6 +1075,7 @@ export class ImageEditor {
 
     const oldRect = this.rect
     await this.updateCanvas(null, oldRect)
+    this.updateOriginalImageUrl()
   }
 
   // 计算编辑区域大小变化后，影响的整个区域的位置
@@ -1136,6 +1143,10 @@ export class ImageEditor {
     this.eventBus.dispatch('contentPropertyChange', { type: 'image', isOpen: false })
   }
 
+  remove() {
+    this.handleDelete()
+  }
+
   // 上传图片并获取宽高
   uploadFile () {
     return new Promise((resolve, reject) => {
@@ -1380,4 +1391,15 @@ export class ImageEditor {
     a.click()
     document.body.removeChild(a)
   }
+
+  // 文本模式下隐藏
+  handleShow (type) {
+    if (type === 'text') {
+      this.hidden = true
+      this.frameContainer && (this.frameContainer.style.display = 'none')
+      } else {
+      this.hidden = false
+      this.frameContainer && (this.frameContainer.style.display = 'block')
+    }
+  }
 }

packages/core/src/editor/text_editor.js

@@ -15,7 +15,8 @@ export class TextEditor {
     scale,
     messageHandler,
     newAdd,
-    pageViewer
+    pageViewer,
+    hidden
   }) {
     this.eventBus = eventBus
     this.contentContainer = contentContainer
@@ -29,6 +30,9 @@ export class TextEditor {
     this.messageHandler = messageHandler
     this.newAdd = newAdd
     this.pageViewer = pageViewer
+    this.hidden = hidden
+    
+    this.type = 'text'
 
     this.frame = null
     this.canvas = null
@@ -47,6 +51,7 @@ export class TextEditor {
     this.mouseDown = false
     this.moving = false
     this.ratio = window.devicePixelRatio || 1
+    this.removed = false
 
     this.start = null
     this.end = null
@@ -74,12 +79,14 @@ export class TextEditor {
     this.onHandlePropertyPanelChanged = this.handlePropertyPanelChanged.bind(this)
     this.onCompositionstart = this.handleCompositionstart.bind(this)
     this.onCompositionend = this.handleCompositionend.bind(this)
+    this.onShowContentEditorType = this.handleShow.bind(this)
 
     this.render()
   }
 
   async render () {
     this.eventBus._on('textPropertyChanged', this.onHandlePropertyPanelChanged)
+    this.eventBus._on('showContentEditorType', this.onShowContentEditorType)
 
     await this.getRect()
     this.canvas = document.createElement('canvas')
@@ -91,7 +98,8 @@ export class TextEditor {
         left: this.rect.left + 'px',
         top: this.rect.top + 'px',
         width: this.rect.width + 'px',
-        height: this.rect.height + 'px'
+        height: this.rect.height + 'px',
+        display: this.hidden ? 'none' : 'block'
       },
       {
         class: 'frame-container',
@@ -379,7 +387,7 @@ export class TextEditor {
   }
 
   handleMouseDown (e) {
-    if (e.button === 2) return // 右键点击不执行
+    if (e.button === 2 || this.hidden) return // 右键点击不执行
 
     if (this.state === 1) {
       const operatorId = e.target.getAttribute('data-id')
@@ -426,6 +434,11 @@ export class TextEditor {
     if (e && !this.textContainer.contains(e.target) && this.state === 0) return
     if (this.contentContainer.selectedFrameIndex !== -1 && this.contentContainer.selectedFrameIndex !== this.editAreaIndex && this.state === 0) return
 
+    document.removeEventListener(this.mousemove, this.onMousemove)
+    document.removeEventListener(this.mouseup, this.onMouseup)
+
+    this.textContainer.removeEventListener(this.mousemove, this.onMousemove)
+
     if (e && e.target !== this.textarea && e.target !== this.textContainer) {
       let offsetX, offsetY
       if (isMobileDevice) {
@@ -584,14 +597,9 @@ export class TextEditor {
 
     this.frameContainer.classList.add('selected')
 
-    if (this.state === 1) {
+    if (this.state === 1 && !this.mouseMoved) {
       onClickOutsideUp([this.textContainer, this.outerLine, document.querySelector('.editor-panel'), document.getElementById('propertyPanelButton')], this.handleOutside.bind(this))
     }
-    
-    document.removeEventListener(this.mousemove, this.onMousemove)
-    document.removeEventListener(this.mouseup, this.onMouseup)
-
-    this.textContainer.removeEventListener(this.mousemove, this.onMousemove)
   }
 
   async handleMouseMove (e) {
@@ -772,7 +780,10 @@ export class TextEditor {
   }
 
   async handleOutside () {
-    if (this.moving) return
+    if (this.moving) {
+      onClickOutsideUp([this.textContainer, this.outerLine, document.querySelector('.editor-panel'), document.getElementById('propertyPanelButton')], this.handleOutside.bind(this))
+      return
+    }
     
     this.state = this.state === 2 ? 1 : this.state === 1 ? 0 : this.state
 
@@ -786,7 +797,7 @@ export class TextEditor {
       this.frameContainer.classList.remove('selected')
       this.outerLine.remove()
 
-      this.contentContainer.selectedFrameIndex = -1
+      if (!this.removed) this.contentContainer.selectedFrameIndex = -1
 
       setTimeout(() => {
         const hasItem = document.querySelector('.frame-container.selected')
@@ -800,8 +811,6 @@ export class TextEditor {
     if (this.state === 1) {
       const text = await this.getText()
       if (text.length === 0) {
-        await this.outerLine.remove()
-        this.contentContainer.selectedFrameIndex = -1
         this.remove()
         return
       }
@@ -960,7 +969,7 @@ export class TextEditor {
 
   // 更新canvas图
   async updateCanvas(whole, oldRect) {
-    await this.getRect()
+    if (!this.removed) await this.getRect()
 
     if (this.frameContainer && this.outerLine) {
       this.updateOutline({
@@ -1638,7 +1647,10 @@ export class TextEditor {
 
   // 删除区域
   async remove () {
+    await this.outerLine.remove()
     this.frameContainer.remove()
+    this.contentContainer.selectedFrameIndex = -1
+    this.removed = true
 
     await this.messageHandler.send('RemoveEditAreaByIndex', {
       editPagePtr: this.editPagePtr,
@@ -1648,8 +1660,10 @@ export class TextEditor {
     //   editPagePtr: this.editPagePtr,
     //   editAreaPtr: this.editAreaPtr
     // })
-    
+
+    this.updateCanvas()
     this.contentContainer.removeEditor(this.editAreaIndex)
+    this.eventBus.dispatch('contentPropertyChange', { type: 'text', isOpen: false })
   }
 
   // 复制区域对象
@@ -1670,4 +1684,15 @@ export class TextEditor {
     this.selectedCharRange = { start, end }
     if (this.state === 2) this.selectedRectList = await this.getCharsRect(start, end)
   }
+
+  // 图片模式下隐藏
+  handleShow (type) {
+    if (type === 'image') {
+      this.hidden = true
+      this.frameContainer && (this.frameContainer.style.display = 'none')
+    } else {
+      this.hidden = false
+      this.frameContainer && (this.frameContainer.style.display = 'block')
+    }
+  }
 }