diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 0d9ba00..520ac5e 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,5 +1,6 @@ var core = require('../core'), - InteractionData = require('./InteractionData'); + InteractionData = require('./InteractionData'), + EventEmitter = require('eventemitter3'); // Mix interactiveTarget into core.DisplayObject.prototype Object.assign( @@ -13,6 +14,7 @@ * This manager also supports multitouch. * * @class + * @extends EventEmitter * @memberof PIXI.interaction * @param renderer {PIXI.CanvasRenderer|PIXI.WebGLRenderer} A reference to the current renderer * @param [options] {object} @@ -21,6 +23,8 @@ */ function InteractionManager(renderer, options) { + EventEmitter.call(this); + options = options || {}; /** @@ -132,6 +136,12 @@ this.onMouseOut = this.onMouseOut.bind(this); this.processMouseOverOut = this.processMouseOverOut.bind( this ); + /** + * @member {Function} + * @private + */ + this.onMouseOver = this.onMouseOver.bind(this); + /** * @member {Function} @@ -185,6 +195,7 @@ this.setTargetElement(this.renderer.view, this.renderer.resolution); } +InteractionManager.prototype = Object.create(EventEmitter.prototype); InteractionManager.prototype.constructor = InteractionManager; module.exports = InteractionManager; @@ -231,6 +242,7 @@ window.document.addEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); @@ -264,6 +276,7 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); @@ -517,6 +530,9 @@ } this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + + var isRightButton = event.button === 2 || event.which === 3; + this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); }; /** @@ -558,6 +574,9 @@ this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + + var isRightButton = event.button === 2 || event.which === 3; + this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); }; /** @@ -615,6 +634,8 @@ this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.emit('mousemove', this.eventData); + if (this.currentCursorStyle !== this.cursor) { this.currentCursorStyle = this.cursor; @@ -652,6 +673,7 @@ InteractionManager.prototype.onMouseOut = function (event) { this.mouse.originalEvent = event; + this.eventData.data = this.mouse; this.eventData.stopped = false; // Update internal mouse reference @@ -663,6 +685,8 @@ this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + + this.emit('mouseout', this.eventData); }; /** @@ -697,6 +721,21 @@ } }; +/** + * Is called when the mouse enters the renderer element area + * + * @param event {Event} The DOM event of the mouse moving into the renderer view + * @private + */ +InteractionManager.prototype.onMouseOver = function(event) +{ + this.mouse.originalEvent = event; + this.eventData.data = this.mouse; + this.eventData.stopped = false; + + this.emit('mouseover', this.eventData); +}; + /** * Is called when a touch is started on the renderer element @@ -727,6 +766,8 @@ this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.emit('touchstart', this.eventData); + this.returnTouchData( touchData ); } }; @@ -779,6 +820,8 @@ this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.emit('touchend', this.eventData); + this.returnTouchData( touchData ); } }; @@ -841,6 +884,8 @@ this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.emit('touchmove', this.eventData); + this.returnTouchData( touchData ); } }; @@ -910,6 +955,8 @@ InteractionManager.prototype.destroy = function () { this.removeEvents(); + this.removeAllListeners(); + this.renderer = null; this.mouse = null; @@ -933,6 +980,7 @@ this.onMouseOut = null; this.processMouseOverOut = null; + this.onMouseOver = null; this.onTouchStart = null; this.processTouchStart = null;