goview_vue/src/views/chart/hooks/useKeyboard.hook.ts

79 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-02-03 22:54:31 +08:00
import { isMac, addEventListener, removeEventListener } from '@/utils'
2022-03-04 20:57:36 +08:00
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { MenuEnum } from '@/enums/editPageEnum'
2022-02-03 22:54:31 +08:00
2022-03-04 20:57:36 +08:00
const chartEditStore = useChartEditStore()
2022-02-03 22:54:31 +08:00
2022-02-04 12:17:50 +08:00
export const keyboardValue = {
[MenuEnum.ARROW_UP]: 'arrowup',
[MenuEnum.ARROW_RIGHT]: 'arrowright',
[MenuEnum.ARROW_DOWN]: 'arrowdown',
[MenuEnum.ARROW_LEFT]: 'arrowleft',
2022-02-04 12:17:50 +08:00
[MenuEnum.COPY]: 'c',
[MenuEnum.CUT]: 'x',
[MenuEnum.PARSE]: 'v',
[MenuEnum.DELETE]: 'delete',
back: 'z',
}
2022-02-03 22:54:31 +08:00
const KeyboardHandle = (e: KeyboardEvent) => {
2022-02-06 01:04:05 +08:00
const isMacRes = isMac()
2022-02-03 22:54:31 +08:00
// 暂不支持mac因为我没有😤👻
2022-02-06 01:04:05 +08:00
if (isMacRes) return
2022-02-03 22:54:31 +08:00
const key = e.key.toLowerCase()
// 删除单纯的delete会和其他位置冲突
2022-03-22 10:33:40 +08:00
// if (key === keyboardValue.delete) {
// chartEditStore.removeComponentList()
// return
// }
2022-02-04 18:28:02 +08:00
2022-02-04 12:17:50 +08:00
// 前进
2022-03-22 10:33:40 +08:00
if (e.altKey && e.shiftKey && key == keyboardValue.back) {
2022-02-04 12:17:50 +08:00
chartEditStore.setForward()
return
}
2022-03-22 10:33:40 +08:00
if (e.altKey) {
2022-02-03 22:54:31 +08:00
switch (key) {
// ↑
case keyboardValue.up: chartEditStore.setMove(MenuEnum.ARROW_UP)
break;
// →
case keyboardValue.right: chartEditStore.setMove(MenuEnum.ARROW_RIGHT)
break;
// ↓
case keyboardValue.down: chartEditStore.setMove(MenuEnum.ARROW_DOWN)
break;
// ←
case keyboardValue.left: chartEditStore.setMove(MenuEnum.ARROW_LEFT)
break;
2022-03-22 10:33:40 +08:00
// 删除
case keyboardValue.delete: chartEditStore.removeComponentList()
break;
2022-02-03 22:54:31 +08:00
// 复制
2022-02-04 12:17:50 +08:00
case keyboardValue.copy: chartEditStore.setCopy()
break;
// 剪切
case keyboardValue.cut: chartEditStore.setCut()
2022-02-03 22:54:31 +08:00
break;
// 粘贴
2022-02-04 12:17:50 +08:00
case keyboardValue.parse: chartEditStore.setParse()
break;
// 撤回
case keyboardValue.back: chartEditStore.setBack()
2022-02-03 22:54:31 +08:00
break;
}
e.preventDefault()
}
}
export const useAddKeyboard = () => {
addEventListener(document, 'keyup', KeyboardHandle)
}
export const useRemoveKeyboard = () => {
removeEventListener(document, 'keyup', KeyboardHandle)
}