Connectors in the diagram component are used to connect two different nodes. Different kinds of diagrams require different places on a node to be connected. In this blog, you will see different types of ports and where they are used so that you can choose the correct type of port for your diagrams.
It is a well-known fact that a connector is used to connect two nodes. By default, connector endpoints are at the boundaries of a node. In several use cases, like circuit diagrams or database diagrams, connectors need to connect to a specific point in a node. This specific point is defined using a port.
The following port types are available:
The node port type is straightforward; it is a predefined point on a node that connectors can attach to. This type of port is suitable for nodes that have ports that do not change. A suitable example is logic gates, where you have a specific number of pins that does not change.
<syncfusion:nodeportviewmodel nodeoffsety=".3" nodeoffsetx="0"> </syncfusion:nodeportviewmodel>
A connector port is similar to a node port, but instead of hosting it in a node, it is hosted on the path of a connector. A suitable example is a sequence diagram.
<syncfusion:connectorportviewmodel length=".2" shape="{StaticResource Ellipse}"></syncfusion:connectorportviewmodel> A dynamic port is used to make parallel connections in diagrams by connecting anywhere on the side of a node. Unlike other ports, a connector does not start or end on a dynamic port’s position. Instead, it is connected to the node’s outer boundaries, pointing toward the port.
<syncfusion:nodeportviewmodel nodeoffsetx=".5" nodeoffsety=".2" x_name="dynamicPort"></syncfusion:nodeportviewmodel>
dynamicPort.Constraints |= PortConstraints.Dynamic;
In some kinds of circuit or block diagrams, an end user might want to select a point to which they want to attach a connector. In this case, a port needs to be created or deleted automatically when connecting or disconnecting a connector. A dock port is a collection of line segments where any point on the segments can be connected. When connected, a port (dynamic port) will be automatically created and added. When disconnected, the port will be automatically deleted. In short, a dock port is a placeholder where multiple connections can be made.
<syncfusion:dockportviewmodel sourcepoint="0,0" targetpoint="0,1">
<syncfusion:dockportviewmodel.ports>
<local:collection></local:collection>
</syncfusion:dockportviewmodel.ports>
</syncfusion:dockportviewmodel>
You can download a sample that demonstrates different port types here: types of ports sample.
In this short post, we have seen that ports help make interactive connections easier by specifying static, dynamic, and restricted places for connectors on diagram nodes. There are many more port options to explore, like restricting in or out connections, controlling port visibility, customizing the appearance of the area around a port, and much more. To explore more about ports, refer to our port documentation.
Try it and let us know your feedback
If you’re already a Syncfusion user, you can download the product setup here. If you’re not yet a Syncfusion user, you can download a free, 30-day trial here.
If you have any questions or require clarification about these features, please let us know in the comments below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!