From a0d2b2994bbb2e370bee3cbba209a6d353d53ea6 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Sun, 23 Nov 2025 15:42:02 +0100
Subject: [PATCH] [FEAT] Allow to toggle checker bg

---
 src/components/SpriteCanvas.vue  | 20 ++++++++++++--------
 src/components/SpritePreview.vue | 28 +++++++++++++++++++++-------
 src/stores/useSettingsStore.ts   |  7 +++++++
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 45202d5..426881e 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -50,6 +50,10 @@
           <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>
         </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">
           <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">
@@ -89,7 +93,7 @@
             transformOrigin: 'top left',
             width: `${gridDimensions.width}px`,
             height: `${gridDimensions.height}px`,
-            position: 'relative'
+            position: 'relative',
           }"
           class="inline-block"
           @mousedown="startDrag"
@@ -120,10 +124,10 @@
               backgroundImage: getCellBackgroundImage(),
               backgroundSize: getCellBackgroundSize(),
               backgroundPosition: getCellBackgroundPosition(),
-              border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`
+              border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
             }"
             :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>
 
@@ -142,7 +146,7 @@
                       width: `${sprite.width}px`,
                       height: `${sprite.height}px`,
                       opacity: '0.25',
-                      imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto'
+                      imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
                     }"
                     draggable="false"
                   />
@@ -165,7 +169,7 @@
                     width: `${sprite.width}px`,
                     height: `${sprite.height}px`,
                     opacity: layer.id === activeLayerId ? '1' : '0.85',
-                    imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto'
+                    imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
                   }"
                   :data-sprite-id="sprite.id"
                   :data-layer-id="layer.id"
@@ -186,7 +190,7 @@
               width: `${activeSpriteSprite?.width}px`,
               height: `${activeSpriteSprite?.height}px`,
               opacity: '0.6',
-              imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto'
+              imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
             }"
             draggable="false"
           />
@@ -200,7 +204,7 @@
             :style="{
               left: `${position.cellX + position.maxWidth - 2}px`,
               top: `${position.cellY + position.maxHeight - 2}px`,
-              transform: 'translate(-100%, -100%)'
+              transform: 'translate(-100%, -100%)',
             }"
           >
             <span>{{ position.x }},{{ position.y }}</span>
@@ -353,7 +357,7 @@
 
   const getCellBackgroundImage = () => {
     const bg = settingsStore.backgroundColor;
-    if (bg === 'transparent') {
+    if (bg === 'transparent' && settingsStore.checkerboardEnabled) {
       // Checkerboard pattern for transparent backgrounds (dark mode friendly)
       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%)`;
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 063096b..47d07fb 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -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>
 
diff --git a/src/stores/useSettingsStore.ts b/src/stores/useSettingsStore.ts
index a4c4508..e02e81e 100644
--- a/src/stores/useSettingsStore.ts
+++ b/src/stores/useSettingsStore.ts
@@ -8,6 +8,7 @@ const backgroundColor = ref('transparent');
 const manualCellSizeEnabled = ref(false);
 const manualCellWidth = ref(64);
 const manualCellHeight = ref(64);
+const checkerboardEnabled = ref(true);
 
 // Initialize dark mode from localStorage or system preference
 if (typeof window !== 'undefined') {
@@ -81,6 +82,10 @@ export const useSettingsStore = defineStore('settings', () => {
     setManualCellHeight(height);
   }
 
+  function toggleCheckerboard() {
+    checkerboardEnabled.value = !checkerboardEnabled.value;
+  }
+
   return {
     pixelPerfect,
     darkMode,
@@ -89,6 +94,7 @@ export const useSettingsStore = defineStore('settings', () => {
     manualCellSizeEnabled,
     manualCellWidth,
     manualCellHeight,
+    checkerboardEnabled,
     togglePixelPerfect,
     setPixelPerfect,
     toggleDarkMode,
@@ -99,5 +105,6 @@ export const useSettingsStore = defineStore('settings', () => {
     setManualCellWidth,
     setManualCellHeight,
     setManualCellSize,
+    toggleCheckerboard,
   };
 });