noxious/spritesheet-generator
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Label fixes, show sprite fix

Browse Source
This commit is contained in:
Dennis Postma 2025-04-03 04:10:12 +02:00
parent 183ea2b9eb
commit 9c0f10b977
6 changed files with 88 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -71,6 +71,6 @@
); );
const showHelpModal = () => { 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');
}; };
</script> </script>

6
src/components/AppHeader.vue
View File

@ -2,8 +2,8 @@
<header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-40"> <header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-40">
<!-- Breadcrumb navigation --> <!-- Breadcrumb navigation -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- <span class="text-gray-400">Dashboard</span>--> <!-- <span class="text-gray-400">Dashboard</span>-->
<!-- <i class="fas fa-chevron-right text-xs text-gray-500"></i>--> <!-- <i class="fas fa-chevron-right text-xs text-gray-500"></i>-->
<span class="text-gray-200">Spritesheet editor</span> <span class="text-gray-200">Spritesheet editor</span>
</div> </div>
@ -23,7 +23,7 @@
</button> </button>
<!-- Help button --> <!-- Help button -->
<button @click="emit('toggleHelp')" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Keyboard Shortcuts"> <button @click="emit('toggleHelp')" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Keyboard shortcuts">
<i class="fas fa-keyboard"></i> <i class="fas fa-keyboard"></i>
</button> </button>
</div> </div>

42
src/components/SettingsModal.vue
View File

@ -22,33 +22,46 @@
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-tools text-blue-500"></i> Tools</h3> <h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-tools text-blue-500"></i> Tools</h3>
<div class="flex flex-wrap gap-3 mb-6"> <div class="flex flex-wrap gap-3 mb-6">
<button @click="autoArrangeSprites" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500"> <button @click="autoArrangeSprites" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
<i class="fas fa-th"></i> Auto Arrange <i class="fas fa-th"></i> Auto arrange
</button> </button>
<button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600"> <button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600">
<i class="fas fa-play"></i> Preview Animation <i class="fas fa-play"></i> Preview animation
</button> </button>
<button @click="downloadSpritesheet" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500"> <button @click="downloadSpritesheet" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
<i class="fas fa-download"></i> Download <i class="fas fa-download"></i> Download
</button> </button>
<button @click="confirmClearAll" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-red-600 border border-red-600 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-red-700 hover:border-red-700"> <button @click="confirmClearAll" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-red-600 border border-red-600 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-red-700 hover:border-red-700">
<i class="fas fa-trash-alt"></i> Clear All <i class="fas fa-trash-alt"></i> Clear all
</button> </button>
</div> </div>
</div> </div>
<!-- Layout Controls Section -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-th text-blue-500"></i> Layout controls</h3>
<div class="mb-4">
<label class="block text-sm text-gray-400 mb-2">Column Count</label>
<div class="flex items-center gap-3">
<input type="range" min="1" max="10" v-model.number="columnCount" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
<span class="text-gray-200 font-medium w-8 text-center">{{ columnCount }}</span>
</div>
</div>
<button @click="applyColumnCount" class="flex items-center gap-2 bg-blue-500 text-white border border-blue-500 rounded px-4 py-2 text-sm transition-colors hover:bg-blue-600 hover:border-blue-600"><i class="fas fa-check"></i> Apply layout</button>
</div>
<!-- Zoom Controls Section --> <!-- Zoom Controls Section -->
<div class="mb-8"> <div class="mb-8">
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-search text-blue-500"></i> Zoom Controls</h3> <h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-search text-blue-500"></i> Zoom controls</h3>
<div class="flex flex-wrap gap-3 mb-6"> <div class="flex flex-wrap gap-3 mb-6">
<button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-plus"></i> Zoom In</button> <button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-plus"></i> Zoom in</button>
<button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-minus"></i> Zoom Out</button> <button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-minus"></i> Zoom out</button>
<button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-undo"></i> Reset Zoom</button> <button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-undo"></i> Reset zoom</button>
</div> </div>
</div> </div>
<!-- Keyboard Shortcuts Section --> <!-- Keyboard Shortcuts Section -->
<div> <div>
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-keyboard text-blue-500"></i> Keyboard Shortcuts</h3> <h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-keyboard text-blue-500"></i> Keyboard shortcuts</h3>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div class="flex items-center gap-2 text-sm text-gray-400"> <div class="flex items-center gap-2 text-sm text-gray-400">
<kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Shift</kbd> <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Shift</kbd>
@ -74,13 +87,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { useSpritesheetStore } from '../composables/useSpritesheetStore'; import { useSpritesheetStore } from '../composables/useSpritesheetStore';
const store = useSpritesheetStore(); const store = useSpritesheetStore();
const sprites = computed(() => store.sprites.value); const sprites = computed(() => store.sprites.value);
const isModalOpen = computed(() => store.isSettingsModalOpen.value); const isModalOpen = computed(() => store.isSettingsModalOpen.value);
// Column count control
const columnCount = ref(store.columns.value);
const closeModal = () => { const closeModal = () => {
store.isSettingsModalOpen.value = false; store.isSettingsModalOpen.value = false;
}; };
@ -105,4 +121,12 @@
// Expose store methods directly // Expose store methods directly
const { autoArrangeSprites, downloadSpritesheet, zoomIn, zoomOut, resetZoom } = store; const { autoArrangeSprites, downloadSpritesheet, zoomIn, zoomOut, resetZoom } = store;
// Apply column count changes
const applyColumnCount = () => {
store.columns.value = columnCount.value;
store.updateCanvasSize();
store.autoArrangeSprites();
store.showNotification(`Column count updated to ${columnCount.value}`);
};
</script> </script>

8
src/components/Sidebar.vue
View File

@ -5,7 +5,7 @@
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600"> <div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
<div class="flex items-center gap-2 text-lg font-semibold"> <div class="flex items-center gap-2 text-lg font-semibold">
<i class="fas fa-upload text-blue-500"></i> <i class="fas fa-upload text-blue-500"></i>
<span>Upload Sprites</span> <span>Upload sprites</span>
</div> </div>
</div> </div>
<div class="p-6"> <div class="p-6">
@ -24,16 +24,16 @@
<div class="p-6"> <div class="p-6">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<button @click="openSpritesModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"> <button @click="openSpritesModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
<i class="fas fa-images"></i> Manage Sprites <i class="fas fa-images"></i> Manage sprites
<span v-if="sprites.length > 0" class="ml-auto bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"> <span v-if="sprites.length > 0" class="ml-auto bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
{{ sprites.length }} {{ sprites.length }}
</span> </span>
</button> </button>
<button @click="openSettingsModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-cog"></i> Settings & Tools</button> <button @click="openSettingsModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-cog"></i> Settings & tools</button>
<button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600"> <button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600">
<i class="fas fa-play"></i> Preview Animation <i class="fas fa-play"></i> Preview animation
</button> </button>
</div> </div>
</div> </div>

6
src/components/SpritesModal.vue
View File

@ -21,7 +21,7 @@
<div v-if="sprites.length === 0" class="text-center text-gray-400 py-8"> <div v-if="sprites.length === 0" class="text-center text-gray-400 py-8">
<i class="fas fa-image text-4xl mb-4 opacity-30"></i> <i class="fas fa-image text-4xl mb-4 opacity-30"></i>
<p>No sprites uploaded yet</p> <p>No sprites uploaded yet</p>
<button @click="showUploadSection" class="mt-4 flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors mx-auto hover:bg-blue-600 hover:border-blue-600"><i class="fas fa-upload"></i> Upload Sprites</button> <button @click="showUploadSection" class="mt-4 flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors mx-auto hover:bg-blue-600 hover:border-blue-600"><i class="fas fa-upload"></i> Upload sprites</button>
</div> </div>
<div v-else> <div v-else>
@ -38,8 +38,8 @@
</div> </div>
<div class="flex justify-end gap-3 mt-6"> <div class="flex justify-end gap-3 mt-6">
<button @click="showUploadSection" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-upload"></i> Upload More</button> <button @click="showUploadSection" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-upload"></i> Upload more</button>
<button @click="confirmClearAll" class="flex items-center gap-2 bg-red-600 border border-red-600 text-white rounded px-4 py-2 text-sm transition-colors hover:bg-red-700 hover:border-red-700"><i class="fas fa-trash-alt"></i> Clear All</button> <button @click="confirmClearAll" class="flex items-center gap-2 bg-red-600 border border-red-600 text-white rounded px-4 py-2 text-sm transition-colors hover:bg-red-700 hover:border-red-700"><i class="fas fa-trash-alt"></i> Clear all</button>
</div> </div>
</div> </div>
</div> </div>

61
src/composables/useSpritesheetStore.ts
View File

@ -124,6 +124,7 @@ export function useSpritesheetStore() {
function updateCanvasSize() { function updateCanvasSize() {
if (!canvas.value) { if (!canvas.value) {
console.warn('Store: Canvas not available for size update');
return; return;
} }
@ -136,6 +137,8 @@ export function useSpritesheetStore() {
const cols = columns.value; const cols = columns.value;
const rows = Math.ceil(totalSprites / cols); 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) { if (cellSize.width <= 0 || cellSize.height <= 0) {
console.error('Store: Invalid cell size for canvas update', cellSize); console.error('Store: Invalid cell size for canvas update', cellSize);
return; return;
@ -144,15 +147,19 @@ export function useSpritesheetStore() {
const newWidth = cols * cellSize.width; const newWidth = cols * cellSize.width;
const newHeight = rows * cellSize.height; const newHeight = rows * cellSize.height;
canvas.value.width = newWidth; // Ensure the canvas is large enough to display all sprites
canvas.value.height = newHeight; 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 // Emit an event to update the wrapper dimensions
window.dispatchEvent( window.dispatchEvent(
new CustomEvent('canvas-size-updated', { new CustomEvent('canvas-size-updated', {
detail: { width: newWidth, height: newHeight }, detail: { width: newWidth, height: newHeight },
}) })
); );
}
} catch (error) { } catch (error) {
console.error('Store: Error updating canvas size:', error); console.error('Store: Error updating canvas size:', error);
} }
@ -169,16 +176,26 @@ export function useSpritesheetStore() {
return; 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) => { sprites.value.forEach((sprite, index) => {
const column = index % columns.value; const column = index % columns.value;
const row = Math.floor(index / columns.value); const row = Math.floor(index / columns.value);
sprite.x = column * cellSize.width; sprite.x = column * cellSize.width;
sprite.y = row * cellSize.height; 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 // Check if the canvas is ready before attempting to render
if (!ctx.value || !canvas.value) { if (!ctx.value || !canvas.value) {
console.warn('Store: Canvas or context not available for rendering after auto-arrange');
return; return;
} }
@ -206,6 +223,11 @@ export function useSpritesheetStore() {
if (sprites.value.length === 0) return; if (sprites.value.length === 0) return;
try { 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 // Clear the canvas
ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height); ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
@ -221,16 +243,21 @@ export function useSpritesheetStore() {
return; return;
} }
if (sprite.img.complete && sprite.img.naturalWidth !== 0) { // Check if sprite is within canvas bounds
// Draw the image at its original size if (sprite.x >= 0 && sprite.y >= 0 && sprite.x + sprite.width <= canvas.value!.width && sprite.y + sprite.height <= canvas.value!.height) {
ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.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 { } else {
console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`); console.warn(`Store: Sprite at index ${index} is outside canvas bounds: sprite(${sprite.x},${sprite.y}) canvas(${canvas.value!.width},${canvas.value!.height})`);
sprite.img.onload = () => {
if (ctx.value && canvas.value) {
ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
}
};
} }
} catch (spriteError) { } catch (spriteError) {
console.error(`Store: Error rendering sprite at index ${index}:`, spriteError); console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);