@use-gesture/core - npm Package Compare versions

Comparing version 10.2.13 to 10.2.14

actions/dist/use-gesture-core-actions.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('../../dist/actions-5a43ec1e.cjs.dev.js');
+var actions_dist_useGestureCoreActions = require('../../dist/actions-b140bc54.cjs.dev.js');
 require('../../dist/maths-125ca19a.cjs.dev.js');
@@ -8,0 +8,0 @@

actions/dist/use-gesture-core-actions.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('../../dist/actions-874431a8.cjs.prod.js');
+var actions_dist_useGestureCoreActions = require('../../dist/actions-7e5f010d.cjs.prod.js');
 require('../../dist/maths-a42ecce1.cjs.prod.js');
@@ -8,0 +8,0 @@

actions/dist/use-gesture-core-actions.esm.js

@@ -1,2 +0,2 @@
-export { C as ConfigResolverMap, E as EngineMap, e as dragAction, h as hoverAction, m as moveAction, f as pinchAction, r as registerAction, s as scrollAction, w as wheelAction } from '../../dist/actions-55c076a0.esm.js';
+export { C as ConfigResolverMap, E as EngineMap, e as dragAction, h as hoverAction, m as moveAction, f as pinchAction, r as registerAction, s as scrollAction, w as wheelAction } from '../../dist/actions-e2a59bb9.esm.js';
 import '../../dist/maths-b2a210f4.esm.js';

CHANGELOG.md

 # @use-gesture/core
 
+## 10.2.14
+
+### Patch Changes
+
+- e82f1c220: fix: improve detection for drag gesture, also fixes #494
+
 ## 10.2.13
@@ -4,0 +10,0 @@

dist/declarations/src/Controller.d.ts

@@ -33,3 +33,3 @@ import { EventStore } from './EventStore';
      */
-    setEventIds(event: TouchEvent | PointerEvent): void;
+    setEventIds(event: TouchEvent | PointerEvent): Set<number> | undefined;
     /**
@@ -53,3 +53,3 @@ * Attaches handlers to the 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.
@@ -56,0 +56,0 @@ */

dist/declarations/src/EventStore.d.ts

 import type { Controller } from './Controller';
+import { GestureKey } from './types';
 export declare class EventStore {
     private _listeners;
     private _ctrl;
-    constructor(ctrl: Controller);
-    add(element: EventTarget, device: string, action: string, handler: (event: any) => void, options?: AddEventListenerOptions): void;
+    private _gestureKey?;
+    constructor(ctrl: Controller, gestureKey?: GestureKey);
+    add(element: EventTarget, device: string, action: string, handler: (event: any) => void, options?: AddEventListenerOptions): () => void;
     clean(): void;
 }

dist/declarations/src/types/internalConfig.d.ts

@@ -7,3 +7,3 @@ import { GestureKey, CoordinatesKey, ModifierKey } from './config';
     eventOptions: AddEventListenerOptions;
-    window?: EventTarget;
+    window: EventTarget;
     enabled: boolean;
@@ -10,0 +10,0 @@ transform?: (v: Vector2) => Vector2;

dist/use-gesture-core.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('./actions-5a43ec1e.cjs.dev.js');
+var actions_dist_useGestureCoreActions = require('./actions-b140bc54.cjs.dev.js');
 require('./maths-125ca19a.cjs.dev.js');
@@ -154,18 +154,26 @@
 class EventStore {
-  constructor(ctrl) {
-    actions_dist_useGestureCoreActions._defineProperty(this, "_listeners", []);
+  constructor(ctrl, gestureKey) {
+    actions_dist_useGestureCoreActions._defineProperty(this, "_listeners", new Set());
 
     this._ctrl = ctrl;
+    this._gestureKey = gestureKey;
   }
 
   add(element, device, action, handler, options) {
+    const listeners = this._listeners;
     const type = actions_dist_useGestureCoreActions.toDomEventType(device, action);
 
-    const eventOptions = actions_dist_useGestureCoreActions._objectSpread2(actions_dist_useGestureCoreActions._objectSpread2({}, this._ctrl.config.shared.eventOptions), options);
+    const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
 
+    const eventOptions = actions_dist_useGestureCoreActions._objectSpread2(actions_dist_useGestureCoreActions._objectSpread2({}, _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;
   }
@@ -176,3 +184,3 @@
 
-    this._listeners = [];
+    this._listeners.clear();
   }
@@ -240,4 +248,6 @@
       this.touchIds = new Set(actions_dist_useGestureCoreActions.touchIds(event));
+      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;
     }
@@ -324,3 +334,3 @@ }
   ctrl.gestures.add(gestureKey);
-  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl);
+  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
   ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
@@ -327,0 +337,0 @@ }

dist/use-gesture-core.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('./actions-874431a8.cjs.prod.js');
+var actions_dist_useGestureCoreActions = require('./actions-7e5f010d.cjs.prod.js');
 require('./maths-a42ecce1.cjs.prod.js');
@@ -143,18 +143,26 @@
 class EventStore {
-  constructor(ctrl) {
-    actions_dist_useGestureCoreActions._defineProperty(this, "_listeners", []);
+  constructor(ctrl, gestureKey) {
+    actions_dist_useGestureCoreActions._defineProperty(this, "_listeners", new Set());
 
     this._ctrl = ctrl;
+    this._gestureKey = gestureKey;
   }
 
   add(element, device, action, handler, options) {
+    const listeners = this._listeners;
     const type = actions_dist_useGestureCoreActions.toDomEventType(device, action);
 
-    const eventOptions = actions_dist_useGestureCoreActions._objectSpread2(actions_dist_useGestureCoreActions._objectSpread2({}, this._ctrl.config.shared.eventOptions), options);
+    const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
 
+    const eventOptions = actions_dist_useGestureCoreActions._objectSpread2(actions_dist_useGestureCoreActions._objectSpread2({}, _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;
   }
@@ -165,3 +173,3 @@
 
-    this._listeners = [];
+    this._listeners.clear();
   }
@@ -229,4 +237,6 @@
       this.touchIds = new Set(actions_dist_useGestureCoreActions.touchIds(event));
+      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;
     }
@@ -313,3 +323,3 @@ }
   ctrl.gestures.add(gestureKey);
-  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl);
+  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
   ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
@@ -316,0 +326,0 @@ }

dist/use-gesture-core.esm.js

@@ -1,2 +0,2 @@
-import { S as SUPPORT, C as ConfigResolverMap, _ as _objectSpread2, a as _defineProperty, t as toDomEventType, i as isTouch, b as touchIds, E as EngineMap, c as chain, p as parseProp, d as toHandlerProp } from './actions-55c076a0.esm.js';
+import { S as SUPPORT, C as ConfigResolverMap, _ as _objectSpread2, a as _defineProperty, t as toDomEventType, i as isTouch, b as touchIds, E as EngineMap, c as chain, p as parseProp, d as toHandlerProp } from './actions-e2a59bb9.esm.js';
 import './maths-b2a210f4.esm.js';
@@ -149,18 +149,26 @@
 class EventStore {
-  constructor(ctrl) {
-    _defineProperty(this, "_listeners", []);
+  constructor(ctrl, gestureKey) {
+    _defineProperty(this, "_listeners", new Set());
 
     this._ctrl = ctrl;
+    this._gestureKey = gestureKey;
   }
 
   add(element, device, action, handler, options) {
+    const listeners = this._listeners;
     const type = toDomEventType(device, action);
 
-    const eventOptions = _objectSpread2(_objectSpread2({}, this._ctrl.config.shared.eventOptions), options);
+    const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
 
+    const eventOptions = _objectSpread2(_objectSpread2({}, _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;
   }
@@ -171,3 +179,3 @@
 
-    this._listeners = [];
+    this._listeners.clear();
   }
@@ -235,4 +243,6 @@
       this.touchIds = new Set(touchIds(event));
+      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;
     }
@@ -319,3 +329,3 @@ }
   ctrl.gestures.add(gestureKey);
-  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl);
+  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
   ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
@@ -322,0 +332,0 @@ }

package.json

 {
   "name": "@use-gesture/core",
-  "version": "10.2.13",
+  "version": "10.2.14",
   "description": "Core engine for receiving gestures",
@@ -5,0 +5,0 @@ "license": "MIT",

src/Controller.ts

@@ -47,5 +47,7 @@ import { EngineMap } from './actions'
       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
     }
@@ -82,3 +84,3 @@ }
   /**
-   * Executes side effects (attaching listeneds to a `config.target`). Ran on
+   * Executes side effects (attaching listeners to a `config.target`). Ran on
    * each render.
@@ -152,3 +154,3 @@ */
   ctrl.gestures.add(gestureKey)
-  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl)
+  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey)
   ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore()
@@ -155,0 +157,0 @@ }

src/engines/DragEngine.ts

@@ -91,3 +91,3 @@ import { CoordinatesEngine } from './CoordinatesEngine'
 
-    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
@@ -99,3 +99,16 @@ // they're released off the target
 
-    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
 
@@ -276,5 +289,5 @@ this.start(event)
     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))
     }
@@ -298,3 +311,7 @@ }
     // 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)
@@ -301,0 +318,0 @@ }

src/EventStore.ts

 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
   }
@@ -18,8 +21,13 @@
   ) {
+    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
   }
@@ -29,4 +37,4 @@
     this._listeners.forEach((remove) => remove())
-    this._listeners = []
+    this._listeners.clear() // just for safety
   }
 }

src/types/internalConfig.ts

@@ -8,3 +8,3 @@ import { GestureKey, CoordinatesKey, ModifierKey } from './config'
   eventOptions: AddEventListenerOptions
-  window?: EventTarget
+  window: EventTarget
   enabled: boolean
@@ -11,0 +11,0 @@ transform?: (v: Vector2) => Vector2

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

325826

increased by0.92%

Lines of code

9299

increased by0.64%

No dependency changes