@infinite-canvas-tutorial/webcomponents/lib/API.d.ts

WebComponents UI implementation

import { Canvas, ComputedCamera, SerializedNode, API, StateManagement, Commands, ThemeMode, RectSerializedNode } from '@infinite-canvas-tutorial/ecs';
import { type LitElement } from 'lit';
export interface Comment {
    type: 'comment';
    threadId: string;
    id: string;
    roomId: string;
    userId: string;
    createdAt: Date;
    editedAt: Date;
    text: string;
    avatar: string;
}
export interface Thread {
    type: 'thread';
    id: string;
    roomId: string;
    createdAt: Date;
    comments: Comment[];
    metadata: {
        x: number;
        y: number;
    };
}
/**
 * Since the canvas is created in the system, we need to store them here for later use.
 */
export declare const pendingCanvases: {
    container: LitElement;
    canvas: Partial<Canvas>;
    camera: Partial<ComputedCamera>;
}[];
/**
 * Emit CustomEvents for the canvas.
 */
export declare class ExtendedAPI extends API {
    #private;
    element: LitElement;
    constructor(stateManagement: StateManagement, commands: Commands, element: LitElement);
    resizeCanvas(width: number, height: number): void;
    selectNodes(selected: SerializedNode[], preserveSelection?: boolean, updateAppState?: boolean): void;
    updateNode(node: SerializedNode, diff?: Partial<SerializedNode>, updateAppState?: boolean, skipOverrideKeys?: string[]): void;
    updateNodes(nodes: SerializedNode[], updateAppState?: boolean): void;
    deleteNodesById(ids: SerializedNode['id'][]): SerializedNode[];
    /**
     * Delete Canvas component
     */
    destroy(): void;
    setThreads(threads: Thread[]): void;
    getThreads(): Thread[];
    /**
     * I18n
     */
    setLocale(locale: string): void;
    getLocale(): void;
    setThemeMode(themeMode: ThemeMode): void;
    createImageFromFile(file: File | string, { position, heuristicResize, }?: Partial<{
        position: {
            x: number;
            y: number;
        };
        heuristicResize: boolean;
    }>): Promise<RectSerializedNode>;
    /**
     * Used by image model to edit with.
     */
    createMask(nodes: SerializedNode[], relativeTo: {
        x: number;
        y: number;
        width: number;
        height: number;
    }): HTMLCanvasElement;
}