可更新连线 (Updatable Edges)
yh-flow 提供了“可更新连线”功能,允许用户重新指定现有连线的端点。
工作原理
当连线被标记为 updatable: true 并在视图中被选中时,其两端(起点和终点)会出现蓝色圆点手柄。拖拽任一手柄到其他节点即可更新连接。若未看到手柄,请先点击该连线以选中。
基础用法
下方示例中连线已默认选中,两端会显示蓝色圆点手柄。尝试将终点从 节点 B 拖到 节点 C。若点击了画布空白导致连线取消选中,再次点击连线即可重新显示手柄。
交互式连线更新
API 配置
Edge 属性
在 Edge 对象中设置以下属性:
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
updatable | boolean | 'source' | 'target' | false | 是否启用重连手柄。若设为 'source' 或 'target' 则只允许更新单端。 |
selected | boolean | false | 手柄仅在连线选中时显示。若希望一加载就显示手柄,可将该连线设为 selected: true。 |
curvature | number | 0.25 | 贝塞尔曲线的曲率(0.0 到 1.0)。 |
labelShowBg | boolean | false | 是否显示标签背景色(配合 labelBgColor 使用)。 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
@edge-update | { edge: Edge, connection: Connection } | 用户完成连线端点重连时触发。 |