import { useEffect } from 'react' import state from 'state' import { MoveType } from 'types' import { getKeyboardEventInfo, metaKey } from 'utils/utils' export default function useKeyboardEvents() { useEffect(() => { function handleKeyDown(e: KeyboardEvent) { if (metaKey(e) && !['i', 'r', 'j'].includes(e.key)) { e.preventDefault() } switch (e.key) { case 'ArrowUp': { state.send('NUDGED', { delta: [0, -1], ...getKeyboardEventInfo(e) }) break } case 'ArrowRight': { state.send('NUDGED', { delta: [1, 0], ...getKeyboardEventInfo(e) }) break } case 'ArrowDown': { state.send('NUDGED', { delta: [0, 1], ...getKeyboardEventInfo(e) }) break } case 'ArrowLeft': { state.send('NUDGED', { delta: [-1, 0], ...getKeyboardEventInfo(e) }) break } case '=': { if (e.metaKey) { state.send('ZOOMED_IN') } break } case '-': { if (e.metaKey) { state.send('ZOOMED_OUT') } break } case '!': { // Shift + 1 if (e.shiftKey) { state.send('ZOOMED_TO_FIT') } break } case '@': { // Shift + 2 if (e.shiftKey) { state.send('ZOOMED_TO_SELECTION') } break } case ')': { // Shift + 0 if (e.shiftKey) { state.send('ZOOMED_TO_ACTUAL') } break } case 'Escape': { state.send('CANCELLED') break } case 'z': { if (metaKey(e)) { if (e.shiftKey) { state.send('REDO', getKeyboardEventInfo(e)) } else { state.send('UNDO', getKeyboardEventInfo(e)) } } break } case '‘': { if (metaKey(e)) { state.send('MOVED', { ...getKeyboardEventInfo(e), type: MoveType.ToFront, }) } break } case '“': { if (metaKey(e)) { state.send('MOVED', { ...getKeyboardEventInfo(e), type: MoveType.ToBack, }) } break } case ']': { if (metaKey(e)) { state.send('MOVED', { ...getKeyboardEventInfo(e), type: MoveType.Forward, }) } break } case '[': { if (metaKey(e)) { state.send('MOVED', { ...getKeyboardEventInfo(e), type: MoveType.Backward, }) } break } case 'Shift': { state.send('PRESSED_SHIFT_KEY', getKeyboardEventInfo(e)) break } case 'Alt': { state.send('PRESSED_ALT_KEY', getKeyboardEventInfo(e)) break } case 'Backspace': { state.send('DELETED', getKeyboardEventInfo(e)) break } case 's': { if (metaKey(e)) { state.send('SAVED', getKeyboardEventInfo(e)) } break } case 'a': { if (metaKey(e)) { state.send('SELECTED_ALL', getKeyboardEventInfo(e)) } break } case 'v': { if (metaKey(e)) { state.send('PASTED', getKeyboardEventInfo(e)) } else { state.send('SELECTED_SELECT_TOOL', getKeyboardEventInfo(e)) } break } case 'd': { if (metaKey(e)) { state.send('DUPLICATED', getKeyboardEventInfo(e)) } else { state.send('SELECTED_DRAW_TOOL', getKeyboardEventInfo(e)) } break } case 't': { if (metaKey(e)) { state.send('DUPLICATED', getKeyboardEventInfo(e)) } else { state.send('SELECTED_DOT_TOOL', getKeyboardEventInfo(e)) } break } case 'c': { if (metaKey(e)) { state.send('COPIED', getKeyboardEventInfo(e)) } else { state.send('SELECTED_CIRCLE_TOOL', getKeyboardEventInfo(e)) } break } case 'i': { if (metaKey(e)) { } else { state.send('SELECTED_ELLIPSE_TOOL', getKeyboardEventInfo(e)) } break } case 'l': { if (metaKey(e)) { } else { state.send('SELECTED_LINE_TOOL', getKeyboardEventInfo(e)) } break } case 'y': { if (metaKey(e)) { } else { state.send('SELECTED_RAY_TOOL', getKeyboardEventInfo(e)) } break } case 'p': { if (metaKey(e)) { } else { state.send('SELECTED_POLYLINE_TOOL', getKeyboardEventInfo(e)) } break } case 'r': { if (metaKey(e)) { } else { state.send('SELECTED_RECTANGLE_TOOL', getKeyboardEventInfo(e)) } break } default: { state.send('PRESSED_KEY', getKeyboardEventInfo(e)) } } } function handleKeyUp(e: KeyboardEvent) { if (e.key === 'Shift') { state.send('RELEASED_SHIFT_KEY', getKeyboardEventInfo(e)) } if (e.key === 'Alt') { state.send('RELEASED_ALT_KEY', getKeyboardEventInfo(e)) } state.send('RELEASED_KEY', getKeyboardEventInfo(e)) } document.body.addEventListener('keydown', handleKeyDown) document.body.addEventListener('keyup', handleKeyUp) return () => { document.body.removeEventListener('keydown', handleKeyDown) document.body.removeEventListener('keyup', handleKeyUp) } }, []) }