add: 添加签名域

packages/core/constants/index.js

@@ -177,7 +177,7 @@ const WidgetTypeString = {
   3: 'textfield',
   4: 'combobox',
   5: 'listbox',
-  6: 'signaturefields',
+  6: 'signatureFields',
   0xff: 'unknown',
 }
 

packages/core/src/annotation/layer.js

@@ -22,8 +22,8 @@ import AddComboBox from '../form/add_combo_box.js'
 import MarkupTextAnnotation from '../markup/text_annotation.js'
 import PaintLink from './paint/link'
 import Link from './link.js'
-import AddSignField from '../add_sign_field.js'
-import SignField from '../sign_field.js'
+import AddSignatureFields from '../form/add_signature_fields.js'
+import SignatureFields from '../form/signature_fields.js'
 
 // 注释的画布层
 class ComPDFAnnotationLayer {
@@ -687,7 +687,7 @@ class ComPDFAnnotationLayer {
         eventBus: this.eventBus,
         selectedElementName: this.selectedElementName
       })
-    } else if (tool === 'signField') {
+    } else if (['signatureFields', 'addDigitalSign', 'addElectronicSign'].includes(tool)) {
       document.querySelector('.document').classList.add('annotation-edit')
       if (this.annotateManager) {
         this.annotateManager.reset()
@@ -723,7 +723,7 @@ class ComPDFAnnotationLayer {
         this.signFieldManager.init()
         return
       }
-      this.signFieldManager = new AddSignField({
+      this.signFieldManager = new AddSignatureFields({
         tool,
         color,
         container: this.pageDiv,
@@ -978,8 +978,8 @@ class ComPDFAnnotationLayer {
           })
           this.annotationsArray.push(link)
         }
-        if (annotation.type === 'signField' && !annotation.isDelete) {
-          const signField = new SignField({
+        if (annotation.type === 'signatureFields' && !annotation.isDelete) {
+          const signatureFields = new SignatureFields({
             container: this.div,
             annotation,
             page: this.page,
@@ -988,7 +988,7 @@ class ComPDFAnnotationLayer {
             eventBus: this.eventBus,
             layer: this
           })
-          this.annotationsArray.push(signField)
+          this.annotationsArray.push(signatureFields)
         }
       }
     }
@@ -1274,8 +1274,8 @@ class ComPDFAnnotationLayer {
         show
       })
       this.annotationsArray.push(link)
-    } else if (annotation.type === 'signField' && !annotation.isDelete) {
-      const signField = new SignField({
+    } else if (annotation.type === 'signatureFields' && !annotation.isDelete) {
+      const signatureFields = new SignatureFields({
         container: this.div,
         annotation,
         page: this.page,
@@ -1284,7 +1284,7 @@ class ComPDFAnnotationLayer {
         eventBus: this.eventBus,
         layer: this
       })
-      this.annotationsArray.push(signField)
+      this.annotationsArray.push(signatureFields)
     }
   }
 

packages/core/src/add_sign_field.js

@@ -2,7 +2,7 @@ import {
   getAbsoluteCoordinate,
   createElement,
   getInitialPoint,
-} from './annotation/utils';
+} from '../annotation/utils';
 
 export default class AddSignField {
   constructor ({
@@ -87,7 +87,7 @@ export default class AddSignField {
   }
 
   handleMouseDown (event) {
-    if (this.layer.annotationStore.selectedElementName) return
+    if (this.layer.annotationStore.selectedElementName || document.getElementById("sign-image-save")) return
     const { x, y } = getAbsoluteCoordinate(this.container, event)
     this.initStartPoint = { x, y }
 
@@ -122,8 +122,8 @@ export default class AddSignField {
       }
 
       const annotationData = {
-        operate: "add-annot",
-        type: 'signField',
+        operate: "add-form",
+        type: 'signatureFields',
         pageIndex: this.page,
         date: new Date(),
         rect,
@@ -148,8 +148,7 @@ export default class AddSignField {
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
 
-    console.log(this.tool)
-    if (this.tool === 'signField') document.getElementById('createSignFieldButton').click()
+    if (this.tool === 'signatureFields') document.getElementById('createSignFieldButton').click()
   }
 
   handleMouseMove (event) {

packages/core/src/sign_field.js

@@ -1,8 +1,8 @@
-import Base from './annotation/base';
-import { getActualPoint, getClickPoint, createSvg, createElement } from './annotation/utils';
-import { onClickOutside } from './ui_utils'
+import Base from '../annotation/base';
+import { getActualPoint, getClickPoint, createSvg, createElement } from '../annotation/utils';
+import { onClickOutside } from '../ui_utils'
 
-export default class SignField extends Base {
+export default class signatureFields extends Base {
   
   constructor ({
     container,
@@ -48,7 +48,6 @@ export default class SignField extends Base {
   }
 
   render () {
-    // this.eventBus._on('linkPropertyPanelChanged', this.handlePropertyPanel.bind(this))
     this.eventBus._on('setProperty', this.setProperty.bind(this))
 
     console.log(this.annotation)
@@ -392,8 +391,8 @@ export default class SignField extends Base {
   }
 
   handleClick () {
-    if (!this.hidden || document.fullscreenElement || this.layer.annotationStore.creating || this.layer.toolMode === 'editor') return
-    if (this.layer.toolMode === 'sign' && this.layer.tool === 'signField') {
+    if (!this.hidden || document.fullscreenElement || this.layer.annotationStore.creating || this.layer.toolMode === 'editor' || document.getElementById("sign-image-save")) return
+    if (this.layer.tool === 'signatureFields') {
       this.hidden = false
       this.updateTool()
 

packages/core/src/index.js

@@ -1521,7 +1521,7 @@ class ComPDFKitViewer {
     let annotation = data.annotation
     this.annotationHistory.push(annotation)
     let annotateHandles = []
-    const formTypes = ['textfield', 'checkbox', 'radiobutton', 'listbox', 'combobox', 'pushbutton']
+    const formTypes = ['textfield', 'checkbox', 'radiobutton', 'listbox', 'combobox', 'pushbutton', 'signatureFields']
     if (data.type === 'add') {
       if (!Array.isArray(annotation)) {
         annotation = [annotation]

packages/webview/locales/zh-CN.json

@@ -56,9 +56,9 @@
     "undo": "撤销",
     "redo": "重做",
 
-    "creatSignField": "添加签名域",
-    "AddDigitalSign": "添加数字签名",
-    "AddElectronicSign": "添加电子签名",
+    "createSignField": "添加签名域",
+    "addDigitalSign": "添加数字签名",
+    "addElectronicSign": "添加电子签名",
     "verifyDigitalSign": "验证数字签名"
   },
 

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

@@ -38,17 +38,25 @@ const useDocument = useDocumentStore()
 
 const dialogName = 'selectSignTypeDialog'
 const show = computed(() => useViewer.isElementOpen(dialogName))
+const activeTool = computed(() => useDocument.getActiveTool)
 
 const type = ref('electronic')
 
+const showDialog = () => {
+  if (activeTool.value === 'addDigitalSign') useViewer.openElement('signatureAppearanceDialog')
+  else if (activeTool.value === 'addElectronicSign') openSignCreatePanel()
+  else useViewer.openElement('selectSignTypeDialog')
+}
+core.addEvent('openSelectSignTypeDialog', showDialog)
+
 const toSign = () => {
   useViewer.closeElement(dialogName)
-  openSignCreatePanel()
+  if (type.value === 'digital') useViewer.openElement('signatureAppearanceDialog')
+  else openSignCreatePanel()
 }
 
 const openSignCreatePanel = () => {
-  if (type.value === 'digital') useViewer.toggleElement('signCreatePanel')
-  else useViewer.openElement('signatureAppearanceDialog')
+  useViewer.toggleElement('signCreatePanel')
 
   useViewer.setActiceToolMode('sign')
 

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

@@ -111,7 +111,7 @@ const closePanel = (flag) => {
   clearProperty()
   document.body.style.overflow = 'auto'
 
-  if (!activeTool.value) useViewer.openElement('selectSignTypeDialog')
+  if (!activeTool.value && flag === 'cancel') useViewer.openElement('selectSignTypeDialog')
 }
 
 const clearData = () => {

packages/webview/src/components/SignatureToolBar/SignatureToolBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="signature-tool">
-    <Button id="createSignFieldButton" :class="{ active: activeTool === 'signField' }" @click="changeActiveTool('signField')" :title="$t('header.createSignField')">
+    <Button id="createSignFieldButton" :class="{ active: activeTool === 'signatureFields' }" @click="changeActiveTool('signatureFields')" :title="$t('header.createSignField')">
       <CreateSignField />{{ $t('header.createSignField') }}
     </Button>
     <Button :class="{ active: activeTool === 'addDigitalSign' }" @click="changeActiveTool('addDigitalSign')" :title="$t('header.addDigitalSign')">
@@ -37,25 +37,15 @@
     switchAnnotationEditorMode(0)
   }
 
-  const showDialog = () => {
-    console.log(activeTool.value)
-    // useViewer.openElement(dialogName)
-  }
-  core.addEvent('openSelectSignTypeDialog', showDialog)
-
   const openSignCreatePanel = () => {
     useViewer.toggleElement('signCreatePanel')
     useViewer.setActiceToolMode('sign')
 
-    useDocument.setToolState('')
-      
     useViewer.toggleActiveHand(false)
     switchTool(0)
     
     switchAnnotationEditorMode(0)
     
-    popoverMode.value.setShow(false)
-    
     document.body.style.overflow = 'hidden'
   }
 

packages/webview/src/components/Signatures/SignCreatePanel.vue

@@ -149,7 +149,7 @@ const closePanel = (flag) => {
   clearProperty()
   document.body.style.overflow = 'auto'
 
-  if (!activeTool.value) useViewer.openElement('selectSignTypeDialog')
+  if (!activeTool.value && flag === 'cancel') useViewer.openElement('selectSignTypeDialog')
 }
 
 const clearData = () => {

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

@@ -98,7 +98,7 @@ export const useDocumentStore = defineStore({
     link: {
       color: '#DDE9FF'
     },
-    signField: {
+    signatureFields: {
       color: '#DDE9FF'
     },
     propertyPanel: {