-
Notifications
You must be signed in to change notification settings - Fork 307
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pinch center position #58
Comments
Hey! Thanks for the feedback. This was indeed a quick one so I just released Note that it doesn't work for Out of curiosity, how do you transpose absolute coordinates to the element relative coordinates to set |
@dbismut that was quick, thanks! I will test it later in the day and report back!
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 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) |
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 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 😬) |
@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 👍 |
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 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 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! |
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
Hmm I actually based it on the example from readme: https://codesandbox.io/s/9o92o24wrr where you have:
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.
I forked that codesandbox example and I'm trying to port my usecase. I will report when it's done and working. |
Great let me know! |
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. |
Thanks for the update! Well, let me know if there's anything I can do to help. |
I'm migrating from hammerjs to react-use-gesture@next and one thing I'm missing is getting coordinates of center position of the pinch. For pinch we only have distance and angle but no center position between fingers. I would use it to set transformOrigin in CSS to make the scaling originate from actual central position of the pinch. I tried accessing event.touches but typescript complains that
Property 'touches' does not exist on type 'MouseEvent | TouchEvent'.
so i can't even calculate it myself :)By looking at hammerjs' source calculating center position should be easy: https://github.com/hammerjs/hammer.js/blob/563b5b1e4bfbb5796798dd286cd57b7c56f1eb9e/src/inputjs/get-center.js
The text was updated successfully, but these errors were encountered: