From b0e4383a434be9ae707810a5b879a1a6d4fa2113 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, 9 Aug 2022 20:12:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89?= =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/chartEditStore/chartEditStore.ts | 15 +++++-- .../EditShortcutKey/ShortcutKeyModal.vue | 10 +++++ src/views/chart/hooks/useKeyboard.hook.ts | 40 ++++++++++++++----- 3 files changed, 51 insertions(+), 14 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 61947edf..f7d7faf1 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -595,6 +595,8 @@ export const useChartEditStore = defineStore({ // * 创建分组 setGroup() { try { + if(this.getTargetChart.selectId.length < 2) return + loadingStart() const groupClass = new PublicGroupConfigClass() // 记录整体坐标 @@ -636,6 +638,8 @@ export const useChartEditStore = defineStore({ groupClass.attr.h = groupAttr.b - groupAttr.t this.addComponentList(groupClass) + this.setTargetSelectChart(groupClass.id) + loadingFinish() } catch (error) { window['$message'].error('创建分组失败，请联系管理员！') @@ -645,12 +649,15 @@ export const useChartEditStore = defineStore({ // * 解除分组 setUnGroup() { try { - loadingStart() const selectGroupIdArr = this.getTargetChart.selectId + if(selectGroupIdArr.length !== 1) return + loadingStart() + // 解组 const unGroup = (targetIndex: number) => { const targetGroup = this.getComponentList[targetIndex] as CreateComponentGroupType - + if(!targetGroup.isGroup) return + // 分离组件并还原位置属性 targetGroup.groupList.forEach(item => { item.attr.x = item.attr.x + targetGroup.attr.x @@ -666,11 +673,11 @@ export const useChartEditStore = defineStore({ // 判断目标是否为分组父级 if(targetIndex !== -1) { unGroup(targetIndex) - } else { - window['$message'].error('解除分组失败，请联系管理员！') } + loadingFinish() } catch (error) { + console.log(error) window['$message'].error('解除分组失败，请联系管理员！') loadingFinish() } diff --git a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue index 487d7bad..a74edacb 100644 --- a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue +++ b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue @@ -104,6 +104,16 @@ const shortcutKeyOptions = [ win: `${WinKeyboard.CTRL.toUpperCase()} + 🖱️ `, mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + 🖱️ `, }, + { + label: '创建分组', + win: `${WinKeyboard.CTRL.toUpperCase()} + G `, + mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + G `, + }, + { + label: '解除分组', + win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `, + mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `, + }, ] const closeHandle = () => { emit('update:modelShow', false) diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 4429eb0e..f4ffb1eb 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -22,6 +22,8 @@ export const winKeyboardValue = { [MenuEnum.DELETE]: 'delete', [MenuEnum.BACK]: winCtrlMerge('z'), [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')), + [MenuEnum.GROUP]: winCtrlMerge('g'), + [MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')), } // 这个 Ctrl 后面还是换成了 ⌘ @@ -41,6 +43,8 @@ export const macKeyboardValue = { [MenuEnum.DELETE]: macCtrlMerge('backspace'), [MenuEnum.BACK]: macCtrlMerge('z'), [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')), + [MenuEnum.GROUP]: macCtrlMerge('g'), + [MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')), } // Win 快捷键列表 @@ -57,6 +61,9 @@ const winKeyList: Array = [ winKeyboardValue.back, winKeyboardValue.forward, + + winKeyboardValue.group, + winKeyboardValue.unGroup, ] // Mac 快捷键列表 @@ -73,6 +80,9 @@ const macKeyList: Array = [ macKeyboardValue.back, macKeyboardValue.forward, + + macKeyboardValue.group, + macKeyboardValue.unGroup, ] // 处理键盘记录 @@ -89,49 +99,59 @@ const keyRecordHandle = () => { // 初始化监听事件 export const useAddKeyboard = () => { + const throttleTime = 50 const switchHandle = (keyboardValue: typeof winKeyboardValue, e: string) => { switch (e) { // ct+↑ case keyboardValue.up: - keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, throttleTime)) break; // ct+→ case keyboardValue.right: - keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, throttleTime)) break; // ct+↓ case keyboardValue.down: - keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, throttleTime)) break; // ct+← case keyboardValue.left: - keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, throttleTime)) break; // 删除 delete case keyboardValue.delete: - keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, 200)) + keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, throttleTime)) break; // 复制 ct+v case keyboardValue.copy: - keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, 200)) + keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, throttleTime)) break; // 剪切 ct+x case keyboardValue.cut: - keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, 200)) + keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, throttleTime)) break; // 粘贴 ct+v case keyboardValue.parse: - keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, throttleTime)) break; // 撤回 ct+z case keyboardValue.back: - keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, throttleTime)) break; // 前进 ct+sh+z case keyboardValue.forward: - keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, 200)) + keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, throttleTime)) + break; + + // 创建分组 ct+g + case keyboardValue.group: + keymaster(e, throttle(() => { chartEditStore.setGroup(); return false }, throttleTime)) + break; + // 解除分组 ct+sh+g + case keyboardValue.unGroup: + keymaster(e, throttle(() => { chartEditStore.setUnGroup(); return false }, throttleTime)) break; } }