自定义连线 (Custom Edge)

连线不仅仅是两个点之间的路径。在 yh-flow 中，您可以利用 #edge 插槽完全接管连线的渲染过程。这允许您在连线右上方添加复杂的交互按钮、实时状态标签，甚至是动态的流体特效。

高级自定义边示例 (Advanced Custom Edge Example)

在该示例中，我们向连线中心添加了一个功能按钮。点击按钮可以快速删除该连线或执行其它业务操作。示例使用 v-model:edges，删除后父组件与画布连线列表保持同步。

节点 A

节点 B

带移除工具的连线

实现原理解析

1. 插槽数据：#edge 插槽暴露了 edge 数据对象（包括计算出的 labelX 和 labelY 坐标）以及一个预计算好的 SVG path 命令字符串。
2. SVG 上下文：由于您是在 <svg> 元素内部进行渲染，因此应使用 <g>（分组）标签将路径和 UI 覆盖层包装在一起。
3. HTML 覆盖层 (foreignObject)：要在 SVG 内部使用标准的 HTML 元素（如 div 或 button），必须将它们包装在定义了 width 和 height 的 <foreignObject> 中。
4. 事件冒泡：在覆盖层按钮上使用 @click.stop，以防止 Flow 引擎触发选择或其他边级别的点击处理程序。