How to position node’s port

5 Aug 202112 minutes to read

Diagram allows you to customize the position and appearance of the port efficiently. Port can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the PointPort class. Ports of a node can be positioned using the following properties of PointPort.

  • Offset
  • HorizontalAlignment
  • VerticalAlignment
  • Margin

Offset

The Offset property is used to align the Ports based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in nodes collection.
        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>()
            {
                new PointPort() 
                {
                    ID = "port1",
                    Offset = new Point() { X = 0, Y = 0.5 },
                    Visibility = PortVisibility.Visible,
                    //Set the style for the port
                    Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"},
                    // Sets the shape of the port as Square
                    Width= 12, Height=12, Shape= PortShapes.Square,
                }
            },
        };
        nodes.Add(node);
    }
}

Offset

The following code shows the relationship between the shape port position and path port offset (fraction values).

Offset values Output
(0,0) Left
(0,0.5) Left
(0,1) Left
(0.5,0) Left
(0.5,0.5) Left
(0.5,1) Left
(1,0) Left
(1,0.5) Left
(1,1) Left

Type of the offset property for node’s shape port is NodePortOffset.

Horizontal and vertical alignment

The HorizontalAlignment property of the port is used to set how the port is horizontally aligned at the port position determined from the fraction values. The VerticalAlignment property is used to set how the port is vertically aligned at the port position.

The following table shows all the possible alignments visually with offset (0, 0).

Horizontal Alignment Vertical Alignment Output with Offset(0,0)
Left Top Left Top Port Alignment
Center Top Center Top Port Alignment
Right Top Right Top Port Alignment
Left Center Left Center Port Alignment
Center Center Center Center Port Alignment
Right Center Right Center Port Alignment
Left Bottom Left Bottom Port Alignment
Center Bottom Center Bottom Port Alignment
Right Bottom Right Bottom Port Alignment

The following code explains how to align ports.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in nodes array.
        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>() 
            {
                new PointPort() 
                {
                    ID = "port1",
                    Offset = new Point() { X = 0, Y = 0 },
                    Visibility = PortVisibility.Visible,
                    //Set the style for the port
                    Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"},
                    // Sets the shape of the port as Square
                    Width= 12, Height=12, Shape= PortShapes.Square,
                    HorizontalAlignment = HorizontalAlignment.Center,
                    VerticalAlignment = VerticalAlignment.Center
                }
            },
        };
        nodes.Add(node);
    }
}

Horizontal and Vertical Alignment

The value of the HorizontalAlignment is Center by default. The value of the VerticalAlignment is Center by default. Alignment positioned based on the offset value.

Margin

Margin is an absolute value used to add some blank space to any one of its four sides. The ports can be displaced with the margin property. The following code example explains how to align an port based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in nodes array.
        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>() 
            {
                new PointPort() 
                {
                    ID = "port1",
                    Offset = new Point() { X = 0.5, Y = 1 },
                    Visibility = PortVisibility.Visible,
                    //Set the style for the port
                    Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"},
                    // Sets the shape of the port as Circle
                    Width= 12, Height=12, Shape= PortShapes.Square,
                    HorizontalAlignment = HorizontalAlignment.Left,
                    VerticalAlignment = VerticalAlignment.Top,
                    Margin=new Margin(){Top=10}
                }
            },
        };
        nodes.Add(node);
    }
}

Margin

See also