Fix/swipe 592 (#595)

Author: dbismut

.changeset/mighty-poets-collect.md

@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+fix: calculate swipe from raw movement (\_movement) #592

documentation/pages/docs/state.mdx

@@ -35,12 +35,13 @@ const bind = useXXXX(state => {
     distance,      // offset distance per axis
     direction,     // direction per axis
     overflow,      // whether the offset is overflowing bounds (per axis)
-    startTime,     // gesture start time
-    elapsedTime,   // gesture elapsed time
+    startTime,     // gesture start time (ms)
+    timeDelta,     // Time delta (ms) with the previous event
+    elapsedTime,   // gesture elapsed time (ms)
+    timeStamp,     // timestamp of the event
     type,          // event type
     target,        // event target
     currentTarget, // event currentTarget
-    timeStamp,     // timestamp of the event
     first,         // true when it's the first event
     last,          // true when it's the last event
     active,        // true when the gesture is active

packages/core/src/engines/DragEngine.ts

@@ -233,16 +233,18 @@ export class DragEngine extends CoordinatesEngine<'drag'> {
     if (state.tap && config.filterTaps) {
       state._force = true
     } else {
-      const [dirx, diry] = state.direction
-      const [vx, vy] = state.velocity
-      const [mx, my] = state.movement
+      const [_dx, _dy] = state._delta
+      const [_mx, _my] = state._movement
       const [svx, svy] = config.swipe.velocity
       const [sx, sy] = config.swipe.distance
       const sdt = config.swipe.duration
 
       if (state.elapsedTime < sdt) {
-        if (Math.abs(vx) > svx && Math.abs(mx) > sx) state.swipe[0] = dirx
-        if (Math.abs(vy) > svy && Math.abs(my) > sy) state.swipe[1] = diry
+        const _vx = Math.abs(_dx / state.timeDelta)
+        const _vy = Math.abs(_dy / state.timeDelta)
+
+        if (_vx > svx && Math.abs(_mx) > sx) state.swipe[0] = Math.sign(_dx)
+        if (_vy > svy && Math.abs(_my) > sy) state.swipe[1] = Math.sign(_dy)
       }
     }
 

packages/core/src/engines/Engine.ts

@@ -166,7 +166,7 @@ export abstract class Engine<Key extends GestureKey> {
     state.args = args
     state.axis = undefined
     state.memo = undefined
-    state.elapsedTime = 0
+    state.elapsedTime = state.timeDelta = 0
     state.direction = [0, 0]
     state.distance = [0, 0]
     state.overflow = [0, 0]
@@ -349,6 +349,7 @@ export abstract class Engine<Key extends GestureKey> {
       if (!state.first && dt > 0) {
         // calculates kinematics unless the gesture starts or ends
         state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt]
+        state.timeDelta = dt
       }
     }
   }

packages/core/src/types/state.ts

@@ -162,6 +162,10 @@ export type CommonGestureState = {
    * Elapsed time (ms) of the current gesture.
    */
   elapsedTime: number
+  /**
+   * Time delta (ms) with the previous event.
+   */
+  timeDelta: number
   /**
    * Event type.
    */