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

[FEAT] Allow to toggle checker bg

Browse Source
This commit is contained in:
root
2025-11-23 15:42:02 +01:00
parent 7f8e26255f
commit a0d2b2994b
3 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/SpriteCanvas.vue
View File

@@ -50,6 +50,10 @@
<input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="w-4 h-4 rounded" /> <input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="w-4 h-4 rounded" />
<span class="text-sm font-medium dark:text-gray-200">Negative Spacing</span> <span class="text-sm font-medium dark:text-gray-200">Negative Spacing</span>
</label> </label>
<label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
<input id="checkerboard" type="checkbox" v-model="settingsStore.checkerboardEnabled" class="w-4 h-4 rounded" />
<span class="text-sm font-medium dark:text-gray-200">Checkerboard</span>
</label>
<div class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600"> <div class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600">
<label for="bg-color" class="text-sm font-medium dark:text-gray-200">Background:</label> <label for="bg-color" class="text-sm font-medium dark:text-gray-200">Background:</label>
<select id="bg-color" v-model="bgSelectValue" class="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 dark:text-gray-200 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all"> <select id="bg-color" v-model="bgSelectValue" class="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 dark:text-gray-200 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all">
@@ -89,7 +93,7 @@
transformOrigin: 'top left', transformOrigin: 'top left',
width: `${gridDimensions.width}px`, width: `${gridDimensions.width}px`,
height: `${gridDimensions.height}px`, height: `${gridDimensions.height}px`,
position: 'relative' position: 'relative',
}" }"
class="inline-block" class="inline-block"
@mousedown="startDrag" @mousedown="startDrag"
@@ -120,10 +124,10 @@
backgroundImage: getCellBackgroundImage(), backgroundImage: getCellBackgroundImage(),
backgroundSize: getCellBackgroundSize(), backgroundSize: getCellBackgroundSize(),
backgroundPosition: getCellBackgroundPosition(), backgroundPosition: getCellBackgroundPosition(),
border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}` border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
}" }"
:class="{ :class="{
'bg-blue-500 bg-opacity-20': highlightCell && highlightCell.col === (cellIndex - 1) % columns && highlightCell.row === Math.floor((cellIndex - 1) / columns) 'bg-blue-500 bg-opacity-20': highlightCell && highlightCell.col === (cellIndex - 1) % columns && highlightCell.row === Math.floor((cellIndex - 1) / columns),
}" }"
></div> ></div>
@@ -142,7 +146,7 @@
width: `${sprite.width}px`, width: `${sprite.width}px`,
height: `${sprite.height}px`, height: `${sprite.height}px`,
opacity: '0.25', opacity: '0.25',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto' imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}" }"
draggable="false" draggable="false"
/> />
@@ -165,7 +169,7 @@
width: `${sprite.width}px`, width: `${sprite.width}px`,
height: `${sprite.height}px`, height: `${sprite.height}px`,
opacity: layer.id === activeLayerId ? '1' : '0.85', opacity: layer.id === activeLayerId ? '1' : '0.85',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto' imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}" }"
:data-sprite-id="sprite.id" :data-sprite-id="sprite.id"
:data-layer-id="layer.id" :data-layer-id="layer.id"
@@ -186,7 +190,7 @@
width: `${activeSpriteSprite?.width}px`, width: `${activeSpriteSprite?.width}px`,
height: `${activeSpriteSprite?.height}px`, height: `${activeSpriteSprite?.height}px`,
opacity: '0.6', opacity: '0.6',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto' imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}" }"
draggable="false" draggable="false"
/> />
@@ -200,7 +204,7 @@
:style="{ :style="{
left: `${position.cellX + position.maxWidth - 2}px`, left: `${position.cellX + position.maxWidth - 2}px`,
top: `${position.cellY + position.maxHeight - 2}px`, top: `${position.cellY + position.maxHeight - 2}px`,
transform: 'translate(-100%, -100%)' transform: 'translate(-100%, -100%)',
}" }"
> >
<span>{{ position.x }},{{ position.y }}</span> <span>{{ position.x }},{{ position.y }}</span>
@@ -353,7 +357,7 @@
const getCellBackgroundImage = () => { const getCellBackgroundImage = () => {
const bg = settingsStore.backgroundColor; const bg = settingsStore.backgroundColor;
if (bg === 'transparent') { if (bg === 'transparent' && settingsStore.checkerboardEnabled) {
// Checkerboard pattern for transparent backgrounds (dark mode friendly) // Checkerboard pattern for transparent backgrounds (dark mode friendly)
const color = settingsStore.darkMode ? '#4b5563' : '#d1d5db'; const color = settingsStore.darkMode ? '#4b5563' : '#d1d5db';
return `linear-gradient(45deg, ${color} 25%, transparent 25%), linear-gradient(-45deg, ${color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${color} 75%), linear-gradient(-45deg, transparent 75%, ${color} 75%)`; return `linear-gradient(45deg, ${color} 25%, transparent 25%), linear-gradient(-45deg, ${color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${color} 75%), linear-gradient(-45deg, transparent 75%, ${color} 75%)`;

28
src/components/SpritePreview.vue
View File

@@ -2,7 +2,14 @@
<div class="spritesheet-preview w-full h-full"> <div class="spritesheet-preview w-full h-full">
<div class="flex flex-col lg:flex-row gap-4 h-full"> <div class="flex flex-col lg:flex-row gap-4 h-full">
<div class="flex-1 min-w-0 flex flex-col"> <div class="flex-1 min-w-0 flex flex-col">
<div class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[300px] max-h-[calc(100vh-12rem)] shadow-sm hover:shadow-md transition-shadow duration-200" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchmove="handleTouchMove" @touchend="stopDrag"> <div
class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[300px] max-h-[calc(100vh-12rem)] shadow-sm hover:shadow-md transition-shadow duration-200"
@mousemove="drag"
@mouseup="stopDrag"
@mouseleave="stopDrag"
@touchmove="handleTouchMove"
@touchend="stopDrag"
>
<div <div
ref="previewContainerRef" ref="previewContainerRef"
class="relative touch-manipulation inline-block" class="relative touch-manipulation inline-block"
@@ -15,7 +22,7 @@
backgroundImage: getPreviewBackgroundImage(), backgroundImage: getPreviewBackgroundImage(),
backgroundSize: settingsStore.backgroundColor === 'transparent' ? '20px 20px' : 'auto', backgroundSize: settingsStore.backgroundColor === 'transparent' ? '20px 20px' : 'auto',
backgroundPosition: settingsStore.backgroundColor === 'transparent' ? '0 0, 0 10px, 10px -10px, -10px 0px' : '0 0', backgroundPosition: settingsStore.backgroundColor === 'transparent' ? '0 0, 0 10px, 10px -10px, -10px 0px' : '0 0',
border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}` border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
}" }"
> >
<!-- Background sprites (dimmed for comparison) --> <!-- Background sprites (dimmed for comparison) -->
@@ -33,7 +40,7 @@
width: `${layer.sprites[i].width}px`, width: `${layer.sprites[i].width}px`,
height: `${layer.sprites[i].height}px`, height: `${layer.sprites[i].height}px`,
opacity: '0.3', opacity: '0.3',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto' imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}" }"
draggable="false" draggable="false"
/> />
@@ -54,7 +61,7 @@
top: `${cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y}px`, top: `${cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y}px`,
width: `${layer.sprites[currentFrameIndex].width}px`, width: `${layer.sprites[currentFrameIndex].width}px`,
height: `${layer.sprites[currentFrameIndex].height}px`, height: `${layer.sprites[currentFrameIndex].height}px`,
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto' imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}" }"
@mousedown="startDrag($event, layer.sprites[currentFrameIndex], layer.id)" @mousedown="startDrag($event, layer.sprites[currentFrameIndex], layer.id)"
@touchstart="handleTouchStart($event, layer.sprites[currentFrameIndex], layer.id)" @touchstart="handleTouchStart($event, layer.sprites[currentFrameIndex], layer.id)"
@@ -305,7 +312,7 @@
// Helper for background image (dark mode friendly) // Helper for background image (dark mode friendly)
const getPreviewBackgroundImage = () => { const getPreviewBackgroundImage = () => {
if (settingsStore.backgroundColor === 'transparent') { if (settingsStore.backgroundColor === 'transparent' && settingsStore.checkerboardEnabled) {
const color = settingsStore.darkMode ? '#4b5563' : '#d1d5db'; const color = settingsStore.darkMode ? '#4b5563' : '#d1d5db';
return `linear-gradient(45deg, ${color} 25%, transparent 25%), linear-gradient(-45deg, ${color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${color} 75%), linear-gradient(-45deg, transparent 75%, ${color} 75%)`; return `linear-gradient(45deg, ${color} 25%, transparent 25%), linear-gradient(-45deg, ${color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${color} 75%), linear-gradient(-45deg, transparent 75%, ${color} 75%)`;
} }
@@ -456,8 +463,15 @@
// Watchers - most canvas-related watchers removed // Watchers - most canvas-related watchers removed
// Keep layer watchers to ensure reactivity // Keep layer watchers to ensure reactivity
watch(() => props.layers, () => {}, { deep: true }); watch(
watch(() => props.activeLayerId, () => {}); () => props.layers,
() => {},
{ deep: true }
);
watch(
() => props.activeLayerId,
() => {}
);
watch(currentFrameIndex, () => {}); watch(currentFrameIndex, () => {});
</script> </script>

7
src/stores/useSettingsStore.ts
View File

@@ -8,6 +8,7 @@ const backgroundColor = ref('transparent');
const manualCellSizeEnabled = ref(false); const manualCellSizeEnabled = ref(false);
const manualCellWidth = ref(64); const manualCellWidth = ref(64);
const manualCellHeight = ref(64); const manualCellHeight = ref(64);
const checkerboardEnabled = ref(true);
// Initialize dark mode from localStorage or system preference // Initialize dark mode from localStorage or system preference
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
@@ -81,6 +82,10 @@ export const useSettingsStore = defineStore('settings', () => {
setManualCellHeight(height); setManualCellHeight(height);
} }
function toggleCheckerboard() {
checkerboardEnabled.value = !checkerboardEnabled.value;
}
return { return {
pixelPerfect, pixelPerfect,
darkMode, darkMode,
@@ -89,6 +94,7 @@ export const useSettingsStore = defineStore('settings', () => {
manualCellSizeEnabled, manualCellSizeEnabled,
manualCellWidth, manualCellWidth,
manualCellHeight, manualCellHeight,
checkerboardEnabled,
togglePixelPerfect, togglePixelPerfect,
setPixelPerfect, setPixelPerfect,
toggleDarkMode, toggleDarkMode,
@@ -99,5 +105,6 @@ export const useSettingsStore = defineStore('settings', () => {
setManualCellWidth, setManualCellWidth,
setManualCellHeight, setManualCellHeight,
setManualCellSize, setManualCellSize,
toggleCheckerboard,
}; };
}); });