GUI: Fix font rescaling

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

@@ -141,6 +141,7 @@ declare module BABYLON.GUI {
         private _cachedOffsetY;
         private _isVisible;
         _linkedMesh: AbstractMesh;
+        private _fontSet;
         isHitTestVisible: boolean;
         isPointerBlocker: boolean;
         protected _linkOffsetX: ValueAndUnit;
@@ -206,6 +207,7 @@ declare module BABYLON.GUI {
         _moveToProjectedPosition(projectedPosition: Vector3): void;
         _markMatrixAsDirty(): void;
         _markAsDirty(): void;
+        _markAllAsDirty(): void;
         _link(root: Container, host: AdvancedDynamicTexture): void;
         protected _transform(context: CanvasRenderingContext2D): void;
         protected _applyStates(context: CanvasRenderingContext2D): void;

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

@@ -120,6 +120,9 @@ var BABYLON;
                 if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
                     this.scaleTo(renderWidth, renderHeight);
                     this.markAsDirty();
+                    if (this._idealWidth || this._idealHeight) {
+                        this._rootContainer._markAllAsDirty();
+                    }
                 }
             };
             AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
@@ -541,6 +544,7 @@ var BABYLON;
                 this._transformedPosition = BABYLON.Vector2.Zero();
                 this._isMatrixDirty = true;
                 this._isVisible = true;
+                this._fontSet = false;
                 this.isHitTestVisible = true;
                 this.isPointerBlocker = false;
                 this._linkOffsetX = new GUI.ValueAndUnit(0);
@@ -719,6 +723,7 @@ var BABYLON;
                     }
                     if (this._height.fromString(value)) {
                         this._markAsDirty();
+                        this._fontSet = true;
                     }
                 },
                 enumerable: true,
@@ -733,7 +738,6 @@ var BABYLON;
                         return;
                     }
                     this._fontFamily = value;
-                    this._prepareFont();
                 },
                 enumerable: true,
                 configurable: true
@@ -748,8 +752,8 @@ var BABYLON;
                     }
                     if (this._fontSize.fromString(value)) {
                         this._markAsDirty();
+                        this._fontSet = true;
                     }
-                    this._prepareFont();
                 },
                 enumerable: true,
                 configurable: true
@@ -945,6 +949,12 @@ var BABYLON;
                 }
                 this._host.markAsDirty();
             };
+            Control.prototype._markAllAsDirty = function () {
+                this._markAsDirty();
+                if (this._font) {
+                    this._prepareFont();
+                }
+            };
             Control.prototype._link = function (root, host) {
                 this._root = root;
                 this._host = host;
@@ -973,6 +983,10 @@ var BABYLON;
                 }
             };
             Control.prototype._applyStates = function (context) {
+                if (this._fontSet = true) {
+                    this._fontSet = false;
+                    this._prepareFont();
+                }
                 if (this._font) {
                     context.font = this._font;
                 }
@@ -1382,14 +1396,9 @@ var BABYLON;
                 }
             };
             Container.prototype._markAllAsDirty = function () {
-                this._markAsDirty();
+                _super.prototype._markAllAsDirty.call(this);
                 for (var index = 0; index < this._children.length; index++) {
-                    if (this._children[index]._markAllAsDirty) {
-                        this._children[index]._markAllAsDirty();
-                    }
-                    else {
-                        this._children[index]._markAsDirty();
-                    }
+                    this._children[index]._markAllAsDirty();
                 }
             };
             Container.prototype._localDraw = function (context) {
@@ -2165,6 +2174,9 @@ var BABYLON;
                 configurable: true
             });
             Object.defineProperty(Image.prototype, "domImage", {
+                get: function () {
+                    return this._domImage;
+                },
                 set: function (value) {
                     var _this = this;
                     this._domImage = value;

gui/src/advancedDynamicTexture.ts

@@ -125,7 +125,12 @@ module BABYLON.GUI {
 
             if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
                 this.scaleTo(renderWidth, renderHeight);
+
                 this.markAsDirty();
+
+                if (this._idealWidth || this._idealHeight) {
+                    this._rootContainer._markAllAsDirty();
+                }                
             }
         }
 

gui/src/controls/container.ts

@@ -80,14 +80,10 @@ module BABYLON.GUI {
         }
 
         public _markAllAsDirty(): void {
-            this._markAsDirty();
+            super._markAllAsDirty();
 
             for (var index = 0; index < this._children.length; index++) {
-                if ((<any>this._children[index])._markAllAsDirty) {
-                    (<any>this._children[index])._markAllAsDirty();
-                } else {
-                    this._children[index]._markAsDirty();
-                }
+                this._children[index]._markAllAsDirty();
             }
         }
 

gui/src/controls/control.ts

@@ -38,6 +38,7 @@ module BABYLON.GUI {
         private _cachedOffsetY: number;
         private _isVisible = true;
         public _linkedMesh: AbstractMesh;
+        private _fontSet = false;
 
         public isHitTestVisible = true;
         public isPointerBlocker = false;
@@ -217,6 +218,7 @@ module BABYLON.GUI {
 
             if (this._height.fromString(value)) {
                 this._markAsDirty();
+                this._fontSet = true;
             }
         }   
 
@@ -230,7 +232,6 @@ module BABYLON.GUI {
             }
 
             this._fontFamily = value;
-            this._prepareFont();
         }
 
         public get fontSize(): string | number  {
@@ -244,8 +245,8 @@ module BABYLON.GUI {
 
             if (this._fontSize.fromString(value)) {
                 this._markAsDirty();
+                this._fontSet = true;
             }
-            this._prepareFont();
         }
 
         public get color(): string {
@@ -425,6 +426,14 @@ module BABYLON.GUI {
             this._host.markAsDirty();
         }
 
+        public _markAllAsDirty(): void {
+            this._markAsDirty();
+
+            if (this._font) {
+                this._prepareFont();
+            }
+        }
+
         public _link(root: Container, host: AdvancedDynamicTexture): void {
             this._root = root;
             this._host = host;
@@ -462,6 +471,11 @@ module BABYLON.GUI {
         }
 
         protected _applyStates(context: CanvasRenderingContext2D): void {
+            if (this._fontSet = true) {
+                this._fontSet = false;
+                this._prepareFont();
+            }
+
             if (this._font) {
                 context.font = this._font;
             }

gui/src/controls/image.ts

@@ -55,6 +55,10 @@ module BABYLON.GUI {
             }
         }
 
+        public get domImage(): HTMLImageElement {
+            return this._domImage;
+        }
+
         private _onImageLoaded(): void {
             this._imageWidth = this._domImage.width;
             this._imageHeight = this._domImage.height;