packages/core/src/annotation/base.js

@@ -19,6 +19,8 @@ export default class BaseAnnotation {
     this.scale = viewport.scale
     this.isEdit = false
     this.eventBus = eventBus
+    this.scrollTop = 0
+    this.scrollLeft = 0
 
     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"/>

packages/core/src/annotation/freetext.js

@@ -618,6 +618,12 @@ export default class Shape extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -637,7 +643,15 @@ export default class Shape extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const leftTop = this.leftTop
     const rightBottom = this.rightBottom
     const startState = this.startState
@@ -804,6 +818,8 @@ export default class Shape extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
+    this.scrollLeft = 0
+    this.scrollTop = 0
 
     const annotation = this.annotation
     const { leftTop, rightBottom } = this.getInitialPoint()

packages/core/src/annotation/ink.js

@@ -152,6 +152,11 @@ export default class Ink extends Base {
 
     const operatorId = event.target.getAttribute('data-id')
   
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -171,7 +176,15 @@ export default class Ink extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -375,7 +388,7 @@ export default class Ink extends Base {
       let x1, y1, x2, y2
       const documentViewer = this.layer.documentViewer
 
-      let windowCoordinates = this.getMouseLocation(event);
+      let windowCoordinates = this.getMouseLocation(event)
       const page = documentViewer.getSelectedPage(windowCoordinates, windowCoordinates)
       if (page.first && page.first !== (this.page + 1)) {
         const annotationHeight = Math.abs(start.y - end.y)
@@ -484,6 +497,8 @@ export default class Ink extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
+    this.scrollLeft = 0
+    this.scrollTop = 0
 
     this.startState = null
 

packages/core/src/annotation/line.js

@@ -384,6 +384,11 @@ export default class Line extends Base {
     }
     const operatorId = event.target.getAttribute('data-id')
   
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -403,7 +408,15 @@ export default class Line extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -545,6 +558,8 @@ export default class Line extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
+    this.scrollLeft = 0
+    this.scrollTop = 0
 
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()

packages/core/src/annotation/link.js

@@ -465,6 +465,11 @@ export default class Link extends Base {
     }
     const operatorId = event.target.getAttribute('data-id')
   
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -486,7 +491,15 @@ export default class Link extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -678,7 +691,9 @@ export default class Link extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/annotation/shape.js

@@ -449,6 +449,11 @@ export default class Shape extends Base {
     }
     const operatorId = event.target.getAttribute('data-id')
   
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -468,7 +473,15 @@ export default class Shape extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -659,6 +672,8 @@ export default class Shape extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
+    this.scrollLeft = 0
+    this.scrollTop = 0
 
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()

packages/core/src/annotation/stamp.js

@@ -52,10 +52,11 @@ export default class Stamp extends Base {
   }
 
   async render () {
-    if (!this.annotation.rect) {
+    const annotation = this.annotation
+    if (!annotation.rect) {
       const getRect = await this.messageHandler.sendWithPromise('GetAnnotRect', {
-        pagePtr: this.annotation.pagePtr,
-        annotPtr: this.annotation.annotPtr
+        pagePtr: annotation.pagePtr,
+        annotPtr: annotation.annotPtr
       })
 
       const pageWidth = this.viewport.viewBox[2]
@@ -76,16 +77,14 @@ export default class Stamp extends Base {
       }
 
       await this.messageHandler.sendWithPromise('SetAnnotRect', {
-        pagePtr: this.annotation.pagePtr,
-        annotPtr: this.annotation.annotPtr,
+        pagePtr: annotation.pagePtr,
+        annotPtr: annotation.annotPtr,
         rect
       })
 
-      this.annotation.rect = rect
+      annotation.rect = rect
     }
 
-    const annotation = this.annotation
-
     const { start, end } = this.getActualRect(
       this.viewport,
       this.scale
@@ -122,7 +121,7 @@ export default class Stamp extends Base {
       }
 
       const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
-        annotPtr: this.annotation.annotPtr,
+        annotPtr: annotation.annotPtr,
         width: imgRect.width,
         height: imgRect.height
       })
@@ -139,6 +138,7 @@ export default class Stamp extends Base {
       drawContext.putImageData(imageData, 0, 0)
       imgSrc = canvas.toDataURL("image/png", 1)
     }
+    annotation.imageBase64 = imgSrc
 
     imgEle.src = imgSrc
     this.imgEle = imgEle
@@ -428,7 +428,12 @@ export default class Stamp extends Base {
       document.getElementById('app').style.touchAction = 'none';
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -448,7 +453,13 @@ export default class Stamp extends Base {
       event.stopPropagation()
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -643,7 +654,8 @@ export default class Stamp extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/annotation/text.js

@@ -134,6 +134,12 @@ export default class Text extends Base {
       event.stopPropagation()
     }
     this.moving = false
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       clickX: pageX,
@@ -150,7 +156,15 @@ export default class Text extends Base {
     if (event.type === 'touchmove') {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     if (pageX === this.startState.clickX && pageY === this.startState.clickY) return
     this.moving = true
     const start = this.start
@@ -160,7 +174,6 @@ export default class Text extends Base {
     const { width, height } = this.viewport
 
     let x1, y1, x2, y2
-    const documentViewer = this.layer.documentViewer
 
     let windowCoordinates = this.getMouseLocation(event);
     const page = documentViewer.getSelectedPage(windowCoordinates, windowCoordinates)
@@ -233,6 +246,8 @@ export default class Text extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
+    this.scrollLeft = 0
+    this.scrollTop = 0
 
     const annotation = this.annotation
     const start = getInitialPoint(this.start, this.viewport, this.viewport.scale)

packages/core/src/form/check_box.js

@@ -586,7 +586,12 @@ export default class CheckBox extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -607,7 +612,15 @@ export default class CheckBox extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -798,7 +811,9 @@ export default class CheckBox extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/form/combo_box.js

@@ -560,7 +560,12 @@ export default class ComboBox extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -581,7 +586,15 @@ export default class ComboBox extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -772,7 +785,9 @@ export default class ComboBox extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/form/list_box.js

@@ -537,6 +537,11 @@ export default class ListBox extends Base {
     }
     const operatorId = event.target.getAttribute('data-id')
 
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -557,7 +562,15 @@ export default class ListBox extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -750,6 +763,8 @@ export default class ListBox extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
+    this.scrollLeft = 0
+    this.scrollTop = 0
 
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()

packages/core/src/form/push_button.js

@@ -512,7 +512,12 @@ export default class PushButton extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -533,7 +538,15 @@ export default class PushButton extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -722,7 +735,9 @@ export default class PushButton extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/form/radio_button.js

@@ -589,7 +589,12 @@ export default class RadioButton extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -610,7 +615,15 @@ export default class RadioButton extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -801,7 +814,9 @@ export default class RadioButton extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/form/signature_fields.js

@@ -45,18 +45,18 @@ export default class SignatureFields extends Base {
   }
 
   async render () {
+    const annotation = this.annotation
     this.eventBus._on('setProperty', this.setProperty.bind(this))
     this.eventBus._on('updateSignatureFieldAp', this.updateAp.bind(this))
 
-    for (let key in this.annotation) {
+    for (let key in annotation) {
       if (key === 'background-color') {
         let newName = 'backgroundColor'
-        this.annotation[newName] = this.annotation[key]
-        delete this.annotation[key]
+        annotation[newName] = annotation[key]
+        delete annotation[key]
       }
     }
 
-    const annotation = this.annotation
 
     const { start, end } = this.getActualRect(
       this.viewport,
@@ -91,7 +91,7 @@ export default class SignatureFields extends Base {
     )
     this.shapeElement = shapeElement
 
-    if (!this.annotation.isSigned) {
+    if (!annotation.isSigned) {
       let tagElement = createElement(
         'div',
         {
@@ -115,14 +115,15 @@ export default class SignatureFields extends Base {
       this.tagElement = tagElement
     }
 
-    const signature = this.layer.annotationStore.signatures.find(item => item.signaturePtr === this.annotation.signaturePtr)
+    const signature = this.layer.annotationStore.signatures.find(item => item.signaturePtr === annotation.signaturePtr)
     if (signature) {
       this.isDigital = signature.isDigital
     }
-    await this.getSignatureImage()
+    const imgBase64 = await this.getSignatureImage()
+    annotation.imageBase64 = imgBase64
 
     this.annotationContainer.append(this.shapeElement)
-    this.annotationContainer.append(this.tagElement)
+    !annotation.isSigned && this.annotationContainer.append(this.tagElement)
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
     this.container.append(this.annotationContainer)
 
@@ -447,7 +448,12 @@ export default class SignatureFields extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -467,7 +473,15 @@ export default class SignatureFields extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -629,6 +643,7 @@ export default class SignatureFields extends Base {
     const annotationData = {
       type: 'delete',
       annotation: {
+        type: annotation.type,
         operate: "del-annot",
         name: this.annotation.name,
         pageIndex: this.page
@@ -660,7 +675,9 @@ export default class SignatureFields extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 
@@ -677,6 +694,7 @@ export default class SignatureFields extends Base {
       const annotationData = {
         type: 'delete',
         annotation: {
+          type: annotation.type,
           operate: "del-annot",
           name: annotation.name,
           pageIndex: annotation.pageIndex,
@@ -704,6 +722,7 @@ export default class SignatureFields extends Base {
         type: 'modify',
         annotation: {
           operate: "mod-form",
+          type: annotation.type,
           name: annotation.name,
           pageIndex: this.page,
           pagePtr: annotation.pagePtr,
@@ -781,6 +800,7 @@ export default class SignatureFields extends Base {
     if (updatePropsNum > 0) {
       const annotationData = {
         operate: "mod-form",
+        type: annotation.type,
         name: annotation.name,
         pageIndex: this.page,
         pagePtr: annotation.pagePtr,
@@ -814,6 +834,7 @@ export default class SignatureFields extends Base {
     if (updatePropsNum > 0) {
       const annotationData = {
         operate: "mod-form",
+        type: annotation.type,
         name: annotation.name,
         pageIndex: this.page,
         pagePtr: annotation.pagePtr,
@@ -873,6 +894,8 @@ export default class SignatureFields extends Base {
 
       this.annotationContainer.append(this.imgEle)
     }
+
+    return imgSrc
   }
 
   async updateAp(annotPtr) {
@@ -880,6 +903,7 @@ export default class SignatureFields extends Base {
     this.isDigital = false
     this.annotation.isSigned = 1
     this.tagElement.remove()
-    await this.getSignatureImage()
+    const imgBase64 = await this.getSignatureImage()
+    this.annotation.imageBase64 = imgBase64
   }
 }

packages/core/src/form/text_field.js

@@ -518,7 +518,12 @@ export default class TextField extends Base {
       event.stopPropagation()
     }
     const operatorId = event.target.getAttribute('data-id')
-  
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    this.scrollTop = scrollElement.scrollTop
+    this.scrollLeft = scrollElement.scrollLeft
+
     const { pageX, pageY } = getClickPoint(event)
     this.startState = {
       operator: operatorId,
@@ -539,7 +544,15 @@ export default class TextField extends Base {
       document.querySelector('.document-container').addEventListener('scroll', event => event.preventDefault())
     }
     this.moving = true
-    const { pageX, pageY } = getClickPoint(event)
+    let { pageX, pageY } = getClickPoint(event)
+
+    const documentViewer = this.layer.documentViewer
+    const scrollElement = documentViewer.getScrollViewElement()
+    const scrollTop = scrollElement.scrollTop
+    const scrollLeft = scrollElement.scrollLeft
+    pageX = pageX + scrollLeft - this.scrollLeft
+    pageY = pageY + scrollTop - this.scrollTop
+
     const start = this.start
     const end = this.end
     const startState = this.startState
@@ -730,7 +743,9 @@ export default class TextField extends Base {
     document.removeEventListener('mouseup', this.onMouseup)
     document.removeEventListener('touchmove', this.onMousemove)
     document.removeEventListener('touchend', this.onMouseup)
-    
+    this.scrollLeft = 0
+    this.scrollTop = 0
+
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 

packages/core/src/worker/compdfkit_worker.js

@@ -633,8 +633,11 @@ class CPDFWorker {
         setAnnotAuthor(annotation)
       }
 
-      if (annotation.operate === 'mod-form') Module._UpdateFormAp(annotation.annotPtr)
-      else Module._UpdateAnnotAp(annotation.annotPtr, 0)
+      if (annotation.operate === 'mod-form' && annotation.type !== 'signatureFields') {
+        Module._UpdateFormAp(annotation.annotPtr)
+      } else {
+        Module._UpdateAnnotAp(annotation.annotPtr, 0)
+      }
     })
 
     messageHandler.on('FlattenPage', (data) => {
@@ -2411,6 +2414,20 @@ function createWidget(doc, pagePtr, annotation) {
   })
 
   Module._UpdateFormAp(annotPtr)
+
+  if (type === 'signatureFields') {
+    const { imageBase64 } = annotation
+    if (imageBase64) {
+      const imageData = convertBase64ToBytes(imageBase64)
+
+      ComPDFKitJS.opened_image = []
+      ComPDFKitJS.opened_image[0] = imageData
+
+      Module._RemoveAP(annotPtr)
+      Module._SetImageStampByStream(annotPtr, 0, imageData.length, 0)
+      Module._SignWithName(annotPtr)
+    }
+  }
   return {
     annotPtr
   }