Undo redo in Angular Diagram component
27 Sep 202413 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.
@Component({
selector: "app-container",
// Diagram template
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (created)='created($event)'>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public created(args: Object): void {
// Reverts the last action performed
this.diagram.undo();
// Restores the last undone action
this.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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DiagramModule, UndoRedoService } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramComponent, Diagram, NodeModel, ShapeStyleModel } from "@syncfusion/ej2-angular-diagrams";
@Component({
imports: [
DiagramModule
],
providers: [UndoRedoService],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]='getNodeDefaults' (created)='created($event)'>
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
((node as NodeModel).style as ShapeStyleModel).fill = '#6BA5D7';
((node as NodeModel).style as ShapeStyleModel).strokeColor = 'white';
return node;
};
public created(args: Object): void {
//Start to group the changes
(this.diagram as Diagram).startGroupAction();
//Makes the changes
let color: string[] = ['black', 'red', 'green', 'yellow'];
for (var i = 0; i < color.length; i++) {
// Updates the fillColor for all the child elements.
((this.diagram as Diagram).nodes[0].style as ShapeStyleModel).fill = color[i];
(this.diagram as Diagram).dataBind();
}
//Ends grouping the changes
(this.diagram as Diagram).endGroupAction();
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
canLog
canLog in the history list, which takes a history entry as argument and returns whether the specific entry can be added or not.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DiagramModule, UndoRedoService } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramComponent, Diagram, NodeModel, HistoryEntry, ShapeStyleModel } from "@syncfusion/ej2-angular-diagrams";
@Component({
imports: [
DiagramModule
],
providers: [UndoRedoService],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]='getNodeDefaults' (created)='created($event)'>
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
((node as NodeModel).style as ShapeStyleModel).fill = '#6BA5D7';
((node as NodeModel).style as ShapeStyleModel).strokeColor = 'white';
return node;
};
public created(args: Object): void {
// canLog decide whether the entry add or not in history List
(this.diagram as Diagram | any).historyList.canLog = function(entry: HistoryEntry) {
entry.cancel = true;
return entry;
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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.
@Component({
selector: "app-container",
// render initialized Diagram
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px">
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
//get the collection of undoStack objects
public undoStack: HistoryEntry[] = this.diagram.historyList.undoStack;
//get the collection of redoStack objects
public redoStack: HistoryEntry[] = this.diagram.historyList.redoStack;
}
History change event
The historyChange
event triggers, whenever the interaction of the node and connector is take place.
@Component({
selector: "app-container",
// render initialized Diagram
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (created)='create($event)'>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public created(args: Object): void {
// history change event
this.diagram.historyChange = (arg: IHistoryChangeArgs) => {
//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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DiagramModule, UndoRedoService } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramComponent, Diagram, NodeModel, HistoryEntry, ShapeStyleModel } from "@syncfusion/ej2-angular-diagrams";
@Component({
imports: [
DiagramModule
],
providers: [UndoRedoService],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]='getNodeDefaults' (created)='created($event)'>
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
((node as NodeModel).style as ShapeStyleModel).fill = '#6BA5D7';
((node as NodeModel).style as ShapeStyleModel).strokeColor = 'white';
return node;
};
public created(args: Object): void {
// canLog decide whether the entry add or not in history List
(this.diagram as Diagram).historyManager.stackLimit =3;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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.
@Component({
selector: "app-container",
// render initialized Diagram
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (created)='create($event)'>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public created(args: Object): void {
// history change event
this.diagram.updateSelection: (object: NodeModel, diagram: Diagram) => {
let selArr = [];
selArr.push(object)
diagram.select(selArr);
},
}
}