Appearance
The appearance of ports can be customized by using strokeColor, strokeWidth, fill and opacity properties of the port. Customize the port size by using the width and height properties of port. The ports visibility property allows you to define, when the port should be visible.
For more information about port visibility refer Port Visibility
The following code illustrates how to change the appearance of port.
Change appearance of port at runtime
The appearance of port can be changed at runtime by customizing the style of port. The following code illustrates how to change the appearance of port at runtime.
Port visibility
The visibility of the ports is determined by the visibility property of port using the PortVisibility enum, This enum includes properties such as Connect, Hidden, Hover, and Visible. By default, the port visibility is set to Hidden.
| Property | Definition |
|---|---|
| Hover | Port is visible when mousehover the DiagramElement. |
| Hidden | Port is not visible for the DiagramElement. |
| Connect | The port becomes visible when you hover the connector thumb over the DiagramElement where the port resides. |
| Visible | Port is always visible for the DiagramElement. |
Port shape
The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to Port Shapes. By default the port shape is Square.
Types of port shapes
We have provided some basic built-in PortShapes for the port. Find the shapes as follows.
- Circle
- Custom
- Square
- X
Customize the port’s shape
Custom shape support has been provided for port. You can able to add the custom path data instead of build-in shapes.
If you need to render a custom shape, then you can set shape as Custom and define path using pathData property of port.
The following code illustrates how to set custom shape to the port.
Constraints
The constraints property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to Port Constraints.
The PortConstraints may have multiple behaviors like listed below:
| Constraints | Usage |
|---|---|
| None | Disables all behaviors of Port. |
| Draw | Enables or disables to draw a connector. |
| InConnect | Enables or disables connecting to the incoming Connector. |
| OutConnect | Enables or disables connecting the outgoing Connector. |
| ToolTip | Enables or disables the Tooltip for the ports. |
| Drag | Enables or disables dragging of port. |
| InheritTooltip | Enables or disables the Tooltip for the ports. |