root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
root
2025-12-17 21:08:43 +01:00
parent 3aa01dd044
commit 6fe90c6af9
10 changed files with 449 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/composables/useExportLayers.ts
View File

@@ -42,7 +42,19 @@ export const useExportLayers = (layersRef: Ref<Layer[]>, columns: Ref<number>, n
vLayers.forEach(layer => {
const sprite = layer.sprites[cellIndex];
if (!sprite) return;
ctx.drawImage(sprite.img, Math.floor(negativeSpacing + sprite.x), Math.floor(negativeSpacing + sprite.y));
if (sprite.rotation || sprite.flipX || sprite.flipY) {
ctx.save();
const centerX = Math.floor(negativeSpacing + sprite.x + sprite.width / 2);
const centerY = Math.floor(negativeSpacing + sprite.y + sprite.height / 2);
ctx.translate(centerX, centerY);
ctx.rotate((sprite.rotation * Math.PI) / 180);
ctx.scale(sprite.flipX ? -1 : 1, sprite.flipY ? -1 : 1);
ctx.drawImage(sprite.img, -sprite.width / 2, -sprite.height / 2);
ctx.restore();
} else {
ctx.drawImage(sprite.img, Math.floor(negativeSpacing + sprite.x), Math.floor(negativeSpacing + sprite.y));
}
});
};
@@ -110,7 +122,7 @@ export const useExportLayers = (layersRef: Ref<Layer[]>, columns: Ref<number>, n
canvas.height = sprite.height;
ctx.drawImage(sprite.img, 0, 0);
const base64 = canvas.toDataURL('image/png');
return { id: sprite.id, width: sprite.width, height: sprite.height, x: sprite.x, y: sprite.y, base64, name: sprite.file.name };
return { id: sprite.id, width: sprite.width, height: sprite.height, x: sprite.x, y: sprite.y, rotation: sprite.rotation, flipX: sprite.flipX, flipY: sprite.flipY, base64, name: sprite.file.name };
})
);
return { id: layer.id, name: layer.name, visible: layer.visible, locked: layer.locked, sprites: sprites.filter(Boolean) };
@@ -153,7 +165,7 @@ export const useExportLayers = (layersRef: Ref<Layer[]>, columns: Ref<number>, n
const blob = new Blob([ab], { type: mimeType });
const fileName = spriteData.name || `sprite-${spriteData.id}.png`;
const file = new File([blob], fileName, { type: mimeType });
resolve({ id: spriteData.id || crypto.randomUUID(), file, img, url: spriteData.base64, width: spriteData.width, height: spriteData.height, x: spriteData.x || 0, y: spriteData.y || 0 });
resolve({ id: spriteData.id || crypto.randomUUID(), file, img, url: spriteData.base64, width: spriteData.width, height: spriteData.height, x: spriteData.x || 0, y: spriteData.y || 0, rotation: spriteData.rotation || 0, flipX: spriteData.flipX || false, flipY: spriteData.flipY || false });
};
img.src = spriteData.base64;
});
@@ -273,7 +285,7 @@ export const useExportLayers = (layersRef: Ref<Layer[]>, columns: Ref<number>, n
name: layer.name,
visible: layer.visible,
locked: layer.locked,
sprites: await Promise.all(layer.sprites.map(async s => ({ id: s.id, width: s.width, height: s.height, x: s.x, y: s.y, name: s.file.name }))),
sprites: await Promise.all(layer.sprites.map(async s => ({ id: s.id, width: s.width, height: s.height, x: s.x, y: s.y, rotation: s.rotation, flipX: s.flipX, flipY: s.flipY, name: s.file.name }))),
}))
);
const meta = {