Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramPort - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class DiagramPort

    Represents a port or connection point in the node.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramPort
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramPort : SfDiagramBase
    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
      
    <SfDiagram Height="600px" Nodes="@NodeCollection">
     </SfDiagram>
     @code{
      public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
      protected override void OnInitialized()
      {
       // A node is created and stored in nodes array.
        DiagramNode Node = new DiagramNode()
        {
          // Position of the node
          OffsetX = 250,
          OffsetY = 250,
          // Size of the node
          Width = 100,
          Height = 100,
          Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
          // Initialize port collection
          Ports = new ObservableCollection<DiagramPort>() {
          new DiagramPort() {
               Offset = new NodePortOffset() { X = 0.5, Y = 0.5 },
               Visibility = PortVisibility.Visible,
               Style= new PortShapeStyle(){ Fill="gray”},                
           }},
          };
         NodeCollection.Add(Node);
        }
      }

    Constructors

    DiagramPort()

    Represents a port or connection point in the node.

    Declaration
    public DiagramPort()

    Properties

    AddInfo

    It allows the user to store additional information about the ports.

    Declaration
    public object AddInfo { get; set; }
    Property Value
    Type Description
    System.Object
    Remarks

    Enables the user to store data of any datatype. It will be serialized and deserialized automatically while saving and opening the diagram.

    Examples
      
    public class AdditionalInfo
     {
       public string Description { get; set; }
     };
    new DiagramPort()
    {
        Offset = new NodePortOffset() { X = 0.5, Y = 0.5 },                        
        Style = new PortShapeStyle()
        {Fill = "gray”},
     AddInfo = new AdditionalInfo() { Description = "Port1" }
     }
     },

    Constraints

    The constraints property allows you to enable or disable certain behaviors or the port.

    Declaration
    public PortConstraints Constraints { get; set; }
    Property Value
    Type Description
    PortConstraints

    Height

    Gets or sets the port height.

    Declaration
    public double Height { get; set; }
    Property Value
    Type Description
    System.Double
    Remarks

    The height of a port does not include borders or margins and by default its 12 px.

    HorizontalAlignment

    Describes how a child element is horizontally positioned or stretched within a node

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment

    Id

    Returns the unique id of the port.

    Declaration
    public string Id { get; set; }
    Property Value
    Type Description
    System.String
    Remarks

    Port Id needs to be unique to use. While creating a port, the user should not provide the same id to other ports.

    InEdges

    Returns the collection of incoming connector IDs.

    Declaration
    public string[] InEdges { get; set; }
    Property Value
    Type Description
    System.String[]

    Margin

    Specifies the space from the actual offset values of the port. The default values for the Margin are set to 0 from all sides.

    Declaration
    public PortMargin Margin { get; set; }
    Property Value
    Type Description
    PortMargin

    Offset

    Specifies the position of the port concerning the boundaries of the node.

    Declaration
    public NodePortOffset Offset { get; set; }
    Property Value
    Type Description
    NodePortOffset
    Remarks
    Offset values range from 0 to 1. By default, the offset values are set to X= 0.5 and Y=0.5.
    1. When X= 0 and Y = 0, then the port will be position at the top left corner of the node.
    2. When X= 0.5 and Y = 0.5, then the port will be position at the center of the node.
    3. When X= 1 and Y = 1, then the port will be position at the bottom right corner of the node.

    OutEdges

    Specifies the collection outgoing connectors id.

    Declaration
    public string[] OutEdges { get; set; }
    Property Value
    Type Description
    System.String[]

    PathData

    Specifies the custom graphical path (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 as ‘custom’ and then set 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 an effect applied to the graphics path will be applied to the port.)

    Shape

    Specifies the shape of the port, by default it will Square.

    Declaration
    public PortShapes Shape { get; set; }
    Property Value
    Type Description
    PortShapes
    Remarks
    The below list of shape types is used to define the port shape.
    1. X - Sets the shape as X.
    2. Circle - Sets the shape as Circle.
    3. Square - Sets the shape as Square.
    4. Custom - Sets the shape as Custom..

    Style

    Provides the options to personalize or customize the appearance of port

    Declaration
    public PortShapeStyle Style { get; set; }
    Property Value
    Type Description
    PortShapeStyle
    Remarks

    A provided option such as Fill, StrokeColor, StrokeWidth, Gradient, etc.

    Examples
    new DiagramPort() {
      Id = "port1",
      Offset = new NodePortOffset() { X = 0, Y = 0.5 },
      Visibility = PortVisibility.Visible,
      //Set the style for the port
      Style= new PortShapeStyle() { Fill = "red", StrokeColor = "black", StrokeWidth = 2},
      // Sets the shape of the port as Circle
      Width= 12, Height=12, Shape= PortShapes.Circle
      }
     },

    VerticalAlignment

    Describes how a port element is vertically positioned or stretched within a node.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment

    Visibility

    specifies the Visibility of the port.

    Declaration
    public PortVisibility Visibility { get; set; }
    Property Value
    Type Description
    PortVisibility
    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.

    Width

    Gets or sets the width of the port.

    Declaration
    public double Width { get; set; }
    Property Value
    Type Description
    System.Double
    Remarks

    The width of a port does not include borders or margins and by default its 12 px.

    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved