Panning with wheel (Touchpad use cases)

[scaryguy]

Hi, thanks for this great library!

In the most of modern design/graphic programs, there's a common behavior which is very handy, especially when using touchpad and/or Apple magic mouse: When you use your touch pad (wheel event I suppose), it lets you pan around the canvas. Even though using scroll up-down has been an established way of doing zoom in/out, I think conventions slightly evolved to this way I described. It's very common to use scrolling horizontally or vertically to pan around in a canvas. Typically, when user holds alt key, the behavior goes back to zooming in/out.

Is there an easy way to accomplish this using existing panzoom API (maybe with small hacks), if so what would be the blue print of it? Appreciate your answer! Thank you

[navneetsingh-cpu]

see https://github.com/anvaka/panzoom#ignore-mouse-wheel

[fvonellerts]

This is surprisingly easy. Would be nice if it was integrated into the core, at least when zooming is not required at all.

const pan = panzoom(el, {
   beforeWheel: e => !e.altKey
})

window.addEventListener('wheel', e => {
   const transforms = pan.getTransform()
   pan.moveTo(
      transforms.x - e.deltaX,
      transforms.y - e.deltaY,
   )
}, {
   passive: true
})

[navneetsingh-cpu]

This is surprisingly easy. Would be nice if it was integrated into the core, at least when zooming is not required at all.

const pan = panzoom(el, {
   beforeWheel: e => !e.altKey
})

window.addEventListener('wheel', e => {
   const transforms = pan.getTransform()
   pan.moveTo(
      transforms.x - e.deltaX,
      transforms.y - e.deltaY,
   )
}, {
   passive: true
})

you can raise a pull request and update read me too