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

[FEAT] UI enhancements

Browse Source
This commit is contained in:
root
2026-01-01 17:04:40 +01:00
parent 4b270b83e9
commit 281a37fa7e
4 changed files with 82 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/SpriteCanvas.vue
View File

@@ -94,10 +94,10 @@
:key="`cell-${cellIndex - 1}`"
class="absolute"
:style="{
left: `${getCellPosition(cellIndex - 1).x}px`,
top: `${getCellPosition(cellIndex - 1).y}px`,
width: `${gridMetrics.maxWidth}px`,
height: `${gridMetrics.maxHeight}px`,
left: `${Math.round(getCellPosition(cellIndex - 1).x)}px`,
top: `${Math.round(getCellPosition(cellIndex - 1).y)}px`,
width: `${Math.round(gridMetrics.maxWidth)}px`,
height: `${Math.round(gridMetrics.maxHeight)}px`,
backgroundColor: getCellBackground(),
backgroundImage: getCellBackgroundImage(),
backgroundSize: getCellBackgroundSize(),
@@ -119,10 +119,10 @@
:src="sprite.url"
class="absolute pointer-events-none"
:style="{
left: `${getCellPosition(cellIndex - 1).x + gridMetrics.negativeSpacing + sprite.x}px`,
top: `${getCellPosition(cellIndex - 1).y + gridMetrics.negativeSpacing + sprite.y}px`,
width: `${sprite.width}px`,
height: `${sprite.height}px`,
left: `${Math.round(getCellPosition(cellIndex - 1).x + gridMetrics.negativeSpacing + sprite.x)}px`,
top: `${Math.round(getCellPosition(cellIndex - 1).y + gridMetrics.negativeSpacing + sprite.y)}px`,
width: `${Math.round(sprite.width)}px`,
height: `${Math.round(sprite.height)}px`,
opacity: '0.25',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
}"
@@ -143,10 +143,10 @@
class="absolute cursor-move transition-transform duration-200"
:class="{ 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-900': showActiveBorder && selectedSpriteIds.has(sprite.id) }"
:style="{
left: `${getCellPosition(index).x + gridMetrics.negativeSpacing + sprite.x}px`,
top: `${getCellPosition(index).y + gridMetrics.negativeSpacing + sprite.y}px`,
width: `${sprite.width}px`,
height: `${sprite.height}px`,
left: `${Math.round(getCellPosition(index).x + gridMetrics.negativeSpacing + sprite.x)}px`,
top: `${Math.round(getCellPosition(index).y + gridMetrics.negativeSpacing + sprite.y)}px`,
width: `${Math.round(sprite.width)}px`,
height: `${Math.round(sprite.height)}px`,
opacity: layer.id === activeLayerId ? '1' : '0.85',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
transform: `rotate(${sprite.rotation}deg) scale(${sprite.flipX ? -1 : 1}, ${sprite.flipY ? -1 : 1})`,
@@ -165,10 +165,10 @@
:src="activeSpriteSprite?.url"
class="absolute pointer-events-none"
:style="{
left: `${ghostSprite.x}px`,
top: `${ghostSprite.y}px`,
width: `${activeSpriteSprite?.width}px`,
height: `${activeSpriteSprite?.height}px`,
left: `${Math.round(ghostSprite.x)}px`,
top: `${Math.round(ghostSprite.y)}px`,
width: `${Math.round(activeSpriteSprite?.width || 0)}px`,
height: `${Math.round(activeSpriteSprite?.height || 0)}px`,
opacity: '0.6',
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
transform: `rotate(${activeSpriteSprite?.rotation || 0}deg) scale(${activeSpriteSprite?.flipX ? -1 : 1}, ${activeSpriteSprite?.flipY ? -1 : 1})`,
@@ -183,8 +183,8 @@
:key="`label-${position.id}`"
class="absolute text-[23px] leading-none font-mono text-cyan-600 dark:text-cyan-400 bg-white/90 dark:bg-gray-900/90 px-1 py-0.5 rounded-sm pointer-events-none"
:style="{
left: `${position.cellX + position.maxWidth - 2}px`,
top: `${position.cellY + position.maxHeight - 2}px`,
left: `${Math.round(position.cellX + position.maxWidth - 2)}px`,
top: `${Math.round(position.cellY + position.maxHeight - 2)}px`,
transform: 'translate(-100%, -100%)',
}"
>
@@ -329,8 +329,8 @@
const maxLen = Math.max(1, ...props.layers.map(l => l.sprites.length));
const rows = Math.max(1, Math.ceil(maxLen / props.columns));
return {
width: gridMetrics.value.maxWidth * props.columns,
height: gridMetrics.value.maxHeight * rows,
width: Math.round(gridMetrics.value.maxWidth * props.columns),
height: Math.round(gridMetrics.value.maxHeight * rows),
};
});
@@ -338,8 +338,8 @@
const col = index % props.columns;
const row = Math.floor(index / props.columns);
return {
x: col * gridMetrics.value.maxWidth,
y: row * gridMetrics.value.maxHeight,
x: Math.round(col * gridMetrics.value.maxWidth),
y: Math.round(row * gridMetrics.value.maxHeight),
};
};