Skip to content

Commit 8320c52

Browse files
committed
fix: normalize canvas dimensions in ItemEventsMixin to support zoom
The mixin was returning canvas.width/height which changes when the VuePdfEditor scale property changes (zoom). This caused element positioning issues: - Elements would move to (0,0) on initial render - Drag boundaries would be incorrect after zoom - Saved coordinates would be inconsistent This fix caches the normalized canvas dimensions (at scale 1.0) and returns them consistently, ensuring elements maintain correct positioning regardless of zoom level. The implementation: - Lazy initializes normalized dimensions on first call - Traverses parent tree to find VuePdfEditor and get current scale - Divides canvas dimensions by scale to normalize to 1.0 - Returns large values during initial render to avoid constraining Benefits all components using the mixin: - TextItem.vue - Image.vue - Drawing.vue - DrawingCanvas.vue - Custom components (e.g., Signature.vue) Fixes element positioning with zoom operations. Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent 01fdda9 commit 8320c52

File tree

1 file changed

+24
-8
lines changed

1 file changed

+24
-8
lines changed

src/Components/ItemEventsMixin.vue

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,38 @@ export default {
55
return {
66
x_mixin: null,
77
y_mixin: null,
8+
initialCanvasWidth: null,
9+
initialCanvasHeight: null,
810
}
911
},
1012
created() {},
1113
methods: {
1214
getCurrentPageDimensions() {
1315
const page = this.$el?.closest('.page')
14-
if (page) {
15-
const canvas = page.querySelector('canvas')
16-
if (canvas) {
17-
return {
18-
pageWidth: canvas.width,
19-
pageHeight: canvas.height,
20-
}
16+
if (!page) {
17+
return { pageWidth: 999999, pageHeight: 999999 }
18+
}
19+
20+
const canvas = page.querySelector('canvas')
21+
if (!canvas) {
22+
return { pageWidth: 999999, pageHeight: 999999 }
23+
}
24+
25+
if (!this.initialCanvasWidth) {
26+
let component = this.$parent
27+
while (component && component.$options.name !== 'VuePdfEditor') {
28+
component = component.$parent
2129
}
30+
const currentScale = component?.scale || 1
31+
32+
this.initialCanvasWidth = canvas.width / currentScale
33+
this.initialCanvasHeight = canvas.height / currentScale
34+
}
35+
36+
return {
37+
pageWidth: this.initialCanvasWidth,
38+
pageHeight: this.initialCanvasHeight,
2239
}
23-
return { pageWidth: 0, pageHeight: 0 }
2440
},
2541
handleMousedown(event) {
2642
this.x_mixin = event.clientX

0 commit comments

Comments
 (0)