@thi.ng/rdom-canvas/index.d.ts

@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing

import type { Fn, Fn2, Fn3, IToHiccup } from "@thi.ng/api";
import type { IComponent, IMountWithState, NumOrElement } from "@thi.ng/rdom";
import { Component } from "@thi.ng/rdom/component";
import type { ISubscription } from "@thi.ng/rstream";
export interface CanvasOpts {
    /**
     * Custom component lifecycle handler called when canvas first mounts.
     */
    onmount: Fn2<HTMLCanvasElement, CanvasRenderingContext2D, void>;
    /**
     * Custom component lifecycle handler called when canvas unmounts.
     */
    onunmount: Fn<HTMLCanvasElement, void>;
    /**
     * Custom component event handler called when canvas size has changed (only
     * used when canvas size is initially given as reactive value).
     */
    onresize: Fn3<HTMLCanvasElement, CanvasRenderingContext2D, number[], void>;
    /**
     * Standard Canvas2D context options
     */
    ctx: CanvasRenderingContext2DSettings;
    [id: string]: any;
}
/**
 * Reactive [thi.ng/hiccup-canvas](https://thi.ng/hiccup-canvas) component
 * wrapper. Returns a canvas component wrapped in a
 * [$sub](https://docs.thi.ng/umbrella/rdom/functions/_sub-1.html) and
 * updates/re-renders canvas with each new input received from `body`.
 *
 * @remarks
 * If `size` is subscribable, the canvas is resized each time a new value is
 * received, else will only be used to define initial canvas size.
 *
 * If given a sub (for size) and it has not (yet) produced a value, a default
 * canvas size of 1x1 pixel will be used.
 *
 * The `attribs` SHOULD not include `width`, `height`, since these will be
 * overriden in any way by `size` arg.
 */
export declare const $canvas: <T extends any[] | IToHiccup>(body: ISubscription<any, T>, size: number[] | ISubscription<any, number[]>, attribs?: Partial<CanvasOpts>) => IComponent<T>;
export declare class $Canvas extends Component implements IMountWithState<any[] | IToHiccup> {
    protected attribs: Partial<CanvasOpts>;
    el?: HTMLCanvasElement;
    ctx?: CanvasRenderingContext2D;
    inner?: IComponent<any>;
    size: ISubscription<any, number[]>;
    sizeSub: ISubscription<number[], number[]>;
    constructor(size: number[] | ISubscription<any, number[]>, attribs?: Partial<CanvasOpts>);
    mount(parent: Element, index: NumOrElement, shapes: any[] | IToHiccup): Promise<HTMLCanvasElement>;
    unmount(): Promise<void>;
    resize(size: number[]): void;
    update(tree: any[] | IToHiccup): void;
}
//# sourceMappingURL=index.d.ts.map