onDragStart direction is 0 instead of 1 or -1

[fabyeah]

Describe the bug
Same as #32, When dragging, sometimes (when starting the drag fast?) the direction in onDragStart is [0,0] instead of [1,0] or [-1,0].

Here is a log of the state var from onDragStart when it happens:

state: 
{shiftKey: false, metaKey: false, ctrlKey: false, altKey: false, undefined: false, …}
active
: 
true
altKey
: 
false
args
: 
[]
axis
: 
"x"
buttons
: 
1
cancel
: 
ƒ ()
canceled
: 
false
ctrlKey
: 
false
currentTarget
: 
div.css-1xq2emx
delta
: 
(2) [0, 0]
direction
: 
(2) [0, 0]
distance
: 
(2) [400, 0]
down
: 
true
dragging
: 
true
elapsedTime
: 
312.19999998807907
event
: 
SyntheticBaseEvent {_reactName: 'onPointerMove', _targetInst: null, type: 'pointermove', nativeEvent: PointerEvent, target: video, …}
first
: 
true
initial
: 
(2) [747.984375, 303]
intentional
: 
true
last
: 
false
lastOffset
: 
(2) [0, 0]
locked
: 
false
memo
: 
undefined
metaKey
: 
false
movement
: 
(2) [0, 0]
offset
: 
(2) [0, 0]
overflow
: 
(2) [0, 0]
pressed
: 
true
shiftKey
: 
false
startTime
: 
19783033
swipe
: 
(2) [0, 0]
tap
: 
false
target
: 
video
timeStamp
: 
19783345.199999988
touches
: 
1
type
: 
"pointermove"
undefined
: 
false
values
: 
(2) [744.984375, 303]
velocity
: 
(2) [0, 0]
xy
: 
(2) [744.984375, 303]
_active
: 
true
_blocked
: 
false
_bounds
: 
(2) [Array(2), Array(2)]
_delayed
: 
false
_delta
: 
(2) [-2, 0]
_direction
: 
(2) [-1, 0]
_distance
: 
(2) [403, 16]
_force
: 
false
_initial
: 
(2) [747.984375, 303]
_keyboardActive
: 
false
_movement
: 
(2) [-403, 10]
_movementBound
: 
(2) [false, false]
_pointerActive
: 
true
_pointerId
: 
1
_preventScroll
: 
true
_step
: 
(2) [-3, -3]
_values
: 
(2) [744.984375, 303]
[[Prototype]]
: 
Object

So direction is [0,0], but _direction is [-1,0]. I will switch to using that variable for now, hopefully without problems.
There was an x value logged, so not sure why it doesn't set direction correctly.

Information:

• Use Gesture version: v10.2.22
• Device: tested on Google Pixel 5 and Mac
• OS: macOS Ventura 13.4.1 / Android 13
• Browser: Chrome

Checklist:

• [ x ] I've read the documentation.
• [ x ] If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[dbismut]

Please provide a demo, reading code is way too consuming for me as a maintainer.

When the drag starts there's no reason why you would have a direction right from the start since it's a mouse down. The only case is when using the threshold / filterTaps options but even then it's debatable whether the first drag event should have a direction at all.

[fabyeah]

Sandbox: https://codesandbox.io/s/focused-shannon-2s2j93

Try moving cards left and right lots of times, eventually you'll get some [0, 0] console logs.

Apparently when you add the drag config to useGesture, then onDragStart stops firing on mouse down, but waits until you move the mouse. So you should always get the direction and you do most of the time, but sometimes it doesn't work even though internally with _direction it is logged correctly. So not sure if this is an error, but feels like it?

[yafkari]

I have more or less the same scenario. I am in bounds. And when i try resize an element, if I console.log(state) I see direction: [0,0] and _direction: [-1,0].

Now if i try to console.log(state._direction) or do const { _direction } = state; I get [0,0].

[dbismut]

@fabyeah sorry for the late reply. i don't have any [0, 0] logs, but ok fair enough, I'll see if there's anything I can do here. Here's the rationale anyway so that it's clear what's going on. If you use useDrag without any of the options axis, lock, filterTaps, threshold the handler will fire on pointerdown.

However, when you use one of the options aforementioned, the lib waits until you've made enough movement so that it can determine whether the drag matches the option. Here the example you sent over uses the axis: 'x' option. Which means useDrag will wait until the user has made enough movement along the x axis before firing the handler. If it wasn't doing this, you would be also receiving events for a drag along the y axis, which is not something you want.

Internally, the DragEngine uses some _ prefixed variables so that it still knows what's going on, but the actual gesture only begins when active becomes true. So it is possible that the direction is [0, 0] when the drag becomes actually active. But I agree that if we know the direction at this point, we might as well pass it along.

[dbismut]

In hindsight and after looking through the code I hardly see why you would get state.direction equal to [0, 0] when a movement has been made. In fact, I can't even reproduce this. The direction is calculated through the delta, which itself is calculated from the offset, which is calculated from movement. To clarify, would you be able to show me a video showing the logs on your browser? I'd like to clarify something. Thanks.

[fabyeah]

Screen.rec.mp4

[dbismut]

Does this also happen outside of an iframe with the actual browser console?

[fabyeah]

Yes, I opened this issue because it happened in my project.

[dbismut]

Happens with both trackpad and mouse?

[fabyeah]

Only tried with mouse and with finger on mobile device until now. Tried with trackpad now and seems like the problem doesn't occur there.

[dbismut]

Interesting. Thanks for your input. I'll have a look this week end if I can.