Class Port
Represents a port or connection point of the node.
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class Port : DiagramObject, IDiagramObject, ICloneable
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
Node node = new Node()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
// Initialize port collection
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
Style = new ShapeStyle() { Fill = "gray" },
Offset = new DiagramPoint() { X = 0.5, Y = 0.5 },
Visibility = PortVisibility.Visible
}
}
};
Constructors
Port()
Initializes a new instance of the Port.
Declaration
public Port()
Port(Port)
Creates a new instance of the Port from the given Port.
Declaration
public Port(Port src)
Parameters
Type | Name | Description |
---|---|---|
Port | src | Port |
Properties
AdditionalInfo
Gets or sets the custom properties of a port.
Declaration
public Dictionary<string, object> AdditionalInfo { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.Dictionary<System.String, System.Object> |
Remarks
Enables the user to store data of any data type. It will be serialized and deserialized automatically while saving and opening the diagram.
Examples
Dictionary<string, object> dict = new Dictionary<string, object>();
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
AdditionalInfo = dict,
}
}
};
Constraints
Defines the constraints of port
Declaration
public PortConstraints Constraints { get; set; }
Property Value
Type | Description |
---|---|
PortConstraints |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Constraints = PortConstraints.Default,
}
}
};
Height
Sets the height of the port
Declaration
public double Height { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Height = 10,
}
}
};
HorizontalAlignment
Sets the horizontal alignment of the port with respect to its immediate parent(node/connector)
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type | Description |
---|---|
HorizontalAlignment |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
HorizontalAlignment = HorizontalAlignment.Stretch,
}
}
};
ID
Represents the unique id of the diagram object.
Declaration
public string ID { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
1. The ID needs to be unique. While creating a port, the user should not use the same id to other ports. |
2. The ID needs to be unique. While creating a port, the user should not use the same id to other ports. |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
}
}
};
InEdges
Defines the collection of connectors that are connected to the port.
Declaration
public List<string> InEdges { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<System.String> |
Margin
Defines the space from the actual offset values of the port. The default values for the Margin are 0 on all sides.
Declaration
public DiagramThickness Margin { get; set; }
Property Value
Type | Description |
---|---|
DiagramThickness |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Margin = new DiagramThickness(){ Left = 5, Top = 5, Bottom = 5, Right = 5},
}
}
};
OutEdges
Defines the collection of connectors that are connected to the port.
Declaration
public List<string> OutEdges { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<System.String> |
PathData
Represents the custom geometry(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 to ‘custom’ and then 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 any effect applied to the graphic path will also be applied to the port..)
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Shape = PortShapes.Custom,
PathData = "M100,200 C100,100 250,100 250,200 S400,300 400,200",
}
}
};
Shape
Represents the shape (built-in shape) of the port.
Declaration
public PortShapes Shape { get; set; }
Property Value
Type | Description |
---|---|
PortShapes | The default value will be Square |
Remarks
The below list of shape types is used to define the port shape. |
1. X - Sets the shape to X. |
2. Circle - Sets the shape to Circle. |
3. Square - Sets the shape to Square. |
4. Custom - Sets the shape to Custom.. |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Shape = PortShapes.Circle,
}
}
};
Style
Represents the appearance of the port.
Declaration
public ShapeStyle Style { get; set; }
Property Value
Type | Description |
---|---|
ShapeStyle |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Height = 10,
Style = new ShapeStyle() { Fill = "gray" },
}
}
};
VerticalAlignment
Gets or sets the vertical alignment of the port to its immediate parent(node/connector).
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type | Description |
---|---|
VerticalAlignment |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
VerticalAlignment = VerticalAlignment.Stretch,
}
}
};
Visibility
Represents the visibility of the port. By default, the port becomes visible when the mouse hovers over the node.
Declaration
public PortVisibility Visibility { get; set; }
Property Value
Type | Description |
---|---|
PortVisibility | The default value will be Visible |
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. |
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Visibility = PortVisibility.Visible
}
}
};
Width
Gets or sets the width of the port.
Declaration
public double Width { get; set; }
Property Value
Type | Description |
---|---|
System.Double | The default value is 12px. |
Remarks
The width of a port does not include borders or margins.
Examples
Node node = new Node()
{
Ports = new DiagramObjectCollection<PointPort>()
{
// Sets the position for the port
new PointPort()
{
ID = "port",
Width = 10,
}
}
};
Methods
Clone()
Creates a new port that is a copy of the current port.
Declaration
public override object Clone()
Returns
Type | Description |
---|---|
System.Object | Port |