merge

dist/preview release/babylon.max.js

@@ -33351,7 +33351,7 @@ var BABYLON;
         /**
          * Creates a ribbon mesh.
          * Please consider using the same method from the MeshBuilder class instead.
-         * The ribbon is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The ribbon is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          *
          * Please read this full tutorial to understand how to design a ribbon : http://doc.babylonjs.com/tutorials/Ribbon_Tutorial
          * The parameter `pathArray` is a required array of paths, what are each an array of successive Vector3. The pathArray parameter depicts the ribbon geometry.
@@ -33590,7 +33590,7 @@ var BABYLON;
         };
         /**
          * Creates an extruded shape mesh.
-         * The extrusion is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The extrusion is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          *
          * Please read this full tutorial to understand how to design an extruded shape : http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
@@ -33622,7 +33622,7 @@ var BABYLON;
         };
         /**
          * Creates an custom extruded shape mesh.
-         * The custom extrusion is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The custom extrusion is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          *
          * Please read this full tutorial to understand how to design a custom extruded shape : http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
@@ -33779,7 +33779,7 @@ var BABYLON;
         };
         /**
          * Creates a tube mesh.
-         * The tube is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The tube is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          * The parameter `path` is a required array of successive Vector3. It is the curve used as the axis of the tube.
          * The parameter `radius` (positive float, default 1) sets the tube radius size.

dist/preview release/babylon.no-module.max.js

@@ -33318,7 +33318,7 @@ var BABYLON;
         /**
          * Creates a ribbon mesh.
          * Please consider using the same method from the MeshBuilder class instead.
-         * The ribbon is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The ribbon is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          *
          * Please read this full tutorial to understand how to design a ribbon : http://doc.babylonjs.com/tutorials/Ribbon_Tutorial
          * The parameter `pathArray` is a required array of paths, what are each an array of successive Vector3. The pathArray parameter depicts the ribbon geometry.
@@ -33557,7 +33557,7 @@ var BABYLON;
         };
         /**
          * Creates an extruded shape mesh.
-         * The extrusion is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The extrusion is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          *
          * Please read this full tutorial to understand how to design an extruded shape : http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
@@ -33589,7 +33589,7 @@ var BABYLON;
         };
         /**
          * Creates an custom extruded shape mesh.
-         * The custom extrusion is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The custom extrusion is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          *
          * Please read this full tutorial to understand how to design a custom extruded shape : http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
@@ -33746,7 +33746,7 @@ var BABYLON;
         };
         /**
          * Creates a tube mesh.
-         * The tube is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The tube is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          * The parameter `path` is a required array of successive Vector3. It is the curve used as the axis of the tube.
          * The parameter `radius` (positive float, default 1) sets the tube radius size.

dist/preview release/es6.js

@@ -33318,7 +33318,7 @@ var BABYLON;
         /**
          * Creates a ribbon mesh.
          * Please consider using the same method from the MeshBuilder class instead.
-         * The ribbon is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The ribbon is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          *
          * Please read this full tutorial to understand how to design a ribbon : http://doc.babylonjs.com/tutorials/Ribbon_Tutorial
          * The parameter `pathArray` is a required array of paths, what are each an array of successive Vector3. The pathArray parameter depicts the ribbon geometry.
@@ -33557,7 +33557,7 @@ var BABYLON;
         };
         /**
          * Creates an extruded shape mesh.
-         * The extrusion is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The extrusion is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          *
          * Please read this full tutorial to understand how to design an extruded shape : http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
@@ -33589,7 +33589,7 @@ var BABYLON;
         };
         /**
          * Creates an custom extruded shape mesh.
-         * The custom extrusion is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The custom extrusion is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          *
          * Please read this full tutorial to understand how to design a custom extruded shape : http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
@@ -33746,7 +33746,7 @@ var BABYLON;
         };
         /**
          * Creates a tube mesh.
-         * The tube is a parametric shape :  http://doc.babylonjs.com/tutorials/Parametric_Shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
+         * The tube is a parametric shape :  http://doc.babylonjs.com/how_to/parametric_shapes.  It has no predefined shape. Its final shape will depend on the input parameters.
          * Please consider using the same method from the MeshBuilder class instead.
          * The parameter `path` is a required array of successive Vector3. It is the curve used as the axis of the tube.
          * The parameter `radius` (positive float, default 1) sets the tube radius size.

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

@@ -0,0 +1,189 @@
+
+import { Control } from ".";
+import { Measure } from "..";
+
+/** Class used to render a grid  */
+export class DisplayGrid extends Control {
+    private _cellWidth = 20;
+    private _cellHeight = 20;
+
+    private _minorLineTickness = 1;
+    private _minorLineColor = "DarkGray";
+
+    private _majorLineTickness = 2;
+    private _majorLineColor = "White";
+
+    private _majorLineFrequency = 5;
+
+    private _background = "Black";
+
+    /** Gets or sets background color (Black by default) */
+    public get background(): string {
+        return this._background;
+    }
+
+    public set background(value: string) {
+        if (this._background === value) {
+            return;
+        }
+
+        this._background = value;
+        this._markAsDirty();
+    }    
+
+    /** Gets or sets the width of each cell (20 by default) */
+    public get cellWidth(): number {
+        return this._cellWidth;
+    }
+
+    public set cellWidth(value: number) {
+        this._cellWidth = value;
+
+        this._markAsDirty();
+    }
+
+    /** Gets or sets the height of each cell (20 by default) */
+    public get cellHeight(): number {
+        return this._cellHeight;
+    }
+
+    public set cellHeight(value: number) {
+        this._cellHeight = value;
+
+        this._markAsDirty();
+    }
+
+    /** Gets or sets the tickness of minor lines (1 by default) */
+    public get minorLineTickness(): number {
+        return this._minorLineTickness;
+    }
+
+    public set minorLineTickness(value: number) {
+        this._minorLineTickness = value;
+
+        this._markAsDirty();
+    }
+
+    /** Gets or sets the color of minor lines (DarkGray by default) */
+    public get minorLineColor(): string {
+        return this._minorLineColor;
+    }
+
+    public set minorLineColor(value: string) {
+        this._minorLineColor = value;
+
+        this._markAsDirty();
+    }    
+
+    /** Gets or sets the tickness of major lines (2 by default) */
+    public get majorLineTickness(): number {
+        return this._majorLineTickness;
+    }
+
+    public set majorLineTickness(value: number) {
+        this._majorLineTickness = value;
+
+        this._markAsDirty();
+    }
+
+    /** Gets or sets the color of major lines (White by default) */
+    public get majorLineColor(): string {
+        return this._majorLineColor;
+    }
+
+    public set majorLineColor(value: string) {
+        this._majorLineColor = value;
+
+        this._markAsDirty();
+    }    
+
+    /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/
+    public get majorLineFrequency(): number {
+        return this._majorLineFrequency;
+    }
+
+    public set majorLineFrequency(value: number) {
+        this._majorLineFrequency = value;
+
+        this._markAsDirty();
+    }
+
+    /**
+     * Creates a new GridDisplayRectangle
+     * @param name defines the control name
+     */
+    constructor(public name?: string) {
+        super(name);
+    }
+
+    public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+        context.save();
+        
+        this._applyStates(context);
+
+        if (this._processMeasures(parentMeasure, context)) {
+
+            if (this._background) {
+                context.fillStyle = this._background;
+                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            }
+
+            let cellCountX = this._currentMeasure.width / this._cellWidth;
+            let cellCountY = this._currentMeasure.height / this._cellHeight;
+
+            // Minor lines
+            context.strokeStyle = this._minorLineColor;
+            context.lineWidth = this._minorLineTickness;        
+
+            const left = this._currentMeasure.left + this._currentMeasure.width / 2;
+
+            for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {
+                const cellX = left + x * this.cellWidth;
+
+                context.beginPath();
+                context.moveTo(cellX, this._currentMeasure.top);
+                context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                
+                context.stroke();                
+            }
+
+            const top = this._currentMeasure.top + this._currentMeasure.height / 2;
+
+            for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {
+                const cellY = top + y * this.cellHeight;
+
+                context.beginPath();
+                context.moveTo(this._currentMeasure.left, cellY);
+                context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
+                context.stroke();
+            }
+
+            // Major lines
+            context.strokeStyle = this._majorLineColor;
+            context.lineWidth = this._majorLineTickness;        
+
+            for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {
+                let cellX = left + x * this.cellWidth;
+
+                context.beginPath();    
+                context.moveTo(cellX, this._currentMeasure.top);
+                context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                context.stroke();
+            }
+
+            for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {
+                let cellY = top + y * this.cellHeight;
+                context.moveTo(this._currentMeasure.left, cellY);
+                context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
+                context.closePath();
+                context.stroke();
+            }
+        }
+
+        context.restore();
+    }
+
+    protected _getTypeName(): string {
+        return "DisplayGrid";
+    }
+}    

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

@@ -16,5 +16,6 @@ export * from "./textBlock";
 export * from "./virtualKeyboard";
 export * from "./slider";
 export * from "./rectangle";
+export * from "./displayGrid";
 
 export * from "./statics";