Implementing Undo and Redo functionality javascript and php

My javascript undo manager uses the command pattern. Basically, for each action you also implement an undo action and a redo action. You could build the same functionality serverside.

https://github.com/ArthurClemens/Javascript-Undo-Manager

And this is a clear code example of the command pattern: https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/command.html


At a basic level, you need two things:

  • an operation stack (array) which keeps track of the operations that have been performed. When the user performs an operation, you create an object that describes the operation and add it to the array. When the user hits undo, you can remove the last item from the array.

  • each operation type needs a 'save' method and an 'undo' method. This can get tricky as some 'undo' methods are similar to their 'save' method (i.e. to undo a horizontal flip you just do another flip), whereas others do not have such symmetry (i.e. to undo a crop you'd have to store the image data as it was before the crop occurred).

If you want 'redo' functionality, then you'd need a second operation stack. Each time an operation was undone, you'd add it to the end of the redo stack. If the user hits 'Redo', then you move it back to the operation stack again.

It may help to look into the Command pattern (http://en.wikipedia.org/wiki/Command_pattern), as this is often used to implement Undo.