root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Add back to project btn, extract GIFS into frames.

Browse Source
This commit is contained in:
root
2026-01-05 01:15:01 +01:00
parent 8e71d7379a
commit 77ae4bb429
8 changed files with 117 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/SpritesheetSplitter.vue
View File

@@ -10,7 +10,7 @@
<div class="space-y-4">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Detection Mode </label>
<div class="grid grid-cols-2 gap-3">
<div class="grid grid-cols-2 gap-3" :class="{ 'grid-cols-3': isGif }">
<button @click="detectionMode = 'grid'" :class="['px-4 py-3 rounded-lg border-2 text-left transition-all', detectionMode === 'grid' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500']">
<div class="font-medium text-gray-900 dark:text-gray-100">Grid</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Split by cell size</div>
@@ -19,6 +19,10 @@
<div class="font-medium text-gray-900 dark:text-gray-100">Auto-detect</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Find individual sprites</div>
</button>
<button v-if="isGif" @click="detectionMode = 'gif'" :class="['px-4 py-3 rounded-lg border-2 text-left transition-all', detectionMode === 'gif' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500']">
<div class="font-medium text-gray-900 dark:text-gray-100">Frame-by-frame</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Extract GIF frames</div>
</button>
</div>
</div>
@@ -129,6 +133,8 @@
const gridRows = computed(() => (imageElement.value && cellHeight.value > 0 ? Math.floor(imageElement.value.height / cellHeight.value) : 0));
const isGif = computed(() => props.imageFile?.type === 'image/gif' || props.imageUrl.toLowerCase().endsWith('.gif'));
watch(
() => props.imageUrl,
url => {
@@ -142,6 +148,12 @@
cellWidth.value = suggested.width;
cellHeight.value = suggested.height;
if (isGif.value) {
detectionMode.value = 'gif';
} else if (detectionMode.value === 'gif') {
detectionMode.value = 'grid';
}
generatePreview();
};
img.src = url;
@@ -171,11 +183,13 @@
preserveCellSize: preserveCellSize.value,
removeEmpty: removeEmpty.value,
});
} else {
} else if (detectionMode.value === 'auto') {
previewSprites.value = await splitter.detectSprites(img, {
sensitivity: sensitivity.value,
removeEmpty: removeEmpty.value,
});
} else if (detectionMode.value === 'gif' && props.imageFile) {
previewSprites.value = await splitter.extractGifFrames(props.imageFile);
}
} catch (error) {
console.error('Error generating preview:', error);