babylonjs-gui 5.0.0-beta.4 → 5.0.0-beta.8

package/babylon.gui.js

@@ -1611,6 +1611,10 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             if (typeof width === "number" && typeof height === "number" && width >= 0 && height >= 0) {
                 this.scaleTo(width, height);
             }
+            else {
+                // scales the GUI to a default size if none was available in the serialized content
+                this.scaleTo(1920, 1080);
+            }
         }
     };
     /**
@@ -1704,8 +1708,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (onlyAlphaTesting === void 0) { onlyAlphaTesting = false; }
         // use a unique ID in name so serialization will work even if you create two ADTs for a single mesh
         var uniqueId = Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["RandomGUID"])();
-        var result = new AdvancedDynamicTexture("AdvancedDynamicTexture for " + mesh.name + " [" + uniqueId + "]", width, height, mesh.getScene(), true, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE, invertY);
-        var material = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["StandardMaterial"]("AdvancedDynamicTextureMaterial for " + mesh.name + " [" + uniqueId + "]", mesh.getScene());
+        var result = new AdvancedDynamicTexture("AdvancedDynamicTexture for ".concat(mesh.name, " [").concat(uniqueId, "]"), width, height, mesh.getScene(), true, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE, invertY);
+        var material = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["StandardMaterial"]("AdvancedDynamicTextureMaterial for ".concat(mesh.name, " [").concat(uniqueId, "]"), mesh.getScene());
         material.backFaceCulling = false;
         material.diffuseColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
         material.specularColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
@@ -1773,6 +1777,23 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         result.attach();
         return result;
     };
+    /**
+     * Scales the texture
+     * @param ratio the scale factor to apply to both width and height
+     */
+    AdvancedDynamicTexture.prototype.scale = function (ratio) {
+        _super.prototype.scale.call(this, ratio);
+        this.markAsDirty();
+    };
+    /**
+     * Resizes the texture
+     * @param width the new width
+     * @param height the new height
+     */
+    AdvancedDynamicTexture.prototype.scaleTo = function (width, height) {
+        _super.prototype.scaleTo.call(this, width, height);
+        this.markAsDirty();
+    };
     /** Define the Uurl to load snippets */
     AdvancedDynamicTexture.SnippetUrl = "https://snippet.babylonjs.com";
     /** Indicates if some optimizations can be performed in GUI GPU management (the downside is additional memory/GPU texture memory used) */
@@ -2450,7 +2471,7 @@ var ColorPicker = /** @class */ (function (_super) {
     };
     ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
         // Shoudl abstract platform instead of using LastCreatedEngine
-        var engine = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine;
+        var engine = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine;
         if (!engine) {
             throw new Error("Invalid engine. Unable to create a canvas.");
         }
@@ -4048,7 +4069,7 @@ var Container = /** @class */ (function (_super) {
             rebuildCount++;
         } while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
         if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
-            babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Container name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
+            babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Container name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
         }
         context.restore();
         if (this._isDirty) {
@@ -4118,7 +4139,10 @@ var Container = /** @class */ (function (_super) {
         if (!this._isEnabled || !this.isVisible || this.notRenderable) {
             return false;
         }
-        if (!_super.prototype.contains.call(this, x, y)) {
+        // checks if the picking position is within the container
+        var contains = _super.prototype.contains.call(this, x, y);
+        // if clipChildren is off, we should still pass picking events to children even if we don't contain the pointer
+        if (!contains && this.clipChildren) {
             return false;
         }
         // Checking backwards to pick closest first
@@ -4131,6 +4155,9 @@ var Container = /** @class */ (function (_super) {
                 return true;
             }
         }
+        if (!contains) {
+            return false;
+        }
         if (!this.isHitTestVisible) {
             return false;
         }
@@ -5343,17 +5370,34 @@ var Control = /** @class */ (function () {
             return this._isEnabled;
         },
         set: function (value) {
+            var _this = this;
             if (this._isEnabled === value) {
                 return;
             }
             this._isEnabled = value;
             this._markAsDirty();
+            // if this control or any of it's descendants are under a pointer, we need to fire a pointerOut event
+            var recursivelyFirePointerOut = function (control) {
+                if (!control.host) {
+                    return;
+                }
+                for (var pointer in control.host._lastControlOver) {
+                    if (control === _this.host._lastControlOver[pointer]) {
+                        control._onPointerOut(control, null, true);
+                        delete control.host._lastControlOver[pointer];
+                    }
+                }
+                if (control.children !== undefined) {
+                    control.children.forEach(recursivelyFirePointerOut);
+                }
+            };
+            recursivelyFirePointerOut(this);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Control.prototype, "disabledColor", {
-        /** Gets or sets background color of control if it's disabled */
+        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
         get: function () {
             return this._disabledColor;
         },
@@ -5368,7 +5412,7 @@ var Control = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(Control.prototype, "disabledColorItem", {
-        /** Gets or sets front color of control if it's disabled */
+        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
         get: function () {
             return this._disabledColorItem;
         },
@@ -5774,7 +5818,7 @@ var Control = /** @class */ (function () {
                 rebuildCount++;
             } while (this._rebuildLayout && rebuildCount < 3);
             if (rebuildCount >= 3) {
-                babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Control name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
+                babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Control name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
             }
             context.restore();
             this.invalidateRect();
@@ -6321,7 +6365,7 @@ var Control = /** @class */ (function () {
         if (Control._FontHeightSizes[font]) {
             return Control._FontHeightSizes[font];
         }
-        var engine = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine;
+        var engine = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine;
         if (!engine) {
             throw new Error("Invalid engine. Unable to create a canvas.");
         }
@@ -7171,7 +7215,7 @@ var Grid = /** @class */ (function (_super) {
      * @returns the list of controls
      */
     Grid.prototype.getChildrenAt = function (row, column) {
-        var cell = this._cells[row + ":" + column];
+        var cell = this._cells["".concat(row, ":").concat(column)];
         if (!cell) {
             return null;
         }
@@ -7220,14 +7264,14 @@ var Grid = /** @class */ (function (_super) {
             return this;
         }
         for (var x = 0; x < this._rowDefinitions.length; x++) {
-            var key = x + ":" + index;
+            var key = "".concat(x, ":").concat(index);
             var cell = this._cells[key];
             this._removeCell(cell, key);
         }
         for (var x = 0; x < this._rowDefinitions.length; x++) {
             for (var y = index + 1; y < this._columnDefinitions.length; y++) {
-                var previousKey = x + ":" + (y - 1);
-                var key = x + ":" + y;
+                var previousKey = "".concat(x, ":").concat(y - 1);
+                var key = "".concat(x, ":").concat(y);
                 this._offsetCell(previousKey, key);
             }
         }
@@ -7247,14 +7291,14 @@ var Grid = /** @class */ (function (_super) {
             return this;
         }
         for (var y = 0; y < this._columnDefinitions.length; y++) {
-            var key = index + ":" + y;
+            var key = "".concat(index, ":").concat(y);
             var cell = this._cells[key];
             this._removeCell(cell, key);
         }
         for (var y = 0; y < this._columnDefinitions.length; y++) {
             for (var x = index + 1; x < this._rowDefinitions.length; x++) {
-                var previousKey = x - 1 + ":" + y;
-                var key = x + ":" + y;
+                var previousKey = "".concat(x - 1, ":").concat(y);
+                var key = "".concat(x, ":").concat(y);
                 this._offsetCell(previousKey, key);
             }
         }
@@ -7283,12 +7327,12 @@ var Grid = /** @class */ (function (_super) {
             this.addColumnDefinition(1, false);
         }
         if (this._childControls.indexOf(control) !== -1) {
-            babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Tools"].Warn("Control (Name:" + control.name + ", UniqueId:" + control.uniqueId + ") is already associated with this grid. You must remove it before reattaching it");
+            babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Tools"].Warn("Control (Name:".concat(control.name, ", UniqueId:").concat(control.uniqueId, ") is already associated with this grid. You must remove it before reattaching it"));
             return this;
         }
         var x = Math.min(row, this._rowDefinitions.length - 1);
         var y = Math.min(column, this._columnDefinitions.length - 1);
-        var key = x + ":" + y;
+        var key = "".concat(x, ":").concat(y);
         var goodContainer = this._cells[key];
         if (!goodContainer) {
             goodContainer = new _container__WEBPACK_IMPORTED_MODULE_1__["Container"](key);
@@ -7856,7 +7900,7 @@ var Image = /** @class */ (function (_super) {
         var width = this._domImage.width;
         var height = this._domImage.height;
         // Should abstract platform instead of using LastCreatedEngine
-        var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine;
+        var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine;
         if (!engine) {
             throw new Error("Invalid engine. Unable to create a canvas.");
         }
@@ -7926,7 +7970,7 @@ var Image = /** @class */ (function (_super) {
         var width = this._domImage.width;
         var height = this._domImage.height;
         if (!this._workingCanvas) {
-            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine;
+            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine;
             if (!engine) {
                 throw new Error("Invalid engine. Unable to create a canvas.");
             }
@@ -8026,7 +8070,7 @@ var Image = /** @class */ (function (_super) {
                 value = this._svgCheck(value);
             }
             // Should abstract platform instead of using LastCreatedEngine
-            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine;
+            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine;
             if (!engine) {
                 throw new Error("Invalid engine. Unable to create a canvas.");
             }
@@ -8257,7 +8301,7 @@ var Image = /** @class */ (function (_super) {
         var width = this._currentMeasure.width;
         var height = this._currentMeasure.height;
         if (!this._workingCanvas) {
-            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine;
+            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine;
             if (!engine) {
                 throw new Error("Invalid engine. Unable to create a canvas.");
             }
@@ -13787,7 +13831,7 @@ var StackPanel = /** @class */ (function (_super) {
                 }
                 if (child._height.isPercentage && !child._automaticSize) {
                     if (!this.ignoreLayoutWarnings) {
-                        babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using height in percentage mode inside a vertical StackPanel");
+                        babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:".concat(child.name, ", UniqueId:").concat(child.uniqueId, ") is using height in percentage mode inside a vertical StackPanel"));
                     }
                 }
                 else {
@@ -13802,7 +13846,7 @@ var StackPanel = /** @class */ (function (_super) {
                 }
                 if (child._width.isPercentage && !child._automaticSize) {
                     if (!this.ignoreLayoutWarnings) {
-                        babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using width in percentage mode inside a horizontal StackPanel");
+                        babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:".concat(child.name, ", UniqueId:").concat(child.uniqueId, ") is using width in percentage mode inside a horizontal StackPanel"));
                     }
                 }
                 else {
@@ -14395,7 +14439,7 @@ var TextBlock = /** @class */ (function (_super) {
         else {
             while (characters.length && lineWidth > width) {
                 characters.pop();
-                line = characters.join("") + "...";
+                line = "".concat(characters.join(""), "...");
                 textMetrics = context.measureText(line);
                 lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
             }
@@ -14434,7 +14478,7 @@ var TextBlock = /** @class */ (function (_super) {
             if (currentHeight > height && n > 1) {
                 var lastLine = lines[n - 2];
                 var currentLine = lines[n - 1];
-                lines[n - 2] = this._parseLineEllipsis("" + (lastLine.text + currentLine.text), width, context);
+                lines[n - 2] = this._parseLineEllipsis("".concat(lastLine.text + currentLine.text), width, context);
                 var linesToRemove = lines.length - n + 1;
                 for (var i = 0; i < linesToRemove; i++) {
                     lines.pop();
@@ -14495,7 +14539,7 @@ var TextBlock = /** @class */ (function (_super) {
         var _a;
         if (this.text && this.widthInPixels) {
             // Should abstract platform instead of using LastCreatedEngine
-            var context_1 = (_a = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].LastCreatedEngine) === null || _a === void 0 ? void 0 : _a.createCanvas(0, 0).getContext("2d");
+            var context_1 = (_a = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["EngineStore"].LastCreatedEngine) === null || _a === void 0 ? void 0 : _a.createCanvas(0, 0).getContext("2d");
             if (context_1) {
                 this._applyStates(context_1);
                 if (!this._fontOffset) {
@@ -17777,7 +17821,7 @@ var HolographicBackplate = /** @class */ (function (_super) {
         babylonjs_Meshes_Builders_boxBuilder__WEBPACK_IMPORTED_MODULE_1__["SceneLoader"].ImportMeshAsync(undefined, HolographicBackplate.MODEL_BASE_URL, HolographicBackplate.MODEL_FILENAME, scene)
             .then(function (result) {
             var importedModel = result.meshes[1];
-            importedModel.name = _this.name + "_frontPlate";
+            importedModel.name = "".concat(_this.name, "_frontPlate");
             importedModel.isPickable = false;
             importedModel.parent = collisionMesh;
             if (!!_this._material) {
@@ -18322,6 +18366,10 @@ var HolographicSlate = /** @class */ (function (_super) {
      */
     HolographicSlate.prototype._applyFacade = function (facadeTexture) {
         this._contentMaterial.albedoTexture = facadeTexture;
+        // We should have a content plate by this point, but check for safety
+        if (this._contentPlate) {
+            facadeTexture.attachToMesh(this._contentPlate, true);
+        }
     };
     HolographicSlate.prototype._rebuildContent = function () {
         this._disposeFacadeTexture();
@@ -18494,7 +18542,7 @@ var HolographicSlate = /** @class */ (function (_super) {
     };
     HolographicSlate.prototype._affectMaterial = function (mesh) {
         // TODO share materials
-        this._backPlateMaterial = new _materials_fluentBackplate_fluentBackplateMaterial__WEBPACK_IMPORTED_MODULE_8__["FluentBackplateMaterial"](this.name + " plateMaterial", mesh.getScene());
+        this._backPlateMaterial = new _materials_fluentBackplate_fluentBackplateMaterial__WEBPACK_IMPORTED_MODULE_8__["FluentBackplateMaterial"]("".concat(this.name, " plateMaterial"), mesh.getScene());
         this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(function (pickedPoint) {
             // if (pickedPoint) {
             //     this._backPlateMaterial. = pickedPoint;
@@ -19245,7 +19293,7 @@ var Slider3D = /** @class */ (function (_super) {
     // Mesh association
     Slider3D.prototype._createNode = function (scene) {
         var _this = this;
-        var sliderBackplate = Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["CreateBox"])(this.name + "_sliderbackplate", {
+        var sliderBackplate = Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["CreateBox"])("".concat(this.name, "_sliderbackplate"), {
             width: 1.0,
             height: 1.0,
             depth: 1.0,
@@ -19256,12 +19304,12 @@ var Slider3D = /** @class */ (function (_super) {
         babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["SceneLoader"].ImportMeshAsync(undefined, Slider3D.MODEL_BASE_URL, Slider3D.MODEL_FILENAME, scene)
             .then(function (result) {
             var sliderBackplateModel = result.meshes[1];
-            var sliderBarModel = result.meshes[1].clone(_this.name + "_sliderbar", sliderBackplate);
-            var sliderThumbModel = result.meshes[1].clone(_this.name + "_sliderthumb", sliderBackplate);
+            var sliderBarModel = result.meshes[1].clone("".concat(_this.name, "_sliderbar"), sliderBackplate);
+            var sliderThumbModel = result.meshes[1].clone("".concat(_this.name, "_sliderthumb"), sliderBackplate);
             sliderBackplateModel.visibility = 0;
             if (_this._sliderBackplateVisible) {
                 sliderBackplateModel.visibility = 1;
-                sliderBackplateModel.name = _this.name + "_sliderbackplate";
+                sliderBackplateModel.name = "".concat(_this.name, "_sliderbackplate");
                 sliderBackplateModel.isPickable = false;
                 sliderBackplateModel.scaling.x = 1;
                 sliderBackplateModel.scaling.z = 0.2;
@@ -19299,9 +19347,9 @@ var Slider3D = /** @class */ (function (_super) {
     };
     Slider3D.prototype._affectMaterial = function (mesh) {
         var _a, _b, _c;
-        this._sliderBackplateMaterial = (_a = this._sliderBackplateMaterial) !== null && _a !== void 0 ? _a : new _materials_mrdl_mrdlBackplateMaterial__WEBPACK_IMPORTED_MODULE_5__["MRDLBackplateMaterial"](this.name + "_sliderbackplate_material", mesh.getScene());
-        this._sliderBarMaterial = (_b = this._sliderBarMaterial) !== null && _b !== void 0 ? _b : new _materials_mrdl_mrdlSliderBarMaterial__WEBPACK_IMPORTED_MODULE_3__["MRDLSliderBarMaterial"](this.name + "_sliderbar_material", mesh.getScene());
-        this._sliderThumbMaterial = (_c = this._sliderThumbMaterial) !== null && _c !== void 0 ? _c : new _materials_mrdl_mrdlSliderThumbMaterial__WEBPACK_IMPORTED_MODULE_4__["MRDLSliderThumbMaterial"](this.name + "_sliderthumb_material", mesh.getScene());
+        this._sliderBackplateMaterial = (_a = this._sliderBackplateMaterial) !== null && _a !== void 0 ? _a : new _materials_mrdl_mrdlBackplateMaterial__WEBPACK_IMPORTED_MODULE_5__["MRDLBackplateMaterial"]("".concat(this.name, "_sliderbackplate_material"), mesh.getScene());
+        this._sliderBarMaterial = (_b = this._sliderBarMaterial) !== null && _b !== void 0 ? _b : new _materials_mrdl_mrdlSliderBarMaterial__WEBPACK_IMPORTED_MODULE_3__["MRDLSliderBarMaterial"]("".concat(this.name, "_sliderbar_material"), mesh.getScene());
+        this._sliderThumbMaterial = (_c = this._sliderThumbMaterial) !== null && _c !== void 0 ? _c : new _materials_mrdl_mrdlSliderThumbMaterial__WEBPACK_IMPORTED_MODULE_4__["MRDLSliderThumbMaterial"]("".concat(this.name, "_sliderthumb_material"), mesh.getScene());
     };
     Slider3D.prototype._createBehavior = function () {
         var _this = this;
@@ -19648,12 +19696,10 @@ var TouchButton3D = /** @class */ (function (_super) {
          * @param collisionMesh the new collision mesh for the button
          */
         set: function (collisionMesh) {
-            if (this._collisionMesh) {
-                this._collisionMesh.dispose();
-            }
-            // parent the mesh to sync transforms
-            if (!collisionMesh.parent && this.mesh) {
-                collisionMesh.setParent(this.mesh);
+            var _a, _b;
+            // Remove the GUI3DManager's data from the previous collision mesh's reserved data store
+            if ((_b = (_a = this._collisionMesh) === null || _a === void 0 ? void 0 : _a.reservedDataStore) === null || _b === void 0 ? void 0 : _b.GUI3D) {
+                this._collisionMesh.reservedDataStore.GUI3D = {};
             }
             this._collisionMesh = collisionMesh;
             this._injectGUI3DReservedDataStore(this._collisionMesh).control = this;
@@ -20087,7 +20133,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         this.name = (_a = this.name) !== null && _a !== void 0 ? _a : "TouchHolographicButton";
-        var collisionMesh = Object(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["CreateBox"])(this.name + "_collisionMesh", {
+        var collisionMesh = Object(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["CreateBox"])("".concat(this.name, "_collisionMesh"), {
             width: 1.0,
             height: 1.0,
             depth: this._frontPlateDepth,
@@ -20107,7 +20153,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             alphaMesh.material = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["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;
@@ -20117,7 +20163,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
             }
             _this._frontPlate = importedFrontPlate;
         });
-        this._backPlate = Object(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["CreateBox"])(this.name + "_backPlate", {
+        this._backPlate = Object(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["CreateBox"])("".concat(this.name, "_backPlate"), {
             width: 1.0,
             height: 1.0,
             depth: this._backPlateDepth,
@@ -20125,7 +20171,7 @@ var TouchHolographicButton = /** @class */ (function (_super) {
         this._backPlate.position = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["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 = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Forward(scene.useRightHandedSystem).scale(-this._frontPlateDepth / 2);
         this._backPlate.addChild(collisionMesh);
@@ -20287,7 +20333,7 @@ var TouchHolographicMenu = /** @class */ (function (_super) {
         configurable: true
     });
     TouchHolographicMenu.prototype._createNode = function (scene) {
-        var node = new babylonjs_Meshes_mesh__WEBPACK_IMPORTED_MODULE_2__["Mesh"]("menu_" + this.name, scene);
+        var node = new babylonjs_Meshes_mesh__WEBPACK_IMPORTED_MODULE_2__["Mesh"]("menu_".concat(this.name), scene);
         this._backPlate = Object(babylonjs_Meshes_mesh__WEBPACK_IMPORTED_MODULE_2__["CreateBox"])("backPlate" + this.name, { size: 1 }, scene);
         this._backPlate.parent = node;
         return node;
@@ -21762,7 +21808,7 @@ var FluentMaterial = /** @class */ (function (_super) {
         /**
          * Gets or sets the radius used to render the hover light (default is 1.0)
          */
-        _this.hoverRadius = 1.0;
+        _this.hoverRadius = 0.01;
         /**
          * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
          */
@@ -21913,7 +21959,7 @@ var FluentMaterial = /** @class */ (function (_super) {
         return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new FluentMaterial(name, _this.getScene()); }, this);
     };
     FluentMaterial.prototype.serialize = function () {
-        var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
+        var serializationObject = _super.prototype.serialize.call(this);
         serializationObject.customType = "BABYLON.GUI.FluentMaterial";
         return serializationObject;
     };
@@ -22201,8 +22247,8 @@ var FluentBackplateMaterial = /** @class */ (function (_super) {
         _this._globalRightIndexTipPosition4 = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Vector4"].Zero();
         _this.alphaMode = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_DISABLE;
         _this.backFaceCulling = false;
-        _this._blobTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](FluentBackplateMaterial.BLOB_TEXTURE_URL, scene, true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
-        _this._iridescentMap = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](FluentBackplateMaterial.IM_TEXTURE_URL, scene, true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
+        _this._blobTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](FluentBackplateMaterial.BLOB_TEXTURE_URL, _this.getScene(), true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
+        _this._iridescentMap = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](FluentBackplateMaterial.IM_TEXTURE_URL, _this.getScene(), true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
         return _this;
     }
     FluentBackplateMaterial.prototype.needAlphaBlending = function () {
@@ -22394,7 +22440,7 @@ var FluentBackplateMaterial = /** @class */ (function (_super) {
         return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new FluentBackplateMaterial(name, _this.getScene()); }, this);
     };
     FluentBackplateMaterial.prototype.serialize = function () {
-        var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
+        var serializationObject = _super.prototype.serialize.call(this);
         serializationObject.customType = "BABYLON.FluentBackplateMaterial";
         return serializationObject;
     };
@@ -22755,7 +22801,7 @@ var FluentButtonMaterial = /** @class */ (function (_super) {
         _this.alphaMode = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ADD;
         _this.disableDepthWrite = true;
         _this.backFaceCulling = false;
-        _this._blobTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](FluentButtonMaterial.BLOB_TEXTURE_URL, scene, true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
+        _this._blobTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](FluentButtonMaterial.BLOB_TEXTURE_URL, _this.getScene(), true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
         return _this;
     }
     FluentButtonMaterial.prototype.needAlphaBlending = function () {
@@ -22976,7 +23022,7 @@ var FluentButtonMaterial = /** @class */ (function (_super) {
         return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new FluentButtonMaterial(name, _this.getScene()); }, this);
     };
     FluentButtonMaterial.prototype.serialize = function () {
-        var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
+        var serializationObject = _super.prototype.serialize.call(this);
         serializationObject.customType = "BABYLON.FluentButtonMaterial";
         return serializationObject;
     };
@@ -23601,7 +23647,7 @@ var MRDLBackplateMaterial = /** @class */ (function (_super) {
         _this.edgeLineGradientBlend = 0.5;
         _this.alphaMode = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_DISABLE;
         _this.backFaceCulling = false;
-        _this._iridescentMapTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](MRDLBackplateMaterial.IRIDESCENT_MAP_TEXTURE_URL, scene, true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
+        _this._iridescentMapTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](MRDLBackplateMaterial.IRIDESCENT_MAP_TEXTURE_URL, _this.getScene(), true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
         return _this;
     }
     MRDLBackplateMaterial.prototype.needAlphaBlending = function () {
@@ -23774,7 +23820,7 @@ var MRDLBackplateMaterial = /** @class */ (function (_super) {
         return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new MRDLBackplateMaterial(name, _this.getScene()); }, this);
     };
     MRDLBackplateMaterial.prototype.serialize = function () {
-        var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
+        var serializationObject = _super.prototype.serialize.call(this);
         serializationObject.customType = "BABYLON.MRDLBackplateMaterial";
         return serializationObject;
     };
@@ -24216,7 +24262,7 @@ var MRDLSliderBarMaterial = /** @class */ (function (_super) {
         _this.globalRightIndexMiddlePosition = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Vector4"](0.0, 0.0, 0.0, 1.0);
         _this.alphaMode = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_DISABLE;
         _this.backFaceCulling = false;
-        _this._blueGradientTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](MRDLSliderBarMaterial.BLUE_GRADIENT_TEXTURE_URL, scene, true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
+        _this._blueGradientTexture = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"](MRDLSliderBarMaterial.BLUE_GRADIENT_TEXTURE_URL, _this.getScene(), true, false, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE);
         return _this;
     }
     MRDLSliderBarMaterial.prototype.needAlphaBlending = function () {
@@ -24459,7 +24505,7 @@ var MRDLSliderBarMaterial = /** @class */ (function (_super) {
         return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new MRDLSliderBarMaterial(name, _this.getScene()); }, this);
     };
     MRDLSliderBarMaterial.prototype.serialize = function () {
-        var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
+        var serializationObject = _super.prototype.serialize.call(this);
         serializationObject.customType = "BABYLON.MRDLSliderBarMaterial";
         return serializationObject;
     };
@@ -25264,7 +25310,7 @@ var MRDLSliderThumbMaterial = /** @class */ (function (_super) {
         return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new MRDLSliderThumbMaterial(name, _this.getScene()); }, this);
     };
     MRDLSliderThumbMaterial.prototype.serialize = function () {
-        var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
+        var serializationObject = _super.prototype.serialize.call(this);
         serializationObject.customType = "BABYLON.MRDLSliderThumbMaterial";
         return serializationObject;
     };