Class DiagramPort
Represents a port or connection point in the node.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramPort : SfDiagramBase
Remarks
Ports act as the connection points of node and allow them to create connections with only those specific points. There may be any number of ports in a node. You can able to modify the Ports appearance, visibility, positioning, and can add custom shapes to it.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in nodes array.
DiagramNode Node = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
// Initialize port collection
Ports = new ObservableCollection<DiagramPort>() {
new DiagramPort() {
Offset = new NodePortOffset() { X = 0.5, Y = 0.5 },
Visibility = PortVisibility.Visible,
Style= new PortShapeStyle(){ Fill="gray”},
}},
};
NodeCollection.Add(Node);
}
}
Constructors
DiagramPort()
Represents a port or connection point in the node.
Declaration
public DiagramPort()
Properties
AddInfo
It allows the user to store additional information about the ports.
Declaration
public object AddInfo { get; set; }
Property Value
Type | Description |
---|---|
System.Object |
Remarks
Enables the user to store data of any datatype. It will be serialized and deserialized automatically while saving and opening the diagram.
Examples
public class AdditionalInfo
{
public string Description { get; set; }
};
new DiagramPort()
{
Offset = new NodePortOffset() { X = 0.5, Y = 0.5 },
Style = new PortShapeStyle()
{Fill = "gray”},
AddInfo = new AdditionalInfo() { Description = "Port1" }
}
},
Constraints
The constraints property allows you to enable or disable certain behaviors or the port.
Declaration
public PortConstraints Constraints { get; set; }
Property Value
Type | Description |
---|---|
PortConstraints |
Height
Gets or sets the port height.
Declaration
public double Height { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
The height of a port does not include borders or margins and by default its 12 px.
HorizontalAlignment
Describes how a child element is horizontally positioned or stretched within a node.
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type | Description |
---|---|
HorizontalAlignment |
Id
Returns the unique id of the port.
Declaration
public string Id { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
Port Id needs to be unique to use. While creating a port, the user should not provide the same id to other ports.
InEdges
Returns the collection of incoming connector IDs.
Declaration
public string[] InEdges { get; set; }
Property Value
Type | Description |
---|---|
System.String[] |
Margin
Specifies the space from the actual offset values of the port. The default values for the Margin are set to 0 from all sides.
Declaration
public PortMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
PortMargin |
Offset
Specifies the position of the port concerning the boundaries of the node.
Declaration
public NodePortOffset Offset { get; set; }
Property Value
Type | Description |
---|---|
NodePortOffset |
Remarks
Offset values range from 0 to 1. By default, the offset values are set to X= 0.5 and Y=0.5. |
1. When X= 0 and Y = 0, then the port will be position at the top left corner of the node. |
2. When X= 0.5 and Y = 0.5, then the port will be position at the center of the node. |
3. When X= 1 and Y = 1, then the port will be position at the bottom right corner of the node. |
OutEdges
Specifies the collection outgoing connectors id.
Declaration
public string[] OutEdges { get; set; }
Property Value
Type | Description |
---|---|
System.String[] |
PathData
Specifies the custom graphical path (shape) of the Port.
Declaration
public string PathData { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
To create a custom shaped port, the user must set the shape as ‘custom’ and then set the PathData. (A custom graphics path is a set of connected lines, curves, and other simple graphics objects, including rectangles, ellipses, and text. A path works as a single graphics object, so an effect applied to the graphics path will be applied to the port.)
Shape
Specifies the shape of the port, by default it will Square.
Declaration
public PortShapes Shape { get; set; }
Property Value
Type | Description |
---|---|
PortShapes |
Remarks
The below list of shape types is used to define the port shape. |
1. X - Sets the shape as X. |
2. Circle - Sets the shape as Circle. |
3. Square - Sets the shape as Square. |
4. Custom - Sets the shape as Custom.. |
Style
Provides the options to personalize or customize the appearance of port.
Declaration
public PortShapeStyle Style { get; set; }
Property Value
Type | Description |
---|---|
PortShapeStyle |
Remarks
A provided option such as Fill, StrokeColor, StrokeWidth, Gradient, etc.
Examples
new DiagramPort() {
Id = "port1",
Offset = new NodePortOffset() { X = 0, Y = 0.5 },
Visibility = PortVisibility.Visible,
//Set the style for the port
Style= new PortShapeStyle() { Fill = "red", StrokeColor = "black", StrokeWidth = 2},
// Sets the shape of the port as Circle
Width= 12, Height=12, Shape= PortShapes.Circle
}
},
VerticalAlignment
Describes how a port element is vertically positioned or stretched within a node.
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type | Description |
---|---|
VerticalAlignment |
Visibility
specifies the Visibility of the port.
Declaration
public PortVisibility Visibility { get; set; }
Property Value
Type | Description |
---|---|
PortVisibility |
Remarks
The below list of options is used to control the visibility of the ports. |
1. Visible - Default value. The port is visible |
2. Hidden - The port is hidden. |
3. Hover - Shows the port when the mouse hovers a node. |
4. Connect - Shows the port when a connection endpoint is dragged over a node. |
Width
Gets or sets the width of the port.
Declaration
public double Width { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
The width of a port does not include borders or margins and by default its 12 px.