隐藏 (Hidden)
在流程图中,我们经常需要实现类似于“折叠”或“过滤”视图的高级交互。比起硬生生地从数据中将 Node 或 Edge splice 删掉(这会丢失它的坐标和配置),我们在 Flow 中直接提供了一个非侵入式的 hidden 属性。
隐藏节点与连线示例
点击下方工具栏的复选框,观察部分节点及连线是如何从视图中消失的,但它们并没有被销毁。
基础隐藏逻辑
为什么使用 hidden?
使用 hidden 标志胜过直接从状态数组中删除。它保留了图表的数学完整性(位置、尺寸、父子关系),允许您在无需重新计算布局的情况下瞬间恢复它们。
| 字段 | 目标 | 说明 |
|---|---|---|
Node.hidden | 单个节点 | 为 true 时,节点被跳过渲染。其坐标记录被保留。 |
Edge.hidden | 单个连线 | 为 true 时,标准的 SVG 路径将不被绘制。 |
TIP
级联隐藏:当一个 Node 被隐藏时,所有与其相连(无论是作为起点还是终点)的 Edge 都会被引擎自动隐藏。这防止了在缺少锚点的情况下,“幽灵”连接线在视图中散乱排布。