117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import { ref, watch } from 'vue'
|
|
import type { KeyFilter, KeyPredicate, MaybeRefOrGetter } from '@vueuse/core'
|
|
import { onKeyStroke, toValue, useEventListener } from '@vueuse/core'
|
|
import { useWindow } from './useWindow'
|
|
import { isBoolean, isFunction } from '~/utils'
|
|
|
|
export function isInputDOMNode(event: KeyboardEvent): boolean {
|
|
const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
|
|
|
|
const hasAttribute = isFunction(target.hasAttribute) ? target.hasAttribute('contenteditable') : false
|
|
|
|
const closest = isFunction(target.closest) ? target.closest('.nokey') : null
|
|
|
|
// when an input field is focused we don't want to trigger deletion or movement of nodes
|
|
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || hasAttribute || !!closest
|
|
}
|
|
|
|
// we want to be able to do a multi selection event if we are in an input field
|
|
function wasModifierPressed(event: KeyboardEvent) {
|
|
return event.ctrlKey || event.metaKey || event.shiftKey
|
|
}
|
|
|
|
function createKeyPredicate(keyFilter: string[], pressedKeys: Set<string>): KeyPredicate {
|
|
return (event: KeyboardEvent) =>
|
|
keyFilter.some((key) => {
|
|
const keyCombination = key.split('+').map((k) => k.trim().toLowerCase())
|
|
|
|
if (keyCombination.length === 1) {
|
|
return event.key === key
|
|
} else {
|
|
pressedKeys.add(event.key.toLowerCase())
|
|
return keyCombination.every((key) => pressedKeys.has(key))
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Reactive key press state
|
|
*
|
|
* @param keyFilter - Can be a boolean, a string or an array of strings. If it's a boolean, it will always return that value. If it's a string, it will return true if the key is pressed. If it's an array of strings, it will return true if any of the keys are pressed, or a combination is pressed (e.g. ['ctrl+a', 'ctrl+b'])
|
|
* @param onChange - Callback function that will be called when the key state changes
|
|
*/
|
|
export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, onChange?: (keyPressed: boolean) => void) {
|
|
const window = useWindow()
|
|
|
|
const isPressed = ref(toValue(keyFilter) === true)
|
|
|
|
let modifierPressed = false
|
|
|
|
const pressedKeys = new Set<string>()
|
|
|
|
watch(isPressed, () => {
|
|
onChange?.(isPressed.value)
|
|
})
|
|
|
|
watch(
|
|
() => toValue(keyFilter),
|
|
(unrefKeyFilter) => {
|
|
if (window && typeof window.addEventListener !== 'undefined') {
|
|
useEventListener(window, 'blur', () => {
|
|
isPressed.value = false
|
|
})
|
|
}
|
|
|
|
if (isBoolean(unrefKeyFilter)) {
|
|
isPressed.value = unrefKeyFilter
|
|
return
|
|
}
|
|
|
|
if (Array.isArray(unrefKeyFilter)) {
|
|
unrefKeyFilter = createKeyPredicate(unrefKeyFilter, pressedKeys)
|
|
}
|
|
|
|
if (unrefKeyFilter) {
|
|
onKeyStroke(
|
|
unrefKeyFilter,
|
|
(e) => {
|
|
modifierPressed = wasModifierPressed(e)
|
|
|
|
if (!modifierPressed && isInputDOMNode(e)) {
|
|
return
|
|
}
|
|
|
|
e.preventDefault()
|
|
|
|
isPressed.value = true
|
|
},
|
|
{ eventName: 'keydown' },
|
|
)
|
|
|
|
onKeyStroke(
|
|
unrefKeyFilter,
|
|
(e) => {
|
|
if (isPressed.value) {
|
|
if (!modifierPressed && isInputDOMNode(e)) {
|
|
return
|
|
}
|
|
|
|
modifierPressed = false
|
|
|
|
pressedKeys.clear()
|
|
|
|
isPressed.value = false
|
|
}
|
|
},
|
|
{ eventName: 'keyup' },
|
|
)
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
},
|
|
)
|
|
|
|
return isPressed
|
|
}
|