@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.2

package/src/layouts/workspace/Workspace.vue

@@ -1,14 +1,11 @@
 <template>
-  <div class="m-editor-workspace">
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
       :render="render"
       :moveable-options="moveableOptions"
       :can-select="canSelect"
-      @select="selectHandler"
-      @update="updateNodeHandler"
-      @sort="sortNodeHandler"
     ></magic-stage>
 
     <slot name="workspace-content"></slot>
@@ -21,11 +18,13 @@
 </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 { MComponent, MContainer, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import type { MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
@@ -58,21 +57,114 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
+    const workspace = ref<HTMLDivElement>();
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    let keycon: KeyController;
 
-    return {
-      page: computed(() => services?.editorService.get<MPage>('page')),
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
 
-      selectHandler(el: HTMLElement) {
-        services?.editorService.select(el.id);
-      },
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
 
-      updateNodeHandler(node: MComponent | MContainer | MPage) {
-        services?.editorService.update(node);
-      },
+    onMounted(() => {
+      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+      keycon = new KeyController(workspace.value);
+
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+      const ctrl = isMac ? 'meta' : 'ctrl';
+
+      keycon
+        .keydown((e) => {
+          console.log(e);
+          e.inputEvent.preventDefault();
+        })
+        .keyup('delete', (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
+        .keyup('backspace', (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'c'], () => {
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keydown([ctrl, 'v'], () => {
+          node.value && services?.editorService.paste();
+        })
+        .keydown([ctrl, 'x'], () => {
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'z'], () => {
+          services?.editorService.undo();
+        })
+        .keydown([ctrl, 'shift', 'z'], () => {
+          services?.editorService.redo();
+        })
+        .keydown('up', () => {
+          services?.editorService.move(0, -1);
+        })
+        .keydown('down', () => {
+          services?.editorService.move(0, 1);
+        })
+        .keydown('left', () => {
+          services?.editorService.move(-1, 0);
+        })
+        .keydown('right', () => {
+          services?.editorService.move(1, 0);
+        })
+        .keydown([ctrl, 'up'], () => {
+          services?.editorService.move(0, -10);
+        })
+        .keydown([ctrl, 'down'], () => {
+          services?.editorService.move(0, 10);
+        })
+        .keydown([ctrl, 'left'], () => {
+          services?.editorService.move(-10, 0);
+        })
+        .keydown([ctrl, 'right'], () => {
+          services?.editorService.move(10, 0);
+        })
+        .keydown('tab', () => {
+          services?.editorService.selectNextNode();
+        })
+        .keydown([ctrl, 'tab'], () => {
+          services?.editorService.selectNextPage();
+        })
+        .keydown([ctrl, '='], () => {
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, 'numpadplus'], () => {
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, '-'], () => {
+          services?.uiService.zoom(-0.1);
+        })
+        .keydown([ctrl, 'numpad-'], () => {
+          services?.uiService.zoom(-0.1);
+        });
+    });
+
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+      keycon.destroy();
+    });
 
-      sortNodeHandler(ev: SortEventData) {
-        services?.editorService.sort(ev.src, ev.dist);
-      },
+    return {
+      workspace,
+
+      page: computed(() => services?.editorService.get<MPage>('page')),
     };
   },
 });

package/src/services/BaseService.ts

@@ -24,6 +24,46 @@ const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpper
 
 const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
 
+const doAction = async (
+  args: any[],
+  scope: any,
+  sourceMethod: any,
+  beforeMethodName: string,
+  afterMethodName: string,
+  fn: (args: any[], next?: Function | undefined) => Promise<void>,
+) => {
+  try {
+    let beforeArgs = args;
+
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
+
+      if (isError(beforeReturnValue)) throw beforeReturnValue;
+
+      if (!Array.isArray(beforeReturnValue)) {
+        beforeReturnValue = [beforeReturnValue];
+      }
+
+      beforeArgs = beforeArgs.map((v: any, index: number) => {
+        if (typeof beforeReturnValue[index] === 'undefined') return v;
+        return beforeReturnValue[index];
+      });
+    }
+
+    let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
+
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
+
+      if (isError(returnValue)) throw returnValue;
+    }
+
+    return returnValue;
+  } catch (error) {
+    throw error;
+  }
+};
+
 /**
  * 提供两种方式对Class进行扩展
  * 方法1：
@@ -74,8 +114,10 @@ const isError = (error: any): boolean => Object.prototype.toString.call(error) =
 export default class extends EventEmitter {
   private pluginOptionsList: Record<string, Function[]> = {};
   private middleware: Record<string, Function[]> = {};
+  private taskList: (() => Promise<void>)[] = [];
+  private doingTask = false;
 
-  constructor(methods: string[]) {
+  constructor(methods: string[] = [], serialMethods: string[] = []) {
     super();
 
     methods.forEach((propertyName: string) => {
@@ -93,32 +135,28 @@ export default class extends EventEmitter {
       const fn = compose(this.middleware[propertyName]);
       Object.defineProperty(scope, propertyName, {
         value: async (...args: any[]) => {
-          let beforeArgs = args;
-
-          for (const beforeMethod of this.pluginOptionsList[beforeMethodName]) {
-            let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
-
-            if (isError(beforeReturnValue)) throw beforeReturnValue;
-
-            if (!Array.isArray(beforeReturnValue)) {
-              beforeReturnValue = [beforeReturnValue];
-            }
-
-            beforeArgs = beforeArgs.map((v: any, index: number) => {
-              if (typeof beforeReturnValue[index] === 'undefined') return v;
-              return beforeReturnValue[index];
-            });
+          if (!serialMethods.includes(propertyName)) {
+            return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
           }
 
-          let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-
-          for (const afterMethod of this.pluginOptionsList[afterMethodName]) {
-            returnValue = await afterMethod(...beforeArgs, returnValue);
+          // 由于async await，所以会出现函数执行到await时让出线程，导致执行顺序出错，例如调用了select(1) -> update -> select(2)，这个时候就有可能出现update了2；
+          // 这里保证函数调用严格按顺序执行；
+          const promise = new Promise<any>((resolve, reject) => {
+            this.taskList.push(async () => {
+              try {
+                const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                resolve(value);
+              } catch (e) {
+                reject(e);
+              }
+            });
+          });
 
-            if (isError(returnValue)) throw returnValue;
+          if (!this.doingTask) {
+            this.doTask();
           }
 
-          return returnValue;
+          return promise;
         },
       });
     });
@@ -135,4 +173,14 @@ export default class extends EventEmitter {
       if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
     });
   }
+
+  private async doTask() {
+    this.doingTask = true;
+    let task = this.taskList.shift();
+    while (task) {
+      await task();
+      task = this.taskList.shift();
+    }
+    this.doingTask = false;
+  }
 }