update: form缩放拖拽后更新外观

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/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,
@@ -779,6 +780,7 @@ export default class CheckBox extends Base {
       right: end.x,
       bottom: end.y
     }
+    this.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
@@ -791,7 +793,7 @@ export default class CheckBox extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -808,9 +810,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,7 +999,7 @@ 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),
@@ -1009,7 +1008,7 @@ export default class CheckBox extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
+      rect: this.rect || this.annotation.rect,
       scale: this.scale * this.layer.ratio
     })
 
@@ -1025,6 +1024,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 {

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',
@@ -755,6 +756,7 @@ export default class ComboBox extends Base {
       right: end.x,
       bottom: end.y
     }
+    this.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
@@ -767,7 +769,7 @@ export default class ComboBox extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -784,12 +786,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 +1092,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,7 +1101,7 @@ export default class ComboBox extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
+      rect: this.rect || this.annotation.rect,
       scale: this.scale * this.layer.ratio
     })
 
@@ -1121,6 +1117,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',
@@ -731,6 +732,7 @@ export default class ListBox extends Base {
       right: end.x,
       bottom: end.y
     }
+    this.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
@@ -743,7 +745,7 @@ export default class ListBox extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update({ start, end }) {
@@ -760,12 +762,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 +1080,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,7 +1089,7 @@ export default class ListBox extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
+      rect: this.rect || this.annotation.rect,
       scale: this.scale * this.layer.ratio
     })
 
@@ -1109,6 +1105,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))
 
@@ -708,6 +709,7 @@ export default class PushButton extends Base {
       right: end.x,
       bottom: end.y
     }
+    this.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
@@ -720,7 +722,7 @@ export default class PushButton extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -729,8 +731,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 +739,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 +1021,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,7 +1030,7 @@ export default class PushButton extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
+      rect: this.rect || this.annotation.rect,
       scale: this.scale * this.layer.ratio
     })
 
@@ -1049,6 +1046,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,
@@ -782,6 +783,7 @@ export default class RadioButton extends Base {
       right: end.x,
       bottom: end.y
     }
+    this.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
@@ -794,7 +796,7 @@ export default class RadioButton extends Base {
         rect
       }
     })
-    this.getImage()
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -811,9 +813,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 +1016,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,7 +1025,7 @@ export default class RadioButton extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
+      rect: this.rect || this.annotation.rect,
       scale: this.scale * this.layer.ratio
     })
 
@@ -1042,6 +1041,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/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))
 
@@ -713,6 +714,7 @@ export default class TextField extends Base {
       right: end.x,
       bottom: end.y
     }
+    this.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
@@ -725,6 +727,7 @@ export default class TextField extends Base {
         rect
       }
     })
+    this.getImage(true)
   }
 
   update ({ start, end }) {
@@ -741,9 +744,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,7 +1112,7 @@ 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),
@@ -1121,7 +1121,7 @@ export default class TextField extends Base {
 
     const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
       annotPtr: this.annotation.annotPtr,
-      rect: this.annotation.rect,
+      rect: this.rect || this.annotation.rect,
       scale: this.scale * this.layer.ratio
     })
 
@@ -1137,6 +1137,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 {