How to create Undo-Redo in kineticjs?

Question

Is there any simple way how to create undo redo function in Kineticjs ? I have found a Undo Manager for HTML 5 in https://github.com/ArthurClemens/Javascri

Answer 1

I am not familiar with KineticJS, but the approach should be similar to the provided demo (that also uses a canvas).

Perhaps another example helps. Let's say I have an app to create/move/delete colored shapes that represent musical notes. I have a way to click-drag and highlight a selection of notes. Pressing Delete on the keyboard invokes the function onDeleteGroup:

onDeleteGroup: function(gridModel) {
    // collect all notes in an array
    // ...
    this._deleteGroup(notes);
    this.undoManager.register(
        this, this._createGroup, [notes], 'Undo delete',
        this, this._deleteGroup, [notes], 'Redo delete'
    );
}

All notes are deleted, and 2 methods are registered with the undo manager:

1. The undo function (undo of delete will be create)
2. The redo function (after undo/create will be delete again)

Both functions are straightforward:

_deleteGroup:function(notes) {
    // removes each note from the model
    // thereby removing them from the canvas
    // ...
}

_createGroup:function(notes) {
    // add each note to the model
    // thereby adding them to the canvas
    // ...
}

As you can see, the data object (array of notes) is passed around for creation and deleting. You can do the same for manipulating singular objects.