Custom Edge Creation Demo

This demo shows how to provide directional IPorts and PortCandidates and demonstrates several customizations for the edge creation gesture.

Ports and PortCandidates

Each node provides directional ports that are visualized with a circular ShapePortStyle.

This demo restricts edge creation to the provided PortCandidates. Therefore, the PortCandidates are also shown on the source on hover to indicate that edge creation may start there.

The Show Ports button in the toolbar toggles the visualization of the ports. Note how the PortCandidates are still visible on hover even if the ports are not visualized anymore.

Edge Creation

The edge color of newly created edges is dynamically determined by the source node from which the edge creation gesture originates.

Enable Target Node toggles whether edge creation should create a target node as well. This enables users to end the creation gesture on the empty canvas.

Interactive Edge Routing

This demo illustrates different approaches to interactive edge routing during edge creation:

• Default Orthogonal: Utilizes the OrthogonalEdgeEditingContext by enabling orthogonal editing on the edge style which does not require a dedicated layout algorithm. It is the fastest approach but does not consider port directions or other nodes.
• Edge Router (Quality): Applies the EdgeRouter with each move during the edge creation gesture. This is the most expensive approach but yields nicely routed edges.
• Edge Router (Performance): Applies the EdgeRouter as well but sets its stopDuration to 0 such that a less performance heavy approach is used. This still routes around other nodes but sometimes yields less appealing results.