Modify the Undo-Redo Stack in the Diagram
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I add custom actions to the undo-redo stack of the Kendo UI for jQuery Diagram?
Solution
The following example demonstrates how to add custom actions to the undo-redo stack of the Diagram to cover custom interactions such as changing the color of the shape.
To achieve this behavior:
- Handle the event that triggers the change. For example, the
clickevent of the button in this how-to example. - Declare a custom
Unitclass by using theinit,undo, andredomethods. - Create an instance of this class.
- Add the applied modification to the
UndoRedoServiceof the Diagram.
<input type="button" value="Undo" onclick="undoChange(); return false;" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
<input type="button" value="Redo" onclick="redoChange(); return false;" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
<div id="diagram" style="height: 400px"></div>
<input type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" value="Change shape color" onclick="changeShape(); return false;">
<script>
var diagram = $("#diagram").kendoDiagram({
shapes: [
{
id: "1"
}
]
}).data("kendoDiagram");
function changeShape() {
var prevColor = diagram.shapes[0].options.fill.color;
diagram.shapes[0].redraw({ fill: { color: "#FF3333" } });
var changeColorUnit = new ChangeColorUnit(diagram.shapes[0], prevColor);
diagram.undoRedoService.add(changeColorUnit, false);
}
function undoChange() {
diagram.undo();
}
function redoChange() {
diagram.redo();
}
var ChangeColorUnit = kendo.Class.extend({
init: function (shape, prevColor) {
this.shape = shape;
this.prevColor = prevColor;
this.currColor = shape.options.fill.color;
},
undo: function () {
this.shape.redraw({ fill: { color: this.prevColor } });
},
redo: function () {
this.shape.redraw({ fill: { color: this.currColor } });
}
});
</script>