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

public/CHANGELOG.md

@@ -1,5 +1,9 @@
 All notable changes to this project will be documented in this file.
 
+## [1.5.0] - 2025-11-17
+- Show offset values in sprite cells and in preview modal
+- Modal stays on correct position
+
 ## [1.4.0] - 2025-09-15
 - Added context menu to sprite overview for easier adding, replacing and removing sprites.
 

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>
 

src/components/SpritePreview.vue

@@ -97,6 +97,14 @@
           </div>
         </div>
       </div>
+
+      <!-- Current frame offset display -->
+      <div v-if="props.sprites[currentFrameIndex]" class="mt-3 p-2 bg-gray-100 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600">
+        <div class="flex items-center justify-between">
+          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Current Frame Offset:</span>
+          <span class="text-sm font-mono font-semibold text-cyan-600 dark:text-cyan-400">x: {{ props.sprites[currentFrameIndex].x }}, y: {{ props.sprites[currentFrameIndex].y }}</span>
+        </div>
+      </div>
     </div>
 
     <div class="mt-3 relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg mb-4 sm:mb-6 overflow-auto min-h-[300px] sm:min-h-[520px] shadow-sm hover:shadow-md transition-shadow duration-200">

src/components/utilities/Modal.vue

@@ -4,7 +4,7 @@
       v-if="isOpen"
       ref="modalRef"
       :style="{
-        position: isFullScreen ? 'fixed' : 'absolute',
+        position: 'fixed',
         left: isFullScreen ? '0' : `${position.x}px`,
         top: isFullScreen ? '0' : `${position.y}px`,
         width: isFullScreen ? '100%' : `${size.width}px`,