From db62427ee96eeaa22d27cb2a1d01199c0b41ec54 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 12 Apr 2022 16:30:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E3=80=81=E5=A4=8D=E5=88=B6=E3=80=81=E7=B2=98=E8=B4=B4?=
 =?UTF-8?q?=E3=80=81=E5=89=AA=E5=88=87=E5=BF=AB=E6=8D=B7=E9=94=AE=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 15 ++++++
 packages/editor/package.json                  |  1 +
 .../src/layouts/workspace/Workspace.vue       | 51 +++++++++++++++++--
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 592dd35d..5765238b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14360,6 +14360,21 @@
 				"verror": "1.10.0"
 			}
 		},
+		"keycode": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+			"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+		},
+		"keycon": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/keycon/-/keycon-1.1.2.tgz",
+			"integrity": "sha512-yCoUAfwqmQUWrtOFuZhicxasF/4ae+M0aH8yV1wEKKZCZql8v6jWhlVF9dT5i1TfuHSmgt/GNuCaWIHT8wk6eQ==",
+			"requires": {
+				"@daybrush/utils": "^1.0.0",
+				"@scena/event-emitter": "^1.0.2",
+				"keycode": "^2.2.0"
+			}
+		},
 		"kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 32b70830..5e25a72b 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -45,6 +45,7 @@
     "color": "^3.1.3",
     "element-plus": "^2.1.7",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index 1bb5bb51..c4f5c44a 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace">
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
@@ -18,9 +18,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import KeyController from 'keycon';
 
-import type { MPage } from '@tmagic/schema';
+import type { MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
@@ -55,8 +56,52 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
+    const workspace = ref<HTMLDivElement>();
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    let keycon: KeyController;
+
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
+
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
+
+    onMounted(() => {
+      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+      keycon = new KeyController(workspace.value);
+
+      keycon
+        .keyup('delete', () => {
+          node.value && services?.editorService.remove(node.value);
+        })
+        .keyup(['ctrl', 'c'], () => {
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keyup(['ctrl', 'v'], () => {
+          node.value && services?.editorService.paste();
+        })
+        .keyup(['ctrl', 'x'], () => {
+          if (node.value && services) {
+            services.editorService.copy(node.value);
+            services.editorService.remove(node.value);
+          }
+        });
+    });
+
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+      keycon.destroy();
+    });
 
     return {
+      workspace,
+
       page: computed(() => services?.editorService.get<MPage>('page')),
     };
   },