useKeyboard.hook.ts 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import { isMac, addEventListener, removeEventListener } from '@/utils'
  2. import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  3. import { MenuEnum } from '@/enums/editPageEnum'
  4. const chartEditStore = useChartEditStore()
  5. export const keyboardValue = {
  6. [MenuEnum.ARROW_UP]: 'arrowup',
  7. [MenuEnum.ARROW_RIGHT]: 'arrowright',
  8. [MenuEnum.ARROW_DOWN]: 'arrowdown',
  9. [MenuEnum.ARROW_LEFT]: 'arrowleft',
  10. [MenuEnum.COPY]: 'c',
  11. [MenuEnum.CUT]: 'x',
  12. [MenuEnum.PARSE]: 'v',
  13. [MenuEnum.DELETE]: 'delete',
  14. back: 'z',
  15. }
  16. const KeyboardHandle = (e: KeyboardEvent) => {
  17. const isMacRes = isMac()
  18. // 暂不支持mac,因为我没有😤👻
  19. if (isMacRes) return
  20. const key = e.key.toLowerCase()
  21. // 删除(单纯的delete会和其他位置冲突)
  22. // if (key === keyboardValue.delete) {
  23. // chartEditStore.removeComponentList()
  24. // return
  25. // }
  26. // 前进
  27. if (e.altKey && e.shiftKey && key == keyboardValue.back) {
  28. chartEditStore.setForward()
  29. return
  30. }
  31. if (e.altKey) {
  32. switch (key) {
  33. // ↑
  34. case keyboardValue.up: chartEditStore.setMove(MenuEnum.ARROW_UP)
  35. break;
  36. // →
  37. case keyboardValue.right: chartEditStore.setMove(MenuEnum.ARROW_RIGHT)
  38. break;
  39. // ↓
  40. case keyboardValue.down: chartEditStore.setMove(MenuEnum.ARROW_DOWN)
  41. break;
  42. // ←
  43. case keyboardValue.left: chartEditStore.setMove(MenuEnum.ARROW_LEFT)
  44. break;
  45. // 删除
  46. case keyboardValue.delete: chartEditStore.removeComponentList()
  47. break;
  48. // 复制
  49. case keyboardValue.copy: chartEditStore.setCopy()
  50. break;
  51. // 剪切
  52. case keyboardValue.cut: chartEditStore.setCut()
  53. break;
  54. // 粘贴
  55. case keyboardValue.parse: chartEditStore.setParse()
  56. break;
  57. // 撤回
  58. case keyboardValue.back: chartEditStore.setBack()
  59. break;
  60. }
  61. e.preventDefault()
  62. }
  63. }
  64. export const useAddKeyboard = () => {
  65. addEventListener(document, 'keyup', KeyboardHandle)
  66. }
  67. export const useRemoveKeyboard = () => {
  68. removeEventListener(document, 'keyup', KeyboardHandle)
  69. }