Class UndoManager

A manager of Undoables.

You can undoables that you can undo or redo.

You can wire a keyboard shortcut, like CTRL+Z to undo, as follows:

// wire CTRL+Z to undo and CTRL+Y to redo. For Mac users, wire CMD+Z to undo and CMD+SHIFT+Z to redo.
window.addEventListener("keydown", (e) => {
  if (document.activeElement instanceof HTMLInputElement) {
    // input/text field has focus, undo/redo should affect the text and not the map
    return;
  }
  // ctrl+z or cmd+z (mac) to undo
  const isMac = window.navigator.platform.indexOf("Mac") >= 0 || window.navigator.userAgent.indexOf("Mac") >= 0;
  const isUndoKey = isMac ? (e.key === "z" && (e.metaKey && !e.shiftKey)) : (e.key === "z" && e.ctrlKey);
  if (isUndoKey) {
    SAMPLE_UNDO_MANAGER.undo();
    e.preventDefault();
  }
  // ctrl+y or cmd+shift+z (mac) to redo
  const isRedoKey = isMac ? (e.key === "z" && e.metaKey && e.shiftKey) : (e.key === "y" && e.ctrlKey);
  if (isRedoKey) {
    SAMPLE_UNDO_MANAGER.redo();
    e.preventDefault();
  }
});

Copy

You usually create undoables in response to an event from the API, and then add them to an UndoManager. You can find a list of common events in Undoable.

This example shows how to create Undoables in LuciadRIA:

/**
 * Adds sample undo/redo support to an EditController.
 * @param editController The EditController to add sample undo/redo support to
 * @param undoManager The UndoManager to add the undoable to
 */
export const addEditUndoSupport = (editController: EditController, undoManager: UndoManager = SAMPLE_UNDO_MANAGER): Handle => {
  let lastShape = editController.feature.shape ? editController.feature.shape.copy() : null;
  const editHandle = editController.on("EditShape", ({shape, status}) => {
    if (status === EditShapeStatus.FINISHED) {
      const label = `edit ${shapeToString(shape)}`;
      const newShape = shape ? shape.copy() : null;
      addChangeShapeUndoable(editController.map!, editController.layer, editController.feature, lastShape, newShape, label, undoManager);
      lastShape = newShape ? newShape.copy() : null;
    }
  });
  const restartHandle = editController.on("Restarted", () => {
    lastShape = editController.feature.shape ? editController.feature.shape.copy() : null;
  });
  const deactivateHandle = editController.on("Deactivated", () => {
    restartHandle.remove();
    editHandle.remove();
    deactivateHandle.remove();
  });
  return {
    remove: () => {
      restartHandle.remove();
      editHandle.remove();
      deactivateHandle.remove();
    }
  }
}

Copy

You can find the full source, and more examples, in samples/common/core/util/SampleUndoSupport.ts.

See the Adding undo/redo support to your application guide for more information on how to work with undo/redo in LuciadRIA.

See

Undoable

Since

2022.1