Ports interaction in JavaScript Diagram control | Syncfusion®
18 Nov 20182 minutes to read
Draw connector from port
The port can be used to create connector by enabling Draw constraints to the constraints property. By default, the connector segment type is set to Orthogonal.
The following code explains how to draw the connector by using the port constraints.
Draw different connector types from port
You can change the default connector type while drawing the connector from the port by setting the specific connector type in connector defaults. This enables the drawing of various connector types from the port, including:
- Straight
- Bezier
- Orthogonal
The following code explains how to draw different connectors by using the port constraints.
Port drag
The port drag feature allows users to click and drag a port using the mouse. This functionality can be enabled by setting the port constraints to Drag.
The following code explains how to enable port drag.
Automatic Port Creation
The Diagram component allows you to dynamically create ports on nodes or connectors by clicking and dragging the mouse while holding the Control (Ctrl) key. This feature is disabled by default and can be enabled by using the DiagramConstraints.AutomaticPortCreation constraint.
You can also remove a port using the same Ctrl + Click interaction, but only if the port is not currently connected to any connector.
The following example shows how to enable automatic port creation:
Port tooltip
The port tooltip feature allows a tooltip to be displayed when hovering over a port. This functionality can be enabled by setting the port constraints to Tooltip.
The following code explains how to enable port tooltip.
Events
There are several events that can be triggered while interacting with ports. These events are listed in the table below.
| Event | Description |
|---|---|
Click |
Triggers when the port is clicked. |
Element Draw |
Triggers when drawing a connector from the port. |
Position Change |
Triggers when the port is dragged. |
Connection Change |
Triggers when a connector is connected or disconnected from the port |
The following example shows how to get these events in diagram.