Skip to content

可更新连线 (Updatable Edges)

yh-flow 提供了“可更新连线”功能,允许用户重新指定现有连线的端点。

工作原理

当连线被标记为 updatable: true 并在视图中被选中时,其两端(起点和终点)会出现蓝色圆点手柄。拖拽任一手柄到其他节点即可更新连接。若未看到手柄,请先点击该连线以选中。

基础用法

下方示例中连线已默认选中,两端会显示蓝色圆点手柄。尝试将终点从 节点 B 拖到 节点 C。若点击了画布空白导致连线取消选中,再次点击连线即可重新显示手柄。

UPDATEABLE EDGE
NODE <STRONG>A</STRONG>
NODE <STRONG>B</STRONG>
NODE <STRONG>C</STRONG>
交互式连线更新

API 配置

Edge 属性

Edge 对象中设置以下属性:

属性类型默认值说明
updatableboolean | 'source' | 'target'false是否启用重连手柄。若设为 'source''target' 则只允许更新单端。
selectedbooleanfalse手柄仅在连线选中时显示。若希望一加载就显示手柄,可将该连线设为 selected: true
curvaturenumber0.25贝塞尔曲线的曲率(0.0 到 1.0)。
labelShowBgbooleanfalse是否显示标签背景色(配合 labelBgColor 使用)。

事件

事件名参数说明
@edge-update{ edge: Edge, connection: Connection }用户完成连线端点重连时触发。

Released under the MIT License.