Adding adaptiveScaling to gui + fixes #2198

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

@@ -15,7 +15,11 @@ declare module BABYLON.GUI {
         _linkedControls: Control[];
         private _isFullscreen;
         private _fullscreenViewport;
+        private _idealWidth;
+        private _idealHeight;
         background: string;
+        idealWidth: number;
+        idealHeight: number;
         constructor(name: string, width: number, height: number, scene: Scene, generateMipMaps?: boolean, samplingMode?: number);
         markAsDirty(): void;
         addControl(control: Control): AdvancedDynamicTexture;
@@ -74,13 +78,16 @@ declare module BABYLON.GUI {
 /// <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);
+        private _value;
+        ignoreAdaptiveScaling: boolean;
+        constructor(value: any, unit?: number, negativeValueAllowed?: boolean);
         readonly isPercentage: boolean;
         readonly isPixel: boolean;
-        toString(): string;
+        readonly internalValue: number;
+        getValue(host: AdvancedDynamicTexture): number;
+        toString(host: AdvancedDynamicTexture): string;
         fromString(source: string): boolean;
         private static _Regex;
         private static _UNITMODE_PERCENTAGE;
@@ -102,8 +109,8 @@ declare module BABYLON.GUI {
         private _fontFamily;
         private _fontSize;
         private _font;
-        private _width;
-        private _height;
+        _width: ValueAndUnit;
+        _height: ValueAndUnit;
         private _lastMeasuredFont;
         protected _fontOffset: {
             ascent: number;
@@ -132,11 +139,12 @@ declare module BABYLON.GUI {
         private _isMatrixDirty;
         private _cachedOffsetX;
         private _cachedOffsetY;
+        private _isVisible;
         _linkedMesh: AbstractMesh;
         isHitTestVisible: boolean;
         isPointerBlocker: boolean;
-        linkOffsetX: number;
-        linkOffsetY: number;
+        protected _linkOffsetX: ValueAndUnit;
+        protected _linkOffsetY: ValueAndUnit;
         /**
         * An event triggered when the pointer move over the control.
         * @type {BABYLON.Observable}
@@ -178,9 +186,10 @@ declare module BABYLON.GUI {
         width: string;
         height: string;
         fontFamily: string;
-        fontSize: number;
+        fontSize: string;
         color: string;
         zIndex: number;
+        isVisible: boolean;
         readonly isDirty: boolean;
         marginLeft: string;
         marginRight: string;
@@ -188,13 +197,15 @@ declare module BABYLON.GUI {
         marginBottom: string;
         left: string;
         top: string;
+        linkOffsetX: string;
+        linkOffsetY: string;
         readonly centerX: number;
         readonly centerY: number;
         constructor(name: string);
         linkWithMesh(mesh: AbstractMesh): void;
         _moveToProjectedPosition(projectedPosition: Vector3): void;
         _markMatrixAsDirty(): void;
-        protected _markAsDirty(): void;
+        _markAsDirty(): void;
         _link(root: Container, host: AdvancedDynamicTexture): void;
         protected _transform(context: CanvasRenderingContext2D): void;
         protected _applyStates(context: CanvasRenderingContext2D): void;
@@ -249,6 +260,7 @@ declare module BABYLON.GUI {
         removeControl(control: Control): Container;
         _reOrderControl(control: Control): void;
         _markMatrixAsDirty(): void;
+        _markAllAsDirty(): void;
         protected _localDraw(context: CanvasRenderingContext2D): void;
         _link(root: Container, host: AdvancedDynamicTexture): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
@@ -315,13 +327,15 @@ declare module BABYLON.GUI {
         private _connectedControlDirtyObserver;
         dash: Array<number>;
         connectedControl: Control;
-        x1: number;
-        y1: number;
-        x2: number;
-        y2: number;
+        x1: string;
+        y1: string;
+        x2: string;
+        y2: string;
         lineWidth: number;
         horizontalAlignment: number;
         verticalAlignment: number;
+        private readonly _effectiveX2;
+        private readonly _effectiveY2;
         constructor(name: string);
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         _measure(): void;

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

@@ -26,6 +26,8 @@ var BABYLON;
                 _this._linkedControls = new Array();
                 _this._isFullscreen = false;
                 _this._fullscreenViewport = new BABYLON.Viewport(0, 0, 1, 1);
+                _this._idealWidth = 0;
+                _this._idealHeight = 0;
                 _this._renderObserver = _this.getScene().onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
                 _this._rootContainer._link(null, _this);
                 _this.hasAlpha = true;
@@ -49,6 +51,36 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(AdvancedDynamicTexture.prototype, "idealWidth", {
+                get: function () {
+                    return this._idealWidth;
+                },
+                set: function (value) {
+                    if (this._idealWidth === value) {
+                        return;
+                    }
+                    this._idealWidth = value;
+                    this.markAsDirty();
+                    this._rootContainer._markAllAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(AdvancedDynamicTexture.prototype, "idealHeight", {
+                get: function () {
+                    return this._idealHeight;
+                },
+                set: function (value) {
+                    if (this._idealHeight === value) {
+                        return;
+                    }
+                    this._idealHeight = value;
+                    this.markAsDirty();
+                    this._rootContainer._markAllAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             AdvancedDynamicTexture.prototype.markAsDirty = function () {
                 this._isDirty = true;
             };
@@ -366,12 +398,13 @@ var BABYLON;
     (function (GUI) {
         var ValueAndUnit = (function () {
             function ValueAndUnit(value, unit, negativeValueAllowed) {
-                if (value === void 0) { value = 1; }
-                if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PERCENTAGE; }
+                if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
                 if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
-                this.value = value;
                 this.unit = unit;
                 this.negativeValueAllowed = negativeValueAllowed;
+                this._value = 1;
+                this.ignoreAdaptiveScaling = false;
+                this._value = value;
             }
             Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
                 get: function () {
@@ -387,12 +420,30 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
-            ValueAndUnit.prototype.toString = function () {
+            Object.defineProperty(ValueAndUnit.prototype, "internalValue", {
+                get: function () {
+                    return this._value;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            ValueAndUnit.prototype.getValue = function (host) {
+                if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
+                    if (host.idealWidth) {
+                        return (this._value * host.getSize().width) / host.idealWidth;
+                    }
+                    if (host.idealHeight) {
+                        return (this._value * host.getSize().height) / host.idealHeight;
+                    }
+                }
+                return this._value;
+            };
+            ValueAndUnit.prototype.toString = function (host) {
                 switch (this.unit) {
                     case ValueAndUnit.UNITMODE_PERCENTAGE:
-                        return this.value + "%";
+                        return this.getValue(host) + "%";
                     case ValueAndUnit.UNITMODE_PIXEL:
-                        return this.value + "px";
+                        return this.getValue(host) + "px";
                 }
                 return this.unit.toString();
             };
@@ -419,10 +470,10 @@ var BABYLON;
                             break;
                     }
                 }
-                if (sourceValue === this.value && sourceUnit === this.unit) {
+                if (sourceValue === this._value && sourceUnit === this.unit) {
                     return false;
                 }
-                this.value = sourceValue;
+                this._value = sourceValue;
                 this.unit = sourceUnit;
                 return true;
             };
@@ -465,6 +516,7 @@ var BABYLON;
                 this._zIndex = 0;
                 this._currentMeasure = GUI.Measure.Empty();
                 this._fontFamily = "Arial";
+                this._fontSize = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
                 this._width = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
                 this._height = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
                 this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
@@ -486,10 +538,11 @@ var BABYLON;
                 this._invertTransformMatrix = GUI.Matrix2D.Identity();
                 this._transformedPosition = BABYLON.Vector2.Zero();
                 this._isMatrixDirty = true;
+                this._isVisible = true;
                 this.isHitTestVisible = true;
                 this.isPointerBlocker = false;
-                this.linkOffsetX = 0;
-                this.linkOffsetY = 0;
+                this._linkOffsetX = new GUI.ValueAndUnit(0);
+                this._linkOffsetY = new GUI.ValueAndUnit(0);
                 // Properties
                 /**
                 * An event triggered when the pointer move over the control.
@@ -641,10 +694,10 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "width", {
                 get: function () {
-                    return this._width.toString();
+                    return this._width.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._width.toString() === value) {
+                    if (this._width.toString(this._host) === value) {
                         return;
                     }
                     if (this._width.fromString(value)) {
@@ -656,10 +709,10 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "height", {
                 get: function () {
-                    return this._height.toString();
+                    return this._height.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._height.toString() === value) {
+                    if (this._height.toString(this._host) === value) {
                         return;
                     }
                     if (this._height.fromString(value)) {
@@ -685,13 +738,15 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "fontSize", {
                 get: function () {
-                    return this._fontSize;
+                    return this._fontSize.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._fontSize === value) {
+                    if (this._fontSize.toString(this._host) === value) {
                         return;
                     }
-                    this._fontSize = value;
+                    if (this._fontSize.fromString(value)) {
+                        this._markAsDirty();
+                    }
                     this._prepareFont();
                 },
                 enumerable: true,
@@ -727,6 +782,20 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "isVisible", {
+                get: function () {
+                    return this._isVisible;
+                },
+                set: function (value) {
+                    if (this._isVisible === value) {
+                        return;
+                    }
+                    this._isVisible = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "isDirty", {
                 get: function () {
                     return this._isDirty;
@@ -736,7 +805,7 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "marginLeft", {
                 get: function () {
-                    return this._marginLeft.toString();
+                    return this._marginLeft.toString(this._host);
                 },
                 set: function (value) {
                     if (this._marginLeft.fromString(value)) {
@@ -748,7 +817,7 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "marginRight", {
                 get: function () {
-                    return this._marginRight.toString();
+                    return this._marginRight.toString(this._host);
                 },
                 set: function (value) {
                     if (this._marginRight.fromString(value)) {
@@ -760,7 +829,7 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "marginTop", {
                 get: function () {
-                    return this._marginTop.toString();
+                    return this._marginTop.toString(this._host);
                 },
                 set: function (value) {
                     if (this._marginTop.fromString(value)) {
@@ -772,7 +841,7 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "marginBottom", {
                 get: function () {
-                    return this._marginBottom.toString();
+                    return this._marginBottom.toString(this._host);
                 },
                 set: function (value) {
                     if (this._marginBottom.fromString(value)) {
@@ -784,7 +853,7 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "left", {
                 get: function () {
-                    return this._left.toString();
+                    return this._left.toString(this._host);
                 },
                 set: function (value) {
                     if (this._left.fromString(value)) {
@@ -796,7 +865,7 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "top", {
                 get: function () {
-                    return this._top.toString();
+                    return this._top.toString(this._host);
                 },
                 set: function (value) {
                     if (this._top.fromString(value)) {
@@ -806,6 +875,30 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "linkOffsetX", {
+                get: function () {
+                    return this._linkOffsetX.toString(this._host);
+                },
+                set: function (value) {
+                    if (this._linkOffsetX.fromString(value)) {
+                        this._markAsDirty();
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control.prototype, "linkOffsetY", {
+                get: function () {
+                    return this._linkOffsetY.toString(this._host);
+                },
+                set: function (value) {
+                    if (this._linkOffsetY.fromString(value)) {
+                        this._markAsDirty();
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "centerX", {
                 get: function () {
                     return this._currentMeasure.left + this._currentMeasure.width / 2;
@@ -834,8 +927,10 @@ var BABYLON;
                 this._host._linkedControls.push(this);
             };
             Control.prototype._moveToProjectedPosition = function (projectedPosition) {
-                this.left = ((projectedPosition.x + this.linkOffsetX) - this._currentMeasure.width / 2) + "px";
-                this.top = ((projectedPosition.y + this.linkOffsetY) - this._currentMeasure.height / 2) + "px";
+                this.left = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2) + "px";
+                this.top = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2) + "px";
+                this._left.ignoreAdaptiveScaling = true;
+                this._top.ignoreAdaptiveScaling = true;
             };
             Control.prototype._markMatrixAsDirty = function () {
                 this._isMatrixDirty = true;
@@ -928,16 +1023,16 @@ var BABYLON;
             Control.prototype._measure = function () {
                 // Width / Height
                 if (this._width.isPixel) {
-                    this._currentMeasure.width = this._width.value;
+                    this._currentMeasure.width = this._width.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.width *= this._width.value;
+                    this._currentMeasure.width *= this._width.getValue(this._host);
                 }
                 if (this._height.isPixel) {
-                    this._currentMeasure.height = this._height.value;
+                    this._currentMeasure.height = this._height.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.height *= this._height.value;
+                    this._currentMeasure.height *= this._height.getValue(this._host);
                 }
             };
             Control.prototype._computeAlignment = function (parentMeasure, context) {
@@ -971,44 +1066,44 @@ var BABYLON;
                         break;
                 }
                 if (this._marginLeft.isPixel) {
-                    this._currentMeasure.left += this._marginLeft.value;
-                    this._currentMeasure.width -= this._marginRight.value;
+                    this._currentMeasure.left += this._marginLeft.getValue(this._host);
+                    this._currentMeasure.width -= this._marginRight.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.left += parentWidth * this._marginLeft.value;
-                    this._currentMeasure.width -= parentWidth * this._marginLeft.value;
+                    this._currentMeasure.left += parentWidth * this._marginLeft.getValue(this._host);
+                    this._currentMeasure.width -= parentWidth * this._marginLeft.getValue(this._host);
                 }
                 if (this._marginRight.isPixel) {
-                    this._currentMeasure.width -= this._marginRight.value;
+                    this._currentMeasure.width -= this._marginRight.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.width -= parentWidth * this._marginRight.value;
+                    this._currentMeasure.width -= parentWidth * this._marginRight.getValue(this._host);
                 }
                 if (this._marginTop.isPixel) {
-                    this._currentMeasure.top += this._marginTop.value;
-                    this._currentMeasure.height -= this._marginTop.value;
+                    this._currentMeasure.top += this._marginTop.getValue(this._host);
+                    this._currentMeasure.height -= this._marginTop.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.top += parentHeight * this._marginTop.value;
-                    this._currentMeasure.height -= parentHeight * this._marginTop.value;
+                    this._currentMeasure.top += parentHeight * this._marginTop.getValue(this._host);
+                    this._currentMeasure.height -= parentHeight * this._marginTop.getValue(this._host);
                 }
                 if (this._marginBottom.isPixel) {
-                    this._currentMeasure.height -= this._marginBottom.value;
+                    this._currentMeasure.height -= this._marginBottom.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.height -= parentHeight * this._marginBottom.value;
+                    this._currentMeasure.height -= parentHeight * this._marginBottom.getValue(this._host);
                 }
                 if (this._left.isPixel) {
-                    this._currentMeasure.left += this._left.value;
+                    this._currentMeasure.left += this._left.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.left += parentWidth * this._left.value;
+                    this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
                 }
                 if (this._top.isPixel) {
-                    this._currentMeasure.top += this._top.value;
+                    this._currentMeasure.top += this._top.getValue(this._host);
                 }
                 else {
-                    this._currentMeasure.top += parentHeight * this._top.value;
+                    this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
                 }
                 this._currentMeasure.left += x;
                 this._currentMeasure.top += y;
@@ -1108,7 +1203,7 @@ var BABYLON;
                 if (!this._fontFamily) {
                     return;
                 }
-                this._font = this._fontSize + "px " + this._fontFamily;
+                this._font = this._fontSize.getValue(this._host) + "px " + this._fontFamily;
                 this._fontOffset = Control._GetFontOffset(this._font);
                 this._markAsDirty();
             };
@@ -1284,6 +1379,17 @@ var BABYLON;
                     this._children[index]._markMatrixAsDirty();
                 }
             };
+            Container.prototype._markAllAsDirty = function () {
+                this._markAsDirty();
+                for (var index = 0; index < this._children.length; index++) {
+                    if (this._children[index]._markAllAsDirty) {
+                        this._children[index]._markAllAsDirty();
+                    }
+                    else {
+                        this._children[index]._markAsDirty();
+                    }
+                }
+            };
             Container.prototype._localDraw = function (context) {
                 if (this._background) {
                     context.fillStyle = this._background;
@@ -1305,7 +1411,9 @@ var BABYLON;
                     this._clipForChildren(context);
                     for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
                         var child = _a[_i];
-                        child._draw(this._measureForChildren, context);
+                        if (child.isVisible) {
+                            child._draw(this._measureForChildren, context);
+                        }
                     }
                 }
                 context.restore();
@@ -1379,16 +1487,14 @@ 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._currentMeasure.height;
+                        stack += child._height.internalValue;
                         child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                     }
                     else {
                         child.left = stack + "px";
-                        stack += child._currentMeasure.width;
+                        stack += child._width.internalValue;
                         child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
                     }
                 }
@@ -1641,10 +1747,10 @@ var BABYLON;
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._lineWidth = 1;
-                _this._x1 = 0;
-                _this._y1 = 0;
-                _this._x2 = 0;
-                _this._y2 = 0;
+                _this._x1 = new GUI.ValueAndUnit(0);
+                _this._y1 = new GUI.ValueAndUnit(0);
+                _this._x2 = new GUI.ValueAndUnit(0);
+                _this._y2 = new GUI.ValueAndUnit(0);
                 _this._dash = new Array();
                 _this.isHitTestVisible = false;
                 _this._horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
@@ -1689,62 +1795,60 @@ var BABYLON;
             });
             Object.defineProperty(Line.prototype, "x1", {
                 get: function () {
-                    return this._x1;
+                    return this._x1.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._x1 === value) {
+                    if (this._x1.toString(this._host) === value) {
                         return;
                     }
-                    this._x1 = value;
-                    this._markAsDirty();
+                    if (this._x1.fromString(value)) {
+                        this._markAsDirty();
+                    }
                 },
                 enumerable: true,
                 configurable: true
             });
             Object.defineProperty(Line.prototype, "y1", {
                 get: function () {
-                    return this._y1;
+                    return this._y1.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._y1 === value) {
+                    if (this._y1.toString(this._host) === value) {
                         return;
                     }
-                    this._y1 = value;
-                    this._markAsDirty();
+                    if (this._y1.fromString(value)) {
+                        this._markAsDirty();
+                    }
                 },
                 enumerable: true,
                 configurable: true
             });
             Object.defineProperty(Line.prototype, "x2", {
                 get: function () {
-                    if (this._connectedControl) {
-                        return this._connectedControl.centerX + this._x2;
-                    }
-                    return this._x2;
+                    return this._x2.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._x2 === value) {
+                    if (this._x2.toString(this._host) === value) {
                         return;
                     }
-                    this._x2 = value;
-                    this._markAsDirty();
+                    if (this._x2.fromString(value)) {
+                        this._markAsDirty();
+                    }
                 },
                 enumerable: true,
                 configurable: true
             });
             Object.defineProperty(Line.prototype, "y2", {
                 get: function () {
-                    if (this._connectedControl) {
-                        return this._connectedControl.centerY + this._y2;
-                    }
-                    return this._y2;
+                    return this._y2.toString(this._host);
                 },
                 set: function (value) {
-                    if (this._y2 === value) {
+                    if (this._y2.toString(this._host) === value) {
                         return;
                     }
-                    this._y2 = value;
-                    this._markAsDirty();
+                    if (this._y2.fromString(value)) {
+                        this._markAsDirty();
+                    }
                 },
                 enumerable: true,
                 configurable: true
@@ -1777,6 +1881,20 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Line.prototype, "_effectiveX2", {
+                get: function () {
+                    return (this._connectedControl ? this._connectedControl.centerX : 0) + this._x2.getValue(this._host);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Line.prototype, "_effectiveY2", {
+                get: function () {
+                    return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Line.prototype._draw = function (parentMeasure, context) {
                 context.save();
                 this._applyStates(context);
@@ -1785,24 +1903,26 @@ var BABYLON;
                     context.lineWidth = this._lineWidth;
                     context.setLineDash(this._dash);
                     context.beginPath();
-                    context.moveTo(this._x1, this._y1);
-                    context.lineTo(this.x2, this.y2);
+                    context.moveTo(this._x1.getValue(this._host), this._y1.getValue(this._host));
+                    context.lineTo(this._effectiveX2, this._effectiveY2);
                     context.stroke();
                 }
                 context.restore();
             };
             Line.prototype._measure = function () {
                 // Width / Height
-                this._currentMeasure.width = Math.abs(this._x1 - this.x2) + this._lineWidth;
-                this._currentMeasure.height = Math.abs(this._y1 - this.y2) + this._lineWidth;
+                this._currentMeasure.width = Math.abs(this._x1.getValue(this._host) - this._effectiveX2) + this._lineWidth;
+                this._currentMeasure.height = Math.abs(this._y1.getValue(this._host) - this._effectiveY2) + this._lineWidth;
             };
             Line.prototype._computeAlignment = function (parentMeasure, context) {
-                this._currentMeasure.left = Math.min(this._x1, this.x2) - this._lineWidth / 2;
-                this._currentMeasure.top = Math.min(this._y1, this.y2) - this._lineWidth / 2;
+                this._currentMeasure.left = Math.min(this._x1.getValue(this._host), this._effectiveX2) - this._lineWidth / 2;
+                this._currentMeasure.top = Math.min(this._y1.getValue(this._host), this._effectiveY2) - this._lineWidth / 2;
             };
             Line.prototype._moveToProjectedPosition = function (projectedPosition) {
-                this.x1 = projectedPosition.x + this.linkOffsetX;
-                this.y1 = projectedPosition.y + this.linkOffsetY;
+                this.x1 = (projectedPosition.x + this._linkOffsetX.getValue(this._host)) + "px";
+                this.y1 = (projectedPosition.y + this._linkOffsetY.getValue(this._host)) + "px";
+                this._x1.ignoreAdaptiveScaling = true;
+                this._y1.ignoreAdaptiveScaling = true;
             };
             return Line;
         }(GUI.Control));

gui/src/advancedDynamicTexture.ts

@@ -16,6 +16,8 @@ module BABYLON.GUI {
         public _linkedControls = new Array<Control>();
         private _isFullscreen = false;
         private _fullscreenViewport = new Viewport(0, 0, 1, 1);
+        private _idealWidth = 0;
+        private _idealHeight = 0;
 
         public get background(): string {
             return this._background;
@@ -29,6 +31,34 @@ module BABYLON.GUI {
             this._background = value;
             this.markAsDirty();
         }
+
+        public get idealWidth(): number {
+            return this._idealWidth;
+        }
+
+        public set idealWidth(value: number) {
+            if (this._idealWidth === value) {
+                return;
+            }
+
+            this._idealWidth = value;
+            this.markAsDirty();
+            this._rootContainer._markAllAsDirty();
+        }
+
+        public get idealHeight(): number {
+            return this._idealHeight;
+        }
+
+        public set idealHeight(value: number) {
+            if (this._idealHeight === value) {
+                return;
+            }
+
+            this._idealHeight = value;
+            this.markAsDirty();
+            this._rootContainer._markAllAsDirty();
+        }        
        
         constructor(name: string, width = 0, height = 0, scene: Scene, generateMipMaps = false, samplingMode = Texture.NEAREST_SAMPLINGMODE) {
             super(name, {width: width, height: height}, scene, generateMipMaps, samplingMode, Engine.TEXTUREFORMAT_RGBA);

gui/src/controls/container.ts

@@ -79,6 +79,18 @@ module BABYLON.GUI {
             }
         }
 
+        public _markAllAsDirty(): void {
+            this._markAsDirty();
+
+            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();
+                }
+            }
+        }
+
         protected _localDraw(context: CanvasRenderingContext2D): void {
             if (this._background) {
                 context.fillStyle = this._background;
@@ -104,7 +116,9 @@ module BABYLON.GUI {
 
                 this._clipForChildren(context);
                 for (var child of this._children) {
-                    child._draw(this._measureForChildren, context);
+                    if (child.isVisible) {
+                        child._draw(this._measureForChildren, context);
+                    }
                 }
             }
             context.restore();

gui/src/controls/control.ts

@@ -8,10 +8,10 @@ module BABYLON.GUI {
         public _host: AdvancedDynamicTexture;
         public _currentMeasure = Measure.Empty();
         private _fontFamily = "Arial";
-        private _fontSize: number;
+        private _fontSize = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PIXEL, false);
         private _font: string;
-        private _width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
-        private _height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        public _width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        public _height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
         private _lastMeasuredFont: string;
         protected _fontOffset: {ascent: number, height: number, descent: number};
         private _color: string;
@@ -36,13 +36,14 @@ module BABYLON.GUI {
         private _isMatrixDirty = true;
         private _cachedOffsetX: number;
         private _cachedOffsetY: number;
+        private _isVisible = true;
         public _linkedMesh: AbstractMesh;
 
         public isHitTestVisible = true;
         public isPointerBlocker = false;
 
-        public linkOffsetX = 0;
-        public linkOffsetY = 0;
+        protected _linkOffsetX = new ValueAndUnit(0);
+        protected _linkOffsetY = new ValueAndUnit(0);
         
         // Properties
 
@@ -192,11 +193,11 @@ module BABYLON.GUI {
         } 
 
         public get width(): string {
-            return this._width.toString();
+            return this._width.toString(this._host);
         }
 
         public set width(value: string) {
-            if (this._width.toString() === value) {
+            if (this._width.toString(this._host) === value) {
                 return;
             }
 
@@ -206,11 +207,11 @@ module BABYLON.GUI {
         }
 
         public get height(): string {
-            return this._height.toString();
+            return this._height.toString(this._host);
         }
 
         public set height(value: string) {
-            if (this._height.toString() === value) {
+            if (this._height.toString(this._host) === value) {
                 return;
             }
 
@@ -232,16 +233,18 @@ module BABYLON.GUI {
             this._prepareFont();
         }
 
-        public get fontSize(): number {
-            return this._fontSize;
+        public get fontSize(): string {
+            return this._fontSize.toString(this._host);
         }
 
-        public set fontSize(value: number) {
-            if (this._fontSize === value) {
+        public set fontSize(value: string) {
+            if (this._fontSize.toString(this._host) === value) {
                 return;
             }
 
-            this._fontSize = value;
+            if (this._fontSize.fromString(value)) {
+                this._markAsDirty();
+            }
             this._prepareFont();
         }
 
@@ -274,12 +277,25 @@ module BABYLON.GUI {
             }
         }
 
+        public get isVisible(): boolean {
+            return this._isVisible;
+        }
+
+        public set isVisible(value: boolean) {
+            if (this._isVisible === value) {
+                return;
+            }
+
+            this._isVisible = value;
+            this._markAsDirty();
+        }
+
         public get isDirty(): boolean {
             return this._isDirty;
         }
         
         public get marginLeft(): string {
-            return this._marginLeft.toString();
+            return this._marginLeft.toString(this._host);
         }
 
         public set marginLeft(value: string) {
@@ -289,7 +305,7 @@ module BABYLON.GUI {
         }    
 
         public get marginRight(): string {
-            return this._marginRight.toString();
+            return this._marginRight.toString(this._host);
         }
 
         public set marginRight(value: string) {
@@ -299,7 +315,7 @@ module BABYLON.GUI {
         }
 
         public get marginTop(): string {
-            return this._marginTop.toString();
+            return this._marginTop.toString(this._host);
         }
 
         public set marginTop(value: string) {
@@ -309,7 +325,7 @@ module BABYLON.GUI {
         }
 
         public get marginBottom(): string {
-            return this._marginBottom.toString();
+            return this._marginBottom.toString(this._host);
         }
 
         public set marginBottom(value: string) {
@@ -319,7 +335,7 @@ module BABYLON.GUI {
         }     
 
         public get left(): string {
-            return this._left.toString();
+            return this._left.toString(this._host);
         }
 
         public set left(value: string) {
@@ -329,7 +345,7 @@ module BABYLON.GUI {
         }  
 
         public get top(): string {
-            return this._top.toString();
+            return this._top.toString(this._host);
         }
 
         public set top(value: string) {
@@ -338,6 +354,26 @@ module BABYLON.GUI {
             }
         }     
 
+        public get linkOffsetX(): string {
+            return this._linkOffsetX.toString(this._host);
+        }
+
+        public set linkOffsetX(value: string) {
+            if (this._linkOffsetX.fromString(value)) {
+                this._markAsDirty();
+            }
+        }      
+
+        public get linkOffsetY(): string {
+            return this._linkOffsetY.toString(this._host);
+        }
+
+        public set linkOffsetY(value: string) {
+            if (this._linkOffsetY.fromString(value)) {
+                this._markAsDirty();
+            }
+        }                
+
         public get centerX(): number {
             return this._currentMeasure.left + this._currentMeasure.width / 2;
         }       
@@ -368,8 +404,11 @@ module BABYLON.GUI {
         }
 
         public _moveToProjectedPosition(projectedPosition: Vector3): void {
-            this.left = ((projectedPosition.x + this.linkOffsetX) - this._currentMeasure.width / 2) + "px";
-            this.top = ((projectedPosition.y + this.linkOffsetY) - this._currentMeasure.height / 2) + "px";
+            this.left = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2) + "px";
+            this.top = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2) + "px";
+
+            this._left.ignoreAdaptiveScaling = true;
+            this._top.ignoreAdaptiveScaling = true;
         }
 
         public _markMatrixAsDirty(): void {
@@ -377,7 +416,7 @@ module BABYLON.GUI {
             this._markAsDirty();
         }
 
-        protected _markAsDirty(): void {            
+        public _markAsDirty(): void {            
             this._isDirty = true;
 
             if (!this._host) {
@@ -492,15 +531,15 @@ module BABYLON.GUI {
         public _measure(): void {  
             // Width / Height
             if (this._width.isPixel) {
-                this._currentMeasure.width = this._width.value;
+                this._currentMeasure.width = this._width.getValue(this._host);
             } else {
-                this._currentMeasure.width *= this._width.value; 
+                this._currentMeasure.width *= this._width.getValue(this._host); 
             }
 
             if (this._height.isPixel) {
-                this._currentMeasure.height = this._height.value;
+                this._currentMeasure.height = this._height.getValue(this._host);
             } else {
-                this._currentMeasure.height *= this._height.value; 
+                this._currentMeasure.height *= this._height.getValue(this._host); 
             }
         }
 
@@ -540,43 +579,43 @@ module BABYLON.GUI {
             }
             
             if (this._marginLeft.isPixel) {
-                this._currentMeasure.left += this._marginLeft.value;
-                this._currentMeasure.width -= this._marginRight.value;
+                this._currentMeasure.left += this._marginLeft.getValue(this._host);
+                this._currentMeasure.width -= this._marginRight.getValue(this._host);
             } else {
-                this._currentMeasure.left += parentWidth * this._marginLeft.value;
-                this._currentMeasure.width -= parentWidth * this._marginLeft.value;
+                this._currentMeasure.left += parentWidth * this._marginLeft.getValue(this._host);
+                this._currentMeasure.width -= parentWidth * this._marginLeft.getValue(this._host);
             }
 
             if (this._marginRight.isPixel) {
-                this._currentMeasure.width -= this._marginRight.value;
+                this._currentMeasure.width -= this._marginRight.getValue(this._host);
             } else {
-                this._currentMeasure.width -= parentWidth * this._marginRight.value;
+                this._currentMeasure.width -= parentWidth * this._marginRight.getValue(this._host);
             }
 
             if (this._marginTop.isPixel) {
-                this._currentMeasure.top += this._marginTop.value;
-                this._currentMeasure.height -= this._marginTop.value;
+                this._currentMeasure.top += this._marginTop.getValue(this._host);
+                this._currentMeasure.height -= this._marginTop.getValue(this._host);
             } else {
-                this._currentMeasure.top += parentHeight * this._marginTop.value;
-                this._currentMeasure.height -= parentHeight * this._marginTop.value;
+                this._currentMeasure.top += parentHeight * this._marginTop.getValue(this._host);
+                this._currentMeasure.height -= parentHeight * this._marginTop.getValue(this._host);
             }
 
             if (this._marginBottom.isPixel) {
-                this._currentMeasure.height -= this._marginBottom.value;
+                this._currentMeasure.height -= this._marginBottom.getValue(this._host);
             } else {
-                this._currentMeasure.height -= parentHeight * this._marginBottom.value;
+                this._currentMeasure.height -= parentHeight * this._marginBottom.getValue(this._host);
             }            
 
             if (this._left.isPixel) {
-                this._currentMeasure.left += this._left.value;
+                this._currentMeasure.left += this._left.getValue(this._host);
             } else {
-                this._currentMeasure.left += parentWidth * this._left.value;
+                this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
             }
 
             if (this._top.isPixel) {
-                this._currentMeasure.top += this._top.value;
+                this._currentMeasure.top += this._top.getValue(this._host);
             } else {
-                this._currentMeasure.top += parentHeight * this._top.value;
+                this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
             }
 
             this._currentMeasure.left += x;
@@ -704,7 +743,7 @@ module BABYLON.GUI {
                 return;
             }
 
-            this._font = this._fontSize + "px " + this._fontFamily;
+            this._font = this._fontSize.getValue(this._host) + "px " + this._fontFamily;
         
             this._fontOffset = Control._GetFontOffset(this._font);
             this._markAsDirty();

gui/src/controls/line.ts

@@ -6,10 +6,10 @@ module BABYLON.GUI {
     export class Line extends Control {
         private _lineWidth = 1;
         private _background: string;
-        private _x1 = 0;
-        private _y1 = 0;
-        private _x2 = 0;
-        private _y2 = 0;
+        private _x1 = new ValueAndUnit(0);
+        private _y1 = new ValueAndUnit(0);
+        private _x2 = new ValueAndUnit(0);
+        private _y2 = new ValueAndUnit(0);
         private _dash = new Array<number>();
         private _connectedControl: Control;
         private _connectedControlDirtyObserver: Observer<Control>;
@@ -49,62 +49,60 @@ module BABYLON.GUI {
             this._markAsDirty();
         }              
 
-        public get x1(): number {
-            return this._x1;
+        public get x1(): string {
+            return this._x1.toString(this._host);
         }
 
-        public set x1(value: number) {
-            if (this._x1 === value) {
+        public set x1(value: string) {
+            if (this._x1.toString(this._host) === value) {
                 return;
             }
 
-            this._x1 = value;
-            this._markAsDirty();
+            if (this._x1.fromString(value)) {
+                this._markAsDirty();
+            }
         }    
 
-        public get y1(): number {
-            return this._y1;
+        public get y1(): string {
+            return this._y1.toString(this._host);
         }
 
-        public set y1(value: number) {
-            if (this._y1 === value) {
+        public set y1(value: string) {
+            if (this._y1.toString(this._host) === value) {
                 return;
             }
 
-            this._y1 = value;
-            this._markAsDirty();
+            if (this._y1.fromString(value)) {
+                this._markAsDirty();
+            }
         }     
 
-        public get x2(): number {
-            if (this._connectedControl) {
-                return this._connectedControl.centerX + this._x2;
-            }
-            return this._x2;
+        public get x2(): string {
+            return this._x2.toString(this._host);
         }
 
-        public set x2(value: number) {
-            if (this._x2 === value) {
+        public set x2(value: string) {
+            if (this._x2.toString(this._host) === value) {
                 return;
             }
 
-            this._x2 = value;
-            this._markAsDirty();
+            if (this._x2.fromString(value)) {
+                this._markAsDirty();
+            }
         }    
 
-        public get y2(): number {
-            if (this._connectedControl) {
-                return this._connectedControl.centerY + this._y2;
-            }
-            return this._y2;
+        public get y2(): string {
+            return this._y2.toString(this._host);
         }
 
-        public set y2(value: number) {
-            if (this._y2 === value) {
+        public set y2(value: string) {
+            if (this._y2.toString(this._host) === value) {
                 return;
             }
 
-            this._y2 = value;
-            this._markAsDirty();
+            if (this._y2.fromString(value)) {
+                this._markAsDirty();
+            }
         }                       
         
         public get lineWidth(): number {
@@ -126,7 +124,15 @@ module BABYLON.GUI {
 
         public set verticalAlignment(value: number) {
             return;
-        }         
+        }    
+
+        private get _effectiveX2(): number {
+            return (this._connectedControl ? this._connectedControl.centerX : 0) + this._x2.getValue(this._host);
+        }   
+
+        private get _effectiveY2(): number {
+            return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
+        }           
 
         constructor(public name: string) {
             super(name);
@@ -146,8 +152,9 @@ module BABYLON.GUI {
                 context.setLineDash(this._dash);
 
                 context.beginPath();
-                context.moveTo(this._x1, this._y1);
-                context.lineTo(this.x2, this.y2);
+                context.moveTo(this._x1.getValue(this._host), this._y1.getValue(this._host));
+
+                context.lineTo(this._effectiveX2, this._effectiveY2);
 
                 context.stroke();
             }
@@ -157,18 +164,21 @@ module BABYLON.GUI {
 
         public _measure(): void {  
             // Width / Height
-            this._currentMeasure.width = Math.abs(this._x1 - this.x2) + this._lineWidth;
-            this._currentMeasure.height = Math.abs(this._y1 - this.y2) + this._lineWidth;
+            this._currentMeasure.width = Math.abs(this._x1.getValue(this._host) - this._effectiveX2) + this._lineWidth;
+            this._currentMeasure.height = Math.abs(this._y1.getValue(this._host) - this._effectiveY2) + this._lineWidth;
         }
 
         protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void {          
-            this._currentMeasure.left = Math.min(this._x1, this.x2) - this._lineWidth / 2;
-            this._currentMeasure.top = Math.min(this._y1, this.y2) - this._lineWidth / 2;            
+            this._currentMeasure.left = Math.min(this._x1.getValue(this._host), this._effectiveX2) - this._lineWidth / 2;
+            this._currentMeasure.top = Math.min(this._y1.getValue(this._host), this._effectiveY2) - this._lineWidth / 2;            
         }   
 
         public _moveToProjectedPosition(projectedPosition: Vector3): void {
-            this.x1 = projectedPosition.x + this.linkOffsetX;
-            this.y1 = projectedPosition.y + this.linkOffsetY;
+            this.x1 = (projectedPosition.x + this._linkOffsetX.getValue(this._host)) + "px";
+            this.y1 = (projectedPosition.y + this._linkOffsetY.getValue(this._host)) + "px";
+
+            this._x1.ignoreAdaptiveScaling = true;
+            this._y1.ignoreAdaptiveScaling = true;
         }
     }    
 }

gui/src/controls/stackPanel.ts

@@ -24,16 +24,13 @@ module BABYLON.GUI {
         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._currentMeasure.height;
+                    stack += child._height.internalValue;
                     child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                 } else {
                     child.left = stack + "px";
-                    stack += child._currentMeasure.width;
+                    stack += child._width.internalValue;
                     child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
 
                 }

gui/src/valueAndUnit.ts

@@ -2,7 +2,11 @@
 
 module BABYLON.GUI {
     export class ValueAndUnit {
-        public constructor(public value = 1, public unit = ValueAndUnit.UNITMODE_PERCENTAGE, public negativeValueAllowed = true) {
+        private _value = 1;
+        public ignoreAdaptiveScaling = false;
+
+        public constructor(value, public unit = ValueAndUnit.UNITMODE_PIXEL, public negativeValueAllowed = true) {
+            this._value = value;
         }
 
         public get isPercentage(): boolean {
@@ -13,12 +17,30 @@ module BABYLON.GUI {
             return this.unit === ValueAndUnit.UNITMODE_PIXEL;
         }
 
-        public toString(): string {
+        public get internalValue(): number {
+            return this._value;
+        }
+
+        public getValue(host: AdvancedDynamicTexture): number {
+            if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
+
+                if (host.idealWidth) { // horizontal
+                    return (this._value * host.getSize().width) / host.idealWidth;
+                }
+
+                if (host.idealHeight) { // vertical
+                    return (this._value * host.getSize().height) / host.idealHeight;
+                }
+            }
+            return this._value;
+        }
+
+        public toString(host: AdvancedDynamicTexture): string {
             switch (this.unit) {
                 case ValueAndUnit.UNITMODE_PERCENTAGE:
-                    return this.value + "%";
+                    return this.getValue(host) + "%";
                 case ValueAndUnit.UNITMODE_PIXEL:
-                    return this.value + "px";
+                    return this.getValue(host) + "px";
             }
 
             return this.unit.toString();
@@ -52,11 +74,11 @@ module BABYLON.GUI {
                 }
             }
 
-            if (sourceValue === this.value && sourceUnit === this.unit) {
+            if (sourceValue === this._value && sourceUnit === this.unit) {
                 return false;
             }
 
-            this.value = sourceValue;
+            this._value = sourceValue;
             this.unit = sourceUnit;
 
             return true;
@@ -73,6 +95,6 @@ module BABYLON.GUI {
 
         public static get UNITMODE_PIXEL(): number {
             return ValueAndUnit._UNITMODE_PIXEL;
-        }
+        }   
     }    
 }