Zoom fixes

src/components/MainContent.vue

@@ -11,16 +11,13 @@
         </div>
       </div>
       <div class="p-6">
-        <div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96"
+        <div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96" :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }">
-             :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }">
           <canvas
             ref="canvasEl"
             class="block"
             :style="{
               transform: `scale(${store.zoomLevel.value})`,
               transformOrigin: 'top left',
-              width: zoomedWidth + 'px',
-              height: zoomedHeight + 'px'
             }"
           ></canvas>
         </div>
@@ -69,7 +66,9 @@ const tooltipStyle = computed(() => ({
   }));
 
   // Watch for zoom changes to update the container scroll position
-watch(() => store.zoomLevel.value, (newZoom, oldZoom) => {
+  watch(
+    () => store.zoomLevel.value,
+    (newZoom, oldZoom) => {
       if (!containerEl.value) return;
 
       // Adjust scroll position to keep the center point consistent when zooming
@@ -84,7 +83,8 @@ watch(() => store.zoomLevel.value, (newZoom, oldZoom) => {
       // Re-render the canvas with the new zoom level
       updateCanvasSize();
       store.renderSpritesheetPreview();
-});
+    }
+  );
 
   const setupCheckerboardPattern = () => {
     if (!canvasEl.value) return;
@@ -108,12 +108,10 @@ const updateCanvasSize = () => {
 
     // Set the base canvas size to fill the container
     // These are the "unzoomed" dimensions
-  baseCanvasWidth.value = Math.max(containerWidth.value,
+    baseCanvasWidth.value = Math.max(containerWidth.value, store.cellSize.width * Math.ceil(containerWidth.value / store.cellSize.width));
-    store.cellSize.width * Math.ceil(containerWidth.value / store.cellSize.width));
+    baseCanvasHeight.value = Math.max(containerHeight.value, store.cellSize.height * Math.ceil(containerHeight.value / store.cellSize.height));
-  baseCanvasHeight.value = Math.max(containerHeight.value,
-    store.cellSize.height * Math.ceil(containerHeight.value / store.cellSize.height));
 
-  // Update the actual canvas element size
+    // Set the actual canvas dimensions - remove any zoom scaling here
     canvasEl.value.width = baseCanvasWidth.value;
     canvasEl.value.height = baseCanvasHeight.value;
 
@@ -156,8 +154,7 @@ const handleMouseMove = (e: MouseEvent) => {
     const cellX = Math.floor(x / store.cellSize.width);
     const cellY = Math.floor(y / store.cellSize.height);
 
-  if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width &&
+    if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width && cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
-    cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
       isTooltipVisible.value = true;
       tooltipText.value = `Cell: (${cellX}, ${cellY})`;
       tooltipPosition.value.x = e.pageX;

src/components/PreviewModal.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="fixed inset-0 flex items-center justify-center z-50" :class="{ 'pointer-events-none': !isModalOpen }">
+  <!-- Make the outer container always pointer-events-none so clicks pass through -->
+  <div class="fixed inset-0 flex items-center justify-center z-50 pointer-events-none">
+    <!-- Apply pointer-events-auto ONLY to the modal itself so it can be interacted with -->
     <div class="bg-gray-800 rounded-lg max-w-4xl max-h-[90vh] overflow-auto scrollbar-hide shadow-lg pointer-events-auto" :class="{ invisible: !isModalOpen, visible: isModalOpen }" :style="{ transform: `translate3d(${position.x}px, ${position.y + (isModalOpen ? 0 : -20)}px, 0)` }">
       <div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600 cursor-move" @mousedown="startDrag">
         <div class="flex items-center gap-2 text-lg font-semibold select-none">
@@ -73,6 +75,9 @@
   const animation = computed(() => store.animation);
 
   const currentFrame = ref(0);
+  const position = ref({ x: 0, y: 0 });
+  const isDragging = ref(false);
+  const dragOffset = ref({ x: 0, y: 0 });
 
   const currentFrameDisplay = computed(() => {
     const totalFrames = Math.max(1, sprites.value.length);
@@ -117,7 +122,6 @@
     currentFrame.value = 0;
     animation.value.currentFrame = 0;
 
-    // Make sure the canvas is initialized
     await initializeCanvas();
 
     // Set modal open state if not already open
@@ -129,18 +133,21 @@
     await new Promise(resolve => requestAnimationFrame(resolve));
 
     // Set proper canvas size before rendering
-    if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
+    updateCanvasSize();
-      animCanvas.value.width = store.cellSize.width;
-      animCanvas.value.height = store.cellSize.height;
-    }
 
     // Force render the first frame
     if (sprites.value.length > 0) {
-      // Ensure we have the latest sprites
       store.renderAnimationFrame(0);
     }
   };
 
+  const updateCanvasSize = () => {
+    if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
+      animCanvas.value.width = store.cellSize.width;
+      animCanvas.value.height = store.cellSize.height;
+    }
+  };
+
   const closeModal = () => {
     store.isModalOpen.value = false;
 
@@ -181,44 +188,6 @@
     }
   };
 
-  onMounted(() => {
-    initializeCanvas();
-
-    // Setup keyboard shortcuts for the modal
-    window.addEventListener('keydown', handleKeyDown);
-  });
-
-  const initializeCanvas = async () => {
-    if (!animCanvas.value) {
-      console.error('PreviewModal: Animation canvas not found');
-      return;
-    }
-
-    try {
-      // Get the 2D context
-      const context = animCanvas.value.getContext('2d');
-      if (!context) {
-        console.error('PreviewModal: Failed to get 2D context from animation canvas');
-        return;
-      }
-
-      // Set the store references
-      store.animation.canvas = animCanvas.value;
-      store.animation.ctx = context;
-    } catch (error) {
-      console.error('PreviewModal: Error initializing animation canvas:', error);
-    }
-  };
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-  });
-
-  // Add these new refs for dragging functionality
-  const position = ref({ x: 0, y: 0 });
-  const isDragging = ref(false);
-  const dragOffset = ref({ x: 0, y: 0 });
-
   const startDrag = (e: MouseEvent) => {
     isDragging.value = true;
     dragOffset.value = {
@@ -248,6 +217,37 @@
     window.removeEventListener('mouseup', stopDrag);
   };
 
+  const initializeCanvas = async () => {
+    if (!animCanvas.value) {
+      console.error('PreviewModal: Animation canvas not found');
+      return;
+    }
+
+    try {
+      const context = animCanvas.value.getContext('2d');
+      if (!context) {
+        console.error('PreviewModal: Failed to get 2D context from animation canvas');
+        return;
+      }
+
+      store.animation.canvas = animCanvas.value;
+      store.animation.ctx = context;
+    } catch (error) {
+      console.error('PreviewModal: Error initializing animation canvas:', error);
+    }
+  };
+
+  onMounted(() => {
+    initializeCanvas();
+    window.addEventListener('keydown', handleKeyDown);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('keydown', handleKeyDown);
+    window.removeEventListener('mousemove', handleDrag);
+    window.removeEventListener('mouseup', stopDrag);
+  });
+
   // Keep currentFrame in sync with animation.currentFrame
   watch(
     () => animation.value.currentFrame,
@@ -261,13 +261,9 @@
     () => sprites.value,
     newSprites => {
       if (isModalOpen.value && newSprites.length > 0) {
-        // Update the canvas with the new sprites
+        updateCanvasSize();
-        if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
-          animCanvas.value.width = store.cellSize.width;
-          animCanvas.value.height = store.cellSize.height;
         store.renderAnimationFrame(currentFrame.value);
       }
-      }
     },
     { deep: true }
   );
@@ -294,12 +290,12 @@
     cursor: pointer;
   }
 
-  /* Optional: Prevent text selection while dragging */
+  /* Prevent text selection while dragging */
   .cursor-move {
     user-select: none;
   }
 
-  /* Add these new styles */
+  /* Hide scrollbar styles */
   .scrollbar-hide {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */

src/components/Sidebar.vue

@@ -53,15 +53,9 @@
         <!-- Zoom Controls -->
         <div class="flex flex-wrap gap-3 mb-6">
           <div class="text-sm font-medium text-gray-300 mb-2 w-full">Zoom Controls</div>
-          <button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
+          <button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-plus"></i> Zoom In</button>
-            <i class="fas fa-search-plus"></i> Zoom In
+          <button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-minus"></i> Zoom Out</button>
-          </button>
+          <button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-sync-alt"></i> Reset Zoom</button>
-          <button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
-            <i class="fas fa-search-minus"></i> Zoom Out
-          </button>
-          <button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
-            <i class="fas fa-sync-alt"></i> Reset Zoom
-          </button>
         </div>
 
         <div class="flex flex-wrap gap-3 mt-4">

src/components/SpriteList.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="sprites.length === 0" class="text-center text-gray-400 py-8">No sprites uploaded yet</div>
 
-  <div v-else class="grid grid-cols-2 gap-3 max-h-72 overflow-y-auto pr-2">
+  <div v-else class="grid grid-cols-2 gap-3 max-h-72 overflow-y-auto p-4">
     <div v-for="(sprite, index) in sprites" :key="sprite.id" @click="$emit('spriteClicked', sprite.id)" class="border border-gray-600 rounded bg-gray-700 p-2 text-center transition-all cursor-pointer hover:border-blue-500 hover:-translate-y-0.5 hover:shadow-md">
       <img :src="sprite.img.src" :alt="sprite.name" class="max-w-full max-h-16 mx-auto mb-2 bg-black bg-opacity-20 rounded" />
       <div class="text-xs text-gray-400 truncate">{{ index + 1 }}. {{ truncateName(sprite.name) }}</div>

src/composables/useSpritesheetStore.ts

@@ -146,9 +146,11 @@ export function useSpritesheetStore() {
       canvas.value.height = newHeight;
 
       // Emit an event to update the wrapper dimensions
-      window.dispatchEvent(new CustomEvent('canvas-size-updated', {
+      window.dispatchEvent(
-        detail: { width: newWidth, height: newHeight }
+        new CustomEvent('canvas-size-updated', {
-      }));
+          detail: { width: newWidth, height: newHeight },
+        })
+      );
     } catch (error) {
       console.error('Store: Error updating canvas size:', error);
     }
@@ -191,8 +193,6 @@ export function useSpritesheetStore() {
   function renderSpritesheetPreview(showGrid = true) {
     if (!ctx.value || !canvas.value) {
       console.error('Store: Canvas or context not available for rendering, will retry when ready');
-
-      // Set up a small delay and retry when elements might be ready
       setTimeout(() => {
         if (ctx.value && canvas.value) {
           renderSpritesheetPreview(showGrid);
@@ -201,26 +201,17 @@ export function useSpritesheetStore() {
       return;
     }
 
-    if (sprites.value.length === 0) {
+    if (sprites.value.length === 0) return;
-      return;
-    }
 
     try {
-      // Make sure canvas dimensions are set correctly
-      updateCanvasSize();
-
       // Clear the canvas
       ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
 
-      // Apply zoom transformation
-      ctx.value.save();
-      ctx.value.scale(zoomLevel.value, zoomLevel.value);
-
       if (showGrid) {
         drawGrid();
       }
 
-      // Draw each sprite
+      // Draw each sprite - remove the zoom scaling from context
       sprites.value.forEach((sprite, index) => {
         try {
           if (!sprite.img) {
@@ -229,17 +220,13 @@ export function useSpritesheetStore() {
           }
 
           if (sprite.img.complete && sprite.img.naturalWidth !== 0) {
-            ctx.value!.drawImage(sprite.img, sprite.x, sprite.y);
+            // Draw the image at its original size
+            ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
           } else {
             console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`);
-
-            // If image isn't loaded yet, set an onload handler
             sprite.img.onload = () => {
               if (ctx.value && canvas.value) {
-                ctx.value.save();
+                ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
-                ctx.value.scale(zoomLevel.value, zoomLevel.value);
-                ctx.value.drawImage(sprite.img, sprite.x, sprite.y);
-                ctx.value.restore();
               }
             };
           }
@@ -247,11 +234,8 @@ export function useSpritesheetStore() {
           console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);
         }
       });
-
-      // Restore the canvas state
-      ctx.value.restore();
     } catch (error) {
-      console.error('Store: Error rendering spritesheet preview:', error);
+      console.error('Store: Error in renderSpritesheetPreview:', error);
     }
   }