Pinch and wheel difference across browsers

[breauxna]

First off, great library! In chrome both pinch and wheel gestures are called for ctrl+wheel and trackpad pinch inputs. In safari only the wheel gesture is called on ctrl+wheel, and only pinch on trackpad. Is this intentional and if so how do you suggest handling an action like zoom when it'll be called twice in chrome (pinch + wheel), but only once in safari (wheel for ctrl+wheel and pinch for trackpad pinch).

[dbismut]

This is sort of intentional indeed. When using the trackpad in MacBooks or the Magic Trackpad, Safari is able to determine both zoom and rotation through vendor-specific
GestureEvents. But when using those trackpads on Chrome, if you try to zoom, you'll actually trigger WheelEvents with the ctrlKey flag set to true.

This is not the lib doing anything, this is just the way it is.

However if you want to distinguish wheel from zoom, you can always check state.pinching inside your onWheel handler (or check if the ctrlKey is false).

[breauxna]

Thanks for the quick reply! Ohh ok, I understand. I guess in my case the issue isn't distinguishing wheel from zoom it's just that pinch and wheel both get called in Chrome. So just a small example with some pseudocode of how I'm handling it now

const handleWheelStart = useCallback(
    ({ metaKey, ctrlKey, event }) => {
      event.preventDefault();
      event.stopPropagation();

      const isPinch = ctrlKey || metaKey;

      if (isPinch) {
        onZoomStart();
      } else {
        onPanStart();
      }
    },
    [onZoomStart, onPanStart],
  );

const handleWheel = useCallback(
    ({ delta, event, ctrlKey, metaKey, velocity }) => {
      const isPinch = ctrlKey || metaKey;

      if (isPinch) {
        handleZoom()
      } else {
        handlePan()
      }
    },
    [handleZoom, handlePan],
  );

const handleWheelEnd = useCallback(
    ({ metaKey, ctrlKey }) => {
      const isPinch = ctrlKey || metaKey;

      if (isPinch) {
        onZoomEnd();
      } else {
        onPanEnd();
      }
    },
    [onZoomEnd, onPanEnd],
  );

const handlePinchStart = useCallback(() => {
    onZoomStart();
  }, [onZoomStart]);

const handlePinch = useCallback(
    ({ origin, delta }) => {
      handleZoom();
    },
    [handleZoom],
  );

const handlePinchEnd = useCallback(() => {
    onZoomEnd();
  }, [onZoomEnd]);

useGesture(
    {
      onWheelStart: (state) => handleWheelStart(state),
      onWheel: (state) => handleWheel(state),
      onWheelEnd: (state) => handleWheelEnd(state),
      onPinchStart: () => handlePinchStart(),
      onPinch: (state) => handlePinch(state),
      onPinchEnd: () => handlePinchEnd(),
    },
    {
      target: containerRef,
      eventOptions: { passive: false, capture: false },
    },
  );

So in Chrome handleZoom will get called twice, once in the wheel handler and once in the pinch handler for either a trackpad pinch or a ctrl+wheel action. However, in safari the pinch only gets called on the trackpad and the wheel only gets called on the ctrl+wheel so my app will zoom twice as far in chrome on a ctrl+wheel then it will in safari. Just trying to figure out if there is a way to handle this better, maybe some gesture option I'm missing or something. Thanks again!

[breauxna]

As a simple example I forked this sandbox from one of your examples https://codesandbox.io/s/red-wood-o90q7m?file=/src/App.jsx . If you ctrl+wheel or trackpad pinch on Chrome you will get both the wheel and pinch logs in the console. Could this possibly be a regression? I was looking through some of the old issues and found one that is similar or the same as this, but it was resolved back in 2019. #80 (comment)

[breauxna]

@dbismut It seems like v9 used to only send pinch events in Chrome on ctrl+wheel or trackpad pinch in Chrome https://codesandbox.io/s/react-use-gesture-issue-wheel-forked-pmlqou?file=/src/index.js

[dbismut]

Ok I get your issue. At the moment the lib detects whether WebKitGestureEvents are available and since React doesn't have a handler to them, the lib only uses them when you pass the ref option.

So I guess one easy way to get to what you want is not using ref.

That isn't super satisfactory though.

One other option on your end would be to only use onPinch for mobile devices (which you can do by checking pointerType) and do the zoom logic in onWheel only (in that case you wouldn't benefit from the Magic Trackpad on Safari).

One final option would be for the lib to still attach wheel listeners on Safari desktop (fairly easy to do). We could have a special option for that.

[dbismut]

And yes, to clarify:

• Magic trackpad zoom on Chrome / Firefox triggers the wheel event with the ctrlKey flag set to true.

• Magic trackpad zoom on Safari triggers a GestureEvent.

• usePinch listens to GestureEvents when it can (Safari with ref option), and falls back to TouchEvents / WheelEvents when it can't (when using {...bind()}, on Chrome / Firefox).

[breauxna]

Ohh ok, that makes sense thanks for the explanation! So in this case I could add a pinch option like alwaysCapturePinchWheelEvents or something like that so on a ctrl+wheel pinch would still be called? Then I could just handle all my zooming in the pinch handler. I could try to get a PR up for this since you are on vacation depending on exactly how you'd want it done.

[dbismut]

I gave it a second thought and you're right. It's better to normalize the behavior of the browsers using the lib and to also track wheel events for Safari no matter whether GestureEvents could be activated. If people want to discard wheel events on Safari, checking event.type would suffice.

I would gladly accept a PR. The fix would be super simple I think, just removing the conditional statement and adding the wheel listener no matter what.

use-gesture/packages/core/src/engines/PinchEngine.ts

Lines 281 to 297 in c0949e0

	bind(bindFunction: any) {
	const device = this.config.device
	if (!!device) {
	// @ts-ignore
	bindFunction(device, 'start', this[device + 'Start'].bind(this))
	// @ts-ignore
	bindFunction(device, 'change', this[device + 'Move'].bind(this))
	// @ts-ignore
	bindFunction(device, 'end', this[device + 'End'].bind(this))
	// @ts-ignore
	bindFunction(device, 'cancel', this[device + 'End'].bind(this))
	} else {
	// we try to set a passive listener, knowing that in any case React will
	// ignore it.
	bindFunction('wheel', '', this.wheel.bind(this), { passive: false })
	}
	}

I should probably write development guidelines but this package uses pnpm, preconstruct and changeset. If you haven't already you'll have to install pnpm globally before installing deps.

Then when you're done with the changes you can run pnpm changeset and the cli will guide you through the steps (this fix should be just a patch).

Thanks for your help!

[dbismut]

Your PR has fixed this and is now released as part of v10.2.17! Thanks for your help @breauxna!