add img directly to Image in GUI

Tools/Gulp/gulpfile.js

@@ -34,6 +34,7 @@ var workersStream;
 
 var extendsSearchRegex = /var\s__extends[\s\S]+?\}\)\(\);/g;
 var decorateSearchRegex = /var\s__decorate[\s\S]+?\};/g;
+var referenceSearchRegex = /\/\/\/ <reference.*/g;
 
 /**
  * TS configurations shared in the gulp file.
@@ -291,6 +292,7 @@ var buildExternalLibrary = function (library, settings, watch) {
 
         var dts = tsProcess.dts
             .pipe(concat(library.output))
+            .pipe(replace(referenceSearchRegex, ""))
             .pipe(rename({ extname: ".d.ts" }))
             .pipe(gulp.dest(outputDirectory));
 

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

@@ -1,4 +1,4 @@
-/// <reference path="../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class AdvancedDynamicTexture extends DynamicTexture {
         private _isDirty;
@@ -32,11 +32,11 @@ declare module BABYLON.GUI {
         attach(): void;
         attachToMesh(mesh: AbstractMesh): void;
         static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number): AdvancedDynamicTexture;
-        static CreateFullscreenUI(name: string, foreground: boolean, scene: Scene): AdvancedDynamicTexture;
+        static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Scene): AdvancedDynamicTexture;
     }
 }
 
-/// <reference path="../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Measure {
         left: number;
@@ -50,7 +50,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Matrix2D {
         m: Float32Array;
@@ -75,7 +75,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class ValueAndUnit {
         unit: number;
@@ -88,7 +88,7 @@ declare module BABYLON.GUI {
         readonly internalValue: number;
         getValue(host: AdvancedDynamicTexture): number;
         toString(host: AdvancedDynamicTexture): string;
-        fromString(source: string): boolean;
+        fromString(source: string | number): boolean;
         private static _Regex;
         private static _UNITMODE_PERCENTAGE;
         private static _UNITMODE_PIXEL;
@@ -97,7 +97,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Control {
         name: string;
@@ -183,25 +183,25 @@ declare module BABYLON.GUI {
         transformCenterX: number;
         horizontalAlignment: number;
         verticalAlignment: number;
-        width: string;
-        height: string;
+        width: string | number;
+        height: string | number;
         fontFamily: string;
-        fontSize: string;
+        fontSize: string | number;
         color: string;
         zIndex: number;
         isVisible: boolean;
         readonly isDirty: boolean;
-        marginLeft: string;
-        marginRight: string;
-        marginTop: string;
-        marginBottom: string;
-        left: string;
-        top: string;
-        linkOffsetX: string;
-        linkOffsetY: string;
+        marginLeft: string | number;
+        marginRight: string | number;
+        marginTop: string | number;
+        marginBottom: string | number;
+        left: string | number;
+        top: string | number;
+        linkOffsetX: string | number;
+        linkOffsetY: string | number;
         readonly centerX: number;
         readonly centerY: number;
-        constructor(name: string);
+        constructor(name?: string);
         linkWithMesh(mesh: AbstractMesh): void;
         _moveToProjectedPosition(projectedPosition: Vector3): void;
         _markMatrixAsDirty(): void;
@@ -245,7 +245,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Container extends Control {
         name: string;
@@ -254,7 +254,7 @@ declare module BABYLON.GUI {
         protected _background: string;
         background: string;
         readonly children: Control[];
-        constructor(name: string);
+        constructor(name?: string);
         containsControl(control: Control): boolean;
         addControl(control: Control): Container;
         removeControl(control: Control): Container;
@@ -270,18 +270,18 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class StackPanel extends Container {
         name: string;
         private _isVertical;
         isVertical: boolean;
-        constructor(name: string);
+        constructor(name?: string);
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Rectangle extends Container {
         name: string;
@@ -290,7 +290,7 @@ declare module BABYLON.GUI {
         thickness: number;
         cornerRadius: number;
         background: string;
-        constructor(name: string);
+        constructor(name?: string);
         protected _localDraw(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private _drawRoundedRect(context, offset?);
@@ -298,20 +298,20 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Ellipse extends Container {
         name: string;
         private _thickness;
         thickness: number;
-        constructor(name: string);
+        constructor(name?: string);
         protected _localDraw(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
 declare module BABYLON.GUI {
     class Line extends Control {
@@ -327,16 +327,16 @@ declare module BABYLON.GUI {
         private _connectedControlDirtyObserver;
         dash: Array<number>;
         connectedControl: Control;
-        x1: string;
-        y1: string;
-        x2: string;
-        y2: string;
+        x1: string | number;
+        y1: string | number;
+        x2: string | number;
+        y2: string | number;
         lineWidth: number;
         horizontalAlignment: number;
         verticalAlignment: number;
         private readonly _effectiveX2;
         private readonly _effectiveY2;
-        constructor(name: string);
+        constructor(name?: string);
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         _measure(): void;
         protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
@@ -344,7 +344,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class TextBlock extends Control {
         name: string;
@@ -359,7 +359,7 @@ declare module BABYLON.GUI {
         text: string;
         textHorizontalAlignment: number;
         textVerticalAlignment: number;
-        constructor(name: string, text: string);
+        constructor(name?: string, text?: string);
         private _drawText(text, textWidth, y, context);
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
@@ -367,7 +367,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
 declare module BABYLON.GUI {
     class Image extends Control {
@@ -381,8 +381,10 @@ declare module BABYLON.GUI {
         private _autoScale;
         autoScale: boolean;
         stretch: number;
+        domImage: HTMLImageElement;
+        private _onImageLoaded();
         source: string;
-        constructor(name: string, url: string);
+        constructor(name?: string, url?: string);
         synchronizeSizeWithContent(): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private static _STRETCH_NONE;
@@ -396,7 +398,7 @@ declare module BABYLON.GUI {
     }
 }
 
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON.GUI {
     class Button extends Rectangle {
         name: string;
@@ -404,7 +406,7 @@ declare module BABYLON.GUI {
         pointerOutAnimation: () => void;
         pointerDownAnimation: () => void;
         pointerUpAnimation: () => void;
-        constructor(name: string);
+        constructor(name?: string);
         _processPicking(x: number, y: number, type: number): boolean;
         protected _onPointerEnter(): void;
         protected _onPointerOut(): void;

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

@@ -214,6 +214,7 @@ var BABYLON;
             };
             AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene) {
                 if (foreground === void 0) { foreground = true; }
+                if (scene === void 0) { scene = null; }
                 var result = new AdvancedDynamicTexture(name, 0, 0, scene);
                 // Display
                 var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
@@ -448,7 +449,7 @@ var BABYLON;
                 return this.unit.toString();
             };
             ValueAndUnit.prototype.fromString = function (source) {
-                var match = ValueAndUnit._Regex.exec(source);
+                var match = ValueAndUnit._Regex.exec(source.toString());
                 if (!match || match.length === 0) {
                     return false;
                 }
@@ -1487,22 +1488,26 @@ var BABYLON;
                 var stack = 0;
                 for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
                     var child = _a[_i];
+                    child._currentMeasure.copyFrom(parentMeasure);
+                    child._measure();
                     if (this._isVertical) {
                         child.top = stack + "px";
-                        stack += child._height.internalValue;
+                        stack += child._currentMeasure.height;
                         child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                     }
                     else {
                         child.left = stack + "px";
-                        stack += child._width.internalValue;
+                        stack += child._currentMeasure.width;
                         child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
                     }
                 }
                 if (this._isVertical) {
                     this.height = stack + "px";
+                    this._height.ignoreAdaptiveScaling = true;
                 }
                 else {
                     this.width = stack + "px";
+                    this._width.ignoreAdaptiveScaling = true;
                 }
                 _super.prototype._additionalProcessing.call(this, parentMeasure, context);
             };
@@ -1950,6 +1955,7 @@ var BABYLON;
         var TextBlock = (function (_super) {
             __extends(TextBlock, _super);
             function TextBlock(name, text) {
+                if (text === void 0) { text = ""; }
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._text = "";
@@ -2157,6 +2163,32 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Image.prototype, "domImage", {
+                set: function (value) {
+                    var _this = this;
+                    this._domImage = value;
+                    this._loaded = false;
+                    if (this._domImage.width) {
+                        this._onImageLoaded();
+                    }
+                    else {
+                        this._domImage.onload = function () {
+                            _this._onImageLoaded();
+                        };
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Image.prototype._onImageLoaded = function () {
+                this._imageWidth = this._domImage.width;
+                this._imageHeight = this._domImage.height;
+                this._loaded = true;
+                if (this._autoScale) {
+                    this.synchronizeSizeWithContent();
+                }
+                this._markAsDirty();
+            };
             Object.defineProperty(Image.prototype, "source", {
                 set: function (value) {
                     var _this = this;
@@ -2167,13 +2199,7 @@ var BABYLON;
                     this._source = value;
                     this._domImage = new DOMImage();
                     this._domImage.onload = function () {
-                        _this._imageWidth = _this._domImage.width;
-                        _this._imageHeight = _this._domImage.height;
-                        _this._loaded = true;
-                        if (_this._autoScale) {
-                            _this.synchronizeSizeWithContent();
-                        }
-                        _this._markAsDirty();
+                        _this._onImageLoaded();
                     };
                     this._domImage.src = value;
                 },

gui/src/advancedDynamicTexture.ts

@@ -235,7 +235,7 @@ module BABYLON.GUI {
             return result;
         }
 
-        public static CreateFullscreenUI(name: string, foreground: boolean = true, scene: Scene): AdvancedDynamicTexture {
+        public static CreateFullscreenUI(name: string, foreground: boolean = true, scene: Scene = null): AdvancedDynamicTexture {
             var result = new AdvancedDynamicTexture(name, 0, 0, scene);
 
             // Display

gui/src/controls/button.ts

@@ -7,7 +7,7 @@ module BABYLON.GUI {
         public pointerDownAnimation: () => void;
         public pointerUpAnimation: () => void;
 
-        constructor(public name: string) {
+        constructor(public name?: string) {
             super(name);
             this.thickness = 1;
             this.isPointerBlocker = true;

gui/src/controls/container.ts

@@ -23,7 +23,7 @@ module BABYLON.GUI {
             return this._children;
         }        
 
-        constructor(public name: string) {
+        constructor(public name?: string) {
             super(name);
         }
 

gui/src/controls/control.ts

@@ -192,11 +192,11 @@ module BABYLON.GUI {
             this._markAsDirty();
         } 
 
-        public get width(): string {
+        public get width(): string | number {
             return this._width.toString(this._host);
         }
 
-        public set width(value: string) {
+        public set width(value: string | number ) {
             if (this._width.toString(this._host) === value) {
                 return;
             }
@@ -206,11 +206,11 @@ module BABYLON.GUI {
             }
         }
 
-        public get height(): string {
+        public get height(): string | number  {
             return this._height.toString(this._host);
         }
 
-        public set height(value: string) {
+        public set height(value: string | number ) {
             if (this._height.toString(this._host) === value) {
                 return;
             }
@@ -233,11 +233,11 @@ module BABYLON.GUI {
             this._prepareFont();
         }
 
-        public get fontSize(): string {
+        public get fontSize(): string | number  {
             return this._fontSize.toString(this._host);
         }
 
-        public set fontSize(value: string) {
+        public set fontSize(value: string | number ) {
             if (this._fontSize.toString(this._host) === value) {
                 return;
             }
@@ -294,81 +294,81 @@ module BABYLON.GUI {
             return this._isDirty;
         }
         
-        public get marginLeft(): string {
+        public get marginLeft(): string | number  {
             return this._marginLeft.toString(this._host);
         }
 
-        public set marginLeft(value: string) {
+        public set marginLeft(value: string | number ) {
             if (this._marginLeft.fromString(value)) {
                 this._markAsDirty();
             }
         }    
 
-        public get marginRight(): string {
+        public get marginRight(): string | number  {
             return this._marginRight.toString(this._host);
         }
 
-        public set marginRight(value: string) {
+        public set marginRight(value: string | number ) {
             if (this._marginRight.fromString(value)) {
                 this._markAsDirty();
             }
         }
 
-        public get marginTop(): string {
+        public get marginTop(): string | number  {
             return this._marginTop.toString(this._host);
         }
 
-        public set marginTop(value: string) {
+        public set marginTop(value: string | number ) {
             if (this._marginTop.fromString(value)) {
                 this._markAsDirty();
             }
         }
 
-        public get marginBottom(): string {
+        public get marginBottom(): string | number  {
             return this._marginBottom.toString(this._host);
         }
 
-        public set marginBottom(value: string) {
+        public set marginBottom(value: string | number ) {
             if (this._marginBottom.fromString(value)) {
                 this._markAsDirty();
             }
         }     
 
-        public get left(): string {
+        public get left(): string | number  {
             return this._left.toString(this._host);
         }
 
-        public set left(value: string) {
+        public set left(value: string | number ) {
             if (this._left.fromString(value)) {
                 this._markAsDirty();
             }
         }  
 
-        public get top(): string {
+        public get top(): string | number  {
             return this._top.toString(this._host);
         }
 
-        public set top(value: string) {
+        public set top(value: string | number ) {
             if (this._top.fromString(value)) {
                 this._markAsDirty();
             }
         }     
 
-        public get linkOffsetX(): string {
+        public get linkOffsetX(): string | number  {
             return this._linkOffsetX.toString(this._host);
         }
 
-        public set linkOffsetX(value: string) {
+        public set linkOffsetX(value: string | number ) {
             if (this._linkOffsetX.fromString(value)) {
                 this._markAsDirty();
             }
         }      
 
-        public get linkOffsetY(): string {
+        public get linkOffsetY(): string | number  {
             return this._linkOffsetY.toString(this._host);
         }
 
-        public set linkOffsetY(value: string) {
+        public set linkOffsetY(value: string | number ) {
             if (this._linkOffsetY.fromString(value)) {
                 this._markAsDirty();
             }
@@ -383,7 +383,7 @@ module BABYLON.GUI {
         }                   
 
         // Functions
-        constructor(public name: string) {
+        constructor(public name?: string) {
         }
 
         public linkWithMesh(mesh: AbstractMesh): void {

gui/src/controls/ellipse.ts

@@ -17,7 +17,7 @@ module BABYLON.GUI {
             this._markAsDirty();
         }                
      
-        constructor(public name: string) {
+        constructor(public name?: string) {
             super(name);
         }
 

gui/src/controls/image.ts

@@ -42,6 +42,31 @@ module BABYLON.GUI {
             this._markAsDirty();
         }
 
+        public set domImage(value: HTMLImageElement) {
+            this._domImage = value;
+            this._loaded = false;
+            
+            if (this._domImage.width) {
+                this._onImageLoaded();
+            } else {
+                this._domImage.onload = () => {
+                    this._onImageLoaded();
+                }
+            }
+        }
+
+        private _onImageLoaded(): void {
+            this._imageWidth = this._domImage.width;
+            this._imageHeight = this._domImage.height;
+            this._loaded = true;
+
+            if (this._autoScale) {
+                this.synchronizeSizeWithContent();
+            }
+
+            this._markAsDirty();
+        }
+
         public set source(value: string) {
             if (this._source === value) {
                 return;
@@ -53,21 +78,13 @@ module BABYLON.GUI {
             this._domImage = new DOMImage();
             
             this._domImage.onload = () => {
-                this._imageWidth = this._domImage.width;
-                this._imageHeight = this._domImage.height;
-                this._loaded = true;
-
-                if (this._autoScale) {
-                    this.synchronizeSizeWithContent();
-                }
-
-                this._markAsDirty();
+                this._onImageLoaded();
             }
             
             this._domImage.src = value;
         }
 
-        constructor(public name: string, url: string) {
+        constructor(public name?: string, url?: string) {
             super(name);
 
             this.source = url;

gui/src/controls/line.ts

@@ -49,11 +49,11 @@ module BABYLON.GUI {
             this._markAsDirty();
         }              
 
-        public get x1(): string {
+        public get x1(): string | number  {
             return this._x1.toString(this._host);
         }
 
-        public set x1(value: string) {
+        public set x1(value: string | number ) {
             if (this._x1.toString(this._host) === value) {
                 return;
             }
@@ -63,11 +63,11 @@ module BABYLON.GUI {
             }
         }    
 
-        public get y1(): string {
+        public get y1(): string | number  {
             return this._y1.toString(this._host);
         }
 
-        public set y1(value: string) {
+        public set y1(value: string | number ) {
             if (this._y1.toString(this._host) === value) {
                 return;
             }
@@ -77,11 +77,11 @@ module BABYLON.GUI {
             }
         }     
 
-        public get x2(): string {
+        public get x2(): string | number  {
             return this._x2.toString(this._host);
         }
 
-        public set x2(value: string) {
+        public set x2(value: string | number ) {
             if (this._x2.toString(this._host) === value) {
                 return;
             }
@@ -91,11 +91,11 @@ module BABYLON.GUI {
             }
         }    
 
-        public get y2(): string {
+        public get y2(): string | number  {
             return this._y2.toString(this._host);
         }
 
-        public set y2(value: string) {
+        public set y2(value: string | number ) {
             if (this._y2.toString(this._host) === value) {
                 return;
             }
@@ -134,7 +134,7 @@ module BABYLON.GUI {
             return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
         }           
 
-        constructor(public name: string) {
+        constructor(public name?: string) {
             super(name);
 
             this.isHitTestVisible = false;

gui/src/controls/rectangle.ts

@@ -48,7 +48,7 @@ module BABYLON.GUI {
             this._markAsDirty();
         }           
      
-        constructor(public name: string) {
+        constructor(public name?: string) {
             super(name);
         }
 

gui/src/controls/stackPanel.ts

@@ -17,20 +17,23 @@ module BABYLON.GUI {
             this._markAsDirty();
         }           
     
-        constructor(public name: string) {
+        constructor(public name?: string) {
             super(name);
         }
 
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             var stack = 0;
             for (var child of this._children) {
+                child._currentMeasure.copyFrom(parentMeasure);
+                child._measure();
+                
                 if (this._isVertical) {
                     child.top = stack + "px";
-                    stack += child._height.internalValue;
+                    stack += child._currentMeasure.height;
                     child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                 } else {
                     child.left = stack + "px";
-                    stack += child._width.internalValue;
+                    stack += child._currentMeasure.width;
                     child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
 
                 }
@@ -38,9 +41,12 @@ module BABYLON.GUI {
 
             if (this._isVertical) {
                 this.height = stack + "px";
+                this._height.ignoreAdaptiveScaling = true;
             } else {
                 this.width = stack + "px";
+                this._width.ignoreAdaptiveScaling = true;
             }
+            
 
             super._additionalProcessing(parentMeasure, context);
         }    

gui/src/controls/textBlock.ts

@@ -61,7 +61,7 @@ module BABYLON.GUI {
             this._markAsDirty();
         } 
 
-        constructor(public name: string, text: string) {
+        constructor(public name?: string, text: string = "") {
             super(name);
 
             this.text = text;

gui/src/valueAndUnit.ts

@@ -46,8 +46,8 @@ module BABYLON.GUI {
             return this.unit.toString();
         }
 
-        public fromString(source: string): boolean {
-            var match = ValueAndUnit._Regex.exec(source);
+        public fromString(source: string | number ): boolean {
+            var match = ValueAndUnit._Regex.exec(source.toString());
 
             if (!match || match.length === 0) {
                 return false;

tests/validation/validation.js

@@ -5,7 +5,7 @@ var canvas;
 var currentScene;
 var config;
 
-var thresold = 25;
+var threshold = 25;
 var errorRatio = 5;
 
 function compare(renderData, referenceCanvas) {