gui: add support for stackpanel orientation

gui/readme.md

@@ -13,4 +13,6 @@ The Babylon.js GUI library is an extension you can use to generate interactive u
 * Text wrapping
 
 ==> ideas
-* pick on mesh
+* background on containers
+* stack panel orientation
+* Doc

gui/src/controls/stackPanel.ts

@@ -2,22 +2,48 @@
 
 module BABYLON.GUI {
     export class StackPanel extends Container {
+        private _isVertical = true;
+
+        public get isVertical(): boolean {
+            return this._isVertical;
+        }
+
+        public set isVertical(value: boolean) {
+            if (this._isVertical === value) {
+                return;
+            }
+
+            this._isVertical = value;
+            this._markAsDirty();
+        }           
     
         constructor(public name: string) {
             super(name);
         }
 
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            var top = 0;
+            var stack = 0;
             for (var child of this._children) {
                 child._currentMeasure.copyFrom(parentMeasure);
                 child._measure();
-                child.top = top + "px";
-                top += child._currentMeasure.height;
-                child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+
+                if (this._isVertical) {
+                    child.top = stack + "px";
+                    stack += child._currentMeasure.height;
+                    child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+                } else {
+                    child.left = stack + "px";
+                    stack += child._currentMeasure.width;
+                    child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+
+                }
             }
 
-            this.height = top + "px";
+            if (this._isVertical) {
+                this.height = stack + "px";
+            } else {
+                this.width = stack + "px";
+            }
 
             super._additionalProcessing(parentMeasure, context);
         }    

src/babylon.scene.ts

@@ -1127,7 +1127,7 @@
                 var canvas = this._engine.getRenderingCanvas();
 
                 if (!this.pointerMovePredicate) {
-                    this.pointerMovePredicate = (mesh: AbstractMesh): boolean => mesh.isPickable && mesh.isVisible && mesh.isReady() && (this.constantlyUpdateMeshUnderPointer || (mesh.actionManager !== null && mesh.actionManager !== undefined));
+                    this.pointerMovePredicate = (mesh: AbstractMesh): boolean => mesh.isPickable && mesh.isVisible && mesh.isReady() && mesh.isEnabled() && (this.constantlyUpdateMeshUnderPointer || (mesh.actionManager !== null && mesh.actionManager !== undefined));
                 }
 
                 // Meshes
@@ -1204,7 +1204,7 @@
 
                 if (!this.pointerDownPredicate) {
                     this.pointerDownPredicate = (mesh: AbstractMesh): boolean => {
-                        return mesh.isPickable && mesh.isVisible && mesh.isReady();
+                        return mesh.isPickable && mesh.isVisible && mesh.isReady() && mesh.isEnabled();
                     };
                 }
 
@@ -1334,7 +1334,7 @@
 
                     if (!this.pointerUpPredicate) {
                         this.pointerUpPredicate = (mesh: AbstractMesh): boolean => {
-                            return mesh.isPickable && mesh.isVisible && mesh.isReady();
+                            return mesh.isPickable && mesh.isVisible && mesh.isReady() && mesh.isEnabled();
                         };
                     }