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:

1. Handle the event that triggers the change. For example, the click event of the button in this how-to example.
2. Declare a custom Unit class by using the init, undo, and redo methods.
3. Create an instance of this class.
4. Add the applied modification to the UndoRedoService of 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>

See Also

• Basic Usage of the Diagram (Demo)
• JavaScript API Reference of the Diagram
• Implement Local Data Editing
• Render External Content in Shapes
• Wrap Text