Commands in Blazor Diagram component

@using Syncfusion.Blazor.Diagrams

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

@code
{
//Reference to diagram
SfDiagram diagram;

private void Align()
{
    //Aligns the selected items to left
    diagram.Align(AlignmentOptions.Left, null, AlignmentMode.Selector);
}
}

@using Syncfusion.Blazor.Diagrams

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

@code
{
//Reference to diagram
SfDiagram diagram;

private void Distribute()
{
    //Distribute the elements in equal spacing
    diagram.Distribute(DistributeOptions.RightToLeft);
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px"/>

@code
{
//Reference to diagram
SfDiagram diagram;

private void SameSize()
{
    //Changing the selected nodes to same size
    SizingOptions sizingOptions = SizingOptions.Size;
    diagram.SameSize(sizingOptions);
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void Cut()
{
    //copies the selected nodes
    this.diagram.Cut();
}

private void Copy()
{
    //copies the selected nodes
    this.diagram.Copy();
}

private void Paste()
{
    //pastes the copied objects
    this.diagram.Paste();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

   private void SelectAll()
{
    //Selects the nodes
    this.diagram.SelectAll();
}
private void Group()
{
    //Groups the selected elements.
    this.diagram.Group();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void BringToFront()
{
    //Brings to front the selected node.
    this.diagram.BringToFront();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void SendToBack()
{
    //Sends to front the selected node.
    this.diagram.SendToBack();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void MoveForward()
{
    //move to Forward the selected node.
    this.diagram.MoveForward();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void SendBackward()
{
    //send to Forward the selected node.
    this.diagram.SendBackward();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void Zoom()
{
    // Sets the ZoomFactor
    //Defines the FocusPoint to zoom the Diagram with respect to any point
    //When you do not set focus point, zooming is performed with reference to the center of current Diagram view.
    this.diagram.Zoom(1.2, new PointModel() { X = 100, Y = 100 });
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void NudgeRight()
{
    //Nudges to right
    this.diagram.Nudge(NudgeDirection.Right);
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void BringIntoView()
{
    var bound = new System.Drawing.Rectangle(600, 600, 500, 400);
    //Brings the specified rectangular region of the Diagram content to the viewport of the page.
    this.diagram.BringIntoView(bound);
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void BringToCenter()
{
    var bound = new System.Drawing.Rectangle(600, 600, 500, 400);
    //Brings the specified rectangular region of the Diagram content to the viewport of the page.
    this.diagram.BringToCenter(bound);
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void FitToPage()
{
    //fit the diagram to the page
    diagram.FitToPage();
}
}

@using Syncfusion.Blazor.Diagrams
<SfDiagram @ref="@diagram" Height="600px">
</SfDiagram>

@code
{
//Reference to diagram
SfDiagram diagram;

private void Undo()
{
    //Revert the changes
    diagram.Undo();
}

private void Redo()
{
    //Restore the changes
    diagram.Redo();
}
}

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

<SfDiagram @ref="@Diagram" Height="600px"
        Nodes="@NodeCollection">
@* Initializing the custom commands *@
<DiagramCommandManager>
    <DiagramCommands>
        <DiagramCommand Name="customGroup">
            <DiagramKeyGesture Key="Keys.G" KeyModifiers="KeyModifiers.Control"></DiagramKeyGesture>
        </DiagramCommand>
        <DiagramCommand Name="customUnGroup">
            <DiagramKeyGesture Key="Keys.U" KeyModifiers="KeyModifiers.Control"></DiagramKeyGesture>
        </DiagramCommand>
    </DiagramCommands>
</DiagramCommandManager>
@* To define the custom commands execution event *@
<DiagramEvents OnCommandExecuted="@CommandExecute"></DiagramEvents>
</SfDiagram>

@code {
// Reference to diagram
SfDiagram Diagram;

// Defines diagram's nodes collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }

protected override void OnInitialized()
{
    //Initializing the nodes collection
    NodeCollection = new ObservableCollection<DiagramNode>();

    DiagramNode diagramNode = new DiagramNode()
    {
        Id = "node1",
        OffsetX = 100,
        OffsetY = 100,
        Width = 100,
        Height = 100,

        Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } }
    };

    NodeCollection.Add(diagramNode);

    DiagramNode diagramNode1 = new DiagramNode()
    {
        Id = "node2",
        OffsetX = 300,
        OffsetY = 100,
        Width = 100,
        Height = 100,

        Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } }
    };

    NodeCollection.Add(diagramNode1);

}
/// <summary>
/// Custom command execution event
/// </summary>
public void CommandExecute(ICommandExecuteEventArgs args)
{
    if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.G)
    {
        //Custom command to group the selected nodes
        Diagram.Group();
    }
    if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.U)
    {
        //Custom command to ungroup the selected items
        if (Diagram.SelectedItems.Nodes.Count > 0 && Diagram.SelectedItems.Nodes[0].Children != null && Diagram.SelectedItems.Nodes[0].Children.Length > 0)
        {
            Diagram.UnGroup();
        }
    }
}
}

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

<SfDiagram @ref="@Diagram" Height="600px"
        Nodes="@NodeCollection">
@* Initializing the custom commands *@
<DiagramCommandManager>
    <DiagramCommands>
        <DiagramCommand Name="navigationDown">
            <DiagramKeyGesture Key="Keys.Down"></DiagramKeyGesture>
        </DiagramCommand>
        <DiagramCommand Name="navigationUp">
            <DiagramKeyGesture Key="Keys.Up"></DiagramKeyGesture>
        </DiagramCommand>
        <DiagramCommand Name="navigationLeft">
            <DiagramKeyGesture Key="Keys.Left"></DiagramKeyGesture>
        </DiagramCommand>
        <DiagramCommand Name="navigationRight">
            <DiagramKeyGesture Key="Keys.Right"></DiagramKeyGesture>
        </DiagramCommand>
    </DiagramCommands>
</DiagramCommandManager>
@* To define the custom commands execution event *@
<DiagramEvents OnCommandExecuted="@CommandExecute"></DiagramEvents>
</SfDiagram>

@code {
// Reference to diagram
SfDiagram Diagram;

// Defines diagram's nodes collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }

protected override void OnInitialized()
{
    //Initializing the nodes collection
    NodeCollection = new ObservableCollection<DiagramNode>();

    DiagramNode diagramNode = new DiagramNode()
    {
        Id = "node1",
        OffsetX = 100,
        OffsetY = 100,
        Width = 100,
        Height = 100,

        Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } }
    };

    NodeCollection.Add(diagramNode);

}
/// <summary>
/// Custom command execute event
/// </summary>
public void CommandExecute(ICommandExecuteEventArgs args)
{
    if (args.Gesture.Key == Keys.Left)
    {
        //Allow left arrow key to nudge the selected node in left
        if (Diagram.SelectedItems.Nodes.Count > 0)
            Diagram.Nudge(NudgeDirection.Left);
    }
    if (args.Gesture.Key == Keys.Down || args.Gesture.Key == Keys.Up || args.Gesture.Key == Keys.Right)
    {
        //to disable a built-in command and none of action execute
    }
}
}