[FEAT] Move sprite with arrow in preview, UI enhancement btns

src/composables/useLayers.ts

@@ -268,6 +268,68 @@ export const useLayers = () => {
     }
   };
 
+  const copySpriteToFrame = (spriteId: string, targetLayerId: string, targetFrameIndex: number) => {
+    // Find the source sprite in any layer
+    let sourceSprite: Sprite | undefined;
+    for (const layer of layers.value) {
+      sourceSprite = layer.sprites.find(s => s.id === spriteId);
+      if (sourceSprite) break;
+    }
+
+    if (!sourceSprite) return;
+
+    // Find target layer
+    const targetLayer = layers.value.find(l => l.id === targetLayerId);
+    if (!targetLayer) return;
+
+    // Create a deep copy of the sprite with a new ID
+    const copiedSprite: Sprite = {
+      id: crypto.randomUUID(),
+      file: sourceSprite.file,
+      img: sourceSprite.img,
+      url: sourceSprite.url,
+      width: sourceSprite.width,
+      height: sourceSprite.height,
+      x: sourceSprite.x,
+      y: sourceSprite.y,
+      rotation: sourceSprite.rotation,
+      flipX: sourceSprite.flipX,
+      flipY: sourceSprite.flipY,
+    };
+
+    // Expand the sprites array if necessary with empty placeholder sprites
+    while (targetLayer.sprites.length < targetFrameIndex) {
+      targetLayer.sprites.push({
+        id: crypto.randomUUID(),
+        file: new File([], 'empty'),
+        img: new Image(),
+        url: '',
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+        rotation: 0,
+        flipX: false,
+        flipY: false,
+      });
+    }
+
+    // Replace or insert the sprite at the target index
+    if (targetFrameIndex < targetLayer.sprites.length) {
+      // Replace existing sprite at this frame
+      const old = targetLayer.sprites[targetFrameIndex];
+      if (old.url && old.url.startsWith('blob:')) {
+        try {
+          URL.revokeObjectURL(old.url);
+        } catch {}
+      }
+      targetLayer.sprites[targetFrameIndex] = copiedSprite;
+    } else {
+      // Add at the end
+      targetLayer.sprites.push(copiedSprite);
+    }
+  };
+
   return {
     layers,
     visibleLayers,
@@ -289,6 +351,7 @@ export const useLayers = () => {
     addLayer,
     removeLayer,
     moveLayer,
+    copySpriteToFrame,
     hasSprites,
   };
 };