Comments (9)
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
?
from use-gesture.
@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)
from use-gesture.
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 π¬)
from use-gesture.
@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 π
from use-gesture.
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!
from use-gesture.
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.
from use-gesture.
Great let me know!
from use-gesture.
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.
from use-gesture.
Thanks for the update! Well, let me know if there's anything I can do to help.
from use-gesture.
Related Issues (20)
- Using alt+left for navigation prevents all gestures on elements with axis: 'y'
- Drag gesture: Delay setting behavior does not adhere to documentation HOT 4
- Drag + Click + filtertaps option breaks onclick listener. Drag + Click + Treshold works. HOT 1
- touch-action: pan-y prevents L shaped gestures to scroll
- onPinch breaking on control + scroll HOT 5
- Where do I import a3f from? HOT 1
- Getting the error "a3f is not defined"
- Textarea doesn't work inside gesture container HOT 4
- Documentation website is broken (in firefox) HOT 8
- Type error with @types/react >=18.2.66
- (Firefox) Click event fired on drag end
- 100ms delay between pointermove events in Android webviews? HOT 1
- [@use-gesture/vanilla] Touch event was abnormally interrupted. HOT 1
- The codesandbox example has TypeError
- Zoom pinch gestures and the from parameter
- Vanilla - Glitch during fast gestures
- Reset pinch offset, change pinch sensitivity and change unpinching behaviour
- Rotating/onWheel function only works on mobile
- state swipe is -1 for both axes even with axis restricted to y
- Swiping too hard causes the whole viewport unclickable HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-gesture.