add: 添加数字签名外观

packages/core/src/form/signature_fields.js

@@ -411,7 +411,9 @@ export default class SignatureFields extends Base {
 
       onClickOutside([this.annotationContainer, this.outerLine, this.deletetButton], this.handleOutside.bind(this))
     } else {
-      this.eventBus.dispatch('openSelectSignTypeDialog')
+      this.eventBus.dispatch('openSelectSignTypeDialog', {
+        annotPtr: this.annotation.annotPtr
+      })
     }
   }
 

packages/core/src/index.js

@@ -3603,6 +3603,43 @@ class ComPDFKitViewer {
     }
   }
 
+  async getSignature(annotPtr) {
+    await this.messageHandler.sendWithPromise('CreateSignatureAP', {
+      annotPtr,
+      certFile: this.certFile
+    })
+
+    const ratio = window.devicePixelRatio || 1
+    const imgRect = {
+      width: parseInt(582 * ratio + 1),
+      height: parseInt(187 * ratio + 1)
+    }
+
+    const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
+      annotPtr,
+      rect: {
+        left: 0,
+        right: 582,
+        top: 0,
+        bottom: 187
+      },
+      scale: ratio
+    })
+
+    const canvas = document.createElement('canvas')
+    canvas.style.width = imgRect.width + 'px'
+    canvas.style.height = imgRect.height + 'px'
+    canvas.width = imgRect.width
+    canvas.height = imgRect.height
+    let drawContext = canvas.getContext("2d")
+    drawContext.clearRect(0, 0, canvas.width, canvas.height)
+    let imageData = drawContext.createImageData(imgRect.width, imgRect.height)
+    imageData.data.set(imageArray)
+    drawContext.putImageData(imageData, 0, 0)
+    const imgSrc = canvas.toDataURL("image/png", 1)
+    return imgSrc
+  }
+
   deleteSignature(signature) {
     this.messageHandler.sendWithPromise('RemoveSignature', {
       doc: this.doc,

packages/core/src/worker/compdfkit_worker.js

@@ -228,6 +228,13 @@ class CPDFWorker {
     messageHandler.on('GetSignatures', (data) => {
       return getSignatures(data)
     })
+    messageHandler.on('CreateSignatureAP', async (data) => {
+      const { annotPtr } = data
+      const content = stringToNewUTF8('名称：数字签名\n时间：2024.04.21\n原因：我是文件的所有者哈哈哈哈哈哈')
+      const text = stringToNewUTF8('我是数字签名')
+      const res = Module._UpdateApWithDigitalSigConfig(annotPtr, content, false, false, false, text, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)
+      console.log(res)
+    })
     messageHandler.on('AddSignature', async (data) => {
       const doc = data.doc
       const pagePtr = data.pagePtr.pagePtr
@@ -285,8 +292,8 @@ class CPDFWorker {
       const passwordPtr = stringToNewUTF8('')
       Module._LoadDocumentByStream(newDoc, length, buffer.length, passwordPtr)
 
-      const modifyResult = Module._AddSignModifyDocument(signaturePtr, res, 1, ComPDFKitJS.opened_files[1].length)
-      console.log(modifyResult)
+      // const modifyResult = Module._AddSignModifyDocument(signaturePtr, res, 1, ComPDFKitJS.opened_files[1].length)
+      // console.log(modifyResult)
     })
 
     messageHandler.on('PushRenderTask', (data) => {

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

@@ -57,8 +57,13 @@ const closeDialog = () => {
   useViewer.closeElement(dialogName)
 }
 
-const next = () => {
+const next = async () => {
   if (!validatePwd()) return
+
+  const selectedSignatureField = useViewer.getSelectedSignatureField
+  const src = await core.getSignature(selectedSignatureField)
+  useViewer.setDigitalSignaturePreview(src)
+
   closeDialog()
   useViewer.openElement('signatureAppearanceDialog')
 }

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

@@ -42,8 +42,11 @@ const activeTool = computed(() => useDocument.getActiveTool)
 
 const type = ref('electronic')
 
-const showDialog = () => {
-  if (activeTool.value === 'addDigitalSign') useViewer.openElement('addDigitalFileDialog')
+const showDialog = (data) => {
+  if (activeTool.value === 'addDigitalSign') {
+    useViewer.openElement('addDigitalFileDialog')
+    useViewer.setSelectedSignatureField(data.annotPtr)
+  }
   else if (activeTool.value === 'addElectronicSign') openSignCreatePanel()
   else useViewer.openElement('selectSignTypeDialog')
 }
@@ -131,4 +134,4 @@ const openSignCreatePanel = () => {
     }
   }
 }
-</style>
+</style>

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

@@ -14,18 +14,7 @@
       </div>
 
       <div class="preview-area">
-        <div class="left-part" id="digitalSignaturePreview" @click="openDrawPanel">
-          <img v-show="activeSignWay === 'trackpad'" src="" alt="">
-          <p v-show="activeSignWay === 'keyboard'">&lt;Enter your public name here></p>
-        </div>
-        <Logo v-show="configurations.logo" class="logo" />
-        <div class="right-part" :class="{ 'no-label': !configurations.labels }">
-          <p v-show="configurations.name"><span>{{ $t('signatures.appearanceDialog.name') }}{{ $t('colon') }}</span>ComPDFKit</p>
-          <p v-show="configurations.dName"><span>{{ $t('signatures.appearanceDialog.dName') }}{{ $t('colon') }}</span>ComPDFKit</p>
-          <p v-show="configurations.date"><span>{{ $t('signatures.appearanceDialog.date') }}{{ $t('colon') }}</span>2023.08.15 16:31:14</p>
-          <p v-show="configurations.version"><span>{{ $t('signatures.appearanceDialog.ComPDFKitVersion') }}{{ $t('colon') }}</span>V2.4.0</p>
-          <p v-show="configurations.location"><span>{{ $t('signatures.appearanceDialog.location') }}{{ $t('colon') }}</span>{{ configurations.locationInputVal ? configurations.locationInputVal : '&lt;location>' }}</p>
-        </div>
+        <img :src="preview" >
       </div>
 
       <div class="preview-options" v-if="!(activeSignWay === 'none')">
@@ -148,6 +137,7 @@ const show = computed(() => useViewer.isElementOpen(dialogName))
 const activeSignWay = computed(() => useViewer.getActiveElementTab('signPanelTab'))
 const toolMode = computed(() => useViewer.getToolMode)
 const activeTool = computed(() => useDocument.getActiveTool)
+const preview = computed(() => useViewer.getDigitalSignaturePreview)
 
 const textSgin = ref('')
 const imageData = ref('')
@@ -500,43 +490,8 @@ const openDrawPanel = () => {
     color: #232531;
     font-size: 30px;
     overflow: hidden;
-
-    .left-part {
-      display: flex;
-      align-items: center;
-      width: 50%;
-      z-index: 1;
-      font-weight: 600;
-  
-      img {
-        max-width: 100%;
-        max-height: 100%;
-        pointer-events: none;
-      }
-  
-      img[src=""],
-      img:not([src]) {
-        opacity: 0;
-      }
-    }
-
-    .right-part {
-      flex: 1;
-      line-height: 1.4;
-      z-index: 1;
-
-      &.no-label span {
-        display: none;
-      }
-    }
-
-    .logo {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      margin: auto;
+    img {
+      width: 100%;
     }
   }
 

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

@@ -49,7 +49,7 @@
   <PreventDialog />
   <MeasurePop />
   <SelectSignTypeDialog />
-  <SignatureAppearanceDialog />
+  <SignatureAppearanceDialog v-if="show" />
   <SignatureDetailsDialog />
   <CertificationViewerDialog />
   <DeleteSignatureDialog />
@@ -72,6 +72,7 @@ const mainContainer = ref()
 const viewerContainer = ref()
 const useViewer = useViewerStore()
 const useDocument = useDocumentStore()
+const show = computed(() => useViewer.isElementOpen('signatureAppearanceDialog'))
 
 const isHandActive = computed(() => {
   return useViewer.getActiveHand

packages/webview/src/core/getSignature.js

@@ -0,0 +1,3 @@
+import core from '@/core'
+
+export default (annotation) => core.getDocumentViewer().getSignature(annotation)

packages/webview/src/core/index.js

@@ -58,6 +58,7 @@ import getSelectedPage from './getSelectedPage'
 import pageToWindow from './pageToWindow'
 import windowToPage from './windowToPage'
 import addEditorImage from './addEditorImage'
+import getSignature from './getSignature'
 import deleteSignature from './deleteSignature'
 
 export default {
@@ -124,5 +125,6 @@ export default {
   pageToWindow,
   windowToPage,
   addEditorImage,
-  deleteSignature
+  getSignature,
+  deleteSignature,
 }

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

@@ -47,7 +47,10 @@ export const useViewerStore = defineStore({
       signatureDetailsDialog: false,
       certificateViewerDialog: false,
       deleteSignatureDialog: false,
-      addDigitalFileDialog: false
+      addDigitalFileDialog: false,
+    },
+    digitalSignature: {
+      preview: null,
     },
     activeElementsTab: {
       leftPanelTab: 'THUMBS',
@@ -266,7 +269,8 @@ export const useViewerStore = defineStore({
     uploadLoading: false, // 上传中的loading效果
     compareMode: 'content',
     contentEditorType: 'text',
-    signatureVerify: 0 // 验证数字签名显示的横幅 0:不显示 1:有效 2:无效 3:未知
+    signatureVerify: 0, // 验证数字签名显示的横幅 0:不显示 1:有效 2:无效 3:未知
+    selectedSignatureField: null
   }),
   getters: {
     getFullMode () {
@@ -358,6 +362,12 @@ export const useViewerStore = defineStore({
     },
     getSignatureVerify () {
       return this.signatureVerify
+    },
+    getSelectedSignatureField () {
+      return this.selectedSignatureField
+    },
+    getDigitalSignaturePreview () {
+      return this.digitalSignature.preview
     }
   },
   actions: {
@@ -527,6 +537,12 @@ export const useViewerStore = defineStore({
     },
     setSignatureVerify (bool) {
       this.signatureVerify = bool
+    },
+    setSelectedSignatureField(annotPtr) {
+      this.selectedSignatureField = annotPtr
+    },
+    setDigitalSignaturePreview (preview) {
+      this.digitalSignature.preview = preview
     }
   }
 })