Skip to content

隐藏 (Hidden)

在流程图中,我们经常需要实现类似于“折叠”或“过滤”视图的高级交互。比起硬生生地从数据中将 Node 或 Edge splice 删掉(这会丢失它的坐标和配置),我们在 Flow 中直接提供了一个非侵入式的 hidden 属性。

隐藏节点与连线示例

点击下方工具栏的复选框,观察部分节点及连线是如何从视图中消失的,但它们并没有被销毁。

可隐藏连线
节点 1
节点 2
节点 3
节点 4
基础隐藏逻辑

为什么使用 hidden

使用 hidden 标志胜过直接从状态数组中删除。它保留了图表的数学完整性(位置、尺寸、父子关系),允许您在无需重新计算布局的情况下瞬间恢复它们。

字段目标说明
Node.hidden单个节点true 时,节点被跳过渲染。其坐标记录被保留。
Edge.hidden单个连线true 时,标准的 SVG 路径将不被绘制。

TIP

级联隐藏:当一个 Node 被隐藏时,所有与其相连(无论是作为起点还是终点)的 Edge 都会被引擎自动隐藏。这防止了在缺少锚点的情况下,“幽灵”连接线在视图中散乱排布。

Released under the MIT License.