fix: change the way region align works

src/core/part.ts

@@ -16,7 +16,7 @@ export type Part = Entity & {
 
   // current region
   region: EntityAccessor<Region>;
-  // current position in region
+  // current position in region, expect to be the same length as region's axes
   position: number[];
 }
 

src/core/region.ts

@@ -3,7 +3,7 @@ import {Part} from "./part";
 import {RNG} from "../utils/rng";
 
 export type Region = Entity & {
-  // aligning axes of the region
+  // aligning axes of the region, expect a part's position to have a matching number of elements
   axes: RegionAxis[];
 
   // current children; expect no overlapped positions
@@ -26,53 +26,67 @@ export type RegionAxis = {
  * @param region
  */
 export function applyAlign(region: Region){
-  for (const axis of region.axes) {
+  if (region.children.length === 0) return;
-    if (region.children.length === 0) continue;
 
-    // 获取当前轴向上的所有位置
+  // 对每个 axis 分别处理，但保持空间关系
-    const positions = region.children.map(accessor => accessor.value.position);
+  for (let axisIndex = 0; axisIndex < region.axes.length; axisIndex++) {
+    const axis = region.axes[axisIndex];
+    if (!axis.align) continue;
 
-    // 根据当前轴的位置排序 children
+    // 收集当前轴上的所有唯一位置值，保持原有顺序
-    region.children.sort((a, b) => {
+    const positionValues = new Set<number>();
-      const posA = a.value.position[0] ?? 0;
+    for (const accessor of region.children) {
-      const posB = b.value.position[0] ?? 0;
+      positionValues.add(accessor.value.position[axisIndex] ?? 0);
-      return posA - posB;
+    }
-    });
+
+    // 排序位置值
+    const sortedPositions = Array.from(positionValues).sort((a, b) => a - b);
+
+    // 创建位置映射：原位置 -> 新位置
+    const positionMap = new Map<number, number>();
 
     if (axis.align === 'start' && axis.min !== undefined) {
-      // 从 min 开始紧凑排列
+      // 从 min 开始紧凑排列，保持相对顺序
-      region.children.forEach((accessor, index) => {
+      sortedPositions.forEach((pos, index) => {
-        const currentPos = accessor.value.position.slice();
+        positionMap.set(pos, axis.min! + index);
-        currentPos[0] = axis.min! + index;
-        accessor.value.position = currentPos;
       });
     } else if (axis.align === 'end' && axis.max !== undefined) {
       // 从 max 开始向前紧凑排列
-      const count = region.children.length;
+      const count = sortedPositions.length;
-      region.children.forEach((accessor, index) => {
+      sortedPositions.forEach((pos, index) => {
-        const currentPos = accessor.value.position.slice();
+        positionMap.set(pos, axis.max! - (count - 1 - index));
-        currentPos[0] = axis.max! - (count - 1 - index);
-        accessor.value.position = currentPos;
       });
     } else if (axis.align === 'center') {
       // 居中排列
-      const count = region.children.length;
+      const count = sortedPositions.length;
       const min = axis.min ?? 0;
       const max = axis.max ?? count - 1;
       const range = max - min;
       const center = min + range / 2;
 
-      region.children.forEach((accessor, index) => {
+      sortedPositions.forEach((pos, index) => {
-        const currentPos = accessor.value.position.slice();
-        // 计算相对于中心的偏移
         const offset = index - (count - 1) / 2;
-        currentPos[0] = center + offset;
+        positionMap.set(pos, center + offset);
-        accessor.value.position = currentPos;
       });
     }
+
+    // 应用位置映射到所有 part
+    for (const accessor of region.children) {
+      const currentPos = accessor.value.position[axisIndex] ?? 0;
+      accessor.value.position[axisIndex] = positionMap.get(currentPos) ?? currentPos;
     }
   }
 
+  // 最后按所有轴排序 children
+  region.children.sort((a, b) => {
+    for (let i = 0; i < region.axes.length; i++) {
+      const diff = (a.value.position[i] ?? 0) - (b.value.position[i] ?? 0);
+      if (diff !== 0) return diff;
+    }
+    return 0;
+  });
+}
+
 /**
  * shuffle on each axis. for each axis, try to swap position.
  * @param region
@@ -85,11 +99,9 @@ export function shuffle(region: Region, rng: RNG){
   const children = [...region.children];
   for (let i = children.length - 1; i > 0; i--) {
     const j = rng.nextInt(i + 1);
-    // 交换位置
+    // 交换两个 part 的整个 position 数组
-    const posI = children[i].value.position.slice();
+    const temp = children[i].value.position;
-    const posJ = children[j].value.position.slice();
+    children[i].value.position = children[j].value.position;
-    
+    children[j].value.position = temp;
-    children[i].value.position = posJ;
-    children[j].value.position = posI;
   }
 }

tests/core/region.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { applyAlign, shuffle, type Region, type RegionAxis } from '../../src/core/region';
 import { createRNG } from '../../src/utils/rng';
 import { createEntityCollection } from '../../src/utils/entity';
@@ -34,30 +34,34 @@ describe('Region', () => {
             expect(region.children).toHaveLength(0);
         });
 
-        it('should align parts to start', () => {
+        it('should align parts to start on first axis', () => {
-            const part1 = createPart('p1', [5, 0]);
+            const part1 = createPart('p1', [5, 10]);
-            const part2 = createPart('p2', [7, 0]);
+            const part2 = createPart('p2', [7, 20]);
-            const part3 = createPart('p3', [2, 0]);
+            const part3 = createPart('p3', [2, 30]);
             
             const region = createRegion(
-                [{ name: 'x', min: 0, align: 'start' }],
+                [{ name: 'x', min: 0, align: 'start' }, { name: 'y' }],
                 [part1, part2, part3]
             );
             
             applyAlign(region);
             
-            // 排序后应该是 part3(2), part1(5), part2(7) -> 对齐到 0, 1, 2
+            // 排序后应该是 part3(2), part1(5), part2(7) -> 对齐到 0, 1, 2 (第一轴)
             expect(region.children[0].value.position[0]).toBe(0);
             expect(region.children[1].value.position[0]).toBe(1);
             expect(region.children[2].value.position[0]).toBe(2);
+            // 第二轴保持不变
+            expect(region.children[0].value.position[1]).toBe(30);
+            expect(region.children[1].value.position[1]).toBe(10);
+            expect(region.children[2].value.position[1]).toBe(20);
         });
 
         it('should align parts to start with custom min', () => {
-            const part1 = createPart('p1', [5, 0]);
+            const part1 = createPart('p1', [5, 100]);
-            const part2 = createPart('p2', [7, 0]);
+            const part2 = createPart('p2', [7, 200]);
             
             const region = createRegion(
-                [{ name: 'x', min: 10, align: 'start' }],
+                [{ name: 'x', min: 10, align: 'start' }, { name: 'y' }],
                 [part1, part2]
             );
             
@@ -65,15 +69,18 @@ describe('Region', () => {
             
             expect(region.children[0].value.position[0]).toBe(10);
             expect(region.children[1].value.position[0]).toBe(11);
+            // 第二轴保持不变
+            expect(region.children[0].value.position[1]).toBe(100);
+            expect(region.children[1].value.position[1]).toBe(200);
         });
 
-        it('should align parts to end', () => {
+        it('should align parts to end on first axis', () => {
-            const part1 = createPart('p1', [2, 0]);
+            const part1 = createPart('p1', [2, 50]);
-            const part2 = createPart('p2', [4, 0]);
+            const part2 = createPart('p2', [4, 60]);
-            const part3 = createPart('p3', [1, 0]);
+            const part3 = createPart('p3', [1, 70]);
             
             const region = createRegion(
-                [{ name: 'x', max: 10, align: 'end' }],
+                [{ name: 'x', max: 10, align: 'end' }, { name: 'y' }],
                 [part1, part2, part3]
             );
             
@@ -85,13 +92,13 @@ describe('Region', () => {
             expect(region.children[2].value.position[0]).toBe(10);
         });
 
-        it('should align parts to center', () => {
+        it('should align parts to center on first axis', () => {
-            const part1 = createPart('p1', [0, 0]);
+            const part1 = createPart('p1', [0, 5]);
-            const part2 = createPart('p2', [1, 0]);
+            const part2 = createPart('p2', [1, 6]);
-            const part3 = createPart('p3', [2, 0]);
+            const part3 = createPart('p3', [2, 7]);
             
             const region = createRegion(
-                [{ name: 'x', min: 0, max: 10, align: 'center' }],
+                [{ name: 'x', min: 0, max: 10, align: 'center' }, { name: 'y' }],
                 [part1, part2, part3]
             );
             
@@ -104,11 +111,11 @@ describe('Region', () => {
         });
 
         it('should handle even count center alignment', () => {
-            const part1 = createPart('p1', [0, 0]);
+            const part1 = createPart('p1', [0, 10]);
-            const part2 = createPart('p2', [1, 0]);
+            const part2 = createPart('p2', [1, 20]);
             
             const region = createRegion(
-                [{ name: 'x', min: 0, max: 10, align: 'center' }],
+                [{ name: 'x', min: 0, max: 10, align: 'center' }, { name: 'y' }],
                 [part1, part2]
             );
             
@@ -119,23 +126,111 @@ describe('Region', () => {
             expect(region.children[1].value.position[0]).toBe(5.5);
         });
 
-        it('should sort children by position', () => {
+        it('should sort children by position on current axis', () => {
-            const part1 = createPart('p1', [5, 0]);
+            const part1 = createPart('p1', [5, 100]);
-            const part2 = createPart('p2', [1, 0]);
+            const part2 = createPart('p2', [1, 200]);
-            const part3 = createPart('p3', [3, 0]);
+            const part3 = createPart('p3', [3, 300]);
             
             const region = createRegion(
-                [{ name: 'x', min: 0, align: 'start' }],
+                [{ name: 'x', min: 0, align: 'start' }, { name: 'y' }],
                 [part1, part2, part3]
             );
             
             applyAlign(region);
             
-            // children 应该按位置排序
+            // children 应该按第一轴位置排序
             expect(region.children[0].value.id).toBe('p2');
             expect(region.children[1].value.id).toBe('p3');
             expect(region.children[2].value.id).toBe('p1');
         });
+
+        it('should align on multiple axes', () => {
+            const part1 = createPart('p1', [5, 10]);
+            const part2 = createPart('p2', [7, 20]);
+            const part3 = createPart('p3', [2, 30]);
+            
+            const region = createRegion(
+                [
+                    { name: 'x', min: 0, align: 'start' },
+                    { name: 'y', min: 0, align: 'start' }
+                ],
+                [part1, part2, part3]
+            );
+            
+            applyAlign(region);
+            
+            // X 轴对齐：
+            // 唯一位置值：[2, 5, 7] -> 映射到 [0, 1, 2]
+            // part3: 2->0, part1: 5->1, part2: 7->2
+            // 结果：part3=[0,30], part1=[1,10], part2=[2,20]
+            //
+            // Y 轴对齐：
+            // 唯一位置值：[10, 20, 30] -> 映射到 [0, 1, 2]
+            // part1: 10->0, part2: 20->1, part3: 30->2
+            // 最终：part1=[1,0], part2=[2,1], part3=[0,2]
+            
+            const positions = region.children.map(c => ({
+                id: c.value.id,
+                position: c.value.position
+            }));
+            
+            // children 按位置排序后的顺序
+            expect(positions[0].id).toBe('p3');
+            expect(positions[0].position).toEqual([0, 2]);
+            
+            expect(positions[1].id).toBe('p1');
+            expect(positions[1].position).toEqual([1, 0]);
+            
+            expect(positions[2].id).toBe('p2');
+            expect(positions[2].position).toEqual([2, 1]);
+        });
+
+        it('should align 4 elements on rectangle corners', () => {
+            // 4 个元素放在矩形的四个角：(0,0), (10,0), (10,1), (0,1)
+            // 期望：保持矩形布局，只是紧凑到 (0,0), (1,0), (1,1), (0,1)
+            const part1 = createPart('p1', [0, 0]);   // 左下角
+            const part2 = createPart('p2', [10, 0]);  // 右下角
+            const part3 = createPart('p3', [10, 1]);  // 右上角
+            const part4 = createPart('p4', [0, 1]);   // 左上角
+            
+            const region = createRegion(
+                [
+                    { name: 'x', min: 0, max: 10, align: 'start' },
+                    { name: 'y', min: 0, max: 10, align: 'start' }
+                ],
+                [part1, part2, part3, part4]
+            );
+            
+            applyAlign(region);
+            
+            // X 轴对齐：
+            // 唯一位置值：[0, 10] -> 映射到 [0, 1]
+            // part1: 0->0, part4: 0->0, part2: 10->1, part3: 10->1
+            // 结果：part1=[0,0], part4=[0,1], part2=[1,0], part3=[1,1]
+            //
+            // Y 轴对齐：
+            // 唯一位置值：[0, 1] -> 映射到 [0, 1] (已经是紧凑的)
+            // part1: 0->0, part2: 0->0, part4: 1->1, part3: 1->1
+            // 最终：part1=[0,0], part2=[1,0], part4=[0,1], part3=[1,1]
+            
+            const positions = region.children.map(c => ({
+                id: c.value.id,
+                position: c.value.position
+            }));
+            
+            // children 按位置排序后的顺序：(0,0), (0,1), (1,0), (1,1)
+            expect(positions[0].id).toBe('p1');
+            expect(positions[0].position).toEqual([0, 0]);
+            
+            expect(positions[1].id).toBe('p4');
+            expect(positions[1].position).toEqual([0, 1]);
+            
+            expect(positions[2].id).toBe('p2');
+            expect(positions[2].position).toEqual([1, 0]);
+            
+            expect(positions[3].id).toBe('p3');
+            expect(positions[3].position).toEqual([1, 1]);
+        });
     });
 
     describe('shuffle', () => {
@@ -147,17 +242,17 @@ describe('Region', () => {
         });
 
         it('should do nothing with single part', () => {
-            const part = createPart('p1', [0, 0]);
+            const part = createPart('p1', [0, 0, 0]);
             const region = createRegion([], [part]);
             const rng = createRNG(42);
             shuffle(region, rng);
-            expect(region.children[0].value.position).toEqual([0, 0]);
+            expect(region.children[0].value.position).toEqual([0, 0, 0]);
         });
 
         it('should shuffle positions of multiple parts', () => {
-            const part1 = createPart('p1', [0, 0]);
+            const part1 = createPart('p1', [0, 100]);
-            const part2 = createPart('p2', [1, 0]);
+            const part2 = createPart('p2', [1, 200]);
-            const part3 = createPart('p3', [2, 0]);
+            const part3 = createPart('p3', [2, 300]);
             
             const region = createRegion([], [part1, part2, part3]);
             const rng = createRNG(42);
@@ -179,9 +274,9 @@ describe('Region', () => {
 
         it('should be deterministic with same seed', () => {
             const createRegionForTest = () => {
-                const part1 = createPart('p1', [0, 0]);
+                const part1 = createPart('p1', [0, 10]);
-                const part2 = createPart('p2', [1, 0]);
+                const part2 = createPart('p2', [1, 20]);
-                const part3 = createPart('p3', [2, 0]);
+                const part3 = createPart('p3', [2, 30]);
                 return createRegion([], [part1, part2, part3]);
             };
 
@@ -201,17 +296,20 @@ describe('Region', () => {
         });
 
         it('should produce different results with different seeds', () => {
-            const part1 = createPart('p1', [0, 0]);
+            const createRegionForTest = () => {
-            const part2 = createPart('p2', [1, 0]);
+                const part1 = createPart('p1', [0, 10]);
-            const part3 = createPart('p3', [2, 0]);
+                const part2 = createPart('p2', [1, 20]);
-            const part4 = createPart('p4', [3, 0]);
+                const part3 = createPart('p3', [2, 30]);
-            const part5 = createPart('p5', [4, 0]);
+                const part4 = createPart('p4', [3, 40]);
+                const part5 = createPart('p5', [4, 50]);
+                return createRegion([], [part1, part2, part3, part4, part5]);
+            };
 
             const results = new Set<string>();
             
             // 尝试多个种子，确保大多数产生不同结果
             for (let seed = 1; seed <= 10; seed++) {
-                const region = createRegion([], [part1, part2, part3, part4, part5]);
+                const region = createRegionForTest();
                 const rng = createRNG(seed);
                 shuffle(region, rng);