Get Renderer size from deep nested element

[Rodrigo]

Hi, I have this set up (simplified of course)

|-PIXI APP
|--- FIrst Main Container
|------ FIrst Child Container
|------ Second Child Container
|--- Second Main Container
|------ FIrst Child Container
|------ Second Child Container

I need to find the dimensions of the renderer (PIXI APP) in one of the child containers, for positioning purposes in a pointer event. Unfortunately this.parent.parent returns null.

One alternative I found is using getBounds()

function pointerDownHandler(e) {
    console.log( this.parent.getBounds() );
};

Using the left, right, top and bottom properties returned by the PIXI Rectangle gives me the dimensions of the renderer. The follow up question is: Is this a safe way to get the renderer dimensions or I might run into some calculations problems at some point?

Best,
Rodrigo.

[ivan.popelyshev]

well, you can embed it into stage...

app.stage.screen = app.renderer.screen;

it'll be updated automatically in case of resize. That way you'll have that size in parent's parent's parent's parent.

Also, usually app is global. Or there is something global that has such things as renderer, its size, e.t.c.

The cause why pixi doesnt store it in stage is trivial: there might be multiple renderers with different sizes. Renderer and Stage are not connected at all. Of course its good to have something that can fit the screen like in Flash or in Phaser, but, historiclaly, pixi didnt have that code, all devs just keep using their own stuff. 

For the architecture, the best way is to copy Application class like here: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop into your own class, and write a component to it that manage sizes of canvas and other stuff , and deals with pointer events adjustment too.

[Rodrigo]

Thanks but in the pointer event this.parent.parent returns null, so I can't reach the dimensions there.