Transfer pointer events from DOM div to pixi.

[Minimog]

I was working on a scrollview solution for pixi today and after trying few approaches like using `pointermove` event, `pixi-viewport` that yielded relatively poor performance I landed on a custom solution where I overlay scrollable div over pixi canvas and then on that divs `scroll` event I update my containers y and x values. This works insanely good in terms of performance and keeps some things like scroll bounce on ios, so I am happy with it.

The issue as you might guess is that this div covers canvas and I can't disable it's pointer-events, otherwise I loose ability to scroll. It does however have same positioning and size as pixi canvas beneath it, so I was wondering if I can take events from this div like pointerdown / pointerup etc... and somehow trigger them on pixi's canvas / stage element as well to sort of "pass pointer events through that div down to canvas".

[Minimog]

Closet I got to is adding click listener on a div, storing x and y of that click event and then calling `canvas.click()` where I can access those stored x/y values, however I'm not sure how to trigger pixijs events with this data.

[ivan.popelyshev]

if you aren't sure how to trigget pixijs events, read InteractionManager source. the instance is in "renderer.plugins.interaction"

 

[Minimog]

@ivan.popelyshev Neat! So after glancing at it I think one strategy is to run hitTest and emit appropriate events if there was a match? i.e. emit 'pointerdown'.

However this looks like what I need to be using https://pixijs.download/dev/docs/PIXI.InteractionManager.html#setTargetElement but I think this will only work if my div is covering whole canvas and not just part of it that is scrollable right?

 

[ivan.popelyshev]

i dont know  you have only one rect part scrollable?

[Minimog]

Yeh, essentially I have a container displayed in the scene that is scrollable i.e. achievement list in a game. It doesn't occupy full screen and mask is used to hide its overflowing content (invisible items are also culled). Children are in their own container and it is this one who's y transform is changing to replicate scroll. Overlaying div has same dimensions and position as that parent container.

I guess what I'm asking is how to hitTest only in that parent container, or setTargetElement only for that container, rather than full scene.