@babylonjs/gui 5.19.0 → 5.22.0

package/2D/controls/grid.js

@@ -1,4 +1,3 @@
-import { __extends } from "tslib";
 import { Container } from "./container.js";
 import { ValueAndUnit } from "../valueAndUnit.js";
 import { Control } from "./control.js";
@@ -7,109 +6,87 @@ import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
 /**
  * Class used to create a 2D grid container
  */
-var Grid = /** @class */ (function (_super) {
-    __extends(Grid, _super);
+export class Grid extends Container {
     /**
      * Creates a new Grid
      * @param name defines control name
      */
-    function Grid(name) {
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this._rowDefinitions = new Array();
-        _this._rowDefinitionObservers = [];
-        _this._columnDefinitions = new Array();
-        _this._columnDefinitionObservers = [];
-        _this._cells = {};
-        _this._childControls = new Array();
-        return _this;
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._rowDefinitions = new Array();
+        this._rowDefinitionObservers = [];
+        this._columnDefinitions = new Array();
+        this._columnDefinitionObservers = [];
+        this._cells = {};
+        this._childControls = new Array();
+    }
+    /**
+     * Gets the number of columns
+     */
+    get columnCount() {
+        return this._columnDefinitions.length;
+    }
+    /**
+     * Gets the number of rows
+     */
+    get rowCount() {
+        return this._rowDefinitions.length;
+    }
+    /** Gets the list of children */
+    get children() {
+        return this._childControls;
+    }
+    /** Gets the list of cells (e.g. the containers) */
+    get cells() {
+        return this._cells;
     }
-    Object.defineProperty(Grid.prototype, "columnCount", {
-        /**
-         * Gets the number of columns
-         */
-        get: function () {
-            return this._columnDefinitions.length;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Grid.prototype, "rowCount", {
-        /**
-         * Gets the number of rows
-         */
-        get: function () {
-            return this._rowDefinitions.length;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Grid.prototype, "children", {
-        /** Gets the list of children */
-        get: function () {
-            return this._childControls;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Grid.prototype, "cells", {
-        /** Gets the list of cells (e.g. the containers) */
-        get: function () {
-            return this._cells;
-        },
-        enumerable: false,
-        configurable: true
-    });
     /**
      * Gets the definition of a specific row
      * @param index defines the index of the row
      * @returns the row definition
      */
-    Grid.prototype.getRowDefinition = function (index) {
+    getRowDefinition(index) {
         if (index < 0 || index >= this._rowDefinitions.length) {
             return null;
         }
         return this._rowDefinitions[index];
-    };
+    }
     /**
      * Gets the definition of a specific column
      * @param index defines the index of the column
      * @returns the column definition
      */
-    Grid.prototype.getColumnDefinition = function (index) {
+    getColumnDefinition(index) {
         if (index < 0 || index >= this._columnDefinitions.length) {
             return null;
         }
         return this._columnDefinitions[index];
-    };
+    }
     /**
      * Adds a new row to the grid
      * @param height defines the height of the row (either in pixel or a value between 0 and 1)
      * @param isPixel defines if the height is expressed in pixel (or in percentage)
      * @returns the current grid
      */
-    Grid.prototype.addRowDefinition = function (height, isPixel) {
-        var _this = this;
-        if (isPixel === void 0) { isPixel = false; }
+    addRowDefinition(height, isPixel = false) {
         this._rowDefinitions.push(new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
-        this._rowDefinitionObservers.push(this._rowDefinitions[this.rowCount - 1].onChangedObservable.add(function () { return _this._markAsDirty(); }));
+        this._rowDefinitionObservers.push(this._rowDefinitions[this.rowCount - 1].onChangedObservable.add(() => this._markAsDirty()));
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Adds a new column to the grid
      * @param width defines the width of the column (either in pixel or a value between 0 and 1)
      * @param isPixel defines if the width is expressed in pixel (or in percentage)
      * @returns the current grid
      */
-    Grid.prototype.addColumnDefinition = function (width, isPixel) {
-        var _this = this;
-        if (isPixel === void 0) { isPixel = false; }
+    addColumnDefinition(width, isPixel = false) {
         this._columnDefinitions.push(new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
-        this._columnDefinitionObservers.push(this._columnDefinitions[this.columnCount - 1].onChangedObservable.add(function () { return _this._markAsDirty(); }));
+        this._columnDefinitionObservers.push(this._columnDefinitions[this.columnCount - 1].onChangedObservable.add(() => this._markAsDirty()));
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Update a row definition
      * @param index defines the index of the row to update
@@ -117,22 +94,20 @@ var Grid = /** @class */ (function (_super) {
      * @param isPixel defines if the weight is expressed in pixel (or in percentage)
      * @returns the current grid
      */
-    Grid.prototype.setRowDefinition = function (index, height, isPixel) {
-        var _this = this;
-        if (isPixel === void 0) { isPixel = false; }
+    setRowDefinition(index, height, isPixel = false) {
         if (index < 0 || index >= this._rowDefinitions.length) {
             return this;
         }
-        var current = this._rowDefinitions[index];
+        const current = this._rowDefinitions[index];
         if (current && current.isPixel === isPixel && current.value === height) {
             return this;
         }
         this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
         this._rowDefinitions[index] = new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
-        this._rowDefinitionObservers[index] = this._rowDefinitions[index].onChangedObservable.add(function () { return _this._markAsDirty(); });
+        this._rowDefinitionObservers[index] = this._rowDefinitions[index].onChangedObservable.add(() => this._markAsDirty());
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Update a column definition
      * @param index defines the index of the column to update
@@ -140,86 +115,82 @@ var Grid = /** @class */ (function (_super) {
      * @param isPixel defines if the width is expressed in pixel (or in percentage)
      * @returns the current grid
      */
-    Grid.prototype.setColumnDefinition = function (index, width, isPixel) {
-        var _this = this;
-        if (isPixel === void 0) { isPixel = false; }
+    setColumnDefinition(index, width, isPixel = false) {
         if (index < 0 || index >= this._columnDefinitions.length) {
             return this;
         }
-        var current = this._columnDefinitions[index];
+        const current = this._columnDefinitions[index];
         if (current && current.isPixel === isPixel && current.value === width) {
             return this;
         }
         this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
         this._columnDefinitions[index] = new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
-        this._columnDefinitionObservers[index] = this._columnDefinitions[index].onChangedObservable.add(function () { return _this._markAsDirty(); });
+        this._columnDefinitionObservers[index] = this._columnDefinitions[index].onChangedObservable.add(() => this._markAsDirty());
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Gets the list of children stored in a specific cell
      * @param row defines the row to check
      * @param column defines the column to check
      * @returns the list of controls
      */
-    Grid.prototype.getChildrenAt = function (row, column) {
-        var cell = this._cells["".concat(row, ":").concat(column)];
+    getChildrenAt(row, column) {
+        const cell = this._cells[`${row}:${column}`];
         if (!cell) {
             return null;
         }
         return cell.children;
-    };
+    }
     /**
      * Gets a string representing the child cell info (row x column)
      * @param child defines the control to get info from
      * @returns a string containing the child cell info (row x column)
      */
-    Grid.prototype.getChildCellInfo = function (child) {
+    getChildCellInfo(child) {
         return child._tag;
-    };
-    Grid.prototype._removeCell = function (cell, key) {
+    }
+    _removeCell(cell, key) {
         if (!cell) {
             return;
         }
-        _super.prototype.removeControl.call(this, cell);
-        for (var _i = 0, _a = cell.children; _i < _a.length; _i++) {
-            var control = _a[_i];
-            var childIndex = this._childControls.indexOf(control);
+        super.removeControl(cell);
+        for (const control of cell.children) {
+            const childIndex = this._childControls.indexOf(control);
             if (childIndex !== -1) {
                 this._childControls.splice(childIndex, 1);
             }
         }
         delete this._cells[key];
-    };
-    Grid.prototype._offsetCell = function (previousKey, key) {
+    }
+    _offsetCell(previousKey, key) {
         if (!this._cells[key]) {
             return;
         }
         this._cells[previousKey] = this._cells[key];
-        for (var _i = 0, _a = this._cells[previousKey].children; _i < _a.length; _i++) {
-            var control = _a[_i];
+        for (const control of this._cells[previousKey].children) {
             control._tag = previousKey;
         }
         delete this._cells[key];
-    };
+    }
     /**
      * Remove a column definition at specified index
      * @param index defines the index of the column to remove
      * @returns the current grid
      */
-    Grid.prototype.removeColumnDefinition = function (index) {
+    removeColumnDefinition(index) {
         if (index < 0 || index >= this._columnDefinitions.length) {
             return this;
         }
-        for (var x = 0; x < this._rowDefinitions.length; x++) {
-            var key = "".concat(x, ":").concat(index);
-            var cell = this._cells[key];
+        for (let x = 0; x < this._rowDefinitions.length; x++) {
+            const key = `${x}:${index}`;
+            const cell = this._cells[key];
             this._removeCell(cell, key);
         }
-        for (var x = 0; x < this._rowDefinitions.length; x++) {
-            for (var y = index + 1; y < this._columnDefinitions.length; y++) {
-                var previousKey = "".concat(x, ":").concat(y - 1);
-                var key = "".concat(x, ":").concat(y);
+        for (let x = 0; x < this._rowDefinitions.length; x++) {
+            for (let y = index + 1; y < this._columnDefinitions.length; y++) {
+                const previousKey = `${x}:${y - 1}`;
+                const key = `${x}:${y}`;
                 this._offsetCell(previousKey, key);
             }
         }
@@ -228,25 +199,25 @@ var Grid = /** @class */ (function (_super) {
         this._columnDefinitionObservers.splice(index, 1);
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Remove a row definition at specified index
      * @param index defines the index of the row to remove
      * @returns the current grid
      */
-    Grid.prototype.removeRowDefinition = function (index) {
+    removeRowDefinition(index) {
         if (index < 0 || index >= this._rowDefinitions.length) {
             return this;
         }
-        for (var y = 0; y < this._columnDefinitions.length; y++) {
-            var key = "".concat(index, ":").concat(y);
-            var cell = this._cells[key];
+        for (let y = 0; y < this._columnDefinitions.length; y++) {
+            const key = `${index}:${y}`;
+            const cell = this._cells[key];
             this._removeCell(cell, key);
         }
-        for (var y = 0; y < this._columnDefinitions.length; y++) {
-            for (var x = index + 1; x < this._rowDefinitions.length; x++) {
-                var previousKey = "".concat(x - 1, ":").concat(y);
-                var key = "".concat(x, ":").concat(y);
+        for (let y = 0; y < this._columnDefinitions.length; y++) {
+            for (let x = index + 1; x < this._rowDefinitions.length; x++) {
+                const previousKey = `${x - 1}:${y}`;
+                const key = `${x}:${y}`;
                 this._offsetCell(previousKey, key);
             }
         }
@@ -255,7 +226,7 @@ var Grid = /** @class */ (function (_super) {
         this._rowDefinitionObservers.splice(index, 1);
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Adds a new control to the current grid
      * @param control defines the control to add
@@ -263,9 +234,7 @@ var Grid = /** @class */ (function (_super) {
      * @param column defines the column where to add the control (0 by default)
      * @returns the current grid
      */
-    Grid.prototype.addControl = function (control, row, column) {
-        if (row === void 0) { row = 0; }
-        if (column === void 0) { column = 0; }
+    addControl(control, row = 0, column = 0) {
         if (this._rowDefinitions.length === 0) {
             // Add default row definition
             this.addRowDefinition(1, false);
@@ -275,19 +244,19 @@ var Grid = /** @class */ (function (_super) {
             this.addColumnDefinition(1, false);
         }
         if (this._childControls.indexOf(control) !== -1) {
-            Tools.Warn("Control (Name:".concat(control.name, ", UniqueId:").concat(control.uniqueId, ") is already associated with this grid. You must remove it before reattaching it"));
+            Tools.Warn(`Control (Name:${control.name}, UniqueId:${control.uniqueId}) is already associated with this grid. You must remove it before reattaching it`);
             return this;
         }
-        var x = Math.min(row, this._rowDefinitions.length - 1);
-        var y = Math.min(column, this._columnDefinitions.length - 1);
-        var key = "".concat(x, ":").concat(y);
-        var goodContainer = this._cells[key];
+        const x = Math.min(row, this._rowDefinitions.length - 1);
+        const y = Math.min(column, this._columnDefinitions.length - 1);
+        const key = `${x}:${y}`;
+        let goodContainer = this._cells[key];
         if (!goodContainer) {
             goodContainer = new Container(key);
             this._cells[key] = goodContainer;
             goodContainer.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
             goodContainer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-            _super.prototype.addControl.call(this, goodContainer);
+            super.addControl(goodContainer);
         }
         goodContainer.addControl(control);
         this._childControls.push(control);
@@ -295,43 +264,42 @@ var Grid = /** @class */ (function (_super) {
         control.parent = this;
         this._markAsDirty();
         return this;
-    };
+    }
     /**
      * Removes a control from the current container
      * @param control defines the control to remove
      * @returns the current container
      */
-    Grid.prototype.removeControl = function (control) {
-        var index = this._childControls.indexOf(control);
+    removeControl(control) {
+        const index = this._childControls.indexOf(control);
         if (index !== -1) {
             this._childControls.splice(index, 1);
         }
-        var cell = this._cells[control._tag];
+        const cell = this._cells[control._tag];
         if (cell) {
             cell.removeControl(control);
             control._tag = null;
         }
         this._markAsDirty();
         return this;
-    };
-    Grid.prototype._getTypeName = function () {
+    }
+    _getTypeName() {
         return "Grid";
-    };
-    Grid.prototype._getGridDefinitions = function (definitionCallback) {
-        var widths = [];
-        var heights = [];
-        var lefts = [];
-        var tops = [];
-        var availableWidth = this._currentMeasure.width;
-        var globalWidthPercentage = 0;
-        var availableHeight = this._currentMeasure.height;
-        var globalHeightPercentage = 0;
+    }
+    _getGridDefinitions(definitionCallback) {
+        const widths = [];
+        const heights = [];
+        const lefts = [];
+        const tops = [];
+        let availableWidth = this._currentMeasure.width;
+        let globalWidthPercentage = 0;
+        let availableHeight = this._currentMeasure.height;
+        let globalHeightPercentage = 0;
         // Heights
-        var index = 0;
-        for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
-            var rowDefinition = _a[_i];
+        let index = 0;
+        for (const rowDefinition of this._rowDefinitions) {
             if (rowDefinition.isPixel) {
-                var height = rowDefinition.getValue(this._host);
+                const height = rowDefinition.getValue(this._host);
                 availableHeight -= height;
                 heights[index] = height;
             }
@@ -340,13 +308,12 @@ var Grid = /** @class */ (function (_super) {
             }
             index++;
         }
-        var top = 0;
+        let top = 0;
         index = 0;
-        for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
-            var rowDefinition = _c[_b];
+        for (const rowDefinition of this._rowDefinitions) {
             tops.push(top);
             if (!rowDefinition.isPixel) {
-                var height = (rowDefinition.value / globalHeightPercentage) * availableHeight;
+                const height = (rowDefinition.value / globalHeightPercentage) * availableHeight;
                 top += height;
                 heights[index] = height;
             }
@@ -357,10 +324,9 @@ var Grid = /** @class */ (function (_super) {
         }
         // Widths
         index = 0;
-        for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
-            var columnDefinition = _e[_d];
+        for (const columnDefinition of this._columnDefinitions) {
             if (columnDefinition.isPixel) {
-                var width = columnDefinition.getValue(this._host);
+                const width = columnDefinition.getValue(this._host);
                 availableWidth -= width;
                 widths[index] = width;
             }
@@ -369,13 +335,12 @@ var Grid = /** @class */ (function (_super) {
             }
             index++;
         }
-        var left = 0;
+        let left = 0;
         index = 0;
-        for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
-            var columnDefinition = _g[_f];
+        for (const columnDefinition of this._columnDefinitions) {
             lefts.push(left);
             if (!columnDefinition.isPixel) {
-                var width = (columnDefinition.value / globalWidthPercentage) * availableWidth;
+                const width = (columnDefinition.value / globalWidthPercentage) * availableWidth;
                 left += width;
                 widths[index] = width;
             }
@@ -385,19 +350,18 @@ var Grid = /** @class */ (function (_super) {
             index++;
         }
         definitionCallback(lefts, tops, widths, heights);
-    };
-    Grid.prototype._additionalProcessing = function (parentMeasure, context) {
-        var _this = this;
-        this._getGridDefinitions(function (lefts, tops, widths, heights) {
+    }
+    _additionalProcessing(parentMeasure, context) {
+        this._getGridDefinitions((lefts, tops, widths, heights) => {
             // Setting child sizes
-            for (var key in _this._cells) {
-                if (!Object.prototype.hasOwnProperty.call(_this._cells, key)) {
+            for (const key in this._cells) {
+                if (!Object.prototype.hasOwnProperty.call(this._cells, key)) {
                     continue;
                 }
-                var split = key.split(":");
-                var x = parseInt(split[0]);
-                var y = parseInt(split[1]);
-                var cell = _this._cells[key];
+                const split = key.split(":");
+                const x = parseInt(split[0]);
+                const y = parseInt(split[1]);
+                const cell = this._cells[key];
                 cell.left = lefts[y] + "px";
                 cell.top = tops[x] + "px";
                 cell.width = widths[y] + "px";
@@ -408,51 +372,49 @@ var Grid = /** @class */ (function (_super) {
                 cell._height.ignoreAdaptiveScaling = true;
             }
         });
-        _super.prototype._additionalProcessing.call(this, parentMeasure, context);
-    };
-    Grid.prototype._flagDescendantsAsMatrixDirty = function () {
-        for (var key in this._cells) {
+        super._additionalProcessing(parentMeasure, context);
+    }
+    _flagDescendantsAsMatrixDirty() {
+        for (const key in this._cells) {
             if (!Object.prototype.hasOwnProperty.call(this._cells, key)) {
                 continue;
             }
-            var child = this._cells[key];
+            const child = this._cells[key];
             child._markMatrixAsDirty();
         }
-    };
-    Grid.prototype._renderHighlightSpecific = function (context) {
-        var _this = this;
-        _super.prototype._renderHighlightSpecific.call(this, context);
-        this._getGridDefinitions(function (lefts, tops, widths, heights) {
+    }
+    _renderHighlightSpecific(context) {
+        super._renderHighlightSpecific(context);
+        this._getGridDefinitions((lefts, tops, widths, heights) => {
             // Columns
-            for (var index = 0; index < lefts.length; index++) {
-                var left = _this._currentMeasure.left + lefts[index] + widths[index];
+            for (let index = 0; index < lefts.length; index++) {
+                const left = this._currentMeasure.left + lefts[index] + widths[index];
                 context.beginPath();
-                context.moveTo(left, _this._currentMeasure.top);
-                context.lineTo(left, _this._currentMeasure.top + _this._currentMeasure.height);
+                context.moveTo(left, this._currentMeasure.top);
+                context.lineTo(left, this._currentMeasure.top + this._currentMeasure.height);
                 context.stroke();
             }
             // Rows
-            for (var index = 0; index < tops.length; index++) {
-                var top_1 = _this._currentMeasure.top + tops[index] + heights[index];
+            for (let index = 0; index < tops.length; index++) {
+                const top = this._currentMeasure.top + tops[index] + heights[index];
                 context.beginPath();
-                context.moveTo(_this._currentMeasure.left, top_1);
-                context.lineTo(_this._currentMeasure.left + _this._currentMeasure.width, top_1);
+                context.moveTo(this._currentMeasure.left, top);
+                context.lineTo(this._currentMeasure.left + this._currentMeasure.width, top);
                 context.stroke();
             }
         });
         context.restore();
-    };
+    }
     /** Releases associated resources */
-    Grid.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        for (var _i = 0, _a = this._childControls; _i < _a.length; _i++) {
-            var control = _a[_i];
+    dispose() {
+        super.dispose();
+        for (const control of this._childControls) {
             control.dispose();
         }
-        for (var index = 0; index < this._rowDefinitions.length; index++) {
+        for (let index = 0; index < this._rowDefinitions.length; index++) {
             this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
         }
-        for (var index = 0; index < this._columnDefinitions.length; index++) {
+        for (let index = 0; index < this._columnDefinitions.length; index++) {
             this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
         }
         this._rowDefinitionObservers.length = 0;
@@ -461,70 +423,68 @@ var Grid = /** @class */ (function (_super) {
         this._columnDefinitions.length = 0;
         this._cells = {};
         this._childControls.length = 0;
-    };
+    }
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object
      */
-    Grid.prototype.serialize = function (serializationObject) {
-        _super.prototype.serialize.call(this, serializationObject);
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
         serializationObject.columnCount = this.columnCount;
         serializationObject.rowCount = this.rowCount;
         serializationObject.columns = [];
         serializationObject.rows = [];
         serializationObject.tags = [];
-        for (var i = 0; i < this.columnCount; ++i) {
-            var cd = this.getColumnDefinition(i);
-            var childSerializationObject = { value: cd === null || cd === void 0 ? void 0 : cd.getValue(this.host), unit: cd === null || cd === void 0 ? void 0 : cd.unit };
+        for (let i = 0; i < this.columnCount; ++i) {
+            const cd = this.getColumnDefinition(i);
+            const childSerializationObject = { value: cd?.getValue(this.host), unit: cd?.unit };
             serializationObject.columns.push(childSerializationObject);
         }
-        for (var i = 0; i < this.rowCount; ++i) {
-            var rd = this.getRowDefinition(i);
-            var childSerializationObject = { value: rd === null || rd === void 0 ? void 0 : rd.getValue(this.host), unit: rd === null || rd === void 0 ? void 0 : rd.unit };
+        for (let i = 0; i < this.rowCount; ++i) {
+            const rd = this.getRowDefinition(i);
+            const childSerializationObject = { value: rd?.getValue(this.host), unit: rd?.unit };
             serializationObject.rows.push(childSerializationObject);
         }
-        this.children.forEach(function (child) {
+        this.children.forEach((child) => {
             serializationObject.tags.push(child._tag);
         });
-    };
+    }
     /**
      * @param serializedObject
      * @param host
      * @hidden
      */
-    Grid.prototype._parseFromContent = function (serializedObject, host) {
-        _super.prototype._parseFromContent.call(this, serializedObject, host);
-        var children = [];
-        this.children.forEach(function (child) {
+    _parseFromContent(serializedObject, host) {
+        super._parseFromContent(serializedObject, host);
+        const children = [];
+        this.children.forEach((child) => {
             children.push(child);
         });
         this.removeRowDefinition(0);
         this.removeColumnDefinition(0);
-        for (var i = 0; i < serializedObject.columnCount; ++i) {
-            var columnValue = serializedObject.columns[i].value;
-            var unit = serializedObject.columns[i].unit;
+        for (let i = 0; i < serializedObject.columnCount; ++i) {
+            const columnValue = serializedObject.columns[i].value;
+            const unit = serializedObject.columns[i].unit;
             this.addColumnDefinition(columnValue, unit === 1 ? true : false);
         }
-        for (var i = 0; i < serializedObject.rowCount; ++i) {
-            var rowValue = serializedObject.rows[i].value;
-            var unit = serializedObject.rows[i].unit;
+        for (let i = 0; i < serializedObject.rowCount; ++i) {
+            const rowValue = serializedObject.rows[i].value;
+            const unit = serializedObject.rows[i].unit;
             this.addRowDefinition(rowValue, unit === 1 ? true : false);
         }
-        for (var i = 0; i < children.length; ++i) {
-            var cellInfo = serializedObject.tags[i];
-            var rowNumber = parseInt(cellInfo.substring(0, cellInfo.search(":")));
+        for (let i = 0; i < children.length; ++i) {
+            const cellInfo = serializedObject.tags[i];
+            let rowNumber = parseInt(cellInfo.substring(0, cellInfo.search(":")));
             if (isNaN(rowNumber)) {
                 rowNumber = 0;
             }
-            var columnNumber = parseInt(cellInfo.substring(cellInfo.search(":") + 1));
+            let columnNumber = parseInt(cellInfo.substring(cellInfo.search(":") + 1));
             if (isNaN(columnNumber)) {
                 columnNumber = 0;
             }
             this.addControl(children[i], rowNumber, columnNumber);
         }
-    };
-    return Grid;
-}(Container));
-export { Grid };
+    }
+}
 RegisterClass("BABYLON.GUI.Grid", Grid);
 //# sourceMappingURL=grid.js.map