@xviewer.js/debug 1.0.0-alpha.7 → 1.0.0-alpha.8

package/package.json

@@ -1,23 +1,25 @@
 {
-    "name": "@xviewer.js/debug",
-    "version": "1.0.0-alpha.7",
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org"
-    },
-    "license": "MIT",
-    "main": "dist/main.js",
-    "module": "dist/module.js",
-    "types": "types/index.d.ts",
-    "debug": "src/index.ts",
-    "scripts": {
-        "b:types": "tsc"
-    },
-    "files": [
-        "dist/**/*",
-        "types/**/*"
-    ],
-    "dependencies": {
-        "@xviewer.js/core": "1.0.0-alpha.7"
-    }
+  "name": "@xviewer.js/debug",
+  "version": "1.0.0-alpha.8",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "types/index.d.ts",
+  "debug": "src/index.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*"
+  ],
+  "dependencies": {
+    "@xviewer.js/core": "1.0.0-alpha.8"
+  },
+  "scripts": {
+    "b:types": "tsc"
+  }
 }

package/types/InspectorPlugin.d.ts

@@ -0,0 +1,22 @@
+import { Plugin } from "@xviewer.js/core";
+type uuidObject = {
+    uuid: string;
+    name: string;
+    type: string;
+};
+export declare class InspectorPlugin extends Plugin {
+    static _getTargetName(target: uuidObject): string;
+    private _gui;
+    private _statesMap;
+    private _targetMap;
+    constructor();
+    onUpdate(dt: number): void;
+    private _initFolders;
+    private _initViewer;
+    private _updateFolders;
+    private _getPropertiesList;
+    inspect<T extends uuidObject>(target: T): T;
+    private _addPropsListGUI;
+    uninspect(target: uuidObject): void;
+}
+export {};

package/types/StatsPlugin.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from "@xviewer.js/core";
+export declare class StatsPlugin extends Plugin {
+    private _stats;
+    private _dcPanel;
+    private _triPanel;
+    private _texPanel;
+    private _prgPanel;
+    constructor();
+    onUpdate(dt: number): void;
+}

package/types/gui/GUI.d.ts

@@ -0,0 +1,257 @@
+import "./css/index.scss";
+import { Controller } from "./controllers/Controller";
+import { OptionController } from "./controllers/OptionController";
+import { NumberController } from "./controllers/NumberController";
+import { BooleanController } from "./controllers/BooleanController";
+import { StringController } from "./controllers/StringController";
+import { FunctionController } from "./controllers/FunctionController";
+import { ColorController } from "./controllers/ColorController";
+import { ImageController } from "./controllers/ImageController";
+import { VectorController } from "./controllers/VectorController";
+import { CurveController } from "./controllers/CurveController";
+import { TextureController } from "./controllers/TextureController";
+export declare class GUI {
+    id: string;
+    parent: GUI;
+    root: GUI;
+    children: Array<GUI | Controller>;
+    controllers: Array<Controller>;
+    folders: Array<GUI>;
+    domElement: HTMLElement;
+    $title: HTMLElement;
+    $children: HTMLElement;
+    /**
+     * Current title of the GUI. Use `gui.title( 'Title' )` to modify this value.
+     */
+    _title: string;
+    _closed: boolean;
+    _hidden: boolean;
+    _closeFolders: boolean;
+    private _onChange;
+    /**
+     * Used to access the function bound to `onFinishChange` events. Don't modify this value
+     * directly. Use the `gui.onFinishChange( callback )` method instead.
+     */
+    private _onFinishChange;
+    private _onOpenClose;
+    constructor({ parent, container, width, autoPlace, title, id, closeFolders, touchStyles, }?: {
+        parent?: GUI;
+        container?: HTMLElement;
+        autoPlace?: boolean;
+        width?: number;
+        title?: string;
+        id?: string;
+        closeFolders?: boolean;
+        touchStyles?: boolean;
+    });
+    /**
+     * Adds a controller to the GUI, inferring controller type using the `typeof` operator.
+     * @example
+     * gui.add( object, 'property' );
+     * gui.add( object, 'number', 0, 100, 1 );
+     * gui.add( object, 'options', [ 1, 2, 3 ] );
+     *
+     * @param {object} object The object the controller will modify.
+     * @param {string} property Name of the property to control.
+     * @param {number|object|Array} [$1] Minimum value for number controllers, or the set of
+     * selectable values for a dropdown.
+     * @param {number} [max] Maximum value for number controllers.
+     * @param {number} [step] Step value for number controllers.
+     * @returns {Controller}
+     */
+    add(object: Object, property: string, $1?: number | object | Array<any>, max?: number, step?: number): OptionController | NumberController | BooleanController | StringController | FunctionController;
+    /**
+     * Adds a color controller to the GUI.
+     * @example
+     * params = {
+     * 	cssColor: '#ff00ff',
+     * 	rgbColor: { r: 0, g: 0.2, b: 0.4 },
+     * 	customRange: [ 0, 127, 255 ],
+     * };
+     *
+     * gui.addColor( params, 'cssColor' );
+     * gui.addColor( params, 'rgbColor' );
+     * gui.addColor( params, 'customRange', 255 );
+     *
+     * @param {object} object The object the controller will modify.
+     * @param {string} property Name of the property to control.
+     * @param {number} rgbScale Maximum value for a color channel when using an RGB color. You may
+     * need to set this to 255 if your colors are too bright.
+     * @returns {Controller}
+     */
+    addColor(object: Object, property: string, rgbScale?: number): ColorController;
+    /**
+     *
+     * @param {object} object
+     * @param {string} property Name of the property to control.
+     * @returns {Controller}
+     */
+    addImage(object: Object, property: string): ImageController;
+    addTexture(object: Object, property: string): TextureController;
+    /**
+     *
+     * @param {object} object
+     * @param {string} property
+     * @param min
+     * @param max
+     * @param step
+     * @returns {Controller}
+     */
+    addVector(object: Object, property: string, min?: number, max?: number, step?: number): VectorController;
+    addCurve(object: Object, property: string): CurveController;
+    /**
+     * Adds a folder to the GUI, which is just another GUI. This method returns
+     * the nested GUI so you can add controllers to it.
+     * @example
+     * const folder = gui.addFolder( 'Position' );
+     * folder.add( position, 'x' );
+     * folder.add( position, 'y' );
+     * folder.add( position, 'z' );
+     *
+     * @param {string} title Name to display in the folder's title bar.
+     * @param {string} id Id
+     * @returns {GUI}
+     */
+    addFolder(title: string, id?: string): GUI;
+    /**
+     *
+     * @param {string} id
+     * @returns {this}
+     */
+    removeFolder(id: string): this;
+    /**
+     *
+     * @param {string} id
+     * @returns {GUI}
+     */
+    getFolder(id: string): GUI;
+    /**
+     * Recalls values that were saved with `gui.save()`.
+     * @param {object} obj
+     * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+     * @returns {this}
+     */
+    load(obj: GUI, recursive?: boolean): this;
+    /**
+     * Returns an object mapping controller names to values. The object can be passed to `gui.load()` to
+     * recall these values.
+     * @example
+     * {
+     * 	controllers: {
+     * 		prop1: 1,
+     * 		prop2: 'value',
+     * 		...
+     * 	},
+     * 	folders: {
+     * 		folderName1: { controllers, folders },
+     * 		folderName2: { controllers, folders }
+     * 		...
+     * 	}
+     * }
+     *
+     * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+     * @returns {object}
+     */
+    save(recursive?: boolean): {
+        controllers: {};
+        folders: {};
+    };
+    /**
+     * Opens a GUI or folder. GUI and folders are open by default.
+     * @param {boolean} open Pass false to close
+     * @returns {this}
+     * @example
+     * gui.open(); // open
+     * gui.open( false ); // close
+     * gui.open( gui._closed ); // toggle
+     */
+    open(open?: boolean): this;
+    /**
+     * Closes the GUI.
+     * @returns {this}
+     */
+    close(): this;
+    private _setClosed;
+    /**
+     * Shows the GUI after it's been hidden.
+     * @param {boolean} show
+     * @returns {this}
+     * @example
+     * gui.show();
+     * gui.show( false ); // hide
+     * gui.show( gui._hidden ); // toggle
+     */
+    show(show?: boolean): this;
+    /**
+     * Hides the GUI.
+     * @returns {this}
+     */
+    hide(): this;
+    openAnimated(open?: boolean): this;
+    /**
+     * Change the title of this GUI.
+     * @param {string} title
+     * @returns {this}
+     */
+    title(title: string): this;
+    /**
+     * Resets all controllers to their initial values.
+     * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+     * @returns {this}
+     */
+    reset(recursive?: boolean): this;
+    /**
+     * Pass a function to be called whenever a controller in this GUI changes.
+     * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+     * @returns {this}
+     * @example
+     * gui.onChange( event => {
+     * 	event.object     // object that was modified
+     * 	event.property   // string, name of property
+     * 	event.value      // new value of controller
+     * 	event.controller // controller that was modified
+     * } );
+     */
+    onChange(callback: any): this;
+    _callOnChange(controller: any): void;
+    /**
+     * Pass a function to be called whenever a controller in this GUI has finished changing.
+     * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+     * @returns {this}
+     * @example
+     * gui.onFinishChange( event => {
+     * 	event.object     // object that was modified
+     * 	event.property   // string, name of property
+     * 	event.value      // new value of controller
+     * 	event.controller // controller that was modified
+     * } );
+     */
+    onFinishChange(callback: Function): this;
+    _callOnFinishChange(controller: Controller): void;
+    /**
+     * Pass a function to be called when this GUI or its descendants are opened or closed.
+     * @param {function(GUI)} callback
+     * @returns {this}
+     * @example
+     * gui.onOpenClose( changedGUI => {
+     * 	console.log( changedGUI._closed );
+     * } );
+     */
+    onOpenClose(callback: Function): this;
+    private _callOnOpenClose;
+    /**
+     * Destroys all DOM elements and event listeners associated with this GUI
+     */
+    destroy(): void;
+    /**
+     * Returns an array of controllers contained by this GUI and its descendents.
+     * @returns {Controller[]}
+     */
+    controllersRecursive(): Controller[];
+    /**
+     * Returns an array of folders contained by this GUI and its descendents.
+     * @returns {GUI[]}
+     */
+    foldersRecursive(): GUI[];
+    update(): void;
+}

package/types/gui/common/UIElement.d.ts

@@ -0,0 +1,18 @@
+export declare class UIElement<T extends HTMLElement = HTMLElement> {
+    dom: T & {
+        disabled?: boolean;
+    };
+    constructor(dom: T);
+    add(...args: HTMLElement[]): this;
+    remove(...args: HTMLElement[]): this;
+    clear(): void;
+    setId(id: string): this;
+    getId(): string;
+    setClass(name: string): this;
+    addClass(name: any): this;
+    removeClass(name: any): this;
+    setStyle(style: string, array: any[]): this;
+    setDisabled(value: boolean): this;
+    setTextContent(value: string): this;
+    getIndexOfChild(element: UIElement): any;
+}

package/types/gui/common/UIInteger.d.ts

@@ -0,0 +1,14 @@
+import { UIElement } from './UIElement';
+export declare class UIInteger extends UIElement<HTMLInputElement> {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    nudge: number;
+    constructor(number: number);
+    getValue(): number;
+    setValue(value: any): this;
+    setStep(step: any): this;
+    setNudge(nudge: number): this;
+    setRange(min: number, max: number): this;
+}

package/types/gui/common/UINumber.d.ts

@@ -0,0 +1,19 @@
+import { UIElement } from './UIElement';
+export declare class UINumber extends UIElement<HTMLInputElement> {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    nudge: number;
+    unit: string;
+    private _onChangeCallback;
+    constructor(value: number, min: number, max: number, step: number);
+    equals(v: number): boolean;
+    getValue(): number;
+    setValue(value: any): this;
+    updateDisplay(): void;
+    private _getImplicitStep;
+    private _snap;
+    onChange(callback: Function): this;
+    setUnit(unit: string): this;
+}

package/types/gui/controllers/BooleanController.d.ts

@@ -0,0 +1,7 @@
+import { GUI } from "../GUI";
+import { Controller } from "./Controller";
+export declare class BooleanController extends Controller {
+    $input: HTMLInputElement;
+    constructor(parent: GUI, object: Object, property: string);
+    updateDisplay(): this;
+}

package/types/gui/controllers/ColorController.d.ts

@@ -0,0 +1,18 @@
+import { GUI } from "../GUI";
+import { Controller } from "./Controller";
+export declare class ColorController extends Controller {
+    $input: HTMLInputElement;
+    $text: HTMLInputElement;
+    $display: HTMLDivElement;
+    $alpha: HTMLDivElement;
+    private _textFocused;
+    private _initialValueHexString;
+    private _rgbScale;
+    private _format;
+    constructor(parent: GUI, object: Object, property: string, rgbScale: number);
+    reset(): this;
+    private _setValueFromHexString;
+    save(): any;
+    load(value: string): this;
+    updateDisplay(): this;
+}

package/types/gui/controllers/Controller.d.ts

@@ -0,0 +1,207 @@
+import { GUI } from "../GUI";
+export declare class Controller {
+    static nextNameID: number;
+    parent: GUI;
+    object: Object;
+    property: string;
+    /**
+     * The value of `object[ property ]` when the controller was created.
+     */
+    initialValue: any;
+    /**
+     * The outermost container DOM element for this controller.
+     */
+    domElement: HTMLElement;
+    /**
+     * The DOM element that contains the controller's name.
+     */
+    $name: HTMLElement;
+    /**
+     * The DOM element that contains the controller's "widget" (which differs by controller type).
+     */
+    $widget: HTMLElement;
+    /**
+     * The DOM element that receives the disabled attribute when using disable()
+     */
+    $disable: HTMLElement;
+    /**
+     * Used to determine if the controller is disabled.
+     * Use `controller.disable( true|false )` to modify this value
+     */
+    protected _disabled: boolean;
+    /**
+     * Used to determine if the Controller is hidden.
+     * Use `controller.show()` or `controller.hide()` to change this.
+     */
+    protected _hidden: boolean;
+    protected _changed: boolean;
+    /**
+     * Used to determine if the controller is currently listening. Don't modify this value
+     * directly. Use the `controller.listen( true|false )` method instead.
+     */
+    protected _listening: boolean;
+    protected _listenCallbackID: number;
+    protected _listenPrevValue: any;
+    /**
+     * The controller's name. Use `controller.name( 'Name' )` to modify this value.
+     */
+    _name: string;
+    /**
+     * Used to access the function bound to `onChange` events. Don't modify this value directly.
+     * Use the `controller.onChange( callback )` method instead.
+     */
+    protected _onChange: Function;
+    /**
+     * Used to access the function bound to `onFinishChange` events. Don't modify this value
+     * directly. Use the `controller.onFinishChange( callback )` method instead.
+     */
+    protected _onFinishChange: Function;
+    constructor(parent: GUI, object: Object, property: string, className: string, widgetTag?: string);
+    /**
+     * Sets the name of the controller and its label in the GUI.
+     * @param {string} name
+     * @returns {this}
+     */
+    name(name: string): this;
+    /**
+     * Pass a function to be called whenever the value is modified by this controller.
+     * The function receives the new value as its first parameter. The value of `this` will be the
+     * controller.
+     *
+     * For function controllers, the `onChange` callback will be fired on click, after the function
+     * executes.
+     * @param {Function} callback
+     * @returns {this}
+     * @example
+     * const controller = gui.add( object, 'property' );
+     *
+     * controller.onChange( function( v ) {
+     * 	console.log( 'The value is now ' + v );
+     * 	console.assert( this === controller );
+     * } );
+     */
+    onChange(callback: Function): this;
+    /**
+     * Calls the onChange methods of this controller and its parent GUI.
+     */
+    protected _callOnChange(): void;
+    /**
+     * Pass a function to be called after this controller has been modified and loses focus.
+     * @param {Function} callback
+     * @returns {this}
+     * @example
+     * const controller = gui.add( object, 'property' );
+     *
+     * controller.onFinishChange( function( v ) {
+     * 	console.log( 'Changes complete: ' + v );
+     * 	console.assert( this === controller );
+     * } );
+     */
+    onFinishChange(callback: Function): this;
+    /**
+     * Should be called by Controller when its widgets lose focus.
+     */
+    protected _callOnFinishChange(): void;
+    /**
+     * Sets the controller back to its initial value.
+     * @returns {this}
+     */
+    reset(): this;
+    /**
+     * Enables this controller.
+     * @param {boolean} enabled
+     * @returns {this}
+     * @example
+     * controller.enable();
+     * controller.enable( false ); // disable
+     * controller.enable( controller._disabled ); // toggle
+     */
+    enable(enabled?: boolean): this;
+    /**
+     * Disables this controller.
+     * @param {boolean} disabled
+     * @returns {this}
+     * @example
+     * controller.disable();
+     * controller.disable( false ); // enable
+     * controller.disable( !controller._disabled ); // toggle
+     */
+    disable(disabled?: boolean): this;
+    /**
+     * Shows the Controller after it's been hidden.
+     * @param {boolean} show
+     * @returns {this}
+     * @example
+     * controller.show();
+     * controller.show( false ); // hide
+     * controller.show( controller._hidden ); // toggle
+     */
+    show(show?: boolean): this;
+    /**
+     * Hides the Controller.
+     * @returns {this}
+     */
+    hide(): this;
+    options(options: any): this;
+    /**
+     * Sets the minimum value. Only works on number controllers.
+     * @param {number} min
+     * @returns {this}
+     */
+    min(min: number): this;
+    /**
+     * Sets the maximum value. Only works on number controllers.
+     * @param {number} max
+     * @returns {this}
+     */
+    max(max: number): this;
+    /**
+     * Values set by this controller will be rounded to multiples of `step`. Only works on number
+     * controllers.
+     * @param {number} step
+     * @returns {this}
+     */
+    step(step: number): this;
+    /**
+     * Rounds the displayed value to a fixed number of decimals, without affecting the actual value
+     * like `step()`. Only works on number controllers.
+     * @example
+     * gui.add( object, 'property' ).listen().decimals( 4 );
+     * @param {number} decimals
+     * @returns {this}
+     */
+    decimals(decimals: number): this;
+    /**
+     * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening.
+     * @param {boolean} listen
+     * @returns {this}
+     */
+    listen(listen?: boolean): this;
+    needsUpdateDisplay(): boolean;
+    private _listenCallback;
+    /**
+     * Returns `object[ property ]`.
+     * @returns {any}
+     */
+    getValue(): any;
+    /**
+     * Sets the value of `object[ property ]`, invokes any `onChange` handlers and updates the display.
+     * @param {any} value
+     * @param {boolean} callOnChange
+     * @returns {this}
+     */
+    setValue(value: any): this;
+    update(): void;
+    /**
+     * Updates the display to keep it in sync with the current value. Useful for updating your
+     * controllers when their values have been modified outside of the GUI.
+     * @returns {this}
+     */
+    updateDisplay(): this;
+    load(value: any): this;
+    save(): any;
+    /**
+     * Destroys this controller and removes it from the parent GUI.
+     */
+    destroy(): void;
+}

package/types/gui/controllers/CurveController.d.ts

@@ -0,0 +1,8 @@
+import { GUI } from "../GUI";
+import { Controller } from "./Controller";
+export declare class CurveController extends Controller {
+    private _curveEditor;
+    constructor(parent: GUI, object: Object, property: string);
+    needsUpdateDisplay(): boolean;
+    updateDisplay(): this;
+}

package/types/gui/controllers/FunctionController.d.ts

@@ -0,0 +1,6 @@
+import { GUI } from "../GUI";
+import { Controller } from "./Controller";
+export declare class FunctionController extends Controller {
+    $button: HTMLButtonElement;
+    constructor(parent: GUI, object: Object, property: string);
+}

package/types/gui/controllers/ImageController.d.ts

@@ -0,0 +1,12 @@
+import { GUI } from "../GUI";
+import { Controller } from "./Controller";
+export declare class ImageController extends Controller {
+    static _context: any;
+    static _imageMap: WeakMap<WeakKey, any>;
+    static toDataURL(img: HTMLImageElement | ImageBitmap & {
+        data?: any;
+    }): Promise<any>;
+    $img: HTMLImageElement;
+    constructor(parent: GUI, object: Object, property: string);
+    updateDisplay(): this;
+}