Configuration

interface EditorEngineConfig {
  canvasElement: HTMLCanvasElement;  // Required: the canvas DOM element
  width?: number;                    // Canvas width in pixels (default: 1080)
  height?: number;                   // Canvas height in pixels (default: 1080)
  backgroundColor?: string;          // Canvas background color (default: '#ffffff')
}

// Create an engine with custom dimensions
const canvas = document.createElement('canvas');
const engine = new EditorEngine({
  canvasElement: canvas,
  width: 1920,
  height: 1080,
  backgroundColor: '#f0f0f0',
});

// Zoom limits
const ZOOM_MIN = 0.1;       // 10% minimum zoom
const ZOOM_MAX = 5.0;       // 500% maximum zoom

// History
const MAX_HISTORY_SIZE = 50; // Maximum undo steps

// Export defaults
const EXPORT_QUALITY = 1;    // Default export quality (0-1)
const EXPORT_MULTIPLIER = 1; // Default resolution multiplier

// Canvas presets (see full list below)
const CANVAS_PRESETS = [
  { name: 'Instagram Post',    width: 1080, height: 1080 },
  { name: 'Instagram Story',   width: 1080, height: 1920 },
  { name: 'Facebook Post',     width: 1200, height: 628  },
  { name: 'Facebook Cover',    width: 820,  height: 312  },
  { name: 'Twitter Post',      width: 1200, height: 675  },
  { name: 'Twitter Header',    width: 1500, height: 500  },
  { name: 'YouTube Thumbnail', width: 1280, height: 720  },
  { name: 'LinkedIn Post',     width: 1200, height: 627  },
  { name: 'Pinterest Pin',     width: 1000, height: 1500 },
  { name: 'Presentation',      width: 1920, height: 1080 },
  { name: 'A4 Portrait',       width: 2480, height: 3508 },
  { name: 'A4 Landscape',      width: 3508, height: 2480 },
  { name: 'Business Card',     width: 1050, height: 600  },
  { name: 'Custom',            width: 1080, height: 1080 },
];

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

// List all presets
CANVAS_PRESETS.forEach(preset => {
  console.log(`${preset.name}: ${preset.width}x${preset.height}`);
});

// Apply a preset
const preset = CANVAS_PRESETS.find(p => p.name === 'Instagram Story');
if (preset) {
  engine.setCanvasSize(preset.width, preset.height);
}

// Change canvas dimensions at runtime
engine.setCanvasSize(1920, 1080);

// Change background color
engine.setBackgroundColor('#000000');

// Get current dimensions
const { width, height } = engine.getCanvasSize();

// Set zoom level
engine.setZoom(1.5);    // 150%
engine.zoomToFit();     // Fit canvas in viewport
engine.resetZoom();     // Reset to 100%

// Get current zoom
const zoom = engine.getZoom();

interface BrandingConfig {
  logo?: string;       // URL to custom logo image
  title?: string;      // Text shown next to logo in toolbar
  poweredBy?: boolean;  // Show "Powered by Design on Web" footer (default: true)
}

import { DesignEditor } from '@design-on-web/react';

function App() {
  return (
    <DesignEditor
      branding={{
        logo: "/my-logo.svg",
        title: "My Design Tool",
        poweredBy: false,
      }}
    />
  );
}

import { EditorEngine } from '@design-on-web/core';
import { EditorContext, EditorShell } from '@design-on-web/ui';
import { SvgExportPlugin } from '@design-on-web/export-svg';
import { PdfExportPlugin } from '@design-on-web/export-pdf';
import { PsdExportPlugin } from '@design-on-web/export-psd';
import { I18nManager } from '@design-on-web/shared';

// Import styles
import '@design-on-web/ui/themes/variables.css';
import '@design-on-web/ui/themes/light.css';
import '@design-on-web/ui/components/EditorShell.css';

async function initEditor() {
  const canvas = document.createElement('canvas');

  // 1. Create engine with config
  const engine = new EditorEngine({
    canvasElement: canvas,
    width: 1080,
    height: 1080,
    backgroundColor: '#ffffff',
  });

  // 2. Register plugins
  await engine.registerPlugin(SvgExportPlugin);
  await engine.registerPlugin(PdfExportPlugin);
  await engine.registerPlugin(PsdExportPlugin);

  // 3. Set locale
  I18nManager.instance.setLocale('en');

  // 4. Load saved design (optional)
  const savedJson = localStorage.getItem('my-design');
  if (savedJson) {
    await engine.loadJSON(savedJson);
  }

  return engine;
}