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

Disallow showing hidden frames

Browse Source
This commit is contained in:
Dennis Postma 2025-04-06 00:25:53 +02:00
parent 00047d05a3
commit 8aa64d8a0f
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/SpritePreview.vue
View File

@ -60,8 +60,8 @@
<div class="flex-1 min-w-[200px] space-y-6"> <div class="flex-1 min-w-[200px] space-y-6">
<!-- Frame Navigation --> <!-- Frame Navigation -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-sm font-medium w-30">Frame {{ currentFrameIndex + 1 }}/{{ totalFrames }}</span> <span class="text-sm font-medium w-30">Frame {{ visibleFrameNumber }}/{{ visibleFramesCount }}</span>
<input type="range" min="0" :max="totalFrames - 1" v-model.number="currentFrameIndex" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" /> <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
</div> </div>
<!-- FPS Control --> <!-- FPS Control -->
@ -145,6 +145,14 @@
// Add this after other refs // Add this after other refs
const hiddenFrames = ref<number[]>([]); const hiddenFrames = ref<number[]>([]);
// Add these computed properties
const visibleFrames = computed(() => props.sprites.filter((_, index) => !hiddenFrames.value.includes(index)));
const visibleFramesCount = computed(() => visibleFrames.value.length);
const visibleFrameIndex = computed(() => {
return visibleFrames.value.findIndex((_, idx) => idx === visibleFrames.value.findIndex(s => s === props.sprites[currentFrameIndex.value]));
});
const visibleFrameNumber = computed(() => visibleFrameIndex.value + 1);
// Canvas drawing // Canvas drawing
const calculateMaxDimensions = () => { const calculateMaxDimensions = () => {
let maxWidth = 0; let maxWidth = 0;
@ -249,19 +257,30 @@
}; };
const nextFrame = () => { const nextFrame = () => {
if (props.sprites.length === 0) return; if (visibleFrames.value.length === 0) return;
currentFrameIndex.value = (currentFrameIndex.value + 1) % props.sprites.length; const currentVisibleIndex = visibleFrameIndex.value;
const nextVisibleIndex = (currentVisibleIndex + 1) % visibleFrames.value.length;
currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[nextVisibleIndex]);
drawPreviewCanvas(); drawPreviewCanvas();
}; };
const previousFrame = () => { const previousFrame = () => {
if (props.sprites.length === 0) return; if (visibleFrames.value.length === 0) return;
currentFrameIndex.value = (currentFrameIndex.value - 1 + props.sprites.length) % props.sprites.length; const currentVisibleIndex = visibleFrameIndex.value;
const prevVisibleIndex = (currentVisibleIndex - 1 + visibleFrames.value.length) % visibleFrames.value.length;
currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[prevVisibleIndex]);
drawPreviewCanvas(); drawPreviewCanvas();
}; };
// Add this method to handle slider input
const handleSliderInput = (event: Event) => {
const target = event.target as HTMLInputElement;
const index = parseInt(target.value);
currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[index]);
};
// Drag functionality // Drag functionality
const startDrag = (event: MouseEvent) => { const startDrag = (event: MouseEvent) => {
if (!isDraggable.value || !previewCanvasRef.value) return; if (!isDraggable.value || !previewCanvasRef.value) return;