Two finger touch gesture events

[tim-soft]

I modified a local version of react-with-gesture to return a simple distance between two fingers

const initialState = {
  // [Distance, Scale]
  pinch: [0, 1],
}

handleDown() {
  const newProps {
     {...}
     pinch: [0, state.pinch[1]],
  }
}

handleMove() {
  // Get the current pinch distance from touch event
  const pinchDistance = (() => {
    if (event.touches && event.touches.length === 2) {
      const [finger1, finger2] = event.touches;
        return Math.hypot(
          finger1.pageX - finger2.pageX,
          finger1.pageY - finger2.pageY
        );
      }
    return 0;
  })();

  // Compare to previous pinch distance, find delta
  const pinchDelta = pinchDistance - state.pinch[0];
  {...}

  return {
    {...},
    pinch: [pinchDistance, pinchScale]
  }
}

I'm using this for calculating a pinch/zoom scale(x) factor. While I'd like to see this lib support two finger events, what I've got feels really specific to my usecase.

What would/should the api look like if it had handlers/events specific to two finger gestures?

[drcmda]

never thought about it but would be a useful addition. do you have any ideas regarding the api that you like? i think i would trust your realworld usecase more than my whims right now, i haven't done much with multitouch before.

[dotlouis]

Actually trying to work with multi-touch events too (pinch to zoom). I will report any findings if it can help

[tim-soft]

@dotlouis I haven't had much time to mess with this recently but here is the actual code that I'm using for a lightbox library

tim-soft@5bef968

Then you can use this by

<Gesture key={i} onMove={props => this.onMove({ ...props, i })}>
  {({ pinch: [, pinchScale] }) => (
    <Spring native to={{ pinchScale }}>
      {({ pinchScale }) => (
        <animated.div style={{ transform: `scale(${pinchScale})`, }}>
          <img />
        </animated.div>
      )}
    </Spring>
  )}
</Gesture>

Now that I think about it, I could probably just return the pinch delta from the lib and calculate the pinchScale on my own, not really the library's job/opinionated

demo: https://next-portfolio-rfflj3yd8.now.sh/portfolio
click any picture to open lightbox, pinch zoom the images

[drcmda]

@tim-soft so let's put this into 5.x?

[dbismut]

Hey @tim-soft we've just released beta of v5.0.0 (react-use-gesture@5.0.0-beta.3) that introduces new gestures, including pinch.

The pinch handler returns da instead of xy (d for distance and a for angle), but you'll probably end up using local that returns delta with book-keeping, and that you should use to calculate the scale or the rotation. Here is a temp codesandbox here that does just that.

Note that there's quite a few api changes that are mentioned here. Usage for pinch should be:

const bind = useGesture({ onDrag: () => {}, onPinch: () => {} }, {...config})

Edit: bump to 5.0.0