Diagram provides the support to drag, resize, or rotate the node interactively.
A node can be select at runtime by using the Select
method and clear the selection in the diagram using the ClearSelection
. The following code explains how to select and clear selection in the diagram.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<input type="button" value="Select" @onclick="OnSelect">
<input type="button" value="UnSelect" @onclick="@UnSelect" />
<SfDiagram @ref="@Diagram" Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code {
// reference of the diagram
SfDiagram Diagram;
// To define node collection
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in nodes collection.
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" }
};
// Add node
NodeCollection.Add(node1);
}
public void OnSelect()
{
// Select the node
Diagram.Select(new ObservableCollection<DiagramNode>() { Diagram.Nodes[0] }, null);
}
public void UnSelect()
{
// clear selection in the diagram
Diagram.ClearSelection();
}
}
And also the selection enable during the interaction.
SelectionChanged
event gets triggered and to do customization in this event.
A node can be drag at runtime by using the Drag
method. The following code explains how to drag the node by using the drag method.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<input type="button" value="Drag" @onclick="OnDrag">
<SfDiagram @ref="@Diagram" Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code {
// reference of the diagram
SfDiagram Diagram;
// To define node collection
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in nodes collection.
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" }
};
// Add node
NodeCollection.Add(node1);
}
public void OnDrag()
{
// Drag the node
Diagram.Drag(Diagram.Nodes[0], 10, 10);
}
}
And also the drag the node during the interaction.
OnPositionChange
event gets triggered and to do customization in this event.
A node can be resize at runtime by using the Scale
method. The following code explains how to resize the node by using the scale method.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<input type="button" value="Resize" @onclick="OnResize">
<SfDiagram @ref="@Diagram" Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code {
// reference of the diagram
SfDiagram Diagram;
// To define node collection
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in nodes collection.
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" }
};
// Add node
NodeCollection.Add(node1);
}
public void OnResize()
{
// Resize the node
Diagram.Scale(Diagram.Nodes[0], 0.5, 0.5, new PointModel() { X = 0, Y = 0 } );
}
}
And also the resize the node during the interaction.
OnSizeChange
event gets triggered.
Note: While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to Snapping
.
A node can be rotate at runtime by using the Rotate
method. The following code explains how to rotate the node by using method.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<input type="button" value="Rotate" @onclick="OnRotate">
<SfDiagram @ref="@Diagram" Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code {
// reference of the diagram
SfDiagram Diagram;
// To define node collection
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in nodes collection.
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" }
};
// Add node
NodeCollection.Add(node1);
}
public void OnRotate()
{
// Rotate the node
Diagram.Rotate(Diagram.Nodes[0], Diagram.Nodes[0].RotateAngle+10);
}
}
And also the rotate the node during the interaction.
For more information about node interaction, refer to Node Interaction
.