@use-gesture/core - npm Package Compare versions

Comparing version 10.2.9 to 10.2.10

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('../../dist/actions-42114f21.cjs.dev.js');
+var actions_dist_useGestureCoreActions = require('../../dist/actions-f4308453.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-6a636960.cjs.prod.js');
+var actions_dist_useGestureCoreActions = require('../../dist/actions-3f0bff14.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-b6438de0.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-8fb255d4.esm.js';
 import '../../dist/maths-b2a210f4.esm.js';

CHANGELOG.md

 # @use-gesture/core
 
+## 10.2.10
+
+### Patch Changes
+
+- f593dbe09: - fix: increase `PINCH_WHEEL_RATIO` to `100` to slow down zoom on wheel-based devices.
+  - fix: force drag to start no matter the threshold when delay is reached.
+  - fix: improve `preventScroll`.
+
 ## 10.2.9
@@ -4,0 +12,0 @@

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

@@ -9,3 +9,3 @@ import { DragConfig, InternalDragOptions, Vector2 } from '../types';
     device(this: InternalDragOptions, _v: any, _k: string, { pointer: { touch, lock, mouse } }: DragConfig): "touch" | "mouse" | "pointer";
-    preventScroll(this: InternalDragOptions, value: number | boolean | undefined, _k: string, { preventScrollAxis }: DragConfig): number | false;
+    preventScrollAxis(this: InternalDragOptions, value: 'x' | 'y' | 'xy', _k: string, { preventScroll }: DragConfig): "x" | "y" | "xy" | undefined;
     pointerCapture(this: InternalDragOptions, _v: any, _k: string, { pointer: { capture, buttons } }: {
@@ -12,0 +12,0 @@ pointer?: {

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

@@ -31,4 +31,4 @@ import { GestureKey, CoordinatesKey } from './config';
     pointerCapture: boolean;
-    preventScroll: number;
-    preventScrollAxis: 'x' | 'y' | 'xy';
+    preventScrollDelay?: number;
+    preventScrollAxis?: 'x' | 'y' | 'xy';
     pointerLock: boolean;
@@ -35,0 +35,0 @@ device: 'pointer' | 'touch' | 'mouse';

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

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

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var actions_dist_useGestureCoreActions = require('./actions-6a636960.cjs.prod.js');
+var actions_dist_useGestureCoreActions = require('./actions-3f0bff14.cjs.prod.js');
 require('./maths-a42ecce1.cjs.prod.js');
@@ -8,0 +8,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-b6438de0.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-8fb255d4.esm.js';
 import './maths-b2a210f4.esm.js';
@@ -3,0 +3,0 @@

package.json

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

src/config/dragConfigResolver.ts

@@ -27,12 +27,11 @@ import { DragConfig, InternalDragOptions, Vector2 } from '../types'
   },
-  preventScroll(
-    this: InternalDragOptions,
-    value: number | boolean = false,
-    _k: string,
-    { preventScrollAxis = 'y' }: DragConfig
-  ) {
-    this.preventScrollAxis = preventScrollAxis
-    if (!SUPPORT.touchscreen) return false
-    if (typeof value === 'number') return value
-    return value ? DEFAULT_PREVENT_SCROLL_DELAY : false
+  preventScrollAxis(this: InternalDragOptions, value: 'x' | 'y' | 'xy', _k: string, { preventScroll }: DragConfig) {
+    this.preventScrollDelay =
+      typeof preventScroll === 'number'
+        ? preventScroll
+        : preventScroll || (preventScroll === undefined && value)
+        ? DEFAULT_PREVENT_SCROLL_DELAY
+        : undefined
+    if (!SUPPORT.touchscreen || preventScroll === false) return undefined
+    return value ? value : preventScroll !== undefined ? 'y' : undefined
   },
@@ -39,0 +38,0 @@ pointerCapture(this: InternalDragOptions, _v: any, _k: string, { pointer: { capture = true, buttons = 1 } = {} }) {

src/engines/DragEngine.ts

@@ -109,3 +109,6 @@ import { CoordinatesEngine } from './CoordinatesEngine'
 
-    if (config.preventScroll) {
+    if (config.preventScrollAxis) {
+      // when preventScrollAxis is set we don't consider the gesture active
+      // until it's deliberate
+      state._active = false
       this.setupScrollPrevention(event)
@@ -153,6 +156,8 @@ } else if (config.delay > 0) {
 
-    if (state._delayed) {
+    // if the gesture is delayed but deliberate, then we can start it
+    // immediately.
+    if (state._delayed && state.intentional) {
       this.timeoutStore.remove('dragDelay')
-      // makes sure first is still true when moving for the first time after a
-      // delay
+      // makes sure `first` is still true when moving for the first time after a
+      // delay.
       state.active = false
@@ -163,3 +168,3 @@ this.startPointerDrag(event)
 
-    if (config.preventScroll && !state._preventScroll) {
+    if (config.preventScrollAxis && !state._preventScroll) {
       if (state.axis) {
@@ -203,3 +208,4 @@ if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') {
 
-    if (!state._pointerActive) return
+    if (!state._active || !state._pointerActive) return
+
     const id = pointerId(event)
@@ -243,7 +249,7 @@ if (state._pointerId !== undefined && id !== state._pointerId) return
     const config = this.config
-    let device = config.device
+    const device = config.device
 
     if (process.env.NODE_ENV === 'development') {
       try {
-        if (device === 'pointer') {
+        if (device === 'pointer' && config.preventScrollDelay === undefined) {
           // @ts-ignore (warning for r3f)
@@ -290,5 +296,5 @@ const currentTarget = 'uv' in event ? event.sourceEvent.currentTarget : event.currentTarget
     this.eventStore.add(this.sharedConfig.window!, 'touch', 'change', this.preventScroll.bind(this), { passive: false })
-    this.eventStore.add(this.sharedConfig.window!, 'touch', 'end', this.clean.bind(this), { passive: false })
-    this.eventStore.add(this.sharedConfig.window!, 'touch', 'cancel', this.clean.bind(this), { passive: false })
-    this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScroll, event)
+    this.eventStore.add(this.sharedConfig.window!, 'touch', 'end', this.clean.bind(this))
+    this.eventStore.add(this.sharedConfig.window!, 'touch', 'cancel', this.clean.bind(this))
+    this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay!, event)
   }
@@ -298,3 +304,11 @@
     this.state._delayed = true
-    this.timeoutStore.add('dragDelay', this.startPointerDrag.bind(this), this.config.delay, event)
+    this.timeoutStore.add(
+      'dragDelay',
+      () => {
+        // forces drag to start no matter the threshold when delay is reached
+        this.state._step = [0, 0]
+        this.startPointerDrag(event)
+      },
+      this.config.delay
+    )
   }
@@ -301,0 +315,0 @@

src/engines/Engine.ts

@@ -261,3 +261,3 @@ import { Controller } from '../Controller'
     if (config.hasCustomTransform) {
-      // When the user is using a custom transform, we're using _step to store
+      // When the user is using a custom transform, we're using `_step` to store
       // the first value passing the threshold.
@@ -264,0 +264,0 @@ if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0]

src/engines/PinchEngine.ts

@@ -7,3 +7,3 @@ import { Engine } from './Engine'
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30
-const PINCH_WHEEL_RATIO = 36
+const PINCH_WHEEL_RATIO = 100
 
@@ -10,0 +10,0 @@ export class PinchEngine extends Engine<'pinch'> {

src/types/internalConfig.ts

@@ -35,4 +35,4 @@ import { GestureKey, CoordinatesKey } from './config'
   pointerCapture: boolean
-  preventScroll: number
-  preventScrollAxis: 'x' | 'y' | 'xy'
+  preventScrollDelay?: number
+  preventScrollAxis?: 'x' | 'y' | 'xy'
   pointerLock: boolean
@@ -39,0 +39,0 @@ device: 'pointer' | 'touch' | 'mouse'

No alert changes

Improved metrics

Total package byte prevSize

310461

increased by0.48%

Lines of code

8920

increased by0.1%

No dependency changes