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

[FEAT] Add show/hide frame ID toggle

Browse Source
This commit is contained in:
root
2026-01-02 21:19:38 +01:00
parent 0b78c406ec
commit bade5cec0c
2 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/SpriteCanvas.vue
View File

@@ -151,15 +151,29 @@
draggable="false"
/>
<!-- Offset labels -->
<!-- Frame IDs -->
<div
v-if="showFrameIds"
v-for="cellIndex in totalCells"
:key="`frame-id-${cellIndex}`"
class="absolute pointer-events-none font-mono text-[10px] leading-none text-gray-500 dark:text-gray-400 bg-white/80 dark:bg-gray-800/90 px-1.5 py-1 rounded-br-lg border-r border-b border-gray-200 dark:border-gray-600 shadow-sm z-0"
:style="{
left: `${Math.round(getCellPosition(cellIndex - 1).x)}px`,
top: `${Math.round(getCellPosition(cellIndex - 1).y)}px`,
}"
>
{{ cellIndex - 1 }}
</div>
<!-- Offset labels (Coordinates) -->
<div
v-if="showOffsetLabels"
v-for="position in spritePositions"
: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"
class="absolute text-[10px] sm:text-xs leading-none font-mono font-medium text-indigo-600 dark:text-indigo-400 bg-white/95 dark:bg-gray-900/95 px-1.5 py-0.5 rounded shadow-sm border border-indigo-200 dark:border-indigo-900 pointer-events-none z-10"
:style="{
left: `${Math.round(position.cellX + position.maxWidth - 2)}px`,
top: `${Math.round(position.cellY + position.maxHeight - 2)}px`,
left: `${Math.round(position.cellX + position.maxWidth)}px`,
top: `${Math.round(position.cellY + position.maxHeight)}px`,
transform: 'translate(-100%, -100%)',
}"
>
@@ -195,6 +209,7 @@
allowCellSwap: boolean;
showAllSprites: boolean;
showOffsetLabels: boolean;
showFrameIds: boolean;
}>();
const emit = defineEmits<{