fix: change the way region align works

src/core/region.ts

@@ -28,44 +28,63 @@ export type RegionAxis = {
 export function applyAlign(region: Region){
   if (region.children.length === 0) return;
 
-  // 对每个 axis 分别处理
+  // 对每个 axis 分别处理，但保持空间关系
   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[axisIndex] ?? 0;
+    for (const accessor of region.children) {
-      const posB = b.value.position[axisIndex] ?? 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) => {
-        accessor.value.position[axisIndex] = axis.min! + index;
+        positionMap.set(pos, axis.min! + index);
       });
     } 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) => {
-        accessor.value.position[axisIndex] = axis.max! - (count - 1 - index);
+        positionMap.set(pos, axis.max! - (count - 1 - index));
       });
     } 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 offset = index - (count - 1) / 2;
-        accessor.value.position[axisIndex] = center + offset;
+        positionMap.set(pos, center + offset);
       });
     }
+
+    // 应用位置映射到所有 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;
+  });
 }
 
 /**

tests/core/region.test.ts

@@ -159,14 +159,14 @@ describe('Region', () => {
             
             applyAlign(region);
             
-            // 第一轴 (x, axisIndex=0) 对齐：
+            // X 轴对齐：
-            // 排序：part3(x=2), part1(x=5), part2(x=7) → children=[part3, part1, part2]
+            // 唯一位置值：[2, 5, 7] -> 映射到 [0, 1, 2]
-            // 对齐：part3.position[0]=0, part1.position[0]=1, part2.position[0]=2
+            // part3: 2->0, part1: 5->1, part2: 7->2
             // 结果：part3=[0,30], part1=[1,10], part2=[2,20]
             //
-            // 第二轴 (y, axisIndex=1) 对齐：
+            // Y 轴对齐：
-            // 排序：part1(y=10), part2(y=20), part3(y=30) → children=[part1, part2, part3]
+            // 唯一位置值：[10, 20, 30] -> 映射到 [0, 1, 2]
-            // 对齐：part1.position[1]=0, part2.position[1]=1, part3.position[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 => ({
@@ -174,15 +174,62 @@ describe('Region', () => {
                 position: c.value.position
             }));
             
-            // children 按 y 轴排序后的顺序
+            // 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([1, 0]);
+            expect(positions[0].position).toEqual([0, 0]);
             
-            expect(positions[1].id).toBe('p2');
+            expect(positions[1].id).toBe('p4');
-            expect(positions[1].position).toEqual([2, 1]);
+            expect(positions[1].position).toEqual([0, 1]);
             
-            expect(positions[2].id).toBe('p3');
+            expect(positions[2].id).toBe('p2');
-            expect(positions[2].position).toEqual([0, 2]);
+            expect(positions[2].position).toEqual([1, 0]);
+            
+            expect(positions[3].id).toBe('p3');
+            expect(positions[3].position).toEqual([1, 1]);
         });
     });