Class Port

Represents a port or connection point of the node. Provides a means for connecting nodes at specific locations.

Inheritance

System.Object

DiagramObject

Port

ConnectorPort

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 connection points allowing nodes to create connections at specific points. There can be multiple ports per node, enabling the customization of their appearance, visibility, positioning, and shapes.

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 a collection of custom properties associated with a port.

Declaration

public Dictionary<string, object> AdditionalInfo { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A dictionary that allows users to store data of various types. By default, the dictionary is initialized as an empty collection.

Examples

// Initialize a dictionary for additional information
Dictionary<string, object> dict = new Dictionary<string, object>();

// Create a new Node and assign the additional information
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.

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

Gets or sets the constraints of the port, which define its behavior and capabilities.

Declaration

public PortConstraints Constraints { get; set; }

Property Value

Type	Description
PortConstraints	A PortConstraints representing the constraints applied to the port. The default value is Default.

Remarks

This property determines what operations can be performed on the port and how it interacts with other diagram elements.

Examples

Node node = new Node()
{
    Ports = new DiagramObjectCollection<PointPort>()
    {
        // Sets the constraints for the port
        new PointPort() 
        { 
            ID = "port",
            Constraints = PortConstraints.Default,
        }
    }
};

Height

Gets or sets the height of the port.

Declaration

public double Height { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the height of the port. The default value is `0.0`.

Remarks

This property defines the vertical dimension of the port, which is part of the node's connection interface in a diagram.

Examples

Node node = new Node()
{
    Ports = new DiagramObjectCollection<PointPort>()
    {
        // Sets the position for the port
        new PointPort() 
        { 
            ID = "port",
            Height = 10,
        }
    }
};

HorizontalAlignment

Gets or 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	A HorizontalAlignment representing the horizontal alignment of the port. The default value is Stretch.

Remarks

This property determines how the port is horizontally positioned relative to its parent.

Examples

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

ID

Gets or sets the unique identifier of the diagram object.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A System.String representing the identifier. The default value is null.

Remarks

This identifier must be unique across all ports in the diagram to ensure correct identification and functioning.

Examples

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

InEdges

Represents a collection of connectors that are linked to the port.

Declaration

public List<string> InEdges { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<System.String>	A System.Collections.Generic.List<> representing the collection of connector identifiers connected to the port. The default value is an empty collection.

Remarks

This list captures all connectors currently linked to the port, allowing for efficient traversal and operations on the connected elements within the diagram.

Margin

Gets or sets the space from the actual offset values of the port.

Declaration

public DiagramThickness Margin { get; set; }

Property Value

Type	Description
DiagramThickness	A DiagramThickness that represents the margin on each side of the port. The default value is a DiagramThickness where all sides are `0`.

Remarks

The Margin property is useful for setting additional spacing around a port, allowing you to effectively adjust its placement relative to the node.

Examples

Demonstrates how to set the margin for a port in a node.

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

Represents a collection of connector identifiers that are connected to the port.

Declaration

public List<string> OutEdges { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<System.String>	A System.Collections.Generic.List<> containing the identifiers of connectors. Initialized as an empty collection.

Remarks

This property is useful for managing and accessing the connections of a port in the diagram.

PathData

Gets or sets the custom geometry (shape) of the port.

Declaration

public string PathData { get; set; }

Property Value

Type	Description
System.String	A System.String representing the custom graphics path data for the port shape. The default value is null.

Remarks

To create a custom-shaped port, set the Shape to Custom and provide the PathData.

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

Gets or sets the shape (built-in shape) of the port.

Declaration

public PortShapes Shape { get; set; }

Property Value

Type	Description
PortShapes	A PortShapes specifying the shape of the port. The default value is Square.

Examples

Node node = new Node()
{
    Ports = new DiagramObjectCollection<PointPort>()
    {
        new PointPort() 
        { 
            ID = "port",
            Shape = PortShapes.Circle,
        }
    }
};

Style

Gets or sets the appearance of the port.

Declaration

public ShapeStyle Style { get; set; }

Property Value

Type	Description
ShapeStyle	A ShapeStyle object describing the visual styling of the port. The default value is a new ShapeStyle instance with default styling properties.

Remarks

The Style property is essential for customizing the look of the port, including its fill color, stroke, and other visual aspects.

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 relative to its immediate parent (node/connector).

Declaration

public VerticalAlignment VerticalAlignment { get; set; }

Property Value

Type	Description
VerticalAlignment	A VerticalAlignment specifying the alignment. The default value is Top.

Remarks

This property determines how the port is aligned vertically within its parent.

Examples

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

Visibility

Gets or sets the visibility of the port.

Declaration

public PortVisibility Visibility { get; set; }

Property Value

Type	Description
PortVisibility	A PortVisibility representing the port visibility status. The default value is Visible.

Remarks

The following options are available to control the visibility of the ports:

Visible - Default value. The port is visible.
Hidden - The port is hidden.
Hover - Shows the port when the mouse hovers over a node.
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	A System.Double representing the width of the port. The default value is `12`.

Remarks

The width is measured in pixels and does not include borders or margins. Changing the width can affect the layout and visual appearance of the port within its parent Node.

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	A new instance of the Port representing a copy of the current port.

Overrides

DiagramObject.Clone()

Implements

IDiagramObject

System.ICloneable