ye

src/components/PreviewModal.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import { ref, computed, watch, nextTick } from 'vue';
   import BaseModal from './BaseModal.vue';
   import AnimationControls from './AnimationControls.vue';
   import ViewControls from './ViewControls.vue';
@@ -142,6 +142,20 @@
     // Wait for next frame to ensure DOM is updated
     await nextTick();
 
+    // Ensure cell size is valid before proceeding
+    if (!store.cellSize || typeof store.cellSize.width !== 'number' || typeof store.cellSize.height !== 'number' || store.cellSize.width <= 0 || store.cellSize.height <= 0) {
+      // Try to update cell size if there are sprites
+      if (sprites.value.length > 0) {
+        store.updateCellSize();
+        await nextTick();
+      }
+
+      // Check again after update attempt
+      if (!store.cellSize || typeof store.cellSize.width !== 'number' || typeof store.cellSize.height !== 'number' || store.cellSize.width <= 0 || store.cellSize.height <= 0) {
+        store.showNotification('Invalid cell dimensions. Please check sprite sizes.', 'error');
+      }
+    }
+
     // Set proper canvas size before rendering
     updateCanvasSize();
 
@@ -150,9 +164,14 @@
       // Get the current sprite
       const currentSprite = sprites.value[0];
 
-      // Calculate center position
+      // Safely calculate center position with null checks
-      const centerX = Math.max(0, Math.floor((store.cellSize.width - currentSprite.width) / 2));
+      let centerX = 0;
-      const centerY = Math.max(0, Math.floor((store.cellSize.height - currentSprite.height) / 2));
+      let centerY = 0;
+
+      if (store.cellSize && typeof store.cellSize.width === 'number' && typeof store.cellSize.height === 'number') {
+        centerX = Math.max(0, Math.floor((store.cellSize.width - currentSprite.width) / 2));
+        centerY = Math.max(0, Math.floor((store.cellSize.height - currentSprite.height) / 2));
+      }
 
       // Get the frame-specific offset for the first frame
       const frameOffset = store.getSpriteOffset(0);

src/composables/useCanvasInitialization.ts

@@ -2,7 +2,7 @@
 import { ref, nextTick, type Ref } from 'vue';
 import { type CellSize, type AnimationState } from '@/application/types';
 
-export function useCanvasInitialization(animation: Ref<AnimationState>, cellSize: Ref<CellSize>) {
+export function useCanvasInitialization(animation: Ref<AnimationState>, cellSize: CellSize) {
   const animCanvas = ref<HTMLCanvasElement | null>(null);
 
   const initializeCanvas = async (): Promise<boolean> => {
@@ -36,11 +36,18 @@ export function useCanvasInitialization(animation: Ref<AnimationState>, cellSize
       return;
     }
 
-    if (cellSize.value?.width && cellSize.value?.height) {
+    // More robust check for valid cell dimensions
-      animCanvas.value.width = cellSize.value.width;
+    if (cellSize && typeof cellSize.width === 'number' && typeof cellSize.height === 'number' && cellSize.width > 0 && cellSize.height > 0) {
-      animCanvas.value.height = cellSize.value.height;
+      animCanvas.value.width = cellSize.width;
+      animCanvas.value.height = cellSize.height;
     } else {
-      console.warn('PreviewModal: Cannot update canvas size - invalid cell dimensions');
+      console.warn('PreviewModal: Cannot update canvas size - invalid cell dimensions', cellSize ? `width: ${cellSize.width}, height: ${cellSize.height}` : 'cellSize is undefined');
+
+      // Set a default minimum size to prevent rendering errors
+      if (animCanvas.value.width === 0 || animCanvas.value.height === 0) {
+        animCanvas.value.width = animCanvas.value.width || 100;
+        animCanvas.value.height = animCanvas.value.height || 100;
+      }
     }
   };
 

src/composables/useSpritePosition.ts

@@ -33,6 +33,13 @@ export function useSpritePosition(sprites: Ref<Sprite[]>, currentFrame: Ref<numb
     const sprite = sprites.value[currentFrame.value];
     if (!sprite) return;
 
+    // Check if cellSize is properly defined
+    if (!cellSize.value || typeof cellSize.value.width !== 'number' || typeof cellSize.value.height !== 'number') {
+      console.warn('Invalid cell dimensions during position reset');
+      showNotification('Could not reset position - invalid cell dimensions', 'error');
+      return;
+    }
+
     // Calculate center position
     const centerX = Math.max(0, Math.floor((cellSize.value.width - sprite.width) / 2));
     const centerY = Math.max(0, Math.floor((cellSize.value.height - sprite.height) / 2));
@@ -75,6 +82,12 @@ export function useSpritePosition(sprites: Ref<Sprite[]>, currentFrame: Ref<numb
       const sprite = sprites.value[currentFrame.value];
       if (!sprite) return;
 
+      // Check if cellSize is properly defined
+      if (!cellSize.value || typeof cellSize.value.width !== 'number' || typeof cellSize.value.height !== 'number') {
+        console.warn('Invalid cell dimensions during drag operation');
+        return;
+      }
+
       // Calculate delta from last position
       const deltaX = e.clientX - canvasDragStart.value.x;
       const deltaY = e.clientY - canvasDragStart.value.y;