EditorEngine API Reference

import { EditorEngine } from '@design-on-web/core';

const canvasEl = document.createElement('canvas');
const engine = new EditorEngine({
  canvasElement: canvasEl,
  width: 1080,
  height: 1080,
  backgroundColor: '#ffffff',
});

// Add a rectangle
const rectId = engine.addShape('rect', {
  left: 100, top: 100,
  width: 200, height: 150,
  fill: '#4f46e5',
  stroke: '#312e81',
  strokeWidth: 2,
  rx: 8, ry: 8, // rounded corners
});

// Add a circle
const circleId = engine.addShape('circle', {
  left: 300, top: 200,
  radius: 75,
  fill: '#ef4444',
});

// Add text
const textId = engine.addText('Hello World', {
  left: 100, top: 400,
  fontSize: 48,
  fill: '#1f2937',
  fontFamily: 'Inter',
  fontWeight: 'bold',
});

// Add image (async — waits for image to load)
const imageId = await engine.addImage('https://example.com/photo.jpg', {
  left: 50, top: 50,
  scaleX: 0.5,
  scaleY: 0.5,
});

// Get currently selected objects
const selected = engine.getSelectedObjects();
// => [{ id: 'abc123', type: 'rect', left: 100, top: 100, ... }]

// Select a specific object by ID
engine.selectObject('abc123');

// Deselect everything
engine.deselectAll();

// Remove an object
engine.removeObject('abc123');

// Zoom
const currentZoom = engine.getZoom(); // => 1
engine.setZoom(1.5); // 150%

// Canvas size
const size = engine.getCanvasSize(); // => { width: 1080, height: 1080 }
engine.setCanvasSize({ width: 1920, height: 1080 });

// Enable grid snapping
engine.enableGridSnap(true);

// Set snap increment to 25px (default is 50)
engine.setGridSnapSize(25);

// Disable grid snapping
engine.enableGridSnap(false);

// Add a horizontal guide at y=200
const guideId = engine.addGuide('horizontal', 200);

// Add a vertical guide at x=540
const guideId2 = engine.addGuide('vertical', 540);

// List all guides
const guides = engine.getGuides();
// => [{ id: 'guide-1', axis: 'horizontal', position: 200 }, ...]

// Remove a specific guide
engine.removeGuide(guideId);

// Clear all guides
engine.clearGuides();

// Undo the last operation
engine.undo();

// Redo the last undone operation
engine.redo();

// Check availability
if (engine.canUndo()) engine.undo();
if (engine.canRedo()) engine.redo();

// Save canvas state to JSON string
const json = engine.toJSON();
localStorage.setItem('myDesign', json);

// Load canvas state from JSON string
const saved = localStorage.getItem('myDesign');
if (saved) {
  await engine.loadJSON(saved);
}

// Basic export
const pngBlob = await engine.exportAs('png');

// With options
const hiResBlob = await engine.exportAs('png', { multiplier: 2 });
const jpegBlob = await engine.exportAs('jpeg', { quality: 0.85 });
const pdfBlob = await engine.exportAs('pdf');

// Enable freehand drawing mode
engine.setDrawingMode(true);

// Configure the brush
engine.updateBrush({
  color: '#ff0000',
  width: 5,
  opacity: 0.8,
});

// Disable drawing mode
engine.setDrawingMode(false);

// Apply text shadow
engine.applyTextShadow(textId, {
  color: 'rgba(0,0,0,0.5)',
  blur: 4,
  offsetX: 2,
  offsetY: 2,
});

// Remove text shadow
engine.applyTextShadow(textId, null);

// Apply text outline (stroke)
engine.applyTextOutline(textId, {
  color: '#000000',
  width: 2,
});

// Remove text outline
engine.applyTextOutline(textId, null);

// Apply text decoration
engine.applyTextDecoration(textId, {
  underline: true,
  linethrough: false,
});

// Apply gradient fill
engine.applyGradientFill(rectId, {
  type: 'linear', // 'linear' | 'radial'
  angle: 90,
  colorStops: [
    { offset: 0, color: '#4f46e5' },
    { offset: 1, color: '#7c3aed' },
  ],
});

// Update any object property
engine.applyProperties(rectId, {
  fill: '#10b981',
  opacity: 0.8,
  angle: 45,
  scaleX: 1.5,
  scaleY: 1.5,
});

// Copy style from one object
const style = engine.copyStyle('rect-abc');
// => { fill: '#4f46e5', stroke: '#312e81', strokeWidth: 2, opacity: 1, ... }

// Paste style onto one or more target objects
if (style) {
  engine.pasteStyle(['circle-xyz', 'triangle-123'], style);
}

// Move forward/backward in the layer stack
engine.bringForward(rectId);
engine.sendBackward(rectId);
engine.bringToFront(rectId);
engine.sendToBack(rectId);

// Define a product configuration (e.g., for a t-shirt)
const tshirtConfig: ProductConfig = {
  id: 'tshirt-white-front',
  name: 'White T-Shirt — Front',
  mockupImage: '/assets/mockups/tshirt-white.png',
  printArea: { x: 280, y: 180, width: 520, height: 620 },
  canvasSizeCm: { width: 30, height: 40 },
  dielineImage: '/assets/dielines/tshirt-front.svg',
};

// Apply product config with a specific print size
await engine.applyProductConfig(tshirtConfig, {
  label: 'A4',
  widthCm: 21,
  heightCm: 29.7,
});

// Change print size later (recalculates canvas)
engine.changePrintSize({ label: 'A3', widthCm: 29.7, heightCm: 42 });

// Get current product config
const active = engine.getActiveProductConfig();

// Clear product configuration
engine.clearProductConfig();

// Background mockup — image behind the canvas
await engine.setBackgroundMockup('/assets/tshirt-mockup.png', {
  opacity: 0.9,
});
engine.updateBackgroundMockup({ opacity: 0.5 });
engine.removeBackgroundMockup();

// Dieline overlay — SVG/image on top of the canvas
await engine.setDielineOverlay('/assets/box-dieline.svg', {
  opacity: 0.6,
});
engine.updateDielineOverlay({ opacity: 0.3 });
engine.toggleDielineVisibility(false); // hide
engine.toggleDielineVisibility();      // toggle
engine.removeDielineOverlay();

// Access the underlying manager
const manager = engine.getMockupDielineManager();

// Canvas instance (Fabric.js Canvas)
const canvas = engine.getCanvas();

// EventBus for pub/sub events
const eventBus = engine.getEventBus();

// Zustand store for state management
const store = engine.getStore();

// Plugin registry
const plugins = engine.getPluginRegistry();

// Manager instances
const exportManager = engine.getExportManager();
const canvasManager = engine.getCanvasManager();
const templateManager = engine.getTemplateManager();
const pageManager = engine.getPageManager();
const versionManager = engine.getVersionManager();

import { PsdExportPlugin } from '@design-on-web/export-psd';

await engine.registerPlugin(PsdExportPlugin);

// Release all resources
engine.destroy();