Implementing undo in a web app

Question

I\'m creating a map editing webapp where we can create and edit polylines, polygons etc. I\'ve some trouble finding informations on undo implementation on the web, I find wh

Answer 1

The way Cappuccino's automatic undo support works is by telling the undo manager what properties should be undoable. For example, pretend you are managing records of students, you might do something like:

[theUndoManager observeChangesForKeyPath:@"firstName" ofObject:theStudent];
[theUndoManager observeChangesForKeyPath:@"lastName" ofObject:theStudent];

Now regardless of how the students name is changed in the UI, hitting undo will automatically revert it back. Cappuccino also automatically handles coalescing changes in the same run loop, marking the document as "dirty" (needing save) when there are items on the undo stack, etc etc (in other words, the above should be ALL you need to do to support undo).

As another example, if you wanted to make additions and deletions of students undoable, you'd do the following:

[theUndoManager observeChangesForKeyPath:@"students" ofObject:theClass];

Since "students" is an array of students in theClass, then additions and deletions from this array will be tracked.

Answer 2

Here is a sample of N-Level undo using Knockout JS:

http://jsfiddle.net/paultyng/TmvCs/22/

It uses an MVVM model so your page state is represented in a javascript object that it maintains a history for.

Answer 3

You need to have functions for object creation and deletion. Then pass those functions to the undo manager. See the demo file of my javascript undo manager: https://github.com/ArthurClemens/Javascript-Undo-Manager

The demo code shows canvas, but the code is agnostic.

It doesn't contain key bindings, but may help you with the first steps.

Myself I have used this in a web application with buttons for undo and redo, next to save.