[FEAT] Format code

src/composables/useLayers.ts

@@ -15,6 +15,20 @@ const layers = ref<Layer[]>([createEmptyLayer('Base')]);
 const activeLayerId = ref<string>(layers.value[0].id);
 const columns = ref(4);
 
+const createEmptySprite = (): Sprite => ({
+  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,
+});
+
 export const useLayers = () => {
   const settingsStore = useSettingsStore();
 
@@ -103,17 +117,66 @@ export const useLayers = () => {
     if (!l) return;
     const currentIndex = l.sprites.findIndex(s => s.id === id);
     if (currentIndex === -1 || currentIndex === newIndex) return;
+
     const next = [...l.sprites];
-    if (newIndex < next.length) {
-      const moving = { ...next[currentIndex] };
-      const target = { ...next[newIndex] };
-      next[currentIndex] = target;
-      next[newIndex] = moving;
-    } else {
-      const [moved] = next.splice(currentIndex, 1);
-      next.splice(newIndex, 0, moved);
+
+    // Remove the moving sprite first
+    const [moving] = next.splice(currentIndex, 1);
+
+    // Determine the actual index to insert at, considering we removed one item
+    // If the target index was greater than current index, it shifts down by 1 in the original array perspective?
+    // Actually simpler: we just want to put 'moving' at 'newIndex' in the final array.
+
+    // If newIndex is beyond the current bounds (after removal), fill with placeholders
+    while (next.length < newIndex) {
+      next.push(createEmptySprite());
+    }
+
+    // Now insert
+    // If newIndex is within bounds, we might be swapping if there was something there
+    // But the DragSprite logic implies we are "moving to this cell".
+    // If there is existing content at newIndex, we should swap or splice?
+    // The previous implementation did a swap if newIndex < length (before removal).
+
+    // Let's stick to the "swap" logic if there's a sprite there, or "move" if we are reordering.
+    // Wait, Drag and Drop usually implies "insert here" or "swap with this".
+    // useDragSprite says: "if allowCellSwap... updateSpriteCell".
+
+    // The original logic:
+    // if (newIndex < next.length) -> swap
+    // else -> splice (move)
+
+    // Re-evaluating original logic:
+    // next has NOT had the item removed yet in the original logic 'if' block.
+
+    // Let's implement robust swap/move logic.
+    // 1. If target is empty placeholder -> just move there (replace placeholder).
+    // 2. If target has sprite -> swap.
+    // 3. If target is out of bounds -> pad and move.
+
+    if (newIndex < l.sprites.length) {
+      // Perform Swap
+      const target = l.sprites[newIndex];
+      const moving = l.sprites[currentIndex];
+
+      // Clone array
+      const newSprites = [...l.sprites];
+      newSprites[currentIndex] = target;
+      newSprites[newIndex] = moving;
+      l.sprites = newSprites;
+    } else {
+      // Move to previously empty/non-existent cell
+      const newSprites = [...l.sprites];
+      // Remove from old pos
+      const [moved] = newSprites.splice(currentIndex, 1);
+      // Pad
+      while (newSprites.length < newIndex) {
+        newSprites.push(createEmptySprite());
+      }
+      // Insert (or push if equal length)
+      newSprites.splice(newIndex, 0, moved);
+      l.sprites = newSprites;
     }
-    l.sprites = next;
   };
 
   const removeSprite = (id: string) => {
@@ -203,7 +266,7 @@ export const useLayers = () => {
     reader.readAsDataURL(file);
   };
 
-  const addSprite = (file: File) => {
+  const addSprite = (file: File, index?: number) => {
     const l = activeLayer.value;
     if (!l) return;
     const reader = new FileReader();
@@ -224,7 +287,28 @@ export const useLayers = () => {
           flipX: false,
           flipY: false,
         };
-        l.sprites = [...l.sprites, next];
+
+        const currentSprites = [...l.sprites];
+
+        if (typeof index === 'number') {
+          // If index is provided, insert there (padding if needed)
+          while (currentSprites.length < index) {
+            currentSprites.push(createEmptySprite());
+          }
+          // If valid index, replace if empty or splice?
+          // "Adds it not in the one I selected".
+          // If I select a cell, I expect it to go there.
+          // If the cell is empty (placeholder), replace it.
+          // If the cell has a sprite, maybe insert/shift?
+          // Usually "Add" implies append, but context menu "Add sprite" on a cell implies "Put it here".
+          // Let's Insert (Shift others) for safety, or check if empty.
+          // But simpler: just splice it in.
+          currentSprites.splice(index, 0, next);
+        } else {
+          // No index, append to end
+          currentSprites.push(next);
+        }
+        l.sprites = currentSprites;
       };
       img.onerror = () => {
         console.error('Failed to load sprite image:', file.name);
@@ -299,19 +383,7 @@ export const useLayers = () => {
 
     // 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,
-      });
+      targetLayer.sprites.push(createEmptySprite());
     }
 
     // Replace or insert the sprite at the target index