@babylonjs/gui 5.0.0-rc.0 → 5.0.0-rc.11

package/2D/controls/container.js

@@ -1,526 +1,571 @@
-import { __decorate, __extends } from "tslib";
-import { Logger } from "@babylonjs/core/Misc/logger.js";
-import { Control } from "./control.js";
-import { Measure } from "../measure.js";
-import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
-import { serialize } from '@babylonjs/core/Misc/decorators.js';
-import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture.js";
-import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
-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);
-    /**
-     * 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;
-        /** @hidden */
-        _this._children = new Array();
-        /** @hidden */
-        _this._measureForChildren = Measure.Empty();
-        /** @hidden */
-        _this._background = "";
-        /** @hidden */
-        _this._adaptWidthToChildren = false;
-        /** @hidden */
-        _this._adaptHeightToChildren = false;
-        /** @hidden */
-        _this._renderToIntermediateTexture = false;
-        /** @hidden */
-        _this._intermediateTexture = null;
-        /**
-         * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
-         */
-        _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 () {
-        return "Container";
-    };
-    Container.prototype._flagDescendantsAsMatrixDirty = function () {
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            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];
-            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];
-            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) {
-        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) {
-        if (!control) {
-            return this;
-        }
-        var index = this._children.indexOf(control);
-        if (index !== -1) {
-            return this;
-        }
-        control._link(this._host);
-        control._markAllAsDirty();
-        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];
-            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);
-        if (index !== -1) {
-            this._children.splice(index, 1);
-            control.parent = null;
-        }
-        control.linkWithMesh(null);
-        if (this._host) {
-            this._host._cleanControlAfterRemoval(control);
-        }
-        this._markAsDirty();
-        return this;
-    };
-    /** @hidden */
-    Container.prototype._reOrderControl = function (control) {
-        this.removeControl(control);
-        var wasAdded = false;
-        for (var index = 0; index < this._children.length; index++) {
-            if (this._children[index].zIndex > control.zIndex) {
-                this._children.splice(index, 0, control);
-                wasAdded = true;
-                break;
-            }
-        }
-        if (!wasAdded) {
-            this._children.push(control);
-        }
-        control.parent = this;
-        this._markAsDirty();
-    };
-    /** @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];
-            child._offsetLeft(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];
-            child._offsetTop(offset);
-        }
-    };
-    /** @hidden */
-    Container.prototype._markAllAsDirty = function () {
-        _super.prototype._markAllAsDirty.call(this);
-        for (var index = 0; index < this._children.length; index++) {
-            this._children[index]._markAllAsDirty();
-        }
-    };
-    /** @hidden */
-    Container.prototype._localDraw = function (context) {
-        if (this._background) {
-            context.save();
-            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-                context.shadowColor = this.shadowColor;
-                context.shadowBlur = this.shadowBlur;
-                context.shadowOffsetX = this.shadowOffsetX;
-                context.shadowOffsetY = this.shadowOffsetY;
-            }
-            context.fillStyle = this._background;
-            context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-            context.restore();
-        }
-    };
-    /** @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];
-            child._link(host);
-        }
-    };
-    /** @hidden */
-    Container.prototype._beforeLayout = function () {
-        // Do nothing
-    };
-    /** @hidden */
-    Container.prototype._processMeasures = function (parentMeasure, context) {
-        if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
-            _super.prototype._processMeasures.call(this, parentMeasure, context);
-            this._evaluateClippingState(parentMeasure);
-            if (this._renderToIntermediateTexture) {
-                if (this._intermediateTexture && this._host.getScene() != this._intermediateTexture.getScene()) {
-                    this._intermediateTexture.dispose();
-                    this._intermediateTexture = null;
-                }
-                if (!this._intermediateTexture) {
-                    this._intermediateTexture = new DynamicTexture('', { width: this._currentMeasure.width, height: this._currentMeasure.height }, this._host.getScene(), false, Texture.NEAREST_SAMPLINGMODE, Constants.TEXTUREFORMAT_RGBA, false);
-                    this._intermediateTexture.hasAlpha = true;
-                }
-                else {
-                    this._intermediateTexture.scaleTo(this._currentMeasure.width, this._currentMeasure.height);
-                }
-            }
-        }
-    };
-    /** @hidden */
-    Container.prototype._layout = function (parentMeasure, context) {
-        var _a, _b;
-        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
-            return false;
-        }
-        this.host._numLayoutCalls++;
-        if (this._isDirty) {
-            this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
-        }
-        var rebuildCount = 0;
-        context.save();
-        this._applyStates(context);
-        this._beforeLayout();
-        do {
-            var computedWidth = -1;
-            var 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];
-                    child._tempParentMeasure.copyFrom(this._measureForChildren);
-                    if (child._layout(this._measureForChildren, context)) {
-                        if (this.adaptWidthToChildren && child._width.isPixel) {
-                            computedWidth = Math.max(computedWidth, child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels);
-                        }
-                        if (this.adaptHeightToChildren && child._height.isPixel) {
-                            computedHeight = Math.max(computedHeight, child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels);
-                        }
-                    }
-                }
-                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.width = computedWidth + "px";
-                        this._rebuildLayout = true;
-                    }
-                }
-                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.height = computedHeight + "px";
-                        this._rebuildLayout = true;
-                    }
-                }
-                this._postMeasure();
-            }
-            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, ")"));
-        }
-        context.restore();
-        if (this._isDirty) {
-            this.invalidateRect();
-            this._isDirty = false;
-        }
-        return true;
-    };
-    Container.prototype._postMeasure = function () {
-        // Do nothing by default
-    };
-    /** @hidden */
-    Container.prototype._draw = function (context, invalidatedRectangle) {
-        var renderToIntermediateTextureThisDraw = this._renderToIntermediateTexture && this._intermediateTexture;
-        var contextToDrawTo = renderToIntermediateTextureThisDraw ? this._intermediateTexture.getContext() : context;
-        if (renderToIntermediateTextureThisDraw) {
-            contextToDrawTo.save();
-            contextToDrawTo.translate(-this._currentMeasure.left, -this._currentMeasure.top);
-            if (invalidatedRectangle) {
-                contextToDrawTo.clearRect(invalidatedRectangle.left, invalidatedRectangle.top, invalidatedRectangle.width, invalidatedRectangle.height);
-            }
-            else {
-                contextToDrawTo.clearRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-            }
-        }
-        this._localDraw(contextToDrawTo);
-        context.save();
-        if (this.clipChildren) {
-            this._clipForChildren(contextToDrawTo);
-        }
-        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            // Only redraw parts of the screen that are invalidated
-            if (invalidatedRectangle) {
-                if (!child._intersectsRect(invalidatedRectangle)) {
-                    continue;
-                }
-            }
-            child._render(contextToDrawTo, invalidatedRectangle);
-        }
-        if (renderToIntermediateTextureThisDraw) {
-            contextToDrawTo.restore();
-            context.save();
-            context.globalAlpha = this.alpha;
-            context.drawImage(contextToDrawTo.canvas, this._currentMeasure.left, this._currentMeasure.top);
-            context.restore();
-        }
-        context.restore();
-    };
-    Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
-        if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
-        if (!this.children) {
-            return;
-        }
-        for (var index = 0; index < this.children.length; index++) {
-            var item = this.children[index];
-            if (!predicate || predicate(item)) {
-                results.push(item);
-            }
-            if (!directDescendantsOnly) {
-                item.getDescendantsToRef(results, false, predicate);
-            }
-        }
-    };
-    /** @hidden */
-    Container.prototype._processPicking = function (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);
-        // 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];
-            if (child._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
-                if (child.hoverCursor) {
-                    this._host._changeCursor(child.hoverCursor);
-                }
-                return true;
-            }
-        }
-        if (!contains) {
-            return false;
-        }
-        if (!this.isHitTestVisible) {
-            return false;
-        }
-        return this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
-    };
-    /** @hidden */
-    Container.prototype._additionalProcessing = function (parentMeasure, context) {
-        _super.prototype._additionalProcessing.call(this, 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);
-        if (!this.children.length) {
-            return;
-        }
-        serializationObject.children = [];
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            var 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--) {
-            this.children[index].dispose();
-        }
-        (_a = this._intermediateTexture) === null || _a === void 0 ? void 0 : _a.dispose();
-    };
-    /** @hidden */
-    Container.prototype._parseFromContent = function (serializedObject, host) {
-        _super.prototype._parseFromContent.call(this, serializedObject, host);
-        this._link(host);
-        if (!serializedObject.children) {
-            return;
-        }
-        for (var _i = 0, _a = serializedObject.children; _i < _a.length; _i++) {
-            var childData = _a[_i];
-            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 };
-RegisterClass("BABYLON.GUI.Container", Container);
+import { __decorate, __extends } from "tslib";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+import { Control } from "./control";
+import { Measure } from "../measure";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture.js";
+import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
+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);
+    /**
+     * 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;
+        /** @hidden */
+        _this._children = new Array();
+        /** @hidden */
+        _this._measureForChildren = Measure.Empty();
+        /** @hidden */
+        _this._background = "";
+        /** @hidden */
+        _this._adaptWidthToChildren = false;
+        /** @hidden */
+        _this._adaptHeightToChildren = false;
+        /** @hidden */
+        _this._renderToIntermediateTexture = false;
+        /** @hidden */
+        _this._intermediateTexture = null;
+        /**
+         * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
+         */
+        _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 () {
+        return "Container";
+    };
+    Container.prototype._flagDescendantsAsMatrixDirty = function () {
+        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            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];
+            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];
+            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) {
+        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) {
+        if (!control) {
+            return this;
+        }
+        var index = this._children.indexOf(control);
+        if (index !== -1) {
+            return this;
+        }
+        control._link(this._host);
+        control._markAllAsDirty();
+        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];
+            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);
+        if (index !== -1) {
+            this._children.splice(index, 1);
+            control.parent = null;
+        }
+        control.linkWithMesh(null);
+        if (this._host) {
+            this._host._cleanControlAfterRemoval(control);
+        }
+        this._markAsDirty();
+        return this;
+    };
+    /**
+     * @param control
+     * @hidden
+     */
+    Container.prototype._reOrderControl = function (control) {
+        this.removeControl(control);
+        var wasAdded = false;
+        for (var index = 0; index < this._children.length; index++) {
+            if (this._children[index].zIndex > control.zIndex) {
+                this._children.splice(index, 0, control);
+                wasAdded = true;
+                break;
+            }
+        }
+        if (!wasAdded) {
+            this._children.push(control);
+        }
+        control.parent = this;
+        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];
+            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];
+            child._offsetTop(offset);
+        }
+    };
+    /** @hidden */
+    Container.prototype._markAllAsDirty = function () {
+        _super.prototype._markAllAsDirty.call(this);
+        for (var index = 0; index < this._children.length; index++) {
+            this._children[index]._markAllAsDirty();
+        }
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Container.prototype._localDraw = function (context) {
+        if (this._background) {
+            context.save();
+            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
+            context.fillStyle = this._background;
+            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];
+            child._link(host);
+        }
+    };
+    /** @hidden */
+    Container.prototype._beforeLayout = function () {
+        // Do nothing
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Container.prototype._processMeasures = function (parentMeasure, context) {
+        if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
+            _super.prototype._processMeasures.call(this, parentMeasure, context);
+            this._evaluateClippingState(parentMeasure);
+            if (this._renderToIntermediateTexture) {
+                if (this._intermediateTexture && this._host.getScene() != this._intermediateTexture.getScene()) {
+                    this._intermediateTexture.dispose();
+                    this._intermediateTexture = null;
+                }
+                if (!this._intermediateTexture) {
+                    this._intermediateTexture = new DynamicTexture("", { width: this._currentMeasure.width, height: this._currentMeasure.height }, this._host.getScene(), false, Texture.NEAREST_SAMPLINGMODE, Constants.TEXTUREFORMAT_RGBA, false);
+                    this._intermediateTexture.hasAlpha = true;
+                }
+                else {
+                    this._intermediateTexture.scaleTo(this._currentMeasure.width, this._currentMeasure.height);
+                }
+            }
+        }
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Container.prototype._layout = function (parentMeasure, context) {
+        var _a, _b;
+        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
+            return false;
+        }
+        this.host._numLayoutCalls++;
+        if (this._isDirty) {
+            this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
+        }
+        var rebuildCount = 0;
+        context.save();
+        this._applyStates(context);
+        this._beforeLayout();
+        do {
+            var computedWidth = -1;
+            var 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];
+                    child._tempParentMeasure.copyFrom(this._measureForChildren);
+                    if (child._layout(this._measureForChildren, context)) {
+                        if (this.adaptWidthToChildren && child._width.isPixel) {
+                            computedWidth = Math.max(computedWidth, child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels);
+                        }
+                        if (this.adaptHeightToChildren && child._height.isPixel) {
+                            computedHeight = Math.max(computedHeight, child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels);
+                        }
+                    }
+                }
+                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.width = computedWidth + "px";
+                        this._rebuildLayout = true;
+                    }
+                }
+                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.height = computedHeight + "px";
+                        this._rebuildLayout = true;
+                    }
+                }
+                this._postMeasure();
+            }
+            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, ")"));
+        }
+        context.restore();
+        if (this._isDirty) {
+            this.invalidateRect();
+            this._isDirty = false;
+        }
+        return true;
+    };
+    Container.prototype._postMeasure = function () {
+        // 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;
+        if (renderToIntermediateTextureThisDraw) {
+            contextToDrawTo.save();
+            contextToDrawTo.translate(-this._currentMeasure.left, -this._currentMeasure.top);
+            if (invalidatedRectangle) {
+                contextToDrawTo.clearRect(invalidatedRectangle.left, invalidatedRectangle.top, invalidatedRectangle.width, invalidatedRectangle.height);
+            }
+            else {
+                contextToDrawTo.clearRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            }
+        }
+        this._localDraw(contextToDrawTo);
+        context.save();
+        if (this.clipChildren) {
+            this._clipForChildren(contextToDrawTo);
+        }
+        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            // Only redraw parts of the screen that are invalidated
+            if (invalidatedRectangle) {
+                if (!child._intersectsRect(invalidatedRectangle)) {
+                    continue;
+                }
+            }
+            child._render(contextToDrawTo, invalidatedRectangle);
+        }
+        if (renderToIntermediateTextureThisDraw) {
+            contextToDrawTo.restore();
+            context.save();
+            context.globalAlpha = this.alpha;
+            context.drawImage(contextToDrawTo.canvas, this._currentMeasure.left, this._currentMeasure.top);
+            context.restore();
+        }
+        context.restore();
+    };
+    Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
+        if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
+        if (!this.children) {
+            return;
+        }
+        for (var index = 0; index < this.children.length; index++) {
+            var item = this.children[index];
+            if (!predicate || predicate(item)) {
+                results.push(item);
+            }
+            if (!directDescendantsOnly) {
+                item.getDescendantsToRef(results, false, predicate);
+            }
+        }
+    };
+    /**
+     * @param x
+     * @param y
+     * @param pi
+     * @param type
+     * @param pointerId
+     * @param buttonIndex
+     * @param deltaX
+     * @param deltaY
+     * @hidden
+     */
+    Container.prototype._processPicking = function (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);
+        // 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];
+            if (child._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
+                if (child.hoverCursor) {
+                    this._host._changeCursor(child.hoverCursor);
+                }
+                return true;
+            }
+        }
+        if (!contains) {
+            return false;
+        }
+        if (!this.isHitTestVisible) {
+            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);
+        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);
+        if (!this.children.length) {
+            return;
+        }
+        serializationObject.children = [];
+        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            var 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--) {
+            this.children[index].dispose();
+        }
+        (_a = this._intermediateTexture) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    /**
+     * @param serializedObject
+     * @param host
+     * @hidden
+     */
+    Container.prototype._parseFromContent = function (serializedObject, host) {
+        _super.prototype._parseFromContent.call(this, serializedObject, host);
+        this._link(host);
+        if (!serializedObject.children) {
+            return;
+        }
+        for (var _i = 0, _a = serializedObject.children; _i < _a.length; _i++) {
+            var childData = _a[_i];
+            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 };
+RegisterClass("BABYLON.GUI.Container", Container);
 //# sourceMappingURL=container.js.map