"wheel" does not seem to work with the latest pixi.js + pixi-viewport versions

[anuragsr]

I tried to create a basic pixi.js application with these versions:

"pixi-viewport": "^4.38.0",
"pixi.js": "^7.1.2"

The viewport.drag(), .pinch() methods seem to work, but not .wheel()

Although, using viewport.on("wheel", e => console.log(e)) logs the FederatedWheelEvent in the console. But it has no effect on the viewport.

[amitpaz]

We have encountered the same issue

[benoitlahoz]

Same here.

[Taylor123]

updating pixi-viewport to 5.0.1 solved it for me

[lidog]

so am I

[Heilemann]

Same problem, except it does work, but only in the upper left portion of the canvas (almost but not quite quarter of it as it were). Like the OP wheel events fire on the entire canvas, but only zoom in that region.

Moreover the zoom point, where the canvas seems to think the cursor is, is offset relatively, such that it seems like the top left area maps to the entire canvas. So it receives input only there, but it maps the output to the entire canvas size if that makes sense.

I am on pixi-viewport 5.0.2.

[acmoles]

Same issue.

Curiously, multiplying the width/height of the viewport by devicepixelratio allows wheel events to work on the whole screen, but the mouse position calculation is wrong so it's a horrible experience.

I couldn't see what was wrong in the source, but replicating some of the logic in the viewport's on-wheel event works for me:

viewport
      .drag({ clampWheel: false })
      .on('wheel', (e) => {
        //console.log('custom wheel', e)
        const point = e.global
        const oldPoint: IPointData = viewport.toLocal(point)
        const step = -e.deltaY * 1 / 500
        const change = Math.pow(2, 1 * step)
        viewport.scale.x = viewport.scale.y *= change
        const newPoint = viewport.toGlobal(oldPoint as IPointData)
        viewport.x += point.x - newPoint.x
        viewport.y += point.y - newPoint.y
      })