integrate advanceddynamictexture to PG

.gitignore

@@ -24,6 +24,7 @@ postProcessLibrary/src/**/*.js
 canvas2D/src/**/*.js
 inspector/src/**/*.js
 serializers/src/**/*.js
+gui/src/**/*.js
 
 # Build results
 [Dd]ebug/

Playground/debug.html

@@ -50,6 +50,8 @@
     <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
     <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
 
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
+
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>

Playground/frame.html

@@ -38,6 +38,8 @@
     <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
     <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
     <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
+
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
     
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>

Playground/index.html

@@ -50,6 +50,8 @@
     <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
     <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
 
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>

Tools/Gulp/config.json

@@ -1217,6 +1217,7 @@
                 "files": [
                     "../../gui/src/advancedDynamicTexture.ts",
                     "../../gui/src/measure.ts",
+                    "../../gui/src/valueAndUnit.ts",
                     "../../gui/src/controls/control.ts",
                     "../../gui/src/controls/contentControl.ts",
                     "../../gui/src/controls/container.ts",

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

@@ -1,5 +1,189 @@
 /// <reference path="../../dist/preview release/babylon.d.ts" />
-declare module BABYLON {
+declare module BABYLON.GUI {
     class AdvancedDynamicTexture extends DynamicTexture {
+        private _isDirty;
+        private _renderObserver;
+        private _resizeObserver;
+        private _background;
+        private _rootContainer;
+        background: string;
+        constructor(name: string, size: number, scene: Scene);
+        markAsDirty(): void;
+        addControl(control: Control): AdvancedDynamicTexture;
+        removeControl(control: Control): AdvancedDynamicTexture;
+        dispose(): void;
+        private _onResize();
+        private _checkUpdate();
+        private _render();
+    }
+}
+
+/// <reference path="../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class Measure {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        constructor(left: number, top: number, width: number, height: number);
+        copyFrom(other: Measure): void;
+        isEqualsTo(other: Measure): boolean;
+        static Empty(): Measure;
+    }
+}
+
+/// <reference path="../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class ValueAndUnit {
+        value: number;
+        unit: number;
+        negativeValueAllowed: boolean;
+        constructor(value?: number, unit?: number, negativeValueAllowed?: boolean);
+        readonly isPercentage: boolean;
+        readonly isPixel: boolean;
+        toString(): string;
+        fromString(source: string): boolean;
+        private static _Regex;
+        private static _UNITMODE_PERCENTAGE;
+        private static _UNITMODE_PIXEL;
+        static readonly UNITMODE_PERCENTAGE: number;
+        static readonly UNITMODE_PIXEL: number;
+    }
+}
+
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class Control {
+        name: string;
+        private _zIndex;
+        _root: Container;
+        _host: AdvancedDynamicTexture;
+        _currentMeasure: Measure;
+        private _fontFamily;
+        private _fontSize;
+        private _font;
+        private _width;
+        private _height;
+        private _lastMeasuredFont;
+        protected _fontOffset: {
+            ascent: number;
+            height: number;
+            descent: number;
+        };
+        private _color;
+        private _horizontalAlignment;
+        private _verticalAlignment;
+        private _isDirty;
+        private _cachedParentMeasure;
+        private _marginLeft;
+        private _marginRight;
+        private _marginTop;
+        private _marginBottom;
+        horizontalAlignment: number;
+        verticalAlignment: number;
+        width: string;
+        height: string;
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+        zIndex: number;
+        readonly isDirty: boolean;
+        marginLeft: string;
+        marginRight: string;
+        marginTop: string;
+        marginBottom: string;
+        constructor(name: string);
+        protected _markAsDirty(): void;
+        _link(root: Container, host: AdvancedDynamicTexture): void;
+        protected applyStates(context: CanvasRenderingContext2D): void;
+        protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _measure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private _prepareFont();
+        private static _HORIZONTAL_ALIGNMENT_LEFT;
+        private static _HORIZONTAL_ALIGNMENT_RIGHT;
+        private static _HORIZONTAL_ALIGNMENT_CENTER;
+        private static _VERTICAL_ALIGNMENT_TOP;
+        private static _VERTICAL_ALIGNMENT_BOTTOM;
+        private static _VERTICAL_ALIGNMENT_CENTER;
+        static readonly HORIZONTAL_ALIGNMENT_LEFT: number;
+        static readonly HORIZONTAL_ALIGNMENT_RIGHT: number;
+        static readonly HORIZONTAL_ALIGNMENT_CENTER: number;
+        static readonly VERTICAL_ALIGNMENT_TOP: number;
+        static readonly VERTICAL_ALIGNMENT_BOTTOM: number;
+        static readonly VERTICAL_ALIGNMENT_CENTER: number;
+        private static _FontHeightSizes;
+        static _GetFontOffset(font: string): {
+            ascent: number;
+            height: number;
+            descent: number;
+        };
+    }
+}
+
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class ContentControl extends Control {
+        name: string;
+        private _child;
+        protected _measureForChild: Measure;
+        child: Control;
+        constructor(name: string);
+        protected _localDraw(context: CanvasRenderingContext2D): void;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class Container extends Control {
+        name: string;
+        private _children;
+        constructor(name: string);
+        addControl(control: Control): Container;
+        removeControl(control: Control): Container;
+        _reOrderControl(control: Control): void;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class Rectangle extends ContentControl {
+        name: string;
+        private _thickness;
+        private _background;
+        thickness: number;
+        background: string;
+        constructor(name: string);
+        protected _localDraw(context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class TextBlock extends Control {
+        name: string;
+        private _text;
+        private _textY;
+        private _textWrapping;
+        private _textHorizontalAlignment;
+        private _textVerticalAlignment;
+        private _lines;
+        private _totalHeight;
+        textWrapping: boolean;
+        text: string;
+        textHorizontalAlignment: number;
+        textVerticalAlignment: number;
+        constructor(name: string, text: string);
+        protected _measure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private _drawText(text, textWidth, y, context);
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _renderLines(context: CanvasRenderingContext2D): void;
     }
 }

gui/src/advancedDynamicTexture.ts

@@ -18,18 +18,24 @@ module BABYLON.GUI {
             }
 
             this._background = value;
-            this._isDirty = true;
+            this.markAsDirty();
         }
         
-        constructor(name: string, scene: Scene) {
-            super(name, {}, scene, false, Texture.NEAREST_SAMPLINGMODE, Engine.TEXTUREFORMAT_RGBA);
+        constructor(name: string, size = 0, scene: Scene) {
+            super(name, size, scene, false, Texture.NEAREST_SAMPLINGMODE, Engine.TEXTUREFORMAT_RGBA);
 
-            this._resizeObserver = this.getScene().getEngine().onResizeObservable.add(() => this._onResize());
             this._renderObserver = this.getScene().onBeforeRenderObservable.add(() => this._checkUpdate());
 
             this._rootContainer._link(null, this);
 
-            this._onResize();
+            if (!size) {
+                this._resizeObserver = this.getScene().getEngine().onResizeObservable.add(() => this._onResize());
+                this._onResize();
+            }
+        }
+
+        public markAsDirty() {
+            this._isDirty = true;
         }
 
         public addControl(control: Control): AdvancedDynamicTexture {
@@ -45,7 +51,10 @@ module BABYLON.GUI {
 
         public dispose() {
             this.getScene().onBeforeRenderObservable.remove(this._renderObserver);
-            this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
+
+            if (this._resizeObserver) {
+                this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
+            }
 
             super.dispose();
         }
@@ -59,7 +68,7 @@ module BABYLON.GUI {
 
             if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
                 this.scaleTo(renderWidth, renderHeight);
-                this._isDirty = true;
+                this.markAsDirty();
             }
         }
 
@@ -74,9 +83,9 @@ module BABYLON.GUI {
         }
 
         private _render(): void {
-            var engine = this.getScene().getEngine();
-            var renderWidth = engine.getRenderWidth();
-            var renderHeight = engine.getRenderHeight();
+            var textureSize = this.getSize();
+            var renderWidth = textureSize.width;
+            var renderHeight = textureSize.height;
 
             // Clear
             var context = this.getContext();

gui/src/controls/control.ts

@@ -9,8 +9,8 @@ module BABYLON.GUI {
         private _fontFamily: string;
         private _fontSize = 18;
         private _font: string;
-        private _width = new ValueAndUnit(1);
-        private _height = new ValueAndUnit(1);
+        private _width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        private _height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
         private _lastMeasuredFont: string;
         protected _fontOffset: {ascent: number, height: number, descent: number};
         private _color: string;
@@ -24,19 +24,6 @@ module BABYLON.GUI {
         private _marginBottom = new ValueAndUnit(0);        
         
         // Properties
-        public get unitMode(): number {
-            return this._unitMode;
-        }
-
-        public set unitMode(value: number) {
-            if (this._unitMode === value) {
-                return;
-            }
-
-            this._unitMode = value;
-            this._markAsDirty();
-        } 
-
         public get horizontalAlignment(): number {
             return this._horizontalAlignment;
         }
@@ -63,36 +50,32 @@ module BABYLON.GUI {
             this._markAsDirty();
         } 
 
-        public get width(): number {
-            return this._width;
+        public get width(): string {
+            return this._width.toString();
         }
 
-        public set width(value: number) {
-            if (value < 0) {
-                value = 0;
-            }
-            if (this._width === value) {
+        public set width(value: string) {
+            if (this._width.toString() === value) {
                 return;
             }
 
-            this._width = value;
-            this._markAsDirty();
+            if (this._width.fromString(value)) {
+                this._markAsDirty();
+            }
         }
 
-        public get height(): number {
-            return this._height;
+        public get height(): string {
+            return this._height.toString();
         }
 
-        public set height(value: number) {
-            if (value < 0) {
-                value = 0;
-            }
-            if (this._height === value) {
+        public set height(value: string) {
+            if (this._height.toString() === value) {
                 return;
             }
 
-            this._height = value;
-            this._markAsDirty();
+            if (this._height.fromString(value)) {
+                this._markAsDirty();
+            }
         }   
 
         public get fontFamily(): string {
@@ -151,56 +134,44 @@ module BABYLON.GUI {
             return this._isDirty;
         }
         
-        public get marginLeft(): number {
-            return this._marginLeft;
+        public get marginLeft(): string {
+            return this._marginLeft.toString();
         }
 
-        public set marginLeft(value: number) {
-            if (this._marginLeft === value) {
-                return;
+        public set marginLeft(value: string) {
+            if (this._marginLeft.fromString(value)) {
+                this._markAsDirty();
             }
-
-            this._marginLeft = value;
-            this._markAsDirty();
         }    
 
-        public get marginRight(): number {
-            return this._marginRight;
+        public get marginRight(): string {
+            return this._marginRight.toString();
         }
 
-        public set marginRight(value: number) {
-            if (this._marginRight === value) {
-                return;
+        public set marginRight(value: string) {
+            if (this._marginRight.fromString(value)) {
+                this._markAsDirty();
             }
-
-            this._marginRight = value;
-            this._markAsDirty();
         }
 
-        public get marginTop(): number {
-            return this._marginTop;
+        public get marginTop(): string {
+            return this._marginTop.toString();
         }
 
-        public set marginTop(value: number) {
-            if (this._marginTop === value) {
-                return;
+        public set marginTop(value: string) {
+            if (this._marginTop.fromString(value)) {
+                this._markAsDirty();
             }
-
-            this._marginTop = value;
-            this._markAsDirty();
         }
 
-        public get marginBottom(): number {
-            return this._marginBottom;
+        public get marginBottom(): string {
+            return this._marginBottom.toString();
         }
 
-        public set marginBottom(value: number) {
-            if (this._marginBottom === value) {
-                return;
+        public set marginBottom(value: string) {
+            if (this._marginBottom.fromString(value)) {
+                this._markAsDirty();
             }
-
-            this._marginBottom = value;
-            this._markAsDirty();
         }                
 
         // Functions
@@ -211,10 +182,10 @@ module BABYLON.GUI {
         protected _markAsDirty(): void {            
             this._isDirty = true;
 
-            if (!this._root) {
+            if (!this._host) {
                 return; // Not yet connected
             }
-            this._root._markAsDirty();
+            this._host.markAsDirty();
         }
 
         public _link(root: Container, host: AdvancedDynamicTexture): void {
@@ -239,29 +210,29 @@ module BABYLON.GUI {
                 this._measure(parentMeasure, context);
                 this._computeAlignment(parentMeasure, context);
                 this._additionalProcessing(parentMeasure, context);
+
+                this._isDirty = false;
+                this._cachedParentMeasure.copyFrom(parentMeasure);
             }      
                         
             // Clip
             context.beginPath();
             context.rect(this._currentMeasure.left ,this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
             context.clip();
-
-            this._isDirty = false;
-            this._cachedParentMeasure.copyFrom(parentMeasure);
         }
 
         protected _measure(parentMeasure: Measure, context: CanvasRenderingContext2D): void {  
             // Width / Height
-            if (this._unitMode === Control.UNITMODE_PIXEL) {
-                this._currentMeasure.width = this._width;
+            if (this._width.isPixel) {
+                this._currentMeasure.width = this._width.value;
             } else {
-                this._currentMeasure.width *= this._width; 
+                this._currentMeasure.width *= this._width.value; 
             }
 
-            if (this._unitMode === Control.UNITMODE_PIXEL) {
-                this._currentMeasure.height = this._height;
+            if (this._height.isPixel) {
+                this._currentMeasure.height = this._height.value;
             } else {
-                this._currentMeasure.height *= this._height; 
+                this._currentMeasure.height *= this._height.value; 
             }
         }
 
@@ -300,18 +271,30 @@ module BABYLON.GUI {
                     break;
             }
             
-            if (this._unitMode === Control.UNITMODE_PIXEL) {
-                this._currentMeasure.left += this._marginLeft;
-                this._currentMeasure.left -= this._marginRight;
-                this._currentMeasure.top += this._marginTop;
-                this._currentMeasure.top -= this._marginBottom;
+            if (this._marginLeft.isPixel) {
+                this._currentMeasure.left += this._marginLeft.value;
             } else {
-                this._currentMeasure.left += parentWidth * this._marginLeft;
-                this._currentMeasure.left -= parentWidth * this._marginRight;
-                this._currentMeasure.top += parentHeight * this._marginTop;
-                this._currentMeasure.top -= parentHeight * this._marginBottom;
+                this._currentMeasure.left += parentWidth * this._marginLeft.value;
             }
 
+            if (this._marginRight.isPixel) {
+                this._currentMeasure.left -= this._marginRight.value;
+            } else {
+                this._currentMeasure.left -= parentWidth * this._marginRight.value;
+            }
+
+            if (this._marginTop.isPixel) {
+                this._currentMeasure.top += this._marginTop.value;
+            } else {
+                this._currentMeasure.top += parentWidth * this._marginTop.value;
+            }
+
+            if (this._marginBottom.isPixel) {
+                this._currentMeasure.top -= this._marginBottom.value;
+            } else {
+                this._currentMeasure.top -= parentWidth * this._marginBottom.value;
+            }            
+
             this._currentMeasure.left += x;
             this._currentMeasure.top += y;            
         }

gui/src/valueAndUnit.ts

@@ -2,7 +2,7 @@
 
 module BABYLON.GUI {
     export class ValueAndUnit {
-        public constructor(public value: number = 1, public unit = ValueAndUnit.UNITMODE_PERCENTAGE) {
+        public constructor(public value = 1, public unit = ValueAndUnit.UNITMODE_PERCENTAGE, public negativeValueAllowed = true) {
         }
 
         public get isPercentage(): boolean {
@@ -13,7 +13,57 @@ module BABYLON.GUI {
             return this.unit === ValueAndUnit.UNITMODE_PIXEL;
         }
 
+        public toString(): string {
+            switch (this.unit) {
+                case ValueAndUnit.UNITMODE_PERCENTAGE:
+                    return this.unit + "%";
+                case ValueAndUnit.UNITMODE_PIXEL:
+                    return this.unit + "px";
+            }
+
+            return this.unit.toString();
+        }
+
+        public fromString(source: string): boolean {
+            var match = ValueAndUnit._Regex.exec(source);
+
+            if (!match || match.length === 0) {
+                return false;
+            }
+
+            var sourceValue = parseFloat(match[1]);
+            var sourceUnit = this.unit;
+
+            if (!this.negativeValueAllowed) {
+                if (sourceValue < 0) {
+                    sourceValue = 0;
+                }
+            }
+            
+            if (match.length === 4) {
+                switch(match[3]) {
+                    case "px":
+                        sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
+                        break;
+                    case "%":
+                        sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
+                        sourceValue /= 100.0;
+                        break;
+                }
+            }
+
+            if (sourceValue === this.value && sourceUnit === this.unit) {
+                return false;
+            }
+
+            this.value = sourceValue;
+            this.unit = sourceUnit;
+
+            return true;
+        }
+
         // Static
+        private static _Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
         private static _UNITMODE_PERCENTAGE = 0;
         private static _UNITMODE_PIXEL = 1;