Printing Features

import { EditorEngine } from '@design-on-web/core';
import type { ProductConfig, PrintSizeOption } from '@design-on-web/core';

// Define a t-shirt product
const tshirtProduct: 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-safe-zone.svg',
};

// Define available print sizes
const printSizes: PrintSizeOption[] = [
  { label: 'A4', widthCm: 21, heightCm: 29.7 },
  { label: 'A3', widthCm: 29.7, heightCm: 42 },
  { label: 'Letter', widthCm: 21.59, heightCm: 27.94 },
];

// Apply the product config with a default print size
await engine.applyProductConfig(tshirtProduct, printSizes[0]);

// The editor now shows:
// - T-shirt mockup image behind the canvas
// - Canvas sized and positioned to match the print area
// - Dieline overlay (safe zone) on top of the design

// User selects a different print size from dropdown
engine.changePrintSize({ label: 'A3', widthCm: 29.7, heightCm: 42 });

// Canvas dimensions are recalculated based on the product's
// canvasSizeCm and the new print size ratios

// Get the active product config
const config = engine.getActiveProductConfig();
console.log(config?.name); // "White T-Shirt — Front"

// Clear everything when switching to a different product
engine.clearProductConfig();

// Set a background mockup manually (without product config)
await engine.setBackgroundMockup('/assets/packaging-box.png', {
  opacity: 0.8,
});

// The mockup renders behind all design objects
// It is NOT included in exports (PNG, PDF, SVG, etc.)
// It is NOT selectable or movable by the user

// Adjust opacity without reloading the image
engine.updateBackgroundMockup({ opacity: 0.5 });

// Remove when switching products
engine.removeBackgroundMockup();

// Set a dieline overlay (cut/fold/bleed lines)
await engine.setDielineOverlay('/assets/dielines/box-tuck-end.svg', {
  opacity: 0.6,
});

// The overlay renders on TOP of all design objects
// It is NOT included in exports
// It is NOT selectable or movable

// Toggle visibility (useful for "preview" mode)
engine.toggleDielineVisibility(false); // hide — user sees clean design
engine.toggleDielineVisibility(true);  // show — user sees guides again
engine.toggleDielineVisibility();      // toggle current state

// Update options
engine.updateDielineOverlay({ opacity: 0.3 });

// Remove entirely
engine.removeDielineOverlay();

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

// Generate a tuck-end box dieline from physical dimensions
const svg = generateTuckEndBoxDieline({
  length: 10,   // cm — box length (P)
  width: 6,     // cm — box width (L)
  height: 15,   // cm — box height (T)
  bleed: 0.3,   // cm — bleed zone outside cut lines
  safeZone: 0.5, // cm — safe zone inside cut lines
  dpi: 300,     // resolution for px conversion
});

// svg is a complete SVG string with color-coded lines:
// - Red (#FF0000): cut lines
// - Blue (#0000FF): fold lines
// - Orange (#FF8C00): glue flap areas
// - Magenta (#FF00FF): bleed zone boundary
// - Green (#00AA00): safe zone boundary

// Use it directly as a dieline overlay
const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
await engine.setDielineOverlay(url, { opacity: 0.5 });

// Complete printing workflow: packaging box editor

// 1. Admin defines the product configuration
const boxProduct: ProductConfig = {
  id: 'tuck-end-box-small',
  name: 'Tuck End Box — Small',
  mockupImage: '/assets/mockups/tuck-end-box.png',
  printArea: { x: 50, y: 80, width: 900, height: 700 },
  canvasSizeCm: { width: 32, height: 25 },
};

// 2. Apply product config
await engine.applyProductConfig(boxProduct, {
  label: 'Custom',
  widthCm: 32,
  heightCm: 25,
});

// 3. Auto-generate dieline from box dimensions
const dieline = generateTuckEndBoxDieline({
  length: 10, width: 6, height: 15,
  bleed: 0.3, safeZone: 0.5, dpi: 300,
});
const dielineUrl = URL.createObjectURL(
  new Blob([dieline], { type: 'image/svg+xml' })
);
await engine.setDielineOverlay(dielineUrl, { opacity: 0.5 });

// 4. User designs on the canvas...

// 5. Toggle dieline off for a clean preview
engine.toggleDielineVisibility(false);

// 6. Export the design (mockup + dieline excluded automatically)
const pdfBlob = await engine.exportAs('pdf', { multiplier: 2 });