Fixes #2248

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

@@ -129,8 +129,8 @@ declare module BABYLON.GUI {
         private _paddingRight;
         private _paddingTop;
         private _paddingBottom;
-        private _left;
-        private _top;
+        _left: ValueAndUnit;
+        _top: ValueAndUnit;
         private _scaleX;
         private _scaleY;
         private _rotation;
@@ -219,6 +219,7 @@ declare module BABYLON.GUI {
         protected _clip(context: CanvasRenderingContext2D): void;
         _measure(): void;
         protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         contains(x: number, y: number): boolean;
@@ -287,9 +288,10 @@ declare module BABYLON.GUI {
     class StackPanel extends Container {
         name: string;
         private _isVertical;
+        private _tempMeasureStore;
         isVertical: boolean;
         constructor(name?: string);
-        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
     }
 }
 

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

@@ -1036,6 +1036,8 @@ var BABYLON;
                 if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
                     this._isDirty = false;
                     this._currentMeasure.copyFrom(parentMeasure);
+                    // Let children take some pre-measurement actions
+                    this._preMeasure(parentMeasure, context);
                     this._measure();
                     this._computeAlignment(parentMeasure, context);
                     // Convert to int values
@@ -1161,6 +1163,9 @@ var BABYLON;
                 this._currentMeasure.left += x;
                 this._currentMeasure.top += y;
             };
+            Control.prototype._preMeasure = function (parentMeasure, context) {
+                // Do nothing
+            };
             Control.prototype._additionalProcessing = function (parentMeasure, context) {
                 // Do nothing
             };
@@ -1553,6 +1558,7 @@ var BABYLON;
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._isVertical = true;
+                _this._tempMeasureStore = GUI.Measure.Empty();
                 return _this;
             }
             Object.defineProperty(StackPanel.prototype, "isVertical", {
@@ -1569,32 +1575,50 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
-            StackPanel.prototype._additionalProcessing = function (parentMeasure, context) {
+            StackPanel.prototype._preMeasure = function (parentMeasure, context) {
                 var stack = 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";
+                        if (!child._top.ignoreAdaptiveScaling) {
+                            child._markAsDirty();
+                        }
+                        child._top.ignoreAdaptiveScaling = true;
                         stack += child._currentMeasure.height;
                         child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                     }
                     else {
                         child.left = stack + "px";
+                        if (!child._left.ignoreAdaptiveScaling) {
+                            child._markAsDirty();
+                        }
+                        child._left.ignoreAdaptiveScaling = true;
                         stack += child._currentMeasure.width;
                         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._height.ignoreAdaptiveScaling = true;
                 }
                 else {
+                    var previousWidth = this.width;
                     this.width = stack + "px";
+                    panelChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
                     this._width.ignoreAdaptiveScaling = true;
                 }
-                _super.prototype._additionalProcessing.call(this, parentMeasure, context);
+                if (panelChanged) {
+                    this._markAllAsDirty();
+                }
+                _super.prototype._preMeasure.call(this, parentMeasure, context);
             };
             return StackPanel;
         }(GUI.Container));

gui/src/controls/control.ts

@@ -23,8 +23,8 @@ module BABYLON.GUI {
         private _paddingRight = new ValueAndUnit(0);
         private _paddingTop = new ValueAndUnit(0);
         private _paddingBottom = new ValueAndUnit(0);        
-        private _left = new ValueAndUnit(0);
-        private _top = new ValueAndUnit(0);
+        public _left = new ValueAndUnit(0);
+        public _top = new ValueAndUnit(0);
         private _scaleX = 1.0;
         private _scaleY = 1.0;
         private _rotation = 0;
@@ -493,6 +493,9 @@ module BABYLON.GUI {
                 this._isDirty = false;
                 this._currentMeasure.copyFrom(parentMeasure);
 
+                // Let children take some pre-measurement actions
+                this._preMeasure(parentMeasure, context);
+
                 this._measure();
                 this._computeAlignment(parentMeasure, context);
 
@@ -637,6 +640,10 @@ module BABYLON.GUI {
             this._currentMeasure.top += y;            
         }
 
+        protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            // Do nothing
+        }        
+
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             // Do nothing
         }

gui/src/controls/stackPanel.ts

@@ -3,6 +3,7 @@
 module BABYLON.GUI {
     export class StackPanel extends Container {
         private _isVertical = true;
+        private _tempMeasureStore = Measure.Empty();
 
         public get isVertical(): boolean {
             return this._isVertical;
@@ -21,34 +22,55 @@ module BABYLON.GUI {
             super(name);
         }
 
-        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+        protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             var stack = 0;
             for (var child of this._children) {
+                this._tempMeasureStore.copyFrom(child._currentMeasure);
                 child._currentMeasure.copyFrom(parentMeasure);
                 child._measure();
                 
                 if (this._isVertical) {
                     child.top = stack + "px";
+                    if (!child._top.ignoreAdaptiveScaling) {
+                        child._markAsDirty();
+                    }
+                    child._top.ignoreAdaptiveScaling = true;
                     stack += child._currentMeasure.height;
                     child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                 } else {
                     child.left = stack + "px";
+                    if (!child._left.ignoreAdaptiveScaling) {
+                        child._markAsDirty();
+                    }                    
+                    child._left.ignoreAdaptiveScaling = true;
                     stack += child._currentMeasure.width;
                     child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-
                 }
+
+                child._currentMeasure.copyFrom(this._tempMeasureStore);
             }
 
+            let panelChanged = false;
             if (this._isVertical) {
+                let previousHeight = this.height;
                 this.height = stack + "px";
+                
+                panelChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
+
                 this._height.ignoreAdaptiveScaling = true;
             } else {
+                let previousWidth = this.width;
                 this.width = stack + "px";
+                panelChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
+
                 this._width.ignoreAdaptiveScaling = true;
             }
-            
 
-            super._additionalProcessing(parentMeasure, context);
+            if (panelChanged) {
+                this._markAllAsDirty();
+            }
+            
+            super._preMeasure(parentMeasure, context);
         }    
     }    
 }