tldraw/hooks/useKeyboardEvents.ts

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 "!": {
          // 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": {
          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)
    }
  }, [])
}