Any known issues with hitArea dimensions on iPad orientation change?

[andreas_d]

Hi everyone,

 

This is a difficult one to describe.  Essentially the hitArea set on a Class that inherits from container acts erratically after an orientation change on the iPad.

 

Maybe I don't understand the relationship of the hitArea rectangle to the parent containers.  I have removed any scaling, the renderer.resize action etc.  I have the following code in a class that extends PIXI.Container

	this.stack = new RenderStack();  // renderStack extends PIXI.Container	this.addChild(this.stack);	// console.log(typeof w)  console.log(typeof h)  are both number and are passed in class instantiation	this.addChild( new PIXI.Graphics().beginFill().drawRect(0,0,w/2,h/2).endFill() );	this.stack.hitArea = new PIXI.Rectangle( 0, 0, w/2, h/2);	

on an iPad.  when changing orientation the hitArea and the PIXI.Graphics do not match.  hitArea is distorted

 

http://www.turnoffthe.tv/tests/pixi/test/

 

Am I missing something obvious? Any input is greatly appreciated

 

Thanks,

Andreas

 

[xerver]

https://github.com/pixijs/pixi.js/issues/1896

https://github.com/pixijs/pixi.js/issues/1848

 

Potentially similar issues. Interaction manager has problems on rotated objects.

[andreas_d]

fixed this with a dirty hack:

 

on orientationchange re applying hit area with dimensions *  ( previous screen dimensions / current screen dimensions )

 

see lines 317 and 318 of index.html

 

is my code off or is this a bug?

[andreas_d]

ah thanks xerver  posted before i read your response.  Is this worth flagging as a bug in some way ?

[xerver]

I think this just might have been your code. Looks like shapes/sizes are changing on orientation change which makes the hit area off.

[andreas_d]

nope all .height and .width properties are just props on vanilla objects (storing values).  

 

Only place that PIXI values are altered are in last 3 lines of adjustLayout()  in which .position.y is changed and hitAreas are altered with dirty hack  using .refreshHitArea()   : )

 

code's gotten unruly on this at the moment I need to refactor.  I've been scratching my head on this all day. It could be my code somewhere, but i systematically turned everything off until  .hitArea = PIXI.Rectangle() was  being distorted by an orientation change

[andreas_d]

i'll investigate some more

[xerver]

But your hit area is defined based on the screen size:

if(bool)scarfs[0].refreshHitArea(screenProps.tmpwidth / screenProps.width, screenProps.tmpheight/screenProps.height);if(bool)scarfs[1].refreshHitArea(screenProps.tmpwidth / screenProps.width, screenProps.tmpheight/screenProps.height);

So it definitely needs to be updated when you change orientation. Is the problem that the hitarea isn't updating properly, or that the shape is wrong?

[andreas_d]

those 2 lines of code where my *fix* .  Basically I was getting something like the following: 

Say I set the .hitArea = new PIXI.Rectangle(0, 0, 500, 200)  .

On orientation change it wouldn't update as expected and the hitArea would be something like this hitArea =  new PIXI.Rectangle(0, 0, 200, 500) 

 

I fixed it by multiplying the Rectangle dimensions by the ratio of pre-orientation-change-width / post-orientation-change-width  and height

[xerver]

Hmm, that seems like when the orientation changed that the canvas (and therefore contents were scaling strangely.

I recommend opening a GitHub issue with a running example that reproduces so we can look at it.

[andreas_d]

Hi xerver,

 

Your initial suspicion was correct.  It is a problem with the interaction manager.

 

hitArea working on iPad orientation change

http://www.turnoffthe.tv/tests/pixi/test/resize.html

 

hitArea distorted on iPad orientation change interaction delegated to different DOM element using:

renderer.plugins.interaction.setTargetElement(overlay) 

http://www.turnoffthe.tv/tests/pixi/test/resize-int.html

 

 

not entirely sure how to flag this. should I just create a new issue?  or add comments to the one's you pointed out ?

 

https://github.com/p....js/issues/1896

https://github.com/p....js/issues/1848

 

Andreas

[andreas_d]

It's not really even a bug but in this method 

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.interactionDOMElement.width and this.interactionDOMElement.height are assumed properties that are not actually dom element properties

[xerver]

 

It's not really even a bug but in this method 

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.interactionDOMElement.width and this.interactionDOMElement.height are assumed properties that are not actually dom element properties

 

Good catch, that method assumes the element is a canvas (which obviously isn't correct). Would you mind sticking that into an issue for me so I don't forget?

 

Thanks for looking into this!

[andreas_d]

posted something hope it makes sense

 

Thanks for all the work on maintaining and evolving PIXI