babylonjs-gui 5.28.0 → 5.30.0

package/babylon.gui.d.ts

@@ -556,7 +556,7 @@ declare module BABYLON.GUI {
         get image(): BABYLON.Nullable<Image>;
         private _textBlock;
         /**
-         * Returns the image part of the button (if any)
+         * Returns the TextBlock part of the button (if any)
          */
         get textBlock(): BABYLON.Nullable<TextBlock>;
         /**
@@ -858,6 +858,14 @@ declare module BABYLON.GUI {
          * @returns the current container
          */
         removeControl(control: Control): Container;
+        /**
+         * An event triggered when any control is added to this container.
+         */
+        onControlAddedObservable: BABYLON.Observable<BABYLON.Nullable<Control>>;
+        /**
+         * An event triggered when any control is removed from this container.
+         */
+        onControlRemovedObservable: BABYLON.Observable<BABYLON.Nullable<Control>>;
         /**
          * @internal
          */
@@ -1098,6 +1106,14 @@ declare module BABYLON.GUI {
          * @returns current class name
          */
         getClassName(): string;
+        /**
+         * Gets or sets the accessibility tag to describe the control for accessibility purpose.
+         * By default, GUI controls already indicate accessibility info, but one can override the info using this tag.
+         */
+        set accessibilityTag(value: BABYLON.Nullable<BABYLON.IAccessibilityTag>);
+        get accessibilityTag(): BABYLON.Nullable<BABYLON.IAccessibilityTag>;
+        protected _accessibilityTag: BABYLON.Nullable<BABYLON.IAccessibilityTag>;
+        onAccessibilityTagChangedObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.IAccessibilityTag>>;
         /**
          * An event triggered when pointer wheel is scrolled
          */
@@ -1142,6 +1158,10 @@ declare module BABYLON.GUI {
          * An event triggered when the control has been disposed
          */
         onDisposeObservable: BABYLON.Observable<Control>;
+        /**
+         * An event triggered when the control isVisible is changed
+         */
+        onIsVisibleChangedObservable: BABYLON.Observable<boolean>;
         /**
          * Get the hosting AdvancedDynamicTexture
          */
@@ -2001,6 +2021,10 @@ declare module BABYLON.GUI {
      */
     export class Image extends Control {
         name?: string | undefined;
+        /**
+         *  Specifies an alternate text for the image, if the image for some reason cannot be displayed.
+         */
+        alt?: string;
         private _workingCanvas;
         private _domImage;
         private _imageWidth;

package/babylon.gui.js

@@ -451,7 +451,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "AdvancedDynamicTexture": () => (/* binding */ AdvancedDynamicTexture)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/typeStore */ "core/Misc/observable");
+/* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/stringTools */ "core/Misc/observable");
 /* 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 _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "../../../lts/gui/dist/2D/controls/container.js");
 /* harmony import */ var _controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./controls/control */ "../../../lts/gui/dist/2D/controls/control.js");
@@ -476,6 +476,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 /**
  * Class used to create texture to support 2D GUI elements
@@ -1490,6 +1491,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (!scene) {
             return;
         }
+        if (this._pointerObserver) {
+            scene.onPointerObservable.remove(this._pointerObserver);
+        }
         this._pointerObserver = scene.onPointerObservable.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 &&
@@ -1751,7 +1755,14 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             request.addEventListener("readystatechange", function () {
                 if (request.readyState == 4) {
                     if (request.status == 200) {
-                        var gui = snippet ? JSON.parse(JSON.parse(request.responseText).jsonPayload).gui : request.responseText;
+                        var gui = void 0;
+                        if (snippet) {
+                            var payload = JSON.parse(JSON.parse(request.responseText).jsonPayload);
+                            gui = payload.encodedGui ? new TextDecoder("utf-8").decode((0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.DecodeBase64ToBinary)(payload.encodedGui)) : payload.gui;
+                        }
+                        else {
+                            gui = request.responseText;
+                        }
                         var serializationObject = JSON.parse(gui);
                         resolve(serializationObject);
                     }
@@ -1973,7 +1984,7 @@ var Button = /** @class */ (function (_super) {
     });
     Object.defineProperty(Button.prototype, "textBlock", {
         /**
-         * Returns the image part of the button (if any)
+         * Returns the TextBlock part of the button (if any)
          */
         get: function () {
             return this._textBlock;
@@ -3822,7 +3833,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "Container": () => (/* binding */ Container)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Engines/constants */ "core/Misc/observable");
+/* harmony import */ var core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/observable */ "core/Misc/observable");
 /* harmony import */ var core_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "../../../lts/gui/dist/2D/controls/control.js");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "../../../lts/gui/dist/2D/measure.js");
@@ -3835,6 +3846,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Root class for 2D containers
  * @see https://doc.babylonjs.com/how_to/gui#containers
@@ -3870,6 +3882,14 @@ var Container = /** @class */ (function (_super) {
          * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
          */
         _this.maxLayoutCycle = 3;
+        /**
+         * An event triggered when any control is added to this container.
+         */
+        _this.onControlAddedObservable = new core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__.Observable();
+        /**
+         * An event triggered when any control is removed from this container.
+         */
+        _this.onControlRemovedObservable = new core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__.Observable();
         return _this;
     }
     Object.defineProperty(Container.prototype, "renderToIntermediateTexture", {
@@ -4024,6 +4044,7 @@ var Container = /** @class */ (function (_super) {
         control._markAllAsDirty();
         this._reOrderControl(control);
         this._markAsDirty();
+        this.onControlAddedObservable.notifyObservers(control);
         return this;
     };
     /**
@@ -4054,6 +4075,7 @@ var Container = /** @class */ (function (_super) {
             this._host._cleanControlAfterRemoval(control);
         }
         this._markAsDirty();
+        this.onControlRemovedObservable.notifyObservers(control);
         return this;
     };
     /**
@@ -4545,6 +4567,8 @@ var Control = /** @class */ (function () {
         this._linkOffsetX = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__.ValueAndUnit(0);
         /** @internal */
         this._linkOffsetY = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__.ValueAndUnit(0);
+        this._accessibilityTag = null;
+        this.onAccessibilityTagChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Observable();
         /**
          * An event triggered when pointer wheel is scrolled
          */
@@ -4589,6 +4613,10 @@ var Control = /** @class */ (function () {
          * An event triggered when the control has been disposed
          */
         this.onDisposeObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Observable();
+        /**
+         * An event triggered when the control isVisible is changed
+         */
+        this.onIsVisibleChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Observable();
         /**
          * Gets or sets a fixed ratio for this control.
          * When different from 0, the ratio is used to compute the "second" dimension.
@@ -4704,6 +4732,21 @@ var Control = /** @class */ (function () {
     Control.prototype.getClassName = function () {
         return this._getTypeName();
     };
+    Object.defineProperty(Control.prototype, "accessibilityTag", {
+        get: function () {
+            return this._accessibilityTag;
+        },
+        /**
+         * Gets or sets the accessibility tag to describe the control for accessibility purpose.
+         * By default, GUI controls already indicate accessibility info, but one can override the info using this tag.
+         */
+        set: function (value) {
+            this._accessibilityTag = value;
+            this.onAccessibilityTagChangedObservable.notifyObservers(value);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "host", {
         /**
          * Get the hosting AdvancedDynamicTexture
@@ -5167,6 +5210,7 @@ var Control = /** @class */ (function () {
             }
             this._isVisible = value;
             this._markAsDirty(true);
+            this.onIsVisibleChangedObservable.notifyObservers(value);
         },
         enumerable: false,
         configurable: true
@@ -15303,13 +15347,13 @@ var StackPanel = /** @class */ (function (_super) {
         // User can now define their own height and width for stack panel.
         var panelWidthChanged = false;
         var panelHeightChanged = false;
-        if (!this._manualHeight && this._isVertical) {
+        if ((!this._manualHeight || this.adaptHeightToChildren) && this._isVertical) {
             // do not specify height if strictly defined by user
             var previousHeight = this.height;
             this.height = stackHeight + "px";
             panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
         }
-        if (!this._manualWidth && !this._isVertical) {
+        if ((!this._manualWidth || this.adaptWidthToChildren) && !this._isVertical) {
             // do not specify width if strictly defined by user
             var previousWidth = this.width;
             this.width = stackWidth + "px";