Class Port

Represents a port or connection point of the node.

Inheritance

System.Object

DiagramObject

Port

PointPort

Implements

IDiagramObject

System.ICloneable

Inherited Members

DiagramObject.GetParent()

DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)

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
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,
        }
    }
};

ConnectionDirection

Gets or sets the allowed direction for connections to the port. By default, direction of the connection is automatically assigned based on the port's position and the direction of the connector's other endpoint.

Declaration

public PortConnectionDirection ConnectionDirection { get; set; }

Property Value

Type	Description
PortConnectionDirection	The default value will be Auto

Remarks

Auto - Maintains the default behavior of automatic direction calculation.
Left - Restricts connections to only connect to the left side of the port.
Right - Restricts connections to only connect to the right side of the port.
Top - Restricts connections to only connect to the top side of the port.
Bottom - Restricts connections to only connect to the bottom side of the port.

Examples

Node node = new Node()
{
    Ports = new DiagramObjectCollection<PointPort>()
    {
        // Sets the position for the port
        new PointPort() 
        { 
            ID = "port", 
            ConnectionDirection = PortConnectionDirection.Left
        }
    }
};

Constraints

Defines the constraints of port

Declaration

public PortConstraints Constraints { get; set; }

Property Value

Type
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
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
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
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
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
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
System.Collections.Generic.List<System.String>

PathData

Represents the custom geometry(shape) of the port.

Declaration

public string PathData { get; set; }

Property Value

Type
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
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" }, 
        }
    }
};

Gets or sets the message that is displayed when the mouse hovers over a port.

Declaration

public DiagramTooltip Tooltip { get; set; }

Property Value

Type	Description
DiagramTooltip	The tooltip content displayed when hovering over a port. The default value is `null`

The following example demonstrates creating a port with a tooltip in Razor syntax:

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, Y = 0 }, 
        Visibility = PortVisibility.Visible,
        Tooltip = new DiagramTooltip() { Content = "port1"}
        }
    }
};

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
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

DiagramObject.Clone()

Implements

IDiagramObject

System.ICloneable