fix: modifierKey: null is not respected (#547)

onlyfortesting · web-flow · commit 854f4dfc135a · 2022-10-30T17:54:00.000+01:00
diff --git a/.changeset/itchy-jobs-cross.md b/.changeset/itchy-jobs-cross.md
@@ -0,0 +1,7 @@
+---
+'@use-gesture/core': patch
+---
+
+feat (pinch):
+
+- `pinchOnwheel: false` prevents pinching with wheel.
diff --git a/demo/package.json b/demo/package.json
@@ -17,20 +17,20 @@
     "leva": "*",
     "lodash-move": "^1.1.1",
     "lodash.clamp": "^4.0.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-use-measure": "^2.1.1",
     "screenlog": "^0.3.0",
     "three": "^0.140.2",
     "wouter": "^2.7.4"
   },
   "devDependencies": {
     "@types/lodash.clamp": "^4.0.7",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
     "@types/three": "^0.140.0",
     "@vitejs/plugin-react": "^1.3.2",
-    "typescript": "^4.8.2",
+    "typescript": "^4.8.4",
     "typescript-plugin-css-modules": "^3.4.0",
     "vite": "2.9.9"
   }
diff --git a/documentation/package.json b/documentation/package.json
@@ -17,16 +17,16 @@
     "@use-gesture/react": "*",
     "@use-gesture/vanilla": "*",
     "animejs": "^3.2.1",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "gatsby": "^4.12.1",
-    "gatsby-plugin-google-analytics": "^4.12.1",
+    "gatsby-plugin-google-analytics": "^4.24.0",
     "gatsby-plugin-pnpm": "^1.2.10",
     "lethargy": "^1.0.9",
     "leva": "^0.9.25",
     "mdx-observable": "^0.2.0",
     "parse-numeric-range": "^1.3.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-player": "^2.10.0",
     "react-toastify": "^8.1.0",
     "smooth-doc": "^8.0.1",
diff --git a/documentation/pages/docs/options.mdx b/documentation/pages/docs/options.mdx
@@ -109,7 +109,8 @@ Here are all options that can be applied to gestures.
 | [`bounds`](#bounds)                       |                                            **xy**                                             | Limits the gesture `offset` to the specified bounds.                                                                                                                                                 |
 | [`scaleBounds`](#scalebounds)             |                                           **pinch**                                           | Limits the scale `offset` to the specified bounds.                                                                                                                                                   |
 | [`angleBounds`](#anglebounds)             |                                           **pinch**                                           | Limits the angle `offset` to the specified bounds.                                                                                                                                                   |
-| [`modifierKey`](#modifierKey)             |                                           **pinch**                                           | The modifier key that triggers a scale when wheeling. Defaults to `'ctrlKey'`. Can be null.                                                                                                          |
+| [`modifierKey`](#modifierKey)             |                                           **pinch**                                           | The modifier key that triggers a scale when wheeling. Defaults to `'ctrlKey'`. Can be `null`.                                                                                                        |
+| `pinchOnWheel`                            |                                           **pinch**                                           | If `false`, pinching with the wheel will be disabled.                                                                                                                                                |
 | [`rubberband`](#rubberband)               |                                            **all**                                            | The elasticity coefficient of the gesture when going out of bounds. When set to `true`, the elasticity coefficient will be defaulted to `0.15`                                                       |
 | [`transform`](#transform)                 |                                            **all**                                            | A function that you can use to transform pointer values. Useful to map your screen coordinates to custom space coordinates such as a canvas.                                                         |
 | [`filterTaps`](#filtertaps)               |                                           **drag**                                            | If `true`, the component won't trigger your drag logic if the user just clicked on the component.                                                                                                    |
@@ -340,6 +341,8 @@ If you set `keys` to `false`, your drag handler won't respond to keyboard events
 
 This option lets you set the modifier key that triggers a scale gesture when using wheel inside the `onPinch` handler.
 
+When `null`, pinching will be triggered using wheel _without_ the need of pressing a modifier key.
+
 ### pointer.buttons
 
 <Specs gestures={['drag']} types={['number', 'number[]']} defaultValue="1" />
diff --git a/package.json b/package.json
@@ -72,39 +72,39 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-syntax-flow": "^7.16.7",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@changesets/cli": "^2.22.0",
-    "@preconstruct/cli": "^2.1.5",
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@changesets/cli": "^2.25.1",
+    "@preconstruct/cli": "^2.2.2",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.2.0",
     "@types/jest": "^27.5.1",
-    "@types/node": "^17.0.33",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
     "babel-jest": "^27.5.1",
-    "eslint": "^8.15.0",
+    "eslint": "^8.26.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-jest-dom": "^4.0.1",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-testing-library": "^5.5.0",
+    "eslint-plugin-jest-dom": "^4.0.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.9.1",
     "husky": "^8.0.1",
     "jest": "^27.5.1",
-    "pnpm": "^7.1.0",
+    "pnpm": "^7.14.1",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "size-limit": "^7.0.8",
-    "tsd": "^0.20.0",
-    "typescript": "^4.8.2"
+    "tsd": "^0.24.1",
+    "typescript": "^4.8.4"
   }
 }
diff --git a/packages/core/src/config/pinchConfigResolver.ts b/packages/core/src/config/pinchConfigResolver.ts
@@ -47,5 +47,8 @@ export const pinchConfigResolver = {
   modifierKey(value: ModifierKey) {
     if (value === undefined) return 'ctrlKey'
     return value
+  },
+  pinchOnWheel(value = true) {
+    return value
   }
 }
diff --git a/packages/core/src/engines/PinchEngine.ts b/packages/core/src/engines/PinchEngine.ts
@@ -292,6 +292,8 @@ export class PinchEngine extends Engine<'pinch'> {
     }
     // we try to set a passive listener, knowing that in any case React will
     // ignore it.
-    bindFunction('wheel', '', this.wheel.bind(this), { passive: false })
+    if (this.config.pinchOnWheel) {
+      bindFunction('wheel', '', this.wheel.bind(this), { passive: false })
+    }
   }
 }
diff --git a/packages/core/src/types/config.ts b/packages/core/src/types/config.ts
@@ -121,6 +121,10 @@ export type PinchConfig = GestureOptions<'pinch'> & {
    * Key that triggers scale when using the wheel. Defaults to `'ctrlKey'`.
    */
   modifierKey?: ModifierKey
+  /**
+   * Whether wheel should trigger a pinch at all.
+   */
+  pinchOnWheel?: boolean
 }
 
 export type DragBounds = Bounds | HTMLElement | { current: HTMLElement | null }
diff --git a/packages/core/src/types/internalConfig.ts b/packages/core/src/types/internalConfig.ts
@@ -55,6 +55,7 @@ export type InternalPinchOptions = InternalGestureOptions<'pinch'> & {
   device: 'gesture' | 'pointer' | 'touch' | undefined
   lockDirection: boolean
   modifierKey: ModifierKey
+  pinchOnWheel: boolean
 }
 
 type MoveAndHoverMouseOnly = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/config.test.tsx b/test/config.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -47,5 +47,8 @@ export const pinchConfigResolver = {`
`47`	`47`	`modifierKey(value: ModifierKey) {`
`48`	`48`	`if (value === undefined) return 'ctrlKey'`
`49`	`49`	`return value`
	`50`	`+ },`
	`51`	`+ pinchOnWheel(value = true) {`
	`52`	`+ return value`
`50`	`53`	`}`
`51`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -292,6 +292,8 @@ export class PinchEngine extends Engine<'pinch'> {`
`292`	`292`	`}`
`293`	`293`	`// we try to set a passive listener, knowing that in any case React will`
`294`	`294`	`// ignore it.`
`295`		`- bindFunction('wheel', '', this.wheel.bind(this), { passive: false })`
	`295`	`+ if (this.config.pinchOnWheel) {`
	`296`	`+ bindFunction('wheel', '', this.wheel.bind(this), { passive: false })`
	`297`	`+ }`
`296`	`298`	`}`
`297`	`299`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ export type InternalPinchOptions = InternalGestureOptions<'pinch'> & {`
`55`	`55`	`device: 'gesture' \| 'pointer' \| 'touch' \| undefined`
`56`	`56`	`lockDirection: boolean`
`57`	`57`	`modifierKey: ModifierKey`
	`58`	`+ pinchOnWheel: boolean`
`58`	`59`	`}`
`59`	`60`
`60`	`61`	`type MoveAndHoverMouseOnly = {`