优化键盘事件

src/views/simulation/creation/components/keyboard.ts

@@ -1,62 +1,11 @@
-export const keyboardEvents = (graph:any) => {
-  window.addEventListener('keydown', (e) => {
-    console.log('e', e);
-    keyDownFun(e);
-  });
-  window.addEventListener('keyup', (e) => {
-    keyUpFun(e);
-  });
-  const keyDownFun = (event: KeyboardEvent) => {
-    // 2. 阻止浏览器的默认保存行为
-    // 判断是否按下了 Ctrl + c (Windows) 或 Cmd + c (Mac)
-    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
-      // ctrl+c
-      const cells = graph.getSelectedCells();
-      if (cells.length) {
-        graph.copy(cells);
-      }
-      event.preventDefault();
-    }
-    // 判断是否按下了 Ctrl + v (Windows) 或 Cmd + v (Mac)
-    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
-      // ctrl+v
-      if (!graph.isClipboardEmpty()) {
-        const cells = graph.paste({ offset: 20 });
-        graph.cleanSelection();
-        graph.select(cells);
-      }
-      event.preventDefault();
-    }
-    // 判断是否按下了 Ctrl + z (Windows) 或 Cmd + z (Mac)
-    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
-      // ctrl+z
-      graph.undo();
-      event.preventDefault();
-    }
-    // 判断是否按下了空格键
-    if ( event.key.toLowerCase() === ' ') {
-      console.log('space keyDownFun');
-      graph.enablePanning();
-      graph.disableSelection();
-      event.preventDefault();
-    }
-    if ( event.key.toLowerCase() === 'delete' || event.key.toLowerCase() === 'backspace') {
-      const cells = graph.getSelectedCells();
-      console.log('cells', cells);
-      if (cells.length) {
-        graph.removeCells(cells);
-      }
-      event.preventDefault();
-    }
-  };
-  const keyUpFun = (event: KeyboardEvent) => {
-    // 判断是否按下了空格键
-    if ( event.key.toLowerCase() === ' ') {
-      console.log('space keyUpFun');
-      graph.disablePanning();
-      graph.enableSelection();
-    }
-  };
+let graph:any = null;
+export const keyboardEvents = (graph1:any) => {
+  graph = graph1;
+  window.addEventListener('keydown',
+    keyDownFun
+  );
+  window.addEventListener('keyup', keyUpFun);
+
   // graph.bindKey('ctrl+c', () => {
   //   const cells = graph.getSelectedCells();
   //   if (cells.length) {
@@ -101,3 +50,60 @@ export const keyboardEvents = (graph:any) => {
   //   return false;
   // });
 };
+
+export const cancelKeyboardEvents = () => {
+  graph = null;
+  window.removeEventListener('keydown', keyDownFun);
+  window.removeEventListener('keyup', keyUpFun);
+};
+const keyDownFun = (event: KeyboardEvent) => {
+  // 2. 阻止浏览器的默认保存行为
+  // 判断是否按下了 Ctrl + c (Windows) 或 Cmd + c (Mac)
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+    // ctrl+c
+    const cells = graph.getSelectedCells();
+    if (cells.length) {
+      graph.copy(cells);
+    }
+    event.preventDefault();
+  }
+  // 判断是否按下了 Ctrl + v (Windows) 或 Cmd + v (Mac)
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
+    // ctrl+v
+    if (!graph.isClipboardEmpty()) {
+      const cells = graph.paste({ offset: 20 });
+      graph.cleanSelection();
+      graph.select(cells);
+    }
+    event.preventDefault();
+  }
+  // 判断是否按下了 Ctrl + z (Windows) 或 Cmd + z (Mac)
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+    // ctrl+z
+    graph.undo();
+    event.preventDefault();
+  }
+  // 判断是否按下了空格键
+  if ( event.key.toLowerCase() === ' ') {
+    console.log('space keyDownFun');
+    graph.enablePanning();
+    graph.disableSelection();
+    event.preventDefault();
+  }
+  if ( event.key.toLowerCase() === 'delete' || event.key.toLowerCase() === 'backspace') {
+    const cells = graph.getSelectedCells();
+    console.log('cells', cells);
+    if (cells.length) {
+      graph.removeCells(cells);
+    }
+    event.preventDefault();
+  }
+};
+const keyUpFun = (event: KeyboardEvent) => {
+  // 判断是否按下了空格键
+  if ( event.key.toLowerCase() === ' ') {
+    console.log('space keyUpFun');
+    graph.disablePanning();
+    graph.enableSelection();
+  }
+};

src/views/simulation/creation/index.vue

@@ -51,7 +51,7 @@
 </template>
 <script setup lang="ts">
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { getTeleport } from '@antv/x6-vue-shape';
 import { useNodeAttribute, useNodeEvents } from './components/nodeEvents';
 import ConfigPage from './components/configPage.vue';
@@ -61,6 +61,7 @@ import { FLOW_CREATE_ID, initGraph } from './components/initGraph';
 import ApproveDialog from './components/approveDialog.vue';
 import { FLOW_APPROVE_MAP } from '@/utils/enum/flow';
 import { getRelationNodeAndVerifyFlowFun } from './components/flow';
+import { cancelKeyboardEvents } from './components/keyboard';
 
 const props = defineProps({
   flowUuid: {
@@ -189,6 +190,11 @@ onMounted(async() => {
   // });
 });
 
+onUnmounted(() => {
+  console.log('onUnmounted', onUnmounted);
+  cancelKeyboardEvents();
+});
+
 </script>
 <style lang="scss" src="./index.scss">
 </style>