[FEAT] add grid metrics

src/components/SpritePreview.vue

@@ -73,9 +73,9 @@
               width: `${cellDimensions.cellWidth}px`,
               height: `${cellDimensions.cellHeight}px`,
               backgroundColor: settingsStore.backgroundColor === 'transparent' ? '#f9fafb' : settingsStore.backgroundColor,
-              backgroundImage: getPreviewBackgroundImage(),
-              backgroundSize: settingsStore.backgroundColor === 'transparent' ? '20px 20px' : 'auto',
-              backgroundPosition: settingsStore.backgroundColor === 'transparent' ? '0 0, 0 10px, 10px -10px, -10px 0px' : '0 0',
+              backgroundImage: previewBackgroundImage,
+              backgroundSize: previewBackgroundSize,
+              backgroundPosition: previewBackgroundPosition,
               border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
             }"
             @dragover.prevent="onDragOver"
@@ -302,13 +302,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch, onUnmounted, computed } from 'vue';
+  import { ref, onMounted, watch, onUnmounted, computed, toRef } from 'vue';
   import { useSettingsStore } from '@/stores/useSettingsStore';
   import type { Layer, Sprite } from '@/types/sprites';
-  import { getMaxDimensionsAcrossLayers } from '@/composables/useLayers';
   import { useZoom } from '@/composables/useZoom';
   import { useAnimationFrames } from '@/composables/useAnimationFrames';
-  import { calculateNegativeSpacing } from '@/composables/useNegativeSpacing';
+  import { useGridMetrics } from '@/composables/useGridMetrics';
+  import { useBackgroundStyles } from '@/composables/useBackgroundStyles';
 
   const props = defineProps<{
     layers: Layer[];
@@ -426,38 +426,30 @@
     return layer.sprites[currentFrameIndex.value] || null;
   });
 
-  // Computed cell dimensions
-  const cellDimensions = computed(() => {
-    // Use ALL layers (regardless of visibility) to keep preview size stable
-    const allLayers = props.layers;
-    // If manual cell size is enabled, use manual values
-    if (settingsStore.manualCellSizeEnabled) {
-      return {
-        cellWidth: Math.round(settingsStore.manualCellWidth),
-        cellHeight: Math.round(settingsStore.manualCellHeight),
-        negativeSpacing: 0,
-      };
-    }
-
-    // Otherwise, calculate from sprite dimensions across ALL layers
-    const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(allLayers);
-    const allSprites = allLayers.flatMap(l => l.sprites);
-    const negativeSpacing = Math.round(calculateNegativeSpacing(allSprites, settingsStore.negativeSpacingEnabled));
-    return {
-      cellWidth: Math.round(maxWidth + negativeSpacing),
-      cellHeight: Math.round(maxHeight + negativeSpacing),
-      negativeSpacing,
-    };
+  // Use the new useGridMetrics composable for consistent calculations
+  const { gridMetrics } = useGridMetrics({
+    layers: toRef(props, 'layers'),
+    negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
+    manualCellSizeEnabled: toRef(settingsStore, 'manualCellSizeEnabled'),
+    manualCellWidth: toRef(settingsStore, 'manualCellWidth'),
+    manualCellHeight: toRef(settingsStore, 'manualCellHeight'),
   });
 
-  // Helper for background image (dark mode friendly)
-  const getPreviewBackgroundImage = () => {
-    if (settingsStore.backgroundColor === 'transparent' && settingsStore.checkerboardEnabled) {
-      const color = settingsStore.darkMode ? '#4b5563' : '#d1d5db';
-      return `linear-gradient(45deg, ${color} 25%, transparent 25%), linear-gradient(-45deg, ${color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${color} 75%), linear-gradient(-45deg, transparent 75%, ${color} 75%)`;
-    }
-    return 'none';
-  };
+  // Computed cell dimensions (for backward compatibility with existing code)
+  const cellDimensions = computed(() => ({
+    cellWidth: gridMetrics.value.maxWidth,
+    cellHeight: gridMetrics.value.maxHeight,
+    negativeSpacing: gridMetrics.value.negativeSpacing,
+  }));
+
+  // Use the new useBackgroundStyles composable for consistent background styling
+  const { backgroundImage: previewBackgroundImage, backgroundSize: previewBackgroundSize, backgroundPosition: previewBackgroundPosition } = useBackgroundStyles({
+    backgroundColor: toRef(settingsStore, 'backgroundColor'),
+    checkerboardEnabled: toRef(settingsStore, 'checkerboardEnabled'),
+    darkMode: toRef(settingsStore, 'darkMode'),
+  });
+
+  const getPreviewBackgroundImage = () => previewBackgroundImage.value;
 
   // Dragging state
   const isDragging = ref(false);