[FEAT] Add drop event listener for new images

src/App.vue

@@ -103,7 +103,7 @@
             </button>
           </div>
 
-          <sprite-canvas :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" @update-sprite-cell="updateSpriteCell" @remove-sprite="removeSprite" @replace-sprite="replaceSprite" @add-sprite="addSprite" />
+          <sprite-canvas :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" @update-sprite-cell="updateSpriteCell" @remove-sprite="removeSprite" @replace-sprite="replaceSprite" @add-sprite="addSprite" @add-sprite-with-resize="addSpriteWithResize" />
         </div>
       </div>
     </div>
@@ -688,6 +688,79 @@
     img.src = url;
   };
 
+  const addSpriteWithResize = (file: File) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      // Find current max dimensions
+      let maxWidth = 0;
+      let maxHeight = 0;
+      sprites.value.forEach(sprite => {
+        maxWidth = Math.max(maxWidth, sprite.width);
+        maxHeight = Math.max(maxHeight, sprite.height);
+      });
+
+      // Create new sprite
+      const newSprite: Sprite = {
+        id: crypto.randomUUID(),
+        file,
+        img,
+        url,
+        width: img.width,
+        height: img.height,
+        x: 0,
+        y: 0,
+      };
+
+      // Calculate new max dimensions after adding the new sprite
+      const newMaxWidth = Math.max(maxWidth, img.width);
+      const newMaxHeight = Math.max(maxHeight, img.height);
+
+      // Resize existing sprites if the new image is larger
+      if (img.width > maxWidth || img.height > maxHeight) {
+        // Update all existing sprites to center them in the new larger cells
+        sprites.value = sprites.value.map(sprite => {
+          let newX = sprite.x;
+          let newY = sprite.y;
+
+          // Adjust x position if width increased
+          if (img.width > maxWidth) {
+            const widthDiff = newMaxWidth - maxWidth;
+            // Try to keep the sprite in the same relative position
+            const relativeX = maxWidth > 0 ? sprite.x / maxWidth : 0;
+            newX = Math.floor(relativeX * newMaxWidth);
+            // Make sure it doesn't go out of bounds
+            newX = Math.max(0, Math.min(newX, newMaxWidth - sprite.width));
+          }
+
+          // Adjust y position if height increased
+          if (img.height > maxHeight) {
+            const heightDiff = newMaxHeight - maxHeight;
+            const relativeY = maxHeight > 0 ? sprite.y / maxHeight : 0;
+            newY = Math.floor(relativeY * newMaxHeight);
+            newY = Math.max(0, Math.min(newY, newMaxHeight - sprite.height));
+          }
+
+          return { ...sprite, x: newX, y: newY };
+        });
+      }
+
+      // Add the new sprite
+      sprites.value = [...sprites.value, newSprite];
+
+      // Force redraw of the canvas
+      setTimeout(() => {
+        const event = new Event('forceRedraw');
+        window.dispatchEvent(event);
+      }, 0);
+    };
+    img.onerror = () => {
+      console.error('Failed to load new sprite image:', file.name);
+      URL.revokeObjectURL(url);
+    };
+    img.src = url;
+  };
+
   // Download as GIF with specified FPS
   const downloadAsGif = (fps: number) => {
     if (sprites.value.length === 0) {