packages/core/src/annotation/freetext.js

@@ -606,10 +606,10 @@ export default class Shape extends Base {
     if (this.layer.selectedElementName === this.annotation.name) {
       this.layer.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLine.removeEventListener('dblclick', this.onDbclick)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLine?.removeEventListener('dblclick', this.onDbclick)
+    this.outerLineContainer?.remove()
 
     if (this.layer.selectedElementName === this.annotation.name) {
       this.layer.selectedElementName = null
@@ -884,12 +884,11 @@ export default class Shape extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
-    this.annotation.isDelete = true
+
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -899,12 +898,19 @@ export default class Shape extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   openReply () {
     this.eventBus.dispatch('openAnnotationReply', this.annotation)
   }

packages/core/src/annotation/ink.js

@@ -139,9 +139,9 @@ export default class Ink extends Base {
     if (this.layer.selectedElementName === this.annotation.name) {
       this.layer.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
   }
 
 
@@ -417,12 +417,11 @@ export default class Ink extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
-    this.annotation.isDelete = true
+
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -432,12 +431,19 @@ export default class Ink extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleKeydown (event) {
     // if (event.key === 'Delete' || event.key === 'Backspace') {
     //   this.handleDelete()

packages/core/src/annotation/layer.js

@@ -628,8 +628,8 @@ class ComPDFAnnotationLayer {
 
   emptyAnnotations() {
     const length = this.annotationsArray.length
-    for (let i = 0; i < length; i++) {
-      this.annotationsArray[i].handleDelete()
+    for (let i = length - 1; i >= 0; i--) {
+      this.annotationsArray[i].delete()
     }
 
     this.annotationsArray = []
@@ -956,6 +956,24 @@ class ComPDFAnnotationLayer {
     this.pageDiv.removeEventListener('click', this.onHandleAddSign)
     this.eventBus.dispatch('initCursorStyle')
   }
+
+  getAnnoationIndex(annotation) {
+    const annotationsArray = this.annotationsArray
+    const index = annotationsArray.findIndex(item => item.annotation.name === annotation.name);
+    return index
+  }
+
+  deleteAnnotationInLayer (annotation) {
+    const annotationsArray = this.annotationsArray
+    const index = this.getAnnoationIndex(annotation)
+    index > -1 && annotationsArray.splice(index, 1)
+  }
+
+  deleteAnnotation(annotation) {
+    const annotationsArray = this.annotationsArray
+    const index = this.getAnnoationIndex(annotation)
+    index > -1 && annotationsArray[index].handleDelete()
+  }
 }
 
 export default ComPDFAnnotationLayer;

packages/core/src/annotation/line.js

@@ -258,9 +258,9 @@ export default class Line extends Base {
     if (this.layer.selectedElementName === this.annotation.name) {
       this.layer.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
   }
 
   getActualPoint (
@@ -472,12 +472,11 @@ export default class Line extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
-    this.annotation.isDelete = true
+
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -487,12 +486,19 @@ export default class Line extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleKeydown (event) {
     // if (event.key === 'Delete' || event.key === 'Backspace') {
     //   this.handleDelete()

packages/core/src/annotation/link.js

@@ -452,9 +452,9 @@ export default class Link extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
 
     if (!this.annotation.url && !this.annotation.destPage) {
       this.handleDelete()
@@ -616,14 +616,11 @@ export default class Link extends Base {
   }
 
   handleDelete (event) {
-    if (!this.annotationContainer) return
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    if (event) this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -633,12 +630,19 @@ export default class Link extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (event.button !== 0 && event.type === 'mouseup') return
     if (this.layer.tool) {

packages/core/src/annotation/redaction.js

@@ -314,9 +314,9 @@ export default class Redaction extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
     document.removeEventListener('keydown', this.onKeydown)
   }
 
@@ -341,14 +341,10 @@ export default class Redaction extends Base {
   };
 
   handleDelete (event) {
-    if (!this.annotationContainer) return
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    if (event) this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -358,12 +354,19 @@ export default class Redaction extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (event.button !== 0 && event.type === 'mouseup') return
     if (this.layer.tool) {

packages/core/src/annotation/shape.js

@@ -435,9 +435,9 @@ export default class Shape extends Base {
     if (this.layer.selectedElementName === this.annotation.name) {
       this.layer.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
   }
 
   handleMouseDown (event) {
@@ -593,13 +593,11 @@ export default class Shape extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -609,12 +607,19 @@ export default class Shape extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (event.button !== 0 && event.type === 'mouseup') return
     if (this.layer.tool) {

packages/core/src/annotation/stamp.js

@@ -577,13 +577,11 @@ export default class Stamp extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer?.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -593,12 +591,19 @@ export default class Stamp extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (event.button !== 0 && event.type === 'mouseup') return
     if (this.layer.tool) {

packages/core/src/annotation/text.js

@@ -70,17 +70,11 @@ export default class Text extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
 
-    this.textEditorContainer.removeEventListener('click', this.handleStopPropagation)
-    this.textEditorContainer.removeEventListener('paste', this.onPaste)
-    
-
-    this.annotationContainer.remove()
-    this.textEditorContainer.remove()
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -90,12 +84,23 @@ export default class Text extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+
+    this.textEditorContainer?.removeEventListener('click', this.handleStopPropagation)
+    this.textEditorContainer?.removeEventListener('paste', this.onPaste)
+    this.annotationContainer?.remove()
+    this.textEditorContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handlestopPropagation(event) {
     event.stopPropagation()
   }

packages/core/src/form/check_box.js

@@ -540,6 +540,11 @@ export default class CheckBox extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleOutside () {
     if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
       document.getElementById('propertyPanelButton').click()
@@ -550,11 +555,11 @@ export default class CheckBox extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
 
-    this.eventBus._on('checkboxPropertyPanelChanged', this.handlePropertyPanel)
+    this.eventBus._off('checkboxPropertyPanelChanged', this.handlePropertyPanel)
   }
 
   handleMouseDown (event) {
@@ -710,13 +715,11 @@ export default class CheckBox extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -726,12 +729,19 @@ export default class CheckBox extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (this.layer.tool) {
       event.stopPropagation()

packages/core/src/form/combo_box.js

@@ -527,6 +527,11 @@ export default class ComboBox extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleOutside () {
     if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
       document.getElementById('propertyPanelButton').click()
@@ -537,9 +542,9 @@ export default class ComboBox extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
 
     this.eventBus._off('comboBoxPropertyPanelChanged', this.handlePropertyPanel)
   }
@@ -697,13 +702,11 @@ export default class ComboBox extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -713,12 +716,19 @@ export default class ComboBox extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (this.layer.tool) {
       event.stopPropagation()

packages/core/src/form/list_box.js

@@ -503,6 +503,11 @@ export default class ListBox extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleOutside() {
     if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
       document.getElementById('propertyPanelButton').click()
@@ -513,9 +518,9 @@ export default class ListBox extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
 
     this.eventBus._off('listBoxPropertyPanelChanged', this.handlePropertyPanel)
   }
@@ -673,13 +678,11 @@ export default class ListBox extends Base {
   }
 
   handleDelete(event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -695,6 +698,15 @@ export default class ListBox extends Base {
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp(event) {
     if (this.layer.tool) {
       event.stopPropagation()

packages/core/src/form/push_button.js

@@ -478,12 +478,16 @@ export default class PushButton extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleOutside () {
     if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
       document.getElementById('propertyPanelButton').click()
       
       this.eventBus.dispatch('propertyChange', null)
-      this.layer.selectedElementName = null
     }
 
     this.hidden = true
@@ -491,9 +495,9 @@ export default class PushButton extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
 
     this.eventBus._off('pushButtonPropertyPanelChanged', this.handlePropertyPanel)
   }
@@ -651,13 +655,11 @@ export default class PushButton extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -667,12 +669,18 @@ export default class PushButton extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (this.layer.tool) {
       event.stopPropagation()

packages/core/src/form/radio_button.js

@@ -543,6 +543,11 @@ export default class RadioButton extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleOutside () {
     if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
       document.getElementById('propertyPanelButton').click()
@@ -553,9 +558,9 @@ export default class RadioButton extends Base {
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
 
     this.eventBus._off('radioButtonPropertyPanelChanged', this.handlePropertyPanel)
   }
@@ -713,13 +718,11 @@ export default class RadioButton extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -729,12 +732,19 @@ export default class RadioButton extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (this.layer.tool) {
       event.stopPropagation()

packages/core/src/form/signature_fields.js

@@ -383,6 +383,11 @@ export default class SignatureFields extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleClick (event) {
     if (!this.hidden || document.fullscreenElement || this.layer.annotationStore.creating || ['redaction', 'remove'].includes(this.layer.tool) || document.querySelector('.compare-document-container').contains(event?.target) || this.layer.toolMode === 'editor' || document.getElementById("sign-image-save")) return
     if (this.isDigital) return
@@ -399,18 +404,14 @@ export default class SignatureFields extends Base {
   }
 
   handleOutside () {
-    if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
-      this.layer.annotationStore.selectedElementName = null
-    }
-
     this.hidden = true
 
     if (this.layer.annotationStore.selectedElementName === this.annotation.name) {
       this.layer.annotationStore.selectedElementName = null
     }
-    this.outerLine.removeEventListener('mousedown', this.onMousedown)
-    this.outerLine.removeEventListener('touchstart', this.onMousedown)
-    this.outerLineContainer.remove()
+    this.outerLine?.removeEventListener('mousedown', this.onMousedown)
+    this.outerLine?.removeEventListener('touchstart', this.onMousedown)
+    this.outerLineContainer?.remove()
   }
 
   handleMouseDown (event) {
@@ -567,15 +568,12 @@ export default class SignatureFields extends Base {
 
   handleDelete (data) {
     const event = data instanceof Event ? data : null
-    if (!this.annotationContainer) return
     if (!event && data && data.signaturePtr !== this.annotation.signaturePtr) return
     if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    if (event) this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -588,6 +586,15 @@ export default class SignatureFields extends Base {
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (event.button !== 0 && event.type === 'mouseup') return
     if (this.layer.tool) {

packages/core/src/form/text_field.js

@@ -463,12 +463,16 @@ export default class TextField extends Base {
     }
   }
 
+  selectAnnotation () {
+    if (this.layer.selectedElementName === this.annotation.name) return
+    this.handleClick()
+  }
+
   handleOutside () {
     if (!this.hidden && this.layer.annotationStore.selectedElementName === this.annotation.name) {
       document.getElementById('propertyPanelButton').click()
-      
+
       this.eventBus.dispatch('propertyChange', null)
-      this.layer.selectedElementName = null
     }
 
     this.hidden = true
@@ -656,13 +660,11 @@ export default class TextField extends Base {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.annotationContainer.remove()
 
-    this.annotation.isDelete = true
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -672,12 +674,19 @@ export default class TextField extends Base {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.annotationContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   handleMouseUp (event) {
     if (this.layer.tool) {
       event.stopPropagation()

packages/core/src/index.js

@@ -1770,13 +1770,6 @@ class ComPDFKitViewer {
           delete this.annotations[annotation.pageIndex]
         }
         this.redactionList = this.redactionList.filter((item) => item.name !== annotation.name)
-      } else if (data.type === 'empty') {
-        annotations.splice(index, 1)
-        if (!annotations.length) {
-          delete this.annotations[annotation.pageIndex]
-        }
-        this.redactionList = this.redactionList.filter((item) => item.pageIndex !== annotation.pageIndex)
-        return
       } else {
         if (!this.webviewerServer) {
           annotation.doc = this.doc

packages/core/src/markup/text_annotation.js

@@ -216,7 +216,7 @@ class TextAnnotation extends BaseAnnotation {
   }
 
   handleOutside () {
-    this.hidden = !this.hidden
+    this.hidden = true
     if (this.layer.selectedElementName === this.annotation.name) {
       this.layer.selectedElementName = null
     }
@@ -249,12 +249,11 @@ class TextAnnotation extends BaseAnnotation {
   }
 
   handleDelete (event) {
-    if (this.layer.tool && event && event !== 'delete') {
+    if (this.layer.tool && event) {
       event.stopPropagation()
     }
-    this.handleOutside()
-    this.markupContainer.remove()
-    this.annotation.isDelete = true
+
+    this.delete()
     const annotationData = {
       type: 'delete',
       annotation: {
@@ -264,12 +263,19 @@ class TextAnnotation extends BaseAnnotation {
       }
     }
     this.annotation.annotPtr && (annotationData.annotation.annotPtr = this.annotation.annotPtr)
-    if (!event) {
-      annotationData.type = 'empty'
-    }
+
     this.eventBus.dispatch('annotationChange', annotationData)
   }
 
+  delete () {
+    this.handleOutside()
+    this.markupContainer?.remove()
+    this.annotation.isDelete = true
+    this.layer.deleteAnnotationInLayer({
+      name: this.annotation.name
+    })
+  }
+
   setCss (ele, cssText) {
     if (!ele) return
     if (cssText) {

packages/core/src/pdf_viewer.js

@@ -800,8 +800,7 @@ class PDFViewer {
       const page = this._pages[annotation.pageIndex]
       if (!page) continue
       if (page.compdfAnnotationLayer) {
-        const annot = page.compdfAnnotationLayer.annotationsArray.find(item => item.annotation.name === annotation.name);
-        annot && annot.handleDelete('delete')
+        page.compdfAnnotationLayer.deleteAnnotation(annotation)
       }
     }
   }