colinfrick / javascript-undo-manager

Simple Javascript undo and redo independent of other libraries

JavaScript Undo Manager

Simple undo manager to provide undo and redo actions in your JavaScript application.

Demo

See Undo Manager with canvas drawing.

Background

Each action the user does (typing a character, moving an object) must be undone AND recreated. We combine this destruction and recreation as one "command" and put it on the undo stack:

var undoManager = new UndoManager();
undoManager.add({
    undo: function() {
        // ...
    },
    redo: function() {
        // ...
    }
});

Note that you are responsible for the initial creation; Undo Manager only bothers with destruction and recreation.

Methods

undoManager.undo();

Performs the undo action.

undoManager.redo();

Performs the redo action.

undoManager.clear();

Clears all stored states.

var hasUndo = undoManager.hasUndo();

Tests if any undo actions exist.

var hasRedo = undoManager.hasRedo();

Tests if any redo actions exist.

undoManager.setCallback(myCallback);

Get notified on changes.

Example

var undoManager = new UndoManager(),
    people = {},
    addPerson,
    removePerson,
    createPerson;        

addPerson = function(id, name) {
    people[id] = name;
};

removePerson = function(id) {
    delete people[id];
};

createPerson = function (id, name) {

    // initial storage
    addPerson(id, name);

    // make undo-able
    undoManager.add({
        undo: function() {
            removePerson(id)
        },
        redo: function() {
            addPerson(id, name);
        }
    });
}

createPerson(101, "John");
createPerson(102, "Mary");

console.log("people", people);
// people Object {101: "John", 102: "Mary"} 

undoManager.undo();
console.log("people", people);
// people Object {101: "John"} 

undoManager.undo();
console.log("people", people);
// people Object {} 

undoManager.redo();
console.log("people", people);
// people Object {101: "John"}

Loading with RequireJS

If you are using RequireJS, you need to use the shim config parameter.

Assuming require.js and domReady.js are located in js/extern, the index.html load call would be:

<script src="js/extern/require.js" data-main="js/demo"></script>

And demo.js would look like this:

requirejs.config({
    baseUrl: "js",
    paths: {
        domReady: "extern/domReady",
        app: "../demo",
        undomanager: "../../js/undomanager",
        circledrawer: "circledrawer"
    },
    shim: {
        "undomanager": {
            exports: "UndoManager"
        },
        "circledrawer": {
            exports: "CircleDrawer"
        }
    }
});

require(["domReady", "undomanager", "circledrawer"], function(domReady, UndoManager, CircleDrawer) {
    "use strict";

    var undoManager,
        circleDrawer,
        btnUndo,
        btnRedo,
        btnClear;

    undoManager = new UndoManager();
    circleDrawer = new CircleDrawer("view", undoManager);
    
    // etcetera
});