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),
};
};

28
src/components/SpritePreview.vue
View File

@@ -72,7 +72,7 @@
transformOrigin: 'top left',
width: `${cellDimensions.cellWidth}px`,
height: `${cellDimensions.cellHeight}px`,
backgroundColor: '#f9fafb',
backgroundColor: settingsStore.backgroundColor === 'transparent' ? '#f9fafb' : settingsStore.backgroundColor,
backgroundImage: getPreviewBackgroundImage(),
backgroundSize: settingsStore.backgroundColor === 'transparent' ? '20px 20px' : 'auto',
backgroundPosition: settingsStore.backgroundColor === 'transparent' ? '0 0, 0 10px, 10px -10px, -10px 0px' : '0 0',
@@ -92,10 +92,10 @@
:src="layer.sprites[i - 1].url"
class="absolute pointer-events-none"
:style="{
left: `${cellDimensions.negativeSpacing + layer.sprites[i - 1].x}px`,
top: `${cellDimensions.negativeSpacing + layer.sprites[i - 1].y}px`,
width: `${layer.sprites[i - 1].width}px`,
height: `${layer.sprites[i - 1].height}px`,
left: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[i - 1].x)}px`,
top: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[i - 1].y)}px`,
width: `${Math.round(layer.sprites[i - 1].width)}px`,
height: `${Math.round(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})`,
@@ -115,10 +115,10 @@
class="absolute"
:class="{ 'cursor-move': isDraggable }"
:style="{
left: `${cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].x}px`,
top: `${cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y}px`,
width: `${layer.sprites[currentFrameIndex].width}px`,
height: `${layer.sprites[currentFrameIndex].height}px`,
left: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].x)}px`,
top: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y)}px`,
width: `${Math.round(layer.sprites[currentFrameIndex].width)}px`,
height: `${Math.round(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})`,
}"
@@ -433,8 +433,8 @@
// If manual cell size is enabled, use manual values
if (settingsStore.manualCellSizeEnabled) {
return {
cellWidth: settingsStore.manualCellWidth,
cellHeight: settingsStore.manualCellHeight,
cellWidth: Math.round(settingsStore.manualCellWidth),
cellHeight: Math.round(settingsStore.manualCellHeight),
negativeSpacing: 0,
};
}
@@ -442,10 +442,10 @@
// Otherwise, calculate from sprite dimensions across ALL layers
const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(allLayers);
const allSprites = allLayers.flatMap(l => l.sprites);
const negativeSpacing = calculateNegativeSpacing(allSprites, settingsStore.negativeSpacingEnabled);
const negativeSpacing = Math.round(calculateNegativeSpacing(allSprites, settingsStore.negativeSpacingEnabled));
return {
cellWidth: maxWidth + negativeSpacing,
cellHeight: maxHeight + negativeSpacing,
cellWidth: Math.round(maxWidth + negativeSpacing),
cellHeight: Math.round(maxHeight + negativeSpacing),
negativeSpacing,
};
});