Custom Edge

Edges are more than just paths between points. In yh-flow, you can use the #edge slot to fully control the edge rendering process. This allows you to add complex interactive buttons, real-time status labels, or even dynamic fluid effects to your edges.

Advanced Custom Edge Example

In this example, we add a functional button to the center of the edge. Clicking the button allows you to quickly remove the edge or perform other business operations. The demo uses v-model:edges, keeping the parent component synchronized with the canvas edge list after removal.

Node A

Node B

Edge with Removal Tool

Mechanics

1. Slot Data: The #edge slot exposes the edge data object (including computed labelX and labelY coordinates) and a pre-calculated SVG path command string.
2. SVG Context: Since you are rendering inside an <svg> element, you should use <g> (group) tags to wrap your path and UI overlays together.
3. HTML Overlays (foreignObject): To use standard HTML elements (like div or button) inside the SVG, they must be wrapped in a <foreignObject> with defined width and height.
4. Event Bubbling: Use @mousedown.stop or @click.stop on your overlay components to prevent the Flow engine from triggering selection or other edge-level click handlers.