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';
-
+  import type { Sprite } from '@/types/sprites';
-  interface Sprite {
+  import { getMaxDimensions } from '@/composables/useSprites';
-    id: string;
-    img: HTMLImageElement;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-  }
 
   interface CellPosition {
     col: number;
@@ -188,24 +181,12 @@
   const lastMaxHeight = ref(1);
 
   const calculateMaxDimensions = () => {
-    let maxWidth = 0;
+    // Use shared utility for max dimensions, then apply local caching to avoid visual collapse
-    let maxHeight = 0;
+    const base = getMaxDimensions(props.sprites);
-
+    const maxWidth = Math.max(1, base.maxWidth, lastMaxWidth.value);
-    props.sprites.forEach(sprite => {
+    const maxHeight = Math.max(1, base.maxHeight, lastMaxHeight.value);
-      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);
-
     lastMaxWidth.value = maxWidth;
     lastMaxHeight.value = maxHeight;
-
     return { maxWidth, maxHeight };
   };
 

src/components/SpritePreview.vue

@@ -159,15 +159,8 @@
 <script setup lang="ts">
   import { ref, onMounted, watch, onUnmounted, computed } from 'vue';
   import { useSettingsStore } from '@/stores/useSettingsStore';
-
+  import type { Sprite } from '@/types/sprites';
-  interface Sprite {
+  import { getMaxDimensions } from '@/composables/useSprites';
-    id: string;
-    img: HTMLImageElement;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-  }
 
   const props = defineProps<{
     sprites: Sprite[];
@@ -213,17 +206,6 @@
   const visibleFrameNumber = computed(() => visibleFrameIndex.value + 1);
 
   // Canvas drawing
-  const calculateMaxDimensions = () => {
-    let maxWidth = 0;
-    let maxHeight = 0;
-
-    props.sprites.forEach(sprite => {
-      maxWidth = Math.max(maxWidth, sprite.width);
-      maxHeight = Math.max(maxHeight, sprite.height);
-    });
-
-    return { maxWidth, maxHeight };
-  };
 
   const drawPreviewCanvas = () => {
     if (!previewCanvasRef.value || !ctx.value || props.sprites.length === 0) return;
@@ -231,7 +213,7 @@
     const currentSprite = props.sprites[currentFrameIndex.value];
     if (!currentSprite) return;
 
-    const { maxWidth, maxHeight } = calculateMaxDimensions();
+    const { maxWidth, maxHeight } = getMaxDimensions(props.sprites);
 
     // Apply pixel art optimization consistently from store
     ctx.value.imageSmoothingEnabled = !settingsStore.pixelPerfect;
@@ -371,7 +353,7 @@
     const sprite = props.sprites[currentFrameIndex.value];
     if (!sprite || sprite.id !== activeSpriteId.value) return;
 
-    const { maxWidth, maxHeight } = calculateMaxDimensions();
+    const { maxWidth, maxHeight } = getMaxDimensions(props.sprites);
 
     // Calculate new position with constraints and round to integers
     let newX = Math.round(spritePosBeforeDrag.value.x + deltaX);

src/components/SpritesheetSplitter.vue

@@ -96,6 +96,7 @@
   import { ref, watch, onUnmounted } from 'vue';
   import Modal from './utilities/Modal.vue';
   import { useSettingsStore } from '@/stores/useSettingsStore';
+  import type { SpriteFile } from '@/types/sprites';
 
   interface SpritePreview {
     url: string;
@@ -117,14 +118,6 @@
     (e: 'split', sprites: SpriteFile[]): void; // Change from File[] to SpriteFile[]
   }>();
 
-  interface SpriteFile {
-    file: File;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  }
-
   // Get settings from store
   const settingsStore = useSettingsStore();