Added more info to GUI pointer observables

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

@@ -46,7 +46,7 @@ declare module BABYLON.GUI {
         _getGlobalViewport(scene: Scene): Viewport;
         private _checkUpdate(camera);
         private _render();
-        private _doPicking(x, y, type);
+        private _doPicking(x, y, type, buttonIndex);
         attach(): void;
         attachToMesh(mesh: AbstractMesh, supportPointerMove?: boolean): void;
         moveFocusToControl(control: IFocusableControl): void;
@@ -73,6 +73,10 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
+    class Vector2WithInfo extends Vector2 {
+        buttonIndex: number;
+        constructor(source: Vector2, buttonIndex?: number);
+    }
     class Matrix2D {
         m: Float32Array;
         constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
@@ -190,12 +194,12 @@ declare module BABYLON.GUI {
         * An event triggered when the pointer taps the control
         * @type {BABYLON.Observable}
         */
-        onPointerDownObservable: Observable<Vector2>;
+        onPointerDownObservable: Observable<Vector2WithInfo>;
         /**
         * An event triggered when pointer up
         * @type {BABYLON.Observable}
         */
-        onPointerUpObservable: Observable<Vector2>;
+        onPointerUpObservable: Observable<Vector2WithInfo>;
         /**
         * An event triggered when pointer enters the control
         * @type {BABYLON.Observable}
@@ -256,14 +260,14 @@ declare module BABYLON.GUI {
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         contains(x: number, y: number): boolean;
-        _processPicking(x: number, y: number, type: number): boolean;
+        _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean;
         protected _onPointerMove(coordinates: Vector2): void;
         protected _onPointerEnter(): boolean;
         _onPointerOut(): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
         forcePointerUp(): void;
-        _processObservables(type: number, x: number, y: number): boolean;
+        _processObservables(type: number, x: number, y: number, buttonIndex: number): boolean;
         private _prepareFont();
         dispose(): void;
         private static _HORIZONTAL_ALIGNMENT_LEFT;
@@ -314,7 +318,7 @@ declare module BABYLON.GUI {
         protected _localDraw(context: CanvasRenderingContext2D): void;
         _link(root: Container, host: AdvancedDynamicTexture): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        _processPicking(x: number, y: number, type: number): boolean;
+        _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean;
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         dispose(): void;
@@ -427,9 +431,9 @@ declare module BABYLON.GUI {
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private _pointerIsDown;
         private _updateValueFromPointer(x);
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
         protected _onPointerMove(coordinates: Vector2): void;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
     }
 }
 
@@ -449,7 +453,7 @@ declare module BABYLON.GUI {
         constructor(name?: string);
         protected _getTypeName(): string;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
     }
 }
 
@@ -470,7 +474,7 @@ declare module BABYLON.GUI {
         constructor(name?: string);
         protected _getTypeName(): string;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
     }
 }
 
@@ -550,11 +554,11 @@ declare module BABYLON.GUI {
         pointerUpAnimation: () => void;
         constructor(name?: string);
         protected _getTypeName(): string;
-        _processPicking(x: number, y: number, type: number): boolean;
+        _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean;
         protected _onPointerEnter(): boolean;
         _onPointerOut(): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
         static CreateImageButton(name: string, text: string, imageUrl: string): Button;
         static CreateImageOnlyButton(name: string, imageUrl: string): Button;
         static CreateSimpleButton(name: string, text: string): Button;
@@ -594,9 +598,9 @@ declare module BABYLON.GUI {
         private _updateValueFromPointer(x, y);
         private _isPointOnSquare(coordinates);
         private _isPointOnWheel(coordinates);
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
         protected _onPointerMove(coordinates: Vector2): void;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
     }
 }
 
@@ -638,8 +642,8 @@ declare module BABYLON.GUI {
         processKey(keyCode: number, key?: string): void;
         processKeyboard(evt: KeyboardEvent): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
         dispose(): void;
     }
 }

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

@@ -280,7 +280,7 @@ var BABYLON;
                 var measure = new GUI.Measure(0, 0, renderWidth, renderHeight);
                 this._rootContainer._draw(measure, context);
             };
-            AdvancedDynamicTexture.prototype._doPicking = function (x, y, type) {
+            AdvancedDynamicTexture.prototype._doPicking = function (x, y, type, buttonIndex) {
                 var scene = this.getScene();
                 var engine = scene.getEngine();
                 var textureSize = this.getSize();
@@ -289,10 +289,10 @@ var BABYLON;
                     y = y * (textureSize.height / engine.getRenderHeight());
                 }
                 if (this._capturingControl) {
-                    this._capturingControl._processObservables(type, x, y);
+                    this._capturingControl._processObservables(type, x, y, buttonIndex);
                     return;
                 }
-                if (!this._rootContainer._processPicking(x, y, type)) {
+                if (!this._rootContainer._processPicking(x, y, type, buttonIndex)) {
                     if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
                         if (this._lastControlOver) {
                             this._lastControlOver._onPointerOut();
@@ -317,7 +317,7 @@ var BABYLON;
                     var x = (scene.pointerX / engine.getHardwareScalingLevel() - viewport.x * engine.getRenderWidth()) / viewport.width;
                     var y = (scene.pointerY / engine.getHardwareScalingLevel() - viewport.y * engine.getRenderHeight()) / viewport.height;
                     _this._shouldBlockPointer = false;
-                    _this._doPicking(x, y, pi.type);
+                    _this._doPicking(x, y, pi.type, pi.event.button);
                     pi.skipOnPointerObservable = _this._shouldBlockPointer;
                 });
                 this._attachToOnPointerOut(scene);
@@ -335,7 +335,7 @@ var BABYLON;
                     if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
                         var uv = pi.pickInfo.getTextureCoordinates();
                         var size = _this.getSize();
-                        _this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type);
+                        _this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type, pi.event.button);
                     }
                     else if (pi.type === BABYLON.PointerEventTypes.POINTERUP) {
                         if (_this._lastControlDown) {
@@ -470,10 +470,22 @@ var BABYLON;
 //# sourceMappingURL=measure.js.map
 
 /// <reference path="../../dist/preview release/babylon.d.ts"/>
+
 var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
+        var Vector2WithInfo = (function (_super) {
+            __extends(Vector2WithInfo, _super);
+            function Vector2WithInfo(source, buttonIndex) {
+                if (buttonIndex === void 0) { buttonIndex = 0; }
+                var _this = _super.call(this, source.x, source.y) || this;
+                _this.buttonIndex = buttonIndex;
+                return _this;
+            }
+            return Vector2WithInfo;
+        }(BABYLON.Vector2));
+        GUI.Vector2WithInfo = Vector2WithInfo;
         var Matrix2D = (function () {
             function Matrix2D(m00, m01, m10, m11, m20, m21) {
                 this.m = new Float32Array(6);
@@ -1445,14 +1457,14 @@ var BABYLON;
                 }
                 return true;
             };
-            Control.prototype._processPicking = function (x, y, type) {
+            Control.prototype._processPicking = function (x, y, type, buttonIndex) {
                 if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
                     return false;
                 }
                 if (!this.contains(x, y)) {
                     return false;
                 }
-                this._processObservables(type, x, y);
+                this._processObservables(type, x, y, buttonIndex);
                 return true;
             };
             Control.prototype._onPointerMove = function (coordinates) {
@@ -1476,26 +1488,26 @@ var BABYLON;
                     this.onPointerOutObservable.notifyObservers(this);
                 }
             };
-            Control.prototype._onPointerDown = function (coordinates) {
+            Control.prototype._onPointerDown = function (coordinates, buttonIndex) {
                 if (this._downCount !== 0) {
                     return false;
                 }
                 this._downCount++;
                 if (this.onPointerDownObservable.hasObservers()) {
-                    this.onPointerDownObservable.notifyObservers(coordinates);
+                    this.onPointerDownObservable.notifyObservers(new GUI.Vector2WithInfo(coordinates, buttonIndex));
                 }
                 return true;
             };
-            Control.prototype._onPointerUp = function (coordinates) {
+            Control.prototype._onPointerUp = function (coordinates, buttonIndex) {
                 this._downCount = 0;
                 if (this.onPointerUpObservable.hasObservers()) {
-                    this.onPointerUpObservable.notifyObservers(coordinates);
+                    this.onPointerUpObservable.notifyObservers(new GUI.Vector2WithInfo(coordinates, buttonIndex));
                 }
             };
             Control.prototype.forcePointerUp = function () {
-                this._onPointerUp(BABYLON.Vector2.Zero());
+                this._onPointerUp(BABYLON.Vector2.Zero(), 0);
             };
-            Control.prototype._processObservables = function (type, x, y) {
+            Control.prototype._processObservables = function (type, x, y, buttonIndex) {
                 this._dummyVector2.copyFromFloats(x, y);
                 if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
                     this._onPointerMove(this._dummyVector2);
@@ -1510,14 +1522,14 @@ var BABYLON;
                     return true;
                 }
                 if (type === BABYLON.PointerEventTypes.POINTERDOWN) {
-                    this._onPointerDown(this._dummyVector2);
+                    this._onPointerDown(this._dummyVector2, buttonIndex);
                     this._host._lastControlDown = this;
                     this._host._lastPickedControl = this;
                     return true;
                 }
                 if (type === BABYLON.PointerEventTypes.POINTERUP) {
                     if (this._host._lastControlDown) {
-                        this._host._lastControlDown._onPointerUp(this._dummyVector2);
+                        this._host._lastControlDown._onPointerUp(this._dummyVector2, buttonIndex);
                     }
                     this._host._lastControlDown = null;
                     return true;
@@ -1796,7 +1808,7 @@ var BABYLON;
                 }
                 context.restore();
             };
-            Container.prototype._processPicking = function (x, y, type) {
+            Container.prototype._processPicking = function (x, y, type, buttonIndex) {
                 if (!this.isHitTestVisible || !this.isVisible || this.notRenderable) {
                     return false;
                 }
@@ -1806,11 +1818,11 @@ var BABYLON;
                 // Checking backwards to pick closest first
                 for (var index = this._children.length - 1; index >= 0; index--) {
                     var child = this._children[index];
-                    if (child._processPicking(x, y, type)) {
+                    if (child._processPicking(x, y, type, buttonIndex)) {
                         return true;
                     }
                 }
-                return this._processObservables(type, x, y);
+                return this._processObservables(type, x, y, buttonIndex);
             };
             Container.prototype._clipForChildren = function (context) {
                 // DO nothing
@@ -2526,8 +2538,8 @@ var BABYLON;
             Slider.prototype._updateValueFromPointer = function (x) {
                 this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
             };
-            Slider.prototype._onPointerDown = function (coordinates) {
-                if (!_super.prototype._onPointerDown.call(this, coordinates)) {
+            Slider.prototype._onPointerDown = function (coordinates, buttonIndex) {
+                if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
                     return false;
                 }
                 this._pointerIsDown = true;
@@ -2540,10 +2552,10 @@ var BABYLON;
                     this._updateValueFromPointer(coordinates.x);
                 }
             };
-            Slider.prototype._onPointerUp = function (coordinates) {
+            Slider.prototype._onPointerUp = function (coordinates, buttonIndex) {
                 this._pointerIsDown = false;
                 this._host._capturingControl = null;
-                _super.prototype._onPointerUp.call(this, coordinates);
+                _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
             };
             return Slider;
         }(GUI.Control));
@@ -2654,8 +2666,8 @@ var BABYLON;
                 context.restore();
             };
             // Events
-            Checkbox.prototype._onPointerDown = function (coordinates) {
-                if (!_super.prototype._onPointerDown.call(this, coordinates)) {
+            Checkbox.prototype._onPointerDown = function (coordinates, buttonIndex) {
+                if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
                     return false;
                 }
                 this.isChecked = !this.isChecked;
@@ -2791,8 +2803,8 @@ var BABYLON;
                 context.restore();
             };
             // Events
-            RadioButton.prototype._onPointerDown = function (coordinates) {
-                if (!_super.prototype._onPointerDown.call(this, coordinates)) {
+            RadioButton.prototype._onPointerDown = function (coordinates, buttonIndex) {
+                if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
                     return false;
                 }
                 this.isChecked = !this.isChecked;
@@ -3259,14 +3271,14 @@ var BABYLON;
                 return "Button";
             };
             // While being a container, the button behaves like a control.
-            Button.prototype._processPicking = function (x, y, type) {
+            Button.prototype._processPicking = function (x, y, type, buttonIndex) {
                 if (!this.isHitTestVisible || !this.isVisible || this.notRenderable) {
                     return false;
                 }
                 if (!_super.prototype.contains.call(this, x, y)) {
                     return false;
                 }
-                this._processObservables(type, x, y);
+                this._processObservables(type, x, y, buttonIndex);
                 return true;
             };
             Button.prototype._onPointerEnter = function () {
@@ -3284,8 +3296,8 @@ var BABYLON;
                 }
                 _super.prototype._onPointerOut.call(this);
             };
-            Button.prototype._onPointerDown = function (coordinates) {
-                if (!_super.prototype._onPointerDown.call(this, coordinates)) {
+            Button.prototype._onPointerDown = function (coordinates, buttonIndex) {
+                if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
                     return false;
                 }
                 if (this.pointerDownAnimation) {
@@ -3293,11 +3305,11 @@ var BABYLON;
                 }
                 return true;
             };
-            Button.prototype._onPointerUp = function (coordinates) {
+            Button.prototype._onPointerUp = function (coordinates, buttonIndex) {
                 if (this.pointerUpAnimation) {
                     this.pointerUpAnimation();
                 }
-                _super.prototype._onPointerUp.call(this, coordinates);
+                _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
             };
             // Statics
             Button.CreateImageButton = function (name, text, imageUrl) {
@@ -3654,8 +3666,8 @@ var BABYLON;
                 }
                 return false;
             };
-            ColorPicker.prototype._onPointerDown = function (coordinates) {
-                if (!_super.prototype._onPointerDown.call(this, coordinates)) {
+            ColorPicker.prototype._onPointerDown = function (coordinates, buttonIndex) {
+                if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
                     return false;
                 }
                 this._pointerIsDown = true;
@@ -3677,10 +3689,10 @@ var BABYLON;
                 }
                 _super.prototype._onPointerMove.call(this, coordinates);
             };
-            ColorPicker.prototype._onPointerUp = function (coordinates) {
+            ColorPicker.prototype._onPointerUp = function (coordinates, buttonIndex) {
                 this._pointerIsDown = false;
                 this._host._capturingControl = null;
-                _super.prototype._onPointerUp.call(this, coordinates);
+                _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
             };
             return ColorPicker;
         }(GUI.Control));
@@ -4036,15 +4048,15 @@ var BABYLON;
                 }
                 context.restore();
             };
-            InputText.prototype._onPointerDown = function (coordinates) {
-                if (!_super.prototype._onPointerDown.call(this, coordinates)) {
+            InputText.prototype._onPointerDown = function (coordinates, buttonIndex) {
+                if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
                     return false;
                 }
                 this._host.focusedControl = this;
                 return true;
             };
-            InputText.prototype._onPointerUp = function (coordinates) {
-                _super.prototype._onPointerUp.call(this, coordinates);
+            InputText.prototype._onPointerUp = function (coordinates, buttonIndex) {
+                _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
             };
             InputText.prototype.dispose = function () {
                 _super.prototype.dispose.call(this);

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

@@ -51,7 +51,7 @@ declare module BABYLON.GUI {
         _getGlobalViewport(scene: Scene): Viewport;
         private _checkUpdate(camera);
         private _render();
-        private _doPicking(x, y, type);
+        private _doPicking(x, y, type, buttonIndex);
         attach(): void;
         attachToMesh(mesh: AbstractMesh, supportPointerMove?: boolean): void;
         moveFocusToControl(control: IFocusableControl): void;
@@ -78,6 +78,10 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
+    class Vector2WithInfo extends Vector2 {
+        buttonIndex: number;
+        constructor(source: Vector2, buttonIndex?: number);
+    }
     class Matrix2D {
         m: Float32Array;
         constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
@@ -195,12 +199,12 @@ declare module BABYLON.GUI {
         * An event triggered when the pointer taps the control
         * @type {BABYLON.Observable}
         */
-        onPointerDownObservable: Observable<Vector2>;
+        onPointerDownObservable: Observable<Vector2WithInfo>;
         /**
         * An event triggered when pointer up
         * @type {BABYLON.Observable}
         */
-        onPointerUpObservable: Observable<Vector2>;
+        onPointerUpObservable: Observable<Vector2WithInfo>;
         /**
         * An event triggered when pointer enters the control
         * @type {BABYLON.Observable}
@@ -261,14 +265,14 @@ declare module BABYLON.GUI {
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         contains(x: number, y: number): boolean;
-        _processPicking(x: number, y: number, type: number): boolean;
+        _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean;
         protected _onPointerMove(coordinates: Vector2): void;
         protected _onPointerEnter(): boolean;
         _onPointerOut(): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
         forcePointerUp(): void;
-        _processObservables(type: number, x: number, y: number): boolean;
+        _processObservables(type: number, x: number, y: number, buttonIndex: number): boolean;
         private _prepareFont();
         dispose(): void;
         private static _HORIZONTAL_ALIGNMENT_LEFT;
@@ -319,7 +323,7 @@ declare module BABYLON.GUI {
         protected _localDraw(context: CanvasRenderingContext2D): void;
         _link(root: Container, host: AdvancedDynamicTexture): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        _processPicking(x: number, y: number, type: number): boolean;
+        _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean;
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         dispose(): void;
@@ -432,9 +436,9 @@ declare module BABYLON.GUI {
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private _pointerIsDown;
         private _updateValueFromPointer(x);
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
         protected _onPointerMove(coordinates: Vector2): void;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
     }
 }
 
@@ -454,7 +458,7 @@ declare module BABYLON.GUI {
         constructor(name?: string);
         protected _getTypeName(): string;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
     }
 }
 
@@ -475,7 +479,7 @@ declare module BABYLON.GUI {
         constructor(name?: string);
         protected _getTypeName(): string;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
     }
 }
 
@@ -555,11 +559,11 @@ declare module BABYLON.GUI {
         pointerUpAnimation: () => void;
         constructor(name?: string);
         protected _getTypeName(): string;
-        _processPicking(x: number, y: number, type: number): boolean;
+        _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean;
         protected _onPointerEnter(): boolean;
         _onPointerOut(): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
         static CreateImageButton(name: string, text: string, imageUrl: string): Button;
         static CreateImageOnlyButton(name: string, imageUrl: string): Button;
         static CreateSimpleButton(name: string, text: string): Button;
@@ -599,9 +603,9 @@ declare module BABYLON.GUI {
         private _updateValueFromPointer(x, y);
         private _isPointOnSquare(coordinates);
         private _isPointOnWheel(coordinates);
-        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
         protected _onPointerMove(coordinates: Vector2): void;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
     }
 }
 
@@ -643,8 +647,8 @@ declare module BABYLON.GUI {
         processKey(keyCode: number, key?: string): void;
         processKeyboard(evt: KeyboardEvent): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-        protected _onPointerDown(coordinates: Vector2): boolean;
-        protected _onPointerUp(coordinates: Vector2): void;
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean;
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void;
         dispose(): void;
     }
 }

gui/src/advancedDynamicTexture.ts

@@ -304,7 +304,7 @@ module BABYLON.GUI {
             this._rootContainer._draw(measure, context);
         }
 
-        private _doPicking(x: number, y: number, type: number): void {
+        private _doPicking(x: number, y: number, type: number, buttonIndex: number): void {
             var scene = this.getScene();
             var engine = scene.getEngine();
             var textureSize = this.getSize();
@@ -315,11 +315,11 @@ module BABYLON.GUI {
             }
             
             if (this._capturingControl) {
-                this._capturingControl._processObservables(type, x, y);
+                this._capturingControl._processObservables(type, x, y, buttonIndex);
                 return;
             }
 
-            if (!this._rootContainer._processPicking(x, y, type)) {
+            if (!this._rootContainer._processPicking(x, y, type, buttonIndex)) {
 
                 if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
                     if (this._lastControlOver) {
@@ -349,7 +349,7 @@ module BABYLON.GUI {
                 let y = (scene.pointerY / engine.getHardwareScalingLevel() - viewport.y * engine.getRenderHeight()) / viewport.height;
 
                 this._shouldBlockPointer = false;
-                this._doPicking(x, y, pi.type);
+                this._doPicking(x, y, pi.type, pi.event.button);
 
                 pi.skipOnPointerObservable = this._shouldBlockPointer;
             });
@@ -369,7 +369,7 @@ module BABYLON.GUI {
                 if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
                     var uv = pi.pickInfo.getTextureCoordinates();
                     var size = this.getSize();
-                    this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type);
+                    this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type, pi.event.button);
                 } else if (pi.type === BABYLON.PointerEventTypes.POINTERUP) {
                     if (this._lastControlDown) {
                         this._lastControlDown.forcePointerUp();

gui/src/controls/button.ts

@@ -37,7 +37,7 @@ module BABYLON.GUI {
         }
 
         // While being a container, the button behaves like a control.
-        public _processPicking(x: number, y: number, type: number): boolean {
+        public _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean {
             if (!this.isHitTestVisible || !this.isVisible || this.notRenderable) {
                 return false;
             }
@@ -46,7 +46,7 @@ module BABYLON.GUI {
                 return false;
             }
 
-            this._processObservables(type, x, y);
+            this._processObservables(type, x, y, buttonIndex);
 
             return true;
         }
@@ -71,8 +71,8 @@ module BABYLON.GUI {
             super._onPointerOut();
         }
 
-        protected _onPointerDown(coordinates: Vector2): boolean {
-            if (!super._onPointerDown(coordinates)) {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
+            if (!super._onPointerDown(coordinates, buttonIndex)) {
                 return false;
             }
 
@@ -84,12 +84,12 @@ module BABYLON.GUI {
             return true;
         }
 
-        protected _onPointerUp(coordinates: Vector2): void {
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void {
             if (this.pointerUpAnimation) {
                 this.pointerUpAnimation();
             }
 
-            super._onPointerUp(coordinates);
+            super._onPointerUp(coordinates, buttonIndex);
         }        
 
         // Statics

gui/src/controls/checkbox.ts

@@ -102,8 +102,8 @@ module BABYLON.GUI {
         }
 
         // Events
-        protected _onPointerDown(coordinates: Vector2): boolean {
-            if (!super._onPointerDown(coordinates)) {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
+            if (!super._onPointerDown(coordinates, buttonIndex)) {
                 return false;
             }
 

gui/src/controls/colorpicker.ts

@@ -362,8 +362,8 @@ module BABYLON.GUI {
             return false;
         }
 
-        protected _onPointerDown(coordinates: Vector2): boolean {
-            if (!super._onPointerDown(coordinates)) {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
+            if (!super._onPointerDown(coordinates, buttonIndex)) {
                 return false;
             }            
 
@@ -392,11 +392,11 @@ module BABYLON.GUI {
             super._onPointerMove(coordinates);
         }
 
-        protected _onPointerUp (coordinates: Vector2): void {
+        protected _onPointerUp (coordinates: Vector2, buttonIndex: number): void {
             this._pointerIsDown = false;
             
             this._host._capturingControl = null;
-            super._onPointerUp(coordinates);
+            super._onPointerUp(coordinates, buttonIndex);
         }     
     }    
 }

gui/src/controls/container.ts

@@ -149,7 +149,7 @@ module BABYLON.GUI {
             context.restore();
         }
 
-        public _processPicking(x: number, y: number, type: number): boolean {
+        public _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean {
             if (!this.isHitTestVisible || !this.isVisible || this.notRenderable) {
                 return false;
             }
@@ -161,12 +161,12 @@ module BABYLON.GUI {
             // Checking backwards to pick closest first
             for (var index = this._children.length - 1; index >= 0; index--) {
                 var child = this._children[index];
-                if (child._processPicking(x, y, type)) {
+                if (child._processPicking(x, y, type, buttonIndex)) {
                     return true;
                 }
             }
 
-            return this._processObservables(type, x, y);
+            return this._processObservables(type, x, y, buttonIndex);
         }
 
         protected _clipForChildren(context: CanvasRenderingContext2D): void {

gui/src/controls/control.ts

@@ -75,13 +75,13 @@ module BABYLON.GUI {
         * An event triggered when the pointer taps the control
         * @type {BABYLON.Observable}
         */
-        public onPointerDownObservable = new Observable<Vector2>();     
+        public onPointerDownObservable = new Observable<Vector2WithInfo>();     
 
         /**
         * An event triggered when pointer up
         * @type {BABYLON.Observable}
         */
-        public onPointerUpObservable = new Observable<Vector2>();     
+        public onPointerUpObservable = new Observable<Vector2WithInfo>();     
 
         /**
         * An event triggered when pointer enters the control
@@ -773,7 +773,7 @@ module BABYLON.GUI {
             return true;
         }
 
-        public _processPicking(x: number, y: number, type: number): boolean {
+        public _processPicking(x: number, y: number, type: number, buttonIndex: number): boolean {
             if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
                 return false;
             }
@@ -782,7 +782,7 @@ module BABYLON.GUI {
                 return false;
             }
 
-            this._processObservables(type, x, y);
+            this._processObservables(type, x, y, buttonIndex);
 
             return true;
         }
@@ -813,31 +813,31 @@ module BABYLON.GUI {
             }
         }
 
-        protected _onPointerDown(coordinates: Vector2): boolean {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
             if (this._downCount !== 0) {
                 return false;
             }
 
             this._downCount++;            
             if (this.onPointerDownObservable.hasObservers()) {
-                this.onPointerDownObservable.notifyObservers(coordinates);
+                this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex));
             }
 
             return true;
         }
 
-        protected _onPointerUp(coordinates: Vector2): void {
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void {
             this._downCount = 0;
             if (this.onPointerUpObservable.hasObservers()) {
-                this.onPointerUpObservable.notifyObservers(coordinates);
-            }
+                this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex));
+            }           
         }
 
         public forcePointerUp() {
-            this._onPointerUp(Vector2.Zero());
+            this._onPointerUp(Vector2.Zero(), 0);
         }
 
-        public _processObservables(type: number, x: number, y: number): boolean {
+        public _processObservables(type: number, x: number, y: number, buttonIndex: number): boolean {
             this._dummyVector2.copyFromFloats(x, y);
             if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
                 this._onPointerMove(this._dummyVector2);
@@ -856,7 +856,7 @@ module BABYLON.GUI {
             }
 
             if (type === BABYLON.PointerEventTypes.POINTERDOWN) {
-                this._onPointerDown(this._dummyVector2);
+                this._onPointerDown(this._dummyVector2, buttonIndex);
                 this._host._lastControlDown = this;
                 this._host._lastPickedControl = this;
                 return true;
@@ -864,7 +864,7 @@ module BABYLON.GUI {
 
             if (type === BABYLON.PointerEventTypes.POINTERUP) {
                 if (this._host._lastControlDown) {
-                    this._host._lastControlDown._onPointerUp(this._dummyVector2);
+                    this._host._lastControlDown._onPointerUp(this._dummyVector2, buttonIndex);
                 }
                 this._host._lastControlDown = null;
                 return true;

gui/src/controls/inputText.ts

@@ -363,8 +363,8 @@ module BABYLON.GUI {
             context.restore();
         }
 
-        protected _onPointerDown(coordinates: Vector2): boolean {
-            if (!super._onPointerDown(coordinates)) {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
+            if (!super._onPointerDown(coordinates, buttonIndex)) {
                 return false;
             }
 
@@ -373,8 +373,8 @@ module BABYLON.GUI {
             return true;
         }
 
-        protected _onPointerUp(coordinates: Vector2): void {
-            super._onPointerUp(coordinates);
+        protected _onPointerUp(coordinates: Vector2, buttonIndex: number): void {
+            super._onPointerUp(coordinates, buttonIndex);
         }  
 
         public dispose() {

gui/src/controls/radioButton.ts

@@ -131,8 +131,8 @@ module BABYLON.GUI {
         }
 
         // Events
-        protected _onPointerDown(coordinates: Vector2): boolean {
-            if (!super._onPointerDown(coordinates)) {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
+            if (!super._onPointerDown(coordinates, buttonIndex)) {
                 return false;
             }
             this.isChecked = !this.isChecked;

gui/src/controls/slider.ts

@@ -171,8 +171,8 @@ module BABYLON.GUI {
             this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
         }
 
-        protected _onPointerDown(coordinates: Vector2): boolean {
-            if (!super._onPointerDown(coordinates)) {
+        protected _onPointerDown(coordinates: Vector2, buttonIndex: number): boolean {
+            if (!super._onPointerDown(coordinates, buttonIndex)) {
                 return false;
             }
 
@@ -190,11 +190,11 @@ module BABYLON.GUI {
             }
         }
 
-        protected _onPointerUp (coordinates: Vector2): void {
+        protected _onPointerUp (coordinates: Vector2, buttonIndex: number): void {
             this._pointerIsDown = false;
             
             this._host._capturingControl = null;
-            super._onPointerUp(coordinates);
+            super._onPointerUp(coordinates, buttonIndex);
         }         
     }    
 }

gui/src/math2D.ts

@@ -1,6 +1,12 @@
 /// <reference path="../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
+    export class Vector2WithInfo extends Vector2 {        
+        public constructor(source: Vector2, public buttonIndex: number = 0) {
+            super(source.x, source.y);
+        }
+    }
+
     export class Matrix2D {
         public m = new Float32Array(6);