[FEAT] Multi select, flip, rotate, multi remove

src/composables/useLayers.ts

@@ -130,6 +130,49 @@ export const useLayers = () => {
     l.sprites.splice(i, 1);
   };
 
+  const removeSprites = (ids: string[]) => {
+    const l = activeLayer.value;
+    if (!l) return;
+
+    // Sort indices in descending order to avoid shift issues when splicing
+    const indicesToRemove: number[] = [];
+    ids.forEach(id => {
+      const i = l.sprites.findIndex(s => s.id === id);
+      if (i !== -1) indicesToRemove.push(i);
+    });
+
+    indicesToRemove.sort((a, b) => b - a);
+
+    indicesToRemove.forEach(i => {
+      const s = l.sprites[i];
+      if (s.url && s.url.startsWith('blob:')) {
+        try {
+          URL.revokeObjectURL(s.url);
+        } catch {}
+      }
+      l.sprites.splice(i, 1);
+    });
+  };
+
+  const rotateSprite = (id: string, angle: number) => {
+    const l = activeLayer.value;
+    if (!l) return;
+    const s = l.sprites.find(s => s.id === id);
+    if (s) {
+      s.rotation = (s.rotation + angle) % 360;
+    }
+  };
+
+  const flipSprite = (id: string, direction: 'horizontal' | 'vertical') => {
+    const l = activeLayer.value;
+    if (!l) return;
+    const s = l.sprites.find(s => s.id === id);
+    if (s) {
+      if (direction === 'horizontal') s.flipX = !s.flipX;
+      if (direction === 'vertical') s.flipY = !s.flipY;
+    }
+  };
+
   const replaceSprite = (id: string, file: File) => {
     const l = activeLayer.value;
     if (!l) return;
@@ -147,7 +190,7 @@ export const useLayers = () => {
       const url = e.target?.result as string;
       const img = new Image();
       img.onload = () => {
-        l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y };
+        l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y, rotation: old.rotation, flipX: old.flipX || false, flipY: old.flipY || false };
       };
       img.onerror = () => {
         console.error('Failed to load replacement image:', file.name);
@@ -177,6 +220,9 @@ export const useLayers = () => {
           height: img.height,
           x: 0,
           y: 0,
+          rotation: 0,
+          flipX: false,
+          flipY: false,
         };
         l.sprites = [...l.sprites, next];
       };
@@ -233,6 +279,9 @@ export const useLayers = () => {
     updateSpriteInLayer,
     updateSpriteCell,
     removeSprite,
+    removeSprites,
+    rotateSprite,
+    flipSprite,
     replaceSprite,
     addSprite,
     processImageFiles,