From dc3e535955df1ea93fd61f1b02b7b34a6565bce7 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Thu, 1 Jan 2026 17:53:53 +0100
Subject: [PATCH] [FEAT] Enhanced pixel position

---
 src/components/SpritePreview.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 240244d..67e52da 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -76,7 +76,6 @@
               backgroundImage: previewBackgroundImage,
               backgroundSize: previewBackgroundSize,
               backgroundPosition: previewBackgroundPosition,
-              border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
             }"
             @dragover.prevent="onDragOver"
             @dragleave="onDragLeave"
@@ -92,8 +91,8 @@
                       :src="layer.sprites[i - 1].url"
                       class="absolute pointer-events-none"
                       :style="{
-                        left: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[i - 1].x)}px`,
-                        top: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[i - 1].y)}px`,
+                        left: `${Math.round(getCellPosition(0).x + gridMetrics.negativeSpacing + layer.sprites[i - 1].x)}px`,
+                        top: `${Math.round(getCellPosition(0).y + gridMetrics.negativeSpacing + layer.sprites[i - 1].y)}px`,
                         width: `${Math.round(layer.sprites[i - 1].width)}px`,
                         height: `${Math.round(layer.sprites[i - 1].height)}px`,
                         opacity: '0.3',
@@ -115,8 +114,8 @@
                 class="absolute"
                 :class="{ 'cursor-move': isDraggable }"
                 :style="{
-                  left: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].x)}px`,
-                  top: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y)}px`,
+                  left: `${Math.round(getCellPosition(0).x + gridMetrics.negativeSpacing + layer.sprites[currentFrameIndex].x)}px`,
+                  top: `${Math.round(getCellPosition(0).y + gridMetrics.negativeSpacing + layer.sprites[currentFrameIndex].y)}px`,
                   width: `${Math.round(layer.sprites[currentFrameIndex].width)}px`,
                   height: `${Math.round(layer.sprites[currentFrameIndex].height)}px`,
                   imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
@@ -427,7 +426,7 @@
   });
 
   // Use the new useGridMetrics composable for consistent calculations
-  const { gridMetrics } = useGridMetrics({
+  const { gridMetrics, getCellPosition: getCellPositionHelper } = useGridMetrics({
     layers: toRef(props, 'layers'),
     negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
     manualCellSizeEnabled: toRef(settingsStore, 'manualCellSizeEnabled'),
@@ -435,6 +434,11 @@
     manualCellHeight: toRef(settingsStore, 'manualCellHeight'),
   });
 
+  // Helper function to get cell position (same as SpriteCanvas)
+  const getCellPosition = (index: number) => {
+    return getCellPositionHelper(index, props.columns, gridMetrics.value);
+  };
+
   // Computed cell dimensions (for backward compatibility with existing code)
   const cellDimensions = computed(() => ({
     cellWidth: gridMetrics.value.maxWidth,