From 8320c52b2b0053d1fbd8dd9b5e765433792211ca Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Tue, 2 Dec 2025 08:46:05 -0300
Subject: [PATCH] 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>
---
 src/Components/ItemEventsMixin.vue | 32 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/Components/ItemEventsMixin.vue b/src/Components/ItemEventsMixin.vue
index a5753ac..d60b032 100644
--- a/src/Components/ItemEventsMixin.vue
+++ b/src/Components/ItemEventsMixin.vue
@@ -5,22 +5,38 @@ export default {
 		return {
 			x_mixin: null,
 			y_mixin: null,
+			initialCanvasWidth: null,
+			initialCanvasHeight: null,
 		}
 	},
 	created() {},
 	methods: {
 		getCurrentPageDimensions() {
 			const page = this.$el?.closest('.page')
-			if (page) {
-				const canvas = page.querySelector('canvas')
-				if (canvas) {
-					return {
-						pageWidth: canvas.width,
-						pageHeight: canvas.height,
-					}
+			if (!page) {
+				return { pageWidth: 999999, pageHeight: 999999 }
+			}
+
+			const canvas = page.querySelector('canvas')
+			if (!canvas) {
+				return { pageWidth: 999999, pageHeight: 999999 }
+			}
+
+			if (!this.initialCanvasWidth) {
+				let component = this.$parent
+				while (component && component.$options.name !== 'VuePdfEditor') {
+					component = component.$parent
 				}
+				const currentScale = component?.scale || 1
+
+				this.initialCanvasWidth = canvas.width / currentScale
+				this.initialCanvasHeight = canvas.height / currentScale
+			}
+
+			return {
+				pageWidth: this.initialCanvasWidth,
+				pageHeight: this.initialCanvasHeight,
 			}
-			return { pageWidth: 0, pageHeight: 0 }
 		},
 		handleMousedown(event) {
 			this.x_mixin = event.clientX