[FEAT] Allow to toggle checker bg

2025-11-23 15:42:02 +01:00
parent 7f8e26255f
commit a0d2b2994b
3 changed files with 40 additions and 15 deletions
--- 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%)`;
--- 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>

--- 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,
  };
 });