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

[FEAT] Fix incorrect offset val. label placement

Browse Source
This commit is contained in:
root
2025-11-22 18:09:32 +01:00
parent aee07f23f2
commit d35ae69265
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/SpriteCanvas.vue
View File

@@ -79,8 +79,9 @@
:key="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"
:style="{
left: `calc(${(position.cellX / canvasRef.width) * 100}% + ${(position.maxWidth / canvasRef.width) * 100}% - 2px)`,
top: `calc(${(position.cellY / canvasRef.height) * 100}% + ${(position.maxHeight / canvasRef.height) * 100}% - 2px)`,
// Use the global cell size so labels line up with the actual grid cells
left: `calc(${(position.cellX / canvasWidth) * 100}% + ${(gridMetrics.maxWidth / canvasWidth) * 100}% - 2px)`,
top: `calc(${(position.cellY / canvasHeight) * 100}% + ${(gridMetrics.maxHeight / canvasHeight) * 100}% - 2px)`,
transform: 'translate(-100%, -100%)',
}"
>
@@ -212,6 +213,13 @@
const fileInput = ref<HTMLInputElement | null>(null);
const customColor = ref('#ffffff');
// Grid metrics used to position offset labels relative to cell size
const gridMetrics = computed(() => calculateMaxDimensions());
// Reactive canvas dimensions to ensure label positions update when canvas size changes
const canvasWidth = ref(0);
const canvasHeight = ref(0);
const startDrag = (event: MouseEvent) => {
if (!canvasRef.value) return;
@@ -311,7 +319,12 @@
// Set canvas size
const maxLen = Math.max(1, ...props.layers.map(l => (l.visible ? l.sprites.length : 1)));
const rows = Math.max(1, Math.ceil(maxLen / props.columns));
canvas2D.setCanvasSize(maxWidth * props.columns, maxHeight * rows);
const newCanvasWidth = maxWidth * props.columns;
const newCanvasHeight = maxHeight * rows;
canvas2D.setCanvasSize(newCanvasWidth, newCanvasHeight);
// Update reactive dimensions for template-driven elements (like labels)
if (canvasWidth.value !== newCanvasWidth) canvasWidth.value = newCanvasWidth;
if (canvasHeight.value !== newCanvasHeight) canvasHeight.value = newCanvasHeight;
// Clear canvas
canvas2D.clear();