If you're using Angular or Webpack/Rollup etc, this should suffice for it to appear in your output bundle. If you're more of a traditionalist and
you're including scripts individually, you'll find it at:

Setup

You'll first need to create an instance of the Toolkit. Then you can create an undo manager like this:

varundoManager=newjsPlumbToolkitUndoRedo({toolkit:toolkitInstance})

Compounding Operations

When you remove a node or group from a Toolkit instance that has edges attached to it, the attached edges are first removed from the Toolkit
instance. This causes individual edge removal operations to be tracked by the undo/redo manager, followed by the node/group removal operation. If
you subsequently execute an undo command, the only thing that is undone is the removal of the node/group - the edge removal operations are still
on the stack, and need to be undone individually. However, you can instruct the undo/redo manager to fold all of these operations into one:

With compound:true, the undo manager will fold a series of edge removals followed by a node/group removal into a single operation on the
undo stack. Executing undo will reinstate the node/group and all of the edges that were removed in one operation. Executing redo subsequently will
once again remove all the edges and the node/group.

Stack size

By default, a maximum of 50 operations can be stored on the undo stack. You can set this value with the maximumSize parameter:

Operations available

undo Executes an undo of the most recent supported operation. If there is nothing in the undo queue, this method has no effect.

redo Executes a redo of the most recently undone operation. If there is nothing in the redo queue, this method has no effect.

clear Clears the undo and redo queues.

transaction Allows you to group a set of changes into a single entry on the undo stack, in the same way the undo manager will
compound a node/port/group removal and its associated edges into a single operation.

Here, we compound the addition of two nodes and an edge connecting them into a single entry on the undo
stack. Were the user to call undo on the manager at this point, both nodes and the edge would be removed.

Responding to changes

The undo/redo manager fires an event whenever its state changes, either as a result of an event from the associated Toolkit, or from an undo or
redo operation executed directly on itself. To capture these events, supply an onChange function to the constructor:

varundoManager=newjsPlumbToolkitUndoRedo({toolkit:toolkitInstance,onChange:function(mgr,undoCount,redoCount){// mgr is the undo manager instance// undoCount is the current size of the undo stack// redoCount is the current size of the redo stack}})

Example - Toolkit demonstrations

We use the undo/redo manager in several of the Toolkit demonstrations. This example is from our demo-layouts. The constructor code for the undo/redo manager looks like this:

It's a simple setup where by default the undo/redo buttons are gray, switching to blue when their parent has the appropriate
attribute set. They're never actually disabled in our demonstrations; they're not actually buttons, and it doesn't matter anyway, as
calling undo or redo on an instance of the undo/redo manager when there is nothing on the relevant stack has no effect.

Compounding operations

We set compound:true on the undo manager, so that it will automatically group removal operations together. But in this demonstration we also
manually compound operations, which is worth discussing. When you click the X button on some node, we actually delete that node and all of its
descendants. The code originally looked like this:

Mostly the same, with the exception that the selection remove call is executed inside a transaction declared on the undo/redo manager. So anything that is removed as a part of the toolkit.remove(selection) call
is automatically compounded into a single entry on the undo stack. Clicking the 'undo' button at this point will cause the node and all of its descendants to be restored, along with the edges between them.

Another example of compounding into a single transaction happens when the user adds a child to some node. The code used to be:

jsPlumb.on(canvasElement,"tap",".add",function(e){// this helper method can retrieve the associated// toolkit information from any DOM element.varinfo=toolkit.getObjectInfo(this);// get a random node.varn=jsPlumbToolkitDemoSupport.randomNode();// add the node to the toolkitvarnewNode=toolkit.addNode(n);// and add an edge for it from the current node.toolkit.addEdge({source:info.obj,target:newNode});});

Now with the undo/redo manager it looks like this:

jsPlumb.on(canvasElement,"tap",".add",function(e){// this helper method can retrieve the associated// toolkit information from any DOM element.varinfo=toolkit.getObjectInfo(this);// get a random node.varn=jsPlumbToolkitDemoSupport.randomNode();undoredo.transaction(function(){// add the node to the toolkitvarnewNode=toolkit.addNode(n);// and add an edge for it from the current node.toolkit.addEdge({source:info.obj,target:newNode});});});

.. the addition of the new node, and of its edge connecting it to its parent, is treated as a single entry on the undo stack.