Positioning a Node in Blazor Diagram Component

27 Jun 20258 minutes to read

How to Arrange Nodes

  • The position of a node is controlled by using the OffsetX and OffsetY properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point.

  • You may expect this offset values to represent the distance between the page origin and node’s top-left corner instead of the center. The Pivot property helps to solve this problem. The default value of the node’s Pivot point is (0.5, 0.5) which means the center of the node.

  • The size of the node can be controlled by using the Width and Height properties.

The following table shows how pivot relates offset values with node boundaries.

Pivot Offset
(0.5,0.5) OffsetX and OffsetY values are considered as the node’s center point.
(0,0) OffsetX and OffsetY values are considered as the top-left corner of the node.
(1,1) OffsetX and OffsetY values are considered as the bottom-right corner of the node.

The following code shows how to change the Pivot value.

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

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

@code
{
    //Reference the diagram
    SfDiagramComponent diagram;
    //Define diagram's nodes collection
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        //Intialize diagram's nodes collection

        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in nodes array.
        Node node = new Node()
            {
                ID = "node",
                // Position of the node
                OffsetX = 250,
                OffsetY = 250,
                // Size of the node
                Width = 100,
                Height = 100,
                Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
                // Pivot of the node
                Pivot = new DiagramPoint() { X = 0, Y = 0 }
            };
        nodes.Add(node);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //OnAfterRenderAsync will be triggered after the component rendered.
            await Task.Delay(200);
            diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });
        }
    }
}

You can download a complete working sample from GitHub

Arranging Node Position in Blazor Diagram

Rotation of a node is controlled by using the RotationAngle property. The following code shows how to change the RotationAngle value.

@using Syncfusion.Blazor.Diagram

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

@code
{
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in nodes array.
        Node node = new Node()
        {
            ID = "node",
            // Position of the node.
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node.
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() 
            { 
                Fill = "#6495ED", 
                StrokeColor = "white"
            },
            // RotationAngle of the node.
            RotationAngle = 90
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Changing Node Rotation Angle in Blazor Diagram

How to Set Minimum and Maximum Node Size

The MinWidth and MinHeight properties of node allows you to control the minimum size of the node while resizing. Similarly, the MaxWidth and MaxHeight properties of node allows you to control the maximum size of the node while resizing. The below gif explains how minimum and maximum sizes are controlled.

@using Syncfusion.Blazor.Diagram

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

@code
 {
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in nodes array.
        Node node = new Node()
        {
            ID = "node",
            // Position of the node.
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node.
            Width = 100,
            Height = 100,
            //Minimum Size of the node.
            MinHeight = 50,
            MinWidth = 50,
            //Maximum Size of the node.
            MaxHeight = 200,
            MaxWidth = 200,
            Style = new ShapeStyle() 
            { 
                Fill = "#6495ED", 
                StrokeColor = "white" 
            },
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Displaying Maximum and Minimum Size of Blazor Diagram Node

See also