@babylonjs/gui 5.21.0 → 5.23.0

package/2D/controls/container.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { Logger } from "@babylonjs/core/Misc/logger.js";
 import { Control } from "./control.js";
 import { Measure } from "../measure.js";
@@ -11,184 +11,154 @@ import { Constants } from "@babylonjs/core/Engines/constants.js";
  * Root class for 2D containers
  * @see https://doc.babylonjs.com/how_to/gui#containers
  */
-var Container = /** @class */ (function (_super) {
-    __extends(Container, _super);
+export class Container extends Control {
     /**
      * Creates a new Container
      * @param name defines the name of the container
      */
-    function Container(name) {
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
+    constructor(name) {
+        super(name);
+        this.name = name;
         /** @hidden */
-        _this._children = new Array();
+        this._children = new Array();
         /** @hidden */
-        _this._measureForChildren = Measure.Empty();
+        this._measureForChildren = Measure.Empty();
         /** @hidden */
-        _this._background = "";
+        this._background = "";
         /** @hidden */
-        _this._adaptWidthToChildren = false;
+        this._adaptWidthToChildren = false;
         /** @hidden */
-        _this._adaptHeightToChildren = false;
+        this._adaptHeightToChildren = false;
         /** @hidden */
-        _this._renderToIntermediateTexture = false;
+        this._renderToIntermediateTexture = false;
         /** @hidden */
-        _this._intermediateTexture = null;
+        this._intermediateTexture = null;
         /**
          * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
          */
-        _this.logLayoutCycleErrors = false;
+        this.logLayoutCycleErrors = false;
         /**
          * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
          */
-        _this.maxLayoutCycle = 3;
-        return _this;
-    }
-    Object.defineProperty(Container.prototype, "renderToIntermediateTexture", {
-        /** Gets or sets boolean indicating if children should be rendered to an intermediate texture rather than directly to host, useful for alpha blending */
-        get: function () {
-            return this._renderToIntermediateTexture;
-        },
-        set: function (value) {
-            if (this._renderToIntermediateTexture === value) {
-                return;
-            }
-            this._renderToIntermediateTexture = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Container.prototype, "adaptHeightToChildren", {
-        /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
-        get: function () {
-            return this._adaptHeightToChildren;
-        },
-        set: function (value) {
-            if (this._adaptHeightToChildren === value) {
-                return;
-            }
-            this._adaptHeightToChildren = value;
-            if (value) {
-                this.height = "100%";
-            }
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Container.prototype, "adaptWidthToChildren", {
-        /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
-        get: function () {
-            return this._adaptWidthToChildren;
-        },
-        set: function (value) {
-            if (this._adaptWidthToChildren === value) {
-                return;
-            }
-            this._adaptWidthToChildren = value;
-            if (value) {
-                this.width = "100%";
-            }
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Container.prototype, "background", {
-        /** Gets or sets background color */
-        get: function () {
-            return this._background;
-        },
-        set: function (value) {
-            if (this._background === value) {
-                return;
-            }
-            this._background = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Container.prototype, "children", {
-        /** Gets the list of children */
-        get: function () {
-            return this._children;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Container.prototype, "isReadOnly", {
-        get: function () {
-            return this._isReadOnly;
-        },
-        set: function (value) {
-            this._isReadOnly = value;
-            for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-                var child = _a[_i];
-                child.isReadOnly = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Container.prototype._getTypeName = function () {
+        this.maxLayoutCycle = 3;
+    }
+    /** Gets or sets boolean indicating if children should be rendered to an intermediate texture rather than directly to host, useful for alpha blending */
+    get renderToIntermediateTexture() {
+        return this._renderToIntermediateTexture;
+    }
+    set renderToIntermediateTexture(value) {
+        if (this._renderToIntermediateTexture === value) {
+            return;
+        }
+        this._renderToIntermediateTexture = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
+    get adaptHeightToChildren() {
+        return this._adaptHeightToChildren;
+    }
+    set adaptHeightToChildren(value) {
+        if (this._adaptHeightToChildren === value) {
+            return;
+        }
+        this._adaptHeightToChildren = value;
+        if (value) {
+            this.height = "100%";
+        }
+        this._markAsDirty();
+    }
+    /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
+    get adaptWidthToChildren() {
+        return this._adaptWidthToChildren;
+    }
+    set adaptWidthToChildren(value) {
+        if (this._adaptWidthToChildren === value) {
+            return;
+        }
+        this._adaptWidthToChildren = value;
+        if (value) {
+            this.width = "100%";
+        }
+        this._markAsDirty();
+    }
+    /** Gets or sets background color */
+    get background() {
+        return this._background;
+    }
+    set background(value) {
+        if (this._background === value) {
+            return;
+        }
+        this._background = value;
+        this._markAsDirty();
+    }
+    /** Gets the list of children */
+    get children() {
+        return this._children;
+    }
+    get isReadOnly() {
+        return this._isReadOnly;
+    }
+    set isReadOnly(value) {
+        this._isReadOnly = value;
+        for (const child of this._children) {
+            child.isReadOnly = value;
+        }
+    }
+    _getTypeName() {
         return "Container";
-    };
-    Container.prototype._flagDescendantsAsMatrixDirty = function () {
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    }
+    _flagDescendantsAsMatrixDirty() {
+        for (const child of this.children) {
             child._isClipped = false;
             child._markMatrixAsDirty();
         }
-    };
+    }
     /**
      * Gets a child using its name
      * @param name defines the child name to look for
      * @returns the child control if found
      */
-    Container.prototype.getChildByName = function (name) {
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    getChildByName(name) {
+        for (const child of this.children) {
             if (child.name === name) {
                 return child;
             }
         }
         return null;
-    };
+    }
     /**
      * Gets a child using its type and its name
      * @param name defines the child name to look for
      * @param type defines the child type to look for
      * @returns the child control if found
      */
-    Container.prototype.getChildByType = function (name, type) {
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    getChildByType(name, type) {
+        for (const child of this.children) {
             if (child.typeName === type) {
                 return child;
             }
         }
         return null;
-    };
+    }
     /**
      * Search for a specific control in children
      * @param control defines the control to look for
      * @returns true if the control is in child list
      */
-    Container.prototype.containsControl = function (control) {
+    containsControl(control) {
         return this.children.indexOf(control) !== -1;
-    };
+    }
     /**
      * Adds a new control to the current container
      * @param control defines the control to add
      * @returns the current container
      */
-    Container.prototype.addControl = function (control) {
+    addControl(control) {
         if (!control) {
             return this;
         }
-        var index = this._children.indexOf(control);
+        const index = this._children.indexOf(control);
         if (index !== -1) {
             return this;
         }
@@ -197,26 +167,25 @@ var Container = /** @class */ (function (_super) {
         this._reOrderControl(control);
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Removes all controls from the current container
      * @returns the current container
      */
-    Container.prototype.clearControls = function () {
-        var children = this.children.slice();
-        for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
-            var child = children_1[_i];
+    clearControls() {
+        const children = this.children.slice();
+        for (const child of children) {
             this.removeControl(child);
         }
         return this;
-    };
+    }
     /**
      * Removes a control from the current container
      * @param control defines the control to remove
      * @returns the current container
      */
-    Container.prototype.removeControl = function (control) {
-        var index = this._children.indexOf(control);
+    removeControl(control) {
+        const index = this._children.indexOf(control);
         if (index !== -1) {
             this._children.splice(index, 1);
             control.parent = null;
@@ -227,16 +196,16 @@ var Container = /** @class */ (function (_super) {
         }
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * @param control
      * @hidden
      */
-    Container.prototype._reOrderControl = function (control) {
-        var linkedMesh = control.linkedMesh;
+    _reOrderControl(control) {
+        const linkedMesh = control.linkedMesh;
         this.removeControl(control);
-        var wasAdded = false;
-        for (var index = 0; index < this._children.length; index++) {
+        let wasAdded = false;
+        for (let index = 0; index < this._children.length; index++) {
             if (this._children[index].zIndex > control.zIndex) {
                 this._children.splice(index, 0, control);
                 wasAdded = true;
@@ -251,41 +220,39 @@ var Container = /** @class */ (function (_super) {
             control.linkWithMesh(linkedMesh);
         }
         this._markAsDirty();
-    };
+    }
     /**
      * @param offset
      * @hidden
      */
-    Container.prototype._offsetLeft = function (offset) {
-        _super.prototype._offsetLeft.call(this, offset);
-        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    _offsetLeft(offset) {
+        super._offsetLeft(offset);
+        for (const child of this._children) {
             child._offsetLeft(offset);
         }
-    };
+    }
     /**
      * @param offset
      * @hidden
      */
-    Container.prototype._offsetTop = function (offset) {
-        _super.prototype._offsetTop.call(this, offset);
-        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    _offsetTop(offset) {
+        super._offsetTop(offset);
+        for (const child of this._children) {
             child._offsetTop(offset);
         }
-    };
+    }
     /** @hidden */
-    Container.prototype._markAllAsDirty = function () {
-        _super.prototype._markAllAsDirty.call(this);
-        for (var index = 0; index < this._children.length; index++) {
+    _markAllAsDirty() {
+        super._markAllAsDirty();
+        for (let index = 0; index < this._children.length; index++) {
             this._children[index]._markAllAsDirty();
         }
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    Container.prototype._localDraw = function (context) {
+    _localDraw(context) {
         if (this._background) {
             context.save();
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -298,30 +265,29 @@ var Container = /** @class */ (function (_super) {
             context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
             context.restore();
         }
-    };
+    }
     /**
      * @param host
      * @hidden
      */
-    Container.prototype._link = function (host) {
-        _super.prototype._link.call(this, host);
-        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    _link(host) {
+        super._link(host);
+        for (const child of this._children) {
             child._link(host);
         }
-    };
+    }
     /** @hidden */
-    Container.prototype._beforeLayout = function () {
+    _beforeLayout() {
         // Do nothing
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Container.prototype._processMeasures = function (parentMeasure, context) {
+    _processMeasures(parentMeasure, context) {
         if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
-            _super.prototype._processMeasures.call(this, parentMeasure, context);
+            super._processMeasures(parentMeasure, context);
             this._evaluateClippingState(parentMeasure);
             if (this._renderToIntermediateTexture) {
                 if (this._intermediateTexture && this._host.getScene() != this._intermediateTexture.getScene()) {
@@ -337,14 +303,13 @@ var Container = /** @class */ (function (_super) {
                 }
             }
         }
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Container.prototype._layout = function (parentMeasure, context) {
-        var _a, _b;
+    _layout(parentMeasure, context) {
         if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
             return false;
         }
@@ -352,18 +317,17 @@ var Container = /** @class */ (function (_super) {
         if (this._isDirty) {
             this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
         }
-        var rebuildCount = 0;
+        let rebuildCount = 0;
         context.save();
         this._applyStates(context);
         this._beforeLayout();
         do {
-            var computedWidth = -1;
-            var computedHeight = -1;
+            let computedWidth = -1;
+            let computedHeight = -1;
             this._rebuildLayout = false;
             this._processMeasures(parentMeasure, context);
             if (!this._isClipped) {
-                for (var _i = 0, _c = this._children; _i < _c.length; _i++) {
-                    var child = _c[_i];
+                for (const child of this._children) {
                     child._tempParentMeasure.copyFrom(this._measureForChildren);
                     if (child._layout(this._measureForChildren, context)) {
                         if (child.isVisible && !child.notRenderable) {
@@ -379,7 +343,7 @@ var Container = /** @class */ (function (_super) {
                 if (this.adaptWidthToChildren && computedWidth >= 0) {
                     computedWidth += this.paddingLeftInPixels + this.paddingRightInPixels;
                     if (this.width !== computedWidth + "px") {
-                        (_a = this.parent) === null || _a === void 0 ? void 0 : _a._markAsDirty();
+                        this.parent?._markAsDirty();
                         this.width = computedWidth + "px";
                         this._width.ignoreAdaptiveScaling = true;
                         this._rebuildLayout = true;
@@ -388,7 +352,7 @@ var Container = /** @class */ (function (_super) {
                 if (this.adaptHeightToChildren && computedHeight >= 0) {
                     computedHeight += this.paddingTopInPixels + this.paddingBottomInPixels;
                     if (this.height !== computedHeight + "px") {
-                        (_b = this.parent) === null || _b === void 0 ? void 0 : _b._markAsDirty();
+                        this.parent?._markAsDirty();
                         this.height = computedHeight + "px";
                         this._height.ignoreAdaptiveScaling = true;
                         this._rebuildLayout = true;
@@ -399,7 +363,7 @@ var Container = /** @class */ (function (_super) {
             rebuildCount++;
         } while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
         if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
-            Logger.Error("Layout cycle detected in GUI (Container name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
+            Logger.Error(`Layout cycle detected in GUI (Container name=${this.name}, uniqueId=${this.uniqueId})`);
         }
         context.restore();
         if (this._isDirty) {
@@ -407,18 +371,18 @@ var Container = /** @class */ (function (_super) {
             this._isDirty = false;
         }
         return true;
-    };
-    Container.prototype._postMeasure = function () {
+    }
+    _postMeasure() {
         // Do nothing by default
-    };
+    }
     /**
      * @param context
      * @param invalidatedRectangle
      * @hidden
      */
-    Container.prototype._draw = function (context, invalidatedRectangle) {
-        var renderToIntermediateTextureThisDraw = this._renderToIntermediateTexture && this._intermediateTexture;
-        var contextToDrawTo = renderToIntermediateTextureThisDraw ? this._intermediateTexture.getContext() : context;
+    _draw(context, invalidatedRectangle) {
+        const renderToIntermediateTextureThisDraw = this._renderToIntermediateTexture && this._intermediateTexture;
+        const contextToDrawTo = renderToIntermediateTextureThisDraw ? this._intermediateTexture.getContext() : context;
         if (renderToIntermediateTextureThisDraw) {
             contextToDrawTo.save();
             contextToDrawTo.translate(-this._currentMeasure.left, -this._currentMeasure.top);
@@ -434,8 +398,7 @@ var Container = /** @class */ (function (_super) {
         if (this.clipChildren) {
             this._clipForChildren(contextToDrawTo);
         }
-        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-            var child = _a[_i];
+        for (const child of this._children) {
             // Only redraw parts of the screen that are invalidated
             if (invalidatedRectangle) {
                 if (!child._intersectsRect(invalidatedRectangle)) {
@@ -452,14 +415,13 @@ var Container = /** @class */ (function (_super) {
             context.restore();
         }
         context.restore();
-    };
-    Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
-        if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
+    }
+    getDescendantsToRef(results, directDescendantsOnly = false, predicate) {
         if (!this.children) {
             return;
         }
-        for (var index = 0; index < this.children.length; index++) {
-            var item = this.children[index];
+        for (let index = 0; index < this.children.length; index++) {
+            const item = this.children[index];
             if (!predicate || predicate(item)) {
                 results.push(item);
             }
@@ -467,7 +429,7 @@ var Container = /** @class */ (function (_super) {
                 item.getDescendantsToRef(results, false, predicate);
             }
         }
-    };
+    }
     /**
      * @param x
      * @param y
@@ -479,19 +441,19 @@ var Container = /** @class */ (function (_super) {
      * @param deltaY
      * @hidden
      */
-    Container.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
+    _processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
         if (!this._isEnabled || !this.isVisible || this.notRenderable) {
             return false;
         }
         // checks if the picking position is within the container
-        var contains = _super.prototype.contains.call(this, x, y);
+        const contains = super.contains(x, y);
         // if clipChildren is off, we should still pass picking events to children even if we don't contain the pointer
         if (!contains && this.clipChildren) {
             return false;
         }
         // Checking backwards to pick closest first
-        for (var index = this._children.length - 1; index >= 0; index--) {
-            var child = this._children[index];
+        for (let index = this._children.length - 1; index >= 0; index--) {
+            const child = this._children[index];
             if (child._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
                 if (child.hoverCursor) {
                     this._host._changeCursor(child.hoverCursor);
@@ -506,75 +468,70 @@ var Container = /** @class */ (function (_super) {
             return false;
         }
         return this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Container.prototype._additionalProcessing = function (parentMeasure, context) {
-        _super.prototype._additionalProcessing.call(this, parentMeasure, context);
+    _additionalProcessing(parentMeasure, context) {
+        super._additionalProcessing(parentMeasure, context);
         this._measureForChildren.copyFrom(this._currentMeasure);
-    };
+    }
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object
      */
-    Container.prototype.serialize = function (serializationObject) {
-        _super.prototype.serialize.call(this, serializationObject);
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
         if (!this.children.length) {
             return;
         }
         serializationObject.children = [];
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            var childSerializationObject = {};
+        for (const child of this.children) {
+            const childSerializationObject = {};
             child.serialize(childSerializationObject);
             serializationObject.children.push(childSerializationObject);
         }
-    };
+    }
     /** Releases associated resources */
-    Container.prototype.dispose = function () {
-        var _a;
-        _super.prototype.dispose.call(this);
-        for (var index = this.children.length - 1; index >= 0; index--) {
+    dispose() {
+        super.dispose();
+        for (let index = this.children.length - 1; index >= 0; index--) {
             this.children[index].dispose();
         }
-        (_a = this._intermediateTexture) === null || _a === void 0 ? void 0 : _a.dispose();
-    };
+        this._intermediateTexture?.dispose();
+    }
     /**
      * @param serializedObject
      * @param host
      * @hidden
      */
-    Container.prototype._parseFromContent = function (serializedObject, host) {
-        _super.prototype._parseFromContent.call(this, serializedObject, host);
+    _parseFromContent(serializedObject, host) {
+        super._parseFromContent(serializedObject, host);
         this._link(host);
         if (!serializedObject.children) {
             return;
         }
-        for (var _i = 0, _a = serializedObject.children; _i < _a.length; _i++) {
-            var childData = _a[_i];
+        for (const childData of serializedObject.children) {
             this.addControl(Control.Parse(childData, host));
         }
-    };
-    __decorate([
-        serialize()
-    ], Container.prototype, "renderToIntermediateTexture", null);
-    __decorate([
-        serialize()
-    ], Container.prototype, "maxLayoutCycle", void 0);
-    __decorate([
-        serialize()
-    ], Container.prototype, "adaptHeightToChildren", null);
-    __decorate([
-        serialize()
-    ], Container.prototype, "adaptWidthToChildren", null);
-    __decorate([
-        serialize()
-    ], Container.prototype, "background", null);
-    return Container;
-}(Control));
-export { Container };
+    }
+}
+__decorate([
+    serialize()
+], Container.prototype, "renderToIntermediateTexture", null);
+__decorate([
+    serialize()
+], Container.prototype, "maxLayoutCycle", void 0);
+__decorate([
+    serialize()
+], Container.prototype, "adaptHeightToChildren", null);
+__decorate([
+    serialize()
+], Container.prototype, "adaptWidthToChildren", null);
+__decorate([
+    serialize()
+], Container.prototype, "background", null);
 RegisterClass("BABYLON.GUI.Container", Container);
 //# sourceMappingURL=container.js.map