@babylonjs/gui 5.0.0-beta.9 → 5.0.0-rc.10

package/2D/controls/grid.js

@@ -1,526 +1,530 @@
-import { __extends } from "tslib";
-import { Container } from "./container.js";
-import { ValueAndUnit } from "../valueAndUnit.js";
-import { Control } from "./control.js";
-import { Tools } from '@babylonjs/core/Misc/tools.js';
-import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
-/**
- * Class used to create a 2D grid container
- */
-var Grid = /** @class */ (function (_super) {
-    __extends(Grid, _super);
-    /**
-     * 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;
-    }
-    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) {
-        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) {
-        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; }
-        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._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; }
-        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._markAsDirty();
-        return this;
-    };
-    /**
-     * Update a row definition
-     * @param index defines the index of the row to update
-     * @param height defines the height of the row (either in pixel or a value between 0 and 1)
-     * @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; }
-        if (index < 0 || index >= this._rowDefinitions.length) {
-            return this;
-        }
-        var 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._markAsDirty();
-        return this;
-    };
-    /**
-     * Update a column definition
-     * @param index defines the index of the column to update
-     * @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.setColumnDefinition = function (index, width, isPixel) {
-        var _this = this;
-        if (isPixel === void 0) { isPixel = false; }
-        if (index < 0 || index >= this._columnDefinitions.length) {
-            return this;
-        }
-        var 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._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)];
-        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) {
-        return child._tag;
-    };
-    Grid.prototype._removeCell = function (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);
-            if (childIndex !== -1) {
-                this._childControls.splice(childIndex, 1);
-            }
-        }
-        delete this._cells[key];
-    };
-    Grid.prototype._offsetCell = function (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];
-            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) {
-        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];
-            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);
-                this._offsetCell(previousKey, key);
-            }
-        }
-        this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
-        this._columnDefinitions.splice(index, 1);
-        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) {
-        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];
-            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);
-                this._offsetCell(previousKey, key);
-            }
-        }
-        this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
-        this._rowDefinitions.splice(index, 1);
-        this._rowDefinitionObservers.splice(index, 1);
-        this._markAsDirty();
-        return this;
-    };
-    /**
-     * Adds a new control to the current grid
-     * @param control defines the control to add
-     * @param row defines the row where to add the control (0 by default)
-     * @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; }
-        if (this._rowDefinitions.length === 0) {
-            // Add default row definition
-            this.addRowDefinition(1, false);
-        }
-        if (this._columnDefinitions.length === 0) {
-            // Add default column definition
-            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"));
-            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];
-        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);
-        }
-        goodContainer.addControl(control);
-        this._childControls.push(control);
-        control._tag = key;
-        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);
-        if (index !== -1) {
-            this._childControls.splice(index, 1);
-        }
-        var cell = this._cells[control._tag];
-        if (cell) {
-            cell.removeControl(control);
-            control._tag = null;
-        }
-        this._markAsDirty();
-        return this;
-    };
-    Grid.prototype._getTypeName = function () {
-        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;
-        // Heights
-        var index = 0;
-        for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
-            var rowDefinition = _a[_i];
-            if (rowDefinition.isPixel) {
-                var height = rowDefinition.getValue(this._host);
-                availableHeight -= height;
-                heights[index] = height;
-            }
-            else {
-                globalHeightPercentage += rowDefinition.value;
-            }
-            index++;
-        }
-        var top = 0;
-        index = 0;
-        for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
-            var rowDefinition = _c[_b];
-            tops.push(top);
-            if (!rowDefinition.isPixel) {
-                var height = (rowDefinition.value / globalHeightPercentage) * availableHeight;
-                top += height;
-                heights[index] = height;
-            }
-            else {
-                top += rowDefinition.getValue(this._host);
-            }
-            index++;
-        }
-        // Widths
-        index = 0;
-        for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
-            var columnDefinition = _e[_d];
-            if (columnDefinition.isPixel) {
-                var width = columnDefinition.getValue(this._host);
-                availableWidth -= width;
-                widths[index] = width;
-            }
-            else {
-                globalWidthPercentage += columnDefinition.value;
-            }
-            index++;
-        }
-        var left = 0;
-        index = 0;
-        for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
-            var columnDefinition = _g[_f];
-            lefts.push(left);
-            if (!columnDefinition.isPixel) {
-                var width = (columnDefinition.value / globalWidthPercentage) * availableWidth;
-                left += width;
-                widths[index] = width;
-            }
-            else {
-                left += columnDefinition.getValue(this._host);
-            }
-            index++;
-        }
-        definitionCallback(lefts, tops, widths, heights);
-    };
-    Grid.prototype._additionalProcessing = function (parentMeasure, context) {
-        var _this = this;
-        this._getGridDefinitions(function (lefts, tops, widths, heights) {
-            // Setting child sizes
-            for (var key in _this._cells) {
-                if (!_this._cells.hasOwnProperty(key)) {
-                    continue;
-                }
-                var split = key.split(":");
-                var x = parseInt(split[0]);
-                var y = parseInt(split[1]);
-                var cell = _this._cells[key];
-                cell.left = lefts[y] + "px";
-                cell.top = tops[x] + "px";
-                cell.width = widths[y] + "px";
-                cell.height = heights[x] + "px";
-                cell._left.ignoreAdaptiveScaling = true;
-                cell._top.ignoreAdaptiveScaling = true;
-                cell._width.ignoreAdaptiveScaling = true;
-                cell._height.ignoreAdaptiveScaling = true;
-            }
-        });
-        _super.prototype._additionalProcessing.call(this, parentMeasure, context);
-    };
-    Grid.prototype._flagDescendantsAsMatrixDirty = function () {
-        for (var key in this._cells) {
-            if (!this._cells.hasOwnProperty(key)) {
-                continue;
-            }
-            var 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) {
-            // Columns
-            for (var index = 0; index < lefts.length; index++) {
-                var 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.stroke();
-            }
-            // Rows
-            for (var index = 0; index < tops.length; index++) {
-                var top_1 = _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.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];
-            control.dispose();
-        }
-        for (var index = 0; index < this._rowDefinitions.length; index++) {
-            this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
-        }
-        for (var index = 0; index < this._columnDefinitions.length; index++) {
-            this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
-        }
-        this._rowDefinitionObservers = [];
-        this._rowDefinitions = [];
-        this._columnDefinitionObservers = [];
-        this._columnDefinitions = [];
-        this._cells = {};
-        this._childControls = [];
-    };
-    /**
-     * Serializes the current control
-     * @param serializationObject defined the JSON serialized object
-     */
-    Grid.prototype.serialize = function (serializationObject) {
-        _super.prototype.serialize.call(this, 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 };
-            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 };
-            serializationObject.rows.push(childSerializationObject);
-        }
-        this.children.forEach(function (child) {
-            serializationObject.tags.push(child._tag);
-        });
-    };
-    /** @hidden */
-    Grid.prototype._parseFromContent = function (serializedObject, host) {
-        _super.prototype._parseFromContent.call(this, serializedObject, host);
-        var children = [];
-        this.children.forEach(function (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;
-            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;
-            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(":")));
-            if (isNaN(rowNumber)) {
-                rowNumber = 0;
-            }
-            var 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);
+import { __extends } from "tslib";
+import { Container } from "./container";
+import { ValueAndUnit } from "../valueAndUnit";
+import { Control } from "./control";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+/**
+ * Class used to create a 2D grid container
+ */
+var Grid = /** @class */ (function (_super) {
+    __extends(Grid, _super);
+    /**
+     * 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;
+    }
+    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) {
+        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) {
+        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; }
+        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._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; }
+        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._markAsDirty();
+        return this;
+    };
+    /**
+     * Update a row definition
+     * @param index defines the index of the row to update
+     * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+     * @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; }
+        if (index < 0 || index >= this._rowDefinitions.length) {
+            return this;
+        }
+        var 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._markAsDirty();
+        return this;
+    };
+    /**
+     * Update a column definition
+     * @param index defines the index of the column to update
+     * @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.setColumnDefinition = function (index, width, isPixel) {
+        var _this = this;
+        if (isPixel === void 0) { isPixel = false; }
+        if (index < 0 || index >= this._columnDefinitions.length) {
+            return this;
+        }
+        var 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._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)];
+        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) {
+        return child._tag;
+    };
+    Grid.prototype._removeCell = function (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);
+            if (childIndex !== -1) {
+                this._childControls.splice(childIndex, 1);
+            }
+        }
+        delete this._cells[key];
+    };
+    Grid.prototype._offsetCell = function (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];
+            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) {
+        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];
+            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);
+                this._offsetCell(previousKey, key);
+            }
+        }
+        this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
+        this._columnDefinitions.splice(index, 1);
+        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) {
+        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];
+            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);
+                this._offsetCell(previousKey, key);
+            }
+        }
+        this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
+        this._rowDefinitions.splice(index, 1);
+        this._rowDefinitionObservers.splice(index, 1);
+        this._markAsDirty();
+        return this;
+    };
+    /**
+     * Adds a new control to the current grid
+     * @param control defines the control to add
+     * @param row defines the row where to add the control (0 by default)
+     * @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; }
+        if (this._rowDefinitions.length === 0) {
+            // Add default row definition
+            this.addRowDefinition(1, false);
+        }
+        if (this._columnDefinitions.length === 0) {
+            // Add default column definition
+            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"));
+            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];
+        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);
+        }
+        goodContainer.addControl(control);
+        this._childControls.push(control);
+        control._tag = key;
+        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);
+        if (index !== -1) {
+            this._childControls.splice(index, 1);
+        }
+        var cell = this._cells[control._tag];
+        if (cell) {
+            cell.removeControl(control);
+            control._tag = null;
+        }
+        this._markAsDirty();
+        return this;
+    };
+    Grid.prototype._getTypeName = function () {
+        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;
+        // Heights
+        var index = 0;
+        for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
+            var rowDefinition = _a[_i];
+            if (rowDefinition.isPixel) {
+                var height = rowDefinition.getValue(this._host);
+                availableHeight -= height;
+                heights[index] = height;
+            }
+            else {
+                globalHeightPercentage += rowDefinition.value;
+            }
+            index++;
+        }
+        var top = 0;
+        index = 0;
+        for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
+            var rowDefinition = _c[_b];
+            tops.push(top);
+            if (!rowDefinition.isPixel) {
+                var height = (rowDefinition.value / globalHeightPercentage) * availableHeight;
+                top += height;
+                heights[index] = height;
+            }
+            else {
+                top += rowDefinition.getValue(this._host);
+            }
+            index++;
+        }
+        // Widths
+        index = 0;
+        for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
+            var columnDefinition = _e[_d];
+            if (columnDefinition.isPixel) {
+                var width = columnDefinition.getValue(this._host);
+                availableWidth -= width;
+                widths[index] = width;
+            }
+            else {
+                globalWidthPercentage += columnDefinition.value;
+            }
+            index++;
+        }
+        var left = 0;
+        index = 0;
+        for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
+            var columnDefinition = _g[_f];
+            lefts.push(left);
+            if (!columnDefinition.isPixel) {
+                var width = (columnDefinition.value / globalWidthPercentage) * availableWidth;
+                left += width;
+                widths[index] = width;
+            }
+            else {
+                left += columnDefinition.getValue(this._host);
+            }
+            index++;
+        }
+        definitionCallback(lefts, tops, widths, heights);
+    };
+    Grid.prototype._additionalProcessing = function (parentMeasure, context) {
+        var _this = this;
+        this._getGridDefinitions(function (lefts, tops, widths, heights) {
+            // Setting child sizes
+            for (var 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];
+                cell.left = lefts[y] + "px";
+                cell.top = tops[x] + "px";
+                cell.width = widths[y] + "px";
+                cell.height = heights[x] + "px";
+                cell._left.ignoreAdaptiveScaling = true;
+                cell._top.ignoreAdaptiveScaling = true;
+                cell._width.ignoreAdaptiveScaling = true;
+                cell._height.ignoreAdaptiveScaling = true;
+            }
+        });
+        _super.prototype._additionalProcessing.call(this, parentMeasure, context);
+    };
+    Grid.prototype._flagDescendantsAsMatrixDirty = function () {
+        for (var key in this._cells) {
+            if (!Object.prototype.hasOwnProperty.call(this._cells, key)) {
+                continue;
+            }
+            var 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) {
+            // Columns
+            for (var index = 0; index < lefts.length; index++) {
+                var 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.stroke();
+            }
+            // Rows
+            for (var index = 0; index < tops.length; index++) {
+                var top_1 = _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.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];
+            control.dispose();
+        }
+        for (var index = 0; index < this._rowDefinitions.length; index++) {
+            this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
+        }
+        for (var index = 0; index < this._columnDefinitions.length; index++) {
+            this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
+        }
+        this._rowDefinitionObservers = [];
+        this._rowDefinitions = [];
+        this._columnDefinitionObservers = [];
+        this._columnDefinitions = [];
+        this._cells = {};
+        this._childControls = [];
+    };
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     */
+    Grid.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, 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 };
+            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 };
+            serializationObject.rows.push(childSerializationObject);
+        }
+        this.children.forEach(function (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) {
+            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;
+            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;
+            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(":")));
+            if (isNaN(rowNumber)) {
+                rowNumber = 0;
+            }
+            var 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