yFiles for HTML Demos Tutorial: Basic Features 07 Undo Clipboard Support yFiles Demos

Undo and Clipboard Support

How to activate undo and clipboard.

This step shows how to use the undo and clipboard features.

Undo

You can enable undo functionality for a graph as follows:

graph.undoEngineEnabled = true

By enabling the undo functionality, the graph will store any edits made and allow for the use of undo/redo commands. This ensures that the following functionality is now available.

if (
  graph.undoEngineEnabled &&
  graph.undoEngine &&
  graph.undoEngine.canUndo()
) {
  graph.undoEngine.undo()
}

if (
  graph.undoEngineEnabled &&
  graph.undoEngine &&
  graph.undoEngine.canRedo()
) {
  graph.undoEngine.redo()
}

if (graph.undoEngineEnabled && graph.undoEngine) {
  graph.undoEngine.clear()
}

To test the functionality mentioned above, modify the graph (e.g. move, create, delete, resize nodes).

Press Ctrl+Z to undo changes, or click the Undo button.
Press Ctrl+Y to redo changes, or click the Redo button.
Click the Clear Undo Queue button to clear any stored undo entries.

Clipboard

Clipboard functionality is enabled by default. It is available interactively with short-cuts via GraphEditorInputMode if allowClipboardOperations is enabled.

This means that the following functionality is available by default:

Select items in the graph using the mouse or keyboard
Copy items by pressing Ctrl+C
Cut items by pressing Ctrl+X
Paste items by pressing Ctrl+V
Duplicate items by pressing Ctrl+D

Note	The following code is for illustrative purposes only.

graphEditorInputMode.allowClipboardOperations = true // this is the default, already

// programmatically copy the selected graph items
if (graphComponent.selection.selectedNodes.size > 0) {
  graphEditorInputMode.copy()
}

// programmatically paste and clear the clipboard content
if (!graphComponent.clipboard.empty) {
  graphEditorInputMode.paste()
  graphComponent.clipboard.clear()
}

08 Grouping