babylonjs-gui 5.40.1 → 5.42.0

package/babylon.gui.d.ts

@@ -980,7 +980,7 @@ declare module BABYLON.GUI {
         /** @internal */
         _prevCurrentMeasureTransformedIntoGlobalSpace: Measure;
         /** @internal */
-        protected _cachedParentMeasure: Measure;
+        _cachedParentMeasure: Measure;
         private _descendantsOnlyPadding;
         private _paddingLeft;
         private _paddingRight;
@@ -1564,7 +1564,7 @@ declare module BABYLON.GUI {
         /** @internal */
         protected _computeAdditionnalOffsetY(): number;
         /** @internal */
-        protected invalidateRect(): void;
+        invalidateRect(): void;
         /**
          * @internal
          */
@@ -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;
     }
 
@@ -2527,14 +2540,13 @@ declare module BABYLON.GUI {
          * @internal
          */
         protected _preMeasure(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void;
+        private _computeScroll;
         /**
          * Processing of child after the parent measurement update
          *
-         * @param parentMeasure The parent measure
-         * @param context The rendering canvas
          * @internal
          */
-        protected _additionalProcessing(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void;
+        protected _additionalProcessing(): void;
         private _drawText;
         /**
          * Copy the text in the clipboard
@@ -2590,10 +2602,14 @@ declare module BABYLON.GUI {
     export class Line extends Control {
         name?: string | undefined;
         private _lineWidth;
-        private _x1;
-        private _y1;
-        private _x2;
-        private _y2;
+        /** @internal */
+        _x1: ValueAndUnit;
+        /** @internal */
+        _y1: ValueAndUnit;
+        /** @internal */
+        _x2: ValueAndUnit;
+        /** @internal */
+        _y2: ValueAndUnit;
         private _dash;
         private _connectedControl;
         private _connectedControlDirtyObserver;
@@ -2622,8 +2638,10 @@ declare module BABYLON.GUI {
         set horizontalAlignment(value: number);
         /** Gets or sets vertical alignment */
         set verticalAlignment(value: number);
-        private get _effectiveX2();
-        private get _effectiveY2();
+        /** @internal */
+        get _effectiveX2(): number;
+        /** @internal */
+        get _effectiveY2(): number;
         /**
          * Creates a new Line
          * @param name defines the control name

package/babylon.gui.js

@@ -1191,8 +1191,12 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                     return "continue";
                 }
                 control.notRenderable = false;
+                if (this_1.useInvalidateRectOptimization) {
+                    control.invalidateRect();
+                }
                 control._moveToProjectedPosition(projectedPosition);
             };
+            var this_1 = this;
             for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
                 var control = _a[_i];
                 _loop_1(control);
@@ -8402,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;
@@ -8413,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();
             };
@@ -8426,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
@@ -8760,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;
@@ -9490,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) {
@@ -9518,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();
@@ -9540,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
@@ -9564,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;
                             }
@@ -9575,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
@@ -9599,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;
@@ -9627,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;
                             }
@@ -9636,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
@@ -9661,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)) {
@@ -9676,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;
@@ -9701,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();
                 }
@@ -9739,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();
     };
     /**
@@ -9761,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;
@@ -9771,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;
@@ -9791,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);
@@ -9808,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 {
@@ -9936,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);
                 }
             }
@@ -9946,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;
@@ -9994,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;
@@ -10028,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();
@@ -10702,17 +10752,9 @@ var InputTextArea = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * Processing of child after the parent measurement update
-     *
-     * @param parentMeasure The parent measure
-     * @param context The rendering canvas
-     * @internal
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    InputTextArea.prototype._additionalProcessing = function (parentMeasure, context) {
-        this._clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, parentMeasure.width);
-        this._clipTextTop = this._currentMeasure.top + this._margin.getValueInPixel(this._host, parentMeasure.height);
+    InputTextArea.prototype._computeScroll = function () {
+        this._clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        this._clipTextTop = this._currentMeasure.top + this._margin.getValueInPixel(this._host, this._cachedParentMeasure.height);
         if (this._isFocused && this._lines[this._cursorInfo.currentLineIndex].width > this._availableWidth) {
             var textLeft = this._clipTextLeft - this._lines[this._cursorInfo.currentLineIndex].width + this._availableWidth;
             if (!this._scrollLeft) {
@@ -10732,6 +10774,13 @@ var InputTextArea = /** @class */ (function (_super) {
         else {
             this._scrollTop = this._clipTextTop;
         }
+    };
+    /**
+     * Processing of child after the parent measurement update
+     *
+     * @internal
+     */
+    InputTextArea.prototype._additionalProcessing = function () {
         // Flush the highlighted text each frame
         this.highlightedText = "";
         this.onLinesReadyObservable.notifyObservers(this);
@@ -10819,6 +10868,7 @@ var InputTextArea = /** @class */ (function (_super) {
     };
     InputTextArea.prototype._draw = function (context) {
         var _a, _b;
+        this._computeScroll();
         this._scrollLeft = (_a = this._scrollLeft) !== null && _a !== void 0 ? _a : 0;
         this._scrollTop = (_b = this._scrollTop) !== null && _b !== void 0 ? _b : 0;
         context.save();
@@ -11221,9 +11271,13 @@ var Line = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         _this.name = name;
         _this._lineWidth = 1;
+        /** @internal */
         _this._x1 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__.ValueAndUnit(0);
+        /** @internal */
         _this._y1 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__.ValueAndUnit(0);
+        /** @internal */
         _this._x2 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__.ValueAndUnit(0);
+        /** @internal */
         _this._y2 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__.ValueAndUnit(0);
         _this._dash = new Array();
         _this._automaticSize = true;
@@ -11366,6 +11420,7 @@ var Line = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(Line.prototype, "_effectiveX2", {
+        /** @internal */
         get: function () {
             return (this._connectedControl ? this._connectedControl.centerX : 0) + this._x2.getValue(this._host);
         },
@@ -11373,6 +11428,7 @@ var Line = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(Line.prototype, "_effectiveY2", {
+        /** @internal */
         get: function () {
             return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
         },
@@ -21951,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);
@@ -21958,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;
@@ -21971,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;
                 }
@@ -29026,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 () {