Port Candidate Provider Demo [yFiles for HTML]

This demo shows how edge creation can be customized by implementing the yfiles.input.IPortCandidateProvider interface.

Add the custom implementation as decoration to the edge decorator of the graph to use it.

Things to Try

Initiate edge creation by dragging from an unselected node (with the left mouse button pressed). Releasing the button finishes edge creation if the mouse is on a valid target and creates a bend otherwise.

Node Types

Red nodes cannot have any edges. You cannot start or end an edge at them. A red port candidate highlights that these nodes are invalid targets.
Only edges from other green nodes can end at green nodes.
Blue nodes provide a set of predefined ports. Only one edge can be connected to each of these ports. Occupied ports are highlighted in red.
Orange nodes provide dynamic port candidates. Edges can start and end anywhere inside these nodes when the Shift key is pressed.

Imprint | Privacy Policy | View on GitHub