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 @@
+
@@ -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
};
}