Undo Redo support in Blazor Diagram Component
8 Jun 202310 minutes 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 Undo and Redo methods help you to revert/restore the changes. The following code example illustrates how to undo/redo the changes through code.
SfDiagramComponent Diagram;
// Reverts the last action performed.
diagram.Undo();
// Restores the last undone action.
diagram.Redo();When a change in the diagram is reverted or restored (undo/redo), the HistoryChanged 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.
StartGroupAction is used to notify the diagram to start grouping the changes. EndGroupAction is used to notify to stop grouping the changes. The following code illustrates how to undo/redo to change multiple elements at a time.
SfDiagramComponent diagram;
//Starts grouping the changes.
diagram.StartGroupAction();
//Ends grouping the changes.
diagram.EndGroupAction();History change event
- While interacting with the elements in the diagram, this event can be used to do the customization.
- When interacting with the node or connector, the entries get added to the history list to trigger this event.
The HistoryChangedEventArgs notifies while the changes occurs during undo/redo process.
@using Syncfusion.Blazor.Diagram
@* Initialize Diagram *@
<SfDiagramComponent @ref="@diagram" Height="600px" HistoryChanged="@OnHistoryChange">
</SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
public void OnHistoryChange(HistoryChangedEventArgs args)
{
//Causes of history change.
HistoryChangedAction ActionTrigger = args.ActionTrigger;
}
}You can download a complete working sample from GitHub
How to set stack limit
The StackLimit property of the history manager is used to restrict the number of history entries that can be stored on the history list to limit undo and redo action.
@using Syncfusion.Blazor.Diagram
@* Initialize Diagram *@
<SfDiagramComponent @ref="@diagram" Height="600px" Nodes="@nodes">
<DiagramHistoryManager StackLimit="@stackLimit"></DiagramHistoryManager>
</SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
int stackLimit = 3;
protected override void OnInitialized()
{
Node diagramNode = new Node()
{
ID = "node1",
OffsetX = 300,
OffsetY = 140,
Width = 145,
Height = 60,
Style = new ShapeStyle()
{
Fill = "#357BD2",
StrokeColor = "White"
},
Shape = new FlowShape()
{
Type = NodeShapes.Flow,
Shape = NodeFlowShapes.Terminator
}
};
nodes.Add(diagramNode);
}
}Download a complete working sample from GitHub
How to track custom entry
Diagram provides options to track the changes that are made to custom properties. The following example illustrates how to track such custom property changes.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="CustomEntry" OnClick="@OnCustomEntry" />
@* Initialize Diagram *@
<SfDiagramComponent @ref="@diagram" Height="600px" Nodes="@nodes">
</SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Dictionary<string, object> NodeInfo = new Dictionary<string, object>();
NodeInfo.Add("nodeInfo", "Central Node");
// A node is created and stored in the nodes collection.
Node node = new Node()
{
ID = "node1",
// Position of the node.
OffsetX = 250,
OffsetY = 250,
// Size of the node.
Width = 100,
Height = 100,
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
AdditionalInfo = NodeInfo
};
// Add node.
nodes.Add(node);
}
private void OnCustomEntry()
{
HistoryEntry entry = new HistoryEntry();
entry.UndoObject = diagram.Nodes[0];
diagram.AddHistoryEntry(entry);
}
}You can download a complete working sample from GitHub
HistoryAdding Event
HistoryAdding in the DiagramHistoryManager, which takes a history entry as argument and returns whether the specific entry can be added or not.
@using Syncfusion.Blazor.Diagram
@* Initialize Diagram *@
<SfDiagramComponent @ref="@diagram" Height="600px" Nodes="@nodes">
<DiagramHistoryManager HistoryAdding="@OnHistoryAdding"/>
</SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
// A node is created and stored in the nodes collection.
Node node = new Node()
{
ID = "node1",
// Position of the node.
OffsetX = 250,
OffsetY = 250,
// Size of the node.
Width = 100,
Height = 100,
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
// Add node.
nodes.Add(node);
}
private void OnHistoryAdding(HistoryAddingEventArgs entry)
{
// Sets true to cancel undo/redo action.
entry.Cancel = true;
}
}You can download a complete working sample from GitHub
Custom undo redo
The purpose of custom undo redo process is to store actions which are not done through default undo redo history list.
Undo method in DiagramHistoryManager is getting triggered when the custom entry is in undo stage and Redo method in DiagramHistoryManager is getting triggered when the custom entry is in redo stage.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="CustomEntry" OnClick="@OnCustomEntry" />
<SfDiagramComponent @ref="@diagram" Height="600px" Nodes="@nodes">
<DiagramHistoryManager StackLimit="@stackLimit" HistoryAdding="@OnHistoryAdding" Undo="@onCustomUndo" Redo="@onCustomRedo" />
</SfDiagramComponent>
@code
{
//Reference the diagram
SfDiagramComponent diagram;
//Intialize diagram's nodes collection
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
string EventValue = string.Empty;
int stackLimit = 3;
protected override void OnInitialized()
{
Dictionary<string, object> NodeInfo = new Dictionary<string, object>();
NodeInfo.Add("nodeInfo", "Central Node");
// A node is created and stored in the nodes collection.
Node node = new Node()
{
ID = "node1",
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
AdditionalInfo = NodeInfo
};
// Add node
nodes.Add(node);
}
private void OnCustomEntry()
{
HistoryEntry entry = new HistoryEntry();
entry.UndoObject = diagram.Nodes[0];
diagram.AddHistoryEntry(entry);
}
private void OnHistoryAdding(HistoryAddingEventArgs entry)
{
// Sets true to cancel undo/redo action.
entry.Cancel = false;
}
private void onCustomUndo(HistoryEntryBase entry)
{
(entry.RedoObject) = entry.UndoObject.Clone() as Node;
(entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Start";
EventValue += "UndoObject:" + (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID];
}
private void onCustomRedo(HistoryEntryBase entry)
{
EventValue += "RedoObject:" + (entry.RedoObject as Node).AdditionalInfo[(entry.RedoObject as Node).ID];
var current = entry.UndoObject.Clone() as Node;
(entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Description";
entry.RedoObject = current;
}
}You can download a complete working sample from GitHub