pex-gui
Version:
GUI controls for PEX.
309 lines (308 loc) • 9.7 kB
TypeScript
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, overlay, 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;
pointerOffset: 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;
overlay: {
container: HTMLDivElement;
initialPointerEvents: any;
};
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;
};
setPointerOffset(event: any, target?: any): void;
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
* @param {import("./types.js").GUIControlOptions} [options={}]
* @returns {GUIControl}
*
* @example
* ```js
* gui.addLabel("Multiline\nLabel");
* ```
*/
addLabel(title: string, options?: import("./types.js").GUIControlOptions): 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;
/**
* Remove controls
* @param {GUIControl | GUIControl[]} items
*/
remove(items: GUIControl | GUIControl[]): void;
/**
* Move a control after another
* @param {GUIControl} item
* @param {GUIControl} targetItem
*/
moveAfter(item: GUIControl, targetItem: GUIControl): void;
isAnyItemDirty(items: any): boolean;
getScaledActiveArea(activeArea: any): any;
update(): void;
getScale(): number;
initOverlayItem(item: any): void;
updateOverlayItem({ activeArea, overlayItem }: {
activeArea: any;
overlayItem: any;
}): void;
/**
* 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";