From 9c0f10b977af8249d576514d00ca9b9fab631613 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Thu, 3 Apr 2025 04:10:12 +0200 Subject: [PATCH] Label fixes, show sprite fix --- src/App.vue | 2 +- src/components/AppHeader.vue | 6 +-- src/components/SettingsModal.vue | 42 ++++++++++++++---- src/components/Sidebar.vue | 8 ++-- src/components/SpritesModal.vue | 6 +-- src/composables/useSpritesheetStore.ts | 61 +++++++++++++++++++------- 6 files changed, 88 insertions(+), 37 deletions(-) diff --git a/src/App.vue b/src/App.vue index fcb8888..66be64e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -71,6 +71,6 @@ ); const showHelpModal = () => { - alert('Keyboard Shortcuts:\n\n' + 'Shift + Drag: Fine-tune sprite position\n' + 'Space: Play/Pause animation\n' + 'Esc: Close preview modal\n' + 'Arrow Keys: Navigate frames when paused'); + alert('Keyboard shortcuts:\n\n' + 'Shift + Drag: Fine-tune sprite position\n' + 'Space: Play/Pause animation\n' + 'Esc: Close preview modal\n' + 'Arrow Keys: Navigate frames when paused'); }; diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 5b945ad..25f0d74 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -2,8 +2,8 @@
- - + + Spritesheet editor
@@ -23,7 +23,7 @@ - diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index a910855..aca5ffd 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -22,33 +22,46 @@

Tools

+ +
+

Layout controls

+
+ +
+ + {{ columnCount }} +
+
+ +
+
-

Zoom Controls

+

Zoom controls

- - - + + +
-

Keyboard Shortcuts

+

Keyboard shortcuts

Shift @@ -74,13 +87,16 @@ diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index faaaee7..6a4d786 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -5,7 +5,7 @@
- Upload Sprites + Upload sprites
@@ -24,16 +24,16 @@
- +
diff --git a/src/components/SpritesModal.vue b/src/components/SpritesModal.vue index 1a0e016..d8fa905 100644 --- a/src/components/SpritesModal.vue +++ b/src/components/SpritesModal.vue @@ -21,7 +21,7 @@

No sprites uploaded yet

- +
@@ -38,8 +38,8 @@
- - + +
diff --git a/src/composables/useSpritesheetStore.ts b/src/composables/useSpritesheetStore.ts index 011550e..6f193a0 100644 --- a/src/composables/useSpritesheetStore.ts +++ b/src/composables/useSpritesheetStore.ts @@ -124,6 +124,7 @@ export function useSpritesheetStore() { function updateCanvasSize() { if (!canvas.value) { + console.warn('Store: Canvas not available for size update'); return; } @@ -136,6 +137,8 @@ export function useSpritesheetStore() { const cols = columns.value; const rows = Math.ceil(totalSprites / cols); + console.log(`Store: Updating canvas size for ${totalSprites} sprites, ${cols} columns, ${rows} rows`); + if (cellSize.width <= 0 || cellSize.height <= 0) { console.error('Store: Invalid cell size for canvas update', cellSize); return; @@ -144,15 +147,19 @@ export function useSpritesheetStore() { const newWidth = cols * cellSize.width; const newHeight = rows * cellSize.height; - canvas.value.width = newWidth; - canvas.value.height = newHeight; + // Ensure the canvas is large enough to display all sprites + if (canvas.value.width !== newWidth || canvas.value.height !== newHeight) { + console.log(`Store: Resizing canvas from ${canvas.value.width}x${canvas.value.height} to ${newWidth}x${newHeight}`); + canvas.value.width = newWidth; + canvas.value.height = newHeight; - // Emit an event to update the wrapper dimensions - window.dispatchEvent( - new CustomEvent('canvas-size-updated', { - detail: { width: newWidth, height: newHeight }, - }) - ); + // Emit an event to update the wrapper dimensions + window.dispatchEvent( + new CustomEvent('canvas-size-updated', { + detail: { width: newWidth, height: newHeight }, + }) + ); + } } catch (error) { console.error('Store: Error updating canvas size:', error); } @@ -169,16 +176,26 @@ export function useSpritesheetStore() { return; } + console.log(`Store: Auto-arranging ${sprites.value.length} sprites with ${columns.value} columns`); + + // First update the canvas size to ensure it's large enough + updateCanvasSize(); + + // Then position each sprite in its grid cell sprites.value.forEach((sprite, index) => { const column = index % columns.value; const row = Math.floor(index / columns.value); sprite.x = column * cellSize.width; sprite.y = row * cellSize.height; + + // Log the position of each sprite for debugging + console.log(`Store: Sprite ${index} (${sprite.name}) positioned at (${sprite.x}, ${sprite.y})`); }); // Check if the canvas is ready before attempting to render if (!ctx.value || !canvas.value) { + console.warn('Store: Canvas or context not available for rendering after auto-arrange'); return; } @@ -206,6 +223,11 @@ export function useSpritesheetStore() { if (sprites.value.length === 0) return; try { + // Make sure the canvas size is correct before rendering + updateCanvasSize(); + + console.log(`Store: Rendering ${sprites.value.length} sprites on canvas ${canvas.value.width}x${canvas.value.height}`); + // Clear the canvas ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height); @@ -221,16 +243,21 @@ export function useSpritesheetStore() { return; } - if (sprite.img.complete && sprite.img.naturalWidth !== 0) { - // Draw the image at its original size - ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height); + // Check if sprite is within canvas bounds + if (sprite.x >= 0 && sprite.y >= 0 && sprite.x + sprite.width <= canvas.value!.width && sprite.y + sprite.height <= canvas.value!.height) { + if (sprite.img.complete && sprite.img.naturalWidth !== 0) { + // Draw the image at its original size + ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height); + } else { + console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`); + sprite.img.onload = () => { + if (ctx.value && canvas.value) { + ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height); + } + }; + } } else { - console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`); - sprite.img.onload = () => { - if (ctx.value && canvas.value) { - ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height); - } - }; + console.warn(`Store: Sprite at index ${index} is outside canvas bounds: sprite(${sprite.x},${sprite.y}) canvas(${canvas.value!.width},${canvas.value!.height})`); } } catch (spriteError) { console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);