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