mxUndoManager

Implements a command history.  When changing the graph model, an <mxUndoableChange> object is created at the start of the transaction (when model.beginUpdate is called).  All atomic changes are then added to this object until the last model.endUpdate call, at which point the mxUndoableEdit is dispatched in an event, and added to the history inside mxUndoManager.  This is done by an event listener in mxEditor.installUndoHandler.

Each atomic change of the model is represented by an object (eg.  mxRootChange, mxChildChange, mxTerminalChange etc) which contains the complete undo information.  The mxUndoManager also listens to the mxGraphView and stores it’s changes to the current root as insignificant undoable changes, so that drilling (step into, step up) is undone.

This means when you execute an atomic change on the model, then change the current root on the view and click undo, the change of the root will be undone together with the change of the model so that the display represents the state at which the model was changed.  However, these changes are not transmitted for sharing as they do not represent a state change.

Example

When adding an undo manager to a graph, make sure to add it to the model and the view as well to maintain a consistent display across multiple undo/redo steps.

let undoManager = new mxUndoManager();
let listener = function(sender, evt)
{
  undoManager.undoableEditHappened(evt.getProperty('edit'));
};
graph.getModel().addListener(mxEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener);

The code creates a function that informs the undoManager of an undoable edit and binds it to the undo event of mxGraphModel and mxGraphView using mxEventSource.addListener.