babylonjs-gui 5.15.0 → 5.17.0

package/babylon.gui.d.ts

@@ -66,7 +66,7 @@ declare module BABYLON.GUI {
         private _renderObserver;
         private _resizeObserver;
         private _preKeyboardObserver;
-        private _pointerMoveObserver;
+        private _prePointerObserver;
         private _sceneRenderObserver;
         private _pointerObserver;
         private _canvasPointerOutObserver;
@@ -414,21 +414,45 @@ declare module BABYLON.GUI {
          * @param serializedObject define the JSON serialized object to restore from
          * @param scaleToSize defines whether to scale to texture to the saved size
          */
-        parseContent(serializedObject: any, scaleToSize?: boolean): void;
+        parseSerializedObject(serializedObject: any, scaleToSize?: boolean): void;
+        /**
+         * Recreate the content of the ADT from a JSON object
+         * @param serializedObject define the JSON serialized object to restore from
+         * @param scaleToSize defines whether to scale to texture to the saved size
+         * @deprecated Please use parseSerializedObject instead
+         */
+        parseContent: (serializedObject: any, scaleToSize?: boolean | undefined) => void;
+        /**
+         * Recreate the content of the ADT from a snippet saved by the GUI editor
+         * @param snippetId defines the snippet to load
+         * @param scaleToSize defines whether to scale to texture to the saved size
+         * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created.
+         * @returns a promise that will resolve on success
+         */
+        static ParseFromSnippetAsync(snippetId: string, scaleToSize?: boolean, appendToAdt?: AdvancedDynamicTexture): Promise<AdvancedDynamicTexture>;
         /**
          * Recreate the content of the ADT from a snippet saved by the GUI editor
          * @param snippetId defines the snippet to load
          * @param scaleToSize defines whether to scale to texture to the saved size
          * @returns a promise that will resolve on success
          */
-        parseFromSnippetAsync(snippetId: string, scaleToSize?: boolean): Promise<void>;
+        parseFromSnippetAsync(snippetId: string, scaleToSize?: boolean): Promise<AdvancedDynamicTexture>;
+        /**
+         * Recreate the content of the ADT from a url json
+         * @param url defines the url to load
+         * @param scaleToSize defines whether to scale to texture to the saved size
+         * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created.
+         * @returns a promise that will resolve on success
+         */
+        static ParseFromFileAsync(url: string, scaleToSize?: boolean, appendToAdt?: AdvancedDynamicTexture): Promise<AdvancedDynamicTexture>;
         /**
          * Recreate the content of the ADT from a url json
          * @param url defines the url to load
          * @param scaleToSize defines whether to scale to texture to the saved size
          * @returns a promise that will resolve on success
          */
-        parseFromURLAsync(url: string, scaleToSize?: boolean): Promise<void>;
+        parseFromURLAsync(url: string, scaleToSize?: boolean): Promise<AdvancedDynamicTexture>;
+        private static _LoadURLContentAsync;
         /**
          * Compares two rectangle based controls for pixel overlap
          * @param control1 The first control to compare
@@ -1063,7 +1087,13 @@ declare module BABYLON.GUI {
         metadata: any;
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         isHitTestVisible: boolean;
-        /** Gets or sets a boolean indicating if the control can block pointer events */
+        /** Gets or sets a boolean indicating if the control can block pointer events. False by default except on the following controls:
+         * * Button controls (Button, RadioButton, ToggleButton)
+         * * Checkbox
+         * * ColorPicker
+         * * InputText
+         * * Slider
+         */
         isPointerBlocker: boolean;
         /** Gets or sets a boolean indicating if the control can be focusable */
         isFocusInvisible: boolean;
@@ -4053,7 +4083,7 @@ declare module BABYLON.GUI {
         private _connectedInputTexts;
         private _onKeyPressObserver;
         /** Gets the input text control currently attached to the keyboard */
-        get connectedInputText(): BABYLON.Nullable<InputText>;
+        get connectedInputText(): BABYLON.Nullable<InputText | InputTextArea>;
         /**
          * Connects the keyboard with an input text control
          *
@@ -4735,13 +4765,13 @@ declare module BABYLON.GUI {
     export class Control3D implements BABYLON.IDisposable, BABYLON.IBehaviorAware<Control3D> {
         /** Defines the control name */
         name?: string | undefined;
-        /** @hidden */
-        _host: GUI3DManager;
         private _node;
         private _downCount;
         private _enterCount;
         private _downPointerIds;
-        private _isVisible;
+        protected _isVisible: boolean;
+        /** @hidden */
+        _host: GUI3DManager;
         /** @hidden */
         _isScaledByManager: boolean;
         /** Gets or sets the control position in world space */
@@ -5355,6 +5385,8 @@ declare module BABYLON.GUI {
          * Gets the slider backplate material used by this control
          */
         get sliderBackplateMaterial(): MRDLBackplateMaterial;
+        /** Sets a boolean indicating if the control is visible */
+        set isVisible(value: boolean);
         protected _createNode(scene: BABYLON.Scene): BABYLON.TransformNode;
         protected _affectMaterial(mesh: BABYLON.AbstractMesh): void;
         private _createBehavior;

package/babylon.gui.js

@@ -603,6 +603,13 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             _this.onClipboardObservable.notifyObservers(ev);
             evt.preventDefault();
         };
+        /**
+         * Recreate the content of the ADT from a JSON object
+         * @param serializedObject define the JSON serialized object to restore from
+         * @param scaleToSize defines whether to scale to texture to the saved size
+         * @deprecated Please use parseSerializedObject instead
+         */
+        _this.parseContent = _this.parseSerializedObject;
         scene = _this.getScene();
         if (!scene || !_this._texture) {
             return _this;
@@ -1048,8 +1055,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (this._resizeObserver) {
             scene.getEngine().onResizeObservable.remove(this._resizeObserver);
         }
-        if (this._pointerMoveObserver) {
-            scene.onPrePointerObservable.remove(this._pointerMoveObserver);
+        if (this._prePointerObserver) {
+            scene.onPrePointerObservable.remove(this._prePointerObserver);
         }
         if (this._sceneRenderObserver) {
             scene.onBeforeRenderObservable.remove(this._sceneRenderObserver);
@@ -1261,6 +1268,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             y = y * (textureSize.height / (engine.getRenderHeight() * viewport.height));
         }
         if (this._capturingControl[pointerId]) {
+            if (this._capturingControl[pointerId].isPointerBlocker) {
+                this._shouldBlockPointer = true;
+            }
             this._capturingControl[pointerId]._processObservables(type, x, y, pi, pointerId, buttonIndex);
             return;
         }
@@ -1368,18 +1378,21 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             return;
         }
         var tempViewport = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Viewport(0, 0, 0, 0);
-        this._pointerMoveObserver = scene.onPrePointerObservable.add(function (pi) {
-            if (scene.isPointerCaptured(pi.event.pointerId)) {
-                return;
-            }
+        this._prePointerObserver = scene.onPrePointerObservable.add(function (pi) {
             if (pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE &&
                 pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERUP &&
                 pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERDOWN &&
                 pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERWHEEL) {
                 return;
             }
-            if (pi.type === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE && pi.event.pointerId) {
-                _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
+            if (pi.type === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE) {
+                // Avoid pointerMove events firing while the pointer is captured by the scene
+                if (scene.isPointerCaptured(pi.event.pointerId)) {
+                    return;
+                }
+                if (pi.event.pointerId) {
+                    _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
+                }
             }
             _this._translateToPicking(scene, tempViewport, pi);
         });
@@ -1568,7 +1581,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
      * @param serializedObject define the JSON serialized object to restore from
      * @param scaleToSize defines whether to scale to texture to the saved size
      */
-    AdvancedDynamicTexture.prototype.parseContent = function (serializedObject, scaleToSize) {
+    AdvancedDynamicTexture.prototype.parseSerializedObject = function (serializedObject, scaleToSize) {
         this._rootContainer = _controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(serializedObject.root, this);
         if (scaleToSize) {
             var width = serializedObject.width;
@@ -1582,6 +1595,32 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             }
         }
     };
+    /**
+     * Recreate the content of the ADT from a snippet saved by the GUI editor
+     * @param snippetId defines the snippet to load
+     * @param scaleToSize defines whether to scale to texture to the saved size
+     * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created.
+     * @returns a promise that will resolve on success
+     */
+    AdvancedDynamicTexture.ParseFromSnippetAsync = function (snippetId, scaleToSize, appendToAdt) {
+        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
+            var adt, serialized;
+            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        adt = appendToAdt !== null && appendToAdt !== void 0 ? appendToAdt : AdvancedDynamicTexture.CreateFullscreenUI("ADT from snippet");
+                        if (snippetId === "_BLANK") {
+                            return [2 /*return*/, adt];
+                        }
+                        return [4 /*yield*/, AdvancedDynamicTexture._LoadURLContentAsync(AdvancedDynamicTexture.SnippetUrl + "/" + snippetId.replace(/#/g, "/"), true)];
+                    case 1:
+                        serialized = _a.sent();
+                        adt.parseSerializedObject(serialized, scaleToSize);
+                        return [2 /*return*/, adt];
+                }
+            });
+        });
+    };
     /**
      * Recreate the content of the ADT from a snippet saved by the GUI editor
      * @param snippetId defines the snippet to load
@@ -1589,28 +1628,29 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
      * @returns a promise that will resolve on success
      */
     AdvancedDynamicTexture.prototype.parseFromSnippetAsync = function (snippetId, scaleToSize) {
-        var _this = this;
-        if (snippetId === "_BLANK") {
-            return Promise.resolve();
-        }
-        return new Promise(function (resolve, reject) {
-            var request = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.WebRequest();
-            request.addEventListener("readystatechange", function () {
-                if (request.readyState == 4) {
-                    if (request.status == 200) {
-                        var snippet = JSON.parse(JSON.parse(request.responseText).jsonPayload);
-                        var serializationObject = JSON.parse(snippet.gui);
-                        _this.parseContent(serializationObject, scaleToSize);
-                        _this.snippetId = snippetId;
-                        resolve();
-                    }
-                    else {
-                        reject("Unable to load the snippet " + snippetId);
-                    }
+        return AdvancedDynamicTexture.ParseFromSnippetAsync(snippetId, scaleToSize, this);
+    };
+    /**
+     * Recreate the content of the ADT from a url json
+     * @param url defines the url to load
+     * @param scaleToSize defines whether to scale to texture to the saved size
+     * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created.
+     * @returns a promise that will resolve on success
+     */
+    AdvancedDynamicTexture.ParseFromFileAsync = function (url, scaleToSize, appendToAdt) {
+        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
+            var adt, serialized;
+            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        adt = appendToAdt !== null && appendToAdt !== void 0 ? appendToAdt : AdvancedDynamicTexture.CreateFullscreenUI("ADT from URL");
+                        return [4 /*yield*/, AdvancedDynamicTexture._LoadURLContentAsync(url)];
+                    case 1:
+                        serialized = _a.sent();
+                        adt.parseSerializedObject(serialized, scaleToSize);
+                        return [2 /*return*/, adt];
                 }
             });
-            request.open("GET", AdvancedDynamicTexture.SnippetUrl + "/" + snippetId.replace(/#/g, "/"));
-            request.send();
         });
     };
     /**
@@ -1620,19 +1660,21 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
      * @returns a promise that will resolve on success
      */
     AdvancedDynamicTexture.prototype.parseFromURLAsync = function (url, scaleToSize) {
-        var _this = this;
+        return AdvancedDynamicTexture.ParseFromFileAsync(url, scaleToSize, this);
+    };
+    AdvancedDynamicTexture._LoadURLContentAsync = function (url, snippet) {
+        if (snippet === void 0) { snippet = false; }
         if (url === "") {
-            return Promise.resolve();
+            return Promise.reject("No URL provided");
         }
         return new Promise(function (resolve, reject) {
             var request = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.WebRequest();
             request.addEventListener("readystatechange", function () {
                 if (request.readyState == 4) {
                     if (request.status == 200) {
-                        var gui = request.responseText;
+                        var gui = snippet ? JSON.parse(JSON.parse(request.responseText).jsonPayload).gui : request.responseText;
                         var serializationObject = JSON.parse(gui);
-                        _this.parseContent(serializationObject, scaleToSize);
-                        resolve();
+                        resolve(serializationObject);
                     }
                     else {
                         reject("Unable to load");
@@ -4446,7 +4488,13 @@ var Control = /** @class */ (function () {
         this.metadata = null;
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         this.isHitTestVisible = true;
-        /** Gets or sets a boolean indicating if the control can block pointer events */
+        /** Gets or sets a boolean indicating if the control can block pointer events. False by default except on the following controls:
+         * * Button controls (Button, RadioButton, ToggleButton)
+         * * Checkbox
+         * * ColorPicker
+         * * InputText
+         * * Slider
+         */
         this.isPointerBlocker = false;
         /** Gets or sets a boolean indicating if the control can be focusable */
         this.isFocusInvisible = false;
@@ -6278,7 +6326,7 @@ var Control = /** @class */ (function () {
      */
     Control.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
         var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this, pi);
-        if (canNotify && this.parent != null) {
+        if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerMove(target, coordinates, pointerId, pi);
         }
     };
@@ -6300,7 +6348,7 @@ var Control = /** @class */ (function () {
         }
         this._enterCount++;
         var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this, pi);
-        if (canNotify && this.parent != null) {
+        if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerEnter(target, pi);
         }
         return true;
@@ -6321,7 +6369,7 @@ var Control = /** @class */ (function () {
         if (!target.isAscendant(this)) {
             canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this, pi);
         }
-        if (canNotify && this.parent != null) {
+        if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerOut(target, pi, force);
         }
     };
@@ -6343,7 +6391,7 @@ var Control = /** @class */ (function () {
         this._downCount++;
         this._downPointerIds[pointerId] = true;
         var canNotify = this.onPointerDownObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_4__.Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
-        if (canNotify && this.parent != null) {
+        if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
         }
         return true;
@@ -6368,7 +6416,7 @@ var Control = /** @class */ (function () {
             canNotifyClick = this.onPointerClickObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_4__.Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
         }
         var canNotify = this.onPointerUpObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_4__.Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
-        if (canNotify && this.parent != null) {
+        if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick, pi);
         }
     };
@@ -7744,12 +7792,12 @@ var Grid = /** @class */ (function (_super) {
         for (var index = 0; index < this._columnDefinitions.length; index++) {
             this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
         }
-        this._rowDefinitionObservers = [];
-        this._rowDefinitions = [];
-        this._columnDefinitionObservers = [];
-        this._columnDefinitions = [];
+        this._rowDefinitionObservers.length = 0;
+        this._rowDefinitions.length = 0;
+        this._columnDefinitionObservers.length = 0;
+        this._columnDefinitions.length = 0;
         this._cells = {};
-        this._childControls = [];
+        this._childControls.length = 0;
     };
     /**
      * Serializes the current control
@@ -16509,6 +16557,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "../../../lts/gui/dist/2D/controls/stackPanel.js");
 /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "../../../lts/gui/dist/2D/controls/button.js");
+/* harmony import */ var _inputTextArea__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./inputTextArea */ "../../../lts/gui/dist/2D/controls/inputTextArea.js");
+
 
 
 
@@ -16670,13 +16720,28 @@ var VirtualKeyboard = /** @class */ (function (_super) {
                         _this.applyShiftState(_this.shiftState);
                         return;
                     case "\u2190":
-                        _this._currentlyConnectedInputText.processKey(8);
+                        if (_this._currentlyConnectedInputText instanceof _inputTextArea__WEBPACK_IMPORTED_MODULE_4__.InputTextArea) {
+                            _this._currentlyConnectedInputText.alternativeProcessKey("Backspace");
+                        }
+                        else {
+                            _this._currentlyConnectedInputText.processKey(8);
+                        }
                         return;
                     case "\u21B5":
-                        _this._currentlyConnectedInputText.processKey(13);
+                        if (_this._currentlyConnectedInputText instanceof _inputTextArea__WEBPACK_IMPORTED_MODULE_4__.InputTextArea) {
+                            _this._currentlyConnectedInputText.alternativeProcessKey("Enter");
+                        }
+                        else {
+                            _this._currentlyConnectedInputText.processKey(13);
+                        }
                         return;
                 }
-                _this._currentlyConnectedInputText.processKey(-1, _this.shiftState ? key.toUpperCase() : key);
+                if (_this._currentlyConnectedInputText instanceof _inputTextArea__WEBPACK_IMPORTED_MODULE_4__.InputTextArea) {
+                    _this._currentlyConnectedInputText.alternativeProcessKey("", _this.shiftState ? key.toUpperCase() : key);
+                }
+                else {
+                    _this._currentlyConnectedInputText.processKey(-1, _this.shiftState ? key.toUpperCase() : key);
+                }
                 if (_this.shiftState === 1) {
                     _this.shiftState = 0;
                     _this.applyShiftState(_this.shiftState);
@@ -16725,7 +16790,7 @@ var VirtualKeyboard = /** @class */ (function (_super) {
             this._connectedInputTexts.forEach(function (connectedInputText) {
                 _this._removeConnectedInputObservables(connectedInputText);
             });
-            this._connectedInputTexts = [];
+            this._connectedInputTexts.length = 0;
         }
         if (this._connectedInputTexts.length === 0) {
             this._currentlyConnectedInputText = null;
@@ -18559,7 +18624,7 @@ var Container3D = /** @class */ (function (_super) {
             var control = _a[_i];
             control.dispose();
         }
-        this._children = [];
+        this._children.length = 0;
         _super.prototype.dispose.call(this);
     };
     /** Control rotation will remain unchanged  */
@@ -20894,6 +20959,19 @@ var Slider3D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Slider3D.prototype, "isVisible", {
+        /** Sets a boolean indicating if the control is visible */
+        set: function (value) {
+            var _a;
+            if (this._isVisible === value) {
+                return;
+            }
+            this._isVisible = value;
+            (_a = this.node) === null || _a === void 0 ? void 0 : _a.setEnabled(value);
+        },
+        enumerable: false,
+        configurable: true
+    });
     // Mesh association
     Slider3D.prototype._createNode = function (scene) {
         var _this = this;
@@ -20944,6 +21022,10 @@ var Slider3D = /** @class */ (function (_super) {
                 }
                 _this._sliderThumb = sliderThumbModel;
             }
+            _this._injectGUI3DReservedDataStore(sliderBackplate).control = _this;
+            sliderBackplate.getChildMeshes().forEach(function (mesh) {
+                _this._injectGUI3DReservedDataStore(mesh).control = _this;
+            });
         });
         this._affectMaterial(sliderBackplate);
         return sliderBackplate;