From 335bc0321872aada9c07d114d4a5ebd495ce5110 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 6 Apr 2025 01:34:16 +0200
Subject: [PATCH] Pixel perfect fixes

---
 public/CHANGELOG.md              | 6 ++++++
 src/assets/main.css              | 5 -----
 src/components/SpriteCanvas.vue  | 2 +-
 src/components/SpritePreview.vue | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
index 1521b1a..e95cdd5 100644
--- a/public/CHANGELOG.md
+++ b/public/CHANGELOG.md
@@ -1,5 +1,11 @@
 All notable changes to this project will be documented in this file.
 
+## [1.0.1] - 2025-04-06
+
+### Added
+- 📝 Help modal with instructions and tips
+- 🎨 Pixel perfect mode for better sprite alignment
+
 ## [1.0.0] - 2025-04-06
 
 ### Added
diff --git a/src/assets/main.css b/src/assets/main.css
index c61e6a4..d4b5078 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,6 +1 @@
 @import 'tailwindcss';
-
-canvas {
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-}
diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 9e23e56..d94cf8a 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -8,7 +8,7 @@
     </div>
 
     <div class="relative border border-gray-300 rounded-lg">
-      <canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full"></canvas>
+      <canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"></canvas>
     </div>
   </div>
 </template>
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 41ff57b..b8f2981 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -89,7 +89,7 @@
               <div v-for="(sprite, index) in props.sprites" :key="sprite.id" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 cursor-pointer" @click="toggleHiddenFrame(index)">
                 <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300" @click.stop @change="toggleHiddenFrame(index)" />
                 <div class="w-12 h-12 bg-gray-100 rounded flex items-center justify-center overflow-hidden">
-                  <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" style="image-rendering: pixelated" />
+                  <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
                 </div>
                 <span class="text-sm">Frame {{ index + 1 }}</span>
               </div>
@@ -111,7 +111,7 @@
         @touchend="stopDrag"
         class="block"
         :class="{ 'cursor-move': isDraggable }"
-        :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }"
+        :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left', ...(settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}) }"
       >
       </canvas>
     </div>