• Stars
    star
    120
  • Rank 295,983 (Top 6 %)
  • Language
    JavaScript
  • License
    The Unlicense
  • Created over 10 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Adds automatic undo/redo functionality for javascript objects, using Object.observe() (deprecated)

LazyJsonUndoRedo Build Status

Gitter

Update: The world has changed and Object.observe() will not going to be a thing anymore. I leave this repo here as a fun experiment.

An experimental tool to create a 'drop in' history handler with automatic undo/redo functionality for nested javascript objects, using Object.observe() or Polymer shim.

Can be usefull for small editor tools but it's not recommended to be used in production.

Object.observe() is only supported in Chrome 36+, Opera 23+, io.js and Nodejs 11.13+ yet, but LJUR is also usable with polymer(observe-js)

Demo

edit json

edit maze

Install

bower install --save LazyJsonUndoRedo
npm install --save lazy-json-undo-redo

Unit tests

native

with polymer shim

Usage

Init
 var o = {}, ljur = new LazyJsonUndoRedo(o);
 
 o.a = 1;
 ljur.undo();
 console.log(o.a); // undefined
 ljur.redo();
 console.log(o.a); // 1


Flagging
 o = {}, ljur = new LazyJsonUndoRedo(o);
 //the changes between the start- end endFlag calls will be treated as one step 
 //in the history  
 var endFlagId = ljur.startFlag();
 o.c = {}
 o.c.b = 1
 o.c.e = 2
 o.f = 4;
 ljur.endFlag(endFlagId);
 ljur.undo();
 console.log(o); //{}
 ljur.redo();
 console.log(o); //{c: {b: 1, e: 2}, f: 4}
 
 //or wrap a function between flags:
 var changerFn = ljur.wrap(function () {/*do changes on o*/});
 changerFn();//all changes are reversible with one undo() call


Force save
 //fast changes can be merged by the api (specially if you're using shim)
 o = {}, ljur = new LazyJsonUndoRedo(o);
 o.g = {};
 o.g.h = 1;
 ljur.undo();
 console.log(o); //{}

 //to avoid this, you can force the history save with ljur.rec()
 o.i = {};
 ljur.rec();
 o.i.j = 2;
 ljur.undo();
 console.log(o); // {i: {}}


Use whitelists
 //if you want to specify witch properties should be listened on an object, 
 // you can use whitelists: 
 o = {};
 ljur = new LazyJsonUndoRedo();
 ljur.setWhiteList(o, ['a', 'b']);
 ljur.observeTree(o);//you have to set the whitelist before start to observe the object
 o.a = 7; //will be undoable
 o.c = 8; //won't be undoable, because 'c' is not on the whitelist
 ljur.undo();
 console.log(o); // {c: 8}
 
 ljur.getWhitelist(o); //['a', 'b']
 ljur.removeWhiteList(o);//whitelists are removable


Use blacklists
 //works the same as whitelists
 ljur.setBlacklist(object, blacklistedKeys);
 ljur.removeBlacklist(object);


Use global black- and whitelist
 //you can use this two list for all of the objects added to ljur
 ljur.addToGlobalWhitelist('a', 'b', 'x', 'd', 'e');
 ljur.removeFromGlobalWhitelist('e', 'x');
 ljur.addToGlobalBlacklist('a', 'b', 'x', 'd', 'e');
 ljur.removeFromGlobalBlacklist('e', 'x');



Listen to more objects
 ljur.observeTree(o2);
 ljur.observeTree(o3);


Check support
 LazyJsonUndoRedo.checkSupport();//true is native Object.observe() or Polymer is present
 ljur.usingShim;//true if the instance is using Polymer shim

More Repositories

1

react-gsap-enhancer

Use the full power of React and GSAP together
JavaScript
723
star
2

react-theme

Organise your inline styles in a flexible and customizable way.
JavaScript
66
star
3

fields-ignition

Generate random crop fields for Ignition Gazebo
Jupyter Notebook
62
star
4

transhand

React based 2d transformation handler for graphic designer tools
JavaScript
50
star
5

rasa-nlu-trainer

GUI for editing rasa-nlu training data
27
star
6

ros-grpc-bridge-generator

Experimental gRPC server generator to mirror ROS topics and services
Python
25
star
7

react-matterkit

React GUI component kit based on matterkit.io design and focusing on input fields.
JavaScript
24
star
8

match-media-mock

Server side compatible substitution for Window.matchMedia()
JavaScript
18
star
9

json-vision

Instant user interface generator inspirited by dat.GUI
JavaScript
9
star
10

homography

Rust reimplementation of OpenCV's homography estimation algorithm
Rust
7
star
11

vector-snake

React based path editor for graphic designer tools
JavaScript
4
star
12

custom-drag

Simple 2d drag helper for React and Vanilla JS with React DnD like API
JavaScript
3
star
13

ros-grpc-bridge-generator-example

ROS turtlesim with generated gRPC API (example for ros-grpc-api-generator)
Python
3
star
14

spaceman

React workspace manager
JavaScript
2
star
15

react-gsap-enhancer-react-router-example

Example for using react-gsap-enhancer and react-router together
JavaScript
2
star
16

noise-bg

CSS
2
star
17

eventman

Node.js EventEmitter implementation with some extra feature (bindable scopes, subevents, no double listener registration)
JavaScript
2
star
18

react-color-picker-wheel

HLS color picker wheel GUI element for React
JavaScript
1
star
19

quick-interface

JavaScript
1
star
20

sparita

A game to develop your spatial vision.
JavaScript
1
star
21

react-animated-topdown-zombie

Customizable topdown zombie React component - animated with animachine
JavaScript
1
star