Skip to main content
Platform:
Language:

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.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

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
File:


// 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();
}