@babylonjs/gui 5.0.0-beta.1 → 5.0.0-beta.12

package/3D/controls/touchButton3D.js

@@ -3,6 +3,7 @@ import { __extends } from "tslib";
 import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
 import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
 import { TmpVectors } from "@babylonjs/core/Maths/math.vector.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Button3D } from "./button3D.js";
 /**
  * Class used to create a touchable button in 3D
@@ -17,12 +18,30 @@ var TouchButton3D = /** @class */ (function (_super) {
     function TouchButton3D(name, collisionMesh) {
         var _this = _super.call(this, name) || this;
         _this._isNearPressed = false;
+        _this._interactionSurfaceHeight = 0;
+        _this._isToggleButton = false;
+        _this._toggleState = false;
+        _this._toggleButtonCallback = function () { _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;
         }
         return _this;
     }
+    Object.defineProperty(TouchButton3D.prototype, "isActiveNearInteraction", {
+        /**
+         * Whether the current interaction is caused by near interaction or not
+         */
+        get: function () {
+            return this._isNearPressed;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TouchButton3D.prototype, "collidableFrontDirection", {
         /**
          * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'
@@ -59,25 +78,97 @@ var TouchButton3D = /** @class */ (function (_super) {
          * @param collisionMesh the new collision mesh for the button
          */
         set: function (collisionMesh) {
+            var _this = this;
+            var _a;
+            // Remove the GUI3DManager's data from the previous collision mesh's reserved data store, and reset interactability
             if (this._collisionMesh) {
-                this._collisionMesh.dispose();
-            }
-            // parent the mesh to sync transforms
-            if (!collisionMesh.parent && this.mesh) {
-                collisionMesh.setParent(this.mesh);
+                this._collisionMesh.isNearPickable = false;
+                if ((_a = this._collisionMesh.reservedDataStore) === null || _a === void 0 ? void 0 : _a.GUI3D) {
+                    this._collisionMesh.reservedDataStore.GUI3D = {};
+                }
+                this._collisionMesh.getChildMeshes().forEach(function (mesh) {
+                    var _a;
+                    mesh.isNearPickable = false;
+                    if ((_a = mesh.reservedDataStore) === null || _a === void 0 ? void 0 : _a.GUI3D) {
+                        mesh.reservedDataStore.GUI3D = {};
+                    }
+                });
             }
             this._collisionMesh = collisionMesh;
             this._injectGUI3DReservedDataStore(this._collisionMesh).control = this;
             this._collisionMesh.isNearPickable = true;
+            this._collisionMesh.getChildMeshes().forEach(function (mesh) {
+                _this._injectGUI3DReservedDataStore(mesh).control = _this;
+                mesh.isNearPickable = true;
+            });
             this.collidableFrontDirection = collisionMesh.forward;
         },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TouchButton3D.prototype, "isToggleButton", {
+        get: function () {
+            return this._isToggleButton;
+        },
+        /**
+         * Setter for if this TouchButton3D should be treated as a toggle button
+         * @param value If this TouchHolographicButton should act like a toggle button
+         */
+        set: function (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);
+                }
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchButton3D.prototype, "isToggled", {
+        get: function () {
+            return this._toggleState;
+        },
+        /**
+         * 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: function (newState) {
+            if (this._isToggleButton && this._toggleState !== newState) {
+                this._onToggle(newState);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TouchButton3D.prototype._onToggle = function (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
     TouchButton3D.prototype._isInteractionInFrontOfButton = function (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
+     */
+    TouchButton3D.prototype.getPressDepth = function (touchPoint) {
+        if (!this._isNearPressed) {
+            return 0;
+        }
+        var 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
     TouchButton3D.prototype._getInteractionHeight = function (interactionPos, basePos) {
         var frontDir = this.collidableFrontDirection;
@@ -98,6 +189,7 @@ var TouchButton3D = /** @class */ (function (_super) {
             }
             else {
                 this._isNearPressed = true;
+                this._interactionSurfaceHeight = this._getInteractionHeight(nearMeshPosition, this._collisionMesh.getAbsolutePosition());
             }
         }
         if (providedType === PointerEventTypes.POINTERUP) {
@@ -123,6 +215,9 @@ var TouchButton3D = /** @class */ (function (_super) {
      */
     TouchButton3D.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
+        // Clean up toggle observables
+        this.onPointerUpObservable.removeCallback(this._toggleButtonCallback);
+        this.onToggleObservable.clear();
         if (this._collisionMesh) {
             this._collisionMesh.dispose();
         }

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

@@ -1 +1 @@
-{"version":3,"file":"touchButton3D.js","sourceRoot":"","sources":["../../../../sourceES6/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 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { PointerEventTypes } from \"@babylonjs/core/Events/pointerEvents\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { TmpVectors } from \"@babylonjs/core/Maths/math.vector\";\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    protected _isNearPressed = false;\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     * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction\r\n     * @param frontDir 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        if (this._collisionMesh) {\r\n            this._collisionMesh.dispose();\r\n        }\r\n\r\n        // parent the mesh to sync transforms\r\n        if (!collisionMesh.parent && this.mesh) {\r\n            collisionMesh.setParent(this.mesh);\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        this.collidableFrontDirection = collisionMesh.forward;\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    // 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    /** @hidden */\r\n    public _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number {\r\n        if (providedType === PointerEventTypes.POINTERDOWN) {\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            }\r\n            else {\r\n                this._isNearPressed = true;\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            }\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 _getTypeName(): string {\r\n        return \"TouchButton3D\";\r\n    }\r\n\r\n    // Mesh association\r\n    protected _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 dispose() {\r\n        super.dispose();\r\n\r\n        if (this._collisionMesh) {\r\n            this._collisionMesh.dispose();\r\n        }\r\n    }\r\n}"]}
+{"version":3,"file":"touchButton3D.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/touchButton3D.ts"],"names":[],"mappings":"AAAA,mEAAmE;;AAEnE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAGzE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC;;GAEG;AACH;IAAmC,iCAAQ;IAiBvC;;;;OAIG;IACH,uBAAY,IAAa,EAAE,aAAoB;QAA/C,YACI,kBAAM,IAAI,CAAC,SAOd;QAzBO,oBAAc,GAAG,KAAK,CAAC;QACvB,+BAAyB,GAAG,CAAC,CAAC;QAE9B,qBAAe,GAAG,KAAK,CAAC;QACxB,kBAAY,GAAG,KAAK,CAAC;QACrB,2BAAqB,GAAG,cAAQ,KAAI,CAAC,SAAS,CAAC,CAAC,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QAE9E;;WAEG;QACI,wBAAkB,GAAG,IAAI,UAAU,EAAW,CAAC;QAUlD,KAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;QAE/C,IAAI,aAAa,EAAE;YACf,KAAI,CAAC,aAAa,GAAG,aAAa,CAAC;SACtC;;IACL,CAAC;IAKD,sBAAW,kDAAuB;QAHlC;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,cAAc,CAAC;QAC/B,CAAC;;;OAAA;IAMD,sBAAW,mDAAwB;QAanC;;WAEG;aACH;YACI,IAAI,IAAI,CAAC,cAAc,EAAE;gBACrB,4EAA4E;gBAC5E,IAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACnD,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,oBAAoB,CAAC,CAAC;gBAEzH,OAAO,oBAAoB,CAAC,SAAS,EAAE,CAAC;aAC3C;YAED,OAAO,IAAI,CAAC,yBAAyB,CAAC;QAC1C,CAAC;QA9BD;;;WAGG;aACH,UAAoC,aAAsB;YACtD,IAAI,CAAC,yBAAyB,GAAG,aAAa,CAAC,SAAS,EAAE,CAAC;YAE3D,IAAI,IAAI,CAAC,cAAc,EAAE;gBACrB,IAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAEpC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC;gBACtD,MAAM,CAAC,MAAM,EAAE,CAAC;gBAChB,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;gBACrG,IAAI,CAAC,yBAAyB,CAAC,SAAS,EAAE,CAAC;aAC9C;QACL,CAAC;;;OAAA;IAqBD,sBAAW,wCAAa;QAJxB;;;WAGG;aACH,UAAyB,aAAmB;YAA5C,iBAyBC;;YAxBG,mHAAmH;YACnH,IAAI,IAAI,CAAC,cAAc,EAAE;gBACrB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,KAAK,CAAC;gBAC3C,IAAI,MAAA,IAAI,CAAC,cAAc,CAAC,iBAAiB,0CAAE,KAAK,EAAE;oBAC9C,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,KAAK,GAAG,EAAE,CAAC;iBACpD;gBAED,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC,UAAC,IAAI;;oBAC9C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;oBAC5B,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE;wBAC/B,IAAI,CAAC,iBAAiB,CAAC,KAAK,GAAG,EAAE,CAAC;qBACrC;gBACL,CAAC,CAAC,CAAC;aACN;YAED,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;YACpC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;YACvE,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC;YAE1C,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC,UAAC,IAAI;gBAC9C,KAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,KAAI,CAAC;gBACxD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC/B,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC,OAAO,CAAC;QAC1D,CAAC;;;OAAA;IAMD,sBAAW,yCAAc;aAmBzB;YACI,OAAO,IAAI,CAAC,eAAe,CAAC;QAChC,CAAC;QAzBD;;;WAGG;aACH,UAA0B,KAAc;YACpC,IAAI,KAAK,KAAK,IAAI,CAAC,eAAe,EAAE;gBAChC,OAAO;aACV;YAED,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAE7B,IAAI,KAAK,EAAE;gBACP,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;aAC9D;iBACI;gBACD,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBAEtE,kFAAkF;gBAClF,IAAI,IAAI,CAAC,YAAY,EAAE;oBACnB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;iBACzB;aACJ;QACL,CAAC;;;OAAA;IASD,sBAAW,oCAAS;aAKpB;YACI,OAAO,IAAI,CAAC,YAAY,CAAC;QAC7B,CAAC;QAXD;;;WAGG;aACH,UAAqB,QAAiB;YAClC,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;gBACxD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;aAC5B;QACL,CAAC;;;OAAA;IAKS,iCAAS,GAAnB,UAAoB,QAAiB;QACjC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC;IAED,oGAAoG;IAC5F,qDAA6B,GAArC,UAAsC,aAAsB;QACxD,OAAO,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,mBAAmB,EAAE,CAAC,GAAG,CAAC,CAAC;IACpG,CAAC;IAED;;;;OAIG;IACI,qCAAa,GAApB,UAAqB,UAAmB;QACpC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACtB,OAAO,CAAC,CAAC;SACZ;QACD,IAAI,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,mBAAmB,EAAE,CAAC,CAAC;QAC1G,OAAO,IAAI,CAAC,yBAAyB,GAAG,iBAAiB,CAAC;IAC9D,CAAC;IAED,oGAAoG;IAC1F,6CAAqB,GAA/B,UAAgC,cAAuB,EAAE,OAAgB;QACrE,IAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,CAAC;QAC/C,IAAI,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE;YACzB,gEAAgE;YAChE,OAAO,OAAO,CAAC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;SACpD;QACD,IAAM,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACzC,IAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;QAElD,OAAO,GAAG,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,cAAc;IACP,iDAAyB,GAAhC,UAAiC,YAAoB,EAAE,gBAAyB,EAAE,sBAA8B;QAC5G,IAAI,YAAY,KAAK,iBAAiB,CAAC,WAAW,EAAE;YAChD,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,EAAE;gBACvD,wEAAwE;gBACxE,OAAO,iBAAiB,CAAC,WAAW,CAAC;aACxC;iBACI;gBACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,mBAAmB,EAAE,CAAC,CAAC;aAC5H;SACJ;QACD,IAAI,YAAY,KAAK,iBAAiB,CAAC,SAAS,EAAE;YAC9C,IAAI,sBAAsB,IAAI,CAAC,EAAE;gBAC7B,wEAAwE;gBACxE,OAAO,iBAAiB,CAAC,WAAW,CAAC;aACxC;iBACI;gBACD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC/B;SACJ;QAED,OAAO,YAAY,CAAC;IACxB,CAAC;IAES,oCAAY,GAAtB;QACI,OAAO,eAAe,CAAC;IAC3B,CAAC;IAED,mBAAmB;IACT,mCAAW,GAArB,UAAsB,KAAY;QAC9B,OAAO,iBAAM,WAAW,YAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED;;OAEG;IACI,+BAAO,GAAd;QACI,iBAAM,OAAO,WAAE,CAAC;QAEhB,8BAA8B;QAC9B,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACtE,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;SACjC;IACL,CAAC;IACL,oBAAC;AAAD,CAAC,AAlOD,CAAmC,QAAQ,GAkO1C","sourcesContent":["// Assumptions: absolute position of button mesh is inside the mesh\r\n\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { PointerEventTypes } from \"@babylonjs/core/Events/pointerEvents\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { TmpVectors } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { Observable } from \"@babylonjs/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 = () => { this._onToggle(!this._toggleState); };\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 frontDir 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            this._collisionMesh.getChildMeshes().forEach((mesh) => {\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        this._collisionMesh.getChildMeshes().forEach((mesh) => {\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        }\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        var 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    /** @hidden */\r\n    public _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number {\r\n        if (providedType === PointerEventTypes.POINTERDOWN) {\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            }\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            }\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 _getTypeName(): string {\r\n        return \"TouchButton3D\";\r\n    }\r\n\r\n    // Mesh association\r\n    protected _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 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}"]}

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

@@ -3,9 +3,11 @@ import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
 import { Mesh } from "@babylonjs/core/Meshes/mesh";
 import { Scene } from "@babylonjs/core/scene";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial";
 import { FluentButtonMaterial } from "../materials/fluentButton/fluentButtonMaterial";
 import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
 import { TouchButton3D } from "./touchButton3D";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
 /**
  * Class used to create a holographic button in 3D
  * @since 5.0.0
@@ -33,6 +35,8 @@ export declare class TouchHolographicButton extends TouchButton3D {
     private _pointerHoverObserver;
     private _frontPlateDepth;
     private _backPlateDepth;
+    private _backplateColor;
+    private _backplateToggledColor;
     private _tooltipFade;
     private _tooltipTextBlock;
     private _tooltipTexture;
@@ -45,6 +49,10 @@ export declare class TouchHolographicButton extends TouchButton3D {
      */
     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)
      */
@@ -63,7 +71,7 @@ export declare class TouchHolographicButton extends TouchButton3D {
     /**
      * Gets the back material used by this button
      */
-    get backMaterial(): StandardMaterial;
+    get backMaterial(): FluentMaterial;
     /**
      * Gets the front material used by this button
      */
@@ -92,6 +100,7 @@ export declare class TouchHolographicButton extends TouchButton3D {
     private _createBackMaterial;
     private _createFrontMaterial;
     private _createPlateMaterial;
+    protected _onToggle(newState: boolean): void;
     protected _affectMaterial(mesh: Mesh): void;
     /**
      * Releases all associated resources

package/3D/controls/touchHolographicButton.js

@@ -1,10 +1,12 @@
 import { __extends } from "tslib";
 import { Vector3 } from "@babylonjs/core/Maths/math.vector.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 { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
 import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
 import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior.js";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
 import { FluentButtonMaterial } from "../materials/fluentButton/fluentButtonMaterial.js";
 import { StackPanel } from "../../2D/controls/stackPanel.js";
 import { Image } from "../../2D/controls/image.js";
@@ -32,6 +34,8 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         _this._isBackplateVisible = true;
         _this._frontPlateDepth = 0.5;
         _this._backPlateDepth = 0.04;
+        _this._backplateColor = new Color3(0.08, 0.15, 0.55);
+        _this._backplateToggledColor = new Color3(0.25, 0.4, 0.95);
         _this._shareMaterials = shareMaterials;
         _this.pointerEnterAnimation = function () {
             _this._frontMaterial.leftBlobEnable = true;
@@ -42,7 +46,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             _this._frontMaterial.rightBlobEnable = false;
         };
         _this.pointerDownAnimation = function () {
-            if (_this._frontPlate && !_this._isNearPressed) {
+            if (_this._frontPlate && !_this.isActiveNearInteraction) {
                 _this._frontPlate.scaling.z = _this._frontPlateDepth * 0.2;
                 _this._frontPlate.position = Vector3.Forward(_this._frontPlate._scene.useRightHandedSystem).scale((_this._frontPlateDepth - (0.2 * _this._frontPlateDepth)) / 2);
                 _this._textPlate.position = Vector3.Forward(_this._textPlate._scene.useRightHandedSystem).scale(-(_this._backPlateDepth + (0.2 * _this._frontPlateDepth)) / 2);
@@ -56,10 +60,10 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             }
         };
         _this.onPointerMoveObservable.add(function (position) {
-            if (_this._frontPlate && _this._isNearPressed) {
+            if (_this._frontPlate && _this.isActiveNearInteraction) {
                 var scale = Vector3.Zero();
                 if (_this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {
-                    var interactionHeight = _this._getInteractionHeight(position, _this._backPlate.position) / scale.z;
+                    var interactionHeight = _this._getInteractionHeight(position, _this._backPlate.getAbsolutePosition()) / scale.z;
                     interactionHeight = Scalar.Clamp(interactionHeight - (_this._backPlateDepth / 2), 0.2 * _this._frontPlateDepth, _this._frontPlateDepth);
                     _this._frontPlate.scaling.z = interactionHeight;
                     _this._frontPlate.position = Vector3.Forward(_this._frontPlate._scene.useRightHandedSystem).scale((_this._frontPlateDepth - interactionHeight) / 2);
@@ -104,6 +108,16 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TouchHolographicButton.prototype, "mesh", {
+        /**
+         * Gets the mesh used to render this control
+         */
+        get: function () {
+            return this._backPlate;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TouchHolographicButton.prototype, "tooltipText", {
         get: function () {
             if (this._tooltipTextBlock) {
@@ -289,7 +303,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         this.name = (_a = this.name) !== null && _a !== void 0 ? _a : "TouchHolographicButton";
-        var collisionMesh = CreateBox(this.name + "_collisionMesh", {
+        var collisionMesh = CreateBox("".concat(this.name, "_collisionMesh"), {
             width: 1.0,
             height: 1.0,
             depth: this._frontPlateDepth,
@@ -300,32 +314,43 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         collisionMesh.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);
         SceneLoader.ImportMeshAsync(undefined, TouchHolographicButton.MODEL_BASE_URL, TouchHolographicButton.MODEL_FILENAME, scene)
             .then(function (result) {
+            var alphaMesh = CreateBox("${this.name}_alphaMesh", {
+                width: 1.0,
+                height: 1.0,
+                depth: 1.0,
+            }, scene);
+            alphaMesh.isPickable = false;
+            alphaMesh.material = new StandardMaterial("${this.name}_alphaMesh_material", scene);
+            alphaMesh.material.alpha = 0.15;
             var importedFrontPlate = result.meshes[1];
-            importedFrontPlate.name = _this.name + "_frontPlate";
+            importedFrontPlate.name = "".concat(_this.name, "_frontPlate");
             importedFrontPlate.isPickable = false;
             importedFrontPlate.scaling.z = _this._frontPlateDepth;
+            alphaMesh.parent = importedFrontPlate;
             importedFrontPlate.parent = collisionMesh;
             if (!!_this._frontMaterial) {
                 importedFrontPlate.material = _this._frontMaterial;
             }
             _this._frontPlate = importedFrontPlate;
         });
-        this._backPlate = CreateBox(this.name + "_backPlate", {
+        this._backPlate = CreateBox("".concat(this.name, "_backPlate"), {
             width: 1.0,
             height: 1.0,
             depth: this._backPlateDepth,
         }, scene);
-        this._backPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._backPlateDepth / 2);
+        this._backPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(this._backPlateDepth / 2);
         this._backPlate.isPickable = false;
         this._textPlate = _super.prototype._createNode.call(this, scene);
-        this._textPlate.name = this.name + "_textPlate";
+        this._textPlate.name = "".concat(this.name, "_textPlate");
         this._textPlate.isPickable = false;
         this._textPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);
         this._backPlate.addChild(collisionMesh);
         this._backPlate.addChild(this._textPlate);
+        var tn = new TransformNode("{this.name}_root", scene);
+        this._backPlate.setParent(tn);
         this.collisionMesh = collisionMesh;
         this.collidableFrontDirection = this._backPlate.forward.negate(); // Mesh is facing the wrong way
-        return this._backPlate;
+        return tn;
     };
     TouchHolographicButton.prototype._applyFacade = function (facadeTexture) {
         this._plateMaterial.emissiveTexture = facadeTexture;
@@ -333,8 +358,10 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         this._plateMaterial.diffuseColor = new Color3(0.4, 0.4, 0.4);
     };
     TouchHolographicButton.prototype._createBackMaterial = function (mesh) {
-        this._backMaterial = new StandardMaterial(this.name + "Back Material", mesh.getScene());
-        this._backMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5);
+        this._backMaterial = new FluentMaterial(this.name + "backPlateMaterial", mesh.getScene());
+        this._backMaterial.albedoColor = this._backplateColor;
+        this._backMaterial.renderBorders = true;
+        this._backMaterial.renderHoverLight = false;
     };
     TouchHolographicButton.prototype._createFrontMaterial = function (mesh) {
         this._frontMaterial = new FluentButtonMaterial(this.name + "Front Material", mesh.getScene());
@@ -343,6 +370,17 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         this._plateMaterial = new StandardMaterial(this.name + "Plate Material", mesh.getScene());
         this._plateMaterial.specularColor = Color3.Black();
     };
+    TouchHolographicButton.prototype._onToggle = function (newState) {
+        if (this._backMaterial) {
+            if (newState) {
+                this._backMaterial.albedoColor = this._backplateToggledColor;
+            }
+            else {
+                this._backMaterial.albedoColor = this._backplateColor;
+            }
+        }
+        _super.prototype._onToggle.call(this, newState);
+    };
     TouchHolographicButton.prototype._affectMaterial = function (mesh) {
         if (this._shareMaterials) {
             // Back

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

@@ -1 +1 @@
-{"version":3,"file":"touchHolographicButton.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/touchHolographicButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { Nullable } from \"@babylonjs/core/types\";\r\nimport { Observer } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { StandardMaterial } from \"@babylonjs/core/Materials/standardMaterial\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { CreatePlane } from \"@babylonjs/core/Meshes/Builders/planeBuilder\";\r\nimport { CreateBox } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { FadeInOutBehavior } from \"@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { FluentButtonMaterial } from \"../materials/fluentButton/fluentButtonMaterial\";\r\nimport { StackPanel } from \"../../2D/controls/stackPanel\";\r\nimport { Image } from \"../../2D/controls/image\";\r\nimport { TextBlock } from \"../../2D/controls/textBlock\";\r\nimport { AdvancedDynamicTexture } from \"../../2D/advancedDynamicTexture\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { Color3 } from \"@babylonjs/core/Maths/math.color\";\r\nimport { TouchButton3D } from \"./touchButton3D\";\r\nimport { AbstractMesh } from \"@babylonjs/core/Meshes/abstractMesh\";\r\nimport { SceneLoader } from \"@babylonjs/core/Loading/sceneLoader\";\r\nimport { DomManagement } from \"@babylonjs/core/Misc/domManagement\";\r\nimport { Scalar } from \"@babylonjs/core/Maths/math.scalar\";\r\n\r\n/**\r\n * Class used to create a holographic button in 3D\r\n * @since 5.0.0\r\n */\r\nexport class TouchHolographicButton extends TouchButton3D {\r\n    /**\r\n     * Base Url for the button model.\r\n     */\r\n    public static MODEL_BASE_URL: string = \"https://assets.babylonjs.com/meshes/MRTK/\";\r\n    /**\r\n     * File name for the button model.\r\n     */\r\n    public static MODEL_FILENAME: string = \"mrtk-fluent-button.glb\";\r\n\r\n    private _backPlate: Mesh;\r\n    private _textPlate: Mesh;\r\n    private _frontPlate: AbstractMesh;\r\n    private _text: string;\r\n    private _imageUrl: string;\r\n    private _shareMaterials = true;\r\n    private _isBackplateVisible = true;\r\n    private _frontMaterial: FluentButtonMaterial;\r\n    private _backMaterial: StandardMaterial;\r\n    private _plateMaterial: StandardMaterial;\r\n    private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;\r\n    private _pointerHoverObserver: Nullable<Observer<Vector3>>;\r\n    private _frontPlateDepth = 0.5;\r\n    private _backPlateDepth = 0.04;\r\n\r\n    // Tooltip\r\n    private _tooltipFade: Nullable<FadeInOutBehavior>;\r\n    private _tooltipTextBlock: Nullable<TextBlock>;\r\n    private _tooltipTexture: Nullable<AdvancedDynamicTexture>;\r\n    private _tooltipMesh: Nullable<Mesh>;\r\n    private _tooltipHoverObserver: Nullable<Observer<Control3D>>;\r\n    private _tooltipOutObserver: Nullable<Observer<Control3D>>;\r\n\r\n    private _disposeTooltip() {\r\n        this._tooltipFade = null;\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.dispose();\r\n        }\r\n        if (this._tooltipTexture) {\r\n            this._tooltipTexture.dispose();\r\n        }\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.dispose();\r\n        }\r\n        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);\r\n        this.onPointerOutObservable.remove(this._tooltipOutObserver);\r\n    }\r\n\r\n    /**\r\n     * Rendering ground id of all the mesh in the button\r\n     */\r\n    public set renderingGroupId(id: number) {\r\n        this._backPlate.renderingGroupId = id;\r\n        this._textPlate.renderingGroupId = id;\r\n        this._frontPlate.renderingGroupId = id;\r\n\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.renderingGroupId = id;\r\n        }\r\n    }\r\n    public get renderingGroupId(): number {\r\n        return this._backPlate.renderingGroupId;\r\n    }\r\n\r\n    /**\r\n     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)\r\n     */\r\n    public set tooltipText(text: Nullable<string>) {\r\n        if (!text) {\r\n            this._disposeTooltip();\r\n            return;\r\n        }\r\n        if (!this._tooltipFade) {\r\n            const rightHandedScene = this._backPlate._scene.useRightHandedSystem;\r\n            // Create tooltip with mesh and text\r\n            this._tooltipMesh = CreatePlane(\"\", { size: 1 }, this._backPlate._scene);\r\n            var tooltipBackground = CreatePlane(\"\", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);\r\n            var mat = new StandardMaterial(\"\", this._backPlate._scene);\r\n            mat.diffuseColor = Color3.FromHexString(\"#212121\");\r\n            tooltipBackground.material = mat;\r\n            tooltipBackground.isPickable = false;\r\n            this._tooltipMesh.addChild(tooltipBackground);\r\n            tooltipBackground.position = Vector3.Forward(rightHandedScene).scale(0.05);\r\n            this._tooltipMesh.scaling.y = 1 / 3;\r\n            this._tooltipMesh.position = Vector3.Up().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));\r\n            this._tooltipMesh.isPickable = false;\r\n            this._tooltipMesh.parent = this._backPlate;\r\n\r\n            // Create text texture for the tooltip\r\n            this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);\r\n            this._tooltipTextBlock = new TextBlock();\r\n            this._tooltipTextBlock.scaleY = 3;\r\n            this._tooltipTextBlock.color = \"white\";\r\n            this._tooltipTextBlock.fontSize = 130;\r\n            this._tooltipTexture.addControl(this._tooltipTextBlock);\r\n\r\n            // Add hover action to tooltip\r\n            this._tooltipFade = new FadeInOutBehavior();\r\n            this._tooltipFade.delay = 500;\r\n            this._tooltipMesh.addBehavior(this._tooltipFade);\r\n            this._tooltipHoverObserver = this.onPointerEnterObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(true);\r\n                }\r\n            });\r\n            this._tooltipOutObserver = this.onPointerOutObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(false);\r\n                }\r\n            });\r\n        }\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.text = text;\r\n        }\r\n    }\r\n\r\n    public get tooltipText() {\r\n        if (this._tooltipTextBlock) {\r\n            return this._tooltipTextBlock.text;\r\n        }\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Gets or sets text for the button\r\n     */\r\n    public get text(): string {\r\n        return this._text;\r\n    }\r\n\r\n    public set text(value: string) {\r\n        if (this._text === value) {\r\n            return;\r\n        }\r\n\r\n        this._text = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image url for the button\r\n     */\r\n    public get imageUrl(): string {\r\n        return this._imageUrl;\r\n    }\r\n\r\n    public set imageUrl(value: string) {\r\n        if (this._imageUrl === value) {\r\n            return;\r\n        }\r\n\r\n        this._imageUrl = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets the back material used by this button\r\n     */\r\n    public get backMaterial(): StandardMaterial {\r\n        return this._backMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the front material used by this button\r\n     */\r\n    public get frontMaterial(): FluentButtonMaterial {\r\n        return this._frontMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the plate material used by this button\r\n     */\r\n    public get plateMaterial(): StandardMaterial {\r\n        return this._plateMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets a boolean indicating if this button shares its material with other HolographicButtons\r\n     */\r\n    public get shareMaterials(): boolean {\r\n        return this._shareMaterials;\r\n    }\r\n\r\n    /**\r\n     * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement\r\n     */\r\n    public set isBackplateVisible(isVisible: boolean) {\r\n        if (this.mesh && !!this._backMaterial) {\r\n            if (isVisible && !this._isBackplateVisible) {\r\n                this._backPlate.visibility = 1;\r\n            }\r\n            else if (!isVisible && this._isBackplateVisible) {\r\n                this._backPlate.visibility = 0;\r\n            }\r\n        }\r\n\r\n        this._isBackplateVisible = isVisible;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button\r\n     * @param name defines the control name\r\n     */\r\n    constructor(name?: string, shareMaterials = true) {\r\n        super(name);\r\n\r\n        this._shareMaterials = shareMaterials;\r\n\r\n        this.pointerEnterAnimation = () => {\r\n            this._frontMaterial.leftBlobEnable = true;\r\n            this._frontMaterial.rightBlobEnable = true;\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            this._frontMaterial.leftBlobEnable = false;\r\n            this._frontMaterial.rightBlobEnable = false;\r\n        };\r\n\r\n        this.pointerDownAnimation = () => {\r\n            if (this._frontPlate && !this._isNearPressed) {\r\n                this._frontPlate.scaling.z = this._frontPlateDepth * 0.2;\r\n                this._frontPlate.position = Vector3.Forward(this._frontPlate._scene.useRightHandedSystem).scale((this._frontPlateDepth - (0.2 * this._frontPlateDepth)) / 2);\r\n                this._textPlate.position = Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-(this._backPlateDepth + (0.2 * this._frontPlateDepth)) / 2);\r\n            }\r\n        };\r\n        this.pointerUpAnimation = () => {\r\n            if (this._frontPlate) {\r\n                this._frontPlate.scaling.z = this._frontPlateDepth;\r\n                this._frontPlate.position = Vector3.Forward(this._frontPlate._scene.useRightHandedSystem).scale((this._frontPlateDepth - this._frontPlateDepth) / 2);\r\n                this._textPlate.position = Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-(this._backPlateDepth + this._frontPlateDepth) / 2);\r\n            }\r\n        };\r\n\r\n        this.onPointerMoveObservable.add((position) => {\r\n            if (this._frontPlate && this._isNearPressed) {\r\n                const scale = Vector3.Zero();\r\n                if (this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {\r\n                    let interactionHeight = this._getInteractionHeight(position, this._backPlate.position) / scale.z;\r\n                    interactionHeight = Scalar.Clamp(interactionHeight - (this._backPlateDepth / 2), 0.2 * this._frontPlateDepth, this._frontPlateDepth);\r\n\r\n                    this._frontPlate.scaling.z = interactionHeight;\r\n                    this._frontPlate.position = Vector3.Forward(this._frontPlate._scene.useRightHandedSystem).scale((this._frontPlateDepth - interactionHeight) / 2);\r\n                    this._textPlate.position = Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-(this._backPlateDepth + interactionHeight) / 2);\r\n                }\r\n            }\r\n        });\r\n\r\n        this._pointerHoverObserver = this.onPointerMoveObservable.add((hoverPosition: Vector3) => {\r\n            this._frontMaterial.globalLeftIndexTipPosition = hoverPosition;\r\n        });\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"TouchHolographicButton\";\r\n    }\r\n\r\n    private _rebuildContent(): void {\r\n        this._disposeFacadeTexture();\r\n\r\n        let panel = new StackPanel();\r\n        panel.isVertical = true;\r\n\r\n        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {\r\n            if (this._imageUrl) {\r\n                let image = new Image();\r\n                image.source = this._imageUrl;\r\n                image.paddingTop = \"40px\";\r\n                image.height = \"180px\";\r\n                image.width = \"100px\";\r\n                image.paddingBottom = \"40px\";\r\n                panel.addControl(image);\r\n            }\r\n        }\r\n\r\n        if (this._text) {\r\n            let text = new TextBlock();\r\n            text.text = this._text;\r\n            text.color = \"white\";\r\n            text.height = \"30px\";\r\n            text.fontSize = 24;\r\n            panel.addControl(text);\r\n        }\r\n\r\n        this.content = panel;\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        this.name = this.name ?? \"TouchHolographicButton\";\r\n        const collisionMesh = CreateBox(`${this.name}_collisionMesh`, {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: this._frontPlateDepth,\r\n        }, scene);\r\n        collisionMesh.isPickable = true;\r\n        collisionMesh.isNearPickable = true;\r\n        collisionMesh.visibility = 0;\r\n        collisionMesh.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);\r\n\r\n        SceneLoader.ImportMeshAsync(\r\n            undefined,\r\n            TouchHolographicButton.MODEL_BASE_URL,\r\n            TouchHolographicButton.MODEL_FILENAME,\r\n            scene)\r\n            .then((result) => {\r\n                var importedFrontPlate = result.meshes[1];\r\n                importedFrontPlate.name = `${this.name}_frontPlate`;\r\n                importedFrontPlate.isPickable = false;\r\n                importedFrontPlate.scaling.z = this._frontPlateDepth;\r\n                importedFrontPlate.parent = collisionMesh;\r\n                if (!!this._frontMaterial) {\r\n                    importedFrontPlate.material = this._frontMaterial;\r\n                }\r\n                this._frontPlate = importedFrontPlate;\r\n            });\r\n\r\n        this._backPlate = CreateBox(\r\n            `${this.name}_backPlate`,\r\n            {\r\n                width: 1.0,\r\n                height: 1.0,\r\n                depth: this._backPlateDepth,\r\n            },\r\n            scene\r\n        );\r\n\r\n        this._backPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._backPlateDepth / 2);\r\n        this._backPlate.isPickable = false;\r\n\r\n        this._textPlate = <Mesh>super._createNode(scene);\r\n        this._textPlate.name = `${this.name}_textPlate`;\r\n        this._textPlate.isPickable = false;\r\n        this._textPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);\r\n\r\n        this._backPlate.addChild(collisionMesh);\r\n        this._backPlate.addChild(this._textPlate);\r\n\r\n        this.collisionMesh = collisionMesh;\r\n        this.collidableFrontDirection = this._backPlate.forward.negate(); // Mesh is facing the wrong way\r\n\r\n        return this._backPlate;\r\n    }\r\n\r\n    protected _applyFacade(facadeTexture: AdvancedDynamicTexture) {\r\n        this._plateMaterial.emissiveTexture = facadeTexture;\r\n        this._plateMaterial.opacityTexture = facadeTexture;\r\n        this._plateMaterial.diffuseColor = new Color3(0.4, 0.4, 0.4);\r\n    }\r\n\r\n    private _createBackMaterial(mesh: Mesh) {\r\n        this._backMaterial = new StandardMaterial(this.name + \"Back Material\", mesh.getScene());\r\n        this._backMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5);\r\n    }\r\n\r\n    private _createFrontMaterial(mesh: Mesh) {\r\n        this._frontMaterial = new FluentButtonMaterial(this.name + \"Front Material\", mesh.getScene());\r\n    }\r\n\r\n    private _createPlateMaterial(mesh: Mesh) {\r\n        this._plateMaterial = new StandardMaterial(this.name + \"Plate Material\", mesh.getScene());\r\n        this._plateMaterial.specularColor = Color3.Black();\r\n    }\r\n\r\n    protected _affectMaterial(mesh: Mesh) {\r\n        if (this._shareMaterials) {\r\n            // Back\r\n            if (!this._host._touchSharedMaterials[\"backFluentMaterial\"]) {\r\n                this._createBackMaterial(mesh);\r\n                this._host._touchSharedMaterials[\"backFluentMaterial\"] = this._backMaterial;\r\n            } else {\r\n                this._backMaterial = this._host._touchSharedMaterials[\"backFluentMaterial\"] as StandardMaterial;\r\n            }\r\n\r\n            // Front\r\n            if (!this._host._touchSharedMaterials[\"frontFluentMaterial\"]) {\r\n                this._createFrontMaterial(mesh);\r\n                this._host._touchSharedMaterials[\"frontFluentMaterial\"] = this._frontMaterial;\r\n            } else {\r\n                this._frontMaterial = this._host._touchSharedMaterials[\"frontFluentMaterial\"] as FluentButtonMaterial;\r\n            }\r\n        } else {\r\n            this._createBackMaterial(mesh);\r\n            this._createFrontMaterial(mesh);\r\n        }\r\n\r\n        this._createPlateMaterial(mesh);\r\n        this._backPlate.material = this._backMaterial;\r\n        this._textPlate.material = this._plateMaterial;\r\n\r\n        if (!this._isBackplateVisible) {\r\n            this._backPlate.visibility = 0;\r\n        }\r\n        if (!!this._frontPlate) {\r\n            this._frontPlate.material = this._frontMaterial;\r\n        }\r\n\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose(); // will dispose main mesh ie. back plate\r\n\r\n        this._disposeTooltip();\r\n        this.onPointerMoveObservable.remove(this._pointerHoverObserver);\r\n\r\n        if (!this.shareMaterials) {\r\n            this._backMaterial.dispose();\r\n            this._frontMaterial.dispose();\r\n            this._plateMaterial.dispose();\r\n\r\n            if (this._pickedPointObserver) {\r\n                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);\r\n                this._pickedPointObserver = null;\r\n            }\r\n        }\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"touchHolographicButton.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/touchHolographicButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { Nullable } from \"@babylonjs/core/types\";\r\nimport { Observer } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { StandardMaterial } from \"@babylonjs/core/Materials/standardMaterial\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { CreatePlane } from \"@babylonjs/core/Meshes/Builders/planeBuilder\";\r\nimport { CreateBox } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { FadeInOutBehavior } from \"@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { FluentMaterial } from \"../materials/fluent/fluentMaterial\";\r\nimport { FluentButtonMaterial } from \"../materials/fluentButton/fluentButtonMaterial\";\r\nimport { StackPanel } from \"../../2D/controls/stackPanel\";\r\nimport { Image } from \"../../2D/controls/image\";\r\nimport { TextBlock } from \"../../2D/controls/textBlock\";\r\nimport { AdvancedDynamicTexture } from \"../../2D/advancedDynamicTexture\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { Color3 } from \"@babylonjs/core/Maths/math.color\";\r\nimport { TouchButton3D } from \"./touchButton3D\";\r\nimport { AbstractMesh } from \"@babylonjs/core/Meshes/abstractMesh\";\r\nimport { SceneLoader } from \"@babylonjs/core/Loading/sceneLoader\";\r\nimport { DomManagement } from \"@babylonjs/core/Misc/domManagement\";\r\nimport { Scalar } from \"@babylonjs/core/Maths/math.scalar\";\r\n\r\n/**\r\n * Class used to create a holographic button in 3D\r\n * @since 5.0.0\r\n */\r\nexport class TouchHolographicButton extends TouchButton3D {\r\n    /**\r\n     * Base Url for the button model.\r\n     */\r\n    public static MODEL_BASE_URL: string = \"https://assets.babylonjs.com/meshes/MRTK/\";\r\n    /**\r\n     * File name for the button model.\r\n     */\r\n    public static MODEL_FILENAME: string = \"mrtk-fluent-button.glb\";\r\n\r\n    private _backPlate: Mesh;\r\n    private _textPlate: Mesh;\r\n    private _frontPlate: AbstractMesh;\r\n    private _text: string;\r\n    private _imageUrl: string;\r\n    private _shareMaterials = true;\r\n    private _isBackplateVisible = true;\r\n    private _frontMaterial: FluentButtonMaterial;\r\n    private _backMaterial: FluentMaterial;\r\n    private _plateMaterial: StandardMaterial;\r\n    private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;\r\n    private _pointerHoverObserver: Nullable<Observer<Vector3>>;\r\n    private _frontPlateDepth = 0.5;\r\n    private _backPlateDepth = 0.04;\r\n    private _backplateColor = new Color3(0.08, 0.15, 0.55);\r\n    private _backplateToggledColor = new Color3(0.25, 0.4, 0.95);\r\n\r\n    // Tooltip\r\n    private _tooltipFade: Nullable<FadeInOutBehavior>;\r\n    private _tooltipTextBlock: Nullable<TextBlock>;\r\n    private _tooltipTexture: Nullable<AdvancedDynamicTexture>;\r\n    private _tooltipMesh: Nullable<Mesh>;\r\n    private _tooltipHoverObserver: Nullable<Observer<Control3D>>;\r\n    private _tooltipOutObserver: Nullable<Observer<Control3D>>;\r\n\r\n    private _disposeTooltip() {\r\n        this._tooltipFade = null;\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.dispose();\r\n        }\r\n        if (this._tooltipTexture) {\r\n            this._tooltipTexture.dispose();\r\n        }\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.dispose();\r\n        }\r\n        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);\r\n        this.onPointerOutObservable.remove(this._tooltipOutObserver);\r\n    }\r\n\r\n    /**\r\n     * Rendering ground id of all the mesh in the button\r\n     */\r\n    public set renderingGroupId(id: number) {\r\n        this._backPlate.renderingGroupId = id;\r\n        this._textPlate.renderingGroupId = id;\r\n        this._frontPlate.renderingGroupId = id;\r\n\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.renderingGroupId = id;\r\n        }\r\n    }\r\n    public get renderingGroupId(): number {\r\n        return this._backPlate.renderingGroupId;\r\n    }\r\n\r\n    /**\r\n     * Gets the mesh used to render this control\r\n     */\r\n    public get mesh(): Nullable<AbstractMesh> {\r\n        return this._backPlate as AbstractMesh;\r\n    }\r\n\r\n    /**\r\n     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)\r\n     */\r\n    public set tooltipText(text: Nullable<string>) {\r\n        if (!text) {\r\n            this._disposeTooltip();\r\n            return;\r\n        }\r\n        if (!this._tooltipFade) {\r\n            const rightHandedScene = this._backPlate._scene.useRightHandedSystem;\r\n            // Create tooltip with mesh and text\r\n            this._tooltipMesh = CreatePlane(\"\", { size: 1 }, this._backPlate._scene);\r\n            var tooltipBackground = CreatePlane(\"\", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);\r\n            var mat = new StandardMaterial(\"\", this._backPlate._scene);\r\n            mat.diffuseColor = Color3.FromHexString(\"#212121\");\r\n            tooltipBackground.material = mat;\r\n            tooltipBackground.isPickable = false;\r\n            this._tooltipMesh.addChild(tooltipBackground);\r\n            tooltipBackground.position = Vector3.Forward(rightHandedScene).scale(0.05);\r\n            this._tooltipMesh.scaling.y = 1 / 3;\r\n            this._tooltipMesh.position = Vector3.Up().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));\r\n            this._tooltipMesh.isPickable = false;\r\n            this._tooltipMesh.parent = this._backPlate;\r\n\r\n            // Create text texture for the tooltip\r\n            this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);\r\n            this._tooltipTextBlock = new TextBlock();\r\n            this._tooltipTextBlock.scaleY = 3;\r\n            this._tooltipTextBlock.color = \"white\";\r\n            this._tooltipTextBlock.fontSize = 130;\r\n            this._tooltipTexture.addControl(this._tooltipTextBlock);\r\n\r\n            // Add hover action to tooltip\r\n            this._tooltipFade = new FadeInOutBehavior();\r\n            this._tooltipFade.delay = 500;\r\n            this._tooltipMesh.addBehavior(this._tooltipFade);\r\n            this._tooltipHoverObserver = this.onPointerEnterObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(true);\r\n                }\r\n            });\r\n            this._tooltipOutObserver = this.onPointerOutObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(false);\r\n                }\r\n            });\r\n        }\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.text = text;\r\n        }\r\n    }\r\n\r\n    public get tooltipText() {\r\n        if (this._tooltipTextBlock) {\r\n            return this._tooltipTextBlock.text;\r\n        }\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Gets or sets text for the button\r\n     */\r\n    public get text(): string {\r\n        return this._text;\r\n    }\r\n\r\n    public set text(value: string) {\r\n        if (this._text === value) {\r\n            return;\r\n        }\r\n\r\n        this._text = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image url for the button\r\n     */\r\n    public get imageUrl(): string {\r\n        return this._imageUrl;\r\n    }\r\n\r\n    public set imageUrl(value: string) {\r\n        if (this._imageUrl === value) {\r\n            return;\r\n        }\r\n\r\n        this._imageUrl = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets the back material used by this button\r\n     */\r\n    public get backMaterial(): FluentMaterial {\r\n        return this._backMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the front material used by this button\r\n     */\r\n    public get frontMaterial(): FluentButtonMaterial {\r\n        return this._frontMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the plate material used by this button\r\n     */\r\n    public get plateMaterial(): StandardMaterial {\r\n        return this._plateMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets a boolean indicating if this button shares its material with other HolographicButtons\r\n     */\r\n    public get shareMaterials(): boolean {\r\n        return this._shareMaterials;\r\n    }\r\n\r\n    /**\r\n     * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement\r\n     */\r\n    public set isBackplateVisible(isVisible: boolean) {\r\n        if (this.mesh && !!this._backMaterial) {\r\n            if (isVisible && !this._isBackplateVisible) {\r\n                this._backPlate.visibility = 1;\r\n            }\r\n            else if (!isVisible && this._isBackplateVisible) {\r\n                this._backPlate.visibility = 0;\r\n            }\r\n        }\r\n\r\n        this._isBackplateVisible = isVisible;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button\r\n     * @param name defines the control name\r\n     */\r\n    constructor(name?: string, shareMaterials = true) {\r\n        super(name);\r\n\r\n        this._shareMaterials = shareMaterials;\r\n\r\n        this.pointerEnterAnimation = () => {\r\n            this._frontMaterial.leftBlobEnable = true;\r\n            this._frontMaterial.rightBlobEnable = true;\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            this._frontMaterial.leftBlobEnable = false;\r\n            this._frontMaterial.rightBlobEnable = false;\r\n        };\r\n\r\n        this.pointerDownAnimation = () => {\r\n            if (this._frontPlate && !this.isActiveNearInteraction) {\r\n                this._frontPlate.scaling.z = this._frontPlateDepth * 0.2;\r\n                this._frontPlate.position = Vector3.Forward(this._frontPlate._scene.useRightHandedSystem).scale((this._frontPlateDepth - (0.2 * this._frontPlateDepth)) / 2);\r\n                this._textPlate.position = Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-(this._backPlateDepth + (0.2 * this._frontPlateDepth)) / 2);\r\n            }\r\n        };\r\n        this.pointerUpAnimation = () => {\r\n            if (this._frontPlate) {\r\n                this._frontPlate.scaling.z = this._frontPlateDepth;\r\n                this._frontPlate.position = Vector3.Forward(this._frontPlate._scene.useRightHandedSystem).scale((this._frontPlateDepth - this._frontPlateDepth) / 2);\r\n                this._textPlate.position = Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-(this._backPlateDepth + this._frontPlateDepth) / 2);\r\n            }\r\n        };\r\n\r\n        this.onPointerMoveObservable.add((position) => {\r\n            if (this._frontPlate && this.isActiveNearInteraction) {\r\n                const scale = Vector3.Zero();\r\n                if (this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {\r\n                    let interactionHeight = this._getInteractionHeight(position, this._backPlate.getAbsolutePosition()) / scale.z;\r\n                    interactionHeight = Scalar.Clamp(interactionHeight - (this._backPlateDepth / 2), 0.2 * this._frontPlateDepth, this._frontPlateDepth);\r\n\r\n                    this._frontPlate.scaling.z = interactionHeight;\r\n                    this._frontPlate.position = Vector3.Forward(this._frontPlate._scene.useRightHandedSystem).scale((this._frontPlateDepth - interactionHeight) / 2);\r\n                    this._textPlate.position = Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-(this._backPlateDepth + interactionHeight) / 2);\r\n                }\r\n            }\r\n        });\r\n\r\n        this._pointerHoverObserver = this.onPointerMoveObservable.add((hoverPosition: Vector3) => {\r\n            this._frontMaterial.globalLeftIndexTipPosition = hoverPosition;\r\n        });\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"TouchHolographicButton\";\r\n    }\r\n\r\n    private _rebuildContent(): void {\r\n        this._disposeFacadeTexture();\r\n\r\n        let panel = new StackPanel();\r\n        panel.isVertical = true;\r\n\r\n        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {\r\n            if (this._imageUrl) {\r\n                let image = new Image();\r\n                image.source = this._imageUrl;\r\n                image.paddingTop = \"40px\";\r\n                image.height = \"180px\";\r\n                image.width = \"100px\";\r\n                image.paddingBottom = \"40px\";\r\n                panel.addControl(image);\r\n            }\r\n        }\r\n\r\n        if (this._text) {\r\n            let text = new TextBlock();\r\n            text.text = this._text;\r\n            text.color = \"white\";\r\n            text.height = \"30px\";\r\n            text.fontSize = 24;\r\n            panel.addControl(text);\r\n        }\r\n\r\n        this.content = panel;\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        this.name = this.name ?? \"TouchHolographicButton\";\r\n        const collisionMesh = CreateBox(`${this.name}_collisionMesh`, {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: this._frontPlateDepth,\r\n        }, scene);\r\n        collisionMesh.isPickable = true;\r\n        collisionMesh.isNearPickable = true;\r\n        collisionMesh.visibility = 0;\r\n        collisionMesh.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);\r\n\r\n        SceneLoader.ImportMeshAsync(\r\n            undefined,\r\n            TouchHolographicButton.MODEL_BASE_URL,\r\n            TouchHolographicButton.MODEL_FILENAME,\r\n            scene)\r\n            .then((result) => {\r\n                let alphaMesh = CreateBox(\"${this.name}_alphaMesh\", {\r\n                    width: 1.0,\r\n                    height: 1.0,\r\n                    depth: 1.0,\r\n                }, scene);\r\n                alphaMesh.isPickable = false;\r\n                alphaMesh.material = new StandardMaterial(\"${this.name}_alphaMesh_material\", scene);\r\n                alphaMesh.material.alpha = 0.15;\r\n\r\n                var importedFrontPlate = result.meshes[1];\r\n                importedFrontPlate.name = `${this.name}_frontPlate`;\r\n                importedFrontPlate.isPickable = false;\r\n                importedFrontPlate.scaling.z = this._frontPlateDepth;\r\n                alphaMesh.parent = importedFrontPlate;\r\n                importedFrontPlate.parent = collisionMesh;\r\n                if (!!this._frontMaterial) {\r\n                    importedFrontPlate.material = this._frontMaterial;\r\n                }\r\n                this._frontPlate = importedFrontPlate;\r\n            });\r\n\r\n        this._backPlate = CreateBox(\r\n            `${this.name}_backPlate`,\r\n            {\r\n                width: 1.0,\r\n                height: 1.0,\r\n                depth: this._backPlateDepth,\r\n            },\r\n            scene\r\n        );\r\n\r\n        this._backPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(this._backPlateDepth / 2);\r\n        this._backPlate.isPickable = false;\r\n\r\n        this._textPlate = <Mesh>super._createNode(scene);\r\n        this._textPlate.name = `${this.name}_textPlate`;\r\n        this._textPlate.isPickable = false;\r\n        this._textPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);\r\n\r\n        this._backPlate.addChild(collisionMesh);\r\n        this._backPlate.addChild(this._textPlate);\r\n\r\n        let tn = new TransformNode(`{this.name}_root`, scene);\r\n        this._backPlate.setParent(tn);\r\n\r\n        this.collisionMesh = collisionMesh;\r\n        this.collidableFrontDirection = this._backPlate.forward.negate(); // Mesh is facing the wrong way\r\n\r\n        return tn;\r\n    }\r\n\r\n    protected _applyFacade(facadeTexture: AdvancedDynamicTexture) {\r\n        this._plateMaterial.emissiveTexture = facadeTexture;\r\n        this._plateMaterial.opacityTexture = facadeTexture;\r\n        this._plateMaterial.diffuseColor = new Color3(0.4, 0.4, 0.4);\r\n    }\r\n\r\n    private _createBackMaterial(mesh: Mesh) {\r\n        this._backMaterial = new FluentMaterial(this.name + \"backPlateMaterial\", mesh.getScene());\r\n        this._backMaterial.albedoColor = this._backplateColor;\r\n        this._backMaterial.renderBorders = true;\r\n        this._backMaterial.renderHoverLight = false;\r\n    }\r\n\r\n    private _createFrontMaterial(mesh: Mesh) {\r\n        this._frontMaterial = new FluentButtonMaterial(this.name + \"Front Material\", mesh.getScene());\r\n    }\r\n\r\n    private _createPlateMaterial(mesh: Mesh) {\r\n        this._plateMaterial = new StandardMaterial(this.name + \"Plate Material\", mesh.getScene());\r\n        this._plateMaterial.specularColor = Color3.Black();\r\n    }\r\n\r\n    protected _onToggle(newState: boolean) {\r\n        if (this._backMaterial) {\r\n            if (newState) {\r\n                this._backMaterial.albedoColor = this._backplateToggledColor;\r\n            }\r\n            else {\r\n                this._backMaterial.albedoColor = this._backplateColor;\r\n            }\r\n        }\r\n\r\n        super._onToggle(newState);\r\n    }\r\n\r\n    protected _affectMaterial(mesh: Mesh) {\r\n        if (this._shareMaterials) {\r\n            // Back\r\n            if (!this._host._touchSharedMaterials[\"backFluentMaterial\"]) {\r\n                this._createBackMaterial(mesh);\r\n                this._host._touchSharedMaterials[\"backFluentMaterial\"] = this._backMaterial;\r\n            } else {\r\n                this._backMaterial = this._host._touchSharedMaterials[\"backFluentMaterial\"] as FluentMaterial;\r\n            }\r\n\r\n            // Front\r\n            if (!this._host._touchSharedMaterials[\"frontFluentMaterial\"]) {\r\n                this._createFrontMaterial(mesh);\r\n                this._host._touchSharedMaterials[\"frontFluentMaterial\"] = this._frontMaterial;\r\n            } else {\r\n                this._frontMaterial = this._host._touchSharedMaterials[\"frontFluentMaterial\"] as FluentButtonMaterial;\r\n            }\r\n        } else {\r\n            this._createBackMaterial(mesh);\r\n            this._createFrontMaterial(mesh);\r\n        }\r\n\r\n        this._createPlateMaterial(mesh);\r\n        this._backPlate.material = this._backMaterial;\r\n        this._textPlate.material = this._plateMaterial;\r\n\r\n        if (!this._isBackplateVisible) {\r\n            this._backPlate.visibility = 0;\r\n        }\r\n        if (!!this._frontPlate) {\r\n            this._frontPlate.material = this._frontMaterial;\r\n        }\r\n\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose(); // will dispose main mesh ie. back plate\r\n\r\n        this._disposeTooltip();\r\n        this.onPointerMoveObservable.remove(this._pointerHoverObserver);\r\n\r\n        if (!this.shareMaterials) {\r\n            this._backMaterial.dispose();\r\n            this._frontMaterial.dispose();\r\n            this._plateMaterial.dispose();\r\n\r\n            if (this._pickedPointObserver) {\r\n                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);\r\n                this._pickedPointObserver = null;\r\n            }\r\n        }\r\n    }\r\n}\r\n"]}

package/3D/controls/touchHolographicMenu.js

@@ -41,7 +41,7 @@ var TouchHolographicMenu = /** @class */ (function (_super) {
         configurable: true
     });
     TouchHolographicMenu.prototype._createNode = function (scene) {
-        var node = new Mesh("menu_" + this.name, scene);
+        var node = new Mesh("menu_".concat(this.name), scene);
         this._backPlate = CreateBox("backPlate" + this.name, { size: 1 }, scene);
         this._backPlate.parent = node;
         return node;