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

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