packages/core/src/annotation/freetext.js

@@ -362,7 +362,7 @@ export default class Shape extends Base {
     this.firstSelect = true
     if (this.show) {
       this.firstSelect = false
-      this.handleElementSelect()
+      !this.layer.addMode && this.handleElementSelect()
     }
   }
 

packages/core/src/annotation/layer.js

@@ -807,7 +807,7 @@ class ComPDFAnnotationLayer {
         scale: this.scale,
         eventBus: this.eventBus,
         layer: this,
-        highlight: this.highlightForm,
+        highlight: this.annotationStore.highlightForm,
         messageHandler: this.messageHandler
       })
       this.annotationsArray.push(textfield)

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

@@ -133,6 +133,7 @@ export default class Freetext {
         annotation
       })
     }
+    this.layer.addMode = false
     freetextElement.removeEventListener('blur', this.onBlur)
     freetextElement.removeEventListener('paste', this.onPaste)
     freetextElement.remove()
@@ -151,6 +152,7 @@ export default class Freetext {
     if (freetextElement && event.target === freetextElement) return
 
     if (!freetextElement && !this.layer.selectedElementName) {
+      this.layer.addMode = true
       this.renderFreetext(event)
     }
   }

packages/core/src/annotation/stamp.js

@@ -128,8 +128,8 @@ export default class Stamp extends Base {
 
       const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
         annotPtr: this.annotation.annotPtr,
-        rect: this.annotation.rect,
-        scale: this.scale * this.ratio
+        width: imgRect.width,
+        height: imgRect.height
       })
 
       const canvas = document.createElement('canvas')

packages/core/src/form/add_check_box.js

@@ -173,9 +173,8 @@ export default class AddCheckBox {
         const shapeEle = createElement('div', {
           'backgroundColor': '#DDE9FF',
           'borderColor': '#43474D',
-          'borderWidth': '3',
+          'borderWidth': '1px',
           'borderStyle': 'solid',
-
           'position': "absolute"
         })
         this.shapeEle = shapeEle

packages/core/src/form/add_radio_button.js

@@ -173,7 +173,7 @@ export default class AddRadioButton {
         const shapeEle = createElement('div', {
           'backgroundColor': '#DDE9FF',
           'borderColor': '#43474D',
-          'borderWidth': '3',
+          'borderWidth': '1px',
           'borderStyle': 'solid',
           'borderRadius': '100%',
           'position': "absolute"

packages/core/src/form/check_box.js

@@ -83,6 +83,7 @@ export default class CheckBox extends Base {
     annotationContainer.style.width = rect.width + 'px'
     annotationContainer.style.height = rect.height + 'px'
     annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
+    annotationContainer.style.overflow = 'hidden'
     this.annotationContainer = annotationContainer
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
 
@@ -113,8 +114,8 @@ export default class CheckBox extends Base {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        width: `${Math.abs(rect.width)}px`,
-        height: `${Math.abs(rect.height)}px`,
+        width: '100%',
+        height: '100%',
         borderColor: annotation.borderColor,
         borderWidth: annotation.borderWidth | 1 + 'px',
         borderStyle: annotation.borderStyle,
@@ -791,7 +792,7 @@ export default class CheckBox extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -808,9 +809,6 @@ export default class CheckBox extends Base {
     this.annotationContainer.style.width = `${rect.width}px`;
     this.annotationContainer.style.height = `${rect.height}px`;
 
-    this.borderElement.style.width = `${rect.width}px`;
-    this.borderElement.style.height = `${rect.height}px`;
-
     this.outerLine.style.left = `${rect.left - 4}px`
     this.outerLine.style.top = `${rect.top - 4}px`
     this.outerLine.style.width = `${rect.width + 4 * 2}px`
@@ -1000,17 +998,17 @@ export default class CheckBox extends Base {
     this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
   }
 
-  async getImage() {
+  async getImage(update) {
     const rect = this.initRect
     const imgRect = {
-      width: parseInt(rect.width * this.layer.ratio + 1),
-      height: parseInt(rect.height * this.layer.ratio + 1)
+      width: parseInt(rect.width * this.layer.ratio),
+      height: parseInt(rect.height * this.layer.ratio)
     }
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.layer.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')
@@ -1025,6 +1023,12 @@ export default class CheckBox extends Base {
     drawContext.putImageData(imageData, 0, 0)
     const imgSrc = canvas.toDataURL("image/png", 1)
 
+    if (update) {
+      const rect = this.calculate(this.start, this.end)
+      this.shapeElement.style.width = `${rect.width}px`
+      this.shapeElement.style.height = `${rect.height}px`
+    }
+
     if (this.imgEle) {
       this.imgEle.src = imgSrc
     } else {
@@ -1032,6 +1036,7 @@ export default class CheckBox extends Base {
       imgEle.style.width = '100%'
       imgEle.style.height = '100%'
       imgEle.style.pointerEvents = 'none'
+      imgEle.style.position = 'absolute'
 
       imgEle.src = imgSrc
       this.imgEle = imgEle

packages/core/src/form/combo_box.js

@@ -104,6 +104,7 @@ export default class ComboBox extends Base {
     annotationContainer.style.width = rect.width + 'px'
     annotationContainer.style.height = rect.height + 'px'
     annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
+    annotationContainer.style.overflow = 'hidden'
     this.annotationContainer = annotationContainer
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
 
@@ -131,8 +132,8 @@ export default class ComboBox extends Base {
         left: 0,
         top: 0,
         paddingLeft: '4px',
-        width: `${Math.abs(rect.width)}px`,
-        height: `${Math.abs(rect.height)}px`,
+        width: '100%',
+        height: '100%',
         borderColor: annotation.borderColor,
         borderWidth: (annotation.borderWidth || 1) + 'px',
         borderStyle: annotation.borderStyle || 'solid',
@@ -767,7 +768,7 @@ export default class ComboBox extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -784,12 +785,6 @@ export default class ComboBox extends Base {
     this.annotationContainer.style.width = `${rect.width}px`;
     this.annotationContainer.style.height = `${rect.height}px`;
 
-    this.shapeElement.style.width = `${rect.width}px`;
-    this.shapeElement.style.height = `${rect.height}px`;
-
-    this.selectElement.style.width = `${rect.width}px`;
-    this.selectElement.style.height = `${rect.height}px`;
-
     this.outerLine.style.left = `${rect.left - 8}px`
     this.outerLine.style.top = `${rect.top - 8}px`
     this.outerLine.style.width = `${rect.width + 8 * 2}px`
@@ -1096,7 +1091,7 @@ export default class ComboBox extends Base {
     this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
   }
 
-  async getImage() {
+  async getImage(update) {
     const rect = this.initRect
     const imgRect = {
       width: parseInt(rect.width * this.layer.ratio + 1),
@@ -1105,8 +1100,8 @@ export default class ComboBox extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.layer.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')
@@ -1121,6 +1116,12 @@ export default class ComboBox extends Base {
     drawContext.putImageData(imageData, 0, 0)
     const imgSrc = canvas.toDataURL("image/png", 1)
 
+    if (update) {
+      const rect = this.calculate(this.start, this.end)
+      this.shapeElement.style.width = `${rect.width}px`
+      this.shapeElement.style.height = `${rect.height}px`
+    }
+
     if (this.imgEle) {
       this.imgEle.src = imgSrc
     } else {

packages/core/src/form/list_box.js

@@ -100,6 +100,7 @@ export default class ListBox extends Base {
     annotationContainer.style.width = rect.width + 'px'
     annotationContainer.style.height = rect.height + 'px'
     annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
+    annotationContainer.style.overflow = 'hidden'
     this.annotationContainer = annotationContainer
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
     
@@ -125,8 +126,8 @@ export default class ListBox extends Base {
         position: 'absolute',
         left: 0,
         top: 0,
-        width: `${Math.abs(rect.width)}px`,
-        height: `${Math.abs(rect.height)}px`,
+        width: '100%',
+        height: '100%',
         borderColor: annotation.borderColor,
         borderWidth: (annotation.borderWidth || 1) + 'px',
         borderStyle: annotation.borderStyle || 'solid',
@@ -743,7 +744,7 @@ export default class ListBox extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update({ start, end }) {
@@ -760,12 +761,6 @@ export default class ListBox extends Base {
     this.annotationContainer.style.width = `${rect.width}px`;
     this.annotationContainer.style.height = `${rect.height}px`;
 
-    this.shapeElement.style.width = `${rect.width}px`;
-    this.shapeElement.style.height = `${rect.height}px`;
-
-    this.selectElement.style.width = `${rect.width}px`;
-    this.selectElement.style.height = `${rect.height}px`;
-
     this.outerLine.style.left = `${rect.left - 8}px`
     this.outerLine.style.top = `${rect.top - 8}px`
     this.outerLine.style.width = `${rect.width + 8 * 2}px`
@@ -1084,7 +1079,7 @@ export default class ListBox extends Base {
     this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
   }
 
-  async getImage() {
+  async getImage(update) {
     const rect = this.initRect
     const imgRect = {
       width: parseInt(rect.width * this.layer.ratio + 1),
@@ -1093,8 +1088,8 @@ export default class ListBox extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.layer.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')
@@ -1109,6 +1104,12 @@ export default class ListBox extends Base {
     drawContext.putImageData(imageData, 0, 0)
     const imgSrc = canvas.toDataURL("image/png", 1)
 
+    if (update) {
+      const rect = this.calculate(this.start, this.end)
+      this.shapeElement.style.width = `${rect.width}px`
+      this.shapeElement.style.height = `${rect.height}px`
+    }
+
     if (this.imgEle) {
       this.imgEle.src = imgSrc
     } else {

packages/core/src/form/push_button.js

@@ -92,6 +92,7 @@ export default class PushButton extends Base {
     annotationContainer.style.width = rect.width + 'px'
     annotationContainer.style.height = rect.height + 'px'
     annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
+    annotationContainer.style.overflow = 'hidden'
     this.annotationContainer = annotationContainer
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
 
@@ -720,7 +721,7 @@ export default class PushButton extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -729,8 +730,6 @@ export default class PushButton extends Base {
     this.newStart = start
     this.newEnd = end
 
-    const actualbdwidth = (this.annotation.borderWidth || 2) * this.scale
-
     this.annotationContainer.style.top = rect.top + 'px'
     this.annotationContainer.style.left = rect.left + 'px'
     this.annotationContainer.style.width = rect.width + 'px'
@@ -739,9 +738,6 @@ export default class PushButton extends Base {
     this.annotationContainer.style.width = `${rect.width}px`;
     this.annotationContainer.style.height = `${rect.height}px`;
 
-    this.shapeElement.style.width = `${rect.width}px`;
-    this.shapeElement.style.height = `${rect.height}px`;
-
     this.outerLine.style.left = `${rect.left - 8}px`
     this.outerLine.style.top = `${rect.top - 8}px`
     this.outerLine.style.width = `${rect.width + 8 * 2}px`
@@ -1024,7 +1020,7 @@ export default class PushButton extends Base {
     this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
   }
 
-  async getImage() {
+  async getImage(update) {
     const rect = this.initRect
     const imgRect = {
       width: parseInt(rect.width * this.layer.ratio + 1),
@@ -1033,8 +1029,8 @@ export default class PushButton extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.layer.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')
@@ -1049,6 +1045,12 @@ export default class PushButton extends Base {
     drawContext.putImageData(imageData, 0, 0)
     const imgSrc = canvas.toDataURL("image/png", 1)
 
+    if (update) {
+      const rect = this.calculate(this.start, this.end)
+      this.shapeElement.style.width = `${rect.width}px`
+      this.shapeElement.style.height = `${rect.height}px`
+    }
+
     if (this.imgEle) {
       this.imgEle.src = imgSrc
     } else {

packages/core/src/form/radio_button.js

@@ -83,6 +83,7 @@ export default class RadioButton extends Base {
     annotationContainer.style.width = rect.width + 'px'
     annotationContainer.style.height = rect.height + 'px'
     annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
+    annotationContainer.style.overflow = 'hidden'
     this.annotationContainer = annotationContainer
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
 
@@ -113,8 +114,8 @@ export default class RadioButton extends Base {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        width: `${Math.abs(rect.width)}px`,
-        height: `${Math.abs(rect.height)}px`,
+        width: '100%',
+        height: '100%',
         borderColor: annotation.borderColor,
         borderWidth: annotation.borderWidth | 1 + 'px',
         borderStyle: annotation.borderStyle,
@@ -794,7 +795,7 @@ export default class RadioButton extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -811,9 +812,6 @@ export default class RadioButton extends Base {
     this.annotationContainer.style.width = `${rect.width}px`;
     this.annotationContainer.style.height = `${rect.height}px`;
 
-    this.borderElement.style.width = `${rect.width}px`;
-    this.borderElement.style.height = `${rect.height}px`;
-
     this.outerLine.style.left = `${rect.left - 4}px`
     this.outerLine.style.top = `${rect.top - 4}px`
     this.outerLine.style.width = `${rect.width + 4 * 2}px`
@@ -1017,7 +1015,7 @@ export default class RadioButton extends Base {
     this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
   }
 
-  async getImage() {
+  async getImage(update) {
     const rect = this.initRect
     const imgRect = {
       width: parseInt(rect.width * this.layer.ratio + 1),
@@ -1026,8 +1024,8 @@ export default class RadioButton extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.layer.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')
@@ -1042,6 +1040,12 @@ export default class RadioButton extends Base {
     drawContext.putImageData(imageData, 0, 0)
     const imgSrc = canvas.toDataURL("image/png", 1)
 
+    if (update) {
+      const rect = this.calculate(this.start, this.end)
+      this.shapeElement.style.width = `${rect.width}px`
+      this.shapeElement.style.height = `${rect.height}px`
+    }
+
     if (this.imgEle) {
       this.imgEle.src = imgSrc
     } else {

packages/core/src/form/signature_fields.js

@@ -781,8 +781,8 @@ export default class SignatureFields extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')

packages/core/src/form/text_field.js

@@ -100,6 +100,7 @@ export default class TextField extends Base {
     annotationContainer.style.width = rect.width + 'px'
     annotationContainer.style.height = rect.height + 'px'
     annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
+    annotationContainer.style.overflow = 'hidden'
     this.annotationContainer = annotationContainer
     this.annotationContainer.addEventListener('mousedown', this.handleClick.bind(this))
 
@@ -725,6 +726,7 @@ export default class TextField extends Base {
         rect
       }
     })
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -741,9 +743,6 @@ export default class TextField extends Base {
     this.annotationContainer.style.width = `${rect.width}px`;
     this.annotationContainer.style.height = `${rect.height}px`;
 
-    this.shapeElement.style.width = `${rect.width}px`;
-    this.shapeElement.style.height = `${rect.height}px`;
-
     this.outerLine.style.left = `${rect.left - 4}px`
     this.outerLine.style.top = `${rect.top - 4}px`
     this.outerLine.style.width = `${rect.width + 4 * 2}px`
@@ -1112,17 +1111,17 @@ export default class TextField extends Base {
     this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
   }
 
-  async getImage() {
+  async getImage(update) {
     const rect = this.initRect
     const imgRect = {
-      width: parseInt(rect.width * this.layer.ratio + 1),
-      height: parseInt(rect.height * this.layer.ratio + 1)
+      width: parseInt(rect.width * this.layer.ratio),
+      height: parseInt(rect.height * this.layer.ratio)
     }
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
-      scale: this.scale * this.layer.ratio
+      width: imgRect.width,
+      height: imgRect.height
     })
 
     const canvas = document.createElement('canvas')
@@ -1137,6 +1136,12 @@ export default class TextField extends Base {
     drawContext.putImageData(imageData, 0, 0)
     const imgSrc = canvas.toDataURL("image/png", 1)
 
+    if (update) {
+      const rect = this.calculate(this.start, this.end)
+      this.shapeElement.style.width = `${rect.width}px`
+      this.shapeElement.style.height = `${rect.height}px`
+    }
+
     if (this.imgEle) {
       this.imgEle.src = imgSrc
     } else {

packages/core/src/markup/text_annotation.js

@@ -33,11 +33,13 @@ class TextAnnotation extends BaseAnnotation {
     this.outerLineContainer = null
     this.ratio = window.devicePixelRatio || 1
     this.ctx = this.pageViewer.canvas.getContext('2d', { willReadFrequently: true })
+    this.baseImageData = this.pageViewer.baseImageData
     this.lineWidth = 2 * this.scale * this.ratio
 
     this.onHandleClick = this.handleClick.bind(this)
     this.onDelete = this.handleDelete.bind(this)
     this.onOpenReply = this.openReply.bind(this)
+    this.onUpdateMarkup = this.updateMarkup.bind(this)
 
     this.render()
   }
@@ -53,11 +55,12 @@ class TextAnnotation extends BaseAnnotation {
 
     const rect = this.calculate(start, end)
     this.rect = rect
-    this.baseImageData = this.ctx.getImageData(rect.left * this.ratio, rect.top * this.ratio, Math.round(rect.width * this.ratio), Math.round(rect.height * this.ratio + this.lineWidth + 2))
 
     const quadPoints = annotation.quadPoints
     if (!quadPoints) return
 
+    this.eventBus._on('markupUpdate', this.onUpdateMarkup)
+
     let positionArray = []
     for (let i = 0; (i + 3) < quadPoints.length; i+=4) {
       const x1 = parseInt(quadPoints[i].PointX * scale, 10),
@@ -77,13 +80,10 @@ class TextAnnotation extends BaseAnnotation {
         height
       })
     }
+    this.positionArray = positionArray
 
     this.ctx.globalCompositeOperation = 'multiply'
-    if (['highlight', 'underline', 'strikeout'].includes(annotation.type)) {
-      this.renderCanvansRect(positionArray)
-    } else if (annotation.type === 'squiggly') {
-      this.renderSquiggly(positionArray)
-    }
+    this.renderCanvansRect(positionArray)
     this.markupContainer.addEventListener('click', this.onHandleClick)
     
     this.outerLineContainer = document.createElement('div')
@@ -258,9 +258,14 @@ class TextAnnotation extends BaseAnnotation {
     this.handleOutside()
     this.markupContainer.remove()
 
+    this.eventBus._off('markupUpdate', this.onUpdateMarkup)
     this.ctx.clearRect(this.rect.left * this.ratio, this.rect.top * this.ratio, this.rect.width * this.ratio, this.rect.height * this.ratio)
-    this.ctx.putImageData(this.baseImageData, this.rect.left * this.ratio, this.rect.top * this.ratio)
-    this.baseImageData = null
+    this.ctx.putImageData(this.baseImageData, 0, 0, this.rect.left * this.ratio, this.rect.top * this.ratio, Math.round(this.rect.width * this.ratio + this.lineWidth + 2), Math.round(this.rect.height * this.ratio + this.lineWidth + 2))
+    this.eventBus.dispatch('markupUpdate', {
+      name: this.annotation.name,
+      pageIndex: this.page,
+      rect: this.rect
+    })
 
     this.annotation.isDelete = true
     const annotationData = {
@@ -288,10 +293,6 @@ class TextAnnotation extends BaseAnnotation {
   }
 
   renderCanvansRect (positionArray) {
-    const annotation = this.annotation
-    const { R, G, B } = convertColorToRGB(annotation.color)
-    this.ctx.fillStyle = `rgba(${R}, ${G}, ${B}, ${annotation.opacity || 1})`
-
     const markupContainer = document.createElement('div')
     markupContainer.className = 'markup'
 
@@ -306,58 +307,79 @@ class TextAnnotation extends BaseAnnotation {
         height: position.height + 'px'
       })
       markupContainer.append(container)
-
-      if (annotation.type === 'highlight') {
-        this.ctx.fillRect(position.left * this.ratio, position.top * this.ratio, position.width * this.ratio, position.height * this.ratio)
-      } else if (annotation.type === 'underline') {
-        this.ctx.fillRect(position.left * this.ratio, (position.top + position.height) * this.ratio, position.width * this.ratio, this.lineWidth)
-      } else if (annotation.type === 'strikeout') {
-        this.ctx.fillRect(position.left * this.ratio, (position.top + (position.height / 2)) * this.ratio, position.width * this.ratio, this.lineWidth)
-      }
     }
-    
+    this.drawCanvas(positionArray)
     this.container.append(markupContainer)
     this.markupContainer = markupContainer
   }
+  
+  openReply () {
+    this.eventBus.dispatch('openAnnotationReply', this.annotation)
+  }
 
-  renderSquiggly (positionArray) {
-    const annotation = this.annotation
-    const markupContainer = document.createElement('div')
-    markupContainer.className = 'markup'
+  updateMarkup (data) {
+    if (data.pageIndex !== this.page || data.name === this.annotation.name) return
 
-    const amplitude = 4 * this.scale  // 波动幅度
-    const wavelength = 42 * this.scale // 波长
-    const { R, G, B } = convertColorToRGB(annotation.color)
-    this.ctx.strokeStyle = `rgba(${R}, ${G}, ${B}, ${annotation.opacity || 1})`
-    this.ctx.lineWidth = this.lineWidth
+    const rect1 = this.rect
+    const rect2 = data.rect
 
-    for (let i = 0; i < positionArray.length; i++) {
-      const position = positionArray[i]
-      const container = document.createElement('div')
-      this.setCss(container, {
-        position: 'absolute',
-        overflow: 'hidden',
-        opacity: annotation.opacity || 1,
-        top: position.top + 'px',
-        left: position.left + 'px',
-        width: position.width + 'px',
-        height: position.height + 'px',
-      })
-      markupContainer.append(container)
+    if (rect1.left > rect2.left + rect2.width ||
+        rect1.left + rect1.width < rect2.left ||
+        rect1.top > rect2.top + rect2.height ||
+        rect1.top + rect1.height < rect2.top
+    ) return
 
-      this.ctx.beginPath()
-      for (let x = position.left * this.ratio; x <= (position.left + position.width) * this.ratio; x++) {
-        const y = (position.top + position.height) * this.ratio + amplitude * Math.sin((x / wavelength) * 2 * Math.PI)
-        this.ctx.lineTo(x, y)
+    this.ctx.clearRect(this.rect.left * this.ratio, this.rect.top * this.ratio, this.rect.width * this.ratio, this.rect.height * this.ratio)
+    this.ctx.putImageData(this.baseImageData, 0, 0, this.rect.left * this.ratio, this.rect.top * this.ratio, Math.round(this.rect.width * this.ratio + this.lineWidth + 2), Math.round(this.rect.height * this.ratio + this.lineWidth + 2))
+    this.drawCanvas(this.positionArray)
+  }
+
+  drawCanvas(positionArray) {
+    const annotation = this.annotation
+    if (['highlight', 'underline', 'strikeout'].includes(annotation.type)) {
+      const { R, G, B } = convertColorToRGB(annotation.color)
+      this.ctx.fillStyle = `rgba(${R}, ${G}, ${B}, ${annotation.opacity || 1})`
+
+      const markupContainer = document.createElement('div')
+      markupContainer.className = 'markup'
+
+      for (let i = 0; i < positionArray.length; i++) {
+        const position = positionArray[i]
+        const container = document.createElement('div')
+        this.setCss(container, {
+          position: 'absolute',
+          top: position.top + 'px',
+          left: position.left + 'px',
+          width: position.width + 'px',
+          height: position.height + 'px'
+        })
+        markupContainer.append(container)
+
+        if (annotation.type === 'highlight') {
+          this.ctx.fillRect(position.left * this.ratio, position.top * this.ratio, position.width * this.ratio, position.height * this.ratio)
+        } else if (annotation.type === 'underline') {
+          this.ctx.fillRect(position.left * this.ratio, (position.top + position.height) * this.ratio, position.width * this.ratio, this.lineWidth)
+        } else if (annotation.type === 'strikeout') {
+          this.ctx.fillRect(position.left * this.ratio, (position.top + (position.height / 2)) * this.ratio, position.width * this.ratio, this.lineWidth)
+        }
+      }
+    } else if (annotation.type === 'squiggly') {
+      const amplitude = 3 * this.scale  // 波动幅度
+      const wavelength = 20 * this.scale // 波长
+      const { R, G, B } = convertColorToRGB(annotation.color)
+      this.ctx.strokeStyle = `rgba(${R}, ${G}, ${B}, ${annotation.opacity || 1})`
+      this.ctx.lineWidth = this.lineWidth
+
+      for (let i = 0; i < positionArray.length; i++) {
+        const position = positionArray[i]
+        this.ctx.beginPath()
+        for (let x = position.left * this.ratio; x <= (position.left + position.width) * this.ratio; x++) {
+          const y = (position.top + position.height) * this.ratio + amplitude * Math.sin((x / wavelength) * 2 * Math.PI)
+          this.ctx.lineTo(x, y)
+        }
+        this.ctx.stroke()
       }
-      this.ctx.stroke()
     }
-    this.container.append(markupContainer)
-    this.markupContainer = markupContainer
-  }
-  
-  openReply () {
-    this.eventBus.dispatch('openAnnotationReply', this.annotation)
   }
 }
 

packages/core/src/pdf_page_view.js

@@ -720,6 +720,7 @@ class PDFPageView {
         let imageData = ctx.createImageData(width, height);
         imageData.data.set(imageArray)
         ctx.putImageData(imageData, 0, 0)
+        this.baseImageData = imageData
 
         renderCapability.resolve()
       })
@@ -1429,6 +1430,7 @@ class PDFPageView {
         let imageData = ctx.createImageData(canvasWidth, canvasHeight);
         imageData.data.set(imageArray)
         ctx.putImageData(imageData, 0, 0)
+        this.baseImageData = imageData
 
         showCanvas();
         renderCapability.resolve();

packages/core/src/worker/compdfkit_worker.js

@@ -248,9 +248,7 @@ class CPDFWorker {
     })
 
     messageHandler.on('GetRenderAnnot', (data) => {
-      const { annotPtr, rect, scale } = data
-      const width = parseInt(rect.right * scale - rect.left * scale + 1)
-      const height = parseInt(rect.bottom * scale - rect.top * scale + 1)
+      const { annotPtr, width, height } = data
       let pixelNum = width * height
 
       let imageBytes = pixelNum * 4

packages/webview/src/components/App/index.vue

@@ -246,7 +246,7 @@ const calculateDistance = (touches) => {
       color: #232A40;
       padding: 16px 16px 40px;
       background: #FFFFFF;
-      box-shadow: 0px 4px 32px rgba(129, 149, 200, 0.32);
+      box-shadow: 0px 4px 32px var(--c-doc-editor-popup-shadow);
       border-radius: 4px;
       .fail-logo svg {
         width: 60px;

packages/webview/src/components/CompareDocumentContainer/CompareDocumentContainer.vue

@@ -145,7 +145,7 @@ const uploadFile = async (e, flag) => {
   if (!e.target.files[0]) return
 
   let url = URL.createObjectURL(e.target.files[0])
-  const pass = await core.checkPassword(url)
+  const pass = await core.checkPassword(url, true)
   if (pass === false) {
     e.target.value = ''
     return
@@ -188,7 +188,7 @@ const handleDrop = async (e, flag) => {
   if (files[0].type !== 'application/pdf') return
 
   let url = URL.createObjectURL(files[0])
-  const pass = await core.checkPassword(url)
+  const pass = await core.checkPassword(url, true)
   if (pass === false) {
     e.target.value = ''
     return

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

@@ -82,7 +82,7 @@
       max-width: 252px;
       padding: 20px 16px;
       background-color: var(--c-header-bg);
-      box-shadow: 0px 4px 32px 0px rgba(129, 149, 200, 0.32);
+      box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);
       border-radius: 4px;
     }
     .header-container {

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.5.0</span>
+        <span>2.5.1</span>
       </div>
 
       <template #footer>

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

@@ -226,7 +226,7 @@ const getValue = (key) => {
       break
     case 'version':
       text.title = $t('signatures.appearanceDialog.ComPDFKitVersion')
-      text.value = '2.5.0'
+      text.value = '2.5.1'
       break
     case 'location':
       text.title = $t('signatures.appearanceDialog.location')

packages/webview/src/components/ModalContainer/ModalContainer.vue

@@ -17,7 +17,7 @@
 <style lang="scss">
 .modal-container {
   background-color: var(--c-header-bg);
-  box-shadow: 0px 4px 32px 0px rgba(129, 149, 200, 0.32);
+  box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);
   border-radius: 4px;
   .wrapper {
     position: relative;

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

@@ -58,8 +58,8 @@ const clear = () => {
   })
 }
 
-const save = () => {
-  const imageBase64 = core.handleSign({
+const save = async () => {
+  const imageBase64 = await core.handleSign({
     type: 1,
     flag: 'image',
   })