diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index e393471..381e799 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -64,11 +64,20 @@ * The area the filter is applied to. This is used as more of an optimisation * rather than figuring out the dimensions of the displayObject each frame you can set this rectangle * + * Also works as an interaction mask + * * @member {PIXI.Rectangle} */ this.filterArea = null; /** + * Interaction shape. Children will be hit first, then this shape will be checked. + * + * @member {PIXI.Rectangle|PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.RoundedRectangle} + */ + this.hitArea = null; + + /** * The original, cached bounds of the object * * @member {PIXI.Rectangle} diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index e393471..381e799 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -64,11 +64,20 @@ * The area the filter is applied to. This is used as more of an optimisation * rather than figuring out the dimensions of the displayObject each frame you can set this rectangle * + * Also works as an interaction mask + * * @member {PIXI.Rectangle} */ this.filterArea = null; /** + * Interaction shape. Children will be hit first, then this shape will be checked. + * + * @member {PIXI.Rectangle|PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.RoundedRectangle} + */ + this.hitArea = null; + + /** * The original, cached bounds of the object * * @member {PIXI.Rectangle} diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 309ba24..0677d7d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -91,7 +91,7 @@ * @private */ this.moveWhenInside = false; - + /** * Have events been attached to the dom element? * @@ -152,6 +152,13 @@ this.last = 0; /** + * Every update cursor will be reset to this value, if some element wont override it in its hitTest + * @member {string} + * @default "inherit" + */ + this.defaultCursorStyle = "inherit"; + + /** * The css style of the cursor that is being used * @member {string} */ @@ -163,7 +170,7 @@ * @private */ this._tempPoint = new core.Point(); - + /** * The current resolution @@ -295,7 +302,7 @@ return; } - this.cursor = 'inherit'; + this.cursor = this.defaultCursorStyle; this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); @@ -365,21 +372,21 @@ } // Took a little while to rework this function correctly! But now it is done and nice and optimised. ^_^ - // + // // This function will now loop through all objects and then only hit test the objects it HAS to, not all of them. MUCH faster.. // An object will be hit test if the following is true: - // + // // 1: It is interactive. // 2: It belongs to a parent that is interactive AND one of the parents children have not already been hit. - // + // // As another little optimisation once an interactive object has been hit we can carry on through the scenegraph, but we know that there will be no more hits! So we can avoid extra hit tests // A final optimisation is that an object is not hit test directly if a child has already been hit. - + var hit = false, interactiveParent = interactive = displayObject.interactive || interactive; - + // if the displayobject has a hitArea, then it does not need to hitTest children. if(displayObject.hitArea) @@ -388,20 +395,29 @@ } // it has a mask! Then lets hit test that before continuing.. - if(displayObject._mask) + if(hitTest && displayObject._mask) { if(!displayObject._mask.containsPoint(point)) { - return false; + hitTest = false; } } - // ** FREE TIP **! If an object is not interacttive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. + // it has a filterArea! Same as mask but easier, its a rectangle + if(hitTest && displayObject.filterArea) + { + if(!displayObject.filterArea.containsPoint(point)) + { + hitTest = false; + } + } + + // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) - { + { var children = displayObject.children; - + for (var i = children.length-1; i >= 0; i--) { @@ -421,8 +437,8 @@ // we no longer need to hit test any more objects in this container as we we now know the parent has been hit interactiveParent = false; - - // If the child is interactive , that means that the object hit was actually interactive and not just the child of an interactive object. + + // If the child is interactive , that means that the object hit was actually interactive and not just the child of an interactive object. // This means we no longer need to hit test anything else. We still need to run through all objects, but we don't need to perform any hit tests. // if(child.interactive) //{ @@ -430,12 +446,12 @@ //} // we can break now as we have hit an object. - + } } } - + // no point running this if the item is not interactive or does not have an interactive parent. if(interactive) @@ -443,7 +459,7 @@ // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! if(hitTest && !hit) - { + { if(displayObject.hitArea) { @@ -460,12 +476,12 @@ if(displayObject.interactive) { - func(displayObject, hit); + func(displayObject, hit); } } return hit; - + }; @@ -502,7 +518,7 @@ InteractionManager.prototype.processMouseDown = function ( displayObject, hit ) { var e = this.mouse.originalEvent; - + var isRightButton = e.button === 2 || e.which === 3; if(hit) @@ -584,7 +600,7 @@ this.didMove = true; - this.cursor = 'inherit'; + this.cursor = this.defaultCursorStyle; this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); @@ -607,7 +623,7 @@ InteractionManager.prototype.processMouseMove = function ( displayObject, hit ) { this.processMouseOverOut(displayObject, hit); - + // only display on mouse over if(!this.moveWhenInside || hit) { @@ -630,7 +646,7 @@ // Update internal mouse reference this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); - this.interactionDOMElement.style.cursor = 'inherit'; + this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY );