Finish clean, add negative spacing toggle

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) {