-
Notifications
You must be signed in to change notification settings - Fork 364
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
Add touch drag support to NumberInput/HorizontallyScrollableArea #490
Comments
Agreed! The best way to do this would be to make |
So simply switching the signature of both - const dragHandler = (event: MouseEvent) => {
+ const dragHandler = (event: MouseEvent | MouseEvent[]) => {
+ const event_ = (Array.isArray(event)) ? event[0] : event;
- const dragEndHandler = (e: MouseEvent) => {
+ const dragEndHandler = (e: MouseEvent | MouseEvent[]) => {
+ const e_ = (Array.isArray(e)) ? e[0] : e;
|
I made an attempt at fixing the This is a bit out of my area of expertise, + these draghandlers are a bit heavy. At the moment, the touch event is almost working, although it seems to be captured differently - on a touch simulator in chrome dev tools, I can only do micro-increments of the slider. And once the pointer is released, at the moment the cursor always ends-up at the center of the screen. Hopefully this can make it into the 1.0 release, will try to investigate a bit more and report back! - target.addEventListener('mousedown', onMouseDown as $FixMe)
+ // target.addEventListener('touchstart', onMouseDown as $FixMe)
+ target.addEventListener('pointerdown', onMouseDown as $FixMe)
+ // target.addEventListener('touchstart', onMouseDown as $FixMe)
+ ...
+ target.removeEventListener('pointerdown', onMouseDown as $FixMe)
const addDragListeners = () => {
- document.addEventListener('mousemove', dragHandler)
- document.addEventListener('mouseup', dragEndHandler)
+ // document.addEventListener('touchmove', dragHandler)
+ // document.addEventListener('touchend', dragEndHandler)
+ document.addEventListener('pointermove', dragHandler)
+ document.addEventListener('pointerup', dragEndHandler)
+ // document.addEventListener('touchmove', dragHandler)
+ // document.addEventListener('touchend', dragEndHandler)
}
I think the different handling of touch and mouse is now due to the |
I tested (via I can via touch modify all slideable controls by small increments (sliders, numbers inputs etc). For some reason I can't explain, when the drag exceeds a given amount of pixels, the onmove events stop firing although the pointerup event do not. I'll transfer it back to your team who knows that useDrag subtleties way better than I do - seems like a quite complex code design. I've made a PR with my changes here #499 stilla wip to add touch support to useDrag for sliders, number inputs etc
|
It would be great if the BasicNumberInput could support dragging for touchscreen/touch events the same way we can drag these number inputs with the mouse to increase/decrease the prop like a slider.
A solution could be introducing
touchstart
andtouchmove
event listeners in r3f/src/extension/components/DragDetector.tsx#L23-L24However, since there are equivalences between
mousedown === touchstart, mousemove === touchmove, mouseup === touchend
, it should not be mandatory. Might be because touch events can be multiple, so a target has to be selected first using glue-code like the following from this SO answer:Should this be introduced here in the HorizontallyScrollableArea?
The text was updated successfully, but these errors were encountered: