Class Port

Represents a port or connection point of the node.

Inheritance
System.Object
DiagramObject
Port
PointPort
Implements
System.ICloneable
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
Overrides

Implements

System.ICloneable