feat(pinch): allow modifierkey to be an array (#613)

* feat(pinch): allow modifierkey to be an array

* test: add test for modifierKey as an array

* demo: update pinch demo with modifier keys

* ci: changeset

Author: BJvdA

.changeset/modern-laws-hide.md

@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+feat: modifierKey can be an array via @BJvdA

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 (

documentation/pages/docs/options.mdx

@@ -332,7 +332,11 @@ function InitialExample() {
 
 ### modifierKey
 
-<Specs gestures={['pinch']} types={[`'ctrlKey'`, `'altKey'`, `'metaKey'`, 'null']} defaultValue={`'ctrlKey'`} />
+<Specs
+  gestures={['pinch']}
+  types={[`'ctrlKey'`, `'altKey'`, `'metaKey'`, `Array<'ctrlKey' | 'altKey' | 'metaKey'>`, 'null']}
+  defaultValue={`'ctrlKey'`}
+/>
 
 This option lets you set the modifier key that triggers a scale gesture when using wheel inside the `onPinch` handler.
 

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
   },

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))

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<ModifierKey>[]
   /**
    * Whether wheel should trigger a pinch at all.
    */

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<ModifierKey>[]
   pinchOnWheel: boolean
 }
 

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'])
+    })
   })
 })