diff --git a/editor/README.md b/editor/README.md index a2dacde..c3e5bf1 100644 --- a/editor/README.md +++ b/editor/README.md @@ -112,3 +112,49 @@ interface Choice { timeLimit?: number // 限时秒数,0=不限 } ``` + +## 图布局 + +场景节点图使用 [dagre](https://github.com/dagrejs/dagre) 进行层级化自动布局。 + +### 布局策略演进 + +| 版本 | 方式 | 问题 | +|------|------|------| +| v1 | 网格排列 `(i % 4) * 220` | 不反映拓扑关系 | +| v2 | BFS 层级分配 | 多父同子时边交叉严重 | +| v3 (当前) | Dagre (Sugiyama 算法) | — | + +Dagre 自动处理: + +- **层内排序** — Barycenter 启发式最小化边交叉 +- **多父同子** — 插入虚拟节点,边不交织 +- **回边处理** — 循环引用自动反向路由 +- **间距优化** — 根据节点度自适应分布 + +### 配置 + +布局参数在 `editor/composables/useLayout.ts`: + +| 参数 | 值 | 说明 | +|------|-----|------| +| `rankdir` | `'LR'` | 左→右方向 | +| `nodesep` | `50` | 同层节点垂直间距(px) | +| `ranksep` | `240` | 层级间水平间距(px) | +| `marginx` / `marginy` | `60` | 画布四周边距(px) | +| `NODE_W` / `NODE_H` | `180 × 60` | 节点尺寸,用于居中偏移 | + +### 连线样式 + +- 边类型:`SmoothStepEdge`(正交线,拐角带圆角),在 `SceneGraph.vue` 通过 `:default-edge-type="SmoothStepEdge"` 全局设置 +- 动画:已禁用 +- 回边:Dagre 自动路由,Vue Flow 渲染为从右往左的回线 + +### 调参指南 + +| 现象 | 调整 | +|------|------| +| 节点堆叠拥挤 | 增大 `nodesep` / `ranksep` | +| 节点间距过大 | 减小 `ranksep` | +| 边碰到画布边缘 | 增大 `marginx` / `marginy` | +| 节点定位偏左/上 | 检查 `NODE_W` / `NODE_H` 是否匹配实际节点尺寸 |