From 354d96274af8ce9e718e4f682d41a42f293a92f7 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 4 Apr 2025 02:42:36 +0200
Subject: [PATCH] a

---
 src/components/PreviewModal.vue        | 17 ++++++++++
 src/composables/useSpritesheetStore.ts | 43 ++++++++++++++++++++++++--
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/components/PreviewModal.vue b/src/components/PreviewModal.vue
index ccaa729..36cd31c 100644
--- a/src/components/PreviewModal.vue
+++ b/src/components/PreviewModal.vue
@@ -75,6 +75,15 @@
             <button @click="zoomIn" :disabled="previewZoom >= 5" class="flex items-center justify-center w-8 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
               <i class="fas fa-search-plus"></i>
             </button>
+            <button
+              @click="applyOffsetsToMainView"
+              :disabled="!hasSpriteOffset"
+              class="flex items-center gap-1 px-2 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded text-xs transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500"
+              title="Permanently apply offset to sprite position"
+            >
+              <i class="fas fa-save"></i>
+              Apply Offset
+            </button>
             <button @click="resetZoom" :disabled="previewZoom === 1" class="flex items-center justify-center px-2 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded text-xs transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">Reset Zoom</button>
           </div>
 
@@ -205,6 +214,11 @@
     return spriteOffset.x !== 0 || spriteOffset.y !== 0;
   });
 
+  const applyOffsetsToMainView = () => {
+    store.applyOffsetsToMainView();
+    store.showNotification('Offset permanently applied to sprite position');
+  };
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (!isModalOpen.value) return;
 
@@ -582,6 +596,9 @@
 
       // Update the frame with the new offset
       updateFrame();
+
+      // Re-render the main view to reflect the changes
+      store.renderSpritesheetPreview();
     });
   };
 
diff --git a/src/composables/useSpritesheetStore.ts b/src/composables/useSpritesheetStore.ts
index 677a769..7ced67b 100644
--- a/src/composables/useSpritesheetStore.ts
+++ b/src/composables/useSpritesheetStore.ts
@@ -256,9 +256,16 @@ export function useSpritesheetStore() {
               const x = Math.round(sprite.x);
               const y = Math.round(sprite.y);
 
-              // Draw the image at its original size with pixel-perfect rendering
+              // Get the frame-specific offset for this sprite
+              const frameOffset = getSpriteOffset(index);
+
+              // Apply the frame-specific offset to the sprite position
+              const finalX = x + frameOffset.x;
+              const finalY = y + frameOffset.y;
+
+              // Draw the image at its final position with pixel-perfect rendering
               ctx.value!.imageSmoothingEnabled = false; // Keep pixel art sharp
-              ctx.value!.drawImage(sprite.img, x, y, sprite.width, sprite.height);
+              ctx.value!.drawImage(sprite.img, finalX, finalY, sprite.width, sprite.height);
             } else {
               console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`);
               sprite.img.onload = () => {
@@ -267,8 +274,15 @@ export function useSpritesheetStore() {
                   const x = Math.round(sprite.x);
                   const y = Math.round(sprite.y);
 
+                  // Get the frame-specific offset for this sprite
+                  const frameOffset = getSpriteOffset(index);
+
+                  // Apply the frame-specific offset to the sprite position
+                  const finalX = x + frameOffset.x;
+                  const finalY = y + frameOffset.y;
+
                   ctx.value.imageSmoothingEnabled = false; // Keep pixel art sharp
-                  ctx.value.drawImage(sprite.img, x, y, sprite.width, sprite.height);
+                  ctx.value.drawImage(sprite.img, finalX, finalY, sprite.width, sprite.height);
                 }
               };
             }
@@ -306,6 +320,28 @@ export function useSpritesheetStore() {
     }
   }
 
+  function applyOffsetsToMainView() {
+    sprites.value.forEach((sprite, index) => {
+      const frameOffset = getSpriteOffset(index);
+      if (frameOffset.x !== 0 || frameOffset.y !== 0) {
+        // Update the sprite's position to include the offset
+        sprite.x += frameOffset.x;
+        sprite.y += frameOffset.y;
+
+        // Reset the offset
+        frameOffset.x = 0;
+        frameOffset.y = 0;
+      }
+    });
+
+    // Reset current offset
+    currentSpriteOffset.x = 0;
+    currentSpriteOffset.y = 0;
+
+    // Re-render the main view
+    renderSpritesheetPreview();
+  }
+
   function drawGrid() {
     if (!ctx.value || !canvas.value) return;
 
@@ -644,5 +680,6 @@ export function useSpritesheetStore() {
     zoomIn,
     zoomOut,
     resetZoom,
+    applyOffsetsToMainView
   };
 }