[FEAT] More UI enhancements

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<Sprite[]> | ComputedRef<Sprite[]> | Sprite[];
+  layers?: Ref<Layer[]> | ComputedRef<Layer[]> | Layer[];
   columns: Ref<number> | number;
   zoom?: Ref<number>;
   allowCellSwap?: Ref<boolean>;
@@ -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;

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;
     }