jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #321 from Jam3/changeInteractionManagerDOM

Browse source 
Change IntercationManager's DOM Element
This commit is contained in:
Chad Engler 2013-09-10 13:39:53 -07:00
commit 277af3b0de
2 changed files with 84 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/pixi/InteractionManager.js
View file

@ -50,6 +50,17 @@ PIXI.InteractionManager = function(stage)
this.pool = [];
this.interactiveItems = [];
this.interactionDOMElement = null;
//this will make it so that you dont have to call bind all the time
this.onMouseMove = this.onMouseMove.bind( this );
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.last = 0;
@ -111,27 +122,68 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
*/
PIXI.InteractionManager.prototype.setTarget = function(target)
{
this.target = target;
//check if the dom element has been set. If it has don't do anything
if( this.interactionDOMElement === null ) {
this.setTargetDomElement( target.view );
}
document.body.addEventListener('mouseup', this.onMouseUp, true);
}
/**
* Sets the dom element which will receive mouse/touch events. This is useful for when you have other DOM
* elements ontop of the renderers Canvas element. With this you'll be able to delegate another dom element
* to receive those events
*
* @method setTargetDomElement
* @param domElement {DOMElement} the dom element which will receive mouse and touch events
* @private
*/
PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
{
//remove previouse listeners
if( this.interactionDOMElement !== null )
{
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);
// aint no multi touch just yet!
this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true);
this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true);
this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true);
}
if (window.navigator.msPointerEnabled)
{
// time to remove some of that zoom in ja..
target.view.style["-ms-content-zooming"] = "none";
target.view.style["-ms-touch-action"] = "none"
domElement.style['-ms-content-zooming'] = 'none';
domElement.style['-ms-touch-action'] = 'none';
// DO some window specific touch!
}
this.target = target;
target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true);
target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true);
document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true);
target.view.addEventListener('mouseout', this.onMouseOut.bind(this), true);
// aint no multi touch just yet!
target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true);
target.view.addEventListener("touchend", this.onTouchEnd.bind(this), true);
target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true);
this.interactionDOMElement = domElement;
domElement.addEventListener('mousemove', this.onMouseMove, true);
domElement.addEventListener('mousedown', this.onMouseDown, true);
domElement.addEventListener('mouseout', this.onMouseOut, true);
// aint no multi touch just yet!
domElement.addEventListener('touchstart', this.onTouchStart, true);
domElement.addEventListener('touchend', this.onTouchEnd, true);
domElement.addEventListener('touchmove', this.onTouchMove, true);
}
/**
* updates the state of interactive objects
*
@ -173,7 +225,7 @@ PIXI.InteractionManager.prototype.update = function()
// loop through interactive objects!
var length = this.interactiveItems.length;
this.target.view.style.cursor = "default";
this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++)
{
@ -196,7 +248,7 @@ PIXI.InteractionManager.prototype.update = function()
// loks like there was a hit!
if(item.__hit)
{
if(item.buttonMode)this.target.view.style.cursor = "pointer";
if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer";
if(!item.__isOver)
{
@ -231,7 +283,7 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
{
this.mouse.originalEvent = event || window.event; //IE uses window.event
// TODO optimize by not check EVERY TIME! maybe half as often? //
var rect = this.target.view.getBoundingClientRect();
var rect = this.interactionDOMElement.getBoundingClientRect();
this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width);
this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height);
@ -302,7 +354,7 @@ PIXI.InteractionManager.prototype.onMouseOut = function(event)
{
var length = this.interactiveItems.length;
this.target.view.style.cursor = "default";
this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++)
{
@ -451,7 +503,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
*/
PIXI.InteractionManager.prototype.onTouchMove = function(event)
{
var rect = this.target.view.getBoundingClientRect();
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
@ -482,7 +534,7 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
*/
PIXI.InteractionManager.prototype.onTouchStart = function(event)
{
var rect = this.target.view.getBoundingClientRect();
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
@ -532,7 +584,7 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{
//this.mouse.originalEvent = event || window.event; //IE uses window.event
var rect = this.target.view.getBoundingClientRect();
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)

12
src/pixi/display/Stage.js
View file

@ -68,6 +68,18 @@ PIXI.Stage = function(backgroundColor, interactive)
PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
PIXI.Stage.prototype.constructor = PIXI.Stage;
/**
* Sets another DOM element which can receive mouse/touch interactions instead of the default Canvas element.
* This is useful for when you have other DOM elements ontop of the Canvas element.
*
* @method setInteractionDelegate
* @param domElement {DOMElement} This new domElement which will receive mouse/touch events
*/
PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
{
this.interactionManager.setTargetDomElement( domElement );
}
/*
* Updates the object transform for rendering
*