From 6f22bc61272369afd890a3606daaf170cfea71ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 12 Apr 2022 12:01:40 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=BF=AB=E6=8D=B7?= =?UTF-8?q?=E9=94=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + pnpm-lock.yaml | 12 ++ src/enums/editPageEnum.ts | 16 ++ .../components/EditBottom/index.vue | 22 +-- src/views/chart/hooks/useKeyboard.hook.ts | 152 +++++++++++++----- 5 files changed, 151 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index db31c4d0..1f44331d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@types/color": "^3.0.3", + "@types/keymaster": "^1.6.30", "animate.css": "^4.1.1", "axios": "0.23.0", "color": "^4.2.3", @@ -16,6 +17,7 @@ "echarts-liquidfill": "^3.1.0", "highlight.js": "^11.5.0", "html2canvas": "^1.4.1", + "keymaster": "^1.6.2", "naive-ui": "^2.27.0", "pinia": "^2.0.13", "screenfull": "^6.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f004c7e..1f16f11d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,6 +2,7 @@ lockfileVersion: 5.3 specifiers: '@types/color': ^3.0.3 + '@types/keymaster': ^1.6.30 '@types/node': ^16.11.26 '@typescript-eslint/eslint-plugin': ^5.18.0 '@typescript-eslint/parser': ^5.18.0 @@ -25,6 +26,7 @@ specifiers: eslint-plugin-vue: ^8.5.0 highlight.js: ^11.5.0 html2canvas: ^1.4.1 + keymaster: ^1.6.2 lodash: ~4.17.21 mockjs: ^1.1.0 naive-ui: ^2.27.0 @@ -51,6 +53,7 @@ specifiers: dependencies: '@types/color': 3.0.3 + '@types/keymaster': 1.6.30 animate.css: 4.1.1 axios: 0.23.0 color: 4.2.3 @@ -58,6 +61,7 @@ dependencies: echarts-liquidfill: 3.1.0_echarts@5.3.2 highlight.js: 11.5.0 html2canvas: 1.4.1 + keymaster: 1.6.2 naive-ui: 2.27.0_vue@3.2.31 pinia: 2.0.13_typescript@4.6.3+vue@3.2.31 screenfull: 6.0.1 @@ -650,6 +654,10 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/keymaster/1.6.30: + resolution: {integrity: sha512-mtL/NuDBX72zmyIa3cYHA1bQj1WAYlSC4eZcIQj+DHJkcRyTRF2XJXo7DBmkkY8TEq7XaAf7B8TGxs5PHhjRtw==} + dev: false + /@types/liftoff/4.0.0: resolution: {integrity: sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==} dependencies: @@ -2946,6 +2954,10 @@ packages: promise: 7.3.1 dev: true + /keymaster/1.6.2: + resolution: {integrity: sha512-OvA/AALN8IDKKkTk2Z+bDrzs/SQao4lo/QPbwSdDvm+frxfiYiYCSn1aHFUypJY3SruAO1y/c771agBmTXqUtg==} + dev: false + /kind-of/6.0.3: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts index ff94dd21..e3fa196e 100644 --- a/src/enums/editPageEnum.ts +++ b/src/enums/editPageEnum.ts @@ -18,4 +18,20 @@ export enum MenuEnum { UP = 'up', DOWN = 'down', CLEAR = 'clear', + BACK = 'back', + FORWORD = 'forward' +} + +// Win 键盘枚举 +export enum WinKeyboard { + CTRL = 'ctrl', + SHIFT = 'shift', + ALT = ' alt', +} + +// Mac 键盘枚举 +export enum MacKeyboard { + CTRL = '^', + SHIFT = '⇧', + ALT = '⌥', } \ No newline at end of file diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue index 9408070e..f856a97e 100644 --- a/src/views/chart/ContentEdit/components/EditBottom/index.vue +++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue @@ -139,40 +139,44 @@ const shortcutKeyOptions = [ value: '1' }, { - label: 'Alt + ↑ 向上移动', + label: 'Ctrl + ↑ 向上移动', value: '2' }, { - label: 'Alt + → 向右移动', + label: 'Ctrl + → 向右移动', value: '3' }, { - label: 'Alt + ↓ 向下移动', + label: 'Ctrl + ↓ 向下移动', value: '4' }, { - label: 'Alt + ← 向左移动', + label: 'Ctrl + ← 向左移动', value: '5' }, { - label: 'Alt + Delete 删除', + label: 'Ctrl + Delete 删除', value: '6' }, { - label: 'Alt + C 复制', + label: 'Ctrl + C 复制', value: '7' }, { - label: 'Alt + X 剪切', + label: 'Ctrl + X 剪切', value: '8' }, { - label: 'Alt + Z 后退', + label: 'Ctrl + V 粘贴', value: '9' }, { - label: 'Alt + Shift + Z 前进', + label: 'Ctrl + Z 后退', value: '10' + }, + { + label: 'Ctrl + Shift + Z 前进', + value: '11' } ] diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 604d9c35..383b6d33 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -1,78 +1,142 @@ -import { isMac, addEventListener, removeEventListener } from '@/utils' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { MenuEnum } from '@/enums/editPageEnum' +import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum' +import throttle from 'lodash/throttle' +import debounce from 'lodash/debounce' + +import keymaster from 'keymaster' +// Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘ const chartEditStore = useChartEditStore() -export const keyboardValue = { - [MenuEnum.ARROW_UP]: 'arrowup', - [MenuEnum.ARROW_RIGHT]: 'arrowright', - [MenuEnum.ARROW_DOWN]: 'arrowdown', - [MenuEnum.ARROW_LEFT]: 'arrowleft', - [MenuEnum.COPY]: 'c', - [MenuEnum.CUT]: 'x', - [MenuEnum.PARSE]: 'v', +const winCtrlMerge = (e: string) => `${WinKeyboard.CTRL}+${e}` +const winShiftMerge = (e: string) => `${WinKeyboard.SHIFT}+${e}` +const winAltMerge = (e: string) => `${WinKeyboard.ALT}+${e}` + +export const winKeyboardValue = { + [MenuEnum.ARROW_UP]: winCtrlMerge('arrowup'), + [MenuEnum.ARROW_RIGHT]: winCtrlMerge('arrowright'), + [MenuEnum.ARROW_DOWN]: winCtrlMerge('arrowdown'), + [MenuEnum.ARROW_LEFT]: winCtrlMerge('arrowleft'), + [MenuEnum.COPY]: winCtrlMerge('c'), + [MenuEnum.CUT]: winCtrlMerge('x'), + [MenuEnum.PARSE]: winCtrlMerge('v'), [MenuEnum.DELETE]: 'delete', - back: 'z', + [MenuEnum.BACK]: winCtrlMerge('z'), + [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')), } -const KeyboardHandle = (e: KeyboardEvent) => { - const isMacRes = isMac() +const macCtrlMerge = (e: string) => `${MacKeyboard.CTRL}+${e}` +const macShiftMerge = (e: string) => `${MacKeyboard.SHIFT}+${e}` +const macAltMerge = (e: string) => `${MacKeyboard.ALT}+${e}` - // 暂不支持mac，因为我没有😤👻 - if (isMacRes) return - const key = e.key.toLowerCase() +// 没有测试 macOS 系统，因为我没有😤👻 +export const macKeyboardValue = { + [MenuEnum.ARROW_UP]: macCtrlMerge('arrowup'), + [MenuEnum.ARROW_RIGHT]: macCtrlMerge('arrowright'), + [MenuEnum.ARROW_DOWN]: macCtrlMerge('arrowdown'), + [MenuEnum.ARROW_LEFT]: macCtrlMerge('arrowleft'), + [MenuEnum.COPY]: macCtrlMerge('c'), + [MenuEnum.CUT]: macCtrlMerge('x'), + [MenuEnum.PARSE]: macCtrlMerge('v'), + [MenuEnum.DELETE]: 'delete', + [MenuEnum.BACK]: macCtrlMerge('z'), + [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')), +} - // 删除（单纯的delete会和其他位置冲突） - // if (key === keyboardValue.delete) { - // chartEditStore.removeComponentList() - // return - // } - - // 前进 - if (e.altKey && e.shiftKey && key == keyboardValue.back) { - chartEditStore.setForward() - return - } +// Win 快捷键列表 +const winKeyList: Array = [ + winKeyboardValue.up, + winKeyboardValue.right, + winKeyboardValue.down, + winKeyboardValue.left, - if (e.altKey) { - switch (key) { + winKeyboardValue.delete, + winKeyboardValue.copy, + winKeyboardValue.cut, + winKeyboardValue.parse, + + winKeyboardValue.back, + winKeyboardValue.forward, +] + +// Mac 快捷键列表 +const macKeyList: Array = [ + macKeyboardValue.up, + macKeyboardValue.right, + macKeyboardValue.down, + macKeyboardValue.left, + + macKeyboardValue.delete, + macKeyboardValue.copy, + macKeyboardValue.cut, + macKeyboardValue.parse, + + macKeyboardValue.back, + macKeyboardValue.forward, +] + +// 初始化监听事件 +export const useAddKeyboard = () => { + const switchHande = (keyboardValue: typeof winKeyboardValue, e: string) => { + switch (e) { // ↑ - case keyboardValue.up: chartEditStore.setMove(MenuEnum.ARROW_UP) + case keyboardValue.up: + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, 200)) break; // → - case keyboardValue.right: chartEditStore.setMove(MenuEnum.ARROW_RIGHT) + case keyboardValue.right: + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, 200)) break; // ↓ - case keyboardValue.down: chartEditStore.setMove(MenuEnum.ARROW_DOWN) + case keyboardValue.down: + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, 200)) break; // ← - case keyboardValue.left: chartEditStore.setMove(MenuEnum.ARROW_LEFT) + case keyboardValue.left: + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, 200)) break; + // 删除 - case keyboardValue.delete: chartEditStore.removeComponentList() + case keyboardValue.delete: + keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, 200)) break; // 复制 - case keyboardValue.copy: chartEditStore.setCopy() + case keyboardValue.copy: + keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, 200)) break; // 剪切 - case keyboardValue.cut: chartEditStore.setCut() + case keyboardValue.cut: + keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, 200)) break; // 粘贴 - case keyboardValue.parse: chartEditStore.setParse() + case keyboardValue.parse: + keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, 200)) break; + // 撤回 - case keyboardValue.back: chartEditStore.setBack() + case keyboardValue.back: + keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, 200)) + break; + // 前进 + case keyboardValue.forward: + keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, 200)) break; } - e.preventDefault() } + winKeyList.forEach((key: string) => { + switchHande(winKeyboardValue, key) + }) + macKeyList.forEach((key: string) => { + switchHande(macKeyboardValue, key) + }) } -export const useAddKeyboard = () => { - addEventListener(document, 'keyup', KeyboardHandle, 20) -} - +// 卸载监听事件 export const useRemoveKeyboard = () => { - removeEventListener(document, 'keyup', KeyboardHandle) + winKeyList.forEach((key: string) => { + keymaster.unbind(key) + }) + macKeyList.forEach((key: string) => { + keymaster.unbind(key) + }) }