diff --git a/.changeset/modern-laws-hide.md b/.changeset/modern-laws-hide.md
new file mode 100644
index 000000000..c94c1d2e2
--- /dev/null
+++ b/.changeset/modern-laws-hide.md
@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+feat: modifierKey can be an array via @BJvdA
diff --git a/demo/src/sandboxes/gesture-pinch/src/App.jsx b/demo/src/sandboxes/gesture-pinch/src/App.jsx
index 579935f3a..b9e826a02 100644
--- a/demo/src/sandboxes/gesture-pinch/src/App.jsx
+++ b/demo/src/sandboxes/gesture-pinch/src/App.jsx
@@ -1,7 +1,7 @@
import React, { useEffect } from 'react'
import { usePinch } from '@use-gesture/react'
import { a, useSpring } from '@react-spring/web'
-import { useControls } from 'leva'
+import { folder, useControls } from 'leva'
import styles from './styles.module.css'
@@ -14,6 +14,16 @@ export default function App() {
axis: { options: [undefined, 'lock'] }
})
+ const _modifierKey = useControls('modifierKey', {
+ ctrlKey: false,
+ metaKey: false,
+ altKey: false
+ })
+
+ const modifierKey = Object.entries(_modifierKey)
+ .filter(([, v]) => !!v)
+ .map((e) => e[0])
+
useEffect(() => {
const handler = (e) => e.preventDefault()
document.addEventListener('gesturestart', handler)
@@ -34,7 +44,13 @@ export default function App() {
rotate: active || gesture === 'offset' ? angle : 0
})
},
- { target, eventOptions: { passive: false }, pointer: { touch }, ...rest }
+ {
+ target,
+ eventOptions: { passive: false },
+ pointer: { touch },
+ modifierKey: modifierKey.length ? modifierKey : undefined,
+ ...rest
+ }
)
return (
diff --git a/documentation/pages/docs/options.mdx b/documentation/pages/docs/options.mdx
index ceb818cdd..9a50a8b3d 100755
--- a/documentation/pages/docs/options.mdx
+++ b/documentation/pages/docs/options.mdx
@@ -332,7 +332,11 @@ function InitialExample() {
### modifierKey
-
+`, 'null']}
+ defaultValue={`'ctrlKey'`}
+/>
This option lets you set the modifier key that triggers a scale gesture when using wheel inside the `onPinch` handler.
diff --git a/packages/core/src/config/pinchConfigResolver.ts b/packages/core/src/config/pinchConfigResolver.ts
index 401c320b9..30d9be546 100644
--- a/packages/core/src/config/pinchConfigResolver.ts
+++ b/packages/core/src/config/pinchConfigResolver.ts
@@ -44,7 +44,7 @@ export const pinchConfigResolver = {
const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0)
return threshold
},
- modifierKey(value: ModifierKey) {
+ modifierKey(value: ModifierKey | ModifierKey[]) {
if (value === undefined) return 'ctrlKey'
return value
},
diff --git a/packages/core/src/engines/PinchEngine.ts b/packages/core/src/engines/PinchEngine.ts
index 861c1772d..fb3dc36aa 100644
--- a/packages/core/src/engines/PinchEngine.ts
+++ b/packages/core/src/engines/PinchEngine.ts
@@ -246,7 +246,7 @@ export class PinchEngine extends Engine<'pinch'> {
wheel(event: WheelEvent) {
const modifierKey = this.config.modifierKey
- if (modifierKey && !event[modifierKey]) return
+ if (modifierKey && (Array.isArray(modifierKey) ? !modifierKey.find((k) => event[k]) : !event[modifierKey])) return
if (!this.state._active) this.wheelStart(event)
else this.wheelChange(event)
this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this))
diff --git a/packages/core/src/types/config.ts b/packages/core/src/types/config.ts
index 4f2b92113..d8fff0b7a 100644
--- a/packages/core/src/types/config.ts
+++ b/packages/core/src/types/config.ts
@@ -120,7 +120,7 @@ export type PinchConfig = GestureOptions<'pinch'> & {
/**
* Key that triggers scale when using the wheel. Defaults to `'ctrlKey'`.
*/
- modifierKey?: ModifierKey
+ modifierKey?: ModifierKey | NonNullable[]
/**
* Whether wheel should trigger a pinch at all.
*/
diff --git a/packages/core/src/types/internalConfig.ts b/packages/core/src/types/internalConfig.ts
index 59cccac2a..460038a8c 100644
--- a/packages/core/src/types/internalConfig.ts
+++ b/packages/core/src/types/internalConfig.ts
@@ -55,7 +55,7 @@ export type InternalPinchOptions = InternalGestureOptions<'pinch'> & {
*/
device: 'gesture' | 'pointer' | 'touch' | undefined
lockDirection: boolean
- modifierKey: ModifierKey
+ modifierKey: ModifierKey | NonNullable[]
pinchOnWheel: boolean
}
diff --git a/test/config.test.tsx b/test/config.test.tsx
index 2aea0d7f4..716a7310c 100644
--- a/test/config.test.tsx
+++ b/test/config.test.tsx
@@ -207,5 +207,10 @@ describe('testing derived config', () => {
config = { modifierKey: null }
expect(parse(config, 'pinch').pinch).toHaveProperty('modifierKey', null)
})
+
+ test(`setting modifierKey to array should result in modifierKey being an array`, () => {
+ config = { modifierKey: ['altKey', 'ctrlKey'] }
+ expect(parse(config, 'pinch').pinch).toHaveProperty('modifierKey', ['altKey', 'ctrlKey'])
+ })
})
})