js-undo-redo

A basic javascript library to enable undo/redo features based on Command Pattern

Install

$ npm install --save js-undo-redo

Basic example

The following is a basic example to update a state variable. It demonstrates how to use the three available operations: execute, undo, redo.

const jsUndoRedo = require("js-undo-redo")

let stateValue = 0
const addValue = function(val){
    stateValue += val
}
const removeValue = function(val){
    stateValue -= val
}

jsUndoRedo.execute(addValue, removeValue, 5)
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 5, true, false

jsUndoRedo.undo()
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 0, false, true

jsUndoRedo.redo()
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 5, true, false

Advanced example

This example demonstrates the following features:

• A new executed operation clears any undo-ed actions and they cannot be redo-ed
• You can pass lambda functions as parameters too
• You cannot undo/redo beyond the saved actions
• The status property can be used instead of getters (canUndo, canRedo) to integrate with reactive apps (like Vue, React, etc)

const jsUndoRedo = require("js-undo-redo")

let stateValue = 0
const addValue = (val) => stateValue += val
const removeValue = (val) => stateValue -= val

jsUndoRedo.execute(addValue, removeValue, 5)
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 5, true, false

jsUndoRedo.execute(removeValue, addValue, 3)
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 2, true, false

jsUndoRedo.undo()
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 5, true, true

// You can use lambda expressions as well.
jsUndoRedo.execute(
    (x) => { stateValue += 2*x },
    (x) => { stateValue -= 2*x },
    4 
)
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 13, true, false

jsUndoRedo.undo()
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 5, true, true

jsUndoRedo.redo()
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 13, true, false

jsUndoRedo.undo()
jsUndoRedo.undo()
console.log(stateValue, jsUndoRedo.canUndo, jsUndoRedo.canRedo) // 0, false, true

console.log(jsUndoRedo.status) // {canUndo: false, canRedo: true}

API

The library encapsulates the logic behind the Command Pattern to keep a track of executed operations. It has the following functions/properties:

• execute(action, reverseAction, parameter): Executes the normal action. Note that you must provide the reverse action. The parameters are passed to both functions when executed.
• undo(): Executes the reverse operation of the current action.
• redo(): Re-executes the normal action of the last undo-ed action.
• status: An object with two boolean properties that indicate in any moment if is possible to execute the undo/redo actions. {canUndo, canRedo}
• canUndo: A getter for status.canUndo
• canRedo: A getter for status.canRedo