All works now

src/components/PreviewModal.vue

@@ -204,9 +204,8 @@
   const resizeStart = ref({ x: 0, y: 0 });
 
   const currentFrameDisplay = computed(() => {
-    const totalFrames = Math.max(1, sprites.value.length);
+    if (sprites.value.length === 0) return '0 / 0';
-    const frame = Math.min(currentFrame.value + 1, totalFrames);
+    return `${currentFrame.value + 1} / ${sprites.value.length}`;
-    return `${frame} / ${totalFrames}`;
   });
 
   // Computed property to check if sprite has been moved from original position
@@ -369,21 +368,22 @@
   };
 
   const handleFrameChange = () => {
-    // Stop any running animation
     if (animation.value.isPlaying) {
       stopAnimation();
     }
+    // Ensure frame is within bounds
+    currentFrame.value = Math.max(0, Math.min(currentFrame.value, sprites.value.length - 1));
     updateFrame();
   };
 
   const updateFrame = () => {
+    // Ensure frame is within bounds
+    currentFrame.value = Math.max(0, Math.min(currentFrame.value, sprites.value.length - 1));
     animation.value.currentFrame = currentFrame.value;
     animation.value.manualUpdate = true;
 
     // Get the frame-specific offset
     const frameOffset = store.getSpriteOffset(currentFrame.value);
-
-    // Render with the frame-specific offset
     store.renderAnimationFrame(currentFrame.value, showAllSprites.value, frameOffset);
   };
 
@@ -573,20 +573,31 @@
     const deltaX = e.clientX - canvasDragStart.value.x;
     const deltaY = e.clientY - canvasDragStart.value.y;
 
-    // Update sprite offset with the delta, scaled by zoom level
-    // Use requestAnimationFrame for smoother dragging
     requestAnimationFrame(() => {
       // Get the frame-specific offset
       const frameOffset = store.getSpriteOffset(currentFrame.value);
 
-      // Update both the current offset and the frame-specific offset
+      // Calculate new position
       const newX = frameOffset.x + deltaX / previewZoom.value;
       const newY = frameOffset.y + deltaY / previewZoom.value;
 
-      frameOffset.x = newX;
+      // Get current sprite
-      frameOffset.y = newY;
+      const currentSprite = sprites.value[currentFrame.value];
-      store.currentSpriteOffset.x = newX;
+      if (!currentSprite) return;
-      store.currentSpriteOffset.y = newY;
+
+      // Calculate maximum allowed offset based on sprite and cell size
+      const maxOffsetX = (store.cellSize.width - currentSprite.width) / 2;
+      const maxOffsetY = (store.cellSize.height - currentSprite.height) / 2;
+
+      // Constrain movement to stay within cell boundaries, preventing negative offsets
+      const constrainedX = Math.max(0, Math.min(maxOffsetX, newX));
+      const constrainedY = Math.max(0, Math.min(maxOffsetY, newY));
+
+      // Update both the current offset and the frame-specific offset
+      frameOffset.x = constrainedX;
+      frameOffset.y = constrainedY;
+      store.currentSpriteOffset.x = constrainedX;
+      store.currentSpriteOffset.y = constrainedY;
 
       // Reset drag start position
       canvasDragStart.value = {

src/composables/useSpritesheetStore.ts

@@ -530,23 +530,6 @@ export function useSpritesheetStore() {
     const offsetX = originalOffsetX + spriteOffset.x;
     const offsetY = originalOffsetY + spriteOffset.y;
 
-    // If the sprite has been moved from its original position, draw a faint outline at the original position
-    if (spriteOffset.x !== 0 || spriteOffset.y !== 0) {
-      // Save context state
-      animation.ctx.save();
-
-      // Draw a faint outline or indicator at the original position
-      animation.ctx.globalAlpha = 0.2;
-      animation.ctx.strokeStyle = '#00FFFF'; // Cyan color for the original position indicator
-      animation.ctx.lineWidth = 1;
-
-      // Draw a rectangle representing the sprite's original position
-      animation.ctx.strokeRect(originalOffsetX, originalOffsetY, currentSprite.width, currentSprite.height);
-
-      // Restore context state
-      animation.ctx.restore();
-    }
-
     // Draw the current sprite at full opacity at the new position
     animation.ctx.drawImage(currentSprite.img, offsetX, offsetY);
 
@@ -680,6 +663,6 @@ export function useSpritesheetStore() {
     zoomIn,
     zoomOut,
     resetZoom,
-    applyOffsetsToMainView
+    applyOffsetsToMainView,
   };
 }