mini-canvas-editor/lib/index.d.ts

Canvas editor component for JavaScript application. Easy to integrate and use.

import { MceImageJSON, FabricObject, MceStaticCanvas } from 'mini-canvas-core';

interface EditorConfiguration {
    initialMode?: EditorMode;
    rect?: RectModeConfiguration | false;
    brush?: BrushModeConfiguration | false;
    textbox?: TextboxModeConfiguration | false;
    image?: ImageModeConfiguration | false;
    sidebar?: SidebarConfiguration | boolean;
}
interface SidebarConfiguration {
    /**
     * Whether to show the properties panel.
     * @default true
     */
    properties?: boolean;
    /**
     * Whether to show the layers panel.
     * @default true
     */
    layers?: boolean;
}
interface RectModeConfiguration {
    fillColor?: string;
}
interface BrushModeConfiguration {
    brushSize?: number;
    brushColor?: string;
}
interface TextboxModeConfiguration {
}
interface ImageModeConfiguration {
}
declare enum EditorMode {
    select = "select",
    rect = "rect",
    brush = "brush",
    textbox = "textbox"
}

declare class SimpleEvent<T> {
    private readonly listeners;
    subscribe(listener: SimpleEventListener<T>): void;
    unsubscribe(listener: SimpleEventListener<T>): void;
    readonly forward: (value: T) => void;
    count(): number;
}
type SimpleEventListener<T> = (value: T) => void;

interface CreateFromImageOptions {
    selectable?: boolean;
    select?: boolean;
    workspaceWidth?: number;
    workspaceHeight?: number;
    fitToWorkspace?: boolean;
}
declare class Editor {
    private readonly view;
    private readonly workspace;
    private readonly state;
    private readonly layoutController;
    static createBlank(placeholder: HTMLElement, workspaceWidth: number, workspaceHeight: number, configuration: EditorConfiguration): Editor;
    static createFromImage(placeholder: HTMLElement, image: HTMLImageElement, imageOptions: CreateFromImageOptions, configuration: EditorConfiguration): Editor;
    static createFromJSON(json: MceImageJSON, placeholder: HTMLElement, configuration: EditorConfiguration): Promise<Editor>;
    private static create;
    readonly onChanged: SimpleEvent<void>;
    private constructor();
    private readonly onAnyChange;
    getWidth(): number;
    getHeight(): number;
    getWorkspaceObjects(): FabricObject[];
    add(object: FabricObject): void;
    toJSON(): MceImageJSON;
    cloneToStaticCanvas(): Promise<MceStaticCanvas>;
    render(): HTMLCanvasElement;
    destroy(): Promise<void>;
}

export { type BrushModeConfiguration, type CreateFromImageOptions, Editor, type EditorConfiguration, EditorMode, type ImageModeConfiguration, type RectModeConfiguration, type SidebarConfiguration, type TextboxModeConfiguration };