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

use options api

Browse Source
This commit is contained in:
Dennis Postma 2025-04-03 02:46:50 +02:00
parent a989c8719f
commit 22781b1883
9 changed files with 421 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/AppHeader.vue
View File

@ -2,11 +2,11 @@
<header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-50"> <header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-50">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<i class="fas fa-gamepad text-blue-500 text-2xl"></i> <i class="fas fa-gamepad text-blue-500 text-2xl"></i>
<h1 class="text-xl font-semibold text-gray-200">Noxious Spritesheet Creator</h1> <h1 class="text-xl font-semibold text-gray-200">Spritesheet Creator</h1>
</div> </div>
<div class="flex gap-3"> <div class="flex gap-3">
<button <button
@click="$emit('toggleHelp')" @click="emit('toggleHelp')"
class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors"
title="Keyboard Shortcuts" title="Keyboard Shortcuts"
> >
@ -16,11 +16,8 @@
</header> </header>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; const emit = defineEmits<{
(e: 'toggleHelp'): void
export default defineComponent({ }>()
name: 'AppHeader',
emits: ['toggleHelp']
});
</script> </script>

61
src/components/DropZone.vue
View File

@ -22,48 +22,47 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { Sprite } from '../composables/useSpritesheetStore'; import { type Sprite, useSpritesheetStore } from '../composables/useSpritesheetStore';
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
export default defineComponent({ const emit = defineEmits<{
name: 'DropZone', 'files-uploaded': [sprites: Sprite[]]
emits: ['files-uploaded'], }>();
setup(props, { emit }) {
const store = useSpritesheetStore();
const fileInput = ref<HTMLInputElement | null>(null);
const isDragOver = ref(false);
const openFileDialog = () => { const store = useSpritesheetStore();
const fileInput = ref<HTMLInputElement | null>(null);
const isDragOver = ref(false);
const openFileDialog = () => {
if (fileInput.value) { if (fileInput.value) {
fileInput.value.click(); fileInput.value.click();
} }
}; };
const onDragOver = () => { const onDragOver = () => {
isDragOver.value = true; isDragOver.value = true;
}; };
const onDragLeave = () => { const onDragLeave = () => {
isDragOver.value = false; isDragOver.value = false;
}; };
const onDrop = (e: DragEvent) => { const onDrop = (e: DragEvent) => {
isDragOver.value = false; isDragOver.value = false;
if (e.dataTransfer?.files.length) { if (e.dataTransfer?.files.length) {
handleFiles(e.dataTransfer.files); handleFiles(e.dataTransfer.files);
} }
}; };
const onFileChange = (e: Event) => { const onFileChange = (e: Event) => {
const input = e.target as HTMLInputElement; const input = e.target as HTMLInputElement;
if (input.files?.length) { if (input.files?.length) {
handleFiles(input.files); handleFiles(input.files);
} }
}; };
const handleFiles = async (files: FileList) => { const handleFiles = async (files: FileList) => {
const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/')); const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
if (imageFiles.length === 0) { if (imageFiles.length === 0) {
@ -88,9 +87,9 @@ export default defineComponent({
emit('files-uploaded', newSprites); emit('files-uploaded', newSprites);
store.showNotification(`Added ${newSprites.length} sprites successfully`); store.showNotification(`Added ${newSprites.length} sprites successfully`);
} }
}; };
const createSpriteFromFile = (file: File, index: number): Promise<Sprite> => { const createSpriteFromFile = (file: File, index: number): Promise<Sprite> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
@ -117,17 +116,5 @@ export default defineComponent({
reader.onerror = reject; reader.onerror = reject;
reader.readAsDataURL(file); reader.readAsDataURL(file);
}); });
}; };
return {
fileInput,
isDragOver,
openFileDialog,
onDragOver,
onDragLeave,
onDrop,
onFileChange
};
}
});
</script> </script>

13
src/components/HelpButton.vue
View File

@ -1,17 +1,14 @@
<template> <template>
<button <button
@click="$emit('showHelp')" @click="emit('showHelp')"
class="fixed bottom-5 right-5 w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center text-xl shadow-lg cursor-pointer transition-all hover:bg-blue-600 hover:-translate-y-1 z-40" class="fixed bottom-5 right-5 w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center text-xl shadow-lg cursor-pointer transition-all hover:bg-blue-600 hover:-translate-y-1 z-40"
> >
<i class="fas fa-question"></i> <i class="fas fa-question"></i>
</button> </button>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; const emit = defineEmits<{
showHelp: []
export default defineComponent({ }>();
name: 'HelpButton',
emits: ['showHelp']
});
</script> </script>

144
src/components/MainContent.vue
View File

@ -26,59 +26,24 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, onMounted, computed, onBeforeUnmount } from 'vue'; import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useSpritesheetStore } from '../composables/useSpritesheetStore'; import { useSpritesheetStore } from '../composables/useSpritesheetStore';
export default defineComponent({ const store = useSpritesheetStore();
name: 'MainContent', const canvasEl = ref<HTMLCanvasElement | null>(null);
setup() {
const store = useSpritesheetStore();
const canvasEl = ref<HTMLCanvasElement | null>(null);
// Tooltip state // Tooltip state
const isTooltipVisible = ref(false); const isTooltipVisible = ref(false);
const tooltipText = ref(''); const tooltipText = ref('');
const tooltipPosition = ref({ x: 0, y: 0 }); const tooltipPosition = ref({ x: 0, y: 0 });
const tooltipStyle = computed(() => ({ const tooltipStyle = computed(() => ({
left: `${tooltipPosition.value.x + 15}px`, left: `${tooltipPosition.value.x + 15}px`,
top: `${tooltipPosition.value.y + 15}px` top: `${tooltipPosition.value.y + 15}px`
})); }));
onMounted(() => { const setupCheckerboardPattern = () => {
if (canvasEl.value) {
store.canvas.value = canvasEl.value;
store.ctx.value = canvasEl.value.getContext('2d');
// Initialize canvas size
canvasEl.value.width = 400;
canvasEl.value.height = 300;
// Set up checkerboard background pattern
setupCheckerboardPattern();
setupCanvasEvents();
// Setup keyboard events for modifiers
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
}
});
onBeforeUnmount(() => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keyup', handleKeyUp);
if (canvasEl.value) {
canvasEl.value.removeEventListener('mousedown', handleMouseDown);
canvasEl.value.removeEventListener('mousemove', handleMouseMove);
canvasEl.value.removeEventListener('mouseup', handleMouseUp);
canvasEl.value.removeEventListener('mouseout', handleMouseOut);
}
});
const setupCheckerboardPattern = () => {
if (!canvasEl.value) return; if (!canvasEl.value) return;
// This will be done with CSS using Tailwind's bg utilities // This will be done with CSS using Tailwind's bg utilities
@ -90,18 +55,9 @@ export default defineComponent({
`; `;
canvasEl.value.style.backgroundSize = '20px 20px'; canvasEl.value.style.backgroundSize = '20px 20px';
canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px'; canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
}; };
const setupCanvasEvents = () => { const handleMouseDown = (e: MouseEvent) => {
if (!canvasEl.value) return;
canvasEl.value.addEventListener('mousedown', handleMouseDown);
canvasEl.value.addEventListener('mousemove', handleMouseMove);
canvasEl.value.addEventListener('mouseup', handleMouseUp);
canvasEl.value.addEventListener('mouseout', handleMouseOut);
};
const handleMouseDown = (e: MouseEvent) => {
if (!canvasEl.value || store.sprites.value.length === 0) return; if (!canvasEl.value || store.sprites.value.length === 0) return;
const rect = canvasEl.value.getBoundingClientRect(); const rect = canvasEl.value.getBoundingClientRect();
@ -123,9 +79,9 @@ export default defineComponent({
break; break;
} }
} }
}; };
const handleMouseMove = (e: MouseEvent) => { const handleMouseMove = (e: MouseEvent) => {
if (!canvasEl.value) return; if (!canvasEl.value) return;
const rect = canvasEl.value.getBoundingClientRect(); const rect = canvasEl.value.getBoundingClientRect();
@ -181,48 +137,70 @@ export default defineComponent({
const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX)); const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX));
const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY)); const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY));
// Update sprite position to snap to grid
store.draggedSprite.value.x = boundedCellX * store.cellSize.width; store.draggedSprite.value.x = boundedCellX * store.cellSize.width;
store.draggedSprite.value.y = boundedCellY * store.cellSize.height; store.draggedSprite.value.y = boundedCellY * store.cellSize.height;
} }
} }
store.renderSpritesheetPreview();
// Update animation preview if paused
if (!store.animation.isPlaying && store.sprites.value.length > 0 && store.isModalOpen.value) {
store.renderAnimationFrame(store.animation.currentFrame);
} }
} };
};
const handleMouseUp = () => { const handleMouseUp = () => {
store.draggedSprite.value = null; store.draggedSprite.value = null;
}; };
const handleMouseOut = () => { const handleMouseOut = () => {
store.draggedSprite.value = null;
isTooltipVisible.value = false; isTooltipVisible.value = false;
}; store.draggedSprite.value = null;
};
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') { if (e.key === 'Shift') {
store.isShiftPressed.value = true; store.isShiftPressed.value = true;
} }
}; };
const handleKeyUp = (e: KeyboardEvent) => { const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') { if (e.key === 'Shift') {
store.isShiftPressed.value = false; store.isShiftPressed.value = false;
} }
}; };
return { const setupCanvasEvents = () => {
canvasEl, if (!canvasEl.value) return;
isTooltipVisible,
tooltipText, canvasEl.value.addEventListener('mousedown', handleMouseDown);
tooltipStyle canvasEl.value.addEventListener('mousemove', handleMouseMove);
}; canvasEl.value.addEventListener('mouseup', handleMouseUp);
canvasEl.value.addEventListener('mouseout', handleMouseOut);
};
onMounted(() => {
if (canvasEl.value) {
store.canvas.value = canvasEl.value;
store.ctx.value = canvasEl.value.getContext('2d');
// Initialize canvas size
canvasEl.value.width = 400;
canvasEl.value.height = 300;
setupCheckerboardPattern();
setupCanvasEvents();
// Setup keyboard events for modifiers
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
}
});
onBeforeUnmount(() => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keyup', handleKeyUp);
if (canvasEl.value) {
canvasEl.value.removeEventListener('mousedown', handleMouseDown);
canvasEl.value.removeEventListener('mousemove', handleMouseMove);
canvasEl.value.removeEventListener('mouseup', handleMouseUp);
canvasEl.value.removeEventListener('mouseout', handleMouseOut);
} }
}); });
</script> </script>

26
src/components/Notification.vue
View File

@ -25,25 +25,15 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed } from 'vue'; import { computed } from 'vue'
import { useSpritesheetStore } from '../composables/useSpritesheetStore'; import { useSpritesheetStore } from '../composables/useSpritesheetStore'
export default defineComponent({ const store = useSpritesheetStore()
name: 'Notification',
setup() {
const store = useSpritesheetStore();
const notification = computed(() => store.notification); const notification = computed(() => store.notification)
const closeNotification = () => { const closeNotification = () => {
store.notification.isVisible = false; store.notification.isVisible = false
}; }
return {
notification,
closeNotification
};
}
});
</script> </script>

175
src/components/PreviewModal.vue
View File

@ -80,147 +80,128 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'; import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { useSpritesheetStore } from '../composables/useSpritesheetStore'; import { useSpritesheetStore } from '../composables/useSpritesheetStore'
export default defineComponent({ const store = useSpritesheetStore()
name: 'PreviewModal', const animCanvas = ref<HTMLCanvasElement | null>(null)
setup() {
const store = useSpritesheetStore();
const animCanvas = ref<HTMLCanvasElement | null>(null);
const isModalOpen = computed(() => store.isModalOpen.value); const isModalOpen = computed(() => store.isModalOpen.value)
const sprites = computed(() => store.sprites.value); const sprites = computed(() => store.sprites.value)
const animation = computed(() => store.animation); const animation = computed(() => store.animation)
const currentFrame = ref(0); const currentFrame = ref(0)
const currentFrameDisplay = computed(() => { const currentFrameDisplay = computed(() => {
const totalFrames = Math.max(1, sprites.value.length); const totalFrames = Math.max(1, sprites.value.length)
const frame = Math.min(currentFrame.value + 1, totalFrames); const frame = Math.min(currentFrame.value + 1, totalFrames)
return `${frame} / ${totalFrames}`; return `${frame} / ${totalFrames}`
}); })
onMounted(() => { const handleKeyDown = (e: KeyboardEvent) => {
if (animCanvas.value) { if (!isModalOpen.value) return
store.animation.canvas = animCanvas.value;
store.animation.ctx = animCanvas.value.getContext('2d');
// Initialize canvas size
animCanvas.value.width = 200;
animCanvas.value.height = 200;
// Setup keyboard shortcuts for the modal
window.addEventListener('keydown', handleKeyDown);
}
});
onBeforeUnmount(() => {
window.removeEventListener('keydown', handleKeyDown);
});
const handleKeyDown = (e: KeyboardEvent) => {
if (!isModalOpen.value) return;
if (e.key === 'Escape') { if (e.key === 'Escape') {
closeModal(); closeModal()
} else if (e.key === ' ' || e.key === 'Spacebar') { } else if (e.key === ' ' || e.key === 'Spacebar') {
// Toggle play/pause // Toggle play/pause
if (animation.value.isPlaying) { if (animation.value.isPlaying) {
stopAnimation(); stopAnimation()
} else if (sprites.value.length > 0) { } else if (sprites.value.length > 0) {
startAnimation(); startAnimation()
} }
e.preventDefault(); e.preventDefault()
} else if (e.key === 'ArrowRight' && !animation.value.isPlaying && sprites.value.length > 0) { } else if (e.key === 'ArrowRight' && !animation.value.isPlaying && sprites.value.length > 0) {
// Next frame // Next frame
currentFrame.value = (currentFrame.value + 1) % sprites.value.length; currentFrame.value = (currentFrame.value + 1) % sprites.value.length
updateFrame(); updateFrame()
} else if (e.key === 'ArrowLeft' && !animation.value.isPlaying && sprites.value.length > 0) { } else if (e.key === 'ArrowLeft' && !animation.value.isPlaying && sprites.value.length > 0) {
// Previous frame // Previous frame
currentFrame.value = (currentFrame.value - 1 + sprites.value.length) % sprites.value.length; currentFrame.value = (currentFrame.value - 1 + sprites.value.length) % sprites.value.length
updateFrame(); updateFrame()
} }
}; }
const openModal = () => { const openModal = () => {
if (sprites.value.length === 0) { if (sprites.value.length === 0) {
store.showNotification('Please add sprites first', 'error'); store.showNotification('Please add sprites first', 'error')
return; return
} }
store.isModalOpen.value = true; store.isModalOpen.value = true
// Show the current frame // Show the current frame
if (!animation.value.isPlaying && sprites.value.length > 0) { if (!animation.value.isPlaying && sprites.value.length > 0) {
store.renderAnimationFrame(currentFrame.value); store.renderAnimationFrame(currentFrame.value)
} }
}; }
const closeModal = () => { const closeModal = () => {
store.isModalOpen.value = false; store.isModalOpen.value = false
// Stop animation if it's playing // Stop animation if it's playing
if (animation.value.isPlaying) { if (animation.value.isPlaying) {
stopAnimation(); stopAnimation()
} }
}; }
const startAnimation = () => { const startAnimation = () => {
if (sprites.value.length === 0) return; if (sprites.value.length === 0) return
store.startAnimation()
}
store.startAnimation(); const stopAnimation = () => {
}; store.stopAnimation()
}
const stopAnimation = () => { const handleFrameChange = () => {
store.stopAnimation();
};
const handleFrameChange = () => {
// Stop any running animation // Stop any running animation
if (animation.value.isPlaying) { if (animation.value.isPlaying) {
stopAnimation(); stopAnimation()
} }
updateFrame()
}
updateFrame(); const updateFrame = () => {
}; animation.value.currentFrame = currentFrame.value
animation.value.manualUpdate = true
store.renderAnimationFrame(currentFrame.value)
}
const updateFrame = () => { const handleFrameRateChange = () => {
animation.value.currentFrame = currentFrame.value;
animation.value.manualUpdate = true;
store.renderAnimationFrame(currentFrame.value);
};
const handleFrameRateChange = () => {
// If animation is currently playing, restart it with the new frame rate // If animation is currently playing, restart it with the new frame rate
if (animation.value.isPlaying) { if (animation.value.isPlaying) {
stopAnimation(); stopAnimation()
startAnimation(); startAnimation()
} }
}; }
// Keep currentFrame in sync with animation.currentFrame onMounted(() => {
watch(() => animation.value.currentFrame, (newVal) => { if (animCanvas.value) {
currentFrame.value = newVal; store.animation.canvas = animCanvas.value
}); store.animation.ctx = animCanvas.value.getContext('2d')
return { // Initialize canvas size
animCanvas, animCanvas.value.width = 200
isModalOpen, animCanvas.value.height = 200
sprites,
animation, // Setup keyboard shortcuts for the modal
currentFrame, window.addEventListener('keydown', handleKeyDown)
currentFrameDisplay,
openModal,
closeModal,
startAnimation,
stopAnimation,
handleFrameChange,
handleFrameRateChange
};
} }
}); })
onBeforeUnmount(() => {
window.removeEventListener('keydown', handleKeyDown)
})
// Keep currentFrame in sync with animation.currentFrame
watch(() => animation.value.currentFrame, (newVal) => {
currentFrame.value = newVal
})
// Expose openModal for external use
defineExpose({ openModal })
</script> </script>
<style scoped> <style scoped>

43
src/components/Sidebar.vue
View File

@ -89,55 +89,40 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed } from 'vue'; import { computed } from 'vue';
import { useSpritesheetStore } from '../composables/useSpritesheetStore'; import { useSpritesheetStore } from '../composables/useSpritesheetStore';
import DropZone from './DropZone.vue'; import DropZone from './DropZone.vue';
import SpriteList from './SpriteList.vue'; import SpriteList from './SpriteList.vue';
export default defineComponent({ const store = useSpritesheetStore();
name: 'Sidebar', const sprites = computed(() => store.sprites.value);
components: {
DropZone,
SpriteList
},
setup() {
const store = useSpritesheetStore();
const handleUpload = () => { const handleUpload = () => {
// The dropzone component handles adding sprites to the store // The dropzone component handles adding sprites to the store
// This is just for event handling if needed // This is just for event handling if needed
}; };
const handleSpriteClick = (spriteId: string) => { const handleSpriteClick = (spriteId: string) => {
store.highlightSprite(spriteId); store.highlightSprite(spriteId);
}; };
const openPreviewModal = () => { const openPreviewModal = () => {
if (store.sprites.value.length === 0) { if (store.sprites.value.length === 0) {
store.showNotification('Please add sprites first', 'error'); store.showNotification('Please add sprites first', 'error');
return; return;
} }
store.isModalOpen.value = true; store.isModalOpen.value = true;
}; };
const confirmClearAll = () => { const confirmClearAll = () => {
if (confirm('Are you sure you want to clear all sprites?')) { if (confirm('Are you sure you want to clear all sprites?')) {
store.clearAllSprites(); store.clearAllSprites();
store.showNotification('All sprites cleared'); store.showNotification('All sprites cleared');
} }
}; };
return { // Expose store methods directly
sprites: computed(() => store.sprites.value), const { autoArrangeSprites, downloadSpritesheet } = store;
autoArrangeSprites: store.autoArrangeSprites,
downloadSpritesheet: store.downloadSpritesheet,
confirmClearAll,
handleUpload,
handleSpriteClick,
openPreviewModal
};
}
});
</script> </script>

35
src/components/SpriteList.vue
View File

@ -7,7 +7,7 @@
<div <div
v-for="(sprite, index) in sprites" v-for="(sprite, index) in sprites"
:key="sprite.id" :key="sprite.id"
@click="$emit('sprite-clicked', sprite.id)" @click="$emit('spriteClicked', sprite.id)"
class="border border-gray-600 rounded bg-gray-700 p-2 text-center transition-all cursor-pointer hover:border-blue-500 hover:-translate-y-0.5 hover:shadow-md" class="border border-gray-600 rounded bg-gray-700 p-2 text-center transition-all cursor-pointer hover:border-blue-500 hover:-translate-y-0.5 hover:shadow-md"
> >
<img <img
@ -22,27 +22,18 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, type PropType } from 'vue'; import type { Sprite } from '../composables/useSpritesheetStore'
import { type Sprite } from '../composables/useSpritesheetStore';
export default defineComponent({ defineProps<{
name: 'SpriteList', sprites: Sprite[]
props: { }>()
sprites: {
type: Array as PropType<Sprite[]>,
required: true
}
},
emits: ['sprite-clicked'],
setup() {
const truncateName = (name: string) => {
return name.length > 10 ? `${name.substring(0, 10)}...` : name;
};
return { defineEmits<{
truncateName spriteClicked: [id: string]
}; }>()
}
}); const truncateName = (name: string) => {
return name.length > 10 ? `${name.substring(0, 10)}...` : name
}
</script> </script>

12
src/composables/counter.ts
View File

@ -1,12 +0,0 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})