var core = require('../core'),
InteractionData = require('./InteractionData');
// TODO: Obviously rewrite this...
var INTERACTION_FREQUENCY = 10;
var AUTO_PREVENT_DEFAULT = true;
/**
* The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
* if its interactive parameter is set to true
* This manager also supports multitouch.
*
* @class
* @namespace PIXI
* @param renderer {CanvasRenderer|WebGLRenderer} A reference to the current renderer
*/
function InteractionManager( renderer )
{
this.renderer = renderer;
/**
* The mouse data
*
* @member {InteractionData}
*/
this.mouse = new InteractionData();
/**
* An event data object to handle all the event tracking/dispatching
*
* @member {EventData}
*/
this.eventData = new core.utils.EventData();
this.eventData.data = this.mouse;
/**
* Tiny little interactiveData pool !
*
* @member {Array}
*/
this.interactiveDataPool = [];
/**
* The DOM element to bind to.
*
* @member {HTMLElement}
* @private
*/
this.interactionDOMElement = null;
/**
* Have events been attached to the dom element?
*
* @member {boolean}
* @private
*/
this.eventsAdded = false;
//this will make it so that you don't have to call bind all the time
/**
* @member {Function}
*/
this.onMouseUp = this.onMouseUp.bind(this);
this.processMouseUp = this.processMouseUp.bind( this );
/**
* @member {Function}
*/
this.onMouseDown = this.onMouseDown.bind(this);
this.processMouseDown = this.processMouseDown.bind( this );
/**
* @member {Function}
*/
this.onMouseMove = this.onMouseMove.bind( this );
this.processMouseMove = this.processMouseMove.bind( this );
/**
* @member {Function}
*/
this.onMouseOut = this.onMouseOut.bind(this);
this.processMouseOverOut = this.processMouseOverOut.bind( this );
/**
* @member {Function}
*/
this.onTouchStart = this.onTouchStart.bind(this);
this.processTouchStart = this.processTouchStart.bind(this);
/**
* @member {Function}
*/
this.onTouchEnd = this.onTouchEnd.bind(this);
this.processTouchEnd = this.processTouchEnd.bind(this);
/**
* @member {Function}
*/
this.onTouchMove = this.onTouchMove.bind(this);
this.processTouchMove = this.processTouchMove.bind(this);
/**
* @member {number}
*/
this.last = 0;
/**
* The css style of the cursor that is being used
* @member {string}
*/
this.currentCursorStyle = 'inherit';
/**
* Internal cached var
* @member {Point}
* @private
*/
this._tempPoint = new core.math.Point();
/**
* The current resolution
* @member {number}
*/
this.resolution = 1;
this.setTargetElement(this.renderer.view, this.renderer.resolution);
this.update();
}
InteractionManager.prototype.constructor = InteractionManager;
module.exports = InteractionManager;
/**
* Sets the DOM element which will receive mouse/touch events. This is useful for when you have
* other DOM elements on top of the renderers Canvas element. With this you'll be bale to deletegate
* another DOM element to receive those events.
*
* @param element {HTMLElement} the DOM element which will receive mouse and touch events.
* @param [resolution=1] {number} THe resolution of the new element (relative to the canvas).
* @private
*/
InteractionManager.prototype.setTargetElement = function (element, resolution)
{
this.removeEvents();
this.interactionDOMElement = element;
this.resolution = resolution || 1;
this.addEvents();
};
/**
* Registers all the DOM events
* @private
*/
InteractionManager.prototype.addEvents = function ()
{
if (!this.interactionDOMElement)
{
return;
}
if (window.navigator.msPointerEnabled)
{
this.interactionDOMElement.style['-ms-content-zooming'] = 'none';
this.interactionDOMElement.style['-ms-touch-action'] = 'none';
}
this.interactionDOMElement.addEventListener('mousemove', this.onMouseMove, true);
this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true);
this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true);
this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true);
this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true);
this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true);
window.addEventListener('mouseup', this.onMouseUp, true);
this.eventsAdded = true;
};
/**
* Removes all the DOM events that were previously registered
* @private
*/
InteractionManager.prototype.removeEvents = function ()
{
if (!this.interactionDOMElement)
{
return;
}
if (window.navigator.msPointerEnabled)
{
this.interactionDOMElement.style['-ms-content-zooming'] = '';
this.interactionDOMElement.style['-ms-touch-action'] = '';
}
this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true);
this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true);
this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true);
this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true);
this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true);
this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true);
this.interactionDOMElement = null;
window.removeEventListener('mouseup', this.onMouseUp, true);
this.eventsAdded = false;
};
/**
* updates the state of interactive objects
*
* @private
*/
InteractionManager.prototype.update = function ()
{
requestAnimationFrame(this.update.bind(this));
if( this.throttleUpdate() || !this.interactionDOMElement)
{
return;
}
// if the user move the mouse this check has already been dfone using the mouse move!
if(this.didMove)
{
this.didMove = false;
return;
}
this.cursor = 'inherit';
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered , this.processMouseOverOut.bind(this) , true );
if (this.currentCursorStyle !== this.cursor)
{
this.currentCursorStyle = this.cursor;
this.interactionDOMElement.style.cursor = this.cursor;
}
//TODO
};
/**
* Dispatches an event on the display object that was interacted with
* @param displayObject {Container|Sprite|TilingSprite} the display object in question
* @param eventString {string} the name of the event (e.g, mousedown)
* @param eventData {EventData} the event data object
* @private
*/
InteractionManager.prototype.dispatchEvent = function ( displayObject, eventString, eventData )
{
if(!eventData.stopped)
{
eventData.target = displayObject;
eventData.type = eventString;
displayObject.emit( eventString, eventData );
if( displayObject[eventString] )
{
displayObject[eventString]( eventData );
}
}
};
/**
* Ensures the interaction checks don't happen too often by delaying the update loop
* @private
*/
InteractionManager.prototype.throttleUpdate = function ()
{
// frequency of 30fps??
var now = Date.now();
var diff = now - this.last;
diff = (diff * INTERACTION_FREQUENCY ) / 1000;
if (diff < 1)
{
return true;
}
this.last = now;
return false;
};
/**
* Maps x and y coords from a DOM object and maps them correctly to the pixi view. The resulting value is stored in the point.
* This takes into account the fact that the DOM element could be scaled and positioned anywhere on the screen.
*
* @param {Point} point the point that the result will be stored in
* @param {number} x the x coord of the position to map
* @param {number} y the y coord of the position to map
*/
InteractionManager.prototype.mapPositionToPoint = function ( point, x, y )
{
var rect = this.interactionDOMElement.getBoundingClientRect();
point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution;
point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution;
};
/**
* This function is provides a neat way of crawling through the scene graph and running a specified function on all interactive objects it finds.
* It will also take care of hit testing the interactive objects and passes the hit across in the function.
*
* @param {Point} point the point that is tested for collision
* @param {Container|Sprite|TilingSprite} displayObject the displayObject that will be hit test (recurcsivly crawls its children)
* @param {function} func the function that will be called on each interactive object. The displayObject and hit will be passed to the function
* @param {boolean} hitTest this indicates if the objects inside should be hit test against the point
* @return {boolean} returns true if the displayObject hit the point
*/
InteractionManager.prototype.processInteractive = function (point, displayObject, func, hitTest, interactive )
{
if(!displayObject.visible)
{
return false;
}
var children = displayObject.children;
var hit = false;
// if the object is interactive we must hit test all its children..
interactive = interactive || displayObject.interactive;
if(displayObject.interactiveChildren)
{
for (var i = children.length-1; i >= 0; i--)
{
if(! hit && hitTest)
{
hit = this.processInteractive(point, children[i], func, true, interactive );
}
else
{
// now we know we can miss it all!
this.processInteractive(point, children[i], func, false, false );
}
}
}
if(interactive)
{
if(hitTest)
{
if(displayObject.hitArea)
{
// lets use the hit object first!
displayObject.worldTransform.applyInverse(point, this._tempPoint);
hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y );
}
else if(displayObject.hitTest)
{
hit = displayObject.hitTest(point);
}
}
if(displayObject.interactive)
{
func(displayObject, hit);
}
}
return hit;
};
/**
* Is called when the mouse button is pressed down on the renderer element
*
* @param event {Event} The DOM event of a mouse button being pressed down
* @private
*/
InteractionManager.prototype.onMouseDown = function (event)
{
this.mouse.originalEvent = event;
this.eventData.data = this.mouse;
this.eventData.stopped = false;
if (AUTO_PREVENT_DEFAULT)
{
this.mouse.originalEvent.preventDefault();
}
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true );
};
/**
* Processes the result of the mouse down check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the dispay object
* @private
*/
InteractionManager.prototype.processMouseDown = function ( displayObject, hit )
{
var e = this.mouse.originalEvent;
var isRightButton = e.button === 2 || e.which === 3;
if(hit)
{
displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true;
this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData );
}
};
/**
* Is called when the mouse button is released on the renderer element
*
* @param event {Event} The DOM event of a mouse button being released
* @private
*/
InteractionManager.prototype.onMouseUp = function (event)
{
this.mouse.originalEvent = event;
this.eventData.data = this.mouse;
this.eventData.stopped = false;
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true );
};
/**
* Processes the result of the mouse up check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processMouseUp = function ( displayObject, hit )
{
var e = this.mouse.originalEvent;
var isRightButton = e.button === 2 || e.which === 3;
var isDown = isRightButton ? '_isRightDown' : '_isLeftDown';
if(hit)
{
this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData );
if( displayObject[ isDown ] )
{
displayObject[ isDown ] = false;
this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData );
}
}
else
{
if( displayObject[ isDown ] )
{
displayObject[ isDown ] = false;
this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData );
}
}
};
/**
* Is called when the mouse moves across the renderer element
*
* @param event {Event} The DOM event of the mouse moving
* @private
*/
InteractionManager.prototype.onMouseMove = function (event)
{
this.mouse.originalEvent = event;
this.eventData.data = this.mouse;
this.eventData.stopped = false;
this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY);
this.didMove = true;
this.cursor = 'inherit';
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true );
if (this.currentCursorStyle !== this.cursor)
{
this.currentCursorStyle = this.cursor;
this.interactionDOMElement.style.cursor = this.cursor;
}
//TODO BUG for parents ineractive object (border order issue)
};
/**
* Processes the result of the mouse move check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processMouseMove = function ( displayObject, hit )
{
this.dispatchEvent( displayObject, 'mousemove', this.eventData);
this.processMouseOverOut(displayObject, hit);
};
/**
* Is called when the mouse is moved out of the renderer element
*
* @param event {Event} The DOM event of a mouse being moved out
* @private
*/
InteractionManager.prototype.onMouseOut = function (event)
{
this.mouse.originalEvent = event;
this.eventData.stopped = false;
this.interactionDOMElement.style.cursor = 'inherit';
// TODO optimize by not check EVERY TIME! maybe half as often? //
this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY );
this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false );
};
/**
* Processes the result of the mouse over/out check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processMouseOverOut = function ( displayObject, hit )
{
if(hit)
{
if(!displayObject._over)
{
displayObject._over = true;
this.dispatchEvent( displayObject, 'mouseover', this.eventData );
}
if (displayObject.buttonMode)
{
this.cursor = displayObject.defaultCursor;
}
}
else
{
if(displayObject._over)
{
displayObject._over = false;
this.dispatchEvent( displayObject, 'mouseout', this.eventData);
}
}
};
/**
* Is called when a touch is started on the renderer element
*
* @param event {Event} The DOM event of a touch starting on the renderer view
* @private
*/
InteractionManager.prototype.onTouchStart = function (event)
{
if (AUTO_PREVENT_DEFAULT)
{
event.preventDefault();
}
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
//TODO POOL
var touchData = this.getTouchData( touchEvent );
touchData.originalEvent = event;
this.eventData.data = touchData;
this.eventData.stopped = false;
this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true );
this.returnTouchData( touchData );
}
};
/**
* Processes the result of a touch check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processTouchStart = function ( displayObject, hit )
{
//console.log("hit" + hit)
if(hit)
{
displayObject._touchDown = true;
this.dispatchEvent( displayObject, 'touchstart', this.eventData );
}
};
/**
* [onTouchEnd description]
* @param {[type]} event [description]
*
*/
InteractionManager.prototype.onTouchEnd = function (event)
{
if (AUTO_PREVENT_DEFAULT)
{
event.preventDefault();
}
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.getTouchData( touchEvent );
touchData.originalEvent = event;
//TODO this should be passed along.. no set
this.eventData.data = touchData;
this.eventData.stopped = false;
this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true );
this.returnTouchData( touchData );
}
};
/**
* Processes the result of the end of a touch and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processTouchEnd = function ( displayObject, hit )
{
if(hit)
{
this.dispatchEvent( displayObject, 'touchend', this.eventData );
if( displayObject._touchDown )
{
displayObject._touchDown = false;
this.dispatchEvent( displayObject, 'tap', this.eventData );
}
}
else
{
if( displayObject._touchDown )
{
displayObject._touchDown = false;
this.dispatchEvent( displayObject, 'touchendoutside', this.eventData );
}
}
};
/**
* Is called when a touch is moved across the renderer element
*
* @param event {Event} The DOM event of a touch moving across the renderer view
* @private
*/
InteractionManager.prototype.onTouchMove = function (event)
{
if (AUTO_PREVENT_DEFAULT)
{
event.preventDefault();
}
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.getTouchData( touchEvent );
touchData.originalEvent = event;
this.eventData.data = touchData;
this.eventData.stopped = false;
this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, false );
this.returnTouchData( touchData );
}
};
/**
* Processes the result of a touch move check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processTouchMove = function ( displayObject, hit )
{
hit = hit;
this.dispatchEvent( displayObject, 'touchmove', this.eventData);
};
/**
* Grabs an interaction data object from the internal pool
*
* @param touchEvent {} The touch event we need to pair with a touchData object
*
* @private
*/
InteractionManager.prototype.getTouchData = function (touchEvent)
{
var touchData = this.interactiveDataPool.pop();
if(!touchData)
{
touchData = new InteractionData();
}
touchData.identifier = touchEvent.identifier;
this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY );
return touchData;
};
/**
* Returns an interaction data object to the internal pool
*
* @param touchEvent {InteractionData} The touch data object we want to return to the pool
*
* @private
*/
InteractionManager.prototype.returnTouchData = function ( touchData )
{
this.interactiveDataPool.push( touchData );
};
core.WebGLRenderer.registerPlugin('interaction', InteractionManager);
core.CanvasRenderer.registerPlugin('interaction', InteractionManager);
