Highlight Line and Endpoints on Click
This example shows a top-down tree where clicking a relation line highlights that line and its two endpoint nodes. It uses relation-graph instance APIs to reset previous state, apply temporary classes at runtime, and clear the emphasis again when the canvas background is clicked.
Highlight a Clicked Line and Its Endpoint Nodes
What This Example Builds
This example builds a compact top-down tree viewer where the selectable object is the relation line itself. The screen shows a wide-spaced orthogonal hierarchy with small purple node chips, visible line labels, and a floating helper window above the full-height canvas.
When a user clicks one line, the example widens that line, switches its label chip to a dark purple treatment, and adds a ring highlight to the line’