@use-gesture/core - npm Package Compare versions

Comparing version 10.2.4 to 10.2.5

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('../../dist/actions-55f789c9.cjs.dev.js');
+var actions_dist_useGestureCoreActions = require('../../dist/actions-3ae8a817.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-247ed876.cjs.prod.js');
+var actions_dist_useGestureCoreActions = require('../../dist/actions-a24b5b15.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, p as pinchAction, r as registerAction, s as scrollAction, w as wheelAction } from '../../dist/actions-fd032a26.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-e68631bd.esm.js';
 import '../../dist/maths-b2a210f4.esm.js';

CHANGELOG.md

 # @use-gesture/core
 
+## 10.2.5
+
+### Patch Changes
+
+- cd5533a4c: fix: change TouchEvent detection
+- 548a90985: [Drag] feat: Adding a custom threshold to taps when filtering them (`tapThreshold`)
+- c5067dce0: feat: add `overflow` state attribute telling when offset is overflowing bounds.
+  [Wheel] fix: only update `offset` when it stays within bounds.
+- 4eaabaf1a: fix: add `lostpointercapture` listener for cases when the `pointerup` event is missed.
+
 ## 10.2.4
@@ -4,0 +14,0 @@

dist/declarations/src/config/dragConfigResolver.d.ts

@@ -17,4 +17,5 @@ import { DragConfig, InternalDragOptions, Vector2 } from '../types';
     }): boolean;
-    threshold(this: InternalDragOptions, value: number | Vector2, _k: string, { filterTaps, axis }: {
+    threshold(this: InternalDragOptions, value: number | Vector2, _k: string, { filterTaps, tapsThreshold, axis }: {
         filterTaps?: boolean | undefined;
+        tapsThreshold?: number | undefined;
         axis?: undefined;
@@ -21,0 +22,0 @@ }): [number, number];

dist/declarations/src/config/support.d.ts

@@ -8,2 +8,8 @@ export declare const SUPPORT: {
     gesture: boolean;
+    /**
+     * It looks from https://github.com/pmndrs/use-gesture/discussions/421 that
+     * some touchscreens using webkits don't have 'ontouchstart' in window. So
+     * we're considering that browsers support TouchEvent if they have
+     * `maxTouchPoints > 1`
+     */
     touch: boolean;
@@ -10,0 +16,0 @@ touchscreen: boolean;

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

@@ -123,2 +123,6 @@ /// <reference types="react" />
     /**
+     * The maximum total displacement a tap can have
+     */
+    tapsThreshold?: number;
+    /**
      * Set this option to true when using with @react-three/fiber objects.
@@ -125,0 +129,0 @@ */

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

@@ -28,2 +28,3 @@ import { GestureKey, CoordinatesKey } from './config';
     filterTaps: boolean;
+    tapsThreshold: number;
     useTouch: boolean;
@@ -30,0 +31,0 @@ pointerButtons: number | number[];

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

@@ -71,2 +71,3 @@ import { GestureKey } from './config';
     _step: [false | number, false | number];
+    _movementBound: [false | number, false | number];
     _values: Vector2;
@@ -76,2 +77,3 @@ _initial: Vector2;
     _distance: Vector2;
+    _direction: Vector2;
     _delta: Vector2;
@@ -131,6 +133,10 @@ _bounds: [Vector2, Vector2];
     /**
-     * Direction per axis. -1 when going down, 1 when going up, 0 when still.
+     * Direction per axis. `-1` when going down, `1` when going up, `0` when still.
      */
     direction: Vector2;
     /**
+     * Bound overflow per axis. `-1` when overflowing bounds to the left/top, `1` when overflowing bounds to the right/bottom.
+     */
+    overflow: Vector2;
+    /**
      * True when it's the first event of the active gesture.
@@ -137,0 +143,0 @@ */

dist/declarations/src/utils/events.d.ts

 import { Vector2 } from '../types';
 export declare function toHandlerProp(device: string, action?: string, capture?: boolean): string;
+export declare function parseProp(prop: string): {
+    device: string;
+    capture: boolean;
+    passive: boolean;
+};
 export declare function toDomEventType(device: string, action?: string): string;
@@ -4,0 +9,0 @@ export declare function isTouch(event: UIEvent): boolean;

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('./actions-55f789c9.cjs.dev.js');
+var actions_dist_useGestureCoreActions = require('./actions-3ae8a817.cjs.dev.js');
 require('./maths-125ca19a.cjs.dev.js');
@@ -300,8 +300,9 @@
     for (const handlerProp in props) {
-      let eventKey = handlerProp.substr(2).toLowerCase();
-      const capture = !!~eventKey.indexOf('capture');
-      const passive = !!~eventKey.indexOf('passive');
-      if (capture || passive) eventKey = eventKey.replace(/capture|passive/g, '');
+      const {
+        device,
+        capture,
+        passive
+      } = actions_dist_useGestureCoreActions.parseProp(handlerProp);
 
-      this._targetEventStore.add(target, eventKey, '', props[handlerProp], {
+      this._targetEventStore.add(target, device, '', props[handlerProp], {
         capture,
@@ -308,0 +309,0 @@ passive

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('./actions-247ed876.cjs.prod.js');
+var actions_dist_useGestureCoreActions = require('./actions-a24b5b15.cjs.prod.js');
 require('./maths-a42ecce1.cjs.prod.js');
@@ -289,8 +289,9 @@
     for (const handlerProp in props) {
-      let eventKey = handlerProp.substr(2).toLowerCase();
-      const capture = !!~eventKey.indexOf('capture');
-      const passive = !!~eventKey.indexOf('passive');
-      if (capture || passive) eventKey = eventKey.replace(/capture|passive/g, '');
+      const {
+        device,
+        capture,
+        passive
+      } = actions_dist_useGestureCoreActions.parseProp(handlerProp);
 
-      this._targetEventStore.add(target, eventKey, '', props[handlerProp], {
+      this._targetEventStore.add(target, device, '', props[handlerProp], {
         capture,
@@ -297,0 +298,0 @@ passive

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, d as toHandlerProp } from './actions-fd032a26.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-e68631bd.esm.js';
 import './maths-b2a210f4.esm.js';
@@ -295,8 +295,9 @@
     for (const handlerProp in props) {
-      let eventKey = handlerProp.substr(2).toLowerCase();
-      const capture = !!~eventKey.indexOf('capture');
-      const passive = !!~eventKey.indexOf('passive');
-      if (capture || passive) eventKey = eventKey.replace(/capture|passive/g, '');
+      const {
+        device,
+        capture,
+        passive
+      } = parseProp(handlerProp);
 
-      this._targetEventStore.add(target, eventKey, '', props[handlerProp], {
+      this._targetEventStore.add(target, device, '', props[handlerProp], {
         capture,
@@ -303,0 +304,0 @@ passive

package.json

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

src/config/dragConfigResolver.ts

@@ -20,4 +20,4 @@ import { DragConfig, InternalDragOptions, Vector2 } from '../types'
   ) {
-    this.useTouch = SUPPORT.touch && touch
-    return SUPPORT.pointerLock && lock
+    this.useTouch = touch && SUPPORT.touch
+    return lock && SUPPORT.pointerLock
   },
@@ -46,5 +46,12 @@ device(this: InternalDragOptions, _v: any, _k: string) {
   },
-  threshold(this: InternalDragOptions, value: number | Vector2, _k: string, { filterTaps = false, axis = undefined }) {
-    const threshold = V.toVector(value, filterTaps ? 3 : axis ? 1 : 0)
+  threshold(
+    this: InternalDragOptions,
+    value: number | Vector2,
+    _k: string,
+    { filterTaps = false, tapsThreshold = 3, axis = undefined }
+  ) {
+    // TODO add warning when value is 0 and filterTaps or axis is set
+    const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0)
     this.filterTaps = filterTaps
+    this.tapsThreshold = tapsThreshold
     return threshold
@@ -51,0 +58,0 @@ },

src/config/pinchConfigResolver.ts

@@ -10,3 +10,3 @@ import { PinchConfig, GenericOptions, InternalPinchOptions, State, Vector2 } from '../types'
   useTouch(_v: any, _k: string, { pointer: { touch = false } = {} }) {
-    return SUPPORT.touch && touch
+    return touch && SUPPORT.touch
   },
@@ -13,0 +13,0 @@ device(this: InternalPinchOptions, _v: any, _k: string, config: { shared: GenericOptions } & PinchConfig) {

src/config/support.ts

@@ -32,3 +32,10 @@ const isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement
   gesture: supportsGestureEvents(),
-  touch: supportsTouchEvents(),
+  /**
+   * It looks from https://github.com/pmndrs/use-gesture/discussions/421 that
+   * some touchscreens using webkits don't have 'ontouchstart' in window. So
+   * we're considering that browsers support TouchEvent if they have
+   * `maxTouchPoints > 1`
+   */
+  // touch: supportsTouchEvents(),
+  touch: isTouchScreen(),
   touchscreen: isTouchScreen(),
@@ -35,0 +42,0 @@ pointer: supportsPointerEvents(),

src/Controller.ts

 import { EngineMap } from './actions'
 import { parse } from './config/resolver'
-import { isTouch, toHandlerProp, touchIds } from './utils/events'
+import { isTouch, parseProp, toHandlerProp, touchIds } from './utils/events'
 import { EventStore } from './EventStore'
@@ -142,10 +142,4 @@ import { TimeoutStore } from './TimeoutStore'
     for (const handlerProp in props) {
-      // onPointerMoveCapture => pointermovecapture
-      let eventKey = handlerProp.substr(2).toLowerCase()
-      // capture = true
-      const capture = !!~eventKey.indexOf('capture')
-      const passive = !!~eventKey.indexOf('passive')
-      // pointermovecapture => pointermove
-      if (capture || passive) eventKey = eventKey.replace(/capture|passive/g, '')
-      this._targetEventStore.add(target, eventKey, '', props[handlerProp], { capture, passive })
+      const { device, capture, passive } = parseProp(handlerProp)
+      this._targetEventStore.add(target, device, '', props[handlerProp], { capture, passive })
     }
@@ -152,0 +146,0 @@ }

src/engines/DragEngine.ts

@@ -210,3 +210,3 @@ import { CoordinatesEngine } from './CoordinatesEngine'
     const [dx, dy] = state._distance
-    state.tap = dx <= 3 && dy <= 3
+    state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold
 
@@ -327,2 +327,3 @@ if (state.tap && config.filterTaps) {
     bindFunction(device, 'start', this.pointerDown.bind(this))
+
     if (this.config.pointerCapture) {
@@ -332,3 +333,5 @@ bindFunction(device, 'change', this.pointerMove.bind(this))
       bindFunction(device, 'cancel', this.pointerUp.bind(this))
+      bindFunction('lostPointerCapture', '', this.pointerUp.bind(this))
     }
+
     bindFunction('key', 'down', this.keyDown.bind(this))
@@ -338,3 +341,3 @@ bindFunction('key', 'up', this.keyUp.bind(this))
     if (this.config.filterTaps) {
-      bindFunction('click', '', this.pointerClick.bind(this), { capture: true })
+      bindFunction('click', '', this.pointerClick.bind(this), { capture: true, passive: false })
     }
@@ -341,0 +344,0 @@ }

src/engines/Engine.ts

@@ -159,2 +159,3 @@ import { Controller } from '../Controller'
     state._distance = [0, 0]
+    state._direction = [0, 0]
     state._delta = [0, 0]
@@ -169,2 +170,4 @@ // prettier-ignore
     state.distance = [0, 0]
+    state.overflow = [0, 0]
+    state._movementBound = [false, false]
     state.velocity = [0, 0]
@@ -311,2 +314,3 @@ state.movement = [0, 0]
           state.direction = state.delta.map(Math.sign) as Vector2
+          state._direction = state._delta.map(Math.sign) as Vector2
 
@@ -321,2 +325,20 @@ if (!state.first && dt > 0) {
 
+    const [ox, oy] = state.offset
+    const [[x0, x1], [y0, y1]] = state._bounds
+    state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0]
+
+    // _movementBound will store the latest _movement value
+    // before it went off bounds.
+    state._movementBound[0] = state.overflow[0]
+      ? state._movementBound[0] === false
+        ? state._movement[0]
+        : state._movementBound[0]
+      : false
+
+    state._movementBound[1] = state.overflow[1]
+      ? state._movementBound[1] === false
+        ? state._movement[1]
+        : state._movementBound[1]
+      : false
+
     // @ts-ignore
@@ -323,0 +345,0 @@ const rubberband: Vector2 = state._active ? config.rubberband || [0, 0] : [0, 0]

src/engines/WheelEngine.ts

@@ -23,4 +23,17 @@ import { CoordinatesEngine } from './CoordinatesEngine'
     state._delta = wheelValues(event)
-    V.addTo(this.state._movement, state._delta)
+    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
+    }
+
     this.compute(event)
@@ -27,0 +40,0 @@ this.emit()

src/types/config.ts

@@ -131,2 +131,6 @@ import { State } from './state'
   /**
+   * The maximum total displacement a tap can have   
+   */
+  tapsThreshold?: number
+  /**
    * Set this option to true when using with @react-three/fiber objects.
@@ -133,0 +137,0 @@ */

src/types/internalConfig.ts

@@ -32,2 +32,3 @@ import { GestureKey, CoordinatesKey } from './config'
   filterTaps: boolean
+  tapsThreshold: number
   useTouch: boolean
@@ -34,0 +35,0 @@ pointerButtons: number | number[]

src/types/state.ts

@@ -74,2 +74,3 @@ import { GestureKey } from './config'
   _step: [false | number, false | number]
+  _movementBound: [false | number, false | number]
   _values: Vector2
@@ -79,2 +80,3 @@ _initial: Vector2
   _distance: Vector2
+  _direction: Vector2
   _delta: Vector2
@@ -134,6 +136,10 @@ _bounds: [Vector2, Vector2]
   /**
-   * Direction per axis. -1 when going down, 1 when going up, 0 when still.
+   * Direction per axis. `-1` when going down, `1` when going up, `0` when still.
    */
   direction: Vector2
   /**
+   * Bound overflow per axis. `-1` when overflowing bounds to the left/top, `1` when overflowing bounds to the right/bottom.
+   */
+  overflow: Vector2
+  /**
    * True when it's the first event of the active gesture.
@@ -140,0 +146,0 @@ */

src/utils/events.ts

@@ -21,2 +21,17 @@ import { Vector2 } from '../types'
 
+const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture']
+
+export function parseProp(prop: string) {
+  let eventKey = prop.substring(2).toLowerCase()
+  const passive = !!~eventKey.indexOf('passive')
+  if (passive) eventKey = eventKey.replace('passive', '')
+
+  const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture'
+  // capture = true
+  const capture = !!~eventKey.indexOf(captureKey)
+  // pointermovecapture => pointermove
+  if (capture) eventKey = eventKey.replace('capture', '')
+  return { device: eventKey, capture, passive }
+}
+
 export function toDomEventType(device: string, action = '') {
@@ -23,0 +38,0 @@ const deviceProps = EVENT_TYPE_MAP[device]

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

306774

increased by2.77%

Lines of code

8891

increased by1.95%

Number of low supply chain risk alerts

22

decreased by-29.03%

No dependency changes