@onerjs/gui 8.23.1

package/3D/controls/touchButton3D.js

@@ -0,0 +1,205 @@
+// Assumptions: absolute position of button mesh is inside the mesh
+import { Vector3, TmpVectors } from "@babylonjs/core/Maths/math.vector.js";
+import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Button3D } from "./button3D.js";
+/**
+ * Class used to create a touchable button in 3D
+ */
+export class TouchButton3D extends Button3D {
+    /**
+     * Creates a new touchable button
+     * @param name defines the control name
+     * @param collisionMesh mesh to track collisions with
+     */
+    constructor(name, collisionMesh) {
+        super(name);
+        this._isNearPressed = false;
+        this._interactionSurfaceHeight = 0;
+        this._isToggleButton = false;
+        this._toggleState = false;
+        this._toggleButtonCallback = () => {
+            this._onToggle(!this._toggleState);
+        };
+        /**
+         * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+         */
+        this.onToggleObservable = new Observable();
+        this.collidableFrontDirection = Vector3.Zero();
+        if (collisionMesh) {
+            this.collisionMesh = collisionMesh;
+        }
+    }
+    /**
+     * Whether the current interaction is caused by near interaction or not
+     */
+    get isActiveNearInteraction() {
+        return this._isNearPressed;
+    }
+    /**
+     * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction
+     * @param frontWorldDir the forward direction of the button
+     */
+    set collidableFrontDirection(frontWorldDir) {
+        this._collidableFrontDirection = frontWorldDir.normalize();
+        if (this._collisionMesh) {
+            const invert = TmpVectors.Matrix[0];
+            invert.copyFrom(this._collisionMesh.getWorldMatrix());
+            invert.invert();
+            Vector3.TransformNormalToRef(this._collidableFrontDirection, invert, this._collidableFrontDirection);
+            this._collidableFrontDirection.normalize();
+        }
+    }
+    /**
+     * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'
+     */
+    get collidableFrontDirection() {
+        if (this._collisionMesh) {
+            // Update the front direction to reflect any rotations of the collision mesh
+            const transformedDirection = TmpVectors.Vector3[0];
+            Vector3.TransformNormalToRef(this._collidableFrontDirection, this._collisionMesh.getWorldMatrix(), transformedDirection);
+            return transformedDirection.normalize();
+        }
+        return this._collidableFrontDirection;
+    }
+    /**
+     * Sets the mesh used for testing input collision
+     * @param collisionMesh the new collision mesh for the button
+     */
+    set collisionMesh(collisionMesh) {
+        // Remove the GUI3DManager's data from the previous collision mesh's reserved data store, and reset interactability
+        if (this._collisionMesh) {
+            this._collisionMesh.isNearPickable = false;
+            if (this._collisionMesh.reservedDataStore?.GUI3D) {
+                this._collisionMesh.reservedDataStore.GUI3D = {};
+            }
+            const meshes = this._collisionMesh.getChildMeshes();
+            for (const mesh of meshes) {
+                mesh.isNearPickable = false;
+                if (mesh.reservedDataStore?.GUI3D) {
+                    mesh.reservedDataStore.GUI3D = {};
+                }
+            }
+        }
+        this._collisionMesh = collisionMesh;
+        this._injectGUI3DReservedDataStore(this._collisionMesh).control = this;
+        this._collisionMesh.isNearPickable = true;
+        const meshes = this._collisionMesh.getChildMeshes();
+        for (const mesh of meshes) {
+            this._injectGUI3DReservedDataStore(mesh).control = this;
+            mesh.isNearPickable = true;
+        }
+        this.collidableFrontDirection = collisionMesh.forward;
+    }
+    /**
+     * Setter for if this TouchButton3D should be treated as a toggle button
+     * @param value If this TouchHolographicButton should act like a toggle button
+     */
+    set isToggleButton(value) {
+        if (value === this._isToggleButton) {
+            return;
+        }
+        this._isToggleButton = value;
+        if (value) {
+            this.onPointerUpObservable.add(this._toggleButtonCallback);
+        }
+        else {
+            this.onPointerUpObservable.removeCallback(this._toggleButtonCallback);
+            // Safety check, reset the button if it's toggled on but no longer a toggle button
+            if (this._toggleState) {
+                this._onToggle(false);
+            }
+        }
+    }
+    get isToggleButton() {
+        return this._isToggleButton;
+    }
+    /**
+     * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+     * @param newState The new state to set the TouchHolographicButton's toggle state to
+     */
+    set isToggled(newState) {
+        if (this._isToggleButton && this._toggleState !== newState) {
+            this._onToggle(newState);
+        }
+    }
+    get isToggled() {
+        return this._toggleState;
+    }
+    _onToggle(newState) {
+        this._toggleState = newState;
+        this.onToggleObservable.notifyObservers(newState);
+    }
+    // Returns true if the collidable is in front of the button, or if the button has no front direction
+    _isInteractionInFrontOfButton(collidablePos) {
+        return this._getInteractionHeight(collidablePos, this._collisionMesh.getAbsolutePosition()) > 0;
+    }
+    /**
+     * Get the height of the touchPoint from the collidable part of the button
+     * @param touchPoint the point to compare to the button, in absolute position
+     * @returns the depth of the touch point into the front of the button
+     */
+    getPressDepth(touchPoint) {
+        if (!this._isNearPressed) {
+            return 0;
+        }
+        const interactionHeight = this._getInteractionHeight(touchPoint, this._collisionMesh.getAbsolutePosition());
+        return this._interactionSurfaceHeight - interactionHeight;
+    }
+    // Returns true if the collidable is in front of the button, or if the button has no front direction
+    _getInteractionHeight(interactionPos, basePos) {
+        const frontDir = this.collidableFrontDirection;
+        if (frontDir.length() === 0) {
+            // The button has no front, just return the distance to the base
+            return Vector3.Distance(interactionPos, basePos);
+        }
+        const d = Vector3.Dot(basePos, frontDir);
+        const abc = Vector3.Dot(interactionPos, frontDir);
+        return abc - d;
+    }
+    /**
+     * @internal
+     */
+    _generatePointerEventType(providedType, nearMeshPosition, activeInteractionCount) {
+        if (providedType === PointerEventTypes.POINTERDOWN || providedType === PointerEventTypes.POINTERMOVE) {
+            if (!this._isInteractionInFrontOfButton(nearMeshPosition)) {
+                // Near interaction mesh is behind the button, don't send a pointer down
+                return PointerEventTypes.POINTERMOVE;
+            }
+            else {
+                this._isNearPressed = true;
+                this._interactionSurfaceHeight = this._getInteractionHeight(nearMeshPosition, this._collisionMesh.getAbsolutePosition());
+            }
+        }
+        if (providedType === PointerEventTypes.POINTERUP) {
+            if (activeInteractionCount == 0) {
+                // We get the release for the down we swallowed earlier, swallow as well
+                return PointerEventTypes.POINTERMOVE;
+            }
+            else {
+                this._isNearPressed = false;
+            }
+        }
+        return providedType;
+    }
+    _getTypeName() {
+        return "TouchButton3D";
+    }
+    // Mesh association
+    _createNode(scene) {
+        return super._createNode(scene);
+    }
+    /**
+     * Releases all associated resources
+     */
+    dispose() {
+        super.dispose();
+        // Clean up toggle observables
+        this.onPointerUpObservable.removeCallback(this._toggleButtonCallback);
+        this.onToggleObservable.clear();
+        if (this._collisionMesh) {
+            this._collisionMesh.dispose();
+        }
+    }
+}
+//# sourceMappingURL=touchButton3D.js.map

package/3D/controls/touchButton3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchButton3D.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/touchButton3D.ts"],"names":[],"mappings":"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","sourcesContent":["// Assumptions: absolute position of button mesh is inside the mesh\r\n\r\nimport { Vector3, TmpVectors } from \"core/Maths/math.vector\";\r\nimport type { Mesh } from \"core/Meshes/mesh\";\r\nimport { PointerEventTypes } from \"core/Events/pointerEvents\";\r\nimport type { TransformNode } from \"core/Meshes/transformNode\";\r\nimport type { Scene } from \"core/scene\";\r\n\r\nimport { Observable } from \"core/Misc/observable\";\r\n\r\nimport { Button3D } from \"./button3D\";\r\n\r\n/**\r\n * Class used to create a touchable button in 3D\r\n */\r\nexport class TouchButton3D extends Button3D {\r\n    private _collisionMesh: Mesh;\r\n\r\n    // 'front' direction. If Vector3.Zero, there is no front and all directions of interaction are accepted\r\n    private _collidableFrontDirection: Vector3;\r\n    private _isNearPressed = false;\r\n    private _interactionSurfaceHeight = 0;\r\n\r\n    private _isToggleButton = false;\r\n    private _toggleState = false;\r\n    private _toggleButtonCallback = () => {\r\n        this._onToggle(!this._toggleState);\r\n    };\r\n\r\n    /**\r\n     * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true\r\n     */\r\n    public onToggleObservable = new Observable<boolean>();\r\n\r\n    /**\r\n     * Creates a new touchable button\r\n     * @param name defines the control name\r\n     * @param collisionMesh mesh to track collisions with\r\n     */\r\n    constructor(name?: string, collisionMesh?: Mesh) {\r\n        super(name);\r\n\r\n        this.collidableFrontDirection = Vector3.Zero();\r\n\r\n        if (collisionMesh) {\r\n            this.collisionMesh = collisionMesh;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Whether the current interaction is caused by near interaction or not\r\n     */\r\n    public get isActiveNearInteraction() {\r\n        return this._isNearPressed;\r\n    }\r\n\r\n    /**\r\n     * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction\r\n     * @param frontWorldDir the forward direction of the button\r\n     */\r\n    public set collidableFrontDirection(frontWorldDir: Vector3) {\r\n        this._collidableFrontDirection = frontWorldDir.normalize();\r\n\r\n        if (this._collisionMesh) {\r\n            const invert = TmpVectors.Matrix[0];\r\n\r\n            invert.copyFrom(this._collisionMesh.getWorldMatrix());\r\n            invert.invert();\r\n            Vector3.TransformNormalToRef(this._collidableFrontDirection, invert, this._collidableFrontDirection);\r\n            this._collidableFrontDirection.normalize();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'\r\n     */\r\n    public get collidableFrontDirection() {\r\n        if (this._collisionMesh) {\r\n            // Update the front direction to reflect any rotations of the collision mesh\r\n            const transformedDirection = TmpVectors.Vector3[0];\r\n            Vector3.TransformNormalToRef(this._collidableFrontDirection, this._collisionMesh.getWorldMatrix(), transformedDirection);\r\n\r\n            return transformedDirection.normalize();\r\n        }\r\n\r\n        return this._collidableFrontDirection;\r\n    }\r\n\r\n    /**\r\n     * Sets the mesh used for testing input collision\r\n     * @param collisionMesh the new collision mesh for the button\r\n     */\r\n    public set collisionMesh(collisionMesh: Mesh) {\r\n        // Remove the GUI3DManager's data from the previous collision mesh's reserved data store, and reset interactability\r\n        if (this._collisionMesh) {\r\n            this._collisionMesh.isNearPickable = false;\r\n            if (this._collisionMesh.reservedDataStore?.GUI3D) {\r\n                this._collisionMesh.reservedDataStore.GUI3D = {};\r\n            }\r\n\r\n            const meshes = this._collisionMesh.getChildMeshes();\r\n            for (const mesh of meshes) {\r\n                mesh.isNearPickable = false;\r\n                if (mesh.reservedDataStore?.GUI3D) {\r\n                    mesh.reservedDataStore.GUI3D = {};\r\n                }\r\n            }\r\n        }\r\n\r\n        this._collisionMesh = collisionMesh;\r\n        this._injectGUI3DReservedDataStore(this._collisionMesh).control = this;\r\n        this._collisionMesh.isNearPickable = true;\r\n\r\n        const meshes = this._collisionMesh.getChildMeshes();\r\n        for (const mesh of meshes) {\r\n            this._injectGUI3DReservedDataStore(mesh).control = this;\r\n            mesh.isNearPickable = true;\r\n        }\r\n        this.collidableFrontDirection = collisionMesh.forward;\r\n    }\r\n\r\n    /**\r\n     * Setter for if this TouchButton3D should be treated as a toggle button\r\n     * @param value If this TouchHolographicButton should act like a toggle button\r\n     */\r\n    public set isToggleButton(value: boolean) {\r\n        if (value === this._isToggleButton) {\r\n            return;\r\n        }\r\n\r\n        this._isToggleButton = value;\r\n\r\n        if (value) {\r\n            this.onPointerUpObservable.add(this._toggleButtonCallback);\r\n        } else {\r\n            this.onPointerUpObservable.removeCallback(this._toggleButtonCallback);\r\n\r\n            // Safety check, reset the button if it's toggled on but no longer a toggle button\r\n            if (this._toggleState) {\r\n                this._onToggle(false);\r\n            }\r\n        }\r\n    }\r\n    public get isToggleButton() {\r\n        return this._isToggleButton;\r\n    }\r\n\r\n    /**\r\n     * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true\r\n     * @param newState The new state to set the TouchHolographicButton's toggle state to\r\n     */\r\n    public set isToggled(newState: boolean) {\r\n        if (this._isToggleButton && this._toggleState !== newState) {\r\n            this._onToggle(newState);\r\n        }\r\n    }\r\n    public get isToggled() {\r\n        return this._toggleState;\r\n    }\r\n\r\n    protected _onToggle(newState: boolean) {\r\n        this._toggleState = newState;\r\n        this.onToggleObservable.notifyObservers(newState);\r\n    }\r\n\r\n    // Returns true if the collidable is in front of the button, or if the button has no front direction\r\n    private _isInteractionInFrontOfButton(collidablePos: Vector3) {\r\n        return this._getInteractionHeight(collidablePos, this._collisionMesh.getAbsolutePosition()) > 0;\r\n    }\r\n\r\n    /**\r\n     * Get the height of the touchPoint from the collidable part of the button\r\n     * @param touchPoint the point to compare to the button, in absolute position\r\n     * @returns the depth of the touch point into the front of the button\r\n     */\r\n    public getPressDepth(touchPoint: Vector3) {\r\n        if (!this._isNearPressed) {\r\n            return 0;\r\n        }\r\n        const interactionHeight = this._getInteractionHeight(touchPoint, this._collisionMesh.getAbsolutePosition());\r\n        return this._interactionSurfaceHeight - interactionHeight;\r\n    }\r\n\r\n    // Returns true if the collidable is in front of the button, or if the button has no front direction\r\n    protected _getInteractionHeight(interactionPos: Vector3, basePos: Vector3) {\r\n        const frontDir = this.collidableFrontDirection;\r\n        if (frontDir.length() === 0) {\r\n            // The button has no front, just return the distance to the base\r\n            return Vector3.Distance(interactionPos, basePos);\r\n        }\r\n        const d = Vector3.Dot(basePos, frontDir);\r\n        const abc = Vector3.Dot(interactionPos, frontDir);\r\n\r\n        return abc - d;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number {\r\n        if (providedType === PointerEventTypes.POINTERDOWN || providedType === PointerEventTypes.POINTERMOVE) {\r\n            if (!this._isInteractionInFrontOfButton(nearMeshPosition)) {\r\n                // Near interaction mesh is behind the button, don't send a pointer down\r\n                return PointerEventTypes.POINTERMOVE;\r\n            } else {\r\n                this._isNearPressed = true;\r\n                this._interactionSurfaceHeight = this._getInteractionHeight(nearMeshPosition, this._collisionMesh.getAbsolutePosition());\r\n            }\r\n        }\r\n        if (providedType === PointerEventTypes.POINTERUP) {\r\n            if (activeInteractionCount == 0) {\r\n                // We get the release for the down we swallowed earlier, swallow as well\r\n                return PointerEventTypes.POINTERMOVE;\r\n            } else {\r\n                this._isNearPressed = false;\r\n            }\r\n        }\r\n\r\n        return providedType;\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"TouchButton3D\";\r\n    }\r\n\r\n    // Mesh association\r\n    protected override _createNode(scene: Scene): TransformNode {\r\n        return super._createNode(scene);\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public override dispose() {\r\n        super.dispose();\r\n\r\n        // Clean up toggle observables\r\n        this.onPointerUpObservable.removeCallback(this._toggleButtonCallback);\r\n        this.onToggleObservable.clear();\r\n\r\n        if (this._collisionMesh) {\r\n            this._collisionMesh.dispose();\r\n        }\r\n    }\r\n}\r\n"]}

package/3D/controls/touchHolographicButton.d.ts

@@ -0,0 +1,110 @@
+import type { Nullable } from "@babylonjs/core/types.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import type { Scene } from "@babylonjs/core/scene.js";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
+import { FluentButtonMaterial } from "../materials/fluentButton/fluentButtonMaterial.js";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture.js";
+import { TouchButton3D } from "./touchButton3D.js";
+import type { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
+/**
+ * Class used to create a holographic button in 3D
+ * @since 5.0.0
+ */
+export declare class TouchHolographicButton extends TouchButton3D {
+    /**
+     * Base Url for the button model.
+     */
+    static MODEL_BASE_URL: string;
+    /**
+     * File name for the button model.
+     */
+    static MODEL_FILENAME: string;
+    private _backPlate;
+    private _textPlate;
+    private _frontPlate;
+    private _text;
+    private _imageUrl;
+    private _shareMaterials;
+    private _isBackplateVisible;
+    private _frontMaterial;
+    private _backMaterial;
+    private _plateMaterial;
+    private _pickedPointObserver;
+    private _pointerHoverObserver;
+    private _frontPlateDepth;
+    private _backPlateDepth;
+    private _backplateColor;
+    private _backplateToggledColor;
+    private _tooltipFade;
+    private _tooltipTextBlock;
+    private _tooltipTexture;
+    private _tooltipMesh;
+    private _tooltipHoverObserver;
+    private _tooltipOutObserver;
+    private _disposeTooltip;
+    /**
+     * Rendering ground id of all the mesh in the button
+     */
+    set renderingGroupId(id: number);
+    get renderingGroupId(): number;
+    /**
+     * Gets the mesh used to render this control
+     */
+    get mesh(): Nullable<AbstractMesh>;
+    /**
+     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+     */
+    set tooltipText(text: Nullable<string>);
+    get tooltipText(): Nullable<string>;
+    /**
+     * Gets or sets text for the button
+     */
+    get text(): string;
+    set text(value: string);
+    /**
+     * Gets or sets the image url for the button
+     */
+    get imageUrl(): string;
+    set imageUrl(value: string);
+    /**
+     * Gets the back material used by this button
+     */
+    get backMaterial(): FluentMaterial;
+    /**
+     * Gets the front material used by this button
+     */
+    get frontMaterial(): FluentButtonMaterial;
+    /**
+     * Gets the plate material used by this button
+     */
+    get plateMaterial(): StandardMaterial;
+    /**
+     * Gets a boolean indicating if this button shares its material with other HolographicButtons
+     */
+    get shareMaterials(): boolean;
+    /**
+     * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
+     */
+    set isBackplateVisible(isVisible: boolean);
+    /**
+     * Creates a new button
+     * @param name defines the control name
+     * @param shareMaterials
+     */
+    constructor(name?: string, shareMaterials?: boolean);
+    protected _getTypeName(): string;
+    private _rebuildContent;
+    protected _createNode(scene: Scene): TransformNode;
+    protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
+    private _createBackMaterial;
+    private _createFrontMaterial;
+    private _createPlateMaterial;
+    protected _onToggle(newState: boolean): void;
+    protected _affectMaterial(mesh: Mesh): void;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}