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

28
src/components/SpritePreview.vue
View File

@@ -2,7 +2,14 @@
<div class="spritesheet-preview w-full 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="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
ref="previewContainerRef"
class="relative touch-manipulation inline-block"
@@ -15,7 +22,7 @@
backgroundImage: getPreviewBackgroundImage(),
backgroundSize: settingsStore.backgroundColor === 'transparent' ? '20px 20px' : 'auto',
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) -->
@@ -33,7 +40,7 @@
width: `${layer.sprites[i].width}px`,
height: `${layer.sprites[i].height}px`,
opacity: '0.3',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto'
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}"
draggable="false"
/>
@@ -54,7 +61,7 @@
top: `${cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y}px`,
width: `${layer.sprites[currentFrameIndex].width}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)"
@touchstart="handleTouchStart($event, layer.sprites[currentFrameIndex], layer.id)"
@@ -305,7 +312,7 @@
// Helper for background image (dark mode friendly)
const getPreviewBackgroundImage = () => {
if (settingsStore.backgroundColor === 'transparent') {
if (settingsStore.backgroundColor === 'transparent' && settingsStore.checkerboardEnabled) {
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%)`;
}
@@ -456,8 +463,15 @@
// Watchers - most canvas-related watchers removed
// Keep layer watchers to ensure reactivity
watch(() => props.layers, () => {}, { deep: true });
watch(() => props.activeLayerId, () => {});
watch(
() => props.layers,
() => {},
{ deep: true }
);
watch(
() => props.activeLayerId,
() => {}
);
watch(currentFrameIndex, () => {});
</script>