From b3f530870e3bfefaa1068e6c13ce0fd1b08aa8ce Mon Sep 17 00:00:00 2001 From: root Date: Sun, 23 Nov 2025 01:48:05 +0100 Subject: [PATCH] [FEAT] More UI enhancements --- index.html | 10 +++++----- src/App.vue | 8 ++++---- src/components/SpriteCanvas.vue | 5 +++-- src/composables/useDragSprite.ts | 16 +++++++++++----- src/composables/useLayers.ts | 4 ++-- 5 files changed, 25 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 12fe305..f091d86 100644 --- a/index.html +++ b/index.html @@ -14,24 +14,24 @@ - Spritesheet Generator - Create Game Spritesheets Online - + Spritesheet generator - Create Game Spritesheets Online + - + - + - + diff --git a/src/App.vue b/src/App.vue index b4fca47..fe4ac54 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@
-

Spritesheet Generator

+

Spritesheet generator

Create professional spritesheets for your game development projects

@@ -62,8 +62,8 @@
-

Welcome to Spritesheet Generator

-

Create spritesheets for your game development and animation projects with our completely free, open-source spritesheet generator.

+

Welcome to Spritesheet generator

+

Create spritesheets for your game development and animation projects with our completely free, open-source Spritesheet generator.

This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.

@@ -277,7 +277,7 @@
💬

Help us improve!

-

We'd love to hear your thoughts about the spritesheet generator. Would you like to share your feedback?

+

We'd love to hear your thoughts about the Spritesheet generator. Would you like to share your feedback?

diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue index d13b718..d1512ee 100644 --- a/src/components/SpriteCanvas.vue +++ b/src/components/SpriteCanvas.vue @@ -93,8 +93,8 @@ 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="{ // Position at bottom-right corner of each cell, scaled by zoom - left: `${((position.cellX + position.maxWidth) * zoom) - 2}px`, - top: `${((position.cellY + position.maxHeight) * zoom) - 2}px`, + left: `${(position.cellX + position.maxWidth) * zoom - 2}px`, + top: `${(position.cellY + position.maxHeight) * zoom - 2}px`, transform: 'translate(-100%, -100%)', }" > @@ -198,6 +198,7 @@ calculateMaxDimensions, } = useDragSprite({ sprites: computed(() => props.layers.find(l => l.id === props.activeLayerId)?.sprites ?? []), + layers: toRef(props, 'layers'), columns: toRef(props, 'columns'), zoom, allowCellSwap, diff --git a/src/composables/useDragSprite.ts b/src/composables/useDragSprite.ts index 5c1e353..682ff95 100644 --- a/src/composables/useDragSprite.ts +++ b/src/composables/useDragSprite.ts @@ -1,5 +1,5 @@ import { ref, computed, type Ref, type ComputedRef } from 'vue'; -import type { Sprite } from '@/types/sprites'; +import type { Sprite, Layer } from '@/types/sprites'; import { getMaxDimensions } from './useSprites'; import { calculateNegativeSpacing } from './useNegativeSpacing'; @@ -28,6 +28,7 @@ export interface SpritePosition { export interface DragSpriteOptions { sprites: Ref | ComputedRef | Sprite[]; + layers?: Ref | ComputedRef | Layer[]; columns: Ref | number; zoom?: Ref; allowCellSwap?: Ref; @@ -46,6 +47,7 @@ export function useDragSprite(options: DragSpriteOptions) { // Helper to get reactive values const getSprites = () => (Array.isArray(options.sprites) ? options.sprites : options.sprites.value); + const getLayers = () => (options.layers ? (Array.isArray(options.layers) ? options.layers : options.layers.value) : null); const getColumns = () => (typeof options.columns === 'number' ? options.columns : options.columns.value); const getZoom = () => options.zoom?.value ?? 1; const getAllowCellSwap = () => options.allowCellSwap?.value ?? false; @@ -73,7 +75,6 @@ export function useDragSprite(options: DragSpriteOptions) { const lastMaxHeight = ref(1); const calculateMaxDimensions = () => { - const sprites = getSprites(); const negativeSpacingEnabled = getNegativeSpacingEnabled(); const manualCellSizeEnabled = getManualCellSizeEnabled(); @@ -87,8 +88,13 @@ export function useDragSprite(options: DragSpriteOptions) { return { maxWidth, maxHeight, negativeSpacing }; } - // Otherwise, calculate based on sprite dimensions - const base = getMaxDimensions(sprites); + // Get all sprites to calculate dimensions from + // If layers are provided, use all visible layers; otherwise use current sprites + const layers = getLayers(); + const spritesToMeasure = layers ? layers.filter(l => l.visible).flatMap(l => l.sprites) : getSprites(); + + // Otherwise, calculate based on sprite dimensions across all visible layers + const base = getMaxDimensions(spritesToMeasure); // When switching back from manual mode, reset to actual sprite dimensions const baseMaxWidth = Math.max(1, base.maxWidth); const baseMaxHeight = Math.max(1, base.maxHeight); @@ -96,7 +102,7 @@ export function useDragSprite(options: DragSpriteOptions) { lastMaxHeight.value = baseMaxHeight; // Calculate negative spacing using shared composable - const negativeSpacing = calculateNegativeSpacing(sprites, negativeSpacingEnabled); + const negativeSpacing = calculateNegativeSpacing(spritesToMeasure, negativeSpacingEnabled); // Add negative spacing to expand each cell const maxWidth = baseMaxWidth + negativeSpacing; diff --git a/src/composables/useLayers.ts b/src/composables/useLayers.ts index ecc0864..7cb2900 100644 --- a/src/composables/useLayers.ts +++ b/src/composables/useLayers.ts @@ -50,8 +50,8 @@ export const useLayers = () => { cellWidth = settingsStore.manualCellWidth; cellHeight = settingsStore.manualCellHeight; } else { - // Use auto-calculated dimensions based on sprite sizes - const { maxWidth, maxHeight } = getMaxDimensions(l.sprites); + // Use auto-calculated dimensions based on ALL visible layers (not just active layer) + const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers.value); cellWidth = maxWidth; cellHeight = maxHeight; }