Debug

src/components/DropZone.vue

@@ -47,7 +47,9 @@
   };
 
   const handleFiles = async (files: FileList) => {
+    console.log('Handling files:', files.length);
     const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
+    console.log('Image files filtered:', imageFiles.length);
 
     if (imageFiles.length === 0) {
       store.showNotification('Please upload image files only', 'error');
@@ -55,21 +57,30 @@
     }
 
     const newSprites: Sprite[] = [];
+    let errorCount = 0;
 
     for (let i = 0; i < imageFiles.length; i++) {
       const file = imageFiles[i];
+      console.log(`Processing file ${i+1}/${imageFiles.length}:`, file.name, file.type, file.size);
+
       try {
         const sprite = await createSpriteFromFile(file, i);
         newSprites.push(sprite);
+        console.log(`Successfully processed ${file.name}`);
       } catch (error) {
+        errorCount++;
         console.error('Error loading sprite:', error);
+        store.showNotification(`Failed to load ${file.name}`, 'error');
       }
     }
 
     if (newSprites.length > 0) {
+      console.log('Adding sprites to store:', newSprites.length);
       store.addSprites(newSprites);
       emit('files-uploaded', newSprites);
       store.showNotification(`Added ${newSprites.length} sprites successfully`);
+    } else if (errorCount > 0) {
+      store.showNotification(`Failed to load all ${errorCount} sprites`, 'error');
     }
   };
 
@@ -78,9 +89,26 @@
       const reader = new FileReader();
 
       reader.onload = e => {
+        if (!e.target?.result) {
+          console.error('Failed to read file:', file.name);
+          reject(new Error(`Failed to read file: ${file.name}`));
+          return;
+        }
+
         const img = new Image();
 
+        // Set crossOrigin to anonymous to handle CORS issues
+        img.crossOrigin = 'anonymous';
+
         img.onload = () => {
+          // Verify the image has loaded properly
+          if (img.width === 0 || img.height === 0) {
+            console.error('Image loaded with invalid dimensions:', file.name, img.width, img.height);
+            reject(new Error(`Image has invalid dimensions: ${file.name}`));
+            return;
+          }
+
+          console.log('Sprite created successfully:', file.name, img.width, img.height);
           resolve({
             img,
             width: img.width,
@@ -93,11 +121,20 @@
           });
         };
 
-        img.onerror = reject;
+        img.onerror = (error) => {
-        img.src = e.target?.result as string;
+          console.error('Error loading image:', file.name, error);
+          reject(new Error(`Failed to load image: ${file.name}`));
+        };
+
+        // Set the source after setting up event handlers
+        img.src = e.target.result as string;
+      };
+
+      reader.onerror = (error) => {
+        console.error('Error reading file:', file.name, error);
+        reject(new Error(`Error reading file: ${file.name}`));
       };
 
-      reader.onerror = reject;
       reader.readAsDataURL(file);
     });
   };

src/composables/useSpritesheetStore.ts

@@ -58,42 +58,118 @@ export function useSpritesheetStore() {
   });
 
   function addSprites(newSprites: Sprite[]) {
-    sprites.value.push(...newSprites);
+    console.log('Store: Adding sprites', newSprites.length);
+    if (newSprites.length === 0) {
+      console.warn('Store: Attempted to add empty sprites array');
+      return;
+    }
+
+    try {
+      // Validate sprites before adding them
+      const validSprites = newSprites.filter(sprite => {
+        if (!sprite.img || sprite.width <= 0 || sprite.height <= 0) {
+          console.error('Store: Invalid sprite detected', sprite);
+          return false;
+        }
+        return true;
+      });
+
+      if (validSprites.length === 0) {
+        console.error('Store: No valid sprites to add');
+        return;
+      }
+
+      console.log('Store: Adding valid sprites', validSprites.length);
+      sprites.value.push(...validSprites);
       sprites.value.sort((a, b) => a.uploadOrder - b.uploadOrder);
       updateCellSize();
       autoArrangeSprites();
+      console.log('Store: Sprites added successfully, total count:', sprites.value.length);
+    } catch (error) {
+      console.error('Store: Error adding sprites:', error);
+    }
   }
 
   function updateCellSize() {
-    if (sprites.value.length === 0) return;
+    console.log('Store: Updating cell size');
+    if (sprites.value.length === 0) {
+      console.log('Store: No sprites to update cell size');
+      return;
+    }
 
+    try {
       let maxWidth = 0;
       let maxHeight = 0;
 
       sprites.value.forEach(sprite => {
+        if (sprite.width <= 0 || sprite.height <= 0) {
+          console.warn('Store: Sprite with invalid dimensions detected', sprite);
+          return;
+        }
         maxWidth = Math.max(maxWidth, sprite.width);
         maxHeight = Math.max(maxHeight, sprite.height);
       });
 
+      if (maxWidth === 0 || maxHeight === 0) {
+        console.error('Store: Failed to calculate valid cell size');
+        return;
+      }
+
+      console.log('Store: Cell size calculated', maxWidth, maxHeight);
       cellSize.width = maxWidth;
       cellSize.height = maxHeight;
 
       updateCanvasSize();
+    } catch (error) {
+      console.error('Store: Error updating cell size:', error);
+    }
   }
 
   function updateCanvasSize() {
-    if (!canvas.value || sprites.value.length === 0) return;
+    console.log('Store: Updating canvas size');
+    if (!canvas.value) {
+      console.error('Store: Canvas not available for size update');
+      return;
+    }
 
+    if (sprites.value.length === 0) {
+      console.log('Store: No sprites to determine canvas size');
+      return;
+    }
+
+    try {
       const totalSprites = sprites.value.length;
       const cols = columns.value;
       const rows = Math.ceil(totalSprites / cols);
 
-    canvas.value.width = cols * cellSize.width;
+      if (cellSize.width <= 0 || cellSize.height <= 0) {
-    canvas.value.height = rows * cellSize.height;
+        console.error('Store: Invalid cell size for canvas update', cellSize);
+        return;
+      }
+
+      const newWidth = cols * cellSize.width;
+      const newHeight = rows * cellSize.height;
+
+      console.log('Store: Setting canvas size to', newWidth, newHeight);
+      canvas.value.width = newWidth;
+      canvas.value.height = newHeight;
+    } catch (error) {
+      console.error('Store: Error updating canvas size:', error);
+    }
   }
 
   function autoArrangeSprites() {
-    if (sprites.value.length === 0) return;
+    console.log('Store: Auto-arranging sprites');
+    if (sprites.value.length === 0) {
+      console.log('Store: No sprites to arrange');
+      return;
+    }
+
+    try {
+      if (cellSize.width <= 0 || cellSize.height <= 0) {
+        console.error('Store: Invalid cell size for auto-arranging', cellSize);
+        return;
+      }
 
       sprites.value.forEach((sprite, index) => {
         const column = index % columns.value;
@@ -101,6 +177,7 @@ export function useSpritesheetStore() {
 
         sprite.x = column * cellSize.width;
         sprite.y = row * cellSize.height;
+        console.log(`Store: Positioned sprite ${index} at (${sprite.x}, ${sprite.y})`);
       });
 
       renderSpritesheetPreview();
@@ -108,20 +185,47 @@ export function useSpritesheetStore() {
       if (!animation.isPlaying && animation.manualUpdate && isModalOpen.value) {
         renderAnimationFrame(animation.currentFrame);
       }
+
+      console.log('Store: Sprites arranged successfully');
+    } catch (error) {
+      console.error('Store: Error auto-arranging sprites:', error);
+    }
   }
 
   function renderSpritesheetPreview(showGrid = true) {
-    if (!ctx.value || !canvas.value || sprites.value.length === 0) return;
+    console.log('Store: Rendering spritesheet preview');
+    if (!ctx.value || !canvas.value) {
+      console.error('Store: Canvas or context not available for rendering');
+      return;
+    }
 
+    if (sprites.value.length === 0) {
+      console.log('Store: No sprites to render');
+      return;
+    }
+
+    try {
       ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
 
       if (showGrid) {
         drawGrid();
       }
 
-    sprites.value.forEach(sprite => {
+      sprites.value.forEach((sprite, index) => {
+        try {
+          if (!sprite.img || sprite.img.width === 0 || sprite.img.height === 0) {
+            console.warn(`Store: Invalid sprite at index ${index}, skipping render`);
+            return;
+          }
           ctx.value!.drawImage(sprite.img, sprite.x, sprite.y);
+        } catch (spriteError) {
+          console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);
+        }
       });
+      console.log('Store: Spritesheet preview rendered successfully');
+    } catch (error) {
+      console.error('Store: Error rendering spritesheet preview:', error);
+    }
   }
 
   function drawGrid() {