Skip to content

Undo and History

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to undo and redo steps in the editor API.

Functions

createHistory(): HistoryId

Create a history which consists of an undo/redo stack for editing operations. There can be multiple. But only one can be active at a time.

  • Returns The handle of the created history.
destroyHistory(history: HistoryId): void

Destroy the given history, throws an error if the handle doesn’t refer to a history.

  • history: The history to destroy.
setActiveHistory(history: HistoryId): void

Mark the given history as active, throws an error if the handle doesn’t refer to a history. All other histories get cleared from the active state. Undo/redo operations only apply to the active history.

  • history: The history to make active.
getActiveHistory(): HistoryId

Get the handle to the currently active history. If there’s none it will be created.

  • Returns History - The handle of the active history.
addUndoStep(): void

Adds a new history state to the stack, if undoable changes were made.

undo(): void

Undo one step in the history if an undo step is available.

canUndo(): boolean

If an undo step is available.

  • Returns True if an undo step is available.
redo(): void

Redo one step in the history if a redo step is available.

canRedo(): boolean

If a redo step is available.

  • Returns True if a redo step is available.
onHistoryUpdated: (callback: () => void) => (() => void)

Subscribe to changes to the undo/redo history.

  • callback: This function is called at the end of the engine update, if the undo/redo history has been changed.
  • Returns A method to unsubscribe

Full Code

Here’s the full code:

// Manage history stacks
const newHistory = engine.editor.createHistory();
const oldHistory = engine.editor.getActiveHistory();
engine.editor.setActiveHistory(newHistory);
engine.editor.destroyHistory(oldHistory);


const unsubscribe = engine.editor.onHistoryUpdated(() => {
  const canUndo = engine.editor.canUndo();
  const canRedo = engine.editor.canRedo();
  console.log('History updated', { canUndo, canRedo });
});


// Push a new state to the undo stack
engine.editor.addUndoStep();


// Perform an undo, if possible.
if (engine.editor.canUndo()) {
  engine.editor.undo();
}


// Perform a redo, if possible.
if (engine.editor.canRedo()) {
  engine.editor.redo();
}