babylonjs-gui 5.41.0 → 5.42.0

package/babylon.gui.d.ts

@@ -2063,6 +2063,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 +2173,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 +2439,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

@@ -8406,6 +8406,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 +8418,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 +8441,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 +8791,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 +9523,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 +9551,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 +9573,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 +9597,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 +9608,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 +9632,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 +9660,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 +9669,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 +9694,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 +9709,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 +9734,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 +9772,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 +9794,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 +9803,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 +9823,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 +9840,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 +9968,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 +9978,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 +10026,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 +10060,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 +22007,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 +22018,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 +22030,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 +29084,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 () {