437 lines
14 KiB
TypeScript
437 lines
14 KiB
TypeScript
import { computed, ref, watch } from 'vue';
|
|
import type { Layer, Sprite } from '@/types/sprites';
|
|
import { getMaxDimensions as getMaxDimensionsSingle, useSprites as useSpritesSingle } from './useSprites';
|
|
import { useSettingsStore } from '@/stores/useSettingsStore';
|
|
|
|
export const createEmptyLayer = (name: string): Layer => ({
|
|
id: crypto.randomUUID(),
|
|
name,
|
|
sprites: [],
|
|
visible: true,
|
|
locked: false,
|
|
});
|
|
|
|
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();
|
|
|
|
watch(columns, val => {
|
|
const num = typeof val === 'number' ? val : parseInt(String(val));
|
|
const safe = Number.isFinite(num) && num >= 1 ? Math.min(num, 10) : 1;
|
|
if (safe !== columns.value) columns.value = safe;
|
|
});
|
|
|
|
const activeLayer = computed(() => layers.value.find(l => l.id === activeLayerId.value) || layers.value[0]);
|
|
|
|
const getMaxDimensions = (sprites: Sprite[]) => getMaxDimensionsSingle(sprites);
|
|
|
|
const visibleLayers = computed(() => layers.value.filter(l => l.visible));
|
|
|
|
const hasSprites = computed(() => layers.value.some(l => l.sprites.length > 0));
|
|
|
|
const updateSpritePosition = (id: string, x: number, y: number) => {
|
|
const l = activeLayer.value;
|
|
if (!l) return;
|
|
const i = l.sprites.findIndex(s => s.id === id);
|
|
if (i !== -1) {
|
|
l.sprites[i].x = Math.floor(x);
|
|
l.sprites[i].y = Math.floor(y);
|
|
}
|
|
};
|
|
|
|
const updateSpriteInLayer = (layerId: string, spriteId: string, x: number, y: number) => {
|
|
const l = layers.value.find(layer => layer.id === layerId);
|
|
if (!l) return;
|
|
const i = l.sprites.findIndex(s => s.id === spriteId);
|
|
if (i !== -1) {
|
|
l.sprites[i].x = Math.floor(x);
|
|
l.sprites[i].y = Math.floor(y);
|
|
}
|
|
};
|
|
|
|
const alignSprites = (position: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
|
|
const l = activeLayer.value;
|
|
if (!l || !l.sprites.length) return;
|
|
|
|
// Determine the cell dimensions to align within
|
|
let cellWidth: number;
|
|
let cellHeight: number;
|
|
|
|
if (settingsStore.manualCellSizeEnabled) {
|
|
// Use manual cell size (without negative spacing)
|
|
cellWidth = settingsStore.manualCellWidth;
|
|
cellHeight = settingsStore.manualCellHeight;
|
|
} else {
|
|
// Use auto-calculated dimensions based on ALL visible layers (not just active layer)
|
|
const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers.value);
|
|
cellWidth = maxWidth;
|
|
cellHeight = maxHeight;
|
|
}
|
|
|
|
l.sprites = l.sprites.map(sprite => {
|
|
let x = sprite.x;
|
|
let y = sprite.y;
|
|
switch (position) {
|
|
case 'left':
|
|
x = 0;
|
|
break;
|
|
case 'center':
|
|
x = Math.floor((cellWidth - sprite.width) / 2);
|
|
break;
|
|
case 'right':
|
|
x = Math.floor(cellWidth - sprite.width);
|
|
break;
|
|
case 'top':
|
|
y = 0;
|
|
break;
|
|
case 'middle':
|
|
y = Math.floor((cellHeight - sprite.height) / 2);
|
|
break;
|
|
case 'bottom':
|
|
y = Math.floor(cellHeight - sprite.height);
|
|
break;
|
|
}
|
|
return { ...sprite, x: Math.floor(x), y: Math.floor(y) };
|
|
});
|
|
};
|
|
|
|
const updateSpriteCell = (id: string, newIndex: number) => {
|
|
const l = activeLayer.value;
|
|
if (!l) return;
|
|
const currentIndex = l.sprites.findIndex(s => s.id === id);
|
|
if (currentIndex === -1 || currentIndex === newIndex) return;
|
|
|
|
const next = [...l.sprites];
|
|
|
|
// 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;
|
|
}
|
|
};
|
|
|
|
const removeSprite = (id: string) => {
|
|
const l = activeLayer.value;
|
|
if (!l) return;
|
|
const i = l.sprites.findIndex(s => s.id === id);
|
|
if (i === -1) return;
|
|
const s = l.sprites[i];
|
|
if (s.url && s.url.startsWith('blob:')) {
|
|
try {
|
|
URL.revokeObjectURL(s.url);
|
|
} catch {}
|
|
}
|
|
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;
|
|
const i = l.sprites.findIndex(s => s.id === id);
|
|
if (i === -1) return;
|
|
const old = l.sprites[i];
|
|
if (old.url && old.url.startsWith('blob:')) {
|
|
try {
|
|
URL.revokeObjectURL(old.url);
|
|
} catch {}
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
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, rotation: old.rotation, flipX: old.flipX || false, flipY: old.flipY || false };
|
|
};
|
|
img.onerror = () => {
|
|
console.error('Failed to load replacement image:', file.name);
|
|
};
|
|
img.src = url;
|
|
};
|
|
reader.onerror = () => {
|
|
console.error('Failed to read replacement image file:', file.name);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const addSprite = (file: File, index?: number) => {
|
|
const l = activeLayer.value;
|
|
if (!l) return;
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
const url = e.target?.result as string;
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const next: Sprite = {
|
|
id: crypto.randomUUID(),
|
|
file,
|
|
img,
|
|
url,
|
|
width: img.width,
|
|
height: img.height,
|
|
x: 0,
|
|
y: 0,
|
|
rotation: 0,
|
|
flipX: false,
|
|
flipY: false,
|
|
};
|
|
|
|
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);
|
|
};
|
|
img.src = url;
|
|
};
|
|
reader.onerror = () => {
|
|
console.error('Failed to read sprite image file:', file.name);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const processImageFiles = async (files: File[]) => {
|
|
for (const f of files) addSprite(f);
|
|
};
|
|
|
|
const addLayer = (name?: string) => {
|
|
const l = createEmptyLayer(name || `Layer ${layers.value.length + 1}`);
|
|
layers.value.push(l);
|
|
activeLayerId.value = l.id;
|
|
};
|
|
|
|
const removeLayer = (id: string) => {
|
|
if (layers.value.length === 1) return;
|
|
const idx = layers.value.findIndex(l => l.id === id);
|
|
if (idx === -1) return;
|
|
layers.value.splice(idx, 1);
|
|
if (activeLayerId.value === id) activeLayerId.value = layers.value[0].id;
|
|
};
|
|
|
|
const moveLayer = (id: string, direction: 'up' | 'down') => {
|
|
const idx = layers.value.findIndex(l => l.id === id);
|
|
if (idx === -1) return;
|
|
if (direction === 'up' && idx > 0) {
|
|
const [l] = layers.value.splice(idx, 1);
|
|
layers.value.splice(idx - 1, 0, l);
|
|
}
|
|
if (direction === 'down' && idx < layers.value.length - 1) {
|
|
const [l] = layers.value.splice(idx, 1);
|
|
layers.value.splice(idx + 1, 0, l);
|
|
}
|
|
};
|
|
|
|
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(createEmptySprite());
|
|
}
|
|
|
|
// 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,
|
|
activeLayerId,
|
|
activeLayer,
|
|
columns,
|
|
getMaxDimensions,
|
|
updateSpritePosition,
|
|
updateSpriteInLayer,
|
|
updateSpriteCell,
|
|
removeSprite,
|
|
removeSprites,
|
|
rotateSprite,
|
|
flipSprite,
|
|
replaceSprite,
|
|
addSprite,
|
|
processImageFiles,
|
|
alignSprites,
|
|
addLayer,
|
|
removeLayer,
|
|
moveLayer,
|
|
copySpriteToFrame,
|
|
hasSprites,
|
|
};
|
|
};
|
|
|
|
export const getMaxDimensionsAcrossLayers = (layers: Layer[], visibleOnly: boolean = false) => {
|
|
// When visibleOnly is false (default), consider ALL layers to keep canvas size stable
|
|
// When visibleOnly is true (export), only consider visible layers
|
|
const sprites = layers.flatMap(l => (visibleOnly ? (l.visible ? l.sprites : []) : l.sprites));
|
|
return getMaxDimensionsSingle(sprites);
|
|
};
|