Merge pull request #2609 from projectSHAI/master

defined both width and height for stack panel

dist/gui/babylon.gui.d.ts

@@ -304,8 +304,12 @@ declare module BABYLON.GUI {
     class StackPanel extends Container {
         name: string;
         private _isVertical;
+        private _manualWidth;
+        private _manualHeight;
         private _tempMeasureStore;
         isVertical: boolean;
+        manualWidth: boolean;
+        manualHeight: boolean;
         constructor(name?: string);
         protected _getTypeName(): string;
         protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;

gui/src/controls/stackPanel.ts

@@ -3,12 +3,22 @@
 module BABYLON.GUI {
     export class StackPanel extends Container {
         private _isVertical = true;
+        private _manualWidth = false;
+        private _manualHeight = 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;
@@ -16,7 +26,25 @@ module BABYLON.GUI {
 
             this._isVertical = value;
             this._markAsDirty();
-        }           
+        }
+
+        public set manualWidth(value: boolean) {
+            if (this._manualWidth === value) {
+                return;
+            }
+
+            this._manualWidth = value;
+            this._markAsDirty();
+        }  
+
+        public set manualHeight(value: boolean) {
+            if (this._manualHeight === value) {
+                return;
+            }
+
+            this._manualHeight = value;
+            this._markAsDirty();
+        }        
     
         constructor(public name?: string) {
             super(name);
@@ -27,44 +55,58 @@ module BABYLON.GUI {
         }              
 
         protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            var stack = 0;
+            var stackWidth = 0;
+            var stackHeight = 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";
+                    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);
             }
+            // 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) {
+                // 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";
+            }
 
             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;