lazy-widgets/dist/core/DOMRoot.d.ts

Typescript retained mode GUI for the HTML canvas API

import { Root, RootProperties } from './Root.js';
import type { Widget } from '../widgets/Widget.js';
/**
 * A function that controls the size of the DOM element of a UI root.
 */
export type DOMSizeController = (domRoot: DOMRoot, effectiveScale: [xScale: number, yScale: number], dimensions: [width: number, height: number], preferredSize: [width: number, height: number]) => [width: number, height: number];
/**
 * Optional DOMRoot constructor properties.
 *
 * @category Core
 */
export interface DOMRootProperties extends RootProperties {
    /**
     * Should contentEditable be set to true? Needed for paste events, but
     * creates issues on mobile; virtual keyboard is opened whenever the canvas
     * is clicked. Disabled by default
     */
    enablePasteEvents?: boolean;
    /** See {@link DOMRoot#domSizeController}. */
    domSizeController?: DOMSizeController;
}
/**
 * Like Root, but for easy use in an HTML page.
 *
 * Instead of calling each individual update method, simply call
 * {@link DOMRoot#update} on every animation frame. {@link Driver | Drivers}
 * still need to be manually registered.
 *
 * @category Core
 */
export declare class DOMRoot extends Root {
    /** This root's canvas element. Add this to the HTML body */
    readonly domElem: HTMLCanvasElement;
    /** This root's canvas element's context. Used for painting */
    private domCanvasContext;
    /**
     * A function that controls the size of the DOM element of this UI root.
     * Optional.
     */
    private domSizeController?;
    constructor(child: Widget, properties?: Readonly<DOMRootProperties>);
    /**
     * Update DOMRoot.
     *
     * If root is disabled, {@link DOMRoot#domElem}'s display style is set to
     * 'none', hiding it.
     *
     * Calls {@link Root#preLayoutUpdate}, {@link Root#resolveLayout},
     * {@link Root#postLayoutUpdate} and {@link Root#paint}.
     */
    update(): void;
    /** Update the width and height of {@link DOMRoot#domElem} */
    private updateDOMDims;
    /**
     * Re-scale the DOM element of this UI root. You only need to manually call
     * this if you use a {@link DOMRoot#domSizeController} and an external
     * factor would affect the result of your custom size.
     *
     * Counters Root viewport scaling with an opposite CSS scale (via width and
     * height, not CSS transforms), and applies size given by domSizeController,
     * if any is supplied.
     */
    rescaleDOMElement(): void;
    get enabled(): boolean;
    set enabled(enabled: boolean);
    destroy(): void;
}