Easy undo-redo in JavaScript.

UndoStack.js

function UndoItem (perform, data) {
	this.perform = perform;
	this.data = data;
}

/**
 * UndoStack:
 * Easy undo-redo in JavaScript.
 **/

function UndoStack(self) {
	this.stack = [];
	this.current = -1;
	this.self = self;
}

/**
 * UndoStack#push (action, data);
 * perform(true, data)  -> Function which performs redo based on previous state
 * perform(false, data) -> Function which performs undo based on current state
 * data -> Argument passed to undo/redo functions
 **/
UndoStack.prototype.push = function (perform, data) {
	this.current++;

	// We need to invalidate all undo items after this new one
	// or people are going to be very confused.
	this.stack.splice(this.current);
	this.stack.push(new UndoItem(perform, data));
};

UndoStack.prototype.undo = function () {
	var item;

	if (this.current >= 0) {
		item = this.stack[this.current];
		item.perform.call(this.self, false, item.data);
		this.current--;
	} else {
		throw new Error("Already at oldest change");
	}
};

UndoStack.prototype.redo = function () {
	var item;

	item = this.stack[this.current + 1];
	if (item) {
		item.perform.call(this.self, true, item.data);
		this.current++;
	} else {
		throw new Error("Already at newest change");
	}
};

UndoStack.prototype.invalidateAll = function () {
	this.stack = [];
	this.current = -1;
};

Very nice. I will use this example to help me redesign my current out-dated undo-redo.

What's the use of this.self in this case?

can you make an example how to use it with textarea and two buttons to undo and redo the text on the textarea ?

Hi,
I hope you are well

Can this code be used with p5.js?

Thank you