fix: 优化页面编辑；修复bug

packages/core/src/crop_page.js

@@ -114,7 +114,7 @@ export default class CropPage {
             position: 'absolute',
             border: '1px solid #1460F3',
             cursor: 'all-scroll',
-            zIndex: 1
+            zIndex: 2
           },
           { class: 'crop-box', 'data-id': 'move' }
         )
@@ -570,7 +570,7 @@ export default class CropPage {
         left: `${this.rect.left}px`,
         width: `${this.rect.right - this.rect.left}px`,
         height: `${this.rect.bottom - this.rect.top}px`,
-        zIndex: 1
+        zIndex: 2
       },
       { class: 'crop-box', 'data-id': 'move' }
     )

packages/core/src/editor/content_container.js

@@ -407,9 +407,9 @@ export class ContentContainer {
       })
       if (!editAreaPtr) continue
 
-      const isTextPtr = await this.messageHandler.sendWithPromise('IsTextArea', editAreaPtr)
-      if (isTextPtr) {
-        const frameEditor = new TextEditor({
+      let frameEditor
+      if (await this.messageHandler.sendWithPromise('IsTextArea', editAreaPtr)) {
+        frameEditor = new TextEditor({
           eventBus: this.eventBus,
           contentContainer: this,
           container: this.contentContainer,
@@ -423,13 +423,8 @@ export class ContentContainer {
           pageViewer: this.pageViewer,
           hidden: this.tool === 'addImage'
         })
-        newFrameEditorList.push(frameEditor)
-        continue
-      }
-
-      const isImagePtr = await this.messageHandler.sendWithPromise('IsImageArea', editAreaPtr)
-      if (isImagePtr) {
-        const frameEditor = new ImageEditor({
+      } else if (await this.messageHandler.sendWithPromise('IsImageArea', editAreaPtr)) {
+        frameEditor = new ImageEditor({
           eventBus: this.eventBus,
           contentContainer: this,
           container: this.contentContainer,
@@ -444,12 +439,12 @@ export class ContentContainer {
           $t: this.$t,
           hidden: this.tool === 'addText'
         })
-        newFrameEditorList.push(frameEditor)
       }
+      frameEditor && newFrameEditorList.push(frameEditor)
     }
 
-    this.frameEditorList.forEach(editor => {
-      editor.updateCanvas(null, true)
+    this.frameEditorList.forEach(async editor => {
+      await editor.updateCanvas(null, true)
       editor.removeViewer()
     })
     this.frameEditorList.length = 0

packages/core/src/editor/image_editor.js

@@ -35,8 +35,7 @@ export class ImageEditor {
 
     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"/>
-    `
+      <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"/>`
     this.frame = null
     this.borderWidth = 2
     this.pointWidth = 6

packages/core/src/editor/text_editor.js

@@ -33,6 +33,8 @@ export class TextEditor {
     this.hidden = hidden
     
     this.type = 'text'
+    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"/>`
 
     this.frame = null
     this.canvas = null
@@ -153,6 +155,35 @@ export class TextEditor {
     this.textContainer.addEventListener(this.mousedown, this.onMousedown)
     this.textContainer.addEventListener(this.mouseup, this.onMouseup)
 
+    this.outerLineContainer = document.createElement('div')
+    this.outerLineContainer.className = 'outline-container'
+    this.outerLineContainer.style.position = 'absolute'
+
+    this.deletetButton = createSvg(
+      "svg",
+      {
+        width: "30",
+        height: "30",
+        viewBox: "0 0 30 30",
+        fill: "none",
+        class: 'delete-button'
+      },
+      {
+        position: 'absolute',
+        width: '30px',
+        height: '30px',
+        cursor: 'pointer',
+        zIndex: 2
+      }
+    )
+    this.deletetButton.addEventListener('click', this.remove.bind(this))
+    this.deletetButton.innerHTML = this.deleteSvgStr
+
+    const left = (this.rect.left + this.rect.width - 30) + 'px'
+    const top = (this.rect.top + this.rect.height + 8) + 'px'
+    this.deletetButton.style.left = left
+    this.deletetButton.style.top = top
+
     const outerLine = createSvg('svg', {
       class: 'outerline'
     }, {
@@ -302,6 +333,8 @@ export class TextEditor {
     this.outerLine.append(this.rightRect)
     this.outerLine.append(this.topRightRect)
     this.outerLine.append(this.topRect)
+    this.outerLineContainer.append(this.outerLine)
+    this.outerLineContainer.append(this.deletetButton)
 
     this.outerLine.addEventListener(this.mousedown, this.onMousedown)
     this.outerLine.addEventListener(this.mouseup, this.onMouseup)
@@ -312,7 +345,7 @@ export class TextEditor {
       this.newAdd = false
     }
     
-    this.updateCanvas()
+    await this.updateCanvas()
   }
 
   getActualRect (viewport, s, frame) {
@@ -500,7 +533,7 @@ export class TextEditor {
         this.end = this.newEnd
       }
       
-      this.container.append(this.outerLine)
+      this.container.append(this.outerLineContainer)
 
       if (this.mouseMoved) {
         const { start, end } = this.getInitialPoint(this.start, this.end)
@@ -528,7 +561,7 @@ export class TextEditor {
     }
     
     if (this.state === 2) {
-      this.outerLine.remove()
+      this.outerLineContainer.remove()
       this.frameContainer.classList.add('editing')
 
       let endPoint
@@ -559,6 +592,7 @@ export class TextEditor {
       }
       const { start, end } = await this.getCharsRange(this.startPoint, endPoint)
       this.activeCharPlace = end
+      this.getTextStyle()
 
       if (!this.cursor) {
         const cursor = createSvg(
@@ -588,10 +622,6 @@ export class TextEditor {
         this.clearSelectText()
       }
 
-      if (!this.selectedRects) {
-        this.getTextStyle()
-      }
-
       this.textarea.focus()
       this.textarea.addEventListener('blur', this.onBlur)
       this.textarea.addEventListener('keydown', this.onKeydown)
@@ -608,6 +638,7 @@ export class TextEditor {
       onClickOutsideUp([
         this.textContainer,
         this.outerLine,
+        this.deletetButton,
         document.querySelector('.editor-panel'),
         document.getElementById('propertyPanelButton'),
         document.getElementById('undo'),
@@ -798,6 +829,7 @@ export class TextEditor {
       onClickOutsideUp([
         this.textContainer,
         this.outerLine,
+        this.deletetButton,
         document.querySelector('.editor-panel'),
         document.getElementById('propertyPanelButton'),
         document.getElementById('undo'),
@@ -816,7 +848,7 @@ export class TextEditor {
 
     if (this.state === 0) {
       this.frameContainer?.classList.remove('selected')
-      this.outerLine?.remove()
+      this.outerLineContainer?.remove()
 
       if (!this.removed) this.contentContainer.selectedFrameIndex = -1
 
@@ -839,10 +871,11 @@ export class TextEditor {
       this.textContainer.removeEventListener(this.mousemove, this.onMousemove)
 
       if (!this.hidden) {
-        this.container.append(this.outerLine)
+        this.container.append(this.outerLineContainer)
         onClickOutsideUp([
           this.textContainer,
           this.outerLine,
+          this.deletetButton,
           document.querySelector('.editor-panel'),
           document.getElementById('propertyPanelButton'),
           document.getElementById('undo'),
@@ -868,7 +901,7 @@ export class TextEditor {
 
     this.isToolKey = isToolKey
 
-    if (keyCode === 8 || keyCode === 46) { // 8 delete键，46 backspace键
+    if (keyCode === 8 || keyCode === 46) { // 8 backspace键，46 delete键
       if (this.activeCharPlace.SectionIndex === 0
         && this.activeCharPlace.LineIndex === 0
         && this.activeCharPlace.RunIndex === 0
@@ -1001,7 +1034,7 @@ export class TextEditor {
   async updateCanvas(whole, oldRect) {
     if (!this.removed) await this.getRect()
 
-    if (this.frameContainer && this.outerLine) {
+    if (this.frameContainer && this.outerLineContainer) {
       this.updateOutline({
         start: this.start,
         end: this.end
@@ -1233,6 +1266,11 @@ export class TextEditor {
       height: rect.height + this.borderWidth + this.pointHeight / 2 + 'px',
     })
 
+    const left = (rect.left + rect.width - 30) + 'px'
+    const top = (rect.top + rect.height + 8) + 'px'
+    this.deletetButton.style.left = left
+    this.deletetButton.style.top = top
+
     this.moveRect.setAttribute('width', rect.width - this.borderWidth)
     this.moveRect.setAttribute('height', rect.height - this.borderWidth)
     
@@ -1539,7 +1577,9 @@ export class TextEditor {
         const fontStyle = props.fontStyle
 
         await this.setCharsFontStyle('ClearCharsFontBold')
+        await this.refreshSelecedRange()
         await this.setCharsFontStyle('ClearCharsFontItalic')
+        await this.refreshSelecedRange()
 
         if (fontStyle === 1) {
           await this.setCharsFontStyle('SetCharsFontBold')
@@ -1561,18 +1601,7 @@ export class TextEditor {
     await this.updateCanvas(null, true)
 
     if (this.selectedCharRange && this.state === 2) {
-      const { start, end } = await this.messageHandler.sendWithPromise('RefreshRange', {
-        editAreaPtr: this.editAreaPtr,
-        start: this.selectedCharRange.start,
-        end: this.selectedCharRange.end,
-      })
-      this.selectedCharRange = { start, end }
-
-      if (this.activeCharPlace.CharIndex === start.CharIndex) {
-        this.activeCharPlace = start
-      } else {
-        this.activeCharPlace = end
-      }
+      await this.refreshSelecedRange()
     }
     
     if (this.state === 2) {
@@ -1686,6 +1715,7 @@ export class TextEditor {
     onClickOutsideUp([
       this.textContainer,
       this.outerLine,
+      this.deletetButton,
       document.querySelector('.editor-panel'),
       document.getElementById('propertyPanelButton'),
       document.getElementById('undo'),
@@ -1698,7 +1728,7 @@ export class TextEditor {
     this.state = 0
     await this.handleOutside()
 
-    await this.outerLine.remove()
+    await this.outerLineContainer.remove()
     this.frameContainer.remove()
     this.frameContainer = null
     this.contentContainer.selectedFrameIndex = -1
@@ -1723,7 +1753,7 @@ export class TextEditor {
     this.state = 0
     // await this.handleOutside()
     
-    this.outerLine?.remove()
+    this.outerLineContainer?.remove()
     this.frameContainer?.remove()
     this.frameContainer = null
     this.contentContainer.selectedFrameIndex = -1
@@ -1778,7 +1808,7 @@ export class TextEditor {
   async updateCanvasAfterUndoRedo() {
     await this.getRect()
 
-    if (this.frameContainer && this.outerLine) {
+    if (this.frameContainer && this.outerLineContainer) {
       this.updateOutline({
         start: this.start,
         end: this.end
@@ -1823,4 +1853,20 @@ export class TextEditor {
       this.getTextStyle()
     }
   }
+
+  // 修改属性后，刷新选中范围的数据
+  async refreshSelecedRange() {
+    const { start, end } = await this.messageHandler.sendWithPromise('RefreshRange', {
+      editAreaPtr: this.editAreaPtr,
+      start: this.selectedCharRange.start,
+      end: this.selectedCharRange.end,
+    })
+    this.selectedCharRange = { start, end }
+
+    if (this.activeCharPlace.CharIndex === start.CharIndex) {
+      this.activeCharPlace = start
+    } else {
+      this.activeCharPlace = end
+    }
+  }
 }

packages/core/src/worker/compdfkit_worker.js

@@ -621,7 +621,7 @@ class CPDFWorker {
       if (annotation.moveOption) {
         setWidgetItems(annotation)
       }
-      if (annotation.deleteItemIndex) {
+      if (annotation.hasOwnProperty('deleteItemIndex')) {
         deleteWidgetItem(annotation)
       }
       if (annotation.textAlignment) {
@@ -906,7 +906,7 @@ class CPDFWorker {
         const ptr = pagesPtr[i]
         const pagePtr = ptr.pagePtr
         const textPtr = ptr.textPtr
-        const textFindPtr = Module._InitTextFind(textPtr)
+        const textFindPtr = Module._InitTextFind()
         Module._FindStart(textPtr, textFindPtr, text, 0, 0)
         result = licenseErrorMessage('PDF VIEWER SEARCH')
         if (result.code) {

packages/webview/src/assets/main.scss

@@ -45,6 +45,10 @@ input, button, label, textarea, form, select, #app {
   font-size: 13px;
 }
 
+button {
+  outline: none;
+}
+
 input, textarea, select {
   border-radius: 2px;
 
@@ -189,7 +193,7 @@ input, textarea, select {
 
 .annotationContainer > div {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;

packages/webview/src/components/DocumentContainer/DocumentContainer.vue

@@ -364,7 +364,7 @@ window.instances.UI.loadDocument = async (file) => {
   left: 0;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
-  z-index: 1;
+  z-index: 2;
 }
 
 .annotationLayer svg {

packages/webview/src/components/DocumentEditorContainer/DocumentEditorContainer.vue

@@ -638,6 +638,7 @@ const handleAutoScroll = (clientY) => {
         justify-content: center;
         width: 100%;
         height: calc(100% - 24px);
+        user-select: none;
 
         img {
           pointer-events: none;

packages/webview/src/components/Popups/TextPopup.vue

@@ -116,7 +116,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 4px 8px;
-  z-index: 1;
+  z-index: 2;
   border-radius: 4px;
   background: var(--c-header-bg);
   box-shadow: 0 0 3px 0 #868e96;