Synchronizing Undo and Redo Between Multiple Graphs

Motivation

When multiple graph views are included in the same page, the need can arise to have a single undo queue for all graphs. This ensures that the changes to the different graphs are undone in the order they originally ocurred.

Approach

We use a single UndoEngine for all GraphComponents. In order to accomplish this, we have to subclass DefaultGraph.

Implementation

We use the UndoEngine of the first GraphComponent for the subsequent GraphComponents.

  // get the default graph instance
  const defaultGraph1 = graphComponent1.graph.lookup(DefaultGraph.$class) as DefaultGraph
  // enable undo
  defaultGraph1.undoEngineEnabled = true
  // get the undo engine
  const undoEngine = defaultGraph1.undoEngine

Subclass DefaultGraph and override createUndoEngine. This lets us set the UndoEngine from outside to a field.

class MyDefaultGraph extends DefaultGraph {
  externalUndoEngine: UndoEngine | null = null

  protected createUndoEngine(): UndoEngine {
    // use the undoEngine set from outside, if available
    return this.externalUndoEngine || super.createUndoEngine()
  }
}

Assign MyDefaultGraph instances to the subsequent GraphComponents and assign the UndoEngine from the first GraphComponent to each.

  const defaultGraph2 = new MyDefaultGraph();
  // assign the undo engine
  defaultGraph2.externalUndoEngine = undoEngine;
  // only then enable undo
  defaultGraph2.undoEngineEnabled = true;
  // assign the graph to the other GraphComponent
  graphComponent2.graph = defaultGraph2;