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

This commit is contained in:
2025-12-17 21:08:43 +01:00
parent 3aa01dd044
commit 6fe90c6af9
10 changed files with 449 additions and 193 deletions

View File

@@ -41,6 +41,7 @@
height: `${layer.sprites[i - 1].height}px`,
opacity: '0.3',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
transform: `rotate(${layer.sprites[i - 1].rotation || 0}deg) scale(${layer.sprites[i - 1].flipX ? -1 : 1}, ${layer.sprites[i - 1].flipY ? -1 : 1})`,
}"
draggable="false"
/>
@@ -62,6 +63,7 @@
width: `${layer.sprites[currentFrameIndex].width}px`,
height: `${layer.sprites[currentFrameIndex].height}px`,
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
transform: `rotate(${layer.sprites[currentFrameIndex].rotation || 0}deg) scale(${layer.sprites[currentFrameIndex].flipX ? -1 : 1}, ${layer.sprites[currentFrameIndex].flipY ? -1 : 1})`,
}"
@mousedown="startDrag($event, layer.sprites[currentFrameIndex], layer.id)"
@touchstart="handleTouchStart($event, layer.sprites[currentFrameIndex], layer.id)"
@@ -213,7 +215,7 @@
@change="toggleHiddenFrame(index)"
/>
<div class="w-8 h-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded flex items-center justify-center overflow-hidden flex-shrink-0 shadow-sm">
<img :src="sprite.url" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
<img :src="sprite.url" class="max-w-full max-h-full object-contain" :style="{ ...(settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}), transform: `rotate(${sprite.rotation || 0}deg) scale(${sprite.flipX ? -1 : 1}, ${sprite.flipY ? -1 : 1})` }" />
</div>
<span class="text-xs font-mono text-gray-600 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100">Frame {{ index + 1 }}</span>
</div>