[FEAT] Updated packages, show sprite offset values in cells and preview, fixed modal position

src/components/SpriteCanvas.vue

@@ -35,7 +35,7 @@
         </button>
       </div>
 
-      <div class="canvas-container touch-manipulation" :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }">
+      <div class="canvas-container touch-manipulation relative" :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }">
         <canvas
           ref="canvasRef"
           @mousedown="startDrag"
@@ -49,6 +49,22 @@
           class="w-full"
           :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"
         ></canvas>
+
+        <!-- Offset labels in corners -->
+        <div v-if="canvasRef" class="absolute inset-0 pointer-events-none">
+          <div
+            v-for="position in spritePositions"
+            :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)`,
+              transform: 'translate(-100%, -100%)',
+            }"
+          >
+            <span>{{ position.x }},{{ position.y }}</span>
+          </div>
+        </div>
       </div>
     </div>