Pinch center position about use-gesture

[dbismut]

Hey! Thanks for the feedback. This was indeed a quick one so I just released 5.1.0-beta.5 under the next tag, which exports the origin attribute. It should give you the central position of the pinch. I haven't tested it yet, but as you said the calculation is trivial so hopefully we're good 😅

Note that it doesn't work for GestureEvent just yet, I'll work on that later as it requires a bit more logic (if you're not using the domTarget option you shouldn't care).

Out of curiosity, how do you transpose absolute coordinates to the element relative coordinates to set transformOrigin? I mean is there a clever trick or are you using getBoundingClientRect?

[eXtreme]

@dbismut that was quick, thanks! I will test it later in the day and report back!

Out of curiosity, how do you transpose absolute coordinates to the element relative coordinates to set transformOrigin?

This is actually probably very specific to my usecase - the object of pan/pinch is relative to the whole area of the page (with some left and top offset to accommodate UI elements). So the object at [0,0] coordinates is at top left corner of the page. So calculating transformOrigin is just as simple as PinchCenter - TranslateXY :)

But yeah, for other usecases it would require finding absolute coordinates of the object itself but for me it equals object coordinates for translate(x,y)

[dbismut]

I see, thanks for the explanation. I’m asking mostly because there are situations where it’s interesting to get the gesture relatively to the node position. That could be doable but if it’s to the cost of getBoundingClientRect (which I believe triggers a layout / reflow) it’s better to leave this in user land.

Let me know how it goes. I think I should be able to release 5.1.0 next week, although I would love to implement typescript (but I have zero knowledge about TS atm 😬)

[eXtreme]

@dbismut OK so I tested it and the center position works fine 👍

The only problem I see now is that when implementing "Awesome" pan(drag) and pinch experience, hammerjs calculates xy delta as difference between center coordinates, while react-use-gesture always uses first touch position (in onDrag handler). I managed to workaround it like this:

onDrag: ({ down, delta, pinching, temp = transform.xy.getValue() }) => {
    if (pinching) {
        return;
    }
    const xy = [Math.round(temp[0] + delta[0]), Math.round(temp[1] + delta[1])];
    
    setTransform({ xy, immediate: down });
    
    return temp;
},
onPinch: ({ 
    down, origin, first, initial, da, 
    temp = { xy: transform.xy.getValue(), initialOrigin: [0, 0]} 
}) => {
    if (first) {
        temp = {
            xy: temp.xy,
            initialOrigin: origin,
        }
    }

    const deltaXY = [
        origin[0] - temp.initialOrigin[0],
        origin[1] - temp.initialOrigin[1],
    ];

    let s = da[0] / initial[0];

    const o = [
        Math.round(origin[0]),
        Math.round(origin[1]),
    ];

    const xy = [Math.round(temp.xy[0] + deltaXY[0]), Math.round(temp.xy[1] + deltaXY[1])];

    setTransform({ s, xy, immediate: down });
    setTransformOrigin({ o, immediate: true });

    return temp;
},

// ...

const style = {
    transform: interpolate(
        [
            transform.xy.interpolate((x, y) => `translate3d(${x}px, ${y}px, 0)`),
            transform.s.interpolate((s) => `scale(${s}, ${s})`),
        ],
        (m, s) => `${m} ${s}`
    ),
    transformOrigin: interpolate(
        [
            transform.xy.interpolate((x, y) => [x, y]),
            transformOrigin.o.interpolate((x, y) => [x, y]),
        ],
        ([x, y], [ox, oy]) => `${ox - x}px ${oy - y}px`
    ),
};

And now the origin point is glued to the same spot on target element 👍

[dbismut]

You mean hammers calculates the delta based on the position of the node element itself, correct? Yeah that's possibly the most tricky part of react-use-gesture, the temp attribute will need some further explanation / documentation.

Regarding your code, would you mind setting up a codesandbox for it? In theory, Drag gesture shouldn't be fired if more than one pointer is touching the screen, so you shouldn't have to use if(pinching) return in the drag handler.

It would be great if you could provide a codesandbox as this lib is pretty hard to test programmatically so the more examples / usecases the better!

[eXtreme]

@dbismut

You mean hammers calculates the delta based on the position of the node element itself, correct?

No, it's actually it's in the file mentioned earlier: https://github.com/hammerjs/hammer.js/blob/563b5b1e4bfbb5796798dd286cd57b7c56f1eb9e/src/inputjs/get-center.js

For one input, "center" is just a coordinate of pointer[0], for pinching (and more pointers) it is that "central" point between them. And the actual delta XY of movement is calculated based on that central point (so for panning it the position of a pointer, for pinching it's the central point between fingers). Which is not the same. Without implementing rotating, moving one of two fingers makes the central point move, so it should also cause panning.

The same thing I did in the example above - I set "initialOrigin" on first pinch event and then just calculate delta XY as origin - initialOrigin.

In theory, Drag gesture shouldn't be fired if more than one pointer is touching the screen

Hmm I actually based it on the example from readme: https://codesandbox.io/s/9o92o24wrr where you have:

    onDrag: ({ local }) => set({ coord: local, rxrys: [0, 0, 1] }),
    onPinch: ({ local: [d, a] }) => set({ pinch: [d / 200, a] }),

so both drag and pinch are fired at the same time. So in the example above I had to disable "drag" while pinching because I made pinch set it's own XY coords.

It would be great if you could provide a codesandbox as this lib is pretty hard to test programmatically so the more examples / usecases the better!

I forked that codesandbox example and I'm trying to port my usecase. I will report when it's done and working.

[dbismut]

Great let me know!

[eXtreme]

Just quick update, so far I wasn't able to make a short and concise demo, my implementation is more difficult to port than I thought (and it's not finished yet). When I have it and it is easy and understandable, I will definitely post it, but right now it does not look like this. But that enhancement helped me either way.

[dbismut]

Thanks for the update! Well, let me know if there's anything I can do to help.