babylonjs-gui 5.41.0 → 5.42.1

package/babylon.gui.d.ts

@@ -72,6 +72,7 @@ declare module BABYLON.GUI {
         private _canvasPointerOutObserver;
         private _canvasBlurObserver;
         private _controlAddedObserver;
+        private _controlRemovedObserver;
         private _background;
         /** @internal */
         _rootContainer: Container;
@@ -107,6 +108,7 @@ declare module BABYLON.GUI {
         private _rootElement;
         private _cursorChanged;
         private _defaultMousePointerId;
+        private _rootChildrenHaveChanged;
         /** @internal */
         _capturedPointerIds: Set<number>;
         /** @internal */
@@ -2063,6 +2065,10 @@ declare module BABYLON.GUI {
         private _populateNinePatchSlicesFromImage;
         private _detectPointerOnOpaqueOnly;
         private _imageDataCache;
+        static SourceImgCache: Map<string, {
+            img: BABYLON.IImage;
+            timesUsed: number;
+        }>;
         /**
          * BABYLON.Observable notified when the content is loaded
          */
@@ -2169,6 +2175,11 @@ declare module BABYLON.GUI {
          * Gets the image source url
          */
         get source(): BABYLON.Nullable<string>;
+        /**
+         * Resets the internal Image Element cache. Can reduce memory usage.
+         */
+        static ResetImageCache(): void;
+        private _removeCacheUsage;
         /**
          * Gets or sets image source url
          */
@@ -2430,6 +2441,10 @@ declare module BABYLON.GUI {
         _onPointerMove(target: Control, coordinates: BABYLON.Vector2, pointerId: number, pi: BABYLON.PointerInfoBase): void;
         _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
         protected _beforeRenderText(textWrapper: TextWrapper): TextWrapper;
+        /** @internal */
+        private set isTextHighlightOn(value);
+        /** @internal */
+        private get isTextHighlightOn();
         dispose(): void;
     }
 

package/babylon.gui.js

@@ -522,6 +522,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         _this._renderScale = 1;
         _this._cursorChanged = false;
         _this._defaultMousePointerId = 0;
+        _this._rootChildrenHaveChanged = false;
         /** @internal */
         _this._capturedPointerIds = new Set();
         /** @internal */
@@ -617,9 +618,15 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         _this.applyYInversionOnUpdate = invertY;
         _this._rootElement = scene.getEngine().getInputElement();
         _this._renderObserver = scene.onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
+        /** Whenever a control is added or removed to the root, we have to recheck the camera projection as it can have changed  */
         _this._controlAddedObserver = _this._rootContainer.onControlAddedObservable.add(function (control) {
-            if (control && _this._scene && _this._scene.activeCamera) {
-                _this._checkUpdate(_this._scene.activeCamera);
+            if (control) {
+                _this._rootChildrenHaveChanged = true;
+            }
+        });
+        _this._controlRemovedObserver = _this._rootContainer.onControlRemovedObservable.add(function (control) {
+            if (control) {
+                _this._rootChildrenHaveChanged = true;
             }
         });
         _this._preKeyboardObserver = scene.onPreKeyboardObservable.add(function (info) {
@@ -1081,6 +1088,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (this._controlAddedObserver) {
             this._rootContainer.onControlAddedObservable.remove(this._controlAddedObserver);
         }
+        if (this._controlRemovedObserver) {
+            this._rootContainer.onControlRemovedObservable.remove(this._controlRemovedObserver);
+        }
         if (this._layerToDispose) {
             this._layerToDispose.texture = null;
             this._layerToDispose.dispose();
@@ -1161,7 +1171,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         var projectedPosition = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Vector3.Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
         return new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Vector3(projectedPosition.x, projectedPosition.y, projectedPosition.z);
     };
-    AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
+    AdvancedDynamicTexture.prototype._checkUpdate = function (camera, skipUpdate) {
         if (this._layerToDispose) {
             if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
                 return;
@@ -1206,16 +1216,27 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             return;
         }
         this._isDirty = false;
-        this._render();
-        this.update(this.applyYInversionOnUpdate, this.premulAlpha, AdvancedDynamicTexture.AllowGPUOptimizations);
+        this._render(skipUpdate);
+        if (!skipUpdate) {
+            this.update(this.applyYInversionOnUpdate, this.premulAlpha, AdvancedDynamicTexture.AllowGPUOptimizations);
+        }
     };
-    AdvancedDynamicTexture.prototype._render = function () {
+    AdvancedDynamicTexture.prototype._render = function (skipRender) {
+        var _a;
         var textureSize = this.getSize();
         var renderWidth = textureSize.width;
         var renderHeight = textureSize.height;
         var context = this.getContext();
         context.font = "18px Arial";
         context.strokeStyle = "white";
+        /** We have to recheck the camera projection in the case the root control's children have changed  */
+        if (this._rootChildrenHaveChanged) {
+            var camera = (_a = this.getScene()) === null || _a === void 0 ? void 0 : _a.activeCamera;
+            if (camera) {
+                this._rootChildrenHaveChanged = false;
+                this._checkUpdate(camera, true);
+            }
+        }
         // Layout
         this.onBeginLayoutObservable.notifyObservers(this);
         var measure = new _measure__WEBPACK_IMPORTED_MODULE_5__.Measure(0, 0, renderWidth, renderHeight);
@@ -1223,6 +1244,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         this._rootContainer._layout(measure, context);
         this.onEndLayoutObservable.notifyObservers(this);
         this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
+        if (skipRender) {
+            return;
+        }
         // Clear
         if (this._invalidatedRectangle) {
             this._clearMeasure.copyFrom(this._invalidatedRectangle);
@@ -5859,6 +5883,9 @@ var Control = /** @class */ (function () {
                 newTop = oldTop;
             }
         }
+        if (oldLeft === newLeft && oldTop === newTop) {
+            return;
+        }
         this.left = newLeft + "px";
         this.top = newTop + "px";
         this._left.ignoreAdaptiveScaling = true;
@@ -8406,6 +8433,7 @@ var Image = /** @class */ (function (_super) {
             if (this._source === value) {
                 return;
             }
+            this._removeCacheUsage(this._source);
             this._loaded = false;
             this._source = value;
             this._imageDataCache.data = null;
@@ -8417,7 +8445,17 @@ var Image = /** @class */ (function (_super) {
             if (!engine) {
                 throw new Error("Invalid engine. Unable to create a canvas.");
             }
+            if (value && Image.SourceImgCache.has(value)) {
+                var cachedData = Image.SourceImgCache.get(value);
+                this._domImage = cachedData.img;
+                cachedData.timesUsed += 1;
+                this._onImageLoaded();
+                return;
+            }
             this._domImage = engine.createCanvasImage();
+            if (value) {
+                Image.SourceImgCache.set(value, { img: this._domImage, timesUsed: 1 });
+            }
             this._domImage.onload = function () {
                 _this._onImageLoaded();
             };
@@ -8430,6 +8468,22 @@ var Image = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    /**
+     * Resets the internal Image Element cache. Can reduce memory usage.
+     */
+    Image.ResetImageCache = function () {
+        Image.SourceImgCache.clear();
+    };
+    Image.prototype._removeCacheUsage = function (source) {
+        var value = source && Image.SourceImgCache.get(source);
+        if (value) {
+            value.timesUsed -= 1;
+            // Since the image isn't being used anymore, we can clean it from the cache
+            if (value.timesUsed === 0) {
+                Image.SourceImgCache.delete(source);
+            }
+        }
+    };
     /**
      * Checks for svg document with icon id present
      * @param value
@@ -8764,7 +8818,9 @@ var Image = /** @class */ (function (_super) {
         _super.prototype.dispose.call(this);
         this.onImageLoadedObservable.clear();
         this.onSVGAttributesComputedObservable.clear();
+        this._removeCacheUsage(this._source);
     };
+    Image.SourceImgCache = new Map();
     // Static
     /** STRETCH_NONE */
     Image.STRETCH_NONE = 0;
@@ -9494,10 +9550,10 @@ var InputText = /** @class */ (function (_super) {
             case 8: // BACKSPACE
                 if (this._textWrapper.text && this._textWrapper.length > 0) {
                     //delete the highlighted text
-                    if (this._isTextHighlightOn) {
+                    if (this.isTextHighlightOn) {
                         this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
                         this._textHasChanged();
-                        this._isTextHighlightOn = false;
+                        this.isTextHighlightOn = false;
                         this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
                         this._blinkIsEven = false;
                         if (evt) {
@@ -9522,10 +9578,10 @@ var InputText = /** @class */ (function (_super) {
                 }
                 return;
             case 46: // DELETE
-                if (this._isTextHighlightOn) {
+                if (this.isTextHighlightOn) {
                     this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
                     this._textHasChanged();
-                    this._isTextHighlightOn = false;
+                    this.isTextHighlightOn = false;
                     this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
                     if (evt) {
                         evt.preventDefault();
@@ -9544,18 +9600,18 @@ var InputText = /** @class */ (function (_super) {
                 return;
             case 13: // RETURN
                 this._host.focusedControl = null;
-                this._isTextHighlightOn = false;
+                this.isTextHighlightOn = false;
                 return;
             case 35: // END
                 this._cursorOffset = 0;
                 this._blinkIsEven = false;
-                this._isTextHighlightOn = false;
+                this.isTextHighlightOn = false;
                 this._markAsDirty();
                 return;
             case 36: // HOME
                 this._cursorOffset = this._textWrapper.length;
                 this._blinkIsEven = false;
-                this._isTextHighlightOn = false;
+                this.isTextHighlightOn = false;
                 this._markAsDirty();
                 return;
             case 37: // LEFT
@@ -9568,7 +9624,7 @@ var InputText = /** @class */ (function (_super) {
                     this._blinkIsEven = false;
                     // shift + ctrl/cmd + <-
                     if (evt.ctrlKey || evt.metaKey) {
-                        if (!this._isTextHighlightOn) {
+                        if (!this.isTextHighlightOn) {
                             if (this._textWrapper.length === this._cursorOffset) {
                                 return;
                             }
@@ -9579,13 +9635,13 @@ var InputText = /** @class */ (function (_super) {
                         this._startHighlightIndex = 0;
                         this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
                         this._cursorOffset = this._textWrapper.length;
-                        this._isTextHighlightOn = true;
+                        this.isTextHighlightOn = true;
                         this._markAsDirty();
                         return;
                     }
                     //store the starting point
-                    if (!this._isTextHighlightOn) {
-                        this._isTextHighlightOn = true;
+                    if (!this.isTextHighlightOn) {
+                        this.isTextHighlightOn = true;
                         this._cursorIndex = this._cursorOffset >= this._textWrapper.length ? this._textWrapper.length : this._cursorOffset - 1;
                     }
                     //if text is already highlighted
@@ -9603,21 +9659,21 @@ var InputText = /** @class */ (function (_super) {
                         this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
                     }
                     else {
-                        this._isTextHighlightOn = false;
+                        this.isTextHighlightOn = false;
                     }
                     this._markAsDirty();
                     return;
                 }
-                if (this._isTextHighlightOn) {
+                if (this.isTextHighlightOn) {
                     this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
-                    this._isTextHighlightOn = false;
+                    this.isTextHighlightOn = false;
                 }
                 if (evt && (evt.ctrlKey || evt.metaKey)) {
                     this._cursorOffset = this._textWrapper.length;
                     evt.preventDefault();
                 }
                 this._blinkIsEven = false;
-                this._isTextHighlightOn = false;
+                this.isTextHighlightOn = false;
                 this._cursorIndex = -1;
                 this._markAsDirty();
                 return;
@@ -9631,7 +9687,7 @@ var InputText = /** @class */ (function (_super) {
                     this._blinkIsEven = false;
                     //shift + ctrl/cmd + ->
                     if (evt.ctrlKey || evt.metaKey) {
-                        if (!this._isTextHighlightOn) {
+                        if (!this.isTextHighlightOn) {
                             if (this._cursorOffset === 0) {
                                 return;
                             }
@@ -9640,14 +9696,14 @@ var InputText = /** @class */ (function (_super) {
                             }
                         }
                         this._endHighlightIndex = this._textWrapper.length;
-                        this._isTextHighlightOn = true;
+                        this.isTextHighlightOn = true;
                         this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
                         this._cursorOffset = 0;
                         this._markAsDirty();
                         return;
                     }
-                    if (!this._isTextHighlightOn) {
-                        this._isTextHighlightOn = true;
+                    if (!this.isTextHighlightOn) {
+                        this.isTextHighlightOn = true;
                         this._cursorIndex = this._cursorOffset <= 0 ? 0 : this._cursorOffset + 1;
                     }
                     //if text is already highlighted
@@ -9665,14 +9721,14 @@ var InputText = /** @class */ (function (_super) {
                         this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
                     }
                     else {
-                        this._isTextHighlightOn = false;
+                        this.isTextHighlightOn = false;
                     }
                     this._markAsDirty();
                     return;
                 }
-                if (this._isTextHighlightOn) {
+                if (this.isTextHighlightOn) {
                     this._cursorOffset = this._textWrapper.length - this._endHighlightIndex;
-                    this._isTextHighlightOn = false;
+                    this.isTextHighlightOn = false;
                 }
                 //ctr + ->
                 if (evt && (evt.ctrlKey || evt.metaKey)) {
@@ -9680,7 +9736,7 @@ var InputText = /** @class */ (function (_super) {
                     evt.preventDefault();
                 }
                 this._blinkIsEven = false;
-                this._isTextHighlightOn = false;
+                this.isTextHighlightOn = false;
                 this._cursorIndex = -1;
                 this._markAsDirty();
                 return;
@@ -9705,11 +9761,11 @@ var InputText = /** @class */ (function (_super) {
             this.onBeforeKeyAddObservable.notifyObservers(this);
             key = this._currentKey;
             if (this._addKey && !this._deadKey) {
-                if (this._isTextHighlightOn) {
+                if (this.isTextHighlightOn) {
                     this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex, key);
                     this._textHasChanged();
                     this._cursorOffset = this._textWrapper.length - (this._startHighlightIndex + 1);
-                    this._isTextHighlightOn = false;
+                    this.isTextHighlightOn = false;
                     this._blinkIsEven = false;
                     this._markAsDirty();
                 }
@@ -9743,12 +9799,12 @@ var InputText = /** @class */ (function (_super) {
                 this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
             }
             else {
-                this._isTextHighlightOn = false;
+                this.isTextHighlightOn = false;
                 this._markAsDirty();
                 return;
             }
         }
-        this._isTextHighlightOn = true;
+        this.isTextHighlightOn = true;
         this._markAsDirty();
     };
     /**
@@ -9765,8 +9821,7 @@ var InputText = /** @class */ (function (_super) {
             moveLeft = this._startHighlightIndex > 0 && this._textWrapper.isWord(this._startHighlightIndex - 1) ? --this._startHighlightIndex : 0;
         } while (moveLeft || moveRight);
         this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
-        this.onTextHighlightObservable.notifyObservers(this);
-        this._isTextHighlightOn = true;
+        this.isTextHighlightOn = true;
         this._clickedCoordinate = null;
         this._blinkIsEven = true;
         this._cursorIndex = -1;
@@ -9775,7 +9830,7 @@ var InputText = /** @class */ (function (_super) {
     /** @internal */
     InputText.prototype._selectAllText = function () {
         this._blinkIsEven = true;
-        this._isTextHighlightOn = true;
+        this.isTextHighlightOn = true;
         this._startHighlightIndex = 0;
         this._endHighlightIndex = this._textWrapper.length;
         this._cursorOffset = this._textWrapper.length;
@@ -9795,7 +9850,7 @@ var InputText = /** @class */ (function (_super) {
      * @internal
      */
     InputText.prototype._onCopyText = function (ev) {
-        this._isTextHighlightOn = false;
+        this.isTextHighlightOn = false;
         //when write permission to clipbaord data is denied
         try {
             ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
@@ -9812,7 +9867,7 @@ var InputText = /** @class */ (function (_super) {
         }
         this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
         this._textHasChanged();
-        this._isTextHighlightOn = false;
+        this.isTextHighlightOn = false;
         this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
         //when write permission to clipbaord data is denied
         try {
@@ -9940,7 +9995,7 @@ var InputText = /** @class */ (function (_super) {
                     cursorLeft = clipTextLeft + availableWidth;
                     this._markAsDirty();
                 }
-                if (!this._isTextHighlightOn) {
+                if (!this.isTextHighlightOn) {
                     context.fillRect(cursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, 2, this._fontOffset.height);
                 }
             }
@@ -9950,7 +10005,7 @@ var InputText = /** @class */ (function (_super) {
                 _this._markAsDirty();
             }, 500);
             //show the highlighted text
-            if (this._isTextHighlightOn) {
+            if (this.isTextHighlightOn) {
                 clearTimeout(this._blinkTimeout);
                 var highlightCursorOffsetWidth = context.measureText(text.substring(this._startHighlightIndex)).width;
                 var highlightCursorLeft = this._scrollLeft + this._textWidth - highlightCursorOffsetWidth;
@@ -9998,7 +10053,7 @@ var InputText = /** @class */ (function (_super) {
             return true;
         }
         this._clickedCoordinate = coordinates.x;
-        this._isTextHighlightOn = false;
+        this.isTextHighlightOn = false;
         this._highlightedText = "";
         this._cursorIndex = -1;
         this._isPointerDown = true;
@@ -10032,6 +10087,24 @@ var InputText = /** @class */ (function (_super) {
     InputText.prototype._beforeRenderText = function (textWrapper) {
         return textWrapper;
     };
+    Object.defineProperty(InputText.prototype, "isTextHighlightOn", {
+        /** @internal */
+        get: function () {
+            return this._isTextHighlightOn;
+        },
+        /** @internal */
+        set: function (value) {
+            if (this._isTextHighlightOn === value) {
+                return;
+            }
+            if (value) {
+                this.onTextHighlightObservable.notifyObservers(this);
+            }
+            this._isTextHighlightOn = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     InputText.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         this.onBlurObservable.clear();
@@ -21961,6 +22034,10 @@ var Slider3D = /** @class */ (function (_super) {
         sliderBackplate.visibility = 0;
         sliderBackplate.scaling = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Vector3(1, 0.5, 0.8);
         core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.SceneLoader.ImportMeshAsync(undefined, Slider3D.MODEL_BASE_URL, Slider3D.MODEL_FILENAME, scene).then(function (result) {
+            // make all meshes not pickable. Required meshes' pickable state will be set later.
+            result.meshes.forEach(function (m) {
+                m.isPickable = false;
+            });
             var sliderBackplateModel = result.meshes[1];
             var sliderBarModel = result.meshes[1].clone("".concat(_this.name, "_sliderbar"), sliderBackplate);
             var sliderThumbModel = result.meshes[1].clone("".concat(_this.name, "_sliderthumb"), sliderBackplate);
@@ -21968,7 +22045,6 @@ var Slider3D = /** @class */ (function (_super) {
             if (_this._sliderBackplateVisible) {
                 sliderBackplateModel.visibility = 1;
                 sliderBackplateModel.name = "".concat(_this.name, "_sliderbackplate");
-                sliderBackplateModel.isPickable = false;
                 sliderBackplateModel.scaling.x = 1;
                 sliderBackplateModel.scaling.z = 0.2;
                 sliderBackplateModel.parent = sliderBackplate;
@@ -21981,7 +22057,6 @@ var Slider3D = /** @class */ (function (_super) {
                 sliderBarModel.parent = sliderBackplate;
                 sliderBarModel.position.z = -0.1;
                 sliderBarModel.scaling = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Vector3(SLIDER_SCALING - SLIDER_MARGIN, 0.04, 0.3);
-                sliderBarModel.isPickable = false;
                 if (_this._sliderBarMaterial) {
                     sliderBarModel.material = _this._sliderBarMaterial;
                 }
@@ -29036,6 +29111,9 @@ var MRDLSliderThumbMaterial = /** @class */ (function (_super) {
         _this.alphaMode = core_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__.Constants.ALPHA_DISABLE;
         _this.backFaceCulling = false;
         _this._blueGradientTexture = new core_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__.Texture(MRDLSliderThumbMaterial.BLUE_GRADIENT_TEXTURE_URL, scene, true, false, core_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__.Texture.NEAREST_SAMPLINGMODE);
+        _this._decalTexture = new core_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__.Texture("", _this.getScene());
+        _this._reflectionMapTexture = new core_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__.Texture("", _this.getScene());
+        _this._indirectEnvTexture = new core_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__.Texture("", _this.getScene());
         return _this;
     }
     MRDLSliderThumbMaterial.prototype.needAlphaBlending = function () {