Port Alignment Demo

This demo shows how to implement port alignment in HierarchicalLayout.

The sample data contains edges that belong to different path groups, indicated by the different edge color. The demo code aligns all source and target ports with the edge paths by configuring the sourcePortAlignmentIds and targetPortAlignmentIds properties of the PortData.

As a result, the aligned source and target ports at every node have the same y-coordinate, creating the visual effect in which the edges seem to pass through the node.

Port alignment is particularly useful in graphs where there are paths passing through. It is less restrictive in comparison to port grouping, since the ports of the aligned edges can lie on two opposite sides of a node.

Things to Try

• Toggle between layouts with and without port alignment with the Align Ports button in the toolbar.
• Adjust Minimum Port Distance with the slider in the toolbar and observe how nodes automatically resize to meet the minimum.