Undo redo in EJ2 JavaScript Diagram control
25 Apr 202314 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.
Note: If you want to use Undo-Redo in diagram, you need to inject UndoRedo in the diagram.
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 client-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.
// initialize diagram component
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
// Add node
nodes: [];
},'#element');
// 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 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 client-side method startGroupAction is used to notify the diagram to start grouping the changes. The client-side method endGroupAction is used to notify to stop grouping the changes. The following code illustrates how to undo/redo fillColor change of multiple elements at a time.
ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);
var nodes = [
{
id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: { type: 'Flow', shape: 'Terminator'}
}
];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px', nodes: nodes
});
diagram.appendTo('#element');
//Start to group the changes
diagram.startGroupAction();
//Makes the changes
var color = ['black','red','green','yellow']
for (var i = 0; i < color.length; i++) {
// Updates the fillColor for all the child elements.
diagram.nodes[0].style.fill=color[i];
diagram.dataBind();
}
//Ends grouping the changes
diagram.endGroupAction();<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Diagram</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Track custom changes
Diagram provides options to track the changes that are made to custom properties. For example, in case of an employee relationship diagram, track the changes in the employee information. The historyList of the diagram enables you to track such changes. The following example illustrates how to track such custom property changes.
Before changing the employee information, save the existing information to historyList by using the client-side method push of historyList.
The historyList canLog method can be used which takes a history entry as argument and returns whether the specific entry can be added or not.
The following code example illustrates how to save the existing property values.
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
},'#element');
//Creates a custom entry
var entry = {
undoObject: diagram.nodes[0];
};
// adds that to history list
diagram.historyList.push(entry);canLog
canLog in the history list, which takes a history entry as argument and returns whether the specific entry can be added or not.
ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);
var nodes = [
{
id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: { type: 'Flow', shape: 'Terminator'}
}
];
var diagram= new ej.diagrams.Diagram({
width: '100%', height: '600px', nodes: nodes
},'#element');
//Creates a custom entry and adds that to history manager
var entry = { undoObject: diagram.nodes[0] };
diagram.historyList.push(entry);
diagram.dataBind();
// Reverts the last action performed
diagram.undo();
// Restores the last undone action
diagram.redo();<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Diagram</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Track undo/redo actions
The historyList undoStack property is used to get the collection of undo actions which should be performed in the diagram. The undoStack/redoStack is the read-only property.
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
nodes: nodes,
},'#element');
//get the collection of undoStack objects
let undoStack = diagram.historyList.undoStack;
//get the collection of redoStack objects
let redoStack = diagram.historyList.redoStack;History change event
The historyChange event triggers, whenever the interaction of the node and connector is take place.
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
nodes: nodes,
},'#element');
// history change event
diagram.historyChange = (arg) => {
//causes of history change
let cause: string = arg.cause;
}Stack Limit
The stackLimit property of history manager is used to limits the number of actions to be stored on the history manager.
ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);
var nodes = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: {
type: 'Flow',
shape: 'Terminator'
}
}];
var diagram= new ej.diagrams.Diagram({
width: '100%',
height: '600px',
nodes: nodes,
historyManager: { stackLimit: 3 },
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}
},'#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Diagram</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Retain Selection
You can retain a selection at undo/redo operation by using the client-side API Method called updateSelection. Using this method, we can select a diagram objects.
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
updateSelection: (object: NodeModel, diagram: Diagram) => {
let selArr = [];
selArr.push(object)
diagram.select(selArr);
},
nodes: nodes,
},'#element');