add: 交互逻辑优化

packages/core/src/TextSelection.ts

@@ -278,17 +278,32 @@ export default class TextSelection {
         color: this.color,
         contents: this._selection.textContent || undefined
       }
+
       if (this.tool === 'redaction' || this.tool === 'remove') {
-        annotationData.type = 'redact'
-        annotationData.erasure = this.tool === 'remove'
-        annotationData.fillColor = 'rgb(0, 0, 0)'
-        delete annotationData.opacity
+        for (let i = 0; i < this.rects.length; i++) {
+          const rect = this.rects[i]
+          const redactData = {
+            operate: 'add-annot',
+            type: 'redact',
+            pageIndex: this.pageIndex,
+            date: new Date(),
+            rect,
+            color: this.color,
+            erasure: this.tool === 'remove'
+          }
+          this.tool === 'redaction' && (redactData.fillColor = 'rgb(0, 0, 0)')
+
+          this.eventBus.dispatch('annotationChange', {
+            type: 'add',
+            annotation: redactData
+          })
+        }
+      } else {
+        this.eventBus.dispatch('annotationChange', {
+          type: 'add',
+          annotation: annotationData
+        })
       }
-
-      this.eventBus.dispatch('annotationChange', {
-        type: 'add',
-        annotation: annotationData
-      })
       this.cleanSelection()
     }
     this.startPoint = null
@@ -341,7 +356,7 @@ export default class TextSelection {
         PointY: bottom
       }
       quadPoints.push(leftTop, rightTop, leftBottom, rightBottom)
-      rects.push(rect)
+      rects.push({ top, left, right, bottom })
       this.drawSelection(rect)
     }
     this.quadPoints = quadPoints

packages/core/src/annotation/layer.js

@@ -584,6 +584,19 @@ class ComPDFAnnotationLayer {
           })
           this.annotationsArray.push(signatureFields)
         }
+        if (annotation.type === 'redact' && !annotation.isDelete) {
+          const redaction = new Redaction({
+            container: this.div,
+            annotation,
+            page: this.page,
+            viewport: this.viewport,
+            scale: this.scale,
+            eventBus: this.eventBus,
+            layer: this,
+            messageHandler: this.messageHandler
+          })
+          this.annotationsArray.push(redaction)
+        }
       }
     }
 

packages/core/src/annotation/paint/redaction.js

@@ -99,13 +99,6 @@ export default class PaintRedaction {
       let start = getInitialPoint(initStartPoint, this.viewport, this.viewport.scale)
       let end = getInitialPoint(initEndPoint, this.viewport, this.viewport.scale)
 
-      const annotationData = {
-        operate: "add-annot",
-        type: this._tool,
-        pageIndex: this.page,
-        date: new Date()
-      }
-
       const newStart = {
         x: Math.min(start.x, end.x),
         y: Math.min(start.y, end.y)
@@ -120,7 +113,16 @@ export default class PaintRedaction {
         right: newEnd.x,
         bottom: newEnd.y
       }
-      annotationData.rect = rect
+
+      const annotationData = {
+        rect,
+        operate: 'add-annot',
+        type: 'redact',
+        pageIndex: this.page,
+        date: new Date(),
+        erasure: this._tool === 'remove'
+      }
+      this._tool === 'redaction' && (annotationData.fillColor = 'rgb(0, 0, 0)')
 
       this.eventBus.dispatch('annotationChange', {
         type: 'add',

packages/core/src/annotation/redaction.js

@@ -49,6 +49,7 @@ export default class Redaction extends Base {
 
   render () {
     const annotation = this.annotation
+    if (!annotation.hasOwnProperty('rect')) return
 
     const { start, end } = this.getActualRect(
       this.viewport,
@@ -70,7 +71,27 @@ export default class Redaction extends Base {
 
     const actualbdwidth = (annotation.borderWidth || 2) * this.scale
     let shapeElement
-    if (!annotation.erasure) {
+    if (annotation.erasure) {
+      shapeElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+      shapeElement.setAttribute("viewBox", `0 0 ${rect.width} ${rect.height}`)
+      shapeElement.addEventListener('mousedown', this.handleClick.bind(this))
+
+      const rectElement = createSvg(
+        "rect",
+        {
+          x: actualbdwidth / 2,
+          y: actualbdwidth / 2,
+          width: `${Math.abs(rect.width - actualbdwidth)}px`,
+          height: `${Math.abs(rect.height - actualbdwidth)}px`,
+          stroke: annotation.borderColor || '#FF0000',
+          'stroke-width': actualbdwidth,
+          'stroke-opacity': annotation.opacity || 1,
+          fill: annotation.fillColor || 'none',
+          'fill-opacity': annotation.opacity || 1,
+        }
+      )
+      shapeElement.append(rectElement)
+    } else {
       shapeElement = createElement(
         'div',
         {
@@ -93,26 +114,6 @@ export default class Redaction extends Base {
         shapeElement.style.backgroundColor = ''
         shapeElement.style.border = `${actualbdwidth}px solid #FF0000`
       })
-    } else {
-      shapeElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-      shapeElement.setAttribute("viewBox", `0 0 ${rect.width} ${rect.height}`)
-      shapeElement.addEventListener('mousedown', this.handleClick.bind(this))
-
-      const rectElement = createSvg(
-        "rect",
-        {
-          x: actualbdwidth / 2,
-          y: actualbdwidth / 2,
-          width: `${Math.abs(rect.width - actualbdwidth)}px`,
-          height: `${Math.abs(rect.height - actualbdwidth)}px`,
-          stroke: annotation.borderColor || '#FF0000',
-          'stroke-width': actualbdwidth,
-          'stroke-opacity': annotation.opacity || 1,
-          fill: annotation.fillColor ? annotation.fillColor : 'none',
-          'fill-opacity': annotation.opacity || 1,
-        }
-      )
-      shapeElement.append(rectElement)
     }
     this.shapeElement = shapeElement
     this.annotationContainer.append(this.shapeElement)

packages/core/src/index.js

@@ -451,11 +451,11 @@ class ComPDFKitViewer {
     })
   }
 
-  delAnnotations(annotation) {
+  async delAnnotations(annotation) {
     const annotations = Array.isArray(annotation) ? annotation : [annotation]
-    annotations.forEach(item => {
-      this.handleAnnotationChange({ type: 'delete', annotation: item })
-    })
+    for (const item of annotations) {
+      await this.handleAnnotationChange({ type: 'delete', annotation: item })
+    }
   }
 
   addEvent(eventName, fn) {
@@ -1702,11 +1702,10 @@ class ComPDFKitViewer {
           currentAnnotation = this.handleInk(currentAnnotation)
         }
         annotateHandles.push(currentAnnotation)
-        if (annotation[i].type === 'redaction' || annotation[i].type === 'remove') this.redactionList.push(annotation[i])
-        console.log(annotation, this.redactionList)
+        if (annotation[i].type === 'redact') this.redactionList.push(annotation[i])
       }
     } else {
-      const annotations = this.annotations[annotation.pageIndex]
+      let annotations = this.annotations[annotation.pageIndex]
       if (!annotations) return
       const index = findIndex(annotation.name, annotations) 
       if (this.webviewerServer) {
@@ -1780,7 +1779,6 @@ class ComPDFKitViewer {
       await this.#postAnnotations(annotateHandles)
     }
 
-    console.log(this.redactionList)
     this.eventBus.dispatch('showRedactionApplyBar', this.redactionList.length ? true : false)
 
     this.isAnnotationModified = true
@@ -2872,12 +2870,6 @@ class ComPDFKitViewer {
       await this.updateTextPtr();
     }
 
-    if (oldMode === 'security' && this.toolMode !== 'security') {
-      console.log('delete: ', this.redactionList)
-      this.delAnnotations(this.redactionList)
-      this.pdfViewer.refresh()
-    }
-
     for (let page in this.annotations) {
       for (let i = 0; i < this.annotations[page].length; i++) {
         const annot = this.annotations[page][i]
@@ -4302,11 +4294,30 @@ class ComPDFKitViewer {
     this.isContentEditModyfied = value
   }
 
-  applyRedactions(redaction) {
-    console.log('apply: ', this.redactionList)
-    const redactions = Array.isArray(redaction) ? redaction : [redaction]
-    // redactions.length > 0 && this.addAnnotations(redactions)
-    this.redactionList = []
+  async applyRedactions(redaction) {
+    if (redaction) {
+      let redactionList
+      if (redaction === 'all') {
+        redactionList = [...this.redactionList]
+        this.redactionList.length = 0
+      } else {
+        const redactions = Array.isArray(redaction) ? redaction : [redaction]
+        redactionList = redactions
+      }
+      console.log(redactionList)
+      redactionList.forEach(async item => {
+        if (item.erasure) {
+          await this.messageHandler.sendWithPromise('ErasureRedactionFromRect', { pagePtr: item.pagePtr, rect: item.rect })
+        } else {
+          await this.messageHandler.sendWithPromise('ApplyRedaction', { annotPtr: item.annotPtr })
+        }
+      })
+      await this.delAnnotations(redactionList)
+    } else {
+      await this.delAnnotations(this.redactionList)
+      this.redactionList.length = 0
+    }
+    this.pdfViewer.refresh()
   }
 }
 

packages/webview/src/components/Dialogs/SettingsDialog.vue

@@ -36,7 +36,7 @@
       <p class="title">{{ $t('header.settings.creationInfo') }}</p>
       <div class="version row">
         <span>{{ $t('header.settings.version') }}</span>
-        <span>2.4.8</span>
+        <span>2.5.0</span>
       </div>
 
       <template #footer>

packages/webview/src/components/SecurityToolbar/RedactionConfirmDialog.vue

@@ -36,7 +36,7 @@ const closeDialog = () => {
 }
 
 const confirm = () => {
-  core.applyRedactions(dialogType.value === 1 ? 'all' : [])
+  core.applyRedactions(dialogType.value === 1 ? 'all' : null)
   useDocument.setToolState('')
   useViewer.setActiveToolMode('view')
   useViewer.setShowRedactionApplyBar(false)

packages/webview/src/stores/modules/document.js

@@ -101,6 +101,12 @@ export const useDocumentStore = defineStore({
     signatureFields: {
       color: '#DDE9FF'
     },
+    redaction: {
+      color: '#000000'
+    },
+    remove: {
+      color: '#FF0000'
+    },
     propertyPanel: {
       fieldName: '',
       isHidden: '0',