diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..8f55c84 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -32,10 +32,10 @@ /** * an object that stores current touches (InteractionData) by id reference * - * @property touchs + * @property touches * @type Object */ - this.touchs = {}; + this.touches = {}; // helpers this.tempPoint = new PIXI.Point(); @@ -121,30 +121,23 @@ var length = children.length; // make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) + for (var i = length - 1; i >= 0; i--) { var child = children[i]; // push all interactive bits - if(child._interactive) + if (child._interactive) { iParent.interactiveChildren = true; //child.__iParent = iParent; this.interactiveItems.push(child); - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } + if (child.children.length > 0) this.collectInteractiveSprite(child, child); } else { child.__iParent = null; - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } + if (child.children.length > 0) this.collectInteractiveSprite(child, iParent); } } @@ -163,12 +156,7 @@ this.resolution = target.resolution; //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { - - this.setTargetDomElement( target.view ); - } - - + if (this.interactionDOMElement === null) this.setTargetDomElement (target.view); }; @@ -183,19 +171,15 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - this.removeEvents(); - - + if (window.navigator.msPointerEnabled) { // time to remove some of that zoom in ja.. domElement.style['-ms-content-zooming'] = 'none'; domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! } - + this.interactionDOMElement = domElement; domElement.addEventListener('mousemove', this.onMouseMove, true); @@ -206,14 +190,14 @@ domElement.addEventListener('touchstart', this.onTouchStart, true); domElement.addEventListener('touchend', this.onTouchEnd, true); domElement.addEventListener('touchmove', this.onTouchMove, true); - + window.addEventListener('mouseup', this.onMouseUp, true); }; PIXI.InteractionManager.prototype.removeEvents = function() { - if(!this.interactionDOMElement)return; + if (!this.interactionDOMElement) return; this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -240,13 +224,13 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - + if (!this.target) return; + // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * PIXI.INTERACTION_FREQUENCY ) / 1000; - if(diff < 1)return; + if (diff < 1) return; this.last = now; var i = 0; @@ -254,11 +238,8 @@ // ok.. so mouse events?? // yes for now :) // OPTIMISE - how often to check?? - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } - + if (this.dirty) this.rebuildInteractiveGraph(); + // loop through interactive objects! var length = this.interactiveItems.length; var cursor = 'inherit'; @@ -271,37 +252,37 @@ // OPTIMISATION - only calculate every time if the mousemove function exists.. // OK so.. does the object have any other interactive functions? // hit-test the clip! - // if(item.mouseover || item.mouseout || item.buttonMode) + // if (item.mouseover || item.mouseout || item.buttonMode) // { // ok so there are some functions so lets hit test it.. item.__hit = this.hitTest(item, this.mouse); this.mouse.target = item; // ok so deal with interactions.. // looks like there was a hit! - if(item.__hit && !over) + if (item.__hit && !over) { - if(item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) cursor = item.defaultCursor; - if(!item.interactiveChildren)over = true; + if (!item.interactiveChildren) over = true; - if(!item.__isOver) + if (!item.__isOver) { - if(item.mouseover)item.mouseover(this.mouse); + if (item.mouseover) item.mouseover (this.mouse); item.__isOver = true; } } else { - if(item.__isOver) + if (item.__isOver) { // roll out! - if(item.mouseout)item.mouseout(this.mouse); + if (item.mouseout) item.mouseout( this.mouse); item.__isOver = false; } } } - if( this.currentCursorStyle !== cursor ) + if (this.currentCursorStyle !== cursor) { this.currentCursorStyle = cursor; this.interactionDOMElement.style.cursor = cursor; @@ -320,7 +301,7 @@ this.interactiveItems = []; - if(this.stage.interactive)this.interactiveItems.push(this.stage); + if (this.stage.interactive) this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. this.collectInteractiveSprite(this.stage, this.stage); }; @@ -334,12 +315,10 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } - - this.mouse.originalEvent = event || window.event; //IE uses window.event + if (this.dirty) this.rebuildInteractiveGraph (); + + this.mouse.originalEvent = event; + // TODO optimize by not check EVERY TIME! maybe half as often? // var rect = this.interactionDOMElement.getBoundingClientRect(); @@ -351,12 +330,9 @@ for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } + + // Call the function! + if (item.mousemove) item.mousemove(this.mouse); } }; @@ -369,14 +345,11 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } + if (this.dirty) this.rebuildInteractiveGraph (); + + this.mouse.originalEvent = event; - this.mouse.originalEvent = event || window.event; //IE uses window.event - - if(PIXI.AUTO_PREVENT_DEFAULT)this.mouse.originalEvent.preventDefault(); + if (PIXI.AUTO_PREVENT_DEFAULT) this.mouse.originalEvent.preventDefault(); // loop through interaction tree... // hit test each item! -> @@ -397,19 +370,19 @@ { var item = this.interactiveItems[i]; - if(item[downFunction] || item[clickFunction]) + if (item[downFunction] || item[clickFunction]) { item[buttonIsDown] = true; item.__hit = this.hitTest(item, this.mouse); - if(item.__hit) + if (item.__hit) { //call the function! - if(item[downFunction])item[downFunction](this.mouse); + if (item[downFunction]) item[downFunction](this.mouse); item[isDown] = true; // just the one! - if(!item.interactiveChildren)break; + if (!item.interactiveChildren) break; } } } @@ -424,12 +397,9 @@ */ PIXI.InteractionManager.prototype.onMouseOut = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } - - this.mouse.originalEvent = event || window.event; //IE uses window.event + if (this.dirty) this.rebuildInteractiveGraph (); + + this.mouse.originalEvent = event; var length = this.interactiveItems.length; @@ -438,10 +408,10 @@ for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - if(item.__isOver) + if (item.__isOver) { this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); + if (item.mouseout) item.mouseout(this.mouse); item.__isOver = false; } } @@ -462,12 +432,9 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } - - this.mouse.originalEvent = event || window.event; //IE uses window.event + if (this.dirty) this.rebuildInteractiveGraph(); + + this.mouse.originalEvent = event; var length = this.interactiveItems.length; var up = false; @@ -484,29 +451,29 @@ { var item = this.interactiveItems[i]; - if(item[clickFunction] || item[upFunction] || item[upOutsideFunction]) + if (item[clickFunction] || item[upFunction] || item[upOutsideFunction]) { item.__hit = this.hitTest(item, this.mouse); - if(item.__hit && !up) + if (item.__hit && !up) { //call the function! - if(item[upFunction]) + if (item[upFunction]) { item[upFunction](this.mouse); } - if(item[isDown]) + if (item[isDown]) { - if(item[clickFunction])item[clickFunction](this.mouse); + if (item[clickFunction]) item[clickFunction](this.mouse); } - if(!item.interactiveChildren)up = true; + if (!item.interactiveChildren) up = true; } else { - if(item[isDown]) + if (item[isDown]) { - if(item[upOutsideFunction])item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); } } @@ -527,44 +494,41 @@ { var global = interactionData.global; - if( !item.worldVisible )return false; + if (!item.worldVisible) return false; // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, - a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + var isSprite = (item instanceof PIXI.Sprite); + var worldTransform = item.worldTransform; + var a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx; + var a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty; + var id = 1 / (a00 * a11 + a01 * -a10); + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; interactionData.target = item; //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) + if (item.hitArea && item.hitArea.contains) { + if (item.hitArea.contains(x, y)) { interactionData.target = item; - return true; } - return false; } // a sprite with no hitarea defined - else if(isSprite) + else if (isSprite) { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; + var width = item.texture.frame.width; + var height = item.texture.frame.height; + var x1 = -width * item.anchor.x; + var y1; - if(x > x1 && x < x1 + width) + if (x > x1 && x < x1 + width) { y1 = -height * item.anchor.y; - if(y > y1 && y < y1 + height) + if (y > y1 && y < y1 + height) { // set the target property if a hit is true! interactionData.target = item; @@ -579,14 +543,13 @@ { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); - if(hit) + if (hit) { // hmm.. TODO SET CORRECT TARGET? interactionData.target = item; return true; } } - return false; }; @@ -599,11 +562,8 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } - + if (this.dirty) this.rebuildInteractiveGraph (); + var rect = this.interactionDOMElement.getBoundingClientRect(); var changedTouches = event.changedTouches; var touchData; @@ -612,13 +572,13 @@ for (i = 0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; + touchData = this.touches[touchEvent.identifier]; + touchData.originalEvent = event; // update the touch position touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; - if(navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) { + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) { //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; @@ -627,7 +587,7 @@ for (var j = 0; j < this.interactiveItems.length; j++) { var item = this.interactiveItems[j]; - if(item.touchmove && item.__touchData && item.__touchData[touchEvent.identifier]) item.touchmove(touchData); + if (item.touchmove && item.__touchData && item.__touchData[touchEvent.identifier]) item.touchmove(touchData); } } }; @@ -641,14 +601,11 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } - + if (this.dirty) this.rebuildInteractiveGraph (); + var rect = this.interactionDOMElement.getBoundingClientRect(); - if(PIXI.AUTO_PREVENT_DEFAULT)event.preventDefault(); + if (PIXI.AUTO_PREVENT_DEFAULT) event.preventDefault(); var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) @@ -656,14 +613,14 @@ var touchEvent = changedTouches[i]; var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); + if (!touchData) touchData = new PIXI.InteractionData(); - touchData.originalEvent = event || window.event; + touchData.originalEvent = event; - this.touchs[touchEvent.identifier] = touchData; + this.touches[touchEvent.identifier] = touchData; touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; - if(navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) { + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) { //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; @@ -675,19 +632,19 @@ { var item = this.interactiveItems[j]; - if(item.touchstart || item.tap) + if (item.touchstart || item.tap) { item.__hit = this.hitTest(item, touchData); - if(item.__hit) + if (item.__hit) { //call the function! - if(item.touchstart)item.touchstart(touchData); + if (item.touchstart)item.touchstart(touchData); item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if(!item.interactiveChildren)break; + if (!item.interactiveChildren) break; } } } @@ -703,23 +660,19 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - if(this.dirty) - { - this.rebuildInteractiveGraph(); - } + if (this.dirty) this.rebuildInteractiveGraph (); - //this.mouse.originalEvent = event || window.event; //IE uses window.event var rect = this.interactionDOMElement.getBoundingClientRect(); var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; + var touchData = this.touches[touchEvent.identifier]; var up = false; touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; - if(navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) { + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) { //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; @@ -730,32 +683,25 @@ { var item = this.interactiveItems[j]; - if(item.__touchData && item.__touchData[touchEvent.identifier]) { + if (item.__touchData && item.__touchData[touchEvent.identifier]) { item.__hit = this.hitTest(item, item.__touchData[touchEvent.identifier]); // so this one WAS down... - touchData.originalEvent = event || window.event; + touchData.originalEvent = event; // hitTest?? - if(item.touchend || item.tap) + if (item.touchend || item.tap) { - if(item.__hit && !up) + if (item.__hit && !up) { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; + if (item.touchend) item.touchend(touchData); + if (item.__isDown && item.tap) item.tap(touchData); + if (!item.interactiveChildren) up = true; } else { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } + if (item.__isDown && item.touchendoutside) item.touchendoutside(touchData); } item.__isDown = false; @@ -766,6 +712,6 @@ } // remove the touch.. this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; + this.touches[touchEvent.identifier] = null; } };