Fix prevent scroll (#495)

* type: make window mandatory

* feat: setEventIds now returns the relevant id set

* docs: fix typo

* chore: track the gestureKey in EventStore so that proper eventOptions config is passed

* fix: fix drag detection

* ci

Author: dbismut

.changeset/swift-colts-return.md

@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+fix: improve detection for drag gesture, also fixes #494

packages/core/src/Controller.ts

@@ -44,9 +44,11 @@ export class Controller {
   setEventIds(event: TouchEvent | PointerEvent) {
     if (isTouch(event)) {
       this.touchIds = new Set(touchIds(event as TouchEvent))
+      return this.touchIds
     } else if ('pointerId' in event) {
       if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId)
       else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId)
+      return this.pointerIds
     }
   }
   /**
@@ -78,7 +80,7 @@ export class Controller {
     }
   }
   /**
-   * Executes side effects (attaching listeneds to a `config.target`). Ran on
+   * Executes side effects (attaching listeners to a `config.target`). Ran on
    * each render.
    */
   effect() {
@@ -147,7 +149,7 @@ export class Controller {
 
 function setupGesture(ctrl: Controller, gestureKey: GestureKey) {
   ctrl.gestures.add(gestureKey)
-  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl)
+  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey)
   ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore()
 }
 

packages/core/src/EventStore.ts

@@ -1,11 +1,14 @@
 import type { Controller } from './Controller'
+import { GestureKey } from './types'
 import { toDomEventType } from './utils/events'
 
 export class EventStore {
-  private _listeners: (() => void)[] = []
+  private _listeners = new Set<() => void>()
   private _ctrl: Controller
-  constructor(ctrl: Controller) {
+  private _gestureKey?: GestureKey
+  constructor(ctrl: Controller, gestureKey?: GestureKey) {
     this._ctrl = ctrl
+    this._gestureKey = gestureKey
   }
 
   add(
@@ -15,16 +18,21 @@ export class EventStore {
     handler: (event: any) => void,
     options?: AddEventListenerOptions
   ) {
+    const listeners = this._listeners
     const type = toDomEventType(device, action)
-    const eventOptions = { ...this._ctrl.config.shared.eventOptions, ...options }
+    const _options = this._gestureKey ? this._ctrl.config[this._gestureKey]!.eventOptions : {}
+    const eventOptions = { ..._options, ...options }
     element.addEventListener(type, handler, eventOptions)
-    this._listeners.push(() => {
+    const remove = () => {
       element.removeEventListener(type, handler, eventOptions)
-    })
+      listeners.delete(remove)
+    }
+    listeners.add(remove)
+    return remove
   }
 
   clean() {
     this._listeners.forEach((remove) => remove())
-    this._listeners = []
+    this._listeners.clear() // just for safety
   }
 }

packages/core/src/engines/DragEngine.ts

@@ -88,14 +88,27 @@ export class DragEngine extends CoordinatesEngine<'drag'> {
     )
       return
 
-    this.ctrl.setEventIds(event)
+    const ctrlIds = this.ctrl.setEventIds(event)
     // We need to capture all pointer ids so that we can keep track of them when
     // they're released off the target
     if (config.pointerCapture) {
       ;(event.target as HTMLElement).setPointerCapture(event.pointerId)
     }
 
-    if (state._pointerActive) return
+    if (
+      // in some situations (https://github.com/pmndrs/use-gesture/issues/494#issuecomment-1127584116)
+      // like when a new browser tab is opened during a drag gesture, the drag
+      // can be interrupted mid-way, and can stall. This happens because the
+      // pointerId that initiated the gesture is lost, and since the drag
+      // persists until that pointerId is lifted with pointerup, it never ends.
+      //
+      // Therefore, when we detect that only one pointer is pressing the screen,
+      // we consider that the gesture can proceed.
+      ctrlIds &&
+      ctrlIds.size > 1 &&
+      state._pointerActive
+    )
+      return
 
     this.start(event)
     this.setupPointer(event)
@@ -271,9 +284,9 @@ export class DragEngine extends CoordinatesEngine<'drag'> {
     }
 
     if (!config.pointerCapture) {
-      this.eventStore.add(this.sharedConfig.window!, device, 'change', this.pointerMove.bind(this))
-      this.eventStore.add(this.sharedConfig.window!, device, 'end', this.pointerUp.bind(this))
-      this.eventStore.add(this.sharedConfig.window!, device, 'cancel', this.pointerUp.bind(this))
+      this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this))
+      this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this))
+      this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this))
     }
   }
 
@@ -292,7 +305,11 @@ export class DragEngine extends CoordinatesEngine<'drag'> {
   setupScrollPrevention(event: PointerEvent) {
     persistEvent(event)
     // we add window listeners that will prevent the scroll when the user has started dragging
-    this.eventStore.add(this.sharedConfig.window!, 'touch', 'change', this.preventScroll.bind(this), { passive: false })
+    const remove = this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), {
+      passive: false
+    })
+    this.eventStore.add(this.sharedConfig.window, 'touch', 'end', remove)
+    this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', remove)
     this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay!, event)
   }
 

packages/core/src/types/internalConfig.ts

@@ -5,7 +5,7 @@ import { PointerType, Vector2 } from './utils'
 export type InternalGenericOptions = {
   target?: () => EventTarget
   eventOptions: AddEventListenerOptions
-  window?: EventTarget
+  window: EventTarget
   enabled: boolean
   transform?: (v: Vector2) => Vector2
 }