Custom Edge Creation Demo [yFiles for HTML]

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

Ports and PortCandiates

Each node provides directional ports that are visualized with the NodeStylePortStyleAdapter and a circular ShapeNodeStyle.

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 which does not use 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 maximumDuration to 0 such that a less performance heavy approach is used. This still routes around other nodes but sometimes yields less appealing results.
Channel Edge Router: Uses the ChannelEdgeRouter to layout the edge during the gesture. This implementation is usually faster than the EdgeRouter but may produce node-edge overlaps.

Legal Disclosure | Privacy Policy | View on GitHub