From 932e519a35e98e33a0635dcbf49db681defca943 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 6 Apr 2025 01:29:49 +0200
Subject: [PATCH] Added store, pixel perfect option init

---
 src/App.vue                      |  7 -------
 src/assets/main.css              |  5 +++++
 src/components/SpriteCanvas.vue  | 12 +++++++-----
 src/components/SpritePreview.vue | 20 +++++++++++++-------
 src/stores/useSettingsStore.ts   | 21 +++++++++++++++++++++
 5 files changed, 46 insertions(+), 19 deletions(-)
 create mode 100644 src/stores/useSettingsStore.ts

diff --git a/src/App.vue b/src/App.vue
index d28748a..3f0ae7b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -381,10 +381,3 @@
     });
   };
 </script>
-
-<style>
-  canvas {
-    image-rendering: pixelated;
-    image-rendering: crisp-edges;
-  }
-</style>
diff --git a/src/assets/main.css b/src/assets/main.css
index d4b5078..c61e6a4 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1 +1,6 @@
 @import 'tailwindcss';
+
+canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 602addc..9e23e56 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -2,7 +2,7 @@
   <div class="space-y-4">
     <div class="flex justify-between items-center">
       <div class="flex items-center">
-        <input id="pixel-perfect" type="checkbox" v-model="pixelPerfect" class="mr-2" @change="drawCanvas" />
+        <input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="mr-2" @change="drawCanvas" />
         <label for="pixel-perfect">Pixel perfect rendering (for pixel art)</label>
       </div>
     </div>
@@ -15,6 +15,7 @@
 
 <script setup lang="ts">
   import { ref, onMounted, watch, computed } from 'vue';
+  import { useSettingsStore } from '@/stores/useSettingsStore';
 
   interface Sprite {
     id: string;
@@ -34,8 +35,8 @@
     (e: 'updateSprite', id: string, x: number, y: number): void;
   }>();
 
-  // Pixel art optimization
-  const pixelPerfect = ref(true);
+  // Get settings from store
+  const settingsStore = useSettingsStore();
 
   const canvasRef = ref<HTMLCanvasElement | null>(null);
   const ctx = ref<CanvasRenderingContext2D | null>(null);
@@ -194,8 +195,8 @@
     // Clear canvas
     ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
 
-    // Disable image smoothing
-    ctx.value.imageSmoothingEnabled = false;
+    // Disable image smoothing based on pixel perfect setting
+    ctx.value.imageSmoothingEnabled = !settingsStore.pixelPerfect;
 
     // Draw grid
     ctx.value.strokeStyle = '#e5e7eb';
@@ -227,4 +228,5 @@
 
   watch(() => props.sprites, drawCanvas, { deep: true });
   watch(() => props.columns, drawCanvas);
+  watch(() => settingsStore.pixelPerfect, drawCanvas);
 </script>
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index a7a5469..41ff57b 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -45,6 +45,11 @@
                 <input type="checkbox" v-model="showAllSprites" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300" />
                 <span class="text-sm whitespace-nowrap">Hide sprites</span>
               </label>
+
+              <label class="flex items-center gap-2 cursor-pointer">
+                <input type="checkbox" v-model="settingsStore.pixelPerfect" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300" @change="drawPreviewCanvas" />
+                <span class="text-sm whitespace-nowrap">Pixel perfect</span>
+              </label>
             </div>
           </div>
         </div>
@@ -115,6 +120,7 @@
 
 <script setup lang="ts">
   import { ref, onMounted, watch, onUnmounted, computed } from 'vue';
+  import { useSettingsStore } from '@/stores/useSettingsStore';
 
   interface Sprite {
     id: string;
@@ -154,12 +160,11 @@
   const dragStartY = ref(0);
   const spritePosBeforeDrag = ref({ x: 0, y: 0 });
 
-  // Computed properties
-  const totalFrames = computed(() => props.sprites.length);
-
   // Add this after other refs
   const hiddenFrames = ref<number[]>([]);
-  const pixelPerfect = ref(true);
+
+  // Get settings from store
+  const settingsStore = useSettingsStore();
 
   // Add these computed properties
   const visibleFrames = computed(() => props.sprites.filter((_, index) => !hiddenFrames.value.includes(index)));
@@ -190,8 +195,8 @@
 
     const { maxWidth, maxHeight } = calculateMaxDimensions();
 
-    // Apply pixel art optimization consistently
-    ctx.value.imageSmoothingEnabled = !pixelPerfect.value;
+    // Apply pixel art optimization consistently from store
+    ctx.value.imageSmoothingEnabled = !settingsStore.pixelPerfect;
 
     // Set canvas size to just fit one sprite cell
     previewCanvasRef.value.width = maxWidth;
@@ -217,7 +222,7 @@
     }
 
     // Keep pixel art optimization consistent throughout all drawing operations
-    ctx.value.imageSmoothingEnabled = !pixelPerfect.value;
+    ctx.value.imageSmoothingEnabled = !settingsStore.pixelPerfect;
 
     // Draw all sprites with transparency if enabled
     if (showAllSprites.value && props.sprites.length > 1) {
@@ -399,6 +404,7 @@
   watch(isDraggable, drawPreviewCanvas);
   watch(showAllSprites, drawPreviewCanvas);
   watch(hiddenFrames, drawPreviewCanvas);
+  watch(() => settingsStore.pixelPerfect, drawPreviewCanvas);
 
   // Initial draw
   if (props.sprites.length > 0) {
diff --git a/src/stores/useSettingsStore.ts b/src/stores/useSettingsStore.ts
new file mode 100644
index 0000000..17370de
--- /dev/null
+++ b/src/stores/useSettingsStore.ts
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+const pixelPerfect = ref(true);
+
+export const useSettingsStore = defineStore('settings', () => {
+  // Actions
+  function togglePixelPerfect() {
+    pixelPerfect.value = !pixelPerfect.value;
+  }
+
+  function setPixelPerfect(value: boolean) {
+    pixelPerfect.value = value;
+  }
+
+  return {
+    pixelPerfect,
+    togglePixelPerfect,
+    setPixelPerfect,
+  };
+});