Octilinear Edge Editing
This demo shows how to implement interactive editing of octilinear edges.
OCTILINEAR is a routing style where each edge
consists of vertical, horizontal, and diagonal segments. This edge routing style is
preserved throughout all interactive editing operations.
The demo combines several techniques:
- A custom edge style that renders bends as octilinear segment cuts.
- Specialized interaction handlers for dragging octilinear segments.
-
A layout post-processing stage that prepares the routed edges for the custom edge style.
Things to Try:
- Drag a diagonal segment to adjusts its length.
-
Drag a diagonal segment while holding Ctrl to adjust the length of all
diagonal segments along the entire edge.
-
Drag a diagonal segment while holding Shift to move the segment while keeping
neighboring segments orthogonal.
- Select an edge to highlight the center of diagonal segments.
-
Click a segment's center to show a handle that allows moving the segment or deleting
its corresponding bend.
-
Drag the slider in the toolbar to adjust the length of diagonal segments in the entire
graph.
-
Click the "Apply Layout" button to run a hierarchical layout with an
octilinear edge routing style.
-
Click the "Apply Router" button to only route edges with an octilinear routing
style.
Demos
Documentation