From d35ae6926544f791e22f45969ea1ca1c17384f30 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Sat, 22 Nov 2025 18:09:32 +0100
Subject: [PATCH] [FEAT] Fix incorrect offset val. label placement

---
 src/components/SpriteCanvas.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index de036e1..908d556 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -79,8 +79,9 @@
             :key="position.id"
             class="absolute text-[23px] leading-none font-mono text-cyan-600 dark:text-cyan-400 bg-white/90 dark:bg-gray-900/90 px-1 py-0.5 rounded-sm"
             :style="{
-              left: `calc(${(position.cellX / canvasRef.width) * 100}% + ${(position.maxWidth / canvasRef.width) * 100}% - 2px)`,
-              top: `calc(${(position.cellY / canvasRef.height) * 100}% + ${(position.maxHeight / canvasRef.height) * 100}% - 2px)`,
+              // Use the global cell size so labels line up with the actual grid cells
+              left: `calc(${(position.cellX / canvasWidth) * 100}% + ${(gridMetrics.maxWidth / canvasWidth) * 100}% - 2px)`,
+              top: `calc(${(position.cellY / canvasHeight) * 100}% + ${(gridMetrics.maxHeight / canvasHeight) * 100}% - 2px)`,
               transform: 'translate(-100%, -100%)',
             }"
           >
@@ -212,6 +213,13 @@
   const fileInput = ref<HTMLInputElement | null>(null);
   const customColor = ref('#ffffff');
 
+  // Grid metrics used to position offset labels relative to cell size
+  const gridMetrics = computed(() => calculateMaxDimensions());
+
+  // Reactive canvas dimensions to ensure label positions update when canvas size changes
+  const canvasWidth = ref(0);
+  const canvasHeight = ref(0);
+
   const startDrag = (event: MouseEvent) => {
     if (!canvasRef.value) return;
 
@@ -311,7 +319,12 @@
     // Set canvas size
     const maxLen = Math.max(1, ...props.layers.map(l => (l.visible ? l.sprites.length : 1)));
     const rows = Math.max(1, Math.ceil(maxLen / props.columns));
-    canvas2D.setCanvasSize(maxWidth * props.columns, maxHeight * rows);
+    const newCanvasWidth = maxWidth * props.columns;
+    const newCanvasHeight = maxHeight * rows;
+    canvas2D.setCanvasSize(newCanvasWidth, newCanvasHeight);
+    // Update reactive dimensions for template-driven elements (like labels)
+    if (canvasWidth.value !== newCanvasWidth) canvasWidth.value = newCanvasWidth;
+    if (canvasHeight.value !== newCanvasHeight) canvasHeight.value = newCanvasHeight;
 
     // Clear canvas
     canvas2D.clear();