fix(pinch): cap the movement of wheel events based on the provided bounds (#549)

* fix(pinch): cap the movemenet of wheel events based on the provided bounds

* chore: minor refactor in helper function

Co-authored-by: David Bismut <david.bismut@gmail.com>

Author: Andarist

.changeset/curvy-pens-laugh.md

@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+fix: rolls back wheel-based pinch movement to bounds (thanks [@Andarist](https://github.com/Andarist)!)

packages/core/src/engines/PinchEngine.ts

@@ -2,6 +2,7 @@ import { Engine } from './Engine'
 import { touchDistanceAngle, distanceAngle, wheelValues } from '../utils/events'
 import { V } from '../utils/maths'
 import { Vector2, WebKitGestureEvent } from '../types'
+import { clampStateInternalMovementToBounds } from '../utils/state'
 
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30
 const PINCH_WHEEL_RATIO = 100
@@ -265,6 +266,9 @@ export class PinchEngine extends Engine<'pinch'> {
     state._delta = [(-wheelValues(event)[1] / PINCH_WHEEL_RATIO) * state.offset[0], 0]
     V.addTo(state._movement, state._delta)
 
+    // _movement rolls back to when it passed the bounds.
+    clampStateInternalMovementToBounds(state)
+
     this.state.origin = [event.clientX, event.clientY]
 
     this.compute(event)

packages/core/src/engines/WheelEngine.ts

@@ -1,6 +1,7 @@
 import { CoordinatesEngine } from './CoordinatesEngine'
 import { wheelValues } from '../utils/events'
 import { V } from '../utils/maths'
+import { clampStateInternalMovementToBounds } from '../utils/state'
 
 export interface WheelEngine extends CoordinatesEngine<'wheel'> {
   wheel(this: WheelEngine, event: WheelEvent): void
@@ -23,17 +24,7 @@ export class WheelEngine extends CoordinatesEngine<'wheel'> {
     V.addTo(state._movement, state._delta)
 
     // _movement rolls back to when it passed the bounds.
-    const [ox, oy] = state.overflow
-    const [dx, dy] = state._delta
-    const [dirx, diry] = state._direction
-
-    if ((ox < 0 && dx > 0 && dirx < 0) || (ox > 0 && dx < 0 && dirx > 0)) {
-      state._movement[0] = state._movementBound[0] as number
-    }
-
-    if ((oy < 0 && dy > 0 && diry < 0) || (oy > 0 && dy < 0 && diry > 0)) {
-      state._movement[1] = state._movementBound[1] as number
-    }
+    clampStateInternalMovementToBounds(state)
 
     this.compute(event)
     this.emit()

packages/core/src/utils/state.ts

@@ -0,0 +1,19 @@
+import { CommonGestureState } from '../types'
+
+// _movement rolls back to when it passed the bounds.
+/**
+ * @note code is currently used in WheelEngine and PinchEngine.
+ */
+export function clampStateInternalMovementToBounds(state: CommonGestureState) {
+  const [ox, oy] = state.overflow
+  const [dx, dy] = state._delta
+  const [dirx, diry] = state._direction
+
+  if ((ox < 0 && dx > 0 && dirx < 0) || (ox > 0 && dx < 0 && dirx > 0)) {
+    state._movement[0] = state._movementBound[0] as number
+  }
+
+  if ((oy < 0 && dy > 0 && diry < 0) || (oy > 0 && dy < 0 && diry > 0)) {
+    state._movement[1] = state._movementBound[1] as number
+  }
+}