Fix/551 (#596)

Author: dbismut

.changeset/hip-ducks-serve.md

@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+fix: add a try catch when calculating the distance and angle as apparently some events might be undefined on Windows #551

packages/core/src/engines/PinchEngine.ts

@@ -90,6 +90,8 @@ export class PinchEngine extends Engine<'pinch'> {
     state._touchIds = Array.from(ctrlTouchIds).slice(0, 2) as [number, number]
 
     const payload = touchDistanceAngle(event, state._touchIds)
+
+    if (!payload) return
     this.pinchStart(event, payload)
   }
 
@@ -116,6 +118,8 @@ export class PinchEngine extends Engine<'pinch'> {
 
     // @ts-ignore
     const payload = distanceAngle(...Array.from(_pointerEvents.values()))
+
+    if (!payload) return
     this.pinchStart(event, payload)
   }
 
@@ -132,6 +136,8 @@ export class PinchEngine extends Engine<'pinch'> {
   touchMove(event: TouchEvent) {
     if (!this.state._active) return
     const payload = touchDistanceAngle(event, this.state._touchIds)
+
+    if (!payload) return
     this.pinchMove(event, payload)
   }
 
@@ -143,6 +149,8 @@ export class PinchEngine extends Engine<'pinch'> {
     if (!this.state._active) return
     // @ts-ignore
     const payload = distanceAngle(...Array.from(_pointerEvents.values()))
+
+    if (!payload) return
     this.pinchMove(event, payload)
   }
 

packages/core/src/utils/events.ts

@@ -73,15 +73,20 @@ function getValueEvent<EventType extends TouchEvent | PointerEvent>(
 }
 
 export function distanceAngle(P1: Touch | PointerEvent, P2: Touch | PointerEvent) {
-  const dx = P2.clientX - P1.clientX
-  const dy = P2.clientY - P1.clientY
-  const cx = (P2.clientX + P1.clientX) / 2
-  const cy = (P2.clientY + P1.clientY) / 2
-
-  const distance = Math.hypot(dx, dy)
-  const angle = -(Math.atan2(dx, dy) * 180) / Math.PI
-  const origin = [cx, cy] as Vector2
-  return { angle, distance, origin }
+  // add a try catch
+  // attempt to fix https://github.com/pmndrs/use-gesture/issues/551
+  try {
+    const dx = P2.clientX - P1.clientX
+    const dy = P2.clientY - P1.clientY
+    const cx = (P2.clientX + P1.clientX) / 2
+    const cy = (P2.clientY + P1.clientY) / 2
+
+    const distance = Math.hypot(dx, dy)
+    const angle = -(Math.atan2(dx, dy) * 180) / Math.PI
+    const origin = [cx, cy] as Vector2
+    return { angle, distance, origin }
+  } catch {}
+  return null
 }
 
 export function touchIds(event: TouchEvent) {