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

package/src/layouts/workspace/ViewerMenu.vue

@@ -1,46 +1,33 @@
 <template>
-  <div class="magic-editor-content-menu" ref="menu">
-    <div>
-      <div class="magic-editor-content-menu-item" @click="() => center()" v-if="canCenter">水平居中</div>
-      <div class="magic-editor-content-menu-item" @click="() => copy()">复制</div>
-      <div class="magic-editor-content-menu-item" @click="paste" v-if="canPaste">粘贴</div>
-      <template v-if="canMoveZPos">
-        <div class="separation"></div>
-        <div class="magic-editor-content-menu-item" @click="topItem">上移一层</div>
-        <div class="magic-editor-content-menu-item" @click="bottomItem">下移一层</div>
-        <div class="magic-editor-content-menu-item" @click="top">置顶</div>
-        <div class="magic-editor-content-menu-item" @click="bottom">置底</div>
-      </template>
-      <template v-if="canDelete">
-        <div class="separation"></div>
-        <div class="magic-editor-content-menu-item" @click="() => remove()">删除</div>
-      </template>
-      <div class="separation"></div>
-      <div class="magic-editor-content-menu-item" @click="clearGuides">清空参考线</div>
-    </div>
-  </div>
+  <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons';
 
+import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 
-import { LayerOffset, Layout, Services } from '@editor/type';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 export default defineComponent({
-  name: 'magic-editor-ui-viewer-menu',
+  components: { ContentMenu },
 
   setup() {
     const services = inject<Services>('services');
     const editorService = services?.editorService;
-    const menu = ref<HTMLDivElement>();
+    const menu = ref<InstanceType<typeof ContentMenu>>();
     const canPaste = ref(false);
     const canCenter = ref(false);
 
     const node = computed(() => editorService?.get('node'));
     const parent = computed(() => editorService?.get('parent'));
+    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+
+    const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
 
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
@@ -53,56 +40,123 @@ export default defineComponent({
         if (!parent.value || !editorService) return (canCenter.value = false);
         const layout = await editorService.getLayout(parent.value);
         canCenter.value =
-          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !['app', 'page', 'pop'].includes(`${node.value?.type}`);
+          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) &&
+          ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${node.value?.type}`);
       },
       { immediate: true },
     );
 
     return {
       menu,
-      canPaste,
-
-      canDelete: computed(() => node.value?.type !== 'page'),
-      canMoveZPos: computed(() => node.value?.type !== 'page'),
-      canCenter,
-
-      center() {
-        node.value && editorService?.alignCenter(node.value);
-      },
-
-      copy() {
-        node.value && editorService?.copy(node.value);
-        canPaste.value = true;
-      },
-
-      paste() {
-        const top = menu.value?.offsetTop || 0;
-        const left = menu.value?.offsetLeft || 0;
-        editorService?.paste({ left, top });
-      },
-
-      remove() {
-        node.value && editorService?.remove(node.value);
-      },
-
-      top() {
-        editorService?.moveLayer(LayerOffset.TOP);
-      },
-
-      bottom() {
-        editorService?.moveLayer(LayerOffset.BOTTOM);
-      },
-
-      topItem() {
-        editorService?.moveLayer(1);
-      },
-
-      bottomItem() {
-        editorService?.moveLayer(-1);
-      },
-
-      clearGuides() {
-        editorService?.get<StageCore>('stage').clearGuides();
+      menuData: reactive<MenuItem[]>([
+        {
+          type: 'button',
+          text: '水平居中',
+          display: () => canCenter.value,
+          handler: () => {
+            node.value && editorService?.alignCenter(node.value);
+          },
+        },
+        {
+          type: 'button',
+          text: '复制',
+          icon: markRaw(DocumentCopy),
+          handler: () => {
+            node.value && editorService?.copy(node.value);
+            canPaste.value = true;
+          },
+        },
+        {
+          type: 'button',
+          text: '粘贴',
+          display: () => canPaste.value,
+          handler: () => {
+            const stage = editorService?.get<StageCore>('stage');
+
+            const rect = menu.value?.$el.getBoundingClientRect();
+            const parentRect = stage?.container?.getBoundingClientRect();
+            let left = (rect?.left || 0) - (parentRect?.left || 0);
+            let top = (rect?.top || 0) - (parentRect?.top || 0);
+
+            if (node.value?.items && stage) {
+              const parentEl = stage.renderer.contentWindow?.document.getElementById(`${node.value.id}`);
+              const parentElRect = parentEl?.getBoundingClientRect();
+              left = left - (parentElRect?.left || 0);
+              top = top - (parentElRect?.top || 0);
+            }
+
+            editorService?.paste({ left, top });
+          },
+        },
+        {
+          type: 'divider',
+          direction: 'horizontal',
+          display: () => !isPage.value,
+        },
+        {
+          type: 'button',
+          text: '上移一层',
+          icon: markRaw(Top),
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(1);
+          },
+        },
+        {
+          type: 'button',
+          text: '下移一层',
+          icon: markRaw(Bottom),
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(-1);
+          },
+        },
+        {
+          type: 'button',
+          text: '置顶',
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.TOP);
+          },
+        },
+        {
+          type: 'button',
+          text: '置底',
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.BOTTOM);
+          },
+        },
+        {
+          type: 'divider',
+          direction: 'horizontal',
+          display: () => !isPage.value,
+        },
+        {
+          type: 'button',
+          text: '删除',
+          icon: Delete,
+          display: () => !isPage.value,
+          handler: () => {
+            node.value && editorService?.remove(node.value);
+          },
+        },
+        {
+          type: 'divider',
+          direction: 'horizontal',
+        },
+        {
+          type: 'button',
+          text: '清空参考线',
+          handler: () => {
+            editorService?.get<StageCore>('stage').clearGuides();
+          },
+        },
+        ...stageContentMenu,
+      ]),
+
+      show(e: MouseEvent) {
+        menu.value?.show(e);
       },
     };
   },

package/src/layouts/workspace/Workspace.vue

@@ -1,15 +1,6 @@
 <template>
-  <div class="m-editor-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>
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
+    <magic-stage :key="page?.id"></magic-stage>
 
     <slot name="workspace-content"></slot>
 
@@ -21,11 +12,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
+import KeyController from 'keycon';
 
-import type { MComponent, MContainer, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
+import type { MNode, MPage } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
@@ -40,39 +31,131 @@ export default defineComponent({
     MagicStage,
   },
 
-  props: {
-    runtimeUrl: String,
-
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-    },
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-    },
-  },
-
   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();
+    };
+
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
 
-      selectHandler(el: HTMLElement) {
-        services?.editorService.select(el.id);
-      },
+    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
+        .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'], (e) => {
+          e.inputEvent.preventDefault();
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keydown([ctrl, 'v'], (e) => {
+          e.inputEvent.preventDefault();
+          node.value && services?.editorService.paste();
+        })
+        .keydown([ctrl, 'x'], (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'z'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.undo();
+        })
+        .keydown([ctrl, 'shift', 'z'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.redo();
+        })
+        .keydown('up', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -1);
+        })
+        .keydown('down', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 1);
+        })
+        .keydown('left', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-1, 0);
+        })
+        .keydown('right', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(1, 0);
+        })
+        .keydown([ctrl, 'up'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -10);
+        })
+        .keydown([ctrl, 'down'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 10);
+        })
+        .keydown([ctrl, 'left'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-10, 0);
+        })
+        .keydown([ctrl, 'right'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(10, 0);
+        })
+        .keydown('tab', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextNode();
+        })
+        .keydown([ctrl, 'tab'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextPage();
+        })
+        .keydown([ctrl, '='], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, 'numpadplus'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, '-'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
+        })
+        .keydown([ctrl, 'numpad-'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
+        });
+    });
+
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+      keycon.destroy();
+    });
 
-      updateNodeHandler(node: MComponent | MContainer | MPage) {
-        services?.editorService.update(node);
-      },
+    return {
+      workspace,
 
-      sortNodeHandler(ev: SortEventData) {
-        services?.editorService.sort(ev.src, ev.dist);
-      },
+      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：
@@ -51,7 +91,7 @@ const isError = (error: any): boolean => Object.prototype.toString.call(error) =
  *    editorService.afterAdd();
  *   }
  *
- * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
  *
  * 方法2：
@@ -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;
+  }
 }