How to difference between pinch and a drag?

[Rajdeepc]

@dbismut

I console logged pinching and dragging on onPinch and both are coming as true.

My use case is I want to know when I am dragging the canvas and when I am pinching on the canvas?

[dbismut]

@Rajdeepc yes, that's normal. If you want to disable your drag handler while pinching you could just do:

useGesture({
  onDrag: ({ pinching, ...state }) => {
    if(pinching) return
    yourDragLogic(state)
  },
  onPinch: (state) => yourPinchLogic(state)
})

[Rajdeepc]

So this is what I am doing for drag after zooming.

if (first) {
            canvasSpringAPI.set({
              x: canvas.viewportTransform[4],
              y: canvas.viewportTransform[5],
            });
          }
canvasSpringAPI.start({
            x: canvasSpring.x.goal + dx,
            y: canvasSpring.y.goal + dy,
          });

So the issue is if I pinch to zoom to a center with canvas.zoomToPoint({ x: ox, y: oy }, zoom); and then try to drag with the above code, then the value of x and y in the above logic becoming -112 and -114 and the whole canvas is shifting to this co-ordinate and going out of the viewport. How can we control this?

I would like to be able to drag the canvas with that zoom level only.

[dbismut]

A bit of a doit in the dark but have a look at the from option maybe?

[Rajdeepc]

https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom

when i changed <animated.div> to canvas it stopped working. Any idea on this? The way pinch and drag is working on this animated div I am trying to replicate the same behaviour on a canvas

[dbismut]

This feels a bit decorralated from the initial question.

[Rajdeepc]

Yes sorry for this. Please ignore on the example as of now.