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.Pivot
point is (0.5, 0.5) that means center of the node.Width
and
Height
properties.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);
}
}
}
The diagram Provides support to flip the node. Flip
is performed to
give the mirrored image of the original element.
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 directionBoth
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);
}
}
Note: The flip is also applicable for group and BPMN shapes.