Skip to content

Commit c19ff0b

Browse files
authoredSep 16, 2023
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
1 parent 97765d6 commit c19ff0b

File tree

8 files changed

+37
-7
lines changed

8 files changed

+37
-7
lines changed
 

‎.changeset/modern-laws-hide.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@use-gesture/core': patch
3+
---
4+
5+
feat: modifierKey can be an array via @BJvdA

‎demo/src/sandboxes/gesture-pinch/src/App.jsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react'
22
import { usePinch } from '@use-gesture/react'
33
import { a, useSpring } from '@react-spring/web'
4-
import { useControls } from 'leva'
4+
import { folder, useControls } from 'leva'
55

66
import styles from './styles.module.css'
77

@@ -14,6 +14,16 @@ export default function App() {
1414
axis: { options: [undefined, 'lock'] }
1515
})
1616

17+
const _modifierKey = useControls('modifierKey', {
18+
ctrlKey: false,
19+
metaKey: false,
20+
altKey: false
21+
})
22+
23+
const modifierKey = Object.entries(_modifierKey)
24+
.filter(([, v]) => !!v)
25+
.map((e) => e[0])
26+
1727
useEffect(() => {
1828
const handler = (e) => e.preventDefault()
1929
document.addEventListener('gesturestart', handler)
@@ -34,7 +44,13 @@ export default function App() {
3444
rotate: active || gesture === 'offset' ? angle : 0
3545
})
3646
},
37-
{ target, eventOptions: { passive: false }, pointer: { touch }, ...rest }
47+
{
48+
target,
49+
eventOptions: { passive: false },
50+
pointer: { touch },
51+
modifierKey: modifierKey.length ? modifierKey : undefined,
52+
...rest
53+
}
3854
)
3955

4056
return (

‎documentation/pages/docs/options.mdx

+5-1
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,11 @@ function InitialExample() {
332332
333333
### modifierKey
334334

335-
<Specs gestures={['pinch']} types={[`'ctrlKey'`, `'altKey'`, `'metaKey'`, 'null']} defaultValue={`'ctrlKey'`} />
335+
<Specs
336+
gestures={['pinch']}
337+
types={[`'ctrlKey'`, `'altKey'`, `'metaKey'`, `Array<'ctrlKey' | 'altKey' | 'metaKey'>`, 'null']}
338+
defaultValue={`'ctrlKey'`}
339+
/>
336340

337341
This option lets you set the modifier key that triggers a scale gesture when using wheel inside the `onPinch` handler.
338342

‎packages/core/src/config/pinchConfigResolver.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const pinchConfigResolver = {
4444
const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0)
4545
return threshold
4646
},
47-
modifierKey(value: ModifierKey) {
47+
modifierKey(value: ModifierKey | ModifierKey[]) {
4848
if (value === undefined) return 'ctrlKey'
4949
return value
5050
},

‎packages/core/src/engines/PinchEngine.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export class PinchEngine extends Engine<'pinch'> {
246246

247247
wheel(event: WheelEvent) {
248248
const modifierKey = this.config.modifierKey
249-
if (modifierKey && !event[modifierKey]) return
249+
if (modifierKey && (Array.isArray(modifierKey) ? !modifierKey.find((k) => event[k]) : !event[modifierKey])) return
250250
if (!this.state._active) this.wheelStart(event)
251251
else this.wheelChange(event)
252252
this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this))

‎packages/core/src/types/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export type PinchConfig = GestureOptions<'pinch'> & {
120120
/**
121121
* Key that triggers scale when using the wheel. Defaults to `'ctrlKey'`.
122122
*/
123-
modifierKey?: ModifierKey
123+
modifierKey?: ModifierKey | NonNullable<ModifierKey>[]
124124
/**
125125
* Whether wheel should trigger a pinch at all.
126126
*/

‎packages/core/src/types/internalConfig.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export type InternalPinchOptions = InternalGestureOptions<'pinch'> & {
5555
*/
5656
device: 'gesture' | 'pointer' | 'touch' | undefined
5757
lockDirection: boolean
58-
modifierKey: ModifierKey
58+
modifierKey: ModifierKey | NonNullable<ModifierKey>[]
5959
pinchOnWheel: boolean
6060
}
6161

‎test/config.test.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -207,5 +207,10 @@ describe('testing derived config', () => {
207207
config = { modifierKey: null }
208208
expect(parse(config, 'pinch').pinch).toHaveProperty('modifierKey', null)
209209
})
210+
211+
test(`setting modifierKey to array should result in modifierKey being an array`, () => {
212+
config = { modifierKey: ['altKey', 'ctrlKey'] }
213+
expect(parse(config, 'pinch').pinch).toHaveProperty('modifierKey', ['altKey', 'ctrlKey'])
214+
})
210215
})
211216
})

0 commit comments

Comments
 (0)
Please sign in to comment.