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

• Orthogonal Edge Editing Demo
• Layout Styles: Edge Router Demo

Documentation

• Orthogonal Edge Editing