Perf. fix

src/components/SpriteCanvas.vue

@@ -6,7 +6,7 @@
     <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-0">
       <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 w-full sm:w-auto">
         <div class="flex items-center">
-          <input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="mr-2 w-4 h-4" @change="drawCanvas" />
+          <input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="mr-2 w-4 h-4" @change="requestDraw" />
           <label for="pixel-perfect" class="dark:text-gray-200 text-sm sm:text-base">Pixel perfect rendering</label>
         </div>
         <div class="flex items-center">
@@ -130,6 +130,17 @@
 
   const canvasRef = ref<HTMLCanvasElement | null>(null);
 
+  // rAF-based draw scheduler to coalesce multiple draw requests into a single frame
+  // Define before usage to avoid TDZ issues when passing into composables during setup
+  let rafId: number | null = null;
+  function requestDraw() {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      drawCanvas();
+    });
+  }
+
   // Initialize composables
   const canvas2D = useCanvas2D(canvasRef);
 
@@ -169,7 +180,7 @@
     getMousePosition: (event, z) => canvas2D.getMousePosition(event, z),
     onUpdateSprite: (id, x, y) => emit('updateSprite', id, x, y),
     onUpdateSpriteCell: (id, newIndex) => emit('updateSpriteCell', id, newIndex),
-    onDraw: drawCanvas,
+    onDraw: requestDraw,
   });
 
   const activeSprites = computed(() => props.layers.find(l => l.id === props.activeLayerId)?.sprites ?? []);
@@ -374,7 +385,7 @@
 
   onMounted(() => {
     canvas2D.initContext();
-    drawCanvas();
+    requestDraw();
 
     // Attach listeners for current sprites
     attachImageListeners();
@@ -393,24 +404,26 @@
 
   // Handler for force redraw event
   const handleForceRedraw = () => {
-    canvas2D.ensureIntegerPositions(props.sprites);
+    // Ensure integer positioning for crisp rendering on the active layer
+    canvas2D.ensureIntegerPositions(activeSprites.value);
     canvas2D.applySmoothing();
-    drawCanvas();
+    requestDraw();
   };
 
+  // Re-attach listeners and redraw whenever layers/sprites change
   watch(
-    () => props.sprites,
+    () => props.layers,
     () => {
       attachImageListeners();
-      drawCanvas();
+      requestDraw();
     },
     { deep: true }
   );
-  watch(() => props.columns, drawCanvas);
-  watch(() => settingsStore.pixelPerfect, drawCanvas);
-  watch(() => settingsStore.darkMode, drawCanvas);
-  watch(() => settingsStore.negativeSpacingEnabled, drawCanvas);
-  watch(showAllSprites, drawCanvas);
+  watch(() => props.columns, requestDraw);
+  watch(() => settingsStore.pixelPerfect, requestDraw);
+  watch(() => settingsStore.darkMode, requestDraw);
+  watch(() => settingsStore.negativeSpacingEnabled, requestDraw);
+  watch(showAllSprites, requestDraw);
 </script>
 
 <style scoped></style>