@overtone-art/canvas-editor-core 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,250 @@
+import { FabricObject, Canvas, ImageFormat } from 'fabric';
+
+type Unit = 'px' | 'mm' | 'in';
+type LayerType = 'image' | 'text' | 'shape' | 'template' | 'group';
+interface LayerData {
+    id: string;
+    type: LayerType;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+}
+interface SerializedLayer extends LayerData {
+    fabricObject: Record<string, unknown>;
+}
+interface EditorState {
+    version: string;
+    canvas: {
+        width: number;
+        height: number;
+    };
+    layers: SerializedLayer[];
+    background?: string;
+}
+interface EditorConfig {
+    width: number;
+    height: number;
+    backgroundColor?: string;
+    fileAdapter?: FileAdapter;
+    imageProvider?: ImageProvider;
+    preserveObjectStacking?: boolean;
+    unit?: Unit;
+    dpi?: number;
+}
+type ExportFormat = 'png' | 'svg' | 'json';
+interface FileAdapter {
+    save(data: Blob | string, filename: string, format: ExportFormat): Promise<string>;
+}
+interface ImageProviderResult {
+    url: string;
+    width: number;
+    height: number;
+}
+interface ImageProvider {
+    upload(file: File): Promise<ImageProviderResult>;
+    browse?(): Promise<ImageProviderResult | null>;
+}
+interface ShapePlugin {
+    name: string;
+    icon: string;
+    category?: string;
+    create(options?: Record<string, unknown>): FabricObject;
+}
+interface TemplateParameter {
+    key: string;
+    label: string;
+    type: 'text' | 'color' | 'number' | 'font';
+    default: string | number;
+}
+interface TemplateDefinition {
+    id: string;
+    name: string;
+    category: string;
+    svg: string;
+    parameters: TemplateParameter[];
+    preview?: string;
+}
+interface PrintifyPositioning {
+    x: number;
+    y: number;
+    scale: number;
+    angle: number;
+}
+interface EditorEvents {
+    'layer:added': {
+        layer: LayerData;
+    };
+    'layer:removed': {
+        layerId: string;
+    };
+    'layer:selected': {
+        layerId: string | null;
+    };
+    'layer:modified': {
+        layerId: string;
+    };
+    'layer:reordered': {
+        layerIds: string[];
+    };
+    'layers:changed': {
+        layers: LayerData[];
+    };
+    'selection:changed': {
+        selected: string[];
+    };
+    'history:changed': {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+    'canvas:modified': Record<string, never>;
+    'export:start': {
+        format: string;
+    };
+    'export:complete': {
+        format: string;
+        url?: string;
+    };
+    error: {
+        message: string;
+        error?: unknown;
+    };
+}
+
+type EventHandler<T> = (data: T) => void;
+declare class EventEmitter<TEvents extends {} = Record<string, unknown>> {
+    private listeners;
+    on<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    off<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    once<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    emit<K extends keyof TEvents>(event: K, data: TEvents[K]): void;
+    removeAllListeners(event?: keyof TEvents): void;
+}
+
+declare class Layer {
+    readonly id: string;
+    readonly type: LayerType;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+    readonly fabricObject: FabricObject;
+    constructor(type: LayerType, fabricObject: FabricObject, name?: string, id?: string);
+    toData(): LayerData;
+    serialize(): SerializedLayer;
+}
+declare class LayerManager {
+    private canvas;
+    private events;
+    private layers;
+    constructor(canvas: Canvas, events: EventEmitter<EditorEvents>);
+    add(type: LayerType, fabricObject: FabricObject, name?: string, id?: string): Layer;
+    remove(id: string): boolean;
+    reorder(id: string, newIndex: number): boolean;
+    select(id: string | null): void;
+    get(id: string): Layer | undefined;
+    getAll(): Layer[];
+    findByObject(obj: FabricObject): Layer | undefined;
+    setVisibility(id: string, visible: boolean): void;
+    setLocked(id: string, locked: boolean): void;
+    setOpacity(id: string, opacity: number): void;
+    setName(id: string, name: string): void;
+    clear(): void;
+    count(): number;
+    private emitChanged;
+}
+
+declare class HistoryManager {
+    private undoStack;
+    private redoStack;
+    private maxSize;
+    private paused;
+    private debounceTimer;
+    private debounceMs;
+    private getState;
+    private restoreState;
+    private events;
+    constructor(opts: {
+        getState: () => string;
+        restoreState: (state: string) => Promise<void>;
+        events: EventEmitter<EditorEvents>;
+        maxSize?: number;
+        debounceMs?: number;
+    });
+    save(): void;
+    saveImmediate(): void;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    pause(): void;
+    resume(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): void;
+    dispose(): void;
+    private emitChanged;
+}
+
+declare class UnitConverter {
+    private unit;
+    private dpi;
+    constructor(unit?: Unit, dpi?: number);
+    setUnit(unit: Unit): void;
+    setDpi(dpi: number): void;
+    getUnit(): Unit;
+    getDpi(): number;
+    toPixels(value: number, fromUnit?: Unit): number;
+    fromPixels(px: number, toUnit?: Unit): number;
+}
+
+interface PngExportOptions {
+    multiplier?: number;
+    format?: ImageFormat;
+    quality?: number;
+}
+declare function exportPNG(canvas: Canvas, options?: PngExportOptions): Promise<Blob>;
+declare function exportSVG(canvas: Canvas): string;
+declare function exportDataURL(canvas: Canvas, format?: ImageFormat, multiplier?: number): string;
+
+declare class CanvasEditor {
+    readonly canvas: Canvas;
+    readonly layers: LayerManager;
+    readonly history: HistoryManager;
+    readonly events: EventEmitter<EditorEvents>;
+    readonly units: UnitConverter;
+    private fileAdapter?;
+    private imageProvider?;
+    constructor(canvasElement: HTMLCanvasElement, config: EditorConfig);
+    addImage(url: string, options?: Partial<Record<string, unknown>>): Promise<Layer>;
+    addText(text: string, options?: Partial<Record<string, unknown>>): Layer;
+    addShape(plugin: ShapePlugin, options?: Record<string, unknown>): Layer;
+    addTemplate(template: TemplateDefinition, _params: Record<string, string | number>): Promise<Layer>;
+    removeLayer(id: string): void;
+    selectLayer(id: string | null): void;
+    getSelectedLayer(): Layer | null;
+    toJSON(): EditorState;
+    fromJSON(state: EditorState): Promise<void>;
+    toPNG(options?: PngExportOptions): Promise<Blob>;
+    toSVG(): string;
+    toDataURL(format?: ImageFormat, multiplier?: number): string;
+    toPrintifyPositioning(): Record<string, PrintifyPositioning>;
+    save(filename: string, format: 'png' | 'svg' | 'json'): Promise<string | undefined>;
+    uploadImage(file: File): Promise<ImageProviderResult | undefined>;
+    browseImages(): Promise<ImageProviderResult | null>;
+    setFileAdapter(adapter: FileAdapter): void;
+    setImageProvider(provider: ImageProvider): void;
+    setBackground(color: string): void;
+    resize(width: number, height: number): void;
+    zoom(level: number): void;
+    dispose(): void;
+    private setupCanvasEvents;
+}
+
+declare const generateId: () => string;
+
+declare function clamp(v: number, min: number, max: number): number;
+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 };

package/dist/index.d.ts

@@ -0,0 +1,250 @@
+import { FabricObject, Canvas, ImageFormat } from 'fabric';
+
+type Unit = 'px' | 'mm' | 'in';
+type LayerType = 'image' | 'text' | 'shape' | 'template' | 'group';
+interface LayerData {
+    id: string;
+    type: LayerType;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+}
+interface SerializedLayer extends LayerData {
+    fabricObject: Record<string, unknown>;
+}
+interface EditorState {
+    version: string;
+    canvas: {
+        width: number;
+        height: number;
+    };
+    layers: SerializedLayer[];
+    background?: string;
+}
+interface EditorConfig {
+    width: number;
+    height: number;
+    backgroundColor?: string;
+    fileAdapter?: FileAdapter;
+    imageProvider?: ImageProvider;
+    preserveObjectStacking?: boolean;
+    unit?: Unit;
+    dpi?: number;
+}
+type ExportFormat = 'png' | 'svg' | 'json';
+interface FileAdapter {
+    save(data: Blob | string, filename: string, format: ExportFormat): Promise<string>;
+}
+interface ImageProviderResult {
+    url: string;
+    width: number;
+    height: number;
+}
+interface ImageProvider {
+    upload(file: File): Promise<ImageProviderResult>;
+    browse?(): Promise<ImageProviderResult | null>;
+}
+interface ShapePlugin {
+    name: string;
+    icon: string;
+    category?: string;
+    create(options?: Record<string, unknown>): FabricObject;
+}
+interface TemplateParameter {
+    key: string;
+    label: string;
+    type: 'text' | 'color' | 'number' | 'font';
+    default: string | number;
+}
+interface TemplateDefinition {
+    id: string;
+    name: string;
+    category: string;
+    svg: string;
+    parameters: TemplateParameter[];
+    preview?: string;
+}
+interface PrintifyPositioning {
+    x: number;
+    y: number;
+    scale: number;
+    angle: number;
+}
+interface EditorEvents {
+    'layer:added': {
+        layer: LayerData;
+    };
+    'layer:removed': {
+        layerId: string;
+    };
+    'layer:selected': {
+        layerId: string | null;
+    };
+    'layer:modified': {
+        layerId: string;
+    };
+    'layer:reordered': {
+        layerIds: string[];
+    };
+    'layers:changed': {
+        layers: LayerData[];
+    };
+    'selection:changed': {
+        selected: string[];
+    };
+    'history:changed': {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+    'canvas:modified': Record<string, never>;
+    'export:start': {
+        format: string;
+    };
+    'export:complete': {
+        format: string;
+        url?: string;
+    };
+    error: {
+        message: string;
+        error?: unknown;
+    };
+}
+
+type EventHandler<T> = (data: T) => void;
+declare class EventEmitter<TEvents extends {} = Record<string, unknown>> {
+    private listeners;
+    on<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    off<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    once<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    emit<K extends keyof TEvents>(event: K, data: TEvents[K]): void;
+    removeAllListeners(event?: keyof TEvents): void;
+}
+
+declare class Layer {
+    readonly id: string;
+    readonly type: LayerType;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+    readonly fabricObject: FabricObject;
+    constructor(type: LayerType, fabricObject: FabricObject, name?: string, id?: string);
+    toData(): LayerData;
+    serialize(): SerializedLayer;
+}
+declare class LayerManager {
+    private canvas;
+    private events;
+    private layers;
+    constructor(canvas: Canvas, events: EventEmitter<EditorEvents>);
+    add(type: LayerType, fabricObject: FabricObject, name?: string, id?: string): Layer;
+    remove(id: string): boolean;
+    reorder(id: string, newIndex: number): boolean;
+    select(id: string | null): void;
+    get(id: string): Layer | undefined;
+    getAll(): Layer[];
+    findByObject(obj: FabricObject): Layer | undefined;
+    setVisibility(id: string, visible: boolean): void;
+    setLocked(id: string, locked: boolean): void;
+    setOpacity(id: string, opacity: number): void;
+    setName(id: string, name: string): void;
+    clear(): void;
+    count(): number;
+    private emitChanged;
+}
+
+declare class HistoryManager {
+    private undoStack;
+    private redoStack;
+    private maxSize;
+    private paused;
+    private debounceTimer;
+    private debounceMs;
+    private getState;
+    private restoreState;
+    private events;
+    constructor(opts: {
+        getState: () => string;
+        restoreState: (state: string) => Promise<void>;
+        events: EventEmitter<EditorEvents>;
+        maxSize?: number;
+        debounceMs?: number;
+    });
+    save(): void;
+    saveImmediate(): void;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    pause(): void;
+    resume(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): void;
+    dispose(): void;
+    private emitChanged;
+}
+
+declare class UnitConverter {
+    private unit;
+    private dpi;
+    constructor(unit?: Unit, dpi?: number);
+    setUnit(unit: Unit): void;
+    setDpi(dpi: number): void;
+    getUnit(): Unit;
+    getDpi(): number;
+    toPixels(value: number, fromUnit?: Unit): number;
+    fromPixels(px: number, toUnit?: Unit): number;
+}
+
+interface PngExportOptions {
+    multiplier?: number;
+    format?: ImageFormat;
+    quality?: number;
+}
+declare function exportPNG(canvas: Canvas, options?: PngExportOptions): Promise<Blob>;
+declare function exportSVG(canvas: Canvas): string;
+declare function exportDataURL(canvas: Canvas, format?: ImageFormat, multiplier?: number): string;
+
+declare class CanvasEditor {
+    readonly canvas: Canvas;
+    readonly layers: LayerManager;
+    readonly history: HistoryManager;
+    readonly events: EventEmitter<EditorEvents>;
+    readonly units: UnitConverter;
+    private fileAdapter?;
+    private imageProvider?;
+    constructor(canvasElement: HTMLCanvasElement, config: EditorConfig);
+    addImage(url: string, options?: Partial<Record<string, unknown>>): Promise<Layer>;
+    addText(text: string, options?: Partial<Record<string, unknown>>): Layer;
+    addShape(plugin: ShapePlugin, options?: Record<string, unknown>): Layer;
+    addTemplate(template: TemplateDefinition, _params: Record<string, string | number>): Promise<Layer>;
+    removeLayer(id: string): void;
+    selectLayer(id: string | null): void;
+    getSelectedLayer(): Layer | null;
+    toJSON(): EditorState;
+    fromJSON(state: EditorState): Promise<void>;
+    toPNG(options?: PngExportOptions): Promise<Blob>;
+    toSVG(): string;
+    toDataURL(format?: ImageFormat, multiplier?: number): string;
+    toPrintifyPositioning(): Record<string, PrintifyPositioning>;
+    save(filename: string, format: 'png' | 'svg' | 'json'): Promise<string | undefined>;
+    uploadImage(file: File): Promise<ImageProviderResult | undefined>;
+    browseImages(): Promise<ImageProviderResult | null>;
+    setFileAdapter(adapter: FileAdapter): void;
+    setImageProvider(provider: ImageProvider): void;
+    setBackground(color: string): void;
+    resize(width: number, height: number): void;
+    zoom(level: number): void;
+    dispose(): void;
+    private setupCanvasEvents;
+}
+
+declare const generateId: () => string;
+
+declare function clamp(v: number, min: number, max: number): number;
+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 };