Fix CreateJS#555

Author: varyndev

src/easeljs/display/Stage.js

@@ -63,8 +63,8 @@ this.createjs = this.createjs||{};
 	 **/
 	function Stage(canvas) {
 		this.Container_constructor();
-	
-	
+
+
 	// public properties:
 		/**
 		 * Indicates whether the stage should automatically clear the canvas before each render. You can set this to <code>false</code>
@@ -81,7 +81,7 @@ this.createjs = this.createjs||{};
 		 * @default true
 		 **/
 		this.autoClear = true;
-	
+
 		/**
 		 * The canvas the stage will render to. Multiple stages can share a single canvas, but you must disable autoClear for all but the
 		 * first stage that will be ticked (or they will clear each other's render).
@@ -97,7 +97,7 @@ this.createjs = this.createjs||{};
 		 * @type HTMLCanvasElement | Object
 		 **/
 		this.canvas = (typeof canvas == "string") ? document.getElementById(canvas) : canvas;
-	
+
 		/**
 		 * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent
 		 * position over the canvas, and mouseInBounds will be set to false.
@@ -106,7 +106,7 @@ this.createjs = this.createjs||{};
 		 * @readonly
 		 **/
 		this.mouseX = 0;
-	
+
 		/**
 		 * The current mouse Y position on the canvas. If the mouse leaves the canvas, this will indicate the most recent
 		 * position over the canvas, and mouseInBounds will be set to false.
@@ -115,15 +115,15 @@ this.createjs = this.createjs||{};
 		 * @readonly
 		 **/
 		this.mouseY = 0;
-	
+
 		/**
 		 * Specifies the area of the stage to affect when calling update. This can be use to selectively
 		 * re-draw specific regions of the canvas. If null, the whole canvas area is drawn.
 		 * @property drawRect
 		 * @type {Rectangle}
 		 */
 		this.drawRect = null;
-	
+
 		/**
 		 * Indicates whether display objects should be rendered on whole pixels. You can set the
 		 * {{#crossLink "DisplayObject/snapToPixel"}}{{/crossLink}} property of
@@ -133,23 +133,23 @@ this.createjs = this.createjs||{};
 		 * @default false
 		 **/
 		this.snapToPixelEnabled = false;
-	
+
 		/**
 		 * Indicates whether the mouse is currently within the bounds of the canvas.
 		 * @property mouseInBounds
 		 * @type Boolean
 		 * @default false
 		 **/
 		this.mouseInBounds = false;
-	
+
 		/**
 		 * If true, tick callbacks will be called on all display objects on the stage prior to rendering to the canvas.
 		 * @property tickOnUpdate
 		 * @type Boolean
 		 * @default true
 		 **/
 		this.tickOnUpdate = true;
-	
+
 		/**
 		 * If true, mouse move events will continue to be called when the mouse leaves the target canvas. See
 		 * {{#crossLink "Stage/mouseInBounds:property"}}{{/crossLink}}, and {{#crossLink "MouseEvent"}}{{/crossLink}}
@@ -159,8 +159,8 @@ this.createjs = this.createjs||{};
 		 * @default false
 		 **/
 		this.mouseMoveOutside = false;
-		
-		
+
+
 		/**
 		 * Prevents selection of other elements in the html page if the user clicks and drags, or double clicks on the canvas.
 		 * This works by calling `preventDefault()` on any mousedown events (or touch equivalent) originating on the canvas.
@@ -169,15 +169,15 @@ this.createjs = this.createjs||{};
 		 * @default true
 		 **/
 		this.preventSelection = true;
-	
+
 		/**
 		 * The hitArea property is not supported for Stage.
 		 * @property hitArea
 		 * @type {DisplayObject}
 		 * @default null
 		 */
-		 
-		 
+
+
 	// private properties:
 		/**
 		 * Holds objects with data for each active pointer id. Each object has the following properties:
@@ -187,45 +187,45 @@ this.createjs = this.createjs||{};
 		 * @private
 		 */
 		this._pointerData = {};
-	
+
 		/**
 		 * Number of active pointers.
 		 * @property _pointerCount
 		 * @type {Object}
 		 * @private
 		 */
 		this._pointerCount = 0;
-	
+
 		/**
 		 * The ID of the primary pointer.
 		 * @property _primaryPointerID
 		 * @type {Object}
 		 * @private
 		 */
 		this._primaryPointerID = null;
-	
+
 		/**
 		 * @property _mouseOverIntervalID
 		 * @protected
 		 * @type Number
 		 **/
 		this._mouseOverIntervalID = null;
-		
+
 		/**
 		 * @property _nextStage
 		 * @protected
 		 * @type Stage
 		 **/
 		this._nextStage = null;
-		
+
 		/**
 		 * @property _prevStage
 		 * @protected
 		 * @type Stage
 		 **/
 		this._prevStage = null;
-		
-		
+
+
 	// initialize:
 		this.enableDOMEvents(true);
 	}
@@ -269,35 +269,35 @@ this.createjs = this.createjs||{};
 	 * @event mouseenter
 	 * @since 0.7.0
 	 */
-	 
+
 	/**
 	 * Dispatched each update immediately before the tick event is propagated through the display list.
 	 * You can call preventDefault on the event object to cancel propagating the tick event.
 	 * @event tickstart
 	 * @since 0.7.0
 	 */
-	 
+
 	/**
 	 * Dispatched each update immediately after the tick event is propagated through the display list. Does not fire if
 	 * tickOnUpdate is false. Precedes the "drawstart" event.
 	 * @event tickend
 	 * @since 0.7.0
 	 */
-	 
+
 	/**
 	 * Dispatched each update immediately before the canvas is cleared and the display list is drawn to it.
 	 * You can call preventDefault on the event object to cancel the draw.
 	 * @event drawstart
 	 * @since 0.7.0
 	 */
-	 
+
 	/**
 	 * Dispatched each update immediately after the display list is drawn to the canvas and the canvas context is restored.
 	 * @event drawend
 	 * @since 0.7.0
 	 */
 
-	 
+
 // getter / setters:
 	/**
 	 * Specifies a target stage that will have mouse / touch interactions relayed to it after this stage handles them.
@@ -307,7 +307,7 @@ this.createjs = this.createjs||{};
 	 *      topStage.nextStage = bottomStage;
 	 *
 	 * To disable relaying, set nextStage to null.
-	 * 
+	 *
 	 * MouseOver, MouseOut, RollOver, and RollOut interactions are also passed through using the mouse over settings
 	 * of the top-most stage, but are only processed if the target stage has mouse over interactions enabled.
 	 * Considerations when using roll over in relay targets:<OL>
@@ -320,12 +320,12 @@ this.createjs = this.createjs||{};
 	 * 	topStage.nextStage = targetStage;
 	 * 	topStage.enableMouseOver(10);
 	 * 	targetStage.enableMouseOver(30);
-	 * 
+	 *
 	 * If the target stage's canvas is completely covered by this stage's canvas, you may also want to disable its
 	 * DOM events using:
-	 * 
+	 *
 	 *	targetStage.enableDOMEvents(false);
-	 * 
+	 *
 	 * @property nextStage
 	 * @type {Stage}
 	 **/
@@ -337,7 +337,7 @@ this.createjs = this.createjs||{};
 		if (value) { value._prevStage = this; }
 		this._nextStage = value;
 	};
-	
+
 	try {
 		Object.defineProperties(p, {
 			nextStage: { get: p._get_nextStage, set: p._set_nextStage }
@@ -409,18 +409,18 @@ this.createjs = this.createjs||{};
 	 * 	function handleTick(evtObj) {
 	 * 		// clone the event object from Ticker, and add some custom data to it:
 	 * 		var evt = evtObj.clone().set({greeting:"hello", name:"world"});
-	 * 		
+	 *
 	 * 		// pass it to stage.update():
 	 * 		myStage.update(evt); // subsequently calls tick() with the same param
 	 * 	}
-	 * 	
+	 *
 	 * 	// ...
 	 * 	myDisplayObject.on("tick", handleDisplayObjectTick);
 	 * 	function handleDisplayObjectTick(evt) {
 	 * 		console.log(evt.delta); // the delta property from the Ticker tick event object
 	 * 		console.log(evt.greeting, evt.name); // custom data: "hello world"
 	 * 	}
-	 * 
+	 *
 	 * @method tick
 	 * @param {Object} [props] An object with properties that should be copied to the event object. Should usually be a Ticker event object, or similar object with a delta property.
 	 **/
@@ -482,7 +482,7 @@ this.createjs = this.createjs||{};
 			data = ctx.getImageData(0, 0, w, h);
 			var compositeOperation = ctx.globalCompositeOperation;
 			ctx.globalCompositeOperation = "destination-over";
-			
+
 			ctx.fillStyle = backgroundColor;
 			ctx.fillRect(0, 0, w, h);
 		}
@@ -632,8 +632,7 @@ this.createjs = this.createjs||{};
 	 * @param {MouseEvent} e
 	 **/
 	p._handleMouseMove = function(e) {
-		if(!e){ e = window.event; }
-		this._handlePointerMove(-1, e, e.pageX, e.pageY);
+		this._handlePointerMove(-(e.button + 1), e, e.pageX, e.pageY);
 	};
 
 	/**
@@ -656,11 +655,11 @@ this.createjs = this.createjs||{};
 			if (id === -1 && o.inBounds == !inBounds) {
 				this._dispatchMouseEvent(this, (inBounds ? "mouseleave" : "mouseenter"), false, id, o, e);
 			}
-			
+
 			this._dispatchMouseEvent(this, "stagemousemove", false, id, o, e);
 			this._dispatchMouseEvent(o.target, "pressmove", true, id, o, e);
 		}
-		
+
 		nextStage&&nextStage._handlePointerMove(id, e, pageX, pageY, null);
 	};
 
@@ -707,7 +706,7 @@ this.createjs = this.createjs||{};
 	 * @param {MouseEvent} e
 	 **/
 	p._handleMouseUp = function(e) {
-		this._handlePointerUp(-1, e, false);
+		this._handlePointerUp(-(e.button + 1), e, false);
 	};
 
 	/**
@@ -721,20 +720,20 @@ this.createjs = this.createjs||{};
 	p._handlePointerUp = function(id, e, clear, owner) {
 		var nextStage = this._nextStage, o = this._getPointerData(id);
 		if (this._prevStage && owner === undefined) { return; } // redundant listener.
-		
+
 		var target=null, oTarget = o.target;
 		if (!owner && (oTarget || nextStage)) { target = this._getObjectsUnderPoint(o.x, o.y, null, true); }
-		
+
 		if (o.down) { this._dispatchMouseEvent(this, "stagemouseup", false, id, o, e, target); o.down = false; }
-		
+
 		if (target == oTarget) { this._dispatchMouseEvent(oTarget, "click", true, id, o, e); }
 		this._dispatchMouseEvent(oTarget, "pressup", true, id, o, e);
-		
+
 		if (clear) {
 			if (id==this._primaryPointerID) { this._primaryPointerID = null; }
 			delete(this._pointerData[id]);
 		} else { o.target = null; }
-		
+
 		nextStage&&nextStage._handlePointerUp(id, e, clear, owner || target && this);
 	};
 
@@ -744,7 +743,7 @@ this.createjs = this.createjs||{};
 	 * @param {MouseEvent} e
 	 **/
 	p._handleMouseDown = function(e) {
-		this._handlePointerDown(-1, e, e.pageX, e.pageY);
+		this._handlePointerDown(-(e.button + 1), e, e.pageX, e.pageY);
 	};
 
 	/**
@@ -759,14 +758,14 @@ this.createjs = this.createjs||{};
 	p._handlePointerDown = function(id, e, pageX, pageY, owner) {
 		if (this.preventSelection) { e.preventDefault(); }
 		if (this._primaryPointerID == null || id === -1) { this._primaryPointerID = id; } // mouse always takes over.
-		
+
 		if (pageY != null) { this._updatePointerPosition(id, e, pageX, pageY); }
 		var target = null, nextStage = this._nextStage, o = this._getPointerData(id);
 		if (!owner) { target = o.target = this._getObjectsUnderPoint(o.x, o.y, null, true); }
 
 		if (o.inBounds) { this._dispatchMouseEvent(this, "stagemousedown", false, id, o, e, target); o.down = true; }
 		this._dispatchMouseEvent(target, "mousedown", true, id, o, e);
-		
+
 		nextStage&&nextStage._handlePointerDown(id, e, pageX, pageY, owner || target && this);
 	};
 
@@ -779,7 +778,7 @@ this.createjs = this.createjs||{};
 	 **/
 	p._testMouseOver = function(clear, owner, eventTarget) {
 		if (this._prevStage && owner === undefined) { return; } // redundant listener.
-		
+
 		var nextStage = this._nextStage;
 		if (!this._mouseOverIntervalID) {
 			// not enabled for mouseover, but should still relay the event.
@@ -794,7 +793,7 @@ this.createjs = this.createjs||{};
 			var e = o.posEvtObj;
 			var isEventTarget = eventTarget || e&&(e.target == this.canvas);
 			var target=null, common = -1, cursor="", t, i, l;
-		
+
 			if (!owner && (clear || this.mouseInBounds && isEventTarget)) {
 				target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, true);
 				this._mouseOverX = this.mouseX;
@@ -838,7 +837,7 @@ this.createjs = this.createjs||{};
 				this._dispatchMouseEvent(target, "mouseover", true, -1, o, e, oldTarget);
 			}
 		}
-		
+
 		nextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);
 	};