gui: better stackpanel auto scale behavior

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

@@ -308,8 +308,13 @@ declare module BABYLON.GUI {
     class StackPanel extends Container {
         name: string;
         private _isVertical;
+        private _manualWidth;
+        private _manualHeight;
+        private _doNotTrackManualChanges;
         private _tempMeasureStore;
         isVertical: boolean;
+        width: string | number;
+        height: string | number;
         constructor(name?: string);
         protected _getTypeName(): string;
         protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;

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

@@ -1757,6 +1757,9 @@ var BABYLON;
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._isVertical = true;
+                _this._manualWidth = false;
+                _this._manualHeight = false;
+                _this._doNotTrackManualChanges = false;
                 _this._tempMeasureStore = GUI.Measure.Empty();
                 return _this;
             }
@@ -1774,50 +1777,104 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(StackPanel.prototype, "width", {
+                get: function () {
+                    return this._width.toString(this._host);
+                },
+                set: function (value) {
+                    if (!this._doNotTrackManualChanges) {
+                        this._manualWidth = true;
+                    }
+                    if (this._width.toString(this._host) === value) {
+                        return;
+                    }
+                    if (this._width.fromString(value)) {
+                        this._markAsDirty();
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(StackPanel.prototype, "height", {
+                get: function () {
+                    return this._height.toString(this._host);
+                },
+                set: function (value) {
+                    if (!this._doNotTrackManualChanges) {
+                        this._manualHeight = true;
+                    }
+                    if (this._height.toString(this._host) === value) {
+                        return;
+                    }
+                    if (this._height.fromString(value)) {
+                        this._markAsDirty();
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
             StackPanel.prototype._getTypeName = function () {
                 return "StackPanel";
             };
             StackPanel.prototype._preMeasure = function (parentMeasure, context) {
-                var stack = 0;
+                var stackWidth = 0;
+                var stackHeight = 0;
                 for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
                     var child = _a[_i];
                     this._tempMeasureStore.copyFrom(child._currentMeasure);
                     child._currentMeasure.copyFrom(parentMeasure);
                     child._measure();
                     if (this._isVertical) {
-                        child.top = stack + "px";
+                        child.top = stackHeight + "px";
                         if (!child._top.ignoreAdaptiveScaling) {
                             child._markAsDirty();
                         }
                         child._top.ignoreAdaptiveScaling = true;
-                        stack += child._currentMeasure.height;
+                        stackHeight += child._currentMeasure.height;
+                        if (child._currentMeasure.width > stackWidth) {
+                            stackWidth = child._currentMeasure.width;
+                        }
                         child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                     }
                     else {
-                        child.left = stack + "px";
+                        child.left = stackWidth + "px";
                         if (!child._left.ignoreAdaptiveScaling) {
                             child._markAsDirty();
                         }
                         child._left.ignoreAdaptiveScaling = true;
-                        stack += child._currentMeasure.width;
+                        stackWidth += child._currentMeasure.width;
+                        if (child._currentMeasure.height > stackHeight) {
+                            stackHeight = child._currentMeasure.height;
+                        }
                         child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
                     }
                     child._currentMeasure.copyFrom(this._tempMeasureStore);
                 }
-                var panelChanged = false;
-                if (this._isVertical) {
-                    var previousHeight = this.height;
-                    this.height = stack + "px";
-                    panelChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
+                this._doNotTrackManualChanges = true;
+                // Let stack panel width and height default to stackHeight and stackWidth if dimensions are not specified.
+                // User can now define their own height and width for stack panel.
+                var panelWidthChanged = false;
+                var panelHeightChanged = false;
+                var previousHeight = this.height;
+                var previousWidth = this.width;
+                if (!this._manualHeight) {
+                    // do not specify height if strictly defined by user
+                    this.height = stackHeight + "px";
+                }
+                if (!this._manualWidth) {
+                    // do not specify width if strictly defined by user
+                    this.width = stackWidth + "px";
+                }
+                panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
+                panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
+                if (panelHeightChanged) {
                     this._height.ignoreAdaptiveScaling = true;
                 }
-                else {
-                    var previousWidth = this.width;
-                    this.width = stack + "px";
-                    panelChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
+                if (panelWidthChanged) {
                     this._width.ignoreAdaptiveScaling = true;
                 }
-                if (panelChanged) {
+                this._doNotTrackManualChanges = false;
+                if (panelWidthChanged || panelHeightChanged) {
                     this._markAllAsDirty();
                 }
                 _super.prototype._preMeasure.call(this, parentMeasure, context);

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

@@ -308,8 +308,13 @@ declare module BABYLON.GUI {
     class StackPanel extends Container {
         name: string;
         private _isVertical;
+        private _manualWidth;
+        private _manualHeight;
+        private _doNotTrackManualChanges;
         private _tempMeasureStore;
         isVertical: boolean;
+        width: string | number;
+        height: string | number;
         constructor(name?: string);
         protected _getTypeName(): string;
         protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;

gui/src/controls/stackPanel.ts

@@ -5,20 +5,13 @@ module BABYLON.GUI {
         private _isVertical = true;
         private _manualWidth = false;
         private _manualHeight = false;
+        private _doNotTrackManualChanges = false;
         private _tempMeasureStore = Measure.Empty();
 
         public get isVertical(): boolean {
             return this._isVertical;
         }
 
-        public get manualWidth(): boolean {
-            return this._manualWidth;
-        }
-
-        public get manualHeight(): boolean {
-            return this._manualHeight;
-        }
-
         public set isVertical(value: boolean) {
             if (this._isVertical === value) {
                 return;
@@ -27,24 +20,42 @@ module BABYLON.GUI {
             this._isVertical = value;
             this._markAsDirty();
         }
+       
+        public set width(value: string | number ) {
+            if (!this._doNotTrackManualChanges) {
+                this._manualWidth = true;
+            }
 
-        public set manualWidth(value: boolean) {
-            if (this._manualWidth === value) {
+            if (this._width.toString(this._host) === value) {
                 return;
             }
 
-            this._manualWidth = value;
-            this._markAsDirty();
-        }  
+            if (this._width.fromString(value)) {
+                this._markAsDirty();
+            }
+        }
+
+        public get width(): string | number {
+            return this._width.toString(this._host);
+        }        
+
+        public set height(value: string | number ) {
+            if (!this._doNotTrackManualChanges) {
+                this._manualHeight = true;
+            }
 
-        public set manualHeight(value: boolean) {
-            if (this._manualHeight === value) {
+            if (this._height.toString(this._host) === value) {
                 return;
             }
 
-            this._manualHeight = value;
-            this._markAsDirty();
+            if (this._height.fromString(value)) {
+                this._markAsDirty();
+            }
         }        
+                
+        public get height(): string | number  {
+            return this._height.toString(this._host);
+        }
     
         constructor(public name?: string) {
             super(name);
@@ -88,31 +99,41 @@ module BABYLON.GUI {
 
                 child._currentMeasure.copyFrom(this._tempMeasureStore);
             }
+            
+            this._doNotTrackManualChanges = true;
+
             // Let stack panel width and height default to stackHeight and stackWidth if dimensions are not specified.
             // User can now define their own height and width for stack panel.
-            if(!this._manualHeight) {
+
+            let panelWidthChanged = false;
+            let panelHeightChanged = false;
+
+            let previousHeight = this.height;
+            let previousWidth = this.width;
+
+            if (!this._manualHeight) {
                 // do not specify height if strictly defined by user
                 this.height = stackHeight + "px";
             }
-            if(!this._manualWidth) {
+            if (!this._manualWidth) {
                 // do not specify width if strictly defined by user
                 this.width = stackWidth + "px";
             }
 
-            let panelChanged = false;
-            if (this._isVertical) {
-                let previousHeight = this.height;
-                panelChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
+            panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
+            panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
 
+            if (panelHeightChanged) {
                 this._height.ignoreAdaptiveScaling = true;
-            } else {
-                let previousWidth = this.width;
-                panelChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
+            }
 
+            if (panelWidthChanged) {
                 this._width.ignoreAdaptiveScaling = true;
             }
 
-            if (panelChanged) {
+            this._doNotTrackManualChanges = false;
+
+            if (panelWidthChanged || panelHeightChanged) {
                 this._markAllAsDirty();
             }