hypercross
/
boardgame-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: change the way region align works

This commit is contained in:
hyper 2026-04-01 18:33:09 +08:00
parent 729f15c2bf
commit 00bed92d46
2 changed files with 95 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/core/region.ts
View File

@ -28,46 +28,65 @@ 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 posA = a.value.position[axisIndex] ?? 0;
const posB = b.value.position[axisIndex] ?? 0;
return posA - posB;
});
// 收集当前轴上的所有唯一位置值，保持原有顺序
const positionValues = new Set<number>();
for (const accessor of region.children) {
positionValues.add(accessor.value.position[axisIndex] ?? 0);
}
// 排序位置值
const sortedPositions = Array.from(positionValues).sort((a, b) => a - b);
// 创建位置映射：原位置 -> 新位置
const positionMap = new Map<number, number>();
if (axis.align === 'start' && axis.min !== undefined) {
// 从 min 开始紧凑排列
region.children.forEach((accessor, index) => {
accessor.value.position[axisIndex] = axis.min! + index;
// 从 min 开始紧凑排列，保持相对顺序
sortedPositions.forEach((pos, index) => {
positionMap.set(pos, axis.min! + index);
});
} else if (axis.align === 'end' && axis.max !== undefined) {
// 从 max 开始向前紧凑排列
const count = region.children.length;
region.children.forEach((accessor, index) => {
accessor.value.position[axisIndex] = axis.max! - (count - 1 - index);
const count = sortedPositions.length;
sortedPositions.forEach((pos, 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;
});
}
/**
* shuffle on each axis. for each axis, try to swap position.
* @param region

71
tests/core/region.test.ts
View File

@ -159,14 +159,14 @@ describe('Region', () => {
applyAlign(region);
// 第一轴 (x, axisIndex=0) 对齐：
// 排序：part3(x=2), part1(x=5), part2(x=7) → children=[part3, part1, part2]
// 对齐：part3.position[0]=0, part1.position[0]=1, part2.position[0]=2
// 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, axisIndex=1) 对齐：
// 排序：part1(y=10), part2(y=20), part3(y=30) → children=[part1, part2, part3]
// 对齐：part1.position[1]=0, part2.position[1]=1, part3.position[1]=2
// 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 => ({
@ -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].position).toEqual([2, 1]);
expect(positions[1].id).toBe('p4');
expect(positions[1].position).toEqual([0, 1]);
expect(positions[2].id).toBe('p3');
expect(positions[2].position).toEqual([0, 2]);
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]);
});
});