@thi.ng/imgui
Version:
Immediate mode GUI with flexible state handling & data only shape output
229 lines • 6.93 kB
TypeScript
import type { Fn0, IClear, IToHiccup } from "@thi.ng/api";
import type { Vec } from "@thi.ng/vectors";
import { type GUITheme, type Hash, type IMGUIOpts } from "./api.js";
export declare const defGUI: (opts: IMGUIOpts) => IMGUI;
export declare class IMGUI implements IClear, IToHiccup {
attribs: any;
layers: any[];
mouse: Vec;
buttons: number;
key: string;
modifiers: number;
prevMouse: Vec;
prevButtons: number;
prevKey: string;
prevModifiers: number;
hotID: string;
activeID: string;
focusID: string;
lastID: string;
cursor: string;
t0: number;
time: number;
draw: boolean;
protected currIDs: Set<string>;
protected prevIDs: Set<string>;
protected themeStack: GUITheme[];
protected disabledStack: boolean[];
protected resources: Map<string, Map<Hash, any>>;
protected states: Map<string, any>;
protected sizes: Map<string, any>;
constructor(opts: IMGUIOpts);
get theme(): GUITheme;
get disabled(): boolean;
/**
* Clears all shape layers and resets theme / disabled stacks.
*/
clear(): void;
/**
* Sets mouse position and current mouse button flags (i.e.
* `MouseEvent.buttons`).
*
* @param p -
* @param buttons -
*/
setMouse(p: Vec, buttons: number): this;
/**
* Sets internal key state from given key event details.
*
* @param e -
*/
setKey(e: KeyboardEvent): this;
/**
* Merges given theme settings with {@link DEFAULT_THEME} and resets theme
* stack.
*
* @param theme -
*/
setTheme(theme: Partial<GUITheme>): void;
/**
* Merges given theme settings with current theme and pushes result
* on theme stack.
*
* IMPORTANT: Currently IMGUI only supports one font and ignores any
* font changes pushed on the theme stack.
*
* @param theme -
*/
beginTheme(theme: Partial<GUITheme>): void;
/**
* Removes current theme from stack (unless only one theme left).
*/
endTheme(): void;
/**
* Applies component function with given theme, then restores
* previous theme and returns component result.
*
* @param theme -
* @param component -
*/
withTheme<T>(theme: Partial<GUITheme>, component: Fn0<T>): T;
/**
* Pushes given disabled component state flag on stack (default:
* true, i.e. disabled). Pass `false` to temporarily enable
* components.
*
* @param disabled -
*/
beginDisabled(disabled?: boolean): void;
/**
* Removes current disabled flag from stack (unless only one theme left).
*/
endDisabled(): void;
/**
* Applies component function with given disabled flag, then
* restores previous disabled state and returns component result.
*
* @param disabled -
* @param component -
*/
withDisabled<T>(disabled: boolean, component: Fn0<T>): T;
/**
* Sets `focusID` to given `id` if the component can receive focus.
* Returns true if component is focused.
*
* @param id -
*/
requestFocus(id: string): boolean;
/**
* Attempts to switch focus to next, or if Shift is pressed, to
* previous component. This is meant be called ONLY from component
* key handlers.
*/
switchFocus(): void;
/**
* Returns true if left mouse button is pressed.
*/
isMouseDown(): boolean;
isShiftDown(): boolean;
isControlDown(): boolean;
isMetaDown(): boolean;
isAltDown(): boolean;
isPrevMouseDown(): boolean;
isPrevShiftDown(): boolean;
isPrevControlDown(): boolean;
isPrevMetaDown(): boolean;
isPrevAltDown(): boolean;
/**
* Prepares IMGUI for next frame:
*
* - Resets `hotID`, `cursor`
* - Resets theme & disabled stacks
* - Clears all draw layers
* - Updates elapsed time.
*
* By default all components will emit draw shapes, however this can
* be disabled by passing `false` as argument. This is useful for
* use cases where the GUI is not updated at high frame rates and so
* would require two invocations per update cycle for immediate
* visual feedback:
*
* ```
* gui.begin(false); // update state only, no draw
* updateMyGUI();
* gui.end();
* gui.begin(true); // run once more, with draw enabled (default)
* updateMyGUI();
* gui.end();
* ```
*
* @param draw -
*/
begin(draw?: boolean): void;
/**
* Performs end-of-frame handling & component cache cleanup. Also
* removes cached state and resources of all unused components.
*/
end(): void;
/**
* Garbage collect unused component state / resources.
*/
gc(): void;
bgColor(hover: boolean): import("./api.js").Color;
fgColor(hover: boolean): import("./api.js").Color;
textColor(hover: boolean): import("./api.js").Color;
focusColor(id: string): import("./api.js").Color | undefined;
/**
* Returns pixel width of given string based on current theme's font
* settings.
*
* IMPORTANT: Currently only monospace fonts are supported.
*
* @param txt -
*/
textWidth(txt: string): number;
/**
* Marks given component ID as used and checks `hash` to determine
* if the component's resource cache should be cleared. This hash
* value should be based on any values (e.g. layout info) which
* might invalidate cached resources.
*
* @param id -
* @param hash -
*/
registerID(id: string, hash: Hash): void;
/**
* Attempts to retrieve cached resource for given component `id` and
* resource `hash`. If unsuccessful, calls resource `ctor` function
* to create it, caches result and returns it.
*
* {@link IMGUI.registerID}
*
* @param id -
* @param hash -
* @param ctor -
*/
resource<T>(id: string, hash: Hash, ctor: Fn0<T>): any;
/**
* Attempts to retrieve cached component state for given `id`. If
* unsuccessful, calls state `ctor` function, caches result and
* returns it.
*
* @param id -
* @param ctor -
*/
state<T>(id: string, ctor: Fn0<T>): T;
/**
* Stores / overrides given local state value for component `id` in
* cache.
*
* @param id -
* @param state -
*/
setState(id: string, state: any): void;
/**
* Sets cursor property to given `id`. This setting is cleared at
* the beginning of each frame (default value: "default").
*
* @param id -
*/
setCursor(id: string): void;
add(...els: any[]): void;
addOverlay(...els: any[]): void;
/**
* Returns hiccup representation of all shapes/text primitives
* created by components in the current frame.
*/
toHiccup(): any[];
}
//# sourceMappingURL=gui.d.ts.map