[FEAT] Allow to adjust cell size

src/composables/useLayers.ts

@@ -1,6 +1,7 @@
 import { computed, ref, watch } from 'vue';
 import type { Layer, Sprite } from '@/types/sprites';
 import { getMaxDimensions as getMaxDimensionsSingle, useSprites as useSpritesSingle } from './useSprites';
+import { useSettingsStore } from '@/stores/useSettingsStore';
 
 export const createEmptyLayer = (name: string): Layer => ({
   id: crypto.randomUUID(),
@@ -14,6 +15,7 @@ export const useLayers = () => {
   const layers = ref<Layer[]>([createEmptyLayer('Base')]);
   const activeLayerId = ref<string>(layers.value[0].id);
   const columns = ref(4);
+  const settingsStore = useSettingsStore();
 
   watch(columns, val => {
     const num = typeof val === 'number' ? val : parseInt(String(val));
@@ -38,7 +40,22 @@ export const useLayers = () => {
   const alignSprites = (position: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
     const l = activeLayer.value;
     if (!l || !l.sprites.length) return;
-    const { maxWidth, maxHeight } = getMaxDimensions(l.sprites);
+
+    // Determine the cell dimensions to align within
+    let cellWidth: number;
+    let cellHeight: number;
+
+    if (settingsStore.manualCellSizeEnabled) {
+      // Use manual cell size (without negative spacing)
+      cellWidth = settingsStore.manualCellWidth;
+      cellHeight = settingsStore.manualCellHeight;
+    } else {
+      // Use auto-calculated dimensions based on sprite sizes
+      const { maxWidth, maxHeight } = getMaxDimensions(l.sprites);
+      cellWidth = maxWidth;
+      cellHeight = maxHeight;
+    }
+
     l.sprites = l.sprites.map(sprite => {
       let x = sprite.x;
       let y = sprite.y;
@@ -47,19 +64,19 @@ export const useLayers = () => {
           x = 0;
           break;
         case 'center':
-          x = Math.floor((maxWidth - sprite.width) / 2);
+          x = Math.floor((cellWidth - sprite.width) / 2);
           break;
         case 'right':
-          x = Math.floor(maxWidth - sprite.width);
+          x = Math.floor(cellWidth - sprite.width);
           break;
         case 'top':
           y = 0;
           break;
         case 'middle':
-          y = Math.floor((maxHeight - sprite.height) / 2);
+          y = Math.floor((cellHeight - sprite.height) / 2);
           break;
         case 'bottom':
-          y = Math.floor(maxHeight - sprite.height);
+          y = Math.floor(cellHeight - sprite.height);
           break;
       }
       return { ...sprite, x: Math.floor(x), y: Math.floor(y) };