search

timmywil / panzoom

A library for panning and zooming elements using CSS transforms :mag:
https://timmywil.com/panzoom/
MIT License
2.14k stars 416 forks source link

Feature: Two-finger panning on Mac trackpad #665

Closed tomrumble closed 4 months ago

tomrumble commented 4 months ago

What problem does this feature solve? Mac users intuitively use two-finger pan in many web/applications (think Figma, Miro, Adobe Suite, etc.). Currently it seems that Panzoom does not support this type of interaction; when I attempt to pan with two fingers horizontally nothing happens, when I attempt it vertically it zooms in and out.

Describe the solution you'd like An option to trade the existing vertical direction two-finger zoom for a two-finger pan in both directions.

Describe alternatives you've considered I have no considered or attempted any alternative solutions.

timmywil commented 4 months ago

Thanks for opening an issue. The zooming is intentional as it's normally how you scroll on a trackpad, which would be the equivalent of using a mouse wheel. That should remain the default for zoomWithWheel. However, gestures in Panzoom are not required. The defaults can be turned off with the noBind option. That would allow you to create your own gestures. Panning with two fingers, either on the x or y axis, could then be used to pan however you like. It could disregard the number of touches and simply set the pan based on the distance the first touch has traveled since it started, or you could take the average of all touches. I do this here using pointer events, but you wouldn't necessary have to use pointer events. A quick solution may also be to use the pinchAndPan option, which allows panning and zooming at the same time with multiple pointer events. Hope that helps.

tomrumble commented 4 months ago

Thanks a lot @timmywil - super helpful. Thanks for creating this great utility.