Finish clean, add negative spacing toggle

src/components/SpriteCanvas.vue

@@ -18,6 +18,11 @@
           <input id="show-all-sprites" type="checkbox" v-model="showAllSprites" class="mr-2" />
           <label for="show-all-sprites" class="dark:text-gray-200">Compare sprites</label>
         </div>
+        <!-- Negative spacing control -->
+        <div class="flex items-center">
+          <input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="mr-2 w-4 h-4" />
+          <label for="negative-spacing" class="dark:text-gray-200 text-sm sm:text-base">Negative spacing</label>
+        </div>
       </div>
     </div>
 
@@ -157,6 +162,7 @@
     columns: toRef(props, 'columns'),
     zoom,
     allowCellSwap,
+    negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
     getMousePosition: (event, z) => canvas2D.getMousePosition(event, z),
     onUpdateSprite: (id, x, y) => emit('updateSprite', id, x, y),
     onUpdateSpriteCell: (id, newIndex) => emit('updateSpriteCell', id, newIndex),
@@ -271,7 +277,7 @@
   function drawCanvas() {
     if (!canvasRef.value || !canvas2D.ctx.value) return;
 
-    const { maxWidth, maxHeight } = calculateMaxDimensions();
+    const { maxWidth, maxHeight, negativeSpacing } = calculateMaxDimensions();
 
     // Set canvas size
     const rows = Math.max(1, Math.ceil(props.sprites.length / props.columns));
@@ -308,9 +314,10 @@
         const cellY = Math.floor(cellRow * maxHeight);
 
         // Draw all sprites with transparency in this cell
+        // Position at bottom-right with negative spacing offset
         props.sprites.forEach((sprite, spriteIndex) => {
           if (spriteIndex !== cellIndex) {
-            canvas2D.drawImage(sprite.img, cellX + sprite.x, cellY + sprite.y, 0.3);
+            canvas2D.drawImage(sprite.img, cellX + negativeSpacing + sprite.x, cellY + negativeSpacing + sprite.y, 0.3);
           }
         });
       }
@@ -329,8 +336,8 @@
       const cellX = Math.floor(col * maxWidth);
       const cellY = Math.floor(row * maxHeight);
 
-      // Draw sprite
-      canvas2D.drawImage(sprite.img, cellX + sprite.x, cellY + sprite.y);
+      // Draw sprite with negative spacing offset (bottom-right positioning)
+      canvas2D.drawImage(sprite.img, cellX + negativeSpacing + sprite.x, cellY + negativeSpacing + sprite.y);
     });
 
     // Draw ghost sprite if we're dragging between cells
@@ -395,6 +402,7 @@
   watch(() => props.columns, drawCanvas);
   watch(() => settingsStore.pixelPerfect, drawCanvas);
   watch(() => settingsStore.darkMode, drawCanvas);
+  watch(() => settingsStore.negativeSpacingEnabled, drawCanvas);
   watch(showAllSprites, drawCanvas);
 </script>
 

src/components/SpritePreview.vue

@@ -209,6 +209,18 @@
 
   // Canvas drawing
 
+  // Calculate negative spacing based on sprite dimensions
+  function calculateNegativeSpacing(): number {
+    if (!settingsStore.negativeSpacingEnabled || props.sprites.length === 0) return 0;
+
+    const { maxWidth, maxHeight } = getMaxDimensions(props.sprites);
+    const minWidth = Math.min(...props.sprites.map(s => s.width));
+    const minHeight = Math.min(...props.sprites.map(s => s.height));
+    const widthDiff = maxWidth - minWidth;
+    const heightDiff = maxHeight - minHeight;
+    return Math.max(widthDiff, heightDiff);
+  }
+
   function drawPreviewCanvas() {
     if (!previewCanvasRef.value || !canvas2D.ctx.value || props.sprites.length === 0) return;
 
@@ -216,33 +228,36 @@
     if (!currentSprite) return;
 
     const { maxWidth, maxHeight } = getMaxDimensions(props.sprites);
+    const negativeSpacing = calculateNegativeSpacing();
+    const cellWidth = maxWidth + negativeSpacing;
+    const cellHeight = maxHeight + negativeSpacing;
 
     // Apply pixel art optimization
     canvas2D.applySmoothing();
 
-    // Set canvas size to just fit one sprite cell
-    canvas2D.setCanvasSize(maxWidth, maxHeight);
+    // Set canvas size to fit one sprite cell (expanded with negative spacing)
+    canvas2D.setCanvasSize(cellWidth, cellHeight);
 
     // Clear canvas
     canvas2D.clear();
 
     // Draw grid background (cell)
-    canvas2D.fillRect(0, 0, maxWidth, maxHeight, '#f9fafb');
+    canvas2D.fillRect(0, 0, cellWidth, cellHeight, '#f9fafb');
 
     // Draw all sprites with transparency if enabled
     if (showAllSprites.value && props.sprites.length > 1) {
       props.sprites.forEach((sprite, index) => {
         if (index !== currentFrameIndex.value && !hiddenFrames.value.includes(index)) {
-          canvas2D.drawImage(sprite.img, sprite.x, sprite.y, 0.3);
+          canvas2D.drawImage(sprite.img, negativeSpacing + sprite.x, negativeSpacing + sprite.y, 0.3);
         }
       });
     }
 
-    // Draw current sprite
-    canvas2D.drawImage(currentSprite.img, currentSprite.x, currentSprite.y);
+    // Draw current sprite with negative spacing offset
+    canvas2D.drawImage(currentSprite.img, negativeSpacing + currentSprite.x, negativeSpacing + currentSprite.y);
 
     // Draw cell border
-    canvas2D.strokeRect(0, 0, maxWidth, maxHeight, '#e5e7eb', 1);
+    canvas2D.strokeRect(0, 0, cellWidth, cellHeight, '#e5e7eb', 1);
   }
 
   // Drag functionality
@@ -257,9 +272,12 @@
     const mouseY = ((event.clientY - rect.top) / zoom.value) * scaleY;
 
     const sprite = props.sprites[currentFrameIndex.value];
+    const negativeSpacing = calculateNegativeSpacing();
 
-    // Check if click is on sprite
-    if (sprite && mouseX >= sprite.x && mouseX <= sprite.x + sprite.width && mouseY >= sprite.y && mouseY <= sprite.y + sprite.height) {
+    // Check if click is on sprite (accounting for negative spacing offset)
+    const spriteCanvasX = negativeSpacing + sprite.x;
+    const spriteCanvasY = negativeSpacing + sprite.y;
+    if (sprite && mouseX >= spriteCanvasX && mouseX <= spriteCanvasX + sprite.width && mouseY >= spriteCanvasY && mouseY <= spriteCanvasY + sprite.height) {
       isDragging.value = true;
       activeSpriteId.value = sprite.id;
       dragStartX.value = mouseX;
@@ -285,14 +303,17 @@
     if (!sprite || sprite.id !== activeSpriteId.value) return;
 
     const { maxWidth, maxHeight } = getMaxDimensions(props.sprites);
+    const negativeSpacing = calculateNegativeSpacing();
+    const cellWidth = maxWidth + negativeSpacing;
+    const cellHeight = maxHeight + negativeSpacing;
 
     // Calculate new position with constraints and round to integers
     let newX = Math.round(spritePosBeforeDrag.value.x + deltaX);
     let newY = Math.round(spritePosBeforeDrag.value.y + deltaY);
 
-    // Constrain movement within cell
-    newX = Math.max(0, Math.min(maxWidth - sprite.width, newX));
-    newY = Math.max(0, Math.min(maxHeight - sprite.height, newY));
+    // Constrain movement within expanded cell (allow negative values up to -negativeSpacing)
+    newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
+    newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
 
     emit('updateSprite', activeSpriteId.value, newX, newY);
     drawPreviewCanvas();
@@ -362,6 +383,7 @@
   watch(showAllSprites, drawPreviewCanvas);
   watch(hiddenFrames, drawPreviewCanvas);
   watch(() => settingsStore.pixelPerfect, drawPreviewCanvas);
+  watch(() => settingsStore.negativeSpacingEnabled, drawPreviewCanvas);
 
   // Initial draw
   if (props.sprites.length > 0) {