pixi-viewport

pixi-viewport copied to clipboard

Using a pixi-viewport with DOM elements above that canvas I'm looking for a way to pass the wheel event from the DOM elements to the pixi-viewport's wheel-'plugin' so that the mousewheel works on the viewport instead of on the DOM elements.

I tried several things, but so far can't manage to get it to work. I have the eventlistener for the DOM elements' wheels, but how can we trigger the wheel() action on the pixi-viewport?

BTW Setting pointer-events on the DOM elements to none to make them pass the events directly to the viewport doesn't do the trick because we need the other pointer events, like clicks, to still work on these elements.

Try changing viewport#options.divWheel = DOM element when initializing the viewport.

Try changing viewport#options.divWheel = DOM element when initializing the viewport.

Unfortunately that doesn't help as we're talking about multiple DOM elements on top of the pixi canvas. The only thing I'm looking for really is how to simulate the action pixi-viewport takes when a wheel event is received. Isn't there a method we can call to simulate a wheel event?

@davidfig Just tried your suggestion by adding a wrapper around both the canvas and the DOM elements and using the divWheel option to capture the wheel event from that wrapper div.

However, setting the divWheel in the option doesn't seem to work.

When diving deeper I see the events reachting the wrapper div just fine; they're triggered when using the wheel on either the canvas or one of the DOM elements. So I would expect this to be triggering the wheel action on pixi-viewport too. But it doesn't do that. So it looks like the divWheel option is not working somehow.

Alright, I am in your code now and see that the event IS working on the wrapper div, IS sending the event to pixi-viewport, IS calling the handleWheel() event of the pixi-viewport, but it's breaking out of that function because the interactionDOMElement is not the same as the event.target. Meaning this will probably never execute the wheel action on the viewport when triggered by a DOM element over the viewport IMO: