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<{

17
src/views/EditorView.vue
View File

@@ -148,16 +148,25 @@
:class="showOffsetLabels ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium transition-colors"
>
<i class="fas fa-tag mr-2"></i>Labels
<i class="fas fa-tag mr-2"></i>Coordinates
</button>
</Tooltip>
<Tooltip text="Compare with ghost overlays" class="col-span-2">
<Tooltip text="Show frame index number">
<button
@click="showFrameIds = !showFrameIds"
:class="showFrameIds ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium transition-colors"
>
<i class="fas fa-hashtag mr-2"></i>Frame IDs
</button>
</Tooltip>
<Tooltip text="Compare with ghost overlays">
<button
@click="showAllSprites = !showAllSprites"
:class="showAllSprites ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium transition-colors"
>
<i class="fas fa-clone mr-2"></i>Ghost compare
<i class="fas fa-clone mr-2"></i>Compare
</button>
</Tooltip>
</div>
@@ -284,6 +293,7 @@
:allow-cell-swap="allowCellSwap"
:show-all-sprites="showAllSprites"
:show-offset-labels="showOffsetLabels"
:show-frame-ids="showFrameIds"
@update-sprite="updateSpritePosition"
@update-sprite-cell="updateSpriteCell"
@remove-sprite="removeSprite"
@@ -383,6 +393,7 @@
const allowCellSwap = ref(false);
const showAllSprites = ref(false);
const showOffsetLabels = ref(false);
const showFrameIds = ref(false);
const customColor = ref('#ffffff');
const isCustomMode = ref(false);