feat: 新增快捷键

src/components/webtopo-svg-edit/components/center-panel/index.vue

@@ -2,6 +2,8 @@
 <template>
   <div
     class="canvas"
+    tabindex="0"
+    ref="canvasRef"
     @drop="dropEvent"
     @dragenter="dragEnterEvent"
     @dragover="dragOverEvent"
@@ -9,6 +11,7 @@
     @mousemove="onCanvasMouseMove"
     @mouseup="onCanvasMouseUp"
     @contextmenu="onCanvasContextMenuEvent"
+    @keydown="onHandleKeyDown"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -178,7 +181,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, getCurrentInstance, reactive, ref } from 'vue';
+  import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
   import { useConfigStore } from '@/store/config';
   import { useGlobalStore } from '@/store/global';
   import {
@@ -212,7 +215,9 @@
   import ConnectionLine from '@/components/webtopo-svg-edit/components/connection-line/index.vue';
   import { IVisiableInfo } from './types';
   import { ComponentImport } from '@/config-center';
-  import { useContextMenuStore } from '@/store/system';
+  import { useContextMenuStore, useEditPrivateStore } from '@/store/system';
+  import { EContextMenuInfoType } from '@/store/system/types';
+  import { useHistoryRecord } from '@/hooks';
   // import HandlePanel from '../handle-panel/index.vue';
   //注册所有组件
   const instance = getCurrentInstance();
@@ -224,8 +229,10 @@
   const globalStore = useGlobalStore();
   const configStore = useConfigStore();
   const svgEditLayoutStore = useSvgEditLayoutStore();
+  const editPrivateStore = useEditPrivateStore();
   const contextMenuStore = useContextMenuStore();
   const contextMenuRef = ref<HTMLElement>();
+  const canvasRef = ref<HTMLElement>();
   const cursor_style = computed(() =>
     globalStore.intention == EGlobalStoreIntention.MoveCanvas
       ? 'grab'
@@ -312,6 +319,7 @@
       globalStore.setDoneJson(done_item_json);
       globalStore.intention = EGlobalStoreIntention.None;
     }
+    canvasRef.value?.focus();
   };
   const dragEnterEvent = (e: DragEvent) => {
     //dragenter和dragover一定要阻止浏览器默认行为 不然不会触发drop
@@ -322,6 +330,7 @@
     e.preventDefault();
   };
   const onSvgMouseDown = (select_item: IDoneJson, index: number, e: MouseEvent) => {
+    canvasRef.value?.focus();
     if (globalStore.intention === EGlobalStoreIntention.Connection) {
       return;
     }
@@ -726,12 +735,71 @@
       height: actual_bound.height * scale_y
     };
   };
+  const onHandleKeyDown = (e: KeyboardEvent) => {
+    console.log(e, 733);
+    e.preventDefault();
+    if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowUp') {
+      globalStore.done_json[globalStore.handle_svg_info.index].y -= 1;
+      useHistoryRecord(globalStore.done_json);
+    } else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowDown') {
+      globalStore.handle_svg_info.info.y += 1;
+      useHistoryRecord(globalStore.done_json);
+    } else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowLeft') {
+      globalStore.handle_svg_info.info.x -= 1;
+      useHistoryRecord(globalStore.done_json);
+    } else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowRight') {
+      globalStore.handle_svg_info.info.x += 1;
+      useHistoryRecord(globalStore.done_json);
+    }
+    //ctrl  c
+    else if (e.ctrlKey && e.key.toLowerCase() == 'c') {
+      contextMenuStore.onContextMenuClick(EContextMenuInfoType.Copy);
+    }
+    //deleted
+    else if (!e.ctrlKey && e.key == 'Delete') {
+      contextMenuStore.onContextMenuClick(EContextMenuInfoType.Delete);
+    }
+    //上移一层
+    else if (e.ctrlKey && e.key == 'ArrowUp') {
+      contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveUpOneLevel);
+    }
+    //下移一层
+    else if (e.ctrlKey && e.key == 'ArrowDown') {
+      contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveDownOneLevel);
+    }
+    //置于底层
+    else if (e.ctrlKey && e.key == 'ArrowLeft') {
+      contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveDownTopLevel);
+    }
+    //置于顶层
+    else if (e.ctrlKey && e.key == 'ArrowRight') {
+      contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveUpTopLevel);
+    }
+    //ctrl+shift+z
+    else if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() == 'z') {
+      editPrivateStore.topRedoBtnClick();
+    }
+    //ctrl+z
+    else if (e.ctrlKey && e.key.toLowerCase() == 'z') {
+      editPrivateStore.topUndoBtnClick();
+    }
+    //ctrl+delete
+    else if (e.ctrlKey && e.key.toLowerCase() == 'delete') {
+      globalStore.done_json.length <= 0 || globalStore.setDoneJson([]);
+    }
+  };
+  onMounted(() => {
+    canvasRef.value?.focus();
+  });
 </script>
 <style lang="less" scoped>
   .canvas {
     width: 100%;
     height: 100%;
     cursor: v-bind('cursor_style');
+    &:focus-visible {
+      outline: 0px;
+    }
   }
 
   .svg-item-none {

src/components/webtopo-svg-edit/components/top-panel/index.vue

@@ -18,7 +18,7 @@
     <div class="flex justify-between" style="width: calc(100% - 440px)">
       <div class="flex items-center">
         <el-icon
-          title="撤销"
+          title="撤销 ctrl+z"
           :size="20"
           :class="`${
             editPrivateStore.getTopBtnUndoStatus ? 'icon-normal' : 'icon-disable'
@@ -28,7 +28,7 @@
           <svg-analysis name="undo"></svg-analysis>
         </el-icon>
         <el-icon
-          title="重做"
+          title="重做 ctrl+shift+z"
           :class="`${editPrivateStore.getTopBtnRedoStatus ? 'icon-normal' : 'icon-disable'} ml-5px`"
           :size="20"
           @click="() => editPrivateStore.topRedoBtnClick()"
@@ -37,7 +37,7 @@
         </el-icon>
         <el-divider direction="vertical"></el-divider>
         <el-icon
-          title="清空"
+          title="清空 ctrl+delete"
           :class="`${globalStore.done_json.length > 0 ? 'icon-normal' : 'icon-disable'}`"
           :size="20"
           @click="onDeleteBtnClick"

src/store/system/index.ts

@@ -1,7 +1,7 @@
 import { objectDeepClone, randomString } from '@/utils';
 import { defineStore } from 'pinia';
 import { useGlobalStore } from '../global';
-import { IDoneJson } from '../global/types';
+import { EGlobalStoreIntention, IDoneJson } from '../global/types';
 import { ContextMenuStoreState, EContextMenuInfoType, EditPrivateStoreState } from './types';
 import { useHistoryRecord } from '@/hooks';
 /**
@@ -99,6 +99,7 @@ export const useContextMenuStore = defineStore('context-menu-store', {
       if (!globalStore.handle_svg_info) {
         return;
       }
+      globalStore.intention = EGlobalStoreIntention.Select;
       switch (type) {
         case EContextMenuInfoType.Copy:
           const temp_item = objectDeepClone<IDoneJson>(globalStore.handle_svg_info.info);
@@ -108,10 +109,12 @@ export const useContextMenuStore = defineStore('context-menu-store', {
           temp_item.y += 10;
           globalStore.setDoneJson(temp_item);
           this.display = false;
+          globalStore.setHandleSvgInfo(temp_item, globalStore.done_json.length);
           break;
         case EContextMenuInfoType.Delete:
           globalStore.spliceDoneJson(globalStore.handle_svg_info.index);
           this.display = false;
+          globalStore.setHandleSvgInfo(null);
           break;
         case EContextMenuInfoType.MoveUpOneLevel:
           if (
@@ -126,6 +129,7 @@ export const useContextMenuStore = defineStore('context-menu-store', {
           globalStore.done_json[globalStore.handle_svg_info.index + 1] = temp_up_one;
           useHistoryRecord(globalStore.done_json);
           this.display = false;
+          globalStore.setHandleSvgInfo(temp_up_one, globalStore.handle_svg_info.index + 1);
           break;
         case EContextMenuInfoType.MoveDownOneLevel:
           if (globalStore.done_json.length === 1 || globalStore.handle_svg_info.index === 0) {
@@ -137,16 +141,18 @@ export const useContextMenuStore = defineStore('context-menu-store', {
           globalStore.done_json[globalStore.handle_svg_info.index - 1] = temp_down_one;
           useHistoryRecord(globalStore.done_json);
           this.display = false;
+          globalStore.setHandleSvgInfo(temp_down_one, globalStore.handle_svg_info.index - 1);
           break;
         case EContextMenuInfoType.MoveDownTopLevel:
           if (globalStore.done_json.length === 1 || globalStore.handle_svg_info.index === 0) {
             return;
           }
-          const temp_up_top = globalStore.handle_svg_info.info;
+          const temp_down_top = globalStore.handle_svg_info.info;
           globalStore.done_json.splice(globalStore.handle_svg_info.index, 1);
-          globalStore.done_json.unshift(temp_up_top);
+          globalStore.done_json.unshift(temp_down_top);
           useHistoryRecord(globalStore.done_json);
           this.display = false;
+          globalStore.setHandleSvgInfo(temp_down_top, 0);
           break;
         case EContextMenuInfoType.MoveUpTopLevel:
           if (
@@ -155,11 +161,12 @@ export const useContextMenuStore = defineStore('context-menu-store', {
           ) {
             return;
           }
-          const temp_down_top = globalStore.handle_svg_info.info;
+          const temp_up_top = globalStore.handle_svg_info.info;
           globalStore.done_json.splice(globalStore.handle_svg_info.index, 1);
-          globalStore.done_json.push(temp_down_top);
+          globalStore.done_json.push(temp_up_top);
           useHistoryRecord(globalStore.done_json);
           this.display = false;
+          globalStore.setHandleSvgInfo(temp_up_top, globalStore.done_json.length - 1);
           break;
         default:
           break;

src/store/system/types.ts

@@ -26,3 +26,18 @@ export enum EContextMenuInfoType {
   MoveUpTopLevel = 'MoveUpTopLevel',
   MoveDownTopLevel = 'MoveDownTopLevel'
 }
+
+export enum EShortcutKeyType {
+  Copy = 'Copy',
+  Delete = 'Delete',
+  MoveUpOneLevel = 'MoveUpOneLevel',
+  MoveDownOneLevel = 'MoveDownOneLevel',
+  MoveUpTopLevel = 'MoveUpTopLevel',
+  MoveDownTopLevel = 'MoveDownTopLevel',
+  Redo = 'Redo',
+  Undo = 'Undo',
+  MoveUp = 'MoveUp',
+  MoveDown = 'MoveDown',
+  MoveLeft = 'MoveLeft',
+  MoveRight = 'MoveRight'
+}