Explicit ports

Loading interactive example…Open in new tab ↗

Opening the live canvas…

The sender's ports belong to its shape definition. The receiver's two ports are authored on the element and saved with the document. Both use the same resolved geometry, connection tools and binding model.

API	Role
ShapeConnectionDefinition.fixedPorts(...)	Declares stable ports for every element of a type.
ShapeConnectionDefinition.instancePorts(...)	Allows each element to supply its own ports.
Port	Stores an ID, side, offset and appearance; geometry is resolved by the framework.
BoundEndpoint(elementId: ..., portId: ...)	Connects to a port by identity.
session.reconnect(...)	Changes one endpoint as an undoable, validated edit.
session.setConnectorRouter(...)	Changes routing while preserving bound port identities.

Choose Receive below, then Undo. Change routers, move or rotate either node, and hover over a port to start another connection. The example has no custom port painters, hit regions or routing code. Ports remain attachment intent; visible routes stop at the owner contours. Orthogonal routing negotiates the bound shapes; it does not promise arbitrary scene-wide obstacle avoidance.

Source

void receiveAt(DrawingSession s, String portId) => s.reconnect(
  'message',
  atStart: false,
  endpoint: BoundEndpoint(elementId: 'receiver', portId: portId),
);