@overtone-art/canvas-editor-core 0.0.1 → 0.2.0

package/dist/index.d.mts

@@ -9,6 +9,12 @@ interface LayerData {
     visible: boolean;
     locked: boolean;
     opacity: number;
+    /** Non-fabric metadata persisted with the layer (pattern config, etc). */
+    meta?: LayerMeta;
+}
+interface LayerMeta {
+    pattern?: PatternState;
+    [key: string]: unknown;
 }
 interface SerializedLayer extends LayerData {
     fabricObject: Record<string, unknown>;
@@ -21,6 +27,7 @@ interface EditorState {
     };
     layers: SerializedLayer[];
     background?: string;
+    mockup?: MockupConfig | null;
 }
 interface EditorConfig {
     width: number;
@@ -71,6 +78,53 @@ interface PrintifyPositioning {
     scale: number;
     angle: number;
 }
+type TileMode = 'grid' | 'brick-horizontal' | 'brick-vertical';
+interface PatternConfig {
+    mode: TileMode;
+    /** Extra horizontal gap between tiles, as % of tile width. */
+    horizontalSpacing: number;
+    /** Extra vertical gap between tiles, as % of tile height. */
+    verticalSpacing: number;
+    /** Rotation of the whole pattern, in degrees. */
+    angle: number;
+    /** Brick row/column shift, as % of tile size. */
+    horizontalOffset: number;
+    /** Added rotation per horizontal step, in degrees. */
+    rotationStepH: number;
+    /** Added rotation per vertical step, in degrees. */
+    rotationStepV: number;
+}
+/** Persisted on a layer's meta while it is rendered as a repeating pattern. */
+interface PatternState {
+    config: PatternConfig;
+    /** Original (pre-pattern) image source, as a durable data URL when possible. */
+    originalSrc: string;
+    /** Original fabric transform, restored when the pattern is turned off. */
+    original: {
+        left: number;
+        top: number;
+        scaleX: number;
+        scaleY: number;
+        width: number;
+        height: number;
+        angle: number;
+        cropX: number;
+        cropY: number;
+    };
+}
+declare const DEFAULT_PATTERN_CONFIG: PatternConfig;
+interface MockupPrintArea {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface MockupConfig {
+    /** Garment/product image rendered behind the design (preview only). */
+    image: string;
+    /** Print-area rectangle, in canvas pixels. Drawn as a guide. */
+    printArea?: MockupPrintArea;
+}
 interface EditorEvents {
     'layer:added': {
         layer: LayerData;
@@ -97,6 +151,19 @@ interface EditorEvents {
         canUndo: boolean;
         canRedo: boolean;
     };
+    'zoom:changed': {
+        zoom: number;
+    };
+    'snap:changed': {
+        enabled: boolean;
+    };
+    'crop:changed': {
+        active: boolean;
+        layerId: string | null;
+    };
+    'mockup:changed': {
+        mockup: MockupConfig | null;
+    };
     'canvas:modified': Record<string, never>;
     'export:start': {
         format: string;
@@ -128,8 +195,11 @@ declare class Layer {
     visible: boolean;
     locked: boolean;
     opacity: number;
+    /** Non-fabric data (e.g. pattern config) that must persist with the layer. */
+    meta: LayerMeta;
     readonly fabricObject: FabricObject;
     constructor(type: LayerType, fabricObject: FabricObject, name?: string, id?: string);
+    private hasMeta;
     toData(): LayerData;
     serialize(): SerializedLayer;
 }
@@ -175,15 +245,128 @@ declare class HistoryManager {
     saveImmediate(): void;
     undo(): Promise<void>;
     redo(): Promise<void>;
+    /** True while a restore (undo/redo/deserialize) is in flight. Managers that
+     * react to canvas events should skip mutating history during this window. */
+    isRestoring(): boolean;
     pause(): void;
     resume(): void;
     canUndo(): boolean;
     canRedo(): boolean;
     clear(): void;
+    private cancelPending;
     dispose(): void;
     private emitChanged;
 }
 
+/**
+ * Snaps a dragged object's edges and centre to the canvas edges/centre and to
+ * other objects, drawing transient guide lines while it does. Switchable via
+ * {@link setEnabled}; inert (zero overhead beyond a flag check) when disabled.
+ */
+declare class SnapManager {
+    private canvas;
+    private events;
+    private enabled;
+    private threshold;
+    private guides;
+    private readonly onMoving;
+    private readonly onAfterRender;
+    private readonly onModified;
+    constructor(canvas: Canvas, events: EventEmitter<EditorEvents>);
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    setThreshold(px: number): void;
+    dispose(): void;
+    private handleMoving;
+    private drawGuides;
+    private clearGuides;
+}
+
+/**
+ * Interactive crop for image layers. {@link start} drops a draggable/resizable
+ * rectangle over the image; {@link apply} converts it into fabric crop props
+ * (cropX/cropY/width/height in element pixels) and keeps the displayed size in
+ * sync with the rectangle.
+ *
+ * Rotation is unsupported: an angled image is normalised to 0° on start.
+ */
+declare class CropController {
+    private canvas;
+    private history;
+    private events;
+    private session;
+    private readonly onSelectionCleared;
+    constructor(canvas: Canvas, history: HistoryManager, events: EventEmitter<EditorEvents>);
+    isActive(): boolean;
+    activeLayerId(): string | null;
+    start(layer: Layer): void;
+    apply(): void;
+    cancel(): void;
+    dispose(): void;
+    private finish;
+}
+
+/**
+ * Renders a single image layer as a repeating pattern that fills the canvas.
+ *
+ * The tiled result is rasterised onto an offscreen canvas and swapped in as the
+ * layer's image source, so it survives export, serialization and undo/redo with
+ * no extra machinery. The original source + transform are kept in `layer.meta`
+ * so the pattern can be turned back off.
+ */
+declare class PatternManager {
+    private canvas;
+    private layers;
+    private history;
+    private chains;
+    constructor(canvas: Canvas, layers: LayerManager, history: HistoryManager);
+    isPattern(layerId: string): boolean;
+    getConfig(layerId: string): PatternConfig | null;
+    /** Turn a plain image layer into a pattern, or update an existing one. */
+    apply(layerId: string, config: PatternConfig): Promise<void>;
+    /** Restore the original image and drop the pattern. */
+    disable(layerId: string): Promise<void>;
+    /** Run `task` after any in-flight work for this layer, regardless of outcome. */
+    private enqueue;
+    private renderLayer;
+}
+/** Clear the decoded-image cache (e.g. on teardown). Exported for completeness. */
+declare function clearPatternImageCache(): void;
+/**
+ * Draw the source image repeatedly across a `targetW × targetH` offscreen
+ * canvas and return the result as a PNG data URL.
+ *
+ * Exported for unit testing of the tile geometry.
+ */
+declare function buildPatternDataURL(src: string, config: PatternConfig, targetW: number, targetH: number, baseW: number, baseH: number): Promise<string>;
+/** Placement of one tile, relative to the (already rotated) pattern centre. */
+interface TilePlacement {
+    /** Tile-centre offset from the pattern centre, in px. */
+    x: number;
+    y: number;
+    /** Per-tile rotation, in radians. */
+    rotation: number;
+}
+/**
+ * Pure tile geometry: where each tile centre lands and how much it is rotated,
+ * for a config + target/base size. Covers the rotated bounding diagonal so
+ * corners stay filled at any pattern angle. Extracted for unit testing.
+ */
+declare function computeTilePositions(config: PatternConfig, targetW: number, targetH: number, baseW: number, baseH: number): TilePlacement[];
+/**
+ * Draw the tiled pattern onto a 2D context. The geometry lives in
+ * {@link computeTilePositions}; this just plays it out as canvas calls.
+ */
+declare function drawTiles(ctx: CanvasRenderingProtocol, img: CanvasImageSource, config: PatternConfig, targetW: number, targetH: number, baseW: number, baseH: number): void;
+/** Minimal 2D-context surface used by {@link drawTiles}; lets tests inject a spy. */
+interface CanvasRenderingProtocol {
+    save(): void;
+    restore(): void;
+    translate(x: number, y: number): void;
+    rotate(angle: number): void;
+    drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
+}
+
 declare class UnitConverter {
     private unit;
     private dpi;
@@ -211,8 +394,14 @@ declare class CanvasEditor {
     readonly history: HistoryManager;
     readonly events: EventEmitter<EditorEvents>;
     readonly units: UnitConverter;
+    readonly snapping: SnapManager;
+    readonly crop: CropController;
+    readonly patterns: PatternManager;
     private fileAdapter?;
     private imageProvider?;
+    private zoomLevel;
+    private mockup;
+    private designBackground;
     constructor(canvasElement: HTMLCanvasElement, config: EditorConfig);
     addImage(url: string, options?: Partial<Record<string, unknown>>): Promise<Layer>;
     addText(text: string, options?: Partial<Record<string, unknown>>): Layer;
@@ -221,11 +410,21 @@ declare class CanvasEditor {
     removeLayer(id: string): void;
     selectLayer(id: string | null): void;
     getSelectedLayer(): Layer | null;
+    /** Mirror a layer along the given axis. */
+    flipLayer(id: string, axis: 'horizontal' | 'vertical'): void;
+    /** Clone a layer (offset slightly) and select the copy. */
+    duplicateLayer(id: string): Promise<Layer | null>;
     toJSON(): EditorState;
     fromJSON(state: EditorState): Promise<void>;
     toPNG(options?: PngExportOptions): Promise<Blob>;
     toSVG(): string;
     toDataURL(format?: ImageFormat, multiplier?: number): string;
+    /**
+     * Run an export with the configured design background applied, even when a
+     * mockup preview has forced the live canvas transparent — so exports reflect
+     * the design, not the preview. Restores the preview state afterwards.
+     */
+    private withDesignBackground;
     toPrintifyPositioning(): Record<string, PrintifyPositioning>;
     save(filename: string, format: 'png' | 'svg' | 'json'): Promise<string | undefined>;
     uploadImage(file: File): Promise<ImageProviderResult | undefined>;
@@ -233,8 +432,22 @@ declare class CanvasEditor {
     setFileAdapter(adapter: FileAdapter): void;
     setImageProvider(provider: ImageProvider): void;
     setBackground(color: string): void;
+    getDesignBackground(): string;
     resize(width: number, height: number): void;
+    setZoom(level: number): void;
+    /** @deprecated use setZoom — kept for backward compatibility. */
     zoom(level: number): void;
+    getZoom(): number;
+    zoomIn(step?: number): void;
+    zoomOut(step?: number): void;
+    resetZoom(): void;
+    /** Fit the canvas inside a viewport (in px), accounting for padding. */
+    zoomToFit(viewportWidth: number, viewportHeight: number, padding?: number): void;
+    applyPattern(layerId: string, config: PatternConfig): Promise<void>;
+    clearPattern(layerId: string): Promise<void>;
+    setMockup(mockup: MockupConfig | null): void;
+    clearMockup(): void;
+    getMockup(): MockupConfig | null;
     dispose(): void;
     private setupCanvasEvents;
 }
@@ -247,4 +460,4 @@ declare function round2(v: number): number;
 declare function serializeEditor(editor: CanvasEditor): EditorState;
 declare function deserializeEditor(editor: CanvasEditor, state: EditorState): Promise<void>;
 
-export { CanvasEditor, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerType, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, type TemplateDefinition, type TemplateParameter, type Unit, UnitConverter, clamp, deserializeEditor, exportDataURL, exportPNG, exportSVG, generateId, round2, serializeEditor };
+export { CanvasEditor, CropController, DEFAULT_PATTERN_CONFIG, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerMeta, type LayerType, type MockupConfig, type MockupPrintArea, type PatternConfig, PatternManager, type PatternState, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, SnapManager, type TemplateDefinition, type TemplateParameter, type TileMode, type TilePlacement, type Unit, UnitConverter, buildPatternDataURL, clamp, clearPatternImageCache, computeTilePositions, deserializeEditor, drawTiles, exportDataURL, exportPNG, exportSVG, generateId, round2, serializeEditor };

package/dist/index.d.ts

@@ -9,6 +9,12 @@ interface LayerData {
     visible: boolean;
     locked: boolean;
     opacity: number;
+    /** Non-fabric metadata persisted with the layer (pattern config, etc). */
+    meta?: LayerMeta;
+}
+interface LayerMeta {
+    pattern?: PatternState;
+    [key: string]: unknown;
 }
 interface SerializedLayer extends LayerData {
     fabricObject: Record<string, unknown>;
@@ -21,6 +27,7 @@ interface EditorState {
     };
     layers: SerializedLayer[];
     background?: string;
+    mockup?: MockupConfig | null;
 }
 interface EditorConfig {
     width: number;
@@ -71,6 +78,53 @@ interface PrintifyPositioning {
     scale: number;
     angle: number;
 }
+type TileMode = 'grid' | 'brick-horizontal' | 'brick-vertical';
+interface PatternConfig {
+    mode: TileMode;
+    /** Extra horizontal gap between tiles, as % of tile width. */
+    horizontalSpacing: number;
+    /** Extra vertical gap between tiles, as % of tile height. */
+    verticalSpacing: number;
+    /** Rotation of the whole pattern, in degrees. */
+    angle: number;
+    /** Brick row/column shift, as % of tile size. */
+    horizontalOffset: number;
+    /** Added rotation per horizontal step, in degrees. */
+    rotationStepH: number;
+    /** Added rotation per vertical step, in degrees. */
+    rotationStepV: number;
+}
+/** Persisted on a layer's meta while it is rendered as a repeating pattern. */
+interface PatternState {
+    config: PatternConfig;
+    /** Original (pre-pattern) image source, as a durable data URL when possible. */
+    originalSrc: string;
+    /** Original fabric transform, restored when the pattern is turned off. */
+    original: {
+        left: number;
+        top: number;
+        scaleX: number;
+        scaleY: number;
+        width: number;
+        height: number;
+        angle: number;
+        cropX: number;
+        cropY: number;
+    };
+}
+declare const DEFAULT_PATTERN_CONFIG: PatternConfig;
+interface MockupPrintArea {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface MockupConfig {
+    /** Garment/product image rendered behind the design (preview only). */
+    image: string;
+    /** Print-area rectangle, in canvas pixels. Drawn as a guide. */
+    printArea?: MockupPrintArea;
+}
 interface EditorEvents {
     'layer:added': {
         layer: LayerData;
@@ -97,6 +151,19 @@ interface EditorEvents {
         canUndo: boolean;
         canRedo: boolean;
     };
+    'zoom:changed': {
+        zoom: number;
+    };
+    'snap:changed': {
+        enabled: boolean;
+    };
+    'crop:changed': {
+        active: boolean;
+        layerId: string | null;
+    };
+    'mockup:changed': {
+        mockup: MockupConfig | null;
+    };
     'canvas:modified': Record<string, never>;
     'export:start': {
         format: string;
@@ -128,8 +195,11 @@ declare class Layer {
     visible: boolean;
     locked: boolean;
     opacity: number;
+    /** Non-fabric data (e.g. pattern config) that must persist with the layer. */
+    meta: LayerMeta;
     readonly fabricObject: FabricObject;
     constructor(type: LayerType, fabricObject: FabricObject, name?: string, id?: string);
+    private hasMeta;
     toData(): LayerData;
     serialize(): SerializedLayer;
 }
@@ -175,15 +245,128 @@ declare class HistoryManager {
     saveImmediate(): void;
     undo(): Promise<void>;
     redo(): Promise<void>;
+    /** True while a restore (undo/redo/deserialize) is in flight. Managers that
+     * react to canvas events should skip mutating history during this window. */
+    isRestoring(): boolean;
     pause(): void;
     resume(): void;
     canUndo(): boolean;
     canRedo(): boolean;
     clear(): void;
+    private cancelPending;
     dispose(): void;
     private emitChanged;
 }
 
+/**
+ * Snaps a dragged object's edges and centre to the canvas edges/centre and to
+ * other objects, drawing transient guide lines while it does. Switchable via
+ * {@link setEnabled}; inert (zero overhead beyond a flag check) when disabled.
+ */
+declare class SnapManager {
+    private canvas;
+    private events;
+    private enabled;
+    private threshold;
+    private guides;
+    private readonly onMoving;
+    private readonly onAfterRender;
+    private readonly onModified;
+    constructor(canvas: Canvas, events: EventEmitter<EditorEvents>);
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    setThreshold(px: number): void;
+    dispose(): void;
+    private handleMoving;
+    private drawGuides;
+    private clearGuides;
+}
+
+/**
+ * Interactive crop for image layers. {@link start} drops a draggable/resizable
+ * rectangle over the image; {@link apply} converts it into fabric crop props
+ * (cropX/cropY/width/height in element pixels) and keeps the displayed size in
+ * sync with the rectangle.
+ *
+ * Rotation is unsupported: an angled image is normalised to 0° on start.
+ */
+declare class CropController {
+    private canvas;
+    private history;
+    private events;
+    private session;
+    private readonly onSelectionCleared;
+    constructor(canvas: Canvas, history: HistoryManager, events: EventEmitter<EditorEvents>);
+    isActive(): boolean;
+    activeLayerId(): string | null;
+    start(layer: Layer): void;
+    apply(): void;
+    cancel(): void;
+    dispose(): void;
+    private finish;
+}
+
+/**
+ * Renders a single image layer as a repeating pattern that fills the canvas.
+ *
+ * The tiled result is rasterised onto an offscreen canvas and swapped in as the
+ * layer's image source, so it survives export, serialization and undo/redo with
+ * no extra machinery. The original source + transform are kept in `layer.meta`
+ * so the pattern can be turned back off.
+ */
+declare class PatternManager {
+    private canvas;
+    private layers;
+    private history;
+    private chains;
+    constructor(canvas: Canvas, layers: LayerManager, history: HistoryManager);
+    isPattern(layerId: string): boolean;
+    getConfig(layerId: string): PatternConfig | null;
+    /** Turn a plain image layer into a pattern, or update an existing one. */
+    apply(layerId: string, config: PatternConfig): Promise<void>;
+    /** Restore the original image and drop the pattern. */
+    disable(layerId: string): Promise<void>;
+    /** Run `task` after any in-flight work for this layer, regardless of outcome. */
+    private enqueue;
+    private renderLayer;
+}
+/** Clear the decoded-image cache (e.g. on teardown). Exported for completeness. */
+declare function clearPatternImageCache(): void;
+/**
+ * Draw the source image repeatedly across a `targetW × targetH` offscreen
+ * canvas and return the result as a PNG data URL.
+ *
+ * Exported for unit testing of the tile geometry.
+ */
+declare function buildPatternDataURL(src: string, config: PatternConfig, targetW: number, targetH: number, baseW: number, baseH: number): Promise<string>;
+/** Placement of one tile, relative to the (already rotated) pattern centre. */
+interface TilePlacement {
+    /** Tile-centre offset from the pattern centre, in px. */
+    x: number;
+    y: number;
+    /** Per-tile rotation, in radians. */
+    rotation: number;
+}
+/**
+ * Pure tile geometry: where each tile centre lands and how much it is rotated,
+ * for a config + target/base size. Covers the rotated bounding diagonal so
+ * corners stay filled at any pattern angle. Extracted for unit testing.
+ */
+declare function computeTilePositions(config: PatternConfig, targetW: number, targetH: number, baseW: number, baseH: number): TilePlacement[];
+/**
+ * Draw the tiled pattern onto a 2D context. The geometry lives in
+ * {@link computeTilePositions}; this just plays it out as canvas calls.
+ */
+declare function drawTiles(ctx: CanvasRenderingProtocol, img: CanvasImageSource, config: PatternConfig, targetW: number, targetH: number, baseW: number, baseH: number): void;
+/** Minimal 2D-context surface used by {@link drawTiles}; lets tests inject a spy. */
+interface CanvasRenderingProtocol {
+    save(): void;
+    restore(): void;
+    translate(x: number, y: number): void;
+    rotate(angle: number): void;
+    drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
+}
+
 declare class UnitConverter {
     private unit;
     private dpi;
@@ -211,8 +394,14 @@ declare class CanvasEditor {
     readonly history: HistoryManager;
     readonly events: EventEmitter<EditorEvents>;
     readonly units: UnitConverter;
+    readonly snapping: SnapManager;
+    readonly crop: CropController;
+    readonly patterns: PatternManager;
     private fileAdapter?;
     private imageProvider?;
+    private zoomLevel;
+    private mockup;
+    private designBackground;
     constructor(canvasElement: HTMLCanvasElement, config: EditorConfig);
     addImage(url: string, options?: Partial<Record<string, unknown>>): Promise<Layer>;
     addText(text: string, options?: Partial<Record<string, unknown>>): Layer;
@@ -221,11 +410,21 @@ declare class CanvasEditor {
     removeLayer(id: string): void;
     selectLayer(id: string | null): void;
     getSelectedLayer(): Layer | null;
+    /** Mirror a layer along the given axis. */
+    flipLayer(id: string, axis: 'horizontal' | 'vertical'): void;
+    /** Clone a layer (offset slightly) and select the copy. */
+    duplicateLayer(id: string): Promise<Layer | null>;
     toJSON(): EditorState;
     fromJSON(state: EditorState): Promise<void>;
     toPNG(options?: PngExportOptions): Promise<Blob>;
     toSVG(): string;
     toDataURL(format?: ImageFormat, multiplier?: number): string;
+    /**
+     * Run an export with the configured design background applied, even when a
+     * mockup preview has forced the live canvas transparent — so exports reflect
+     * the design, not the preview. Restores the preview state afterwards.
+     */
+    private withDesignBackground;
     toPrintifyPositioning(): Record<string, PrintifyPositioning>;
     save(filename: string, format: 'png' | 'svg' | 'json'): Promise<string | undefined>;
     uploadImage(file: File): Promise<ImageProviderResult | undefined>;
@@ -233,8 +432,22 @@ declare class CanvasEditor {
     setFileAdapter(adapter: FileAdapter): void;
     setImageProvider(provider: ImageProvider): void;
     setBackground(color: string): void;
+    getDesignBackground(): string;
     resize(width: number, height: number): void;
+    setZoom(level: number): void;
+    /** @deprecated use setZoom — kept for backward compatibility. */
     zoom(level: number): void;
+    getZoom(): number;
+    zoomIn(step?: number): void;
+    zoomOut(step?: number): void;
+    resetZoom(): void;
+    /** Fit the canvas inside a viewport (in px), accounting for padding. */
+    zoomToFit(viewportWidth: number, viewportHeight: number, padding?: number): void;
+    applyPattern(layerId: string, config: PatternConfig): Promise<void>;
+    clearPattern(layerId: string): Promise<void>;
+    setMockup(mockup: MockupConfig | null): void;
+    clearMockup(): void;
+    getMockup(): MockupConfig | null;
     dispose(): void;
     private setupCanvasEvents;
 }
@@ -247,4 +460,4 @@ declare function round2(v: number): number;
 declare function serializeEditor(editor: CanvasEditor): EditorState;
 declare function deserializeEditor(editor: CanvasEditor, state: EditorState): Promise<void>;
 
-export { CanvasEditor, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerType, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, type TemplateDefinition, type TemplateParameter, type Unit, UnitConverter, clamp, deserializeEditor, exportDataURL, exportPNG, exportSVG, generateId, round2, serializeEditor };
+export { CanvasEditor, CropController, DEFAULT_PATTERN_CONFIG, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerMeta, type LayerType, type MockupConfig, type MockupPrintArea, type PatternConfig, PatternManager, type PatternState, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, SnapManager, type TemplateDefinition, type TemplateParameter, type TileMode, type TilePlacement, type Unit, UnitConverter, buildPatternDataURL, clamp, clearPatternImageCache, computeTilePositions, deserializeEditor, drawTiles, exportDataURL, exportPNG, exportSVG, generateId, round2, serializeEditor };