Reused logic from earlier made composables

src/components/SpriteCanvas.vue

@@ -97,15 +97,8 @@
 <script setup lang="ts">
   import { ref, onMounted, watch, computed, onUnmounted } from 'vue';
   import { useSettingsStore } from '@/stores/useSettingsStore';
-
-  interface Sprite {
-    id: string;
-    img: HTMLImageElement;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-  }
+  import type { Sprite } from '@/types/sprites';
+  import { getMaxDimensions } from '@/composables/useSprites';
 
   interface CellPosition {
     col: number;
@@ -188,24 +181,12 @@
   const lastMaxHeight = ref(1);
 
   const calculateMaxDimensions = () => {
-    let maxWidth = 0;
-    let maxHeight = 0;
-
-    props.sprites.forEach(sprite => {
-      const img = sprite.img as HTMLImageElement | undefined;
-      const w = Math.max(0, sprite.width || (img ? img.naturalWidth || img.width || 0 : 0));
-      const h = Math.max(0, sprite.height || (img ? img.naturalHeight || img.height || 0 : 0));
-      maxWidth = Math.max(maxWidth, w);
-      maxHeight = Math.max(maxHeight, h);
-    });
-
-    // Keep dimensions at least as large as last known to prevent temporary collapse during loading
-    maxWidth = Math.max(1, maxWidth, lastMaxWidth.value);
-    maxHeight = Math.max(1, maxHeight, lastMaxHeight.value);
-
+    // Use shared utility for max dimensions, then apply local caching to avoid visual collapse
+    const base = getMaxDimensions(props.sprites);
+    const maxWidth = Math.max(1, base.maxWidth, lastMaxWidth.value);
+    const maxHeight = Math.max(1, base.maxHeight, lastMaxHeight.value);
     lastMaxWidth.value = maxWidth;
     lastMaxHeight.value = maxHeight;
-
     return { maxWidth, maxHeight };
   };