first gui experiment

Tools/Gulp/config.json

@@ -883,7 +883,8 @@
         "proceduralTexturesLibrary",
         "loaders",
         "serializers",
-        "inspector"
+        "inspector",
+        "gui"
     ],
     "materialsLibrary": {
         "libraries": [
@@ -1210,6 +1211,26 @@
             "distOutputDirectory": "/serializers/"
         }
     },
+    "gui": {
+        "libraries": [
+            {
+                "files": [
+                    "../../gui/src/advancedDynamicTexture.ts",
+                    "../../gui/src/measure.ts",
+                    "../../gui/src/controls/control.ts",
+                    "../../gui/src/controls/contentControl.ts",
+                    "../../gui/src/controls/container.ts",
+                    "../../gui/src/controls/rectangle.ts",
+                    "../../gui/src/controls/textBlock.ts"
+                ],
+                "output": "babylon.gui.js"
+            }
+        ],
+        "build": {
+            "srcOutputDirectory": "../../gui/",
+            "distOutputDirectory": "/gui/"
+        }
+    },    
     "canvas2D": {
         "libraries": [
             {

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

@@ -0,0 +1,5 @@
+/// <reference path="../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class AdvancedDynamicTexture extends DynamicTexture {
+    }
+}

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

@@ -0,0 +1,24 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var AdvancedDynamicTexture = (function (_super) {
+        __extends(AdvancedDynamicTexture, _super);
+        function AdvancedDynamicTexture() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return AdvancedDynamicTexture;
+    }(BABYLON.DynamicTexture));
+    BABYLON.AdvancedDynamicTexture = AdvancedDynamicTexture;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=advancedDynamicTexture.js.map

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

@@ -0,0 +1 @@
+var BABYLON;!(function(n){var t=(function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return __extends(t,n),t})(n.DynamicTexture);n.AdvancedDynamicTexture=t})(BABYLON||(BABYLON={}));

gui/src/advancedDynamicTexture.js

@@ -0,0 +1,95 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var AdvancedDynamicTexture = (function (_super) {
+            __extends(AdvancedDynamicTexture, _super);
+            function AdvancedDynamicTexture(name, scene) {
+                var _this = _super.call(this, name, {}, scene, false, BABYLON.Texture.NEAREST_SAMPLINGMODE, BABYLON.Engine.TEXTUREFORMAT_RGBA) || this;
+                _this._dirty = false;
+                _this._rootContainer = new GUI.Container("root");
+                _this._resizeObserver = _this.getScene().getEngine().onResizeObservable.add(function () { return _this._markAsDirty(); });
+                _this._renderObserver = _this.getScene().onBeforeRenderObservable.add(function () { return _this._checkUpdate(); });
+                return _this;
+            }
+            Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
+                get: function () {
+                    return this._background;
+                },
+                set: function (value) {
+                    if (this._background === value) {
+                        return;
+                    }
+                    this._background = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            AdvancedDynamicTexture.prototype.addControl = function (control) {
+                control._setRoot(this._rootContainer);
+                this._rootContainer.addControl(control);
+                return this;
+            };
+            AdvancedDynamicTexture.prototype.removeControl = function (control) {
+                this._rootContainer.removeControl(control);
+                return this;
+            };
+            AdvancedDynamicTexture.prototype.dispose = function () {
+                this.getScene().onBeforeRenderObservable.remove(this._renderObserver);
+                this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
+                _super.prototype.dispose.call(this);
+            };
+            AdvancedDynamicTexture.prototype._markAsDirty = function () {
+                this._dirty = true;
+            };
+            AdvancedDynamicTexture.prototype._checkUpdate = function () {
+                if (!this._dirty) {
+                    return;
+                }
+                this._dirty = false;
+                this._render();
+                this.update();
+            };
+            AdvancedDynamicTexture.prototype._render = function () {
+                // Check size
+                var engine = this.getScene().getEngine();
+                var textureSize = this.getSize();
+                var renderWidth = engine.getRenderWidth();
+                var renderHeight = engine.getRenderHeight();
+                if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
+                    this.scaleTo(renderWidth, renderHeight);
+                }
+                // Clear
+                var context = this.getContext();
+                if (this._background) {
+                    context.save();
+                    context.fillStyle = this._background;
+                    context.fillRect(0, 0, renderWidth, renderHeight);
+                    context.restore();
+                }
+                else {
+                    this.clear();
+                }
+                // Render
+                var measure = new GUI.Measure(0, 0, renderWidth, renderHeight);
+                this._rootContainer._draw(measure, context);
+            };
+            return AdvancedDynamicTexture;
+        }(BABYLON.DynamicTexture));
+        GUI.AdvancedDynamicTexture = AdvancedDynamicTexture;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=advancedDynamicTexture.js.map

gui/src/advancedDynamicTexture.ts

@@ -0,0 +1,91 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class AdvancedDynamicTexture extends DynamicTexture {
+        private _dirty = false;
+        private _renderObserver: Observer<Scene>;
+        private _resizeObserver: Observer<Engine>;
+        private _background: string;
+        private _rootContainer = new Container("root");
+
+        public get background(): string {
+            return this._background;
+        }
+
+        public set background(value: string) {
+            if (this._background === value) {
+                return;
+            }
+
+            this._background = value;
+            this._markAsDirty();
+        }
+        
+        constructor(name: string, scene: Scene) {
+            super(name, {}, scene, false, Texture.NEAREST_SAMPLINGMODE, Engine.TEXTUREFORMAT_RGBA);
+
+            this._resizeObserver = this.getScene().getEngine().onResizeObservable.add(() => this._markAsDirty());
+            this._renderObserver = this.getScene().onBeforeRenderObservable.add(() => this._checkUpdate());
+        }
+
+        public addControl(control: Control): AdvancedDynamicTexture {
+            control._setRoot(this._rootContainer);
+            this._rootContainer.addControl(control);
+
+            return this;
+        }
+
+        public removeControl(control: Control): AdvancedDynamicTexture {
+            this._rootContainer.removeControl(control);
+            return this;
+        }
+
+        public dispose() {
+            this.getScene().onBeforeRenderObservable.remove(this._renderObserver);
+            this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
+
+            super.dispose();
+        }
+
+        public _markAsDirty() {
+            this._dirty = true;
+        }
+
+        private _checkUpdate(): void {
+            if (!this._dirty) {
+                return;
+            }
+            this._dirty = false;
+
+            this._render();
+            this.update();
+        }
+
+        private _render(): void {
+            // Check size
+            var engine = this.getScene().getEngine();
+            var textureSize = this.getSize();
+            var renderWidth = engine.getRenderWidth();
+            var renderHeight = engine.getRenderHeight();
+
+            if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
+                this.scaleTo(renderWidth, renderHeight);
+            }
+
+            // Clear
+            var context = this.getContext();
+            if (this._background) {
+                context.save();
+                context.fillStyle = this._background;
+                context.fillRect(0, 0, renderWidth, renderHeight);
+                context.restore();
+            } else {
+                this.clear();
+            }
+
+            // Render
+            var measure = new Measure(0, 0, renderWidth, renderHeight);
+            this._rootContainer._draw(measure, context);
+        }
+    }    
+}

gui/src/controls/container.js

@@ -0,0 +1,74 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Container = (function (_super) {
+            __extends(Container, _super);
+            function Container(name) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                _this._children = new Array();
+                return _this;
+            }
+            Container.prototype.addControl = function (control) {
+                var index = this._children.indexOf(control);
+                if (index !== -1) {
+                    return this;
+                }
+                control._setRoot(this);
+                this._reOrderControl(control);
+                this._markAsDirty();
+                return this;
+            };
+            Container.prototype.removeControl = function (control) {
+                var index = this._children.indexOf(control);
+                if (index !== -1) {
+                    this._children.splice(index, 1);
+                }
+                this._markAsDirty();
+                return this;
+            };
+            Container.prototype._reOrderControl = function (control) {
+                this.removeControl(control);
+                for (var index = 0; index < this._children.length; index++) {
+                    if (this._children[index].zIndex > control.zIndex) {
+                        this._children.splice(index, 0, control);
+                        return;
+                    }
+                }
+                this._children.push(control);
+                this._markAsDirty();
+            };
+            Container.prototype._draw = function (parentMeasure, context) {
+                this._currentMeasure = parentMeasure.copy();
+                context.save();
+                if (this.font) {
+                    context.font = this.font;
+                }
+                if (this.color) {
+                    context.fillStyle = this.color;
+                }
+                for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    child._draw(this._currentMeasure, context);
+                }
+                context.restore();
+            };
+            return Container;
+        }(GUI.Control));
+        GUI.Container = Container;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=container.js.map

gui/src/controls/container.ts

@@ -0,0 +1,70 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class Container extends Control {
+        private _children = new Array<Control>();
+
+        constructor(public name: string) {
+            super(name);
+        }
+
+       public addControl(control: Control): Container {
+           var index = this._children.indexOf(control);
+
+            if (index !== -1) {
+                return this;
+            }
+            control._setRoot(this);
+
+            this._reOrderControl(control);
+
+            this._markAsDirty();
+            return this;
+        }
+
+        public removeControl(control: Control): Container {
+            var index = this._children.indexOf(control);
+
+            if (index !== -1) {
+                this._children.splice(index, 1);
+            }
+
+            this._markAsDirty();
+            return this;
+        }
+
+        public _reOrderControl(control: Control): void {
+            this.removeControl(control);
+
+            for (var index = 0; index < this._children.length; index++) {
+                if (this._children[index].zIndex > control.zIndex) {
+                    this._children.splice(index, 0, control);
+                    return;
+                }
+            }
+
+            this._children.push(control);
+
+            this._markAsDirty();
+        }
+
+        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            this._currentMeasure = parentMeasure.copy();
+
+            context.save();
+            
+            if (this.font) {
+                context.font = this.font;
+            }
+
+            if (this.color) {
+                context.fillStyle = this.color;
+            }
+
+            for (var child of this._children) {
+                child._draw(this._currentMeasure, context);
+            }
+            context.restore();
+        }
+    }    
+}

gui/src/controls/contentControl.js

@@ -0,0 +1,62 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var ContentControl = (function (_super) {
+            __extends(ContentControl, _super);
+            function ContentControl(name) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                return _this;
+            }
+            Object.defineProperty(ContentControl.prototype, "child", {
+                get: function () {
+                    return this._child;
+                },
+                set: function (control) {
+                    if (this._child === control) {
+                        return;
+                    }
+                    this._child = control;
+                    control._setRoot(this._root);
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            ContentControl.prototype._localDraw = function (context) {
+                // Implemented by child to be injected inside main draw
+            };
+            ContentControl.prototype._draw = function (parentMeasure, context) {
+                this._currentMeasure = parentMeasure.copy();
+                context.save();
+                if (this.font) {
+                    context.font = this.font;
+                }
+                if (this.color) {
+                    context.fillStyle = this.color;
+                }
+                this._localDraw(context);
+                if (this._child) {
+                    this._child._draw(this._currentMeasure, context);
+                }
+                context.restore();
+            };
+            return ContentControl;
+        }(GUI.Control));
+        GUI.ContentControl = ContentControl;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=contentControl.js.map

gui/src/controls/contentControl.ts

@@ -0,0 +1,51 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class ContentControl extends Control {
+        private _child: Control;       
+
+        public get child(): Control {
+            return this._child;
+        }
+
+        public set child(control: Control) {
+            if (this._child === control) {
+                return;
+            }
+
+            this._child = control;
+            control._setRoot(this._root);
+
+            this._markAsDirty();
+        }
+
+        constructor(public name: string) {
+            super(name);
+        }
+
+        protected _localDraw(context: CanvasRenderingContext2D): void {
+            // Implemented by child to be injected inside main draw
+        }
+
+        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            this._currentMeasure = parentMeasure.copy();
+
+            context.save();
+            
+            if (this.font) {
+                context.font = this.font;
+            }
+
+            if (this.color) {
+                context.fillStyle = this.color;
+            }
+
+            this._localDraw(context);
+
+            if (this._child) {
+                this._child._draw(this._currentMeasure, context);
+            }
+            context.restore();
+        }
+    }    
+}

gui/src/controls/control.js

@@ -0,0 +1,180 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Control = (function () {
+            function Control(name) {
+                this.name = name;
+                this._zIndex = 0;
+                this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+                this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+            }
+            Object.defineProperty(Control.prototype, "horizontalAlignment", {
+                get: function () {
+                    return this._horizontalAlignment;
+                },
+                set: function (value) {
+                    if (this._horizontalAlignment === value) {
+                        return;
+                    }
+                    this._horizontalAlignment = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control.prototype, "verticalAlignment", {
+                get: function () {
+                    return this._verticalAlignment;
+                },
+                set: function (value) {
+                    if (this._verticalAlignment === value) {
+                        return;
+                    }
+                    this._verticalAlignment = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control.prototype, "font", {
+                get: function () {
+                    return this._font;
+                },
+                set: function (value) {
+                    if (this._font === value) {
+                        return;
+                    }
+                    this._font = value;
+                    this._fontHeight = Control._GetFontHeight(this._font);
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control.prototype, "color", {
+                get: function () {
+                    return this._color;
+                },
+                set: function (value) {
+                    if (this._color === value) {
+                        return;
+                    }
+                    this._color = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control.prototype, "zIndex", {
+                get: function () {
+                    return this._zIndex;
+                },
+                set: function (value) {
+                    if (this.zIndex === value) {
+                        return;
+                    }
+                    this._zIndex = value;
+                    this._root._reOrderControl(this);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Control.prototype._markAsDirty = function () {
+                if (!this._root) {
+                    return; // Not yet connected
+                }
+                this._root._markAsDirty();
+            };
+            Control.prototype._setRoot = function (root) {
+                this._root = root;
+            };
+            Control.prototype._draw = function (parentMeasure, context) {
+                this._currentMeasure = parentMeasure.copy();
+                // Do nothing
+            };
+            Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
+                get: function () {
+                    return Control._HORIZONTAL_ALIGNMENT_LEFT;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
+                get: function () {
+                    return Control._HORIZONTAL_ALIGNMENT_RIGHT;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
+                get: function () {
+                    return Control._HORIZONTAL_ALIGNMENT_CENTER;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
+                get: function () {
+                    return Control._VERTICAL_ALIGNMENT_TOP;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
+                get: function () {
+                    return Control._VERTICAL_ALIGNMENT_BOTTOM;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
+                get: function () {
+                    return Control._VERTICAL_ALIGNMENT_CENTER;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Control._GetFontHeight = function (font) {
+                if (Control._FontHeightSizes[font]) {
+                    return Control._FontHeightSizes[font];
+                }
+                var text = document.createElement("span");
+                text.innerHTML = "Hg";
+                text.style.font = font;
+                var block = document.createElement("div");
+                block.style.display = "inline-block";
+                block.style.width = "1px";
+                block.style.height = "0px";
+                block.style.verticalAlign = "bottom";
+                var div = document.createElement("div");
+                div.appendChild(text);
+                div.appendChild(block);
+                document.body.appendChild(div);
+                var fontHeight = 0;
+                try {
+                    fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
+                }
+                finally {
+                    div.remove();
+                }
+                Control._FontHeightSizes[font] = fontHeight;
+                return fontHeight;
+            };
+            ;
+            return Control;
+        }());
+        // Statics
+        Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
+        Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
+        Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
+        Control._VERTICAL_ALIGNMENT_TOP = 0;
+        Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
+        Control._VERTICAL_ALIGNMENT_CENTER = 2;
+        Control._FontHeightSizes = {};
+        GUI.Control = Control;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=control.js.map

gui/src/controls/control.ts

@@ -0,0 +1,168 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class Control {        
+        private _zIndex = 0;
+        public _root: Container;
+        public _currentMeasure: Measure;
+        private _font: string;
+        private _lastMeasuredFont: string;
+        protected _fontHeight: number;
+        private _color: string;
+        private _horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        private _verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        
+        public get horizontalAlignment(): number {
+            return this._horizontalAlignment;
+        }
+
+        public set horizontalAlignment(value: number) {
+            if (this._horizontalAlignment === value) {
+                return;
+            }
+
+            this._horizontalAlignment = value;
+            this._markAsDirty();
+        } 
+
+        public get verticalAlignment(): number {
+            return this._verticalAlignment;
+        }
+
+        public set verticalAlignment(value: number) {
+            if (this._verticalAlignment === value) {
+                return;
+            }
+
+            this._verticalAlignment = value;
+            this._markAsDirty();
+        } 
+
+        public get font(): string {
+            return this._font;
+        }
+
+        public set font(value: string) {
+            if (this._font === value) {
+                return;
+            }
+
+            this._font = value;
+            this._fontHeight = Control._GetFontHeight(this._font);
+            this._markAsDirty();
+        }
+
+        public get color(): string {
+            return this._color;
+        }
+
+        public set color(value: string) {
+            if (this._color === value) {
+                return;
+            }
+
+            this._color = value;
+            this._markAsDirty();
+        }                       
+
+        public get zIndex(): number {
+            return this._zIndex;
+        }
+
+        public set zIndex(value: number) {
+            if (this.zIndex === value) {
+                return;
+            }
+
+            this._zIndex = value;
+            this._root._reOrderControl(this);
+        }
+
+        constructor(public name: string) {
+        }
+
+        protected _markAsDirty(): void {
+            if (!this._root) {
+                return; // Not yet connected
+            }
+            this._root._markAsDirty();
+        }
+
+        public _setRoot(root: Container): void {
+            this._root = root;
+        }
+
+        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            this._currentMeasure = parentMeasure.copy();
+            // Do nothing
+        }
+
+        // Statics
+        private static _HORIZONTAL_ALIGNMENT_LEFT = 0;
+        private static _HORIZONTAL_ALIGNMENT_RIGHT = 1;
+        private static _HORIZONTAL_ALIGNMENT_CENTER = 2;
+        private static _VERTICAL_ALIGNMENT_TOP = 0;
+        private static _VERTICAL_ALIGNMENT_BOTTOM = 1;
+        private static _VERTICAL_ALIGNMENT_CENTER = 2;
+
+        public static get HORIZONTAL_ALIGNMENT_LEFT(): number {
+            return Control._HORIZONTAL_ALIGNMENT_LEFT;
+        }
+
+        public static get HORIZONTAL_ALIGNMENT_RIGHT(): number {
+            return Control._HORIZONTAL_ALIGNMENT_RIGHT;
+        }
+
+        public static get HORIZONTAL_ALIGNMENT_CENTER(): number {
+            return Control._HORIZONTAL_ALIGNMENT_CENTER;
+        }
+
+        public static get VERTICAL_ALIGNMENT_TOP(): number {
+            return Control._VERTICAL_ALIGNMENT_TOP;
+        }
+
+        public static get VERTICAL_ALIGNMENT_BOTTOM(): number {
+            return Control._VERTICAL_ALIGNMENT_BOTTOM;
+        }
+
+        public static get VERTICAL_ALIGNMENT_CENTER(): number {
+            return Control._VERTICAL_ALIGNMENT_CENTER;
+        }
+
+        private static _FontHeightSizes = {};
+
+        public static _GetFontHeight(font: string): number {
+
+            if (Control._FontHeightSizes[font]) {
+                return Control._FontHeightSizes[font];
+            }
+
+            var text = document.createElement("span");
+            text.innerHTML = "Hg";
+            text.style.font = font;
+
+            var block = document.createElement("div");
+            block.style.display = "inline-block";
+            block.style.width = "1px";
+            block.style.height = "0px";
+            block.style.verticalAlign = "bottom";
+
+            var div = document.createElement("div");
+            div.appendChild(text);
+            div.appendChild(block);
+
+            document.body.appendChild(div);
+
+            var fontHeight = 0;
+            try {
+                fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
+            } finally {
+                div.remove();
+            }
+
+            Control._FontHeightSizes[font] = fontHeight;
+
+            return fontHeight;
+        };
+    }    
+}

gui/src/controls/rectangle.js

@@ -0,0 +1,73 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Rectangle = (function (_super) {
+            __extends(Rectangle, _super);
+            function Rectangle(name) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                _this._thickness = 1;
+                return _this;
+            }
+            Object.defineProperty(Rectangle.prototype, "thickness", {
+                get: function () {
+                    return this._thickness;
+                },
+                set: function (value) {
+                    if (this._thickness === value) {
+                        return;
+                    }
+                    this._thickness = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Rectangle.prototype, "background", {
+                get: function () {
+                    return this._background;
+                },
+                set: function (value) {
+                    if (this._background === value) {
+                        return;
+                    }
+                    this._background = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Rectangle.prototype._localDraw = function (context) {
+                context.save();
+                if (this._background) {
+                    context.fillStyle = this._background;
+                    context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                }
+                if (this._thickness) {
+                    if (this.color) {
+                        context.strokeStyle = this.color;
+                    }
+                    context.lineWidth = this._thickness;
+                    context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                }
+                context.restore();
+            };
+            return Rectangle;
+        }(GUI.ContentControl));
+        GUI.Rectangle = Rectangle;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=rectangle.js.map

gui/src/controls/rectangle.ts

@@ -0,0 +1,58 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class Rectangle extends ContentControl {
+        private _thickness = 1;
+        private _background: string;
+        
+        public get thickness(): number {
+            return this._thickness;
+        }
+
+        public set thickness(value: number) {
+            if (this._thickness === value) {
+                return;
+            }
+
+            this._thickness = value;
+            this._markAsDirty();
+        }   
+
+       
+        public get background(): string {
+            return this._background;
+        }
+
+        public set background(value: string) {
+            if (this._background === value) {
+                return;
+            }
+
+            this._background = value;
+            this._markAsDirty();
+        }           
+     
+        constructor(public name: string) {
+            super(name);
+        }
+
+        protected _localDraw(context: CanvasRenderingContext2D): void {
+            context.save();
+
+            if (this._background) {
+                context.fillStyle = this._background;
+                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            }
+
+            if (this._thickness) {
+                if (this.color) {
+                    context.strokeStyle = this.color;
+                }
+                context.lineWidth = this._thickness;
+                context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            }
+        
+            context.restore();
+        }
+    }    
+}

gui/src/controls/textBlock.js

@@ -0,0 +1,89 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var TextBlock = (function (_super) {
+            __extends(TextBlock, _super);
+            function TextBlock(name, text) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                _this.text = text;
+                return _this;
+            }
+            Object.defineProperty(TextBlock.prototype, "text", {
+                get: function () {
+                    return this._text;
+                },
+                set: function (value) {
+                    if (this._text === value) {
+                        return;
+                    }
+                    this._text = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            TextBlock.prototype._draw = function (parentMeasure, context) {
+                context.save();
+                if (this.font) {
+                    context.font = this.font;
+                }
+                if (this.color) {
+                    context.fillStyle = this.color;
+                }
+                this._prepare(parentMeasure, context);
+                context.fillText(this.text, this._currentMeasure.left, this._currentMeasure.top);
+                context.restore();
+            };
+            TextBlock.prototype._prepare = function (parentMeasure, context) {
+                var width = parentMeasure.width;
+                var height = parentMeasure.height;
+                var x = 0;
+                var y = 0;
+                var textSize = context.measureText(this.text);
+                switch (this.horizontalAlignment) {
+                    case GUI.Control.HORIZONTAL_ALIGNMENT_LEFT:
+                        x = 0;
+                        break;
+                    case GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
+                        x = width - textSize.width;
+                        break;
+                    case GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
+                        x = (width - textSize.width) / 2;
+                        break;
+                }
+                if (!this._fontHeight) {
+                    this._fontHeight = GUI.Control._GetFontHeight(context.font);
+                }
+                switch (this.verticalAlignment) {
+                    case GUI.Control.VERTICAL_ALIGNMENT_TOP:
+                        y = this._fontHeight;
+                        break;
+                    case GUI.Control.VERTICAL_ALIGNMENT_BOTTOM:
+                        y = height;
+                        break;
+                    case GUI.Control.VERTICAL_ALIGNMENT_CENTER:
+                        y = (height / 2) + this._fontHeight;
+                        break;
+                }
+                this._currentMeasure = new GUI.Measure(parentMeasure.left + x, parentMeasure.top + y, width, height);
+            };
+            return TextBlock;
+        }(GUI.Control));
+        GUI.TextBlock = TextBlock;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=textBlock.js.map

gui/src/controls/textBlock.ts

@@ -0,0 +1,81 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class TextBlock extends Control {
+        private _text: string;
+
+        public get text(): string {
+            return this._text;
+        }
+
+        public set text(value: string) {
+            if (this._text === value) {
+                return;
+            }
+            this._text = value;
+            this._markAsDirty();
+        }
+
+        constructor(public name: string, text: string) {
+            super(name);
+
+            this.text = text;
+        }
+
+        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            context.save();
+            if (this.font) {
+                context.font = this.font;
+            }
+
+            if (this.color) {
+                context.fillStyle = this.color;
+            }
+
+            this._prepare(parentMeasure, context)
+
+            context.fillText(this.text, this._currentMeasure.left, this._currentMeasure.top);
+
+            context.restore();
+        }
+
+        private _prepare(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            var width = parentMeasure.width;
+            var height = parentMeasure.height;
+
+            var x = 0;
+            var y = 0;
+
+            var textSize = context.measureText(this.text);
+            switch (this.horizontalAlignment) {
+                case Control.HORIZONTAL_ALIGNMENT_LEFT:
+                    x = 0
+                    break;
+                case Control.HORIZONTAL_ALIGNMENT_RIGHT:
+                    x = width - textSize.width;
+                    break;
+                case Control.HORIZONTAL_ALIGNMENT_CENTER:
+                    x = (width - textSize.width) / 2;
+                    break;
+            }
+
+            if (!this._fontHeight) {
+                this._fontHeight = Control._GetFontHeight(context.font);
+            }
+
+            switch (this.verticalAlignment) {
+                case Control.VERTICAL_ALIGNMENT_TOP:
+                    y = this._fontHeight;
+                    break;
+                case Control.VERTICAL_ALIGNMENT_BOTTOM:
+                    y = height;
+                    break;
+                case Control.VERTICAL_ALIGNMENT_CENTER:
+                    y = (height /2) + this._fontHeight;
+                    break;
+            }
+            
+            this._currentMeasure = new Measure(parentMeasure.left + x, parentMeasure.top + y, width, height);
+        }
+    }    
+}

gui/src/measure.js

@@ -0,0 +1,22 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Measure = (function () {
+            function Measure(left, top, width, height) {
+                this.left = left;
+                this.top = top;
+                this.width = width;
+                this.height = height;
+            }
+            Measure.prototype.copy = function () {
+                return new Measure(this.left, this.top, this.width, this.height);
+            };
+            return Measure;
+        }());
+        GUI.Measure = Measure;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=measure.js.map

gui/src/measure.ts

@@ -0,0 +1,13 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class Measure {
+        public constructor(public left: number, public top: number, public width: number, public height: number) {
+
+        }
+
+        public copy(): Measure {
+            return new Measure(this.left, this.top,  this.width, this.height);
+        }
+    }    
+}

gui/src/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "target": "es5"
+  }
+}

src/Layer/babylon.layer.ts

@@ -67,7 +67,7 @@
             this._scene = scene || Engine.LastCreatedScene;
             this._scene.layers.push(this);
 
-            var engine = scene.getEngine();
+            var engine = this._scene.getEngine();
 
             // VBO
             var vertices = [];

src/Lights/babylon.hemisphericLight.ts

@@ -16,7 +16,7 @@
          */
         constructor(name: string, direction: Vector3, scene: Scene) {
             super(name, scene);
-            this.direction = direction;
+            this.direction = direction || Vector3.Up();
         }
 
         protected _buildUniformLayout(): void {

src/Lights/babylon.light.ts

@@ -145,7 +145,7 @@
         constructor(name: string, scene: Scene) {
             super(name, scene);
             this.getScene().addLight(this);
-            this._uniformBuffer = new UniformBuffer(scene.getEngine());
+            this._uniformBuffer = new UniformBuffer(this.getScene().getEngine());
             this._buildUniformLayout();
 
             this.includedOnlyMeshes = new Array<AbstractMesh>();

src/Materials/Textures/babylon.dynamicTexture.ts

@@ -10,7 +10,7 @@ module BABYLON {
             super(null, scene, !generateMipMaps, undefined, samplingMode, undefined, undefined, undefined, undefined, format);
 
             this.name = name;
-
+            var engine = this.getScene().getEngine();
             this.wrapU = Texture.CLAMP_ADDRESSMODE;
             this.wrapV = Texture.CLAMP_ADDRESSMODE;
 
@@ -18,14 +18,14 @@ module BABYLON {
 
             if (options.getContext) {
                 this._canvas = options;
-                this._texture = scene.getEngine().createDynamicTexture(options.width, options.height, generateMipMaps, samplingMode);
+                this._texture = engine.createDynamicTexture(options.width, options.height, generateMipMaps, samplingMode);
             } else {
                 this._canvas = document.createElement("canvas");
 
                 if (options.width) {
-                    this._texture = scene.getEngine().createDynamicTexture(options.width, options.height, generateMipMaps, samplingMode);
+                    this._texture = engine.createDynamicTexture(options.width, options.height, generateMipMaps, samplingMode);
                 } else {
-                    this._texture = scene.getEngine().createDynamicTexture(options, options, generateMipMaps, samplingMode);
+                    this._texture = engine.createDynamicTexture(options, options, generateMipMaps, samplingMode);
                 }
             }
 
@@ -40,18 +40,31 @@ module BABYLON {
             return true;
         }
 
+        private _recreate(textureSize: ISize): void {
+            this._canvas.width = textureSize.width;
+            this._canvas.height = textureSize.height;
+
+            this.releaseInternalTexture();
+
+            this._texture = this.getScene().getEngine().createDynamicTexture(textureSize.width, textureSize.height, this._generateMipMaps, this._samplingMode);
+        }
+
         public scale(ratio: number): void {
             var textureSize = this.getSize();
 
             textureSize.width *= ratio;
             textureSize.height *= ratio;
 
-            this._canvas.width = textureSize.width;
-            this._canvas.height = textureSize.height;
+            this._recreate(textureSize);
+        }
 
-            this.releaseInternalTexture();
+        public scaleTo(width: number, height: number): void {
+            var textureSize = this.getSize();
 
-            this._texture = this.getScene().getEngine().createDynamicTexture(textureSize.width, textureSize.height, this._generateMipMaps, this._samplingMode);
+            textureSize.width  = width;
+            textureSize.height = height;
+
+            this._recreate(textureSize);
         }
 
         public getContext(): CanvasRenderingContext2D {

src/babylon.engine.ts

@@ -443,6 +443,13 @@
         public enableOfflineSupport = BABYLON.Database;
         public scenes = new Array<Scene>();
 
+        // Observables
+
+        /**
+         * Observable event triggered each time the rendering canvas is resized
+         */
+        public onResizeObservable = new Observable<Engine>();
+
         //WebVR 
 
         //The new WebVR uses promises.
@@ -1168,6 +1175,10 @@
          * @param {number} height - the new canvas' height
          */
         public setSize(width: number, height: number): void {
+            if (this._renderingCanvas.width === width && this._renderingCanvas.height === height) {
+                return;
+            }
+
             this._renderingCanvas.width = width;
             this._renderingCanvas.height = height;
 
@@ -1180,6 +1191,10 @@
                     cam._currentRenderId = 0;
                 }
             }
+
+            if (this.onResizeObservable.hasObservers) {
+                this.onResizeObservable.notifyObservers(this);
+            }
         }