[v9] feat: Add click threshold to events

packages/fiber/src/core/events.ts

@@ -89,6 +89,8 @@ export interface EventManager<TTarget> {
    *  explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
    */
   update?: () => void
+  /** Threshold for the amont the pointer can move before a click is canceled. */
+  clickThreshold: number
 }
 
 export interface PointerCaptureTarget {
@@ -399,7 +401,7 @@ export function createEvents(store: RootStore) {
 
     // Any other pointer goes here ...
     return function handleEvent(event: DomEvent) {
-      const { onPointerMissed, internal } = store.getState()
+      const { onPointerMissed, internal, events } = store.getState()
 
       // prepareRay(event)
       internal.lastEvent.current = event
@@ -412,6 +414,9 @@ export function createEvents(store: RootStore) {
       const hits = intersect(event, filter)
       const delta = isClickEvent ? calculateDistance(event) : 0
 
+      // If the delta is greater than our threshold, cancel the click
+      if (isClickEvent && delta > events.clickThreshold) return
+
       // Save initial coordinates on pointer-down
       if (name === 'onPointerDown') {
         internal.initialClick = [event.offsetX, event.offsetY]

packages/fiber/src/core/store.ts

@@ -200,7 +200,7 @@ export const createStore = (
       gl: null as unknown as THREE.WebGLRenderer,
       camera: null as unknown as Camera,
       raycaster: null as unknown as THREE.Raycaster,
-      events: { priority: 1, enabled: true, connected: false },
+      events: { priority: 1, enabled: true, connected: false, clickThreshold: 7 },
       scene: null as unknown as THREE.Scene,
       xr: null as unknown as XRManager,
 

packages/fiber/src/native/events.ts

@@ -66,5 +66,6 @@ export function createTouchEvents(store: RootStore): EventManager<HTMLElement> {
 
       set((state) => ({ events: { ...state.events, connected: false } }))
     },
+    clickThreshold: 7,
   }
 }

packages/fiber/src/web/events.ts

@@ -62,5 +62,6 @@ export function createPointerEvents(store: RootStore): EventManager<HTMLElement>
         set((state) => ({ events: { ...state.events, connected: undefined } }))
       }
     },
+    clickThreshold: 7,
   }
 }