MainContent preview border

src/components/MainContent.vue

@@ -34,6 +34,9 @@
   const canvasEl = ref<HTMLCanvasElement | null>(null);
   const containerEl = ref<HTMLDivElement | null>(null);
 
+  // Access the preview border settings
+  const previewBorder = computed(() => store.previewBorder);
+
   // Panning state
   const isPanning = ref(false);
   const isAltPressed = ref(false);
@@ -85,6 +88,17 @@
     }
   );
 
+  // Watch for changes in border settings to update the canvas
+  watch(
+    () => previewBorder.value,
+    () => {
+      if (store.sprites.value.length > 0) {
+        store.renderSpritesheetPreview();
+      }
+    },
+    { deep: true }
+  );
+
   const setupCheckerboardPattern = () => {
     if (!canvasEl.value) return;
 

src/composables/useSpritesheetStore.ts

@@ -255,11 +255,31 @@ export function useSpritesheetStore() {
             if (sprite.img.complete && sprite.img.naturalWidth !== 0) {
               // Draw the image at its original size
               ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
+
+              // Draw border around the cell if enabled (preview only)
+              if (previewBorder.enabled) {
+                const cellX = Math.floor(sprite.x / cellSize.width) * cellSize.width;
+                const cellY = Math.floor(sprite.y / cellSize.height) * cellSize.height;
+
+                ctx.value!.strokeStyle = previewBorder.color;
+                ctx.value!.lineWidth = previewBorder.width / zoomLevel.value; // Adjust for zoom
+                ctx.value!.strokeRect(cellX, cellY, cellSize.width, cellSize.height);
+              }
             } else {
               console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`);
               sprite.img.onload = () => {
                 if (ctx.value && canvas.value) {
                   ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
+
+                  // Draw border around the cell if enabled (preview only)
+                  if (previewBorder.enabled) {
+                    const cellX = Math.floor(sprite.x / cellSize.width) * cellSize.width;
+                    const cellY = Math.floor(sprite.y / cellSize.height) * cellSize.height;
+
+                    ctx.value.strokeStyle = previewBorder.color;
+                    ctx.value.lineWidth = previewBorder.width / zoomLevel.value; // Adjust for zoom
+                    ctx.value.strokeRect(cellX, cellY, cellSize.width, cellSize.height);
+                  }
                 }
               };
             }