Blazor

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class Port

    Show / Hide Table of Contents

    Class Port

    Represents a port or connection point of the node.

    Inheritance
    System.Object
    DiagramObject
    Port
    PointPort
    Implements
    IDiagramObject
    System.ICloneable
    Inherited Members
    DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)
    DiagramObject.GetParent()
    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
    DiagramObject.Clone()

    Implements

    IDiagramObject
    System.ICloneable
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved