@use-gesture/core - npm Package Compare versions

Comparing version 10.0.0-beta.5 to 10.0.0-beta.6

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

@@ -1,2 +0,2 @@
-import { DragConfig, GenericOptions, InternalDragOptions, Vector2 } from '../types';
+import { DragConfig, InternalDragOptions, Vector2 } from '../types';
 export declare const DEFAULT_DRAG_DELAY = 180;
@@ -8,5 +8,3 @@ export declare const DEFAULT_SWIPE_VELOCITY = 0.5;
     pointerLock(this: InternalDragOptions, _v: any, _k: string, { pointer: { lock, touch } }: DragConfig): boolean;
-    device(this: InternalDragOptions, _v: any, _k: string, config: {
-        shared: GenericOptions;
-    }): "pointer" | "touch" | "mouse";
+    device(this: InternalDragOptions, _v: any, _k: string): "touch" | "mouse" | "pointer";
     preventScroll(value?: boolean): boolean;
@@ -39,4 +37,4 @@ pointerCapture(this: InternalDragOptions, _v: any, _k: string, { pointer: { capture } }: {
     transform(value: any, _k: string, config: {
-        shared: GenericOptions;
+        shared: import("../types").GenericOptions;
     }): any;
 };

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

@@ -10,6 +10,3 @@ import { PinchConfig, GenericOptions, InternalPinchOptions, State, Vector2 } from '../types';
         shared: GenericOptions;
-    } & PinchConfig): "pointer" | "touch" | "gesture" | undefined;
-    useRad(_v: any, _k: string, config: {
-        shared: GenericOptions;
-    } & PinchConfig): boolean | undefined;
+    } & PinchConfig): "touch" | "pointer" | "gesture" | undefined;
     bounds(_v: any, _k: string, { scaleBounds, angleBounds }: PinchConfig): number[][] | ((state: State) => number[][]);
@@ -16,0 +13,0 @@ threshold(this: InternalPinchOptions, value: number | Vector2, _k: string, config: PinchConfig): [number, number];

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

@@ -6,3 +6,2 @@ import { Target, Vector2 } from '../types';
     enabled(value?: boolean): boolean;
-    r3f(value?: boolean): boolean;
     window(value?: (Window & typeof globalThis) | undefined): (Window & typeof globalThis) | undefined;
@@ -9,0 +8,0 @@ eventOptions({ passive, capture }?: {

dist/declarations/src/engines/PinchEngine.d.ts

@@ -36,2 +36,1 @@ import { Engine } from './Engine';
 }
-export declare function convertAngle(engine: PinchEngine, value: number): number;

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

@@ -25,6 +25,2 @@ /// <reference types="react" />
     /**
-     * Performs @react-three/fiber specific operations when set to true.
-     */
-    r3f?: boolean;
-    /**
      * A function that you can use to transform movement and offset values. Useful
@@ -105,6 +101,2 @@ * to map your screen coordinates to custom space coordinates such as a
     /**
-     * Which units to use for calculating rotation angle.
-     */
-    angleUnit?: 'deg' | 'rad';
-    /**
      * Scales OR rotates when set to 'lock'.
@@ -111,0 +103,0 @@ */

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

@@ -9,3 +9,2 @@ import { GestureKey, CoordinatesKey } from './config';
     enabled: boolean;
-    r3f: boolean;
     transform: (v: Vector2) => Vector2;
@@ -46,3 +45,2 @@ };
     device: 'gesture' | 'pointer' | 'touch' | undefined;
-    useRad: boolean;
     lockDirection: boolean;
@@ -49,0 +47,0 @@ };

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

@@ -194,6 +194,2 @@ 'use strict';
 
-  r3f(value = false) {
-    return value;
-  },
-
   window(value = SUPPORT.isBrowser ? window : undefined) {
@@ -244,6 +240,5 @@ return value;
     window,
-    enabled,
-    r3f
+    enabled
   } = _ref,
-        rest = _objectWithoutProperties(_ref, ["target", "eventOptions", "window", "enabled", "r3f"]);
+        rest = _objectWithoutProperties(_ref, ["target", "eventOptions", "window", "enabled"]);
 
@@ -255,4 +250,3 @@ const _config = {
       window,
-      enabled,
-      r3f
+      enabled
     }, sharedConfigResolver)
@@ -930,3 +924,3 @@ };
       if (value !== undefined) {
-        throw `[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`;
+        throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`);
       }
@@ -937,3 +931,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``;
+        throw Error(`[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``);
       }
@@ -944,3 +938,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`initial\` option has been renamed to \`from\`.`;
+        throw Error(`[@use-gesture]: \`initial\` option has been renamed to \`from\`.`);
       }
@@ -1180,4 +1174,2 @@ }
     let device = config.device;
-    const target = event.target;
-    const currentTarget = event.currentTarget;
 
@@ -1187,8 +1179,7 @@ if (process.env.NODE_ENV === 'development') {
         if (device === 'pointer') {
-          const _currentTarget = this.sharedConfig.r3f ? event.sourceEvent.currentTarget : event.currentTarget;
+          const currentTarget = 'uv' in event ? event.sourceEvent.currentTarget : event.currentTarget;
+          const style = window.getComputedStyle(currentTarget);
 
-          const style = window.getComputedStyle(_currentTarget);
-
           if (style.touchAction === 'auto') {
-            console.warn(`[@use-gesture]: The drag target has its \`touch-action\` style property set to \`auto\`. It is recommended to add \`touch-action: 'none'\` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.\n\nThis message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.`, _currentTarget);
+            console.warn(`[@use-gesture]: The drag target has its \`touch-action\` style property set to \`auto\`. It is recommended to add \`touch-action: 'none'\` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.\n\nThis message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.`, currentTarget);
           }
@@ -1200,21 +1191,8 @@ }
     if (config.pointerLock) {
-      currentTarget.requestPointerLock();
+      event.currentTarget.requestPointerLock();
     }
 
-    if (device === 'touch' || config.pointerCapture) {
-      if (!this.sharedConfig.r3f) {
-        if (process.env.NODE_ENV === 'development') {
-          if (event.uv) {
-            console.warn(`[@use-gesture]: You're probably using \`use-gesture\` on with \`@react-three/fiber\` without setting the drag config option \`r3f: true\`. The gesture will now probably fail.`);
-          }
-        }
-
-        if (document.pointerLockElement === target) device = 'mouse';
-        this.eventStore.add(target, device, 'change', this.pointerMove.bind(this));
-      }
-    } else {
-      if (!this.sharedConfig.r3f) {
-        this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this));
-        this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this));
-      }
+    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));
     }
@@ -1280,10 +1258,11 @@ }
     bindFunction(device, 'start', this.pointerDown.bind(this));
-    bindFunction(device, 'end', this.pointerUp.bind(this));
-    bindFunction('key', 'down', this.keyDown.bind(this));
-    bindFunction('key', 'up', this.keyUp.bind(this));
 
-    if (this.sharedConfig.r3f) {
+    if (this.config.pointerCapture) {
       bindFunction(device, 'change', this.pointerMove.bind(this));
+      bindFunction(device, 'end', this.pointerUp.bind(this));
     }
 
+    bindFunction('key', 'down', this.keyDown.bind(this));
+    bindFunction('key', 'up', this.keyUp.bind(this));
+
     if (this.config.filterTaps) {
@@ -1317,4 +1296,3 @@ bindFunction('click', '', this.pointerClick.bind(this), {
 
-  device(_v, _k, config) {
-    if (config.shared.r3f) return 'pointer';
+  device(_v, _k) {
     if (this.useTouch) return 'touch';
@@ -1379,3 +1357,3 @@ if (this.pointerLock) return 'mouse';
       if (value !== undefined) {
-        throw `[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`;
+        throw Error(`[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`);
       }
@@ -1386,3 +1364,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`;
+        throw Error(`[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`);
       }
@@ -1393,3 +1371,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`;
+        throw Error(`[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`);
       }
@@ -1400,3 +1378,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`;
+        throw Error(`[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`);
       }
@@ -1407,3 +1385,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`;
+        throw Error(`[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`);
       }
@@ -1416,3 +1394,2 @@ }
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
-const SCALE_ANGLE_RATIO_INTENT_RAD = SCALE_ANGLE_RATIO_INTENT_DEG / 180 * Math.PI;
 const PINCH_WHEEL_RATIO = 60;
@@ -1462,4 +1439,3 @@ class PinchEngine extends Engine {
     if (!state.axis) {
-      const angleScaleRatio = this.config.useRad ? SCALE_ANGLE_RATIO_INTENT_RAD : SCALE_ANGLE_RATIO_INTENT_DEG;
-      const axisMovementDifference = Math.abs(v[0]) * angleScaleRatio - Math.abs(v[1]);
+      const axisMovementDifference = Math.abs(v[0]) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(v[1]);
       if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale';
@@ -1557,3 +1533,3 @@ }
     state.turns = delta_turns;
-    state._movement = [state.values[0] / state.initial[0] - 1, convertAngle(this, state.values[1] - state.initial[1])];
+    state._movement = [state.values[0] / state.initial[0] - 1, state.values[1] - state.initial[1]];
     this.compute(event);
@@ -1613,3 +1589,3 @@ this.emit();
     const _previousMovement = state._movement;
-    state._movement = [event.scale - 1, convertAngle(this, event.rotation)];
+    state._movement = [event.scale - 1, event.rotation];
     state._delta = V.sub(state._movement, _previousMovement);
@@ -1634,5 +1610,2 @@ this.compute(event);
   wheelStart(event) {
-    if (event.cancelable) event.preventDefault();else if (process.env.NODE_ENV === 'development') {
-      console.warn(`[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option and \`config.eventOptions.passive\` set to \`false\`. This message will only appear in development mode.`, event.currentTarget);
-    }
     this.start(event);
@@ -1643,3 +1616,14 @@ this.wheelChange(event);
   wheelChange(event) {
-    if (event.cancelable) event.preventDefault();
+    const isR3f = ('uv' in event);
+
+    if (!isR3f) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+
+      if (process.env.NODE_ENV === 'development' && !event.defaultPrevented) {
+        console.warn(`[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option.\n\nThis message will only appear in development mode.`);
+      }
+    }
+
     const state = this.state;
@@ -1667,10 +1651,10 @@ state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO, 0];
       bindFunction(device, 'end', this[device + 'End'].bind(this));
-    } else bindFunction('wheel', '', this.wheel.bind(this));
+    } else {
+      bindFunction('wheel', '', this.wheel.bind(this), {
+        passive: false
+      });
+    }
   }
 
 }
-function convertAngle(engine, value) {
-  if (engine.config.useRad) return value / 180 * Math.PI;
-  return value;
-}
 
@@ -1689,3 +1673,2 @@ const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
     if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture';
-    if (sharedConfig.r3f) return 'pointer';
     if (this.useTouch) return 'touch';
@@ -1696,6 +1679,2 @@ if (SUPPORT.touch && SUPPORT.pointer) return 'pointer';
 
-  useRad(_v, _k, config) {
-    return config.angleUnit === 'rad' || config.angleUnit == null && config.shared.r3f;
-  },
-
   bounds(_v, _k, {
@@ -1727,4 +1706,3 @@ scaleBounds = {},
     this.lockDirection = config.axis === 'lock';
-    const angleRatio = this.useRad ? Math.PI / 180 : 1;
-    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3 * angleRatio] : 0);
+    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
     return threshold;
@@ -1731,0 +1709,0 @@ }

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

@@ -194,6 +194,2 @@ 'use strict';
 
-  r3f(value = false) {
-    return value;
-  },
-
   window(value = SUPPORT.isBrowser ? window : undefined) {
@@ -244,6 +240,5 @@ return value;
     window,
-    enabled,
-    r3f
+    enabled
   } = _ref,
-        rest = _objectWithoutProperties(_ref, ["target", "eventOptions", "window", "enabled", "r3f"]);
+        rest = _objectWithoutProperties(_ref, ["target", "eventOptions", "window", "enabled"]);
 
@@ -255,4 +250,3 @@ const _config = {
       window,
-      enabled,
-      r3f
+      enabled
     }, sharedConfigResolver)
@@ -1151,20 +1145,10 @@ };
     let device = config.device;
-    const target = event.target;
-    const currentTarget = event.currentTarget;
 
     if (config.pointerLock) {
-      currentTarget.requestPointerLock();
+      event.currentTarget.requestPointerLock();
     }
 
-    if (device === 'touch' || config.pointerCapture) {
-      if (!this.sharedConfig.r3f) {
-
-        if (document.pointerLockElement === target) device = 'mouse';
-        this.eventStore.add(target, device, 'change', this.pointerMove.bind(this));
-      }
-    } else {
-      if (!this.sharedConfig.r3f) {
-        this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this));
-        this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this));
-      }
+    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));
     }
@@ -1230,10 +1214,11 @@ }
     bindFunction(device, 'start', this.pointerDown.bind(this));
-    bindFunction(device, 'end', this.pointerUp.bind(this));
-    bindFunction('key', 'down', this.keyDown.bind(this));
-    bindFunction('key', 'up', this.keyUp.bind(this));
 
-    if (this.sharedConfig.r3f) {
+    if (this.config.pointerCapture) {
       bindFunction(device, 'change', this.pointerMove.bind(this));
+      bindFunction(device, 'end', this.pointerUp.bind(this));
     }
 
+    bindFunction('key', 'down', this.keyDown.bind(this));
+    bindFunction('key', 'up', this.keyUp.bind(this));
+
     if (this.config.filterTaps) {
@@ -1267,4 +1252,3 @@ bindFunction('click', '', this.pointerClick.bind(this), {
 
-  device(_v, _k, config) {
-    if (config.shared.r3f) return 'pointer';
+  device(_v, _k) {
     if (this.useTouch) return 'touch';
@@ -1326,3 +1310,2 @@ if (this.pointerLock) return 'mouse';
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
-const SCALE_ANGLE_RATIO_INTENT_RAD = SCALE_ANGLE_RATIO_INTENT_DEG / 180 * Math.PI;
 const PINCH_WHEEL_RATIO = 60;
@@ -1372,4 +1355,3 @@ class PinchEngine extends Engine {
     if (!state.axis) {
-      const angleScaleRatio = this.config.useRad ? SCALE_ANGLE_RATIO_INTENT_RAD : SCALE_ANGLE_RATIO_INTENT_DEG;
-      const axisMovementDifference = Math.abs(v[0]) * angleScaleRatio - Math.abs(v[1]);
+      const axisMovementDifference = Math.abs(v[0]) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(v[1]);
       if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale';
@@ -1467,3 +1449,3 @@ }
     state.turns = delta_turns;
-    state._movement = [state.values[0] / state.initial[0] - 1, convertAngle(this, state.values[1] - state.initial[1])];
+    state._movement = [state.values[0] / state.initial[0] - 1, state.values[1] - state.initial[1]];
     this.compute(event);
@@ -1523,3 +1505,3 @@ this.emit();
     const _previousMovement = state._movement;
-    state._movement = [event.scale - 1, convertAngle(this, event.rotation)];
+    state._movement = [event.scale - 1, event.rotation];
     state._delta = V.sub(state._movement, _previousMovement);
@@ -1544,3 +1526,2 @@ this.compute(event);
   wheelStart(event) {
-    if (event.cancelable) event.preventDefault();
     this.start(event);
@@ -1551,3 +1532,10 @@ this.wheelChange(event);
   wheelChange(event) {
-    if (event.cancelable) event.preventDefault();
+    const isR3f = ('uv' in event);
+
+    if (!isR3f) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+
     const state = this.state;
@@ -1575,10 +1563,10 @@ state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO, 0];
       bindFunction(device, 'end', this[device + 'End'].bind(this));
-    } else bindFunction('wheel', '', this.wheel.bind(this));
+    } else {
+      bindFunction('wheel', '', this.wheel.bind(this), {
+        passive: false
+      });
+    }
   }
 
 }
-function convertAngle(engine, value) {
-  if (engine.config.useRad) return value / 180 * Math.PI;
-  return value;
-}
 
@@ -1597,3 +1585,2 @@ const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
     if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture';
-    if (sharedConfig.r3f) return 'pointer';
     if (this.useTouch) return 'touch';
@@ -1604,6 +1591,2 @@ if (SUPPORT.touch && SUPPORT.pointer) return 'pointer';
 
-  useRad(_v, _k, config) {
-    return config.angleUnit === 'rad' || config.angleUnit == null && config.shared.r3f;
-  },
-
   bounds(_v, _k, {
@@ -1635,4 +1618,3 @@ scaleBounds = {},
     this.lockDirection = config.axis === 'lock';
-    const angleRatio = this.useRad ? Math.PI / 180 : 1;
-    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3 * angleRatio] : 0);
+    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
     return threshold;
@@ -1639,0 +1621,0 @@ }

dist/use-gesture-core.esm.js

@@ -190,6 +190,2 @@ function _defineProperty(obj, key, value) {
 
-  r3f(value = false) {
-    return value;
-  },
-
   window(value = SUPPORT.isBrowser ? window : undefined) {
@@ -240,6 +236,5 @@ return value;
     window,
-    enabled,
-    r3f
+    enabled
   } = _ref,
-        rest = _objectWithoutProperties(_ref, ["target", "eventOptions", "window", "enabled", "r3f"]);
+        rest = _objectWithoutProperties(_ref, ["target", "eventOptions", "window", "enabled"]);
 
@@ -251,4 +246,3 @@ const _config = {
       window,
-      enabled,
-      r3f
+      enabled
     }, sharedConfigResolver)
@@ -926,3 +920,3 @@ };
       if (value !== undefined) {
-        throw `[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`;
+        throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`);
       }
@@ -933,3 +927,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``;
+        throw Error(`[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``);
       }
@@ -940,3 +934,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`initial\` option has been renamed to \`from\`.`;
+        throw Error(`[@use-gesture]: \`initial\` option has been renamed to \`from\`.`);
       }
@@ -1176,4 +1170,2 @@ }
     let device = config.device;
-    const target = event.target;
-    const currentTarget = event.currentTarget;
 
@@ -1183,8 +1175,7 @@ if (process.env.NODE_ENV === 'development') {
         if (device === 'pointer') {
-          const _currentTarget = this.sharedConfig.r3f ? event.sourceEvent.currentTarget : event.currentTarget;
+          const currentTarget = 'uv' in event ? event.sourceEvent.currentTarget : event.currentTarget;
+          const style = window.getComputedStyle(currentTarget);
 
-          const style = window.getComputedStyle(_currentTarget);
-
           if (style.touchAction === 'auto') {
-            console.warn(`[@use-gesture]: The drag target has its \`touch-action\` style property set to \`auto\`. It is recommended to add \`touch-action: 'none'\` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.\n\nThis message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.`, _currentTarget);
+            console.warn(`[@use-gesture]: The drag target has its \`touch-action\` style property set to \`auto\`. It is recommended to add \`touch-action: 'none'\` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.\n\nThis message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.`, currentTarget);
           }
@@ -1196,21 +1187,8 @@ }
     if (config.pointerLock) {
-      currentTarget.requestPointerLock();
+      event.currentTarget.requestPointerLock();
     }
 
-    if (device === 'touch' || config.pointerCapture) {
-      if (!this.sharedConfig.r3f) {
-        if (process.env.NODE_ENV === 'development') {
-          if (event.uv) {
-            console.warn(`[@use-gesture]: You're probably using \`use-gesture\` on with \`@react-three/fiber\` without setting the drag config option \`r3f: true\`. The gesture will now probably fail.`);
-          }
-        }
-
-        if (document.pointerLockElement === target) device = 'mouse';
-        this.eventStore.add(target, device, 'change', this.pointerMove.bind(this));
-      }
-    } else {
-      if (!this.sharedConfig.r3f) {
-        this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this));
-        this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this));
-      }
+    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));
     }
@@ -1276,10 +1254,11 @@ }
     bindFunction(device, 'start', this.pointerDown.bind(this));
-    bindFunction(device, 'end', this.pointerUp.bind(this));
-    bindFunction('key', 'down', this.keyDown.bind(this));
-    bindFunction('key', 'up', this.keyUp.bind(this));
 
-    if (this.sharedConfig.r3f) {
+    if (this.config.pointerCapture) {
       bindFunction(device, 'change', this.pointerMove.bind(this));
+      bindFunction(device, 'end', this.pointerUp.bind(this));
     }
 
+    bindFunction('key', 'down', this.keyDown.bind(this));
+    bindFunction('key', 'up', this.keyUp.bind(this));
+
     if (this.config.filterTaps) {
@@ -1313,4 +1292,3 @@ bindFunction('click', '', this.pointerClick.bind(this), {
 
-  device(_v, _k, config) {
-    if (config.shared.r3f) return 'pointer';
+  device(_v, _k) {
     if (this.useTouch) return 'touch';
@@ -1375,3 +1353,3 @@ if (this.pointerLock) return 'mouse';
       if (value !== undefined) {
-        throw `[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`;
+        throw Error(`[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`);
       }
@@ -1382,3 +1360,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`;
+        throw Error(`[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`);
       }
@@ -1389,3 +1367,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`;
+        throw Error(`[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`);
       }
@@ -1396,3 +1374,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`;
+        throw Error(`[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`);
       }
@@ -1403,3 +1381,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`;
+        throw Error(`[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`);
       }
@@ -1412,3 +1390,2 @@ }
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
-const SCALE_ANGLE_RATIO_INTENT_RAD = SCALE_ANGLE_RATIO_INTENT_DEG / 180 * Math.PI;
 const PINCH_WHEEL_RATIO = 60;
@@ -1458,4 +1435,3 @@ class PinchEngine extends Engine {
     if (!state.axis) {
-      const angleScaleRatio = this.config.useRad ? SCALE_ANGLE_RATIO_INTENT_RAD : SCALE_ANGLE_RATIO_INTENT_DEG;
-      const axisMovementDifference = Math.abs(v[0]) * angleScaleRatio - Math.abs(v[1]);
+      const axisMovementDifference = Math.abs(v[0]) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(v[1]);
       if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale';
@@ -1553,3 +1529,3 @@ }
     state.turns = delta_turns;
-    state._movement = [state.values[0] / state.initial[0] - 1, convertAngle(this, state.values[1] - state.initial[1])];
+    state._movement = [state.values[0] / state.initial[0] - 1, state.values[1] - state.initial[1]];
     this.compute(event);
@@ -1609,3 +1585,3 @@ this.emit();
     const _previousMovement = state._movement;
-    state._movement = [event.scale - 1, convertAngle(this, event.rotation)];
+    state._movement = [event.scale - 1, event.rotation];
     state._delta = V.sub(state._movement, _previousMovement);
@@ -1630,5 +1606,2 @@ this.compute(event);
   wheelStart(event) {
-    if (event.cancelable) event.preventDefault();else if (process.env.NODE_ENV === 'development') {
-      console.warn(`[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option and \`config.eventOptions.passive\` set to \`false\`. This message will only appear in development mode.`, event.currentTarget);
-    }
     this.start(event);
@@ -1639,3 +1612,14 @@ this.wheelChange(event);
   wheelChange(event) {
-    if (event.cancelable) event.preventDefault();
+    const isR3f = ('uv' in event);
+
+    if (!isR3f) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+
+      if (process.env.NODE_ENV === 'development' && !event.defaultPrevented) {
+        console.warn(`[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option.\n\nThis message will only appear in development mode.`);
+      }
+    }
+
     const state = this.state;
@@ -1663,10 +1647,10 @@ state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO, 0];
       bindFunction(device, 'end', this[device + 'End'].bind(this));
-    } else bindFunction('wheel', '', this.wheel.bind(this));
+    } else {
+      bindFunction('wheel', '', this.wheel.bind(this), {
+        passive: false
+      });
+    }
   }
 
 }
-function convertAngle(engine, value) {
-  if (engine.config.useRad) return value / 180 * Math.PI;
-  return value;
-}
 
@@ -1685,3 +1669,2 @@ const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
     if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture';
-    if (sharedConfig.r3f) return 'pointer';
     if (this.useTouch) return 'touch';
@@ -1692,6 +1675,2 @@ if (SUPPORT.touch && SUPPORT.pointer) return 'pointer';
 
-  useRad(_v, _k, config) {
-    return config.angleUnit === 'rad' || config.angleUnit == null && config.shared.r3f;
-  },
-
   bounds(_v, _k, {
@@ -1723,4 +1702,3 @@ scaleBounds = {},
     this.lockDirection = config.axis === 'lock';
-    const angleRatio = this.useRad ? Math.PI / 180 : 1;
-    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3 * angleRatio] : 0);
+    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
     return threshold;
@@ -1727,0 +1705,0 @@ }

package.json

 {
   "name": "@use-gesture/core",
-  "version": "10.0.0-beta.5",
+  "version": "10.0.0-beta.6",
   "description": "Core engine for receiving gestures",
@@ -5,0 +5,0 @@ "license": "MIT",

src/config/commonConfigResolver.ts

@@ -37,3 +37,3 @@ import { Vector2, State, GenericOptions } from '../types'
       if (value !== undefined) {
-        throw `[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`
+        throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`)
       }
@@ -43,3 +43,5 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``
+        throw Error(
+          `[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``
+        )
       }
@@ -49,3 +51,3 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`initial\` option has been renamed to \`from\`.`
+        throw Error(`[@use-gesture]: \`initial\` option has been renamed to \`from\`.`)
       }
@@ -52,0 +54,0 @@ }

src/config/dragConfigResolver.ts

@@ -1,2 +0,2 @@
-import { DragConfig, GenericOptions, InternalDragOptions, Vector2 } from '../types'
+import { DragConfig, InternalDragOptions, Vector2 } from '../types'
 import { V } from '../utils/maths'
@@ -22,4 +22,3 @@ import { coordinatesConfigResolver } from './coordinatesConfigResolver'
   },
-  device(this: InternalDragOptions, _v: any, _k: string, config: { shared: GenericOptions }) {
-    if (config.shared.r3f) return 'pointer'
+  device(this: InternalDragOptions, _v: any, _k: string) {
     if (this.useTouch) return 'touch'
@@ -68,3 +67,5 @@ if (this.pointerLock) return 'mouse'
       if (value !== undefined) {
-        throw `[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`
+        throw Error(
+          `[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`
+        )
       }
@@ -74,3 +75,5 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`
+        throw Error(
+          `[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`
+        )
       }
@@ -80,3 +83,5 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`
+        throw Error(
+          `[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`
+        )
       }
@@ -86,3 +91,5 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`
+        throw Error(
+          `[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`
+        )
       }
@@ -92,3 +99,5 @@ },
       if (value !== undefined) {
-        throw `[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`
+        throw Error(
+          `[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`
+        )
       }
@@ -95,0 +104,0 @@ }

src/config/pinchConfigResolver.ts

@@ -17,3 +17,2 @@ import { PinchConfig, GenericOptions, InternalPinchOptions, State, Vector2 } from '../types'
     if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture'
-    if (sharedConfig.r3f) return 'pointer'
     if (this.useTouch) return 'touch'
@@ -24,5 +23,2 @@ if (SUPPORT.touch && SUPPORT.pointer) return 'pointer'
   },
-  useRad(_v: any, _k: string, config: { shared: GenericOptions } & PinchConfig) {
-    return config.angleUnit === 'rad' || (config.angleUnit == null && config.shared.r3f)
-  },
   bounds(_v: any, _k: string, { scaleBounds = {}, angleBounds = {} }: PinchConfig) {
@@ -45,6 +41,5 @@ const _scaleBounds = (state?: State) => {
     this.lockDirection = config.axis === 'lock'
-    const angleRatio = this.useRad ? Math.PI / 180 : 1
-    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3 * angleRatio] : 0)
+    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0)
     return threshold
   }
 }

src/config/resolver.ts

@@ -31,5 +31,5 @@ import { sharedConfigResolver } from './sharedConfigResolver'
 export function parse(config: UserGestureConfig, gestureKey?: GestureKey): InternalConfig {
-  const { target, eventOptions, window, enabled, r3f, ...rest } = config as any
+  const { target, eventOptions, window, enabled, ...rest } = config as any
   const _config: any = {
-    shared: resolveWith({ target, eventOptions, window, enabled, r3f }, sharedConfigResolver)
+    shared: resolveWith({ target, eventOptions, window, enabled }, sharedConfigResolver)
   }
@@ -36,0 +36,0 @@

src/config/sharedConfigResolver.ts

@@ -16,5 +16,2 @@ import { Target, Vector2 } from '../types'
   },
-  r3f(value = false) {
-    return value
-  },
   window(value = SUPPORT.isBrowser ? window : undefined) {
@@ -21,0 +18,0 @@ return value

src/Controller.ts

@@ -151,25 +151,29 @@ import { EngineMap } from './imports'
 
-const bindToEventStore = (eventStore: EventStore, target: EventTarget) => (
-  device: string,
-  action: string,
-  handler: (event: any) => void,
-  options?: AddEventListenerOptions,
-  isNative = false
-) => {
-  if (isNative) device = device.slice(2).toLowerCase() // transforms onMouseDown into mousedown
-  eventStore.add(target, device, action, handler, options)
-}
+const bindToEventStore =
+  (eventStore: EventStore, target: EventTarget) =>
+  (
+    device: string,
+    action: string,
+    handler: (event: any) => void,
+    options?: AddEventListenerOptions,
+    isNative = false
+  ) => {
+    if (isNative) device = device.slice(2).toLowerCase() // transforms onMouseDown into mousedown
+    eventStore.add(target, device, action, handler, options)
+  }
 
-const bindToProps = (props: any, eventOptions: AddEventListenerOptions) => (
-  device: string,
-  action: string,
-  handler: (event: any) => void,
-  options: AddEventListenerOptions = {},
-  isNative = false
-) => {
-  const capture = options.capture ?? eventOptions.capture
-  // a native handler is already passed as a prop like "onMouseDown"
-  const handlerProp = isNative ? device : toReactHandlerProp(device, action, capture)
-  props[handlerProp] = props[handlerProp] || []
-  props[handlerProp].push(handler)
-}
+const bindToProps =
+  (props: any, eventOptions: AddEventListenerOptions) =>
+  (
+    device: string,
+    action: string,
+    handler: (event: any) => void,
+    options: AddEventListenerOptions = {},
+    isNative = false
+  ) => {
+    const capture = options.capture ?? eventOptions.capture
+    // a native handler is already passed as a prop like "onMouseDown"
+    const handlerProp = isNative ? device : toReactHandlerProp(device, action, capture)
+    props[handlerProp] = props[handlerProp] || []
+    props[handlerProp].push(handler)
+  }

src/engines/DragEngine.ts

@@ -217,10 +217,7 @@ import { CoordinatesEngine } from './CoordinatesEngine'
 
-    const target = event.target as HTMLElement
-    const currentTarget = event.currentTarget as HTMLElement
-
     if (process.env.NODE_ENV === 'development') {
       try {
         if (device === 'pointer') {
-          // @ts-ignore r3f
-          const currentTarget = this.sharedConfig.r3f ? event.sourceEvent.currentTarget : event.currentTarget
+          // @ts-ignore (warning for r3f)
+          const currentTarget = 'uv' in event ? event.sourceEvent.currentTarget : event.currentTarget
           const style = window.getComputedStyle(currentTarget)
@@ -239,24 +236,8 @@ if (style.touchAction === 'auto') {
     if (config.pointerLock) {
-      currentTarget.requestPointerLock()
+      ;(event.currentTarget as HTMLElement).requestPointerLock()
     }
 
-    if (device === 'touch' || config.pointerCapture) {
-      if (!this.sharedConfig.r3f) {
-        if (process.env.NODE_ENV === 'development') {
-          // @ts-ignore r3f
-          if (event.uv) {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `[@use-gesture]: You're probably using \`use-gesture\` on with \`@react-three/fiber\` without setting the drag config option \`r3f: true\`. The gesture will now probably fail.`
-            )
-          }
-        }
-        if (document.pointerLockElement === target) device = 'mouse'
-        this.eventStore.add(target, device, 'change', this.pointerMove.bind(this))
-      }
-    } else {
-      if (!this.sharedConfig.r3f) {
-        this.eventStore.add(this.sharedConfig.window!, device, 'change', this.pointerMove.bind(this))
-        this.eventStore.add(this.sharedConfig.window!, device, 'end', this.pointerUp.bind(this))
-      }
+    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))
     }
@@ -322,9 +303,9 @@ }
     bindFunction(device, 'start', this.pointerDown.bind(this))
-    bindFunction(device, 'end', this.pointerUp.bind(this))
+    if (this.config.pointerCapture) {
+      bindFunction(device, 'change', this.pointerMove.bind(this))
+      bindFunction(device, 'end', this.pointerUp.bind(this))
+    }
     bindFunction('key', 'down', this.keyDown.bind(this))
     bindFunction('key', 'up', this.keyUp.bind(this))
 
-    if (this.sharedConfig.r3f) {
-      bindFunction(device, 'change', this.pointerMove.bind(this))
-    }
     if (this.config.filterTaps) {
@@ -331,0 +312,0 @@ bindFunction('click', '', this.pointerClick.bind(this), { capture: true })

src/engines/PinchEngine.ts

@@ -7,3 +7,2 @@ import { Engine } from './Engine'
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30
-const SCALE_ANGLE_RATIO_INTENT_RAD = (SCALE_ANGLE_RATIO_INTENT_DEG / 180) * Math.PI
 const PINCH_WHEEL_RATIO = 60
@@ -45,4 +44,3 @@
     if (!state.axis) {
-      const angleScaleRatio = this.config.useRad ? SCALE_ANGLE_RATIO_INTENT_RAD : SCALE_ANGLE_RATIO_INTENT_DEG
-      const axisMovementDifference = Math.abs(v[0]) * angleScaleRatio - Math.abs(v[1])
+      const axisMovementDifference = Math.abs(v[0]) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(v[1])
       if (axisMovementDifference < 0) state.axis = 'angle'
@@ -154,3 +152,3 @@ else if (axisMovementDifference > 0) state.axis = 'scale'
     state.turns = delta_turns
-    state._movement = [state.values[0] / state.initial[0] - 1, convertAngle(this, state.values[1] - state.initial[1])]
+    state._movement = [state.values[0] / state.initial[0] - 1, state.values[1] - state.initial[1]]
     this.compute(event)
@@ -216,3 +214,3 @@ this.emit()
     const _previousMovement = state._movement
-    state._movement = [event.scale - 1, convertAngle(this, event.rotation)]
+    state._movement = [event.scale - 1, event.rotation]
     state._delta = V.sub(state._movement, _previousMovement)
@@ -240,10 +238,2 @@ this.compute(event)
   wheelStart(event: WheelEvent) {
-    if (event.cancelable) event.preventDefault()
-    else if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option and \`config.eventOptions.passive\` set to \`false\`. This message will only appear in development mode.`,
-        event.currentTarget
-      )
-    }
     this.start(event)
@@ -254,3 +244,14 @@ this.wheelChange(event)
   wheelChange(event: WheelEvent) {
-    if (event.cancelable) event.preventDefault()
+    const isR3f = 'uv' in event
+    if (!isR3f) {
+      if (event.cancelable) {
+        event.preventDefault()
+      }
+      if (process.env.NODE_ENV === 'development' && !event.defaultPrevented) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option.\n\nThis message will only appear in development mode.`
+        )
+      }
+    }
     const state = this.state
@@ -282,9 +283,8 @@ state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO, 0]
       bindFunction(device, 'end', this[device + 'End'].bind(this))
-    } else bindFunction('wheel', '', this.wheel.bind(this))
+    } else {
+      // we try to set a passive listener, knowing that in any case React will
+      // ignore it.
+      bindFunction('wheel', '', this.wheel.bind(this), { passive: false })
+    }
   }
 }
-
-export function convertAngle(engine: PinchEngine, value: number) {
-  if (engine.config.useRad) return (value / 180) * Math.PI
-  return value
-}

src/types/config.ts

@@ -26,6 +26,2 @@ import { State } from './state'
   /**
-   * Performs @react-three/fiber specific operations when set to true.
-   */
-  r3f?: boolean
-  /**
    * A function that you can use to transform movement and offset values. Useful
@@ -108,6 +104,2 @@ * to map your screen coordinates to custom space coordinates such as a
   /**
-   * Which units to use for calculating rotation angle.
-   */
-  angleUnit?: 'deg' | 'rad'
-  /**
    * Scales OR rotates when set to 'lock'.
@@ -114,0 +106,0 @@ */

src/types/internalConfig.ts

@@ -10,3 +10,2 @@ import { GestureKey, CoordinatesKey } from './config'
   enabled: boolean
-  r3f: boolean
   transform: (v: Vector2) => Vector2
@@ -51,3 +50,2 @@ }
   device: 'gesture' | 'pointer' | 'touch' | undefined
-  useRad: boolean
   lockDirection: boolean
@@ -54,0 +52,0 @@ }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

259101

decreased by-2.08%

Lines of code

7839

decreased by-1.25%

No dependency changes