Undo/Redo

Annota provides built-in undo/redo support for all annotation operations.

Basic Usage

import { useAnnotator, useCanUndo, useCanRedo } from "annota";

function UndoRedoButtons() {
  const annotator = useAnnotator();
  const canUndo = useCanUndo();
  const canRedo = useCanRedo();

  return (
    <div>
      <button
        onClick={() => annotator?.undo()}
        disabled={!canUndo}
      >
        Undo
      </button>
      <button
        onClick={() => annotator?.redo()}
        disabled={!canRedo}
      >
        Redo
      </button>
    </div>
  );
}

Keyboard Shortcuts

function UndoRedoShortcuts() {
  const annotator = useAnnotator();

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
        e.preventDefault();
        if (e.shiftKey) {
          annotator?.redo();
        } else {
          annotator?.undo();
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [annotator]);

  return null;
}

Using useHistory

import { useHistory } from "annota";

function HistoryInfo() {
  const { canUndo, canRedo, undo, redo } = useHistory();

  return (
    <div>
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
    </div>
  );
}

Supported Operations

The following operations are automatically tracked:

✅ Create annotation
✅ Delete annotation
✅ Update annotation (properties, style, shape)
✅ Move annotation
✅ Resize annotation
✅ Split annotation
✅ Merge annotations

Clearing History

annotator.clearHistory();