How to set mouse event offset?

I encountered this issue with pixi-scrollbox and yy-ui. Whenever the WebGL Canvas element which contains PIXI does not start from 0,0 x/y in the browser window, the mouse events will not correctly offset. For example if I try to scroll down with the mouse wheel, then mouse events will trigger if my mouse is over 0,0, which is not where the canvas is. Say the canvas is placed at 100,100 and is 300 in width and 300 in height. Well the mouse event will trigger at 0,0 where the canvas isn’t even at, but it will not trigger at 400,400 where the canvas is, because it will be offset by it’s browser window position.

It seems to understand where the PIXI.JS container/display object is relative to the start of the browser window x/y position, but NOT where the canvas actually is, resulting in all mouse events triggering only outside of the actual canvas if the canvas does not start perfectly at 0,0 in the browser.

Why is the mouse position calculated by where the mouse at relative to the browser window and not relative to where the canvas is placed / inside the canvas, and how can I fix that / correctly offset it?

[davidfig]

Try out v3.4.0. You need to set the PIXI.interaction in the Viewport options:

new Viewport({ interaction: renderer.plugins.interaction })

where renderer = your instantiated PIXI.WebGLRenderer or PIXI.CanvasRenderer

Let me know if this helps.

[davidfig]

Closing this. I’ll update the documentation to try to call out this option more clearly.