@babylonjs/gui 5.21.0 → 5.23.0

package/3D/controls/touchHolographicButton.js

@@ -1,4 +1,3 @@
-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";
@@ -21,63 +20,60 @@ 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);
+export class TouchHolographicButton extends TouchButton3D {
     /**
      * 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;
+    constructor(name, shareMaterials = true) {
+        super(name);
+        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 = () => {
+            this._frontMaterial.leftBlobEnable = true;
+            this._frontMaterial.rightBlobEnable = true;
         };
-        _this.pointerOutAnimation = function () {
-            _this._frontMaterial.leftBlobEnable = false;
-            _this._frontMaterial.rightBlobEnable = false;
+        this.pointerOutAnimation = () => {
+            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.pointerDownAnimation = () => {
+            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.pointerUpAnimation = () => {
+            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.onPointerMoveObservable.add((position) => {
+            if (this._frontPlate && this.isActiveNearInteraction) {
+                const scale = Vector3.Zero();
+                if (this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {
+                    let 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;
+        this._pointerHoverObserver = this.onPointerMoveObservable.add((hoverPosition) => {
+            this._frontMaterial.globalLeftIndexTipPosition = hoverPosition;
         });
-        return _this;
     }
-    TouchHolographicButton.prototype._disposeTooltip = function () {
+    _disposeTooltip() {
         this._tooltipFade = null;
         if (this._tooltipTextBlock) {
             this._tooltipTextBlock.dispose();
@@ -90,197 +86,156 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         }
         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;
+    }
+    /**
+     * Rendering ground id of all the mesh in the button
+     */
+    set renderingGroupId(id) {
+        this._backPlate.renderingGroupId = id;
+        this._textPlate.renderingGroupId = id;
+        this._frontPlate.renderingGroupId = id;
+        if (this._tooltipMesh) {
+            this._tooltipMesh.renderingGroupId = id;
+        }
+    }
+    get renderingGroupId() {
+        return this._backPlate.renderingGroupId;
+    }
+    /**
+     * Gets the mesh used to render this control
+     */
+    get mesh() {
+        return this._backPlate;
+    }
+    /**
+     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+     */
+    set tooltipText(text) {
+        if (!text) {
+            this._disposeTooltip();
+            return;
+        }
+        if (!this._tooltipFade) {
+            const rightHandedScene = this._backPlate._scene.useRightHandedSystem;
+            // Create tooltip with mesh and text
+            this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
+            const tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
+            const 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(() => {
+                if (this._tooltipFade) {
+                    this._tooltipFade.fadeIn(true);
                 }
-                else if (!isVisible && this._isBackplateVisible) {
-                    this._backPlate.visibility = 0;
+            });
+            this._tooltipOutObserver = this.onPointerOutObservable.add(() => {
+                if (this._tooltipFade) {
+                    this._tooltipFade.fadeIn(false);
                 }
+            });
+        }
+        if (this._tooltipTextBlock) {
+            this._tooltipTextBlock.text = text;
+        }
+    }
+    get tooltipText() {
+        if (this._tooltipTextBlock) {
+            return this._tooltipTextBlock.text;
+        }
+        return null;
+    }
+    /**
+     * Gets or sets text for the button
+     */
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        if (this._text === value) {
+            return;
+        }
+        this._text = value;
+        this._rebuildContent();
+    }
+    /**
+     * Gets or sets the image url for the button
+     */
+    get imageUrl() {
+        return this._imageUrl;
+    }
+    set imageUrl(value) {
+        if (this._imageUrl === value) {
+            return;
+        }
+        this._imageUrl = value;
+        this._rebuildContent();
+    }
+    /**
+     * Gets the back material used by this button
+     */
+    get backMaterial() {
+        return this._backMaterial;
+    }
+    /**
+     * Gets the front material used by this button
+     */
+    get frontMaterial() {
+        return this._frontMaterial;
+    }
+    /**
+     * Gets the plate material used by this button
+     */
+    get plateMaterial() {
+        return this._plateMaterial;
+    }
+    /**
+     * Gets a boolean indicating if this button shares its material with other HolographicButtons
+     */
+    get shareMaterials() {
+        return this._shareMaterials;
+    }
+    /**
+     * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
+     */
+    set isBackplateVisible(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 () {
+        }
+        this._isBackplateVisible = isVisible;
+    }
+    _getTypeName() {
         return "TouchHolographicButton";
-    };
-    TouchHolographicButton.prototype._rebuildContent = function () {
+    }
+    _rebuildContent() {
         this._disposeFacadeTexture();
-        var panel = new StackPanel();
+        const panel = new StackPanel();
         panel.isVertical = true;
         if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
             if (this._imageUrl) {
-                var image = new Image();
+                const image = new Image();
                 image.source = this._imageUrl;
                 image.paddingTop = "40px";
                 image.height = "180px";
@@ -290,7 +245,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             }
         }
         if (this._text) {
-            var text = new TextBlock();
+            const text = new TextBlock();
             text.text = this._text;
             text.color = "white";
             text.height = "30px";
@@ -298,13 +253,11 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             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"), {
+    _createNode(scene) {
+        this.name = this.name ?? "TouchHolographicButton";
+        const collisionMesh = CreateBox(`${this.name}_collisionMesh`, {
             width: 1.0,
             height: 1.0,
             depth: this._frontPlateDepth,
@@ -313,8 +266,8 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         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", {
+        SceneLoader.ImportMeshAsync(undefined, TouchHolographicButton.MODEL_BASE_URL, TouchHolographicButton.MODEL_FILENAME, scene).then((result) => {
+            const alphaMesh = CreateBox("${this.name}_alphaMesh", {
                 width: 1.0,
                 height: 1.0,
                 depth: 1.0,
@@ -322,55 +275,55 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             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");
+            const importedFrontPlate = result.meshes[1];
+            importedFrontPlate.name = `${this.name}_frontPlate`;
             importedFrontPlate.isPickable = false;
-            importedFrontPlate.scaling.z = _this._frontPlateDepth;
+            importedFrontPlate.scaling.z = this._frontPlateDepth;
             alphaMesh.parent = importedFrontPlate;
             importedFrontPlate.parent = collisionMesh;
-            if (_this._frontMaterial) {
-                importedFrontPlate.material = _this._frontMaterial;
+            if (this._frontMaterial) {
+                importedFrontPlate.material = this._frontMaterial;
             }
-            _this._frontPlate = importedFrontPlate;
+            this._frontPlate = importedFrontPlate;
         });
-        this._backPlate = CreateBox("".concat(this.name, "_backPlate"), {
+        this._backPlate = CreateBox(`${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 = super._createNode(scene);
+        this._textPlate.name = `${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);
+        const 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) {
+    }
+    _applyFacade(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) {
+    }
+    _createBackMaterial(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) {
+    }
+    _createFrontMaterial(mesh) {
         this._frontMaterial = new FluentButtonMaterial(this.name + "Front Material", mesh.getScene());
-    };
-    TouchHolographicButton.prototype._createPlateMaterial = function (mesh) {
+    }
+    _createPlateMaterial(mesh) {
         this._plateMaterial = new StandardMaterial(this.name + "Plate Material", mesh.getScene());
         this._plateMaterial.specularColor = Color3.Black();
-    };
-    TouchHolographicButton.prototype._onToggle = function (newState) {
+    }
+    _onToggle(newState) {
         if (this._backMaterial) {
             if (newState) {
                 this._backMaterial.albedoColor = this._backplateToggledColor;
@@ -379,9 +332,9 @@ var TouchHolographicButton = /** @class */ (function (_super) {
                 this._backMaterial.albedoColor = this._backplateColor;
             }
         }
-        _super.prototype._onToggle.call(this, newState);
-    };
-    TouchHolographicButton.prototype._affectMaterial = function (mesh) {
+        super._onToggle(newState);
+    }
+    _affectMaterial(mesh) {
         if (this._shareMaterials) {
             // Back
             if (!this._host._touchSharedMaterials["backFluentMaterial"]) {
@@ -414,12 +367,12 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             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
+    dispose() {
+        super.dispose(); // will dispose main mesh ie. back plate
         this._disposeTooltip();
         this.onPointerMoveObservable.remove(this._pointerHoverObserver);
         if (!this.shareMaterials) {
@@ -431,16 +384,14 @@ var TouchHolographicButton = /** @class */ (function (_super) {
                 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 };
+    }
+}
+/**
+ * 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";
 //# sourceMappingURL=touchHolographicButton.js.map