Skip to content

Instantly share code, notes, and snippets.

@sag1v sag1v/undoRedo.js
Last active Jul 1, 2019

Embed
What would you like to do?
A simple implementation of undo and redo in JavaScript
const stripLast = arr => {
// split the last item from an array and return a tupple of [rest, last]
const length = arr.length;
const lastItem = arr[length - 1];
const restOfArr = arr.slice(0, length - 1);
return [restOfArr, lastItem];
};
const createTrimStartArray = length => arr => {
const startIndex = arr.length < length ? 0 : length;
const trimmedArr = arr.slice(startIndex, arr.length);
return trimmedArr;
};
function createUndoRedo(initial, options = {}) {
const { trace, historyLimit = Infinity } = options;
let _historyLimit = historyLimit;
let _trimStartArray = createTrimStartArray(_historyLimit);
let _timeline = {
past: [],
current: initial,
future: []
};
log("init");
function log(str = "") {
trace && console.log(str, this.current);
}
function _getCurrent() {
return _timeline.current;
}
function _canUndo() {
return _timeline.past.length > 0;
}
function _canRedo() {
return _timeline.future.length > 0;
}
function update(next) {
// update the current value
const { past, current } = _timeline;
// calculate history storage limit
const limitedPast = _trimStartArray(past);
_timeline = {
past: [...limitedPast, current],
current: next,
// reset redo, don't allow redo if we update in the middle of the timeline
// this seems to be the idiomatic approach for most applications
future: []
};
log("update");
return this.current;
}
function undo() {
if (this.canUndo) {
const { past, current, future } = _timeline;
const [restOfArr, lastItem] = stripLast(past);
_timeline = {
past: restOfArr,
current: lastItem,
future: [...future, current]
};
log("undo");
return this.current;
}
}
function redo() {
if (this.canRedo) {
const { past, current, future } = _timeline;
const [restOfArr, lastItem] = stripLast(future);
_timeline = {
past: [...past, current],
current: lastItem,
future: restOfArr
};
log("redo");
return this.current;
}
}
const publicAPI = {
update,
undo,
redo,
get current() {
return _getCurrent();
},
get canRedo() {
return _canRedo();
},
get canUndo() {
return _canUndo();
},
get historyLimit() {
return _historyLimit;
},
set historyLimit(val) {
_historyLimit = val;
_trimStartArray = createTrimStartArray(_historyLimit);
}
};
return publicAPI;
}
const splitLast = arr => {
// split the last item from an array and return a tupple of [rest, last]
const length = arr.length;
const lastItem = arr[length - 1];
const restOfArr = arr.slice(0, length - 1);
return [restOfArr, lastItem];
};
const createShiftArrayItem = length => arr => {
const startIndex = arr.length < length ? 0 : length;
const trimmedArr = arr.slice(startIndex, arr.length);
return trimmedArr;
};
const purify = val => {
const typeAsString = Object.prototype.toString.call(val);
switch (typeAsString) {
case "[object Array]":
return val.slice();
case "[object Object]":
return { ...val };
default:
return val;
}
};
function createUndoRedo(initial, options = {}) {
const { trace, immutable, historyLimit = Infinity } = options;
let _historyLimit = historyLimit;
let _shiftArrayItem = createShiftArrayItem(_historyLimit);
logCurrent("init");
function createTimeline(initialCurrent) {
return {
history: [],
current: initialCurrent,
future: []
};
}
function logCurrent(str = "") {
trace && console.log(str, this.current);
}
function update(timeline, next) {
// update the current value
const { history, current } = timeline;
// calculate history storage limit
const limitedHistory = _shiftArrayItem(history);
const nextTimeline = {
history: [...limitedHistory, current],
current: immutable ? purify(next) : next,
// reset redo, don't allow redo if we update in the middle of the timeline
// this seems to be the idiomatic approach for most applications
future: []
};
logCurrent("update");
return nextTimeline;
}
function undo(timeline) {
if (_canUndo(timeline)) {
const { history, current, future } = timeline;
const [restOfArr, lastItem] = splitLast(history);
const nextTimeline = {
history: restOfArr,
current: lastItem,
future: [...future, current]
};
logCurrent("undo");
return nextTimeline;
} else {
return timeline;
}
}
function redo(timeline) {
if (_canRedo(timeline)) {
const { history, current, future } = timeline;
const [restOfArr, lastItem] = splitLast(future);
const nextTimeline = {
history: [...history, current],
current: lastItem,
future: restOfArr
};
logCurrent("redo");
return nextTimeline;
} else {
return timeline;
}
}
function _canUndo(timeline) {
return timeline.history.length > 0;
}
function _canRedo(timeline) {
return timeline.future.length > 0;
}
const publicAPI = {
createTimeline,
update,
undo,
redo,
get historyLimit() {
return _historyLimit;
},
set historyLimit(val) {
_historyLimit = val;
_shiftArrayItem = createShiftArrayItem(_historyLimit);
}
};
return publicAPI;
}
@sag1v

This comment has been minimized.

Copy link
Owner Author

sag1v commented Apr 22, 2019

usage example with react

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.