DailyJS

Undo with Object.observe

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries dom browser

Undo with Object.observe

Posted by Alex R. Young on .
Featured

libraries dom browser

Undo with Object.observe

Posted by Alex R. Young on .

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']);
ljur.observeTree(map);

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.