How to set mouse event offset? about pixi-viewport HOT 8 CLOSED

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.

from pixi-viewport.

Can you provide more info on your set up. I just demoed the following setup (slightly altering the demo code in docs/) and everything worked as I expected w/r/t the offsets:

let _renderer, _viewport
const WIDTH = 1000, HEIGHT = 1000

function renderer()
{
    _renderer = new PIXI.Application({ width: 300, height: 300 })
    document.body.appendChild(_renderer.view)
    _renderer.view.style.position = 'fixed'
    _renderer.view.style.width = '300px'
    _renderer.view.style.height = '300px'
    _renderer.view.style.left = '100px'
    _renderer.view.style.top = '100px'
}

function viewport()
{
    _viewport = _renderer.stage.addChild(new Viewport())
    _viewport
        .drag({ clampWheel: true })
        .wheel()
        .pinch()
        .decelerate()
        .bounce()
        .on('clicked', (e) => console.log('clicked (' + e.world.x + ',' + e.world.y + ')'))
    resize()
}

function resize()
{
    _renderer.renderer.resize(300, 300)
    _viewport.resize(300, 300, WIDTH, HEIGHT)
}

renderer()
viewport()

from pixi-viewport.

I hav the same effect on zooming.
Cause handleWheel use clientX and clientY without the offset. handleWheel think its outside the viewport.
My solution is overriting the handleWheel method, here with typescript

export class MyViewport extends Viewport {
  offsetX = 0;
  offsetY = 0;
  handleWheel(e: WheelEvent) {
    const newClientX = e.clientX - this.offsetX;
    const newClientY = e.clientY - this.offsetY;
    return super.handleWheel(<WheelEvent>{
      clientX: newClientX,
      clientY: newClientY,
      deltaX: e.deltaX,
      deltaY: e.deltaY,
      preventDefault: () => e.preventDefault()
    });
  }
}

from pixi-viewport.

handlewheel() is outside pixi.js since they don't support wheel events (for reasonably valid reasons). In your solution, where are you setting this.offsetX/Y?

from pixi-viewport.

before I set the offset in a central positon. But now I have an application where the canvas is inside an Scroller so this solution set offset onetime do not work any more.
My new solution is to inject the canvas Element (view) and get the offset from there:

  handleWheel(e: WheelEvent) {
    const clientRect = this.view.getBoundingClientRect();
    const offsetX = clientRect.left;
    const offsetY = clientRect.top;

    const newClientX = e.clientX - offsetX;
    const newClientY = e.clientY - offsetY;
...

from pixi-viewport.

Hey,
this is working well.
Thank you!

from pixi-viewport.

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

from pixi-viewport.

I had a similar issue, my library depended on pixi-viewport@5 as a peer, but had pixi-viewport@4 in the consuming project
(which caused the viewport to start without a reference to interactions as we now pass the events instead).

upgrading to pixi-viewport@5 in the consuming project fixed this of course

from pixi-viewport.