@babylonjs/gui 5.0.0-beta.9 → 5.0.0-rc.10

package/3D/controls/touchHolographicButton.js

@@ -1,433 +1,446 @@
-import { __extends } from "tslib";
-import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
-import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.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";
-import { TextBlock } from "../../2D/controls/textBlock.js";
-import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture.js";
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { TouchButton3D } from "./touchButton3D.js";
-import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
-import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
-import { Scalar } from "@babylonjs/core/Maths/math.scalar.js";
-/**
- * Class used to create a holographic button in 3D
- * @since 5.0.0
- */
-var TouchHolographicButton = /** @class */ (function (_super) {
-    __extends(TouchHolographicButton, _super);
-    /**
-     * Creates a new button
-     * @param name defines the control name
-     */
-    function TouchHolographicButton(name, shareMaterials) {
-        if (shareMaterials === void 0) { shareMaterials = true; }
-        var _this = _super.call(this, name) || this;
-        _this._shareMaterials = true;
-        _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;
-            _this._frontMaterial.rightBlobEnable = true;
-        };
-        _this.pointerOutAnimation = function () {
-            _this._frontMaterial.leftBlobEnable = false;
-            _this._frontMaterial.rightBlobEnable = false;
-        };
-        _this.pointerDownAnimation = function () {
-            if (_this._frontPlate && !_this._isNearPressed) {
-                _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);
-            }
-        };
-        _this.pointerUpAnimation = function () {
-            if (_this._frontPlate) {
-                _this._frontPlate.scaling.z = _this._frontPlateDepth;
-                _this._frontPlate.position = Vector3.Forward(_this._frontPlate._scene.useRightHandedSystem).scale((_this._frontPlateDepth - _this._frontPlateDepth) / 2);
-                _this._textPlate.position = Vector3.Forward(_this._textPlate._scene.useRightHandedSystem).scale(-(_this._backPlateDepth + _this._frontPlateDepth) / 2);
-            }
-        };
-        _this.onPointerMoveObservable.add(function (position) {
-            if (_this._frontPlate && _this._isNearPressed) {
-                var scale = Vector3.Zero();
-                if (_this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {
-                    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);
-                    _this._textPlate.position = Vector3.Forward(_this._textPlate._scene.useRightHandedSystem).scale(-(_this._backPlateDepth + interactionHeight) / 2);
-                }
-            }
-        });
-        _this._pointerHoverObserver = _this.onPointerMoveObservable.add(function (hoverPosition) {
-            _this._frontMaterial.globalLeftIndexTipPosition = hoverPosition;
-        });
-        return _this;
-    }
-    TouchHolographicButton.prototype._disposeTooltip = function () {
-        this._tooltipFade = null;
-        if (this._tooltipTextBlock) {
-            this._tooltipTextBlock.dispose();
-        }
-        if (this._tooltipTexture) {
-            this._tooltipTexture.dispose();
-        }
-        if (this._tooltipMesh) {
-            this._tooltipMesh.dispose();
-        }
-        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
-        this.onPointerOutObservable.remove(this._tooltipOutObserver);
-    };
-    Object.defineProperty(TouchHolographicButton.prototype, "renderingGroupId", {
-        get: function () {
-            return this._backPlate.renderingGroupId;
-        },
-        /**
-         * Rendering ground id of all the mesh in the button
-         */
-        set: function (id) {
-            this._backPlate.renderingGroupId = id;
-            this._textPlate.renderingGroupId = id;
-            this._frontPlate.renderingGroupId = id;
-            if (this._tooltipMesh) {
-                this._tooltipMesh.renderingGroupId = id;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "tooltipText", {
-        get: function () {
-            if (this._tooltipTextBlock) {
-                return this._tooltipTextBlock.text;
-            }
-            return null;
-        },
-        /**
-         * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
-         */
-        set: function (text) {
-            var _this = this;
-            if (!text) {
-                this._disposeTooltip();
-                return;
-            }
-            if (!this._tooltipFade) {
-                var rightHandedScene = this._backPlate._scene.useRightHandedSystem;
-                // Create tooltip with mesh and text
-                this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
-                var tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
-                var mat = new StandardMaterial("", this._backPlate._scene);
-                mat.diffuseColor = Color3.FromHexString("#212121");
-                tooltipBackground.material = mat;
-                tooltipBackground.isPickable = false;
-                this._tooltipMesh.addChild(tooltipBackground);
-                tooltipBackground.position = Vector3.Forward(rightHandedScene).scale(0.05);
-                this._tooltipMesh.scaling.y = 1 / 3;
-                this._tooltipMesh.position = Vector3.Up().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));
-                this._tooltipMesh.isPickable = false;
-                this._tooltipMesh.parent = this._backPlate;
-                // Create text texture for the tooltip
-                this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);
-                this._tooltipTextBlock = new TextBlock();
-                this._tooltipTextBlock.scaleY = 3;
-                this._tooltipTextBlock.color = "white";
-                this._tooltipTextBlock.fontSize = 130;
-                this._tooltipTexture.addControl(this._tooltipTextBlock);
-                // Add hover action to tooltip
-                this._tooltipFade = new FadeInOutBehavior();
-                this._tooltipFade.delay = 500;
-                this._tooltipMesh.addBehavior(this._tooltipFade);
-                this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
-                    if (_this._tooltipFade) {
-                        _this._tooltipFade.fadeIn(true);
-                    }
-                });
-                this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
-                    if (_this._tooltipFade) {
-                        _this._tooltipFade.fadeIn(false);
-                    }
-                });
-            }
-            if (this._tooltipTextBlock) {
-                this._tooltipTextBlock.text = text;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "text", {
-        /**
-         * Gets or sets text for the button
-         */
-        get: function () {
-            return this._text;
-        },
-        set: function (value) {
-            if (this._text === value) {
-                return;
-            }
-            this._text = value;
-            this._rebuildContent();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "imageUrl", {
-        /**
-         * Gets or sets the image url for the button
-         */
-        get: function () {
-            return this._imageUrl;
-        },
-        set: function (value) {
-            if (this._imageUrl === value) {
-                return;
-            }
-            this._imageUrl = value;
-            this._rebuildContent();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "backMaterial", {
-        /**
-         * Gets the back material used by this button
-         */
-        get: function () {
-            return this._backMaterial;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "frontMaterial", {
-        /**
-         * Gets the front material used by this button
-         */
-        get: function () {
-            return this._frontMaterial;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "plateMaterial", {
-        /**
-         * Gets the plate material used by this button
-         */
-        get: function () {
-            return this._plateMaterial;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "shareMaterials", {
-        /**
-         * Gets a boolean indicating if this button shares its material with other HolographicButtons
-         */
-        get: function () {
-            return this._shareMaterials;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TouchHolographicButton.prototype, "isBackplateVisible", {
-        /**
-         * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
-         */
-        set: function (isVisible) {
-            if (this.mesh && !!this._backMaterial) {
-                if (isVisible && !this._isBackplateVisible) {
-                    this._backPlate.visibility = 1;
-                }
-                else if (!isVisible && this._isBackplateVisible) {
-                    this._backPlate.visibility = 0;
-                }
-            }
-            this._isBackplateVisible = isVisible;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    TouchHolographicButton.prototype._getTypeName = function () {
-        return "TouchHolographicButton";
-    };
-    TouchHolographicButton.prototype._rebuildContent = function () {
-        this._disposeFacadeTexture();
-        var panel = new StackPanel();
-        panel.isVertical = true;
-        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
-            if (this._imageUrl) {
-                var image = new Image();
-                image.source = this._imageUrl;
-                image.paddingTop = "40px";
-                image.height = "180px";
-                image.width = "100px";
-                image.paddingBottom = "40px";
-                panel.addControl(image);
-            }
-        }
-        if (this._text) {
-            var text = new TextBlock();
-            text.text = this._text;
-            text.color = "white";
-            text.height = "30px";
-            text.fontSize = 24;
-            panel.addControl(text);
-        }
-        this.content = panel;
-    };
-    // Mesh association
-    TouchHolographicButton.prototype._createNode = function (scene) {
-        var _this = this;
-        var _a;
-        this.name = (_a = this.name) !== null && _a !== void 0 ? _a : "TouchHolographicButton";
-        var collisionMesh = CreateBox("".concat(this.name, "_collisionMesh"), {
-            width: 1.0,
-            height: 1.0,
-            depth: this._frontPlateDepth,
-        }, scene);
-        collisionMesh.isPickable = true;
-        collisionMesh.isNearPickable = true;
-        collisionMesh.visibility = 0;
-        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 = "".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("".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.isPickable = false;
-        this._textPlate = _super.prototype._createNode.call(this, scene);
-        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);
-        this.collisionMesh = collisionMesh;
-        this.collidableFrontDirection = this._backPlate.forward.negate(); // Mesh is facing the wrong way
-        return this._backPlate;
-    };
-    TouchHolographicButton.prototype._applyFacade = function (facadeTexture) {
-        this._plateMaterial.emissiveTexture = facadeTexture;
-        this._plateMaterial.opacityTexture = facadeTexture;
-        this._plateMaterial.diffuseColor = new Color3(0.4, 0.4, 0.4);
-    };
-    TouchHolographicButton.prototype._createBackMaterial = function (mesh) {
-        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());
-    };
-    TouchHolographicButton.prototype._createPlateMaterial = function (mesh) {
-        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
-            if (!this._host._touchSharedMaterials["backFluentMaterial"]) {
-                this._createBackMaterial(mesh);
-                this._host._touchSharedMaterials["backFluentMaterial"] = this._backMaterial;
-            }
-            else {
-                this._backMaterial = this._host._touchSharedMaterials["backFluentMaterial"];
-            }
-            // Front
-            if (!this._host._touchSharedMaterials["frontFluentMaterial"]) {
-                this._createFrontMaterial(mesh);
-                this._host._touchSharedMaterials["frontFluentMaterial"] = this._frontMaterial;
-            }
-            else {
-                this._frontMaterial = this._host._touchSharedMaterials["frontFluentMaterial"];
-            }
-        }
-        else {
-            this._createBackMaterial(mesh);
-            this._createFrontMaterial(mesh);
-        }
-        this._createPlateMaterial(mesh);
-        this._backPlate.material = this._backMaterial;
-        this._textPlate.material = this._plateMaterial;
-        if (!this._isBackplateVisible) {
-            this._backPlate.visibility = 0;
-        }
-        if (!!this._frontPlate) {
-            this._frontPlate.material = this._frontMaterial;
-        }
-        this._rebuildContent();
-    };
-    /**
-     * Releases all associated resources
-     */
-    TouchHolographicButton.prototype.dispose = function () {
-        _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
-        this._disposeTooltip();
-        this.onPointerMoveObservable.remove(this._pointerHoverObserver);
-        if (!this.shareMaterials) {
-            this._backMaterial.dispose();
-            this._frontMaterial.dispose();
-            this._plateMaterial.dispose();
-            if (this._pickedPointObserver) {
-                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
-                this._pickedPointObserver = null;
-            }
-        }
-    };
-    /**
-     * Base Url for the button model.
-     */
-    TouchHolographicButton.MODEL_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
-    /**
-     * File name for the button model.
-     */
-    TouchHolographicButton.MODEL_FILENAME = "mrtk-fluent-button.glb";
-    return TouchHolographicButton;
-}(TouchButton3D));
-export { TouchHolographicButton };
+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";
+import { FluentButtonMaterial } from "../materials/fluentButton/fluentButtonMaterial";
+import { StackPanel } from "../../2D/controls/stackPanel";
+import { Image } from "../../2D/controls/image";
+import { TextBlock } from "../../2D/controls/textBlock";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { TouchButton3D } from "./touchButton3D";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
+import { Scalar } from "@babylonjs/core/Maths/math.scalar.js";
+/**
+ * Class used to create a holographic button in 3D
+ * @since 5.0.0
+ */
+var TouchHolographicButton = /** @class */ (function (_super) {
+    __extends(TouchHolographicButton, _super);
+    /**
+     * Creates a new button
+     * @param name defines the control name
+     * @param shareMaterials
+     */
+    function TouchHolographicButton(name, shareMaterials) {
+        if (shareMaterials === void 0) { shareMaterials = true; }
+        var _this = _super.call(this, name) || this;
+        _this._shareMaterials = true;
+        _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;
+            _this._frontMaterial.rightBlobEnable = true;
+        };
+        _this.pointerOutAnimation = function () {
+            _this._frontMaterial.leftBlobEnable = false;
+            _this._frontMaterial.rightBlobEnable = false;
+        };
+        _this.pointerDownAnimation = function () {
+            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);
+            }
+        };
+        _this.pointerUpAnimation = function () {
+            if (_this._frontPlate) {
+                _this._frontPlate.scaling.z = _this._frontPlateDepth;
+                _this._frontPlate.position = Vector3.Forward(_this._frontPlate._scene.useRightHandedSystem).scale((_this._frontPlateDepth - _this._frontPlateDepth) / 2);
+                _this._textPlate.position = Vector3.Forward(_this._textPlate._scene.useRightHandedSystem).scale(-(_this._backPlateDepth + _this._frontPlateDepth) / 2);
+            }
+        };
+        _this.onPointerMoveObservable.add(function (position) {
+            if (_this._frontPlate && _this.isActiveNearInteraction) {
+                var scale = Vector3.Zero();
+                if (_this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {
+                    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);
+                    _this._textPlate.position = Vector3.Forward(_this._textPlate._scene.useRightHandedSystem).scale(-(_this._backPlateDepth + interactionHeight) / 2);
+                }
+            }
+        });
+        _this._pointerHoverObserver = _this.onPointerMoveObservable.add(function (hoverPosition) {
+            _this._frontMaterial.globalLeftIndexTipPosition = hoverPosition;
+        });
+        return _this;
+    }
+    TouchHolographicButton.prototype._disposeTooltip = function () {
+        this._tooltipFade = null;
+        if (this._tooltipTextBlock) {
+            this._tooltipTextBlock.dispose();
+        }
+        if (this._tooltipTexture) {
+            this._tooltipTexture.dispose();
+        }
+        if (this._tooltipMesh) {
+            this._tooltipMesh.dispose();
+        }
+        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
+        this.onPointerOutObservable.remove(this._tooltipOutObserver);
+    };
+    Object.defineProperty(TouchHolographicButton.prototype, "renderingGroupId", {
+        get: function () {
+            return this._backPlate.renderingGroupId;
+        },
+        /**
+         * Rendering ground id of all the mesh in the button
+         */
+        set: function (id) {
+            this._backPlate.renderingGroupId = id;
+            this._textPlate.renderingGroupId = id;
+            this._frontPlate.renderingGroupId = id;
+            if (this._tooltipMesh) {
+                this._tooltipMesh.renderingGroupId = id;
+            }
+        },
+        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) {
+                return this._tooltipTextBlock.text;
+            }
+            return null;
+        },
+        /**
+         * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+         */
+        set: function (text) {
+            var _this = this;
+            if (!text) {
+                this._disposeTooltip();
+                return;
+            }
+            if (!this._tooltipFade) {
+                var rightHandedScene = this._backPlate._scene.useRightHandedSystem;
+                // Create tooltip with mesh and text
+                this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
+                var tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
+                var mat = new StandardMaterial("", this._backPlate._scene);
+                mat.diffuseColor = Color3.FromHexString("#212121");
+                tooltipBackground.material = mat;
+                tooltipBackground.isPickable = false;
+                this._tooltipMesh.addChild(tooltipBackground);
+                tooltipBackground.position = Vector3.Forward(rightHandedScene).scale(0.05);
+                this._tooltipMesh.scaling.y = 1 / 3;
+                this._tooltipMesh.position = Vector3.Up().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));
+                this._tooltipMesh.isPickable = false;
+                this._tooltipMesh.parent = this._backPlate;
+                // Create text texture for the tooltip
+                this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);
+                this._tooltipTextBlock = new TextBlock();
+                this._tooltipTextBlock.scaleY = 3;
+                this._tooltipTextBlock.color = "white";
+                this._tooltipTextBlock.fontSize = 130;
+                this._tooltipTexture.addControl(this._tooltipTextBlock);
+                // Add hover action to tooltip
+                this._tooltipFade = new FadeInOutBehavior();
+                this._tooltipFade.delay = 500;
+                this._tooltipMesh.addBehavior(this._tooltipFade);
+                this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
+                    if (_this._tooltipFade) {
+                        _this._tooltipFade.fadeIn(true);
+                    }
+                });
+                this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
+                    if (_this._tooltipFade) {
+                        _this._tooltipFade.fadeIn(false);
+                    }
+                });
+            }
+            if (this._tooltipTextBlock) {
+                this._tooltipTextBlock.text = text;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "text", {
+        /**
+         * Gets or sets text for the button
+         */
+        get: function () {
+            return this._text;
+        },
+        set: function (value) {
+            if (this._text === value) {
+                return;
+            }
+            this._text = value;
+            this._rebuildContent();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "imageUrl", {
+        /**
+         * Gets or sets the image url for the button
+         */
+        get: function () {
+            return this._imageUrl;
+        },
+        set: function (value) {
+            if (this._imageUrl === value) {
+                return;
+            }
+            this._imageUrl = value;
+            this._rebuildContent();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "backMaterial", {
+        /**
+         * Gets the back material used by this button
+         */
+        get: function () {
+            return this._backMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "frontMaterial", {
+        /**
+         * Gets the front material used by this button
+         */
+        get: function () {
+            return this._frontMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "plateMaterial", {
+        /**
+         * Gets the plate material used by this button
+         */
+        get: function () {
+            return this._plateMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "shareMaterials", {
+        /**
+         * Gets a boolean indicating if this button shares its material with other HolographicButtons
+         */
+        get: function () {
+            return this._shareMaterials;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "isBackplateVisible", {
+        /**
+         * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
+         */
+        set: function (isVisible) {
+            if (this.mesh && !!this._backMaterial) {
+                if (isVisible && !this._isBackplateVisible) {
+                    this._backPlate.visibility = 1;
+                }
+                else if (!isVisible && this._isBackplateVisible) {
+                    this._backPlate.visibility = 0;
+                }
+            }
+            this._isBackplateVisible = isVisible;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TouchHolographicButton.prototype._getTypeName = function () {
+        return "TouchHolographicButton";
+    };
+    TouchHolographicButton.prototype._rebuildContent = function () {
+        this._disposeFacadeTexture();
+        var panel = new StackPanel();
+        panel.isVertical = true;
+        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
+            if (this._imageUrl) {
+                var image = new Image();
+                image.source = this._imageUrl;
+                image.paddingTop = "40px";
+                image.height = "180px";
+                image.width = "100px";
+                image.paddingBottom = "40px";
+                panel.addControl(image);
+            }
+        }
+        if (this._text) {
+            var text = new TextBlock();
+            text.text = this._text;
+            text.color = "white";
+            text.height = "30px";
+            text.fontSize = 24;
+            panel.addControl(text);
+        }
+        this.content = panel;
+    };
+    // Mesh association
+    TouchHolographicButton.prototype._createNode = function (scene) {
+        var _this = this;
+        var _a;
+        this.name = (_a = this.name) !== null && _a !== void 0 ? _a : "TouchHolographicButton";
+        var collisionMesh = CreateBox("".concat(this.name, "_collisionMesh"), {
+            width: 1.0,
+            height: 1.0,
+            depth: this._frontPlateDepth,
+        }, scene);
+        collisionMesh.isPickable = true;
+        collisionMesh.isNearPickable = true;
+        collisionMesh.visibility = 0;
+        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 = "".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("".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.isPickable = false;
+        this._textPlate = _super.prototype._createNode.call(this, scene);
+        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 tn;
+    };
+    TouchHolographicButton.prototype._applyFacade = function (facadeTexture) {
+        this._plateMaterial.emissiveTexture = facadeTexture;
+        this._plateMaterial.opacityTexture = facadeTexture;
+        this._plateMaterial.diffuseColor = new Color3(0.4, 0.4, 0.4);
+    };
+    TouchHolographicButton.prototype._createBackMaterial = function (mesh) {
+        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());
+    };
+    TouchHolographicButton.prototype._createPlateMaterial = function (mesh) {
+        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
+            if (!this._host._touchSharedMaterials["backFluentMaterial"]) {
+                this._createBackMaterial(mesh);
+                this._host._touchSharedMaterials["backFluentMaterial"] = this._backMaterial;
+            }
+            else {
+                this._backMaterial = this._host._touchSharedMaterials["backFluentMaterial"];
+            }
+            // Front
+            if (!this._host._touchSharedMaterials["frontFluentMaterial"]) {
+                this._createFrontMaterial(mesh);
+                this._host._touchSharedMaterials["frontFluentMaterial"] = this._frontMaterial;
+            }
+            else {
+                this._frontMaterial = this._host._touchSharedMaterials["frontFluentMaterial"];
+            }
+        }
+        else {
+            this._createBackMaterial(mesh);
+            this._createFrontMaterial(mesh);
+        }
+        this._createPlateMaterial(mesh);
+        this._backPlate.material = this._backMaterial;
+        this._textPlate.material = this._plateMaterial;
+        if (!this._isBackplateVisible) {
+            this._backPlate.visibility = 0;
+        }
+        if (this._frontPlate) {
+            this._frontPlate.material = this._frontMaterial;
+        }
+        this._rebuildContent();
+    };
+    /**
+     * Releases all associated resources
+     */
+    TouchHolographicButton.prototype.dispose = function () {
+        _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
+        this._disposeTooltip();
+        this.onPointerMoveObservable.remove(this._pointerHoverObserver);
+        if (!this.shareMaterials) {
+            this._backMaterial.dispose();
+            this._frontMaterial.dispose();
+            this._plateMaterial.dispose();
+            if (this._pickedPointObserver) {
+                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+                this._pickedPointObserver = null;
+            }
+        }
+    };
+    /**
+     * Base Url for the button model.
+     */
+    TouchHolographicButton.MODEL_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
+    /**
+     * File name for the button model.
+     */
+    TouchHolographicButton.MODEL_FILENAME = "mrtk-fluent-button.glb";
+    return TouchHolographicButton;
+}(TouchButton3D));
+export { TouchHolographicButton };
 //# sourceMappingURL=touchHolographicButton.js.map