Class DiagramPort

Represents a port or connection point in the node.

Inheritance
System.Object
SfDiagramBase
DiagramPort
Inherited Members
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.