Merge remote-tracking branch 'upstream/master'

Playground/js/index.js

@@ -558,7 +558,8 @@ function showError(errorMessage, errorEvent) {
                     }
     
                     var scene;
-    
+                    var defaultEngineZip = "new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })";
+
                     if (code.indexOf("createEngine") !== -1) {
                         createEngineFunction = "createEngine";
                     }
@@ -581,7 +582,7 @@ function showError(errorMessage, errorEvent) {
                         eval("runScript = function(scene, canvas) {" + code + "}");
                         runScript(scene, canvas);
     
-                        zipCode = "var scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+                        zipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
                     } else {
                         //execute the code
                         eval(code);
@@ -600,8 +601,15 @@ function showError(errorMessage, errorEvent) {
                             return;
                         }
     
-                        // update the scene code for the zip file
-                        zipCode = code + "\r\n\r\nvar scene = " + createSceneFunction + "()";
+                        var createEngineZip = (createEngineFunction === "createEngine")
+                            ? "createEngine()"
+                            : defaultEngineZip
+
+                        zipCode = 
+                            code + "\r\n\r\n" +
+                            "var engine = " + createEngineZip + ";\r\n" +
+                            "var scene = " + createSceneFunction + "();"
+
                     }
     
                     engine.runRenderLoop(function () {

Playground/zipContent/index.html

@@ -40,7 +40,6 @@
     <canvas id="renderCanvas"></canvas>
     <script>
         var canvas = document.getElementById("renderCanvas");
-        var engine = new BABYLON.Engine(canvas, true);
 
 ####INJECT####
 

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

@@ -0,0 +1,111 @@
+
+import { Control } from ".";
+import { Measure } from "..";
+
+/** Class used to render a grid  */
+export class GridDisplay extends Control {
+    private _cellWidth = 10;
+    private _cellHeight = 10;
+    private _minorLineTickness = 1;
+    private _minorLineColor = "DarkGray";
+    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 (10 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 (10 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();
+    }    
+
+    /**
+     * 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)) {
+
+            context.fillStyle = this._background;
+            context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+
+            const cellCountX = this._currentMeasure.width / this._cellWidth;
+            const cellCountY = this._currentMeasure.height / this._cellHeight;
+
+            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.moveTo(cellX, this._currentMeasure.top);
+                context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                context.stroke();
+            }
+        }
+
+        context.restore();
+    }
+
+    protected _getTypeName(): string {
+        return "GridDisplayRectangle";
+    }
+}    

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

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

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

@@ -49,7 +49,7 @@ export class Rectangle extends Container {
     protected _getTypeName(): string {
         return "Rectangle";
     }
-
+    
     protected _localDraw(context: CanvasRenderingContext2D): void {
         context.save();