GUI grid - step 2

dist/preview release/gui/babylon.gui.d.ts

@@ -607,6 +607,8 @@ declare module BABYLON.GUI {
         private _enterCount;
         private _doNotRender;
         private _downPointerIds;
+        /** @hidden */
+        _tag: any;
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         isHitTestVisible: boolean;
         /** Gets or sets a boolean indicating if the control can block pointer events */
@@ -1874,20 +1876,53 @@ declare module BABYLON.GUI {
         private _rowDefinitions;
         private _columnDefinitions;
         private _cells;
+        private _childControls;
+        /** Gets the list of children */
+        readonly children: Control[];
         /**
          * 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 weight is expressed in pixel (or in percentage)
+         * @param isPixel defines if the height is expressed in pixel (or in percentage)
          * @returns the current grid
          */
         addRowDefinition(height: number, isPixel?: boolean): Grid;
         /**
-         * Adds a new row to the grid
-         * @param weight defines the weight of the column (either in pixel or a value between 0 and 1)
+         * 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
+         */
+        addColumnDefinition(width: number, isPixel?: boolean): Grid;
+        /**
+         * 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
          */
-        addColumnDefinition(weight: number, isPixel?: boolean): Grid;
+        setRowDefinition(index: number, height: number, isPixel?: boolean): Grid;
+        /**
+         * 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
+         */
+        setColumnDefinition(index: number, width: number, isPixel?: boolean): Grid;
+        private _removeCell(cell, key);
+        private _offsetCell(previousKey, key);
+        /**
+         * Remove a column definition at specified index
+         * @param index defines the index of the column to remove
+         * @returns the current grid
+         */
+        removeColumnDefinition(index: number): Grid;
+        /**
+         * Remove a row definition at specified index
+         * @param index defines the index of the row to remove
+         * @returns the current grid
+         */
+        removeRowDefinition(index: number): Grid;
         /**
          * Adds a new control to the current grid
          * @param control defines the control to add
@@ -1895,7 +1930,13 @@ declare module BABYLON.GUI {
          * @param column defines the column where to add the control (0 by default)
          * @returns the current grid
          */
-        addControl(control: Nullable<Control>, row?: number, column?: number): Grid;
+        addControl(control: Control, row?: number, column?: number): Grid;
+        /**
+         * Removes a control from the current container
+         * @param control defines the control to remove
+         * @returns the current container
+         */
+        removeControl(control: Control): Container;
         /**
          * Creates a new Grid
          * @param name defines control name

dist/preview release/gui/babylon.gui.js

@@ -2888,7 +2888,7 @@ var BABYLON;
              * @returns the child control if found
              */
             Container.prototype.getChildByName = function (name) {
-                for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
                     var child = _a[_i];
                     if (child.name === name) {
                         return child;
@@ -2903,7 +2903,7 @@ var BABYLON;
              * @returns the child control if found
              */
             Container.prototype.getChildByType = function (name, type) {
-                for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
                     var child = _a[_i];
                     if (child.typeName === type) {
                         return child;
@@ -2917,7 +2917,7 @@ var BABYLON;
              * @returns true if the control is in child list
              */
             Container.prototype.containsControl = function (control) {
-                return this._children.indexOf(control) !== -1;
+                return this.children.indexOf(control) !== -1;
             };
             /**
              * Adds a new control to the current container
@@ -6498,28 +6498,146 @@ var BABYLON;
                 _this._rowDefinitions = new Array();
                 _this._columnDefinitions = new Array();
                 _this._cells = {};
+                _this._childControls = new Array();
                 return _this;
             }
+            Object.defineProperty(Grid.prototype, "children", {
+                /** Gets the list of children */
+                get: function () {
+                    return this._childControls;
+                },
+                enumerable: true,
+                configurable: true
+            });
             /**
              * 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 weight is expressed in pixel (or in percentage)
+             * @param isPixel defines if the height is expressed in pixel (or in percentage)
              * @returns the current grid
              */
             Grid.prototype.addRowDefinition = function (height, isPixel) {
                 if (isPixel === void 0) { isPixel = false; }
                 this._rowDefinitions.push(new GUI.ValueAndUnit(height, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE));
+                this._markAsDirty();
                 return this;
             };
             /**
-             * Adds a new row to the grid
-             * @param weight defines the weight of the column (either in pixel or a value between 0 and 1)
+             * 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) {
+                if (isPixel === void 0) { isPixel = false; }
+                this._columnDefinitions.push(new GUI.ValueAndUnit(width, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE));
+                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.addColumnDefinition = function (weight, isPixel) {
+            Grid.prototype.setRowDefinition = function (index, height, isPixel) {
                 if (isPixel === void 0) { isPixel = false; }
-                this._columnDefinitions.push(new GUI.ValueAndUnit(weight, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE));
+                if (index < 0 || index >= this._rowDefinitions.length) {
+                    return this;
+                }
+                this._rowDefinitions[index] = new GUI.ValueAndUnit(height, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE);
+                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) {
+                if (isPixel === void 0) { isPixel = false; }
+                if (index < 0 || index >= this._columnDefinitions.length) {
+                    return this;
+                }
+                this._columnDefinitions[index] = new GUI.ValueAndUnit(width, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE);
+                this._markAsDirty();
+                return this;
+            };
+            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 = x + ":" + 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 = x + ":" + (y - 1);
+                        var key = x + ":" + y;
+                        this._offsetCell(previousKey, key);
+                    }
+                }
+                this._columnDefinitions.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 = index + ":" + 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 = x - 1 + ":" + y;
+                        var key = x + ":" + y;
+                        this._offsetCell(previousKey, key);
+                    }
+                }
+                this._rowDefinitions.splice(index, 1);
+                this._markAsDirty();
                 return this;
             };
             /**
@@ -6552,6 +6670,26 @@ var BABYLON;
                     _super.prototype.addControl.call(this, goodContainer);
                 }
                 goodContainer.addControl(control);
+                this._childControls.push(control);
+                control._tag = key;
+                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);
+                }
+                this._markAsDirty();
                 return this;
             };
             Grid.prototype._getTypeName = function () {

dist/preview release/gui/babylon.gui.module.d.ts

@@ -612,6 +612,8 @@ declare module BABYLON.GUI {
         private _enterCount;
         private _doNotRender;
         private _downPointerIds;
+        /** @hidden */
+        _tag: any;
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         isHitTestVisible: boolean;
         /** Gets or sets a boolean indicating if the control can block pointer events */
@@ -1879,20 +1881,53 @@ declare module BABYLON.GUI {
         private _rowDefinitions;
         private _columnDefinitions;
         private _cells;
+        private _childControls;
+        /** Gets the list of children */
+        readonly children: Control[];
         /**
          * 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 weight is expressed in pixel (or in percentage)
+         * @param isPixel defines if the height is expressed in pixel (or in percentage)
          * @returns the current grid
          */
         addRowDefinition(height: number, isPixel?: boolean): Grid;
         /**
-         * Adds a new row to the grid
-         * @param weight defines the weight of the column (either in pixel or a value between 0 and 1)
+         * 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
+         */
+        addColumnDefinition(width: number, isPixel?: boolean): Grid;
+        /**
+         * 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
          */
-        addColumnDefinition(weight: number, isPixel?: boolean): Grid;
+        setRowDefinition(index: number, height: number, isPixel?: boolean): Grid;
+        /**
+         * 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
+         */
+        setColumnDefinition(index: number, width: number, isPixel?: boolean): Grid;
+        private _removeCell(cell, key);
+        private _offsetCell(previousKey, key);
+        /**
+         * Remove a column definition at specified index
+         * @param index defines the index of the column to remove
+         * @returns the current grid
+         */
+        removeColumnDefinition(index: number): Grid;
+        /**
+         * Remove a row definition at specified index
+         * @param index defines the index of the row to remove
+         * @returns the current grid
+         */
+        removeRowDefinition(index: number): Grid;
         /**
          * Adds a new control to the current grid
          * @param control defines the control to add
@@ -1900,7 +1935,13 @@ declare module BABYLON.GUI {
          * @param column defines the column where to add the control (0 by default)
          * @returns the current grid
          */
-        addControl(control: Nullable<Control>, row?: number, column?: number): Grid;
+        addControl(control: Control, row?: number, column?: number): Grid;
+        /**
+         * Removes a control from the current container
+         * @param control defines the control to remove
+         * @returns the current container
+         */
+        removeControl(control: Control): Container;
         /**
          * Creates a new Grid
          * @param name defines control name

dist/preview release/what's new.md

@@ -7,6 +7,7 @@
 - Added new `PhotoDome` object to display 360 photos. [Demo](https://www.babylonjs-playground.com/#14KRGG#0) ([SzeyinLee](https://github.com/SzeyinLee))
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
 - Added [Environmnent Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
+- New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
 
 ## Updates
 

gui/src/2D/controls/container.ts

@@ -92,7 +92,7 @@ module BABYLON.GUI {
          * @returns the child control if found
          */
         public getChildByName(name: string): Nullable<Control> {
-            for (var child of this._children) {
+            for (var child of this.children) {
                 if (child.name === name) {
                     return child;
                 }
@@ -108,7 +108,7 @@ module BABYLON.GUI {
          * @returns the child control if found
          */        
         public getChildByType(name: string, type: string): Nullable<Control> {
-            for (var child of this._children) {
+            for (var child of this.children) {
                 if (child.typeName === type) {
                     return child;
                 }
@@ -123,7 +123,7 @@ module BABYLON.GUI {
          * @returns true if the control is in child list
          */
         public containsControl(control: Control): boolean {
-            return this._children.indexOf(control) !== -1;
+            return this.children.indexOf(control) !== -1;
         }
 
         /**

gui/src/2D/controls/control.ts

@@ -72,6 +72,9 @@ module BABYLON.GUI {
         private _doNotRender = false;
         private _downPointerIds:{[id:number] : boolean} = {};
 
+        /** @hidden */
+        public _tag: any;
+
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         public isHitTestVisible = true;
         /** Gets or sets a boolean indicating if the control can block pointer events */

gui/src/2D/controls/grid.ts

@@ -8,37 +8,185 @@ module BABYLON.GUI {
         private _rowDefinitions = new Array<ValueAndUnit>();
         private _columnDefinitions = new Array<ValueAndUnit>();
         private _cells: {[key: string]:Container} = {};
+        private _childControls = new Array<Control>();
+
+        /** Gets the list of children */
+        public get children(): Control[] {
+            return this._childControls;
+        }             
 
         /**
          * 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 weight is expressed in pixel (or in percentage)
+         * @param isPixel defines if the height is expressed in pixel (or in percentage)
          * @returns the current grid
          */
         public addRowDefinition(height: number, isPixel = false): Grid {
             this._rowDefinitions.push(new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
+
+            this._markAsDirty();
+
             return this;
         }
 
         /**
          * Adds a new column to the grid
-         * @param weight defines the weight of the column (either in pixel or a value between 0 and 1)
-         * @param isPixel defines if the weight is expressed in pixel (or in percentage)
+         * @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
          */
-        public addColumnDefinition(weight: number, isPixel = false): Grid {
-            this._columnDefinitions.push(new ValueAndUnit(weight, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
+        public addColumnDefinition(width: number, isPixel = false): Grid {
+            this._columnDefinitions.push(new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
+            
+            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
+         */
+        public setRowDefinition(index: number, height: number, isPixel = false): Grid {
+            if (index < 0 || index >= this._rowDefinitions.length) {
+                return this;
+            }
+
+            this._rowDefinitions[index] = new ValueAndUnit(height,isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
+
+            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
+         */
+        public setColumnDefinition(index: number, width: number, isPixel = false): Grid {
+            if (index < 0 || index >= this._columnDefinitions.length) {
+                return this;
+            }
+
+            this._columnDefinitions[index] = new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
+
+            this._markAsDirty();
+
+            return this;
+        }        
+
+        private _removeCell(cell: Container, key: string) {
+            if (!cell) {
+                return;
+            }
+
+            super.removeControl(cell);
+
+            for (var control of cell.children) {
+                let childIndex = this._childControls.indexOf(control);
+
+                if (childIndex !== -1) {
+                    this._childControls.splice(childIndex, 1);
+                }
+            }
+
+            delete this._cells[key];
+        }
+
+        private _offsetCell(previousKey: string, key: string) {
+            if (!this._cells[key]) {
+                return;
+            }
+
+            this._cells[previousKey] = this._cells[key];
+
+            for (var 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
+         */
+        public removeColumnDefinition(index: number): Grid {
+            if (index < 0 || index >= this._columnDefinitions.length) {
+                return this;
+            }
+
+            for (var x = 0; x < this._rowDefinitions.length; x++) {
+                let key = `${x}:${index}`;
+                let 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++) {
+                    let previousKey = `${x}:${y - 1}`;
+                    let key = `${x}:${y}`;
+
+                    this._offsetCell(previousKey, key);
+                }
+            }
+            
+            this._columnDefinitions.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
+         */
+        public removeRowDefinition(index: number): Grid {
+            if (index < 0 || index >= this._rowDefinitions.length) {
+                return this;
+            }
+
+            for (var y = 0; y < this._columnDefinitions.length; y++) {
+                let key = `${index}:${y}`;
+                let 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++) {
+                    let previousKey = `${x - 1}:${y}`;
+                    let key = `${x}:${y}`;
+
+                    this._offsetCell(previousKey, key);
+                }
+            }
+            
+            this._rowDefinitions.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
          */
-        public addControl(control: Nullable<Control>, row: number = 0, column: number = 0): Grid {
+        public addControl(control: Control, row: number = 0, column: number = 0): Grid {
             if (this._rowDefinitions.length === 0) {
                 // Add default row definition
                 this.addRowDefinition(1, false);
@@ -63,11 +211,37 @@ module BABYLON.GUI {
             }
 
             goodContainer.addControl(control);
+            this._childControls.push(control);
+            control._tag = key;
+
+            this._markAsDirty();            
 
             return this;
         }
 
         /**
+         * Removes a control from the current container
+         * @param control defines the control to remove
+         * @returns the current container
+         */        
+        public removeControl(control: Control): Container {
+            var index = this._childControls.indexOf(control);
+
+            if (index !== -1) {
+                this._childControls.splice(index, 1);
+            }
+
+            let cell = this._cells[control._tag];
+
+            if (cell) {
+                cell.removeControl(control);
+            }
+
+            this._markAsDirty();
+            return this;
+        }        
+
+        /**
          * Creates a new Grid
          * @param name defines control name
          */