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

[FEAT] Enhanced pixel position

Browse Source
This commit is contained in:
root
2026-01-01 17:53:53 +01:00
parent 1f9fc4d5bb
commit dc3e535955
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/SpritePreview.vue
View File

@@ -76,7 +76,6 @@
backgroundImage: previewBackgroundImage,
backgroundSize: previewBackgroundSize,
backgroundPosition: previewBackgroundPosition,
border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
}"
@dragover.prevent="onDragOver"
@dragleave="onDragLeave"
@@ -92,8 +91,8 @@
:src="layer.sprites[i - 1].url"
class="absolute pointer-events-none"
:style="{
left: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[i - 1].x)}px`,
top: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[i - 1].y)}px`,
left: `${Math.round(getCellPosition(0).x + gridMetrics.negativeSpacing + layer.sprites[i - 1].x)}px`,
top: `${Math.round(getCellPosition(0).y + gridMetrics.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',
@@ -115,8 +114,8 @@
class="absolute"
:class="{ 'cursor-move': isDraggable }"
:style="{
left: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].x)}px`,
top: `${Math.round(cellDimensions.negativeSpacing + layer.sprites[currentFrameIndex].y)}px`,
left: `${Math.round(getCellPosition(0).x + gridMetrics.negativeSpacing + layer.sprites[currentFrameIndex].x)}px`,
top: `${Math.round(getCellPosition(0).y + gridMetrics.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',
@@ -427,7 +426,7 @@
});
// Use the new useGridMetrics composable for consistent calculations
const { gridMetrics } = useGridMetrics({
const { gridMetrics, getCellPosition: getCellPositionHelper } = useGridMetrics({
layers: toRef(props, 'layers'),
negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
manualCellSizeEnabled: toRef(settingsStore, 'manualCellSizeEnabled'),
@@ -435,6 +434,11 @@
manualCellHeight: toRef(settingsStore, 'manualCellHeight'),
});
// Helper function to get cell position (same as SpriteCanvas)
const getCellPosition = (index: number) => {
return getCellPositionHelper(index, props.columns, gridMetrics.value);
};
// Computed cell dimensions (for backward compatibility with existing code)
const cellDimensions = computed(() => ({
cellWidth: gridMetrics.value.maxWidth,