Editor API

The engine.editor API controls the viewport, edit modes, cursor, and coordinate transformations.

Edit Mode

engine.editor.setEditMode("Transform");
engine.editor.setEditMode("Crop", { blockId: id });
engine.editor.getEditMode(); // "Transform" | "Crop" | ...
engine.editor.getEditModeConfig();

Crop sessions

Crop mode supports two targets:

• source edits an image or page source crop.
• shape-image edits the frame and transform of a graphic's enabled image fill.

const target = engine.editor.getCropEditTarget(blockId);
// "source" | "shape-image" | null

engine.editor.setEditMode("Crop", { blockId });

An eligible graphic image fill is selected automatically; other crop-capable blocks retain source-crop behavior.

Image-fill preview

Image-fill changes are preview state until committed, so live slider and drag updates do not create history entries.

const crop = engine.editor.getImageFillCrop();

engine.editor.updateImageFillCrop({
	mode: "crop",
	offsetX: 24,
	offsetY: -12,
	scale: 1.5,
	rotation: 90,
	flipHorizontal: true,
});

engine.editor.applyCropDimensions(420, 240);
const size = engine.editor.getCropVisualDimensions();
engine.editor.resetImageFillCrop();

updateImageFillCrop and resetImageFillCrop return the normalized live state or null when no image-fill session is active.

Commit, cancel, and events

const unsubscribe = engine.editor.onImageFillCropChanged(({ blockId, crop }) => {
	console.log(blockId, crop);
});

engine.editor.commitCrop();
// Image-fill crop: writes frame + fill transform as one undo entry, returns null.
// Source crop: keeps its existing CropRect return behavior.

engine.editor.cancelCrop();
// Discards preview state without changing document history.

Leaving Crop mode also discards an uncommitted image-fill preview. Read getImageFillCrop() before committing when the final preview state is needed.

Viewport & Zoom

engine.editor.setZoom(1.5);
engine.editor.getZoom();
engine.editor.zoomIn(0.1);   // optional step
engine.editor.zoomOut(0.1);
engine.editor.resetZoom();
engine.editor.fitToScreen(24);    // padding in px
engine.editor.fitToSelection(24);

Pan

engine.editor.panTo(x, y);     // absolute position
engine.editor.panBy(dx, dy);   // relative offset
engine.editor.getPan();         // { x, y }

Coordinate Transforms

Convert between screen pixels and world (canvas) coordinates:

const worldPt = engine.editor.screenToWorld({ x: 100, y: 200 });
const screenPt = engine.editor.worldToScreen({ x: 50, y: 100 });

Block Screen Rects

Get a block's bounding rectangle in screen coordinates (useful for overlays):

engine.editor.getSelectedBlockScreenRect();
// { x, y, width, height } | null

engine.editor.getBlockScreenRect(blockId);
// { x, y, width, height } | null

Cursor

engine.editor.setCursorType("default");
engine.editor.getCursorType();
engine.editor.setCursorRotation(45);
engine.editor.getCursorRotation();

History (via Editor)

engine.editor.undo();
engine.editor.redo();
engine.editor.canUndo();
engine.editor.canRedo();
engine.editor.clearHistory();

These delegate to the same history the engine uses. You can call either engine.undo() or engine.editor.undo().