JavaScript is required

Custom Selected Line Toolbar

This example shows how to attach a custom floating toolbar to the currently selected line in a relation-graph canvas. The toolbar follows the line's live geometry and lets users change line color, shape, and width or remove the line, while the surrounding helper window also exposes canvas settings and image export.

Edit on GraphPilot

Custom Selected Line Toolbar

What This Example Builds

This example builds a small relation-graph editing workspace where clicking an existing line opens a floating toolbar above that line. The toolbar lets users change the selected line’s color, shape, and width, or remove the line entirely.

The visual result is intentionally editor-like rather than domain-specific. A dotted canvas background, a helper window, and a graph-attached overlay make the example read as a focused reference for