From e916c80d000c8bbeb6df41e22c9949a5a670e456 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Thu, 1 Jan 2026 01:33:22 +0100
Subject: [PATCH] [FEAT] Prevent canvas from resizing when hiding layers

---
 src/components/SpriteCanvas.vue  | 6 ++++--
 src/components/SpritePreview.vue | 9 +++++----
 src/composables/useDragSprite.ts | 4 ++--
 src/composables/useLayers.ts     | 3 ++-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 7e80112..c1efd04 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -319,12 +319,14 @@
   const gridMetrics = computed(() => calculateMaxDimensions());
 
   const totalCells = computed(() => {
-    const maxLen = Math.max(1, ...props.layers.map(l => (l.visible ? l.sprites.length : 1)));
+    // Use all layers regardless of visibility to keep canvas size stable
+    const maxLen = Math.max(1, ...props.layers.map(l => l.sprites.length));
     return Math.max(1, Math.ceil(maxLen / props.columns)) * props.columns;
   });
 
   const gridDimensions = computed(() => {
-    const maxLen = Math.max(1, ...props.layers.map(l => (l.visible ? l.sprites.length : 1)));
+    // Use all layers regardless of visibility to keep canvas size stable
+    const maxLen = Math.max(1, ...props.layers.map(l => l.sprites.length));
     const rows = Math.max(1, Math.ceil(maxLen / props.columns));
     return {
       width: gridMetrics.value.maxWidth * props.columns,
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 6686265..dfab0cf 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -428,7 +428,8 @@
 
   // Computed cell dimensions
   const cellDimensions = computed(() => {
-    const visibleLayers = getVisibleLayers();
+    // Use ALL layers (regardless of visibility) to keep preview size stable
+    const allLayers = props.layers;
     // If manual cell size is enabled, use manual values
     if (settingsStore.manualCellSizeEnabled) {
       return {
@@ -438,9 +439,9 @@
       };
     }
 
-    // Otherwise, calculate from sprite dimensions
-    const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers);
-    const allSprites = visibleLayers.flatMap(l => l.sprites);
+    // Otherwise, calculate from sprite dimensions across ALL layers
+    const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(allLayers);
+    const allSprites = allLayers.flatMap(l => l.sprites);
     const negativeSpacing = calculateNegativeSpacing(allSprites, settingsStore.negativeSpacingEnabled);
     return {
       cellWidth: maxWidth + negativeSpacing,
diff --git a/src/composables/useDragSprite.ts b/src/composables/useDragSprite.ts
index 682ff95..0006fae 100644
--- a/src/composables/useDragSprite.ts
+++ b/src/composables/useDragSprite.ts
@@ -89,9 +89,9 @@ export function useDragSprite(options: DragSpriteOptions) {
     }
 
     // Get all sprites to calculate dimensions from
-    // If layers are provided, use all visible layers; otherwise use current sprites
+    // If layers are provided, use ALL layers (regardless of visibility) to keep canvas size stable
     const layers = getLayers();
-    const spritesToMeasure = layers ? layers.filter(l => l.visible).flatMap(l => l.sprites) : getSprites();
+    const spritesToMeasure = layers ? layers.flatMap(l => l.sprites) : getSprites();
 
     // Otherwise, calculate based on sprite dimensions across all visible layers
     const base = getMaxDimensions(spritesToMeasure);
diff --git a/src/composables/useLayers.ts b/src/composables/useLayers.ts
index 064def4..5544008 100644
--- a/src/composables/useLayers.ts
+++ b/src/composables/useLayers.ts
@@ -357,6 +357,7 @@ export const useLayers = () => {
 };
 
 export const getMaxDimensionsAcrossLayers = (layers: Layer[]) => {
-  const sprites = layers.flatMap(l => (l.visible ? l.sprites : []));
+  // Consider ALL layers regardless of visibility to keep canvas size stable
+  const sprites = layers.flatMap(l => l.sprites);
   return getMaxDimensionsSingle(sprites);
 };