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.

Summary
mxUndoManagerImplements a command history.
Events
mxEvent.CLEARFires after clear was invoked.
mxEvent.UNDOFires afer a significant edit was undone in undo.
mxEvent.REDOFires afer a significant edit was redone in redo.
mxEvent.ADDFires after an undoable edit was added to the history.
Functions
mxUndoManagerConstructs a new undo manager with the given history size.
Variables
sizeMaximum command history size.
historyArray that contains the steps of the command history.
indexOfNextAddIndex of the element to be added next.
Functions
isEmptyReturns true if the history is empty.
clearClears the command history.
canUndoReturns true if an undo is possible.
undoUndoes the last change.
canRedoReturns true if a redo is possible.
redoRedoes the last change.
undoableEditHappenedMethod to be called to add new undoable edits to the history.
trimRemoves all pending steps after indexOfNextAdd from the history, invoking die on each edit.

Events

mxEvent.CLEAR

Fires after clear was invoked.  This event has no properties.

mxEvent.UNDO

Fires afer a significant edit was undone in undo.  The <code>edit</code> property contains the mxUndoableEdit that was undone.

mxEvent.REDO

Fires afer a significant edit was redone in redo.  The <code>edit</code> property contains the mxUndoableEdit that was redone.

mxEvent.ADD

Fires after an undoable edit was added to the history.  The <code>edit</code> property contains the mxUndoableEdit that was added.

Functions

mxUndoManager

function mxUndoManager(size)

Constructs a new undo manager with the given history size.  If no history size is given, then a default size of 100 steps is used.

Variables

size

mxUndoManager.prototype.size

Maximum command history size.  0 means unlimited history.  Default is 100.

history

mxUndoManager.prototype.history

Array that contains the steps of the command history.

indexOfNextAdd

mxUndoManager.prototype.indexOfNextAdd

Index of the element to be added next.

Functions

isEmpty

mxUndoManager.prototype.isEmpty = function()

Returns true if the history is empty.

clear

mxUndoManager.prototype.clear = function()

Clears the command history.

canUndo

mxUndoManager.prototype.canUndo = function()

Returns true if an undo is possible.

undo

mxUndoManager.prototype.undo = function()

Undoes the last change.

canRedo

mxUndoManager.prototype.canRedo = function()

Returns true if a redo is possible.

redo

mxUndoManager.prototype.redo = function()

Redoes the last change.

undoableEditHappened

mxUndoManager.prototype.undoableEditHappened = function(undoableEdit)

Method to be called to add new undoable edits to the history.

trim

mxUndoManager.prototype.trim = function()

Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit.  This is called from undoableEditHappened.

mxUndoManager.prototype.clear = function()
Clears the command history.
mxUndoManager.prototype.undo = function()
Undoes the last change.
mxUndoManager.prototype.redo = function()
Redoes the last change.
function mxUndoManager(size)
Constructs a new undo manager with the given history size.
mxUndoManager.prototype.size
Maximum command history size.
mxUndoManager.prototype.history
Array that contains the steps of the command history.
mxUndoManager.prototype.indexOfNextAdd
Index of the element to be added next.
mxUndoManager.prototype.isEmpty = function()
Returns true if the history is empty.
mxUndoManager.prototype.canUndo = function()
Returns true if an undo is possible.
mxUndoManager.prototype.canRedo = function()
Returns true if a redo is possible.
mxUndoManager.prototype.undoableEditHappened = function(undoableEdit)
Method to be called to add new undoable edits to the history.
mxUndoManager.prototype.trim = function()
Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit.
Implements a composite undoable edit.
mxEditor.prototype.installUndoHandler = (graph) =>
Adds the undoManager to the graph model and the view.
Action to change the root in a model.
Action to add or remove a child in a model.
Action to change a terminal in a model.
Extends mxEventSource to implement a view for a graph.
Extends mxEventSource to implement a graph model.
mxEventSource.prototype.addListener = function(name,
funct)
Binds the specified function to the given event name.
Close