Engine API

The EditxEngine class is the main entry point for the engine.

Properties

History

Command-backed document edits are tracked for undo/redo outside silent mode. Scene creation and loading establish a new baseline and clear history.

engine.undo();
engine.redo();
engine.canUndo(); // boolean
engine.canRedo(); // boolean
engine.clearHistory();

Batching

Batch multiple mutations into a single undo step:

engine.beginBatch();
engine.block.setPosition(id, 10, 20);
engine.block.setRotation(id, 45);
engine.endBatch(); // single undo step

Silent Mode

Suppress history tracking temporarily:

engine.beginSilent();
// ... mutations won't be recorded in history
engine.endSilent();

Active Scene & Page

engine.setActiveScene(sceneId);
engine.getActiveScene(); // number | null
engine.setActivePage(pageId);
engine.getActivePage(); // number | null

Events

// Generic event bus
const handleUndo = () => { /* ... */ };
engine.on("history:undo", handleUndo);
engine.off("history:undo", handleUndo);

// Typed subscriptions (return unsubscribe function)
const unsubscribeHistory = engine.onHistoryChanged(() => { /* ... */ });
const unsubscribeZoom = engine.onZoomChanged((zoom) => { /* ... */ });
const unsubscribePan = engine.onPanChanged(({ x, y }) => { /* ... */ });
const unsubscribeMode = engine.onEditModeChanged(({ mode, previousMode }) => { /* ... */ });
const unsubscribeTransform = engine.onBlockTransform(({ block, phase }) => { /* ... */ });

Export

const blob = await engine.exportScene({
  format: "png",   // "png" | "jpeg" | "webp"
  quality: 0.92,   // 0—1, for jpeg/webp
  pixelRatio: 2,   // DPR multiplier
});

Export an individual graphic, text, image, or group into a fixed output frame:

const blob = await engine.exportBlock(blockId, {
  width: 1200,
  height: 630,
  padding: 24,
  pixelRatio: 2,
});

Width and height must be positive integers. Padding must be nonnegative and leave a positive inner frame; pixel ratio must be positive. Missing blocks, unsupported block types, and engines without a renderer reject the promise.

Color utilities

import { colorToHex, hexToColor } from "@editx/engine";

hexToColor("#2563eb");   // alpha = 1
hexToColor("#2563eb80"); // parses 8-bit alpha
colorToHex({ r: 0.15, g: 0.39, b: 0.92, a: 0.5 }); // "rgba(38,99,235,0.5)"

Lifecycle

engine.dispose(); // clean up renderer and image cache