Positioning in Blazor Diagram component

14 Apr 2021 / 3 minutes to read

Arrange the nodes

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 page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s Pivot point is (0.5, 0.5) that means center of the node.
The size of the node can be controlled by using the Width and Height properties.
Rotation of a node is controlled by using the RotateAngle property.

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.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" @ref="@diagram" Nodes="@NodeCollection">
</SfDiagram>

@code {
SfDiagram diagram;
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
    // A node is created and stored in nodes array.
    DiagramNode node1 = 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" },
        // Pivot of the node
        Pivot = new NodePivotPoint() { X = 0, Y = 0 }
    };
    NodeCollection.Add(node1);
}
 protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        //OnAfterRenderAsync will be triggered after the component rendered.
        await Task.Delay(1500);
        diagram.Select(new ObservableCollection<DiagramNode>() { diagram.Nodes[0] }, null);
    }
}
}

Node Pivot

Flip

The diagram Provides support to flip the node. Flip is performed to give the mirrored image of the original element.

The Flip is also applicable for connectors

The flip types are as follows:

HorizontalFlip is used to change the element in the horizontal direction.
VerticalFlip is used to change the element in the vertical direction
Both that involves both vertical and horizontal changes of the element.

The following code shows how to provide the mirror image of the original element.

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

<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code {
SfDiagram diagram;
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
    // A node is created and stored in nodes array.
    DiagramNode node1 = 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"  },
        // Flip the node in Vertical Direction
        Flip = FlipDirection.Vertical,
        Shape = new DiagramShape()
        {
            Type = Syncfusion.Blazor.Diagrams.Shapes.Basic,
            BasicShape = BasicShapes.Triangle
        }
    };
    // Add node
    NodeCollection.Add(node1);
}
}

Node Flip

Note: The flip is also applicable for group and BPMN shapes.

Positioning in Blazor Diagram component

Arrange the nodes

Flip

See also