export * as Renderers from "./renderers/index.js";
export { DEFAULT_THEME };
export default createGUI;
import DEFAULT_THEME from "./theme.js";
/**
 * @alias module:pex-gui.default
 * @param {import("./types.js").ctx | CanvasRenderingContext2D} ctx
 * @param {import("./types.js").GUIOptions} opts
 * @returns {GUI}
 */
declare function createGUI(ctx: import("./types.js").ctx | CanvasRenderingContext2D, opts: import("./types.js").GUIOptions): GUI;
/**
 * GUI controls for PEX.
 * @property {boolean} [enabled=true] Enable/disable pointer interaction and drawing.
 */
declare class GUI {
    /**
     * Creates an instance of GUI.
     * @param {ctx | CanvasRenderingContext2D} ctx
     * @param {import("./types.js").GUIOptions} opts
     */
    constructor(ctx: ctx | CanvasRenderingContext2D, { pixelRatio, theme, scale, responsive, renderer, }?: import("./types.js").GUIOptions);
    get size(): any[];
    get canvas(): any;
    set pixelRatio(ratio: any);
    ctx: any;
    theme: any;
    scale: number;
    responsive: boolean;
    enabled: boolean;
    viewport: any[];
    x: number;
    y: number;
    mousePos: number[];
    items: any[];
    renderer: any;
    drawTexture2d: ({ texture, rect, flipY }: {
        texture: any;
        rect: any;
        flipY: any;
    }) => void;
    drawTextureCube: ({ texture, rect, level, flipEnvMap }: {
        texture: any;
        rect: any;
        level: any;
        flipEnvMap: any;
    }) => void;
    setControlValue(value: any): void;
    getImageColor({ data, width }: {
        data: any;
        width: any;
    }, x: any, y: any): number[];
    checkPalette(image: any, aa: any, aaWidth: any, aaHeight: any, mx: any, my: any): {
        imageStartY: number;
        clicked: boolean;
    } | {
        imageStartY: number;
        clicked?: undefined;
    };
    onPointerDown(event: any): void;
    activeControl: any;
    onPointerMove(event: any): void;
    onPointerUp(): void;
    onKeyDown(event: any): void;
    /**
     * Add a tab control.
     * @param {string} title
     * @param {object} contextObject
     * @param {string} attributeName
     * @param {import("./types.js").GUIControlOptions} [options={}]
     * @param {Function} onChange
     * @returns {GUIControl}
     */
    addTab(title: string, contextObject: object, attributeName: string, options?: import("./types.js").GUIControlOptions, onChange: Function): GUIControl;
    /**
     * Add a column control with a header.
     * @param {string} title
     * @param {number} [width=this.theme.columnWidth]
     * @returns {GUIControl}
     */
    addColumn(title: string, width?: number): GUIControl;
    /**
     * Add a header control.
     * @param {string} title
     * @returns {GUIControl}
     */
    addHeader(title: string): GUIControl;
    /**
     * Add some breathing space between controls.
     * @returns {GUIControl}
     */
    addSeparator(): GUIControl;
    /**
     * Add a text label. Can be multiple line.
     * @param {string} title
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addLabel("Multiline\nLabel");
     * ```
     */
    addLabel(title: string): GUIControl;
    /**
     * Add a generic parameter control.
     * @param {string} title
     * @param {object} contextObject
     * @param {string} attributeName
     * @param {import("./types.js").GUIControlOptions} [options={}]
     * @param {Function} onChange
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addParam("Checkbox", State, "rotate");
     *
     * gui.addParam("Text message", State, "text", {}, function (value) {
     *   console.log(value);
     * });
     *
     * gui.addParam("Slider", State, "range", {
     *   min: -Math.PI / 2,
     *   max: Math.PI / 2,
     * });
     *
     * gui.addParam("Multi Slider", State, "position", {
     *   min: 0,
     *   max: 10,
     * });
     *
     * gui.addParam("Color [RGBA]", State, "color");
     *
     * gui.addParam("Texture", State, "texture");
     * gui.addParam("Texture Cube", State, "textureCube");
     * ```
     */
    addParam(title: string, contextObject: object, attributeName: string, options?: import("./types.js").GUIControlOptions, onChange: Function): GUIControl;
    /**
     * Add a clickable button.
     * @param {string} title
     * @param {Function} onClick
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addButton("Button", () => {
     *   console.log("Called back");
     * });
     * ```
     */
    addButton(title: string, onClick: Function): GUIControl;
    /**
     * Add a radio list with options.
     * @param {string} title
     * @param {object} contextObject
     * @param {string} attributeName
     * @param {Array.<{ name: string, value: number }>} items
     * @param {Function} onChange
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addRadioList(
     *   "Radio list",
     *   State,
     *   "currentRadioListChoice",
     *   ["Choice 1", "Choice 2", "Choice 3"].map((name, value) => ({
     *     name,
     *     value,
     *   }))
     * );
     * ```
     */
    addRadioList(title: string, contextObject: object, attributeName: string, items: Array<{
        name: string;
        value: number;
    }>, onChange: Function): GUIControl;
    /**
     * Add a texture visualiser and selector for multiple textures (from pex-context) or images.
     * @param {string} title
     * @param {object} contextObject
     * @param {string} attributeName
     * @param {Array.<{ texture: import("pex-context").texture | CanvasImageSource, value: number}>} items
     * @param {number} [itemsPerRow=4]
     * @param {Function} onChange
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addTexture2DList("List", State, "currentTexture", textures.map((texture, value) = > ({ texture, value })));
     * ```
     */
    addTexture2DList(title: string, contextObject: object, attributeName: string, items: Array<{
        texture: any | CanvasImageSource;
        value: number;
    }>, itemsPerRow?: number, onChange: Function): GUIControl;
    /**
     * Add a texture (from pex-context) or image visualiser.
     * Notes: texture cannot be updated once created.
     * @param {string} title
     * @param {import("pex-context").texture | CanvasImageSource} texture
     * @param {import("./types.js").GUIControlOptions} options
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addTexture2D("Single", image);
     * ```
     */
    addTexture2D(title: string, texture: any | CanvasImageSource, options: import("./types.js").GUIControlOptions): GUIControl;
    /**
     * Add a cube texture visualiser (from pex-context).
     * Notes: texture cannot be updated once created.
     * @param {string} title
     * @param {import("pex-context").textureCube} texture
     * @param {{ flipEnvMap: number, level: number }} options
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addTextureCube("Cube", State.cubeTexture, { level: 2 });
     * ```
     */
    addTextureCube(title: string, texture: any, options: {
        flipEnvMap: number;
        level: number;
    }): GUIControl;
    /**
     * Add a XY graph visualiser from the control values.
     * @param {string} title
     * @param {import("./types.js").GUIControlOptions} options
     * @returns {GUIControl}
     *
     * @example
     * ```js
     * gui.addGraph("Sin", {
     *   interval: 500,
     *   t: 0,
     *   update(item) {
     *     item.options.t += 0.01;
     *   },
     *   redraw(item) {
     *     item.values.push(+Math.sin(item.options.t).toFixed(3));
     *   },
     * });
     * ```
     */
    addGraph(title: string, options: import("./types.js").GUIControlOptions): GUIControl;
    /**
     * Add a FPS counter. Need "gui.draw()" to be called on frame.
     * @returns {GUIControl}
     */
    addFPSMeeter(): GUIControl;
    /**
     * Add an updatable object stats visualiser.
     * @param {string} title
     * @param {object} [options] An object with an update() function to update control.stats.
     * @returns {GUIControl}
     */
    addStats(title: string, options?: object): GUIControl;
    isAnyItemDirty(items: any): boolean;
    getScaledActiveArea(activeArea: any): any;
    update(): void;
    getScale(): number;
    /**
     * Renders the GUI. Should be called at the end of the frame.
     */
    draw(): void;
    drawTextures(): void;
    /**
     * Retrieve a serialized value of the current GUI's state.
     * @returns {object}
     */
    serialize(): object;
    /**
     * Deserialize a previously serialized data state GUI's state.
     * @param {object} data
     */
    deserialize(data: object): void;
    /**
     * Remove events listeners, empty list of controls and dispose of the gui's resources.
     */
    dispose(): void;
    #private;
}
import GUIControl from "./GUIControl.js";