补齐 UI 编辑器多树排布验收项并列出其余五条缺口

- tests/uiEditorState.test.ts 新增「新树默认落在所有现有树右侧并与最小 top 对齐」:直接跑 createTree 入口,断言第一棵 [0,0]、第二棵按已有右边界加 UI_TREE_PADDING、把第二棵下移后第三棵仍按最小 top 对齐
- 变异验证:把 deriveTreeOffset 的 minY 改成取最后一棵树的 top 后只有该用例变红,改回后四套用例 72 passed
- 里程碑勾选第 1 条验收,并把其余 5 条各自缺什么断言逐条写清(root handle、三个开关默认值、activeImageId、首次联合 fit、拖动 undo/redo 与保存恢复)
This commit is contained in:
kdletters
2026-09-28 17:30:28 +08:00
parent e92d5d5f92
commit 931250e99a
3 changed files with 50 additions and 2 deletions
@@ -12,7 +12,9 @@ import type { SpriteAsset } from '../src/features/ui-editor/types/SpriteAsset';
import type { State } from '../src/features/ui-editor/types/State';
import type { UIDesignImage } from '../src/features/ui-editor/types/UIDesignImage';
import {
createTree,
EMPTY_UI_EDITOR_STATE,
UI_TREE_PADDING,
useUiEditorState,
} from '../src/features/ui-editor/useUiEditorState';
@@ -737,3 +739,38 @@ describe('useUiEditorState', () => {
});
});
});
describe('多树预览的默认排布', () => {
it('新树默认落在所有现有树右侧并与最小 top 对齐', () => {
const state: State = {
...structuredClone(EMPTY_UI_EDITOR_STATE),
ui_design_images: {
'page-1': image('page-1'),
'page-2': image('page-2'),
'page-3': image('page-3'),
},
ui_trees: [],
};
const first = createTree(state, 'page-1');
expect(first.root.offset).toEqual({ min: [0, 0], max: [100, 80] });
state.ui_trees = [first];
const second = createTree(state, 'page-2');
expect(second.root.offset).toEqual({
min: [100 + UI_TREE_PADDING, 0],
max: [200 + UI_TREE_PADDING, 80],
});
// 把第二棵树整体下移:第三棵必须按「所有现有树的最小 top」对齐(即第一棵的 0),
// 而不是跟着最后一棵树的 top 走;横向则取所有树里最右边界再加固定 padding。
second.root.offset = { min: [148, 60], max: [248, 140] };
state.ui_trees = [first, second];
const third = createTree(state, 'page-3');
expect(third.root.offset).toEqual({
min: [248 + UI_TREE_PADDING, 0],
max: [348 + UI_TREE_PADDING, 80],
});
});
});
@@ -39,4 +39,8 @@
- 数据与布局契约在现役代码里:`features/ui-editor/types/NodeOffset.ts`(含 min/max 派生)、`src-tauri/src/ui_editor/layout/offset.rs`、`view/ui-editor/components/preview/previewGrid.ts`。
- 三个独立开关在 `view/ui-editor/index.tsx` 里渲染:`显示框线` / `显示原图` / `显示组件`。
- 定向用例:`npx vitest run tests/uiEditorPreview.test.tsx tests/previewWorkspaceZoom.test.tsx tests/previewRightPanGesture.test.ts tests/uiEditorPage.test.ts --root apps/ai-game-creator-shell` → **59 passed / 0 failed**。
- 仍待补:真机手感与多树布局的目视验收(本机只到定向用例级)。
- 仍待补:真机手感与多树布局的目视验收(本机只到定向用例级)。
## 本轮核对(2026-09-28)
- 里程碑第 1 条验收(新树默认排布)已由 ests/uiEditorState.test.ts 的新用例 + 变异验证钉住,四套 UI 编辑器用例 72 passed;其余 5 条的缺口与各自需要补的断言见里程碑《本轮核对》。
@@ -33,7 +33,7 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的
## 验收标准
- [ ] 新树默认位于所有现有树右侧并与最小 top 对齐。
- [x] 新树默认位于所有现有树右侧并与最小 top 对齐。
- [ ] 原图与组件随 root 一起移动,拖动结束进入 undo/redo 并可保存恢复。
- [ ] root 不显示 resize handles,子节点 resize 不回归。
- [ ] 三个开关默认 showFrame=true、showOriginImage=true、showComponent=false,且互相独立。
@@ -51,4 +51,11 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的
- 数据与布局契约在现役代码里:`features/ui-editor/types/NodeOffset.ts`(含 min/max 派生)、`src-tauri/src/ui_editor/layout/offset.rs`、`view/ui-editor/components/preview/previewGrid.ts`。
- 三个独立开关在 `view/ui-editor/index.tsx` 里渲染:`显示框线` / `显示原图` / `显示组件`。
- 定向用例:`npx vitest run tests/uiEditorPreview.test.tsx tests/previewWorkspaceZoom.test.tsx tests/previewRightPanGesture.test.ts tests/uiEditorPage.test.ts --root apps/ai-game-creator-shell` → **59 passed / 0 failed**。
- 本轮补齐的验收项(第 1 条):新增 `tests/uiEditorState.test.ts` 的「新树默认落在所有现有树右侧并与最小 top 对齐」——直接跑 `createTree` 入口:第一棵落在 `[0,0]`,第二棵落在「第一棵右边界 + `UI_TREE_PADDING`」且 top 与现有最小 top 对齐;把第二棵整体下移后,第三棵仍然按**最小** top(而不是最后一棵的 top)对齐,横向取所有树最右边界。变异验证:把 `deriveTreeOffset` 的 `minY` 改成取最后一棵树的 top 后,只有这条用例变红(1 failed / 17 passed),改回后恢复绿;本轮四套 UI 编辑器用例合计 **72 passed**。
- 仍未覆盖的 5 条验收项(都不是运行时项,缺的是自动化用例,已按条列清):
- 「原图与组件随 root 一起移动,拖动结束进入 undo/redo 并可保存恢复」:现有 `uiEditorState.test.ts` 只覆盖 `set-tree-offset` 命令本身,没有断言预览渲染跟随 root 位移与拖动落点进 undo/redo、保存后能读回。
- 「root 不显示 resize handles,子节点 resize 不回归」:`uiEditorPreview.test.tsx` 的 `shows final-preview node frames and resize handles only when requested` 覆盖 handle 可见性分支,但没有把「root 无 handle」写成独立断言。
- 「三个开关默认 showFrame=true、showOriginImage=true、showComponent=false,且互相独立」:三个开关在 `view/ui-editor/index.tsx` 渲染,现有用例只把它们当入参传,没有断言页面初始值。
- 「预览选择不修改 activeImageId;左侧图片选择和 Inspector 既有切换保持」:`activeImageId` 目前只出现在用例夹具里,没有任何断言。
- 「仅首次进入和手动适配触发联合 fit」:手动适配一半由 `previewWorkspaceZoom.test.tsx` 的 `refits the preview when the zoom percentage button is clicked` 覆盖,首次进入只触发一次联合 fit 没有断言。
- 仍待补:真机手感与多树布局的目视验收(本机只到定向用例级)。