Undo with Object.observe

2014-07-18 00:00:00 +0100 by Alex R. Young

Polgár András sent in LazyJsonUndoRedo (GitHub: azazdeaz / LazyJsonUndoRedo, npm: lazy-json-undo-redo, Bower: LazyJsonUndoRedo), which uses ES6's Object.observe to bless undo and redo support on arbitrary JavaScript objects. That means if you've got a rich UI component you can add intuitive undo support.

There's a demo that shows a graphical maze which supports undo and redo that illustrates the concept nicely. It sets the maze's map object to use LazyJsonUndoRedo, and whitelists some special objects:

var ljur = new LazyJsonUndoRedo();
ljur.setWhitelist(map, ['data', 'objectMap', 'objectData', 'width',
  'height', 'name', 'gridSize', 'showGrid', 'showWalls']);

var gui = new dat.GUI();
gui.add({ undo: function() { ljur.undo(); } }, 'undo');
gui.add({ redo: function() { ljur.redo(); } }, 'redo');

Object.observe is supported in the latest stable Chrome, and there's a Polymer shim for older browsers. The shim should work in IE 9 and above.

Internally, LazyJsonUndoRedo uses an array to store changes and a pointer so objects can be fetched as required.