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