Undo Redo support in Blazor Diagram Component

5 Aug 20211 minute to read

Diagram tracks the history of actions that are performed after initializing the diagram and provides support to reverse and restore those changes.

Undo and redo

Diagram provides built-in support to track the changes that are made through interaction and through public APIs. The changes can be reverted or restored either through shortcut keys or through commands.

Undo/redo through shortcut keys

Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is Ctrl+Z and shortcut key for redo is Ctrl+Y.

Undo/redo through public APIs

The server-side methods Undo and Redo help you to revert/restore the changes. The following code example illustrates how to undo/redo the changes through script.

SfDiagramComponent Diagram;

// Reverts the last action performed

// Restores the last undone action

When a change in the diagram is reverted or restored (undo/redo), the HistoryChange event gets triggered.

Group multiple changes

History list allows to revert or restore multiple changes through a single undo/redo command. For example, revert/restore the fill color change of multiple elements at a time.

The server-side method StartGroupAction is used to notify the diagram to start grouping the changes. The server-side method EndGroupAction is used to notify to stop grouping the changes. The following code illustrates how to undo/redo to change of multiple elements at a time.

SfDiagramComponent diagram;

//Starts grouping the changes

//Ends grouping the changes

History change event

The HistoryChange event triggers, whenever the interaction of the node and connector is take place.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600" HistoryChange="@Onhistorychange">

    public void Onhistorychange(HistoryChangeArgs args)
        //causes of history change
        var cause = args.Cause;