@tmagic/editor 1.3.5 → 1.3.7

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -7,111 +7,121 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import CenterIcon from '@editor/icons/CenterIcon.vue';
-import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
-import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 defineOptions({
   name: 'MEditorViewerMenu',
 });
 
 const props = withDefaults(
-  defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
-  { isMultiSelect: false },
+  defineProps<{
+    isMultiSelect?: boolean;
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    isMultiSelect: false,
+    stageContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
 );
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const menu = ref<InstanceType<typeof ContentMenu>>();
-const canPaste = ref(false);
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));
 const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
-  {
-    type: 'button',
-    text: '水平居中',
-    icon: markRaw(CenterIcon),
-    display: () => canCenter.value,
-    handler: () => {
-      if (!nodes.value) return;
-      editorService?.alignCenter(nodes.value);
-    },
-  },
-  useCopyMenu(),
-  usePasteMenu(menu),
-  {
-    type: 'divider',
-    direction: 'horizontal',
-    display: () => {
-      if (!node.value) return false;
-      return !isPage(node.value);
-    },
-  },
-  {
-    type: 'button',
-    text: '上移一层',
-    icon: markRaw(Top),
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-    handler: () => {
-      editorService?.moveLayer(1);
-    },
-  },
-  {
-    type: 'button',
-    text: '下移一层',
-    icon: markRaw(Bottom),
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-    handler: () => {
-      editorService?.moveLayer(-1);
-    },
-  },
-  {
-    type: 'button',
-    text: '置顶',
-    icon: markRaw(Top),
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-    handler: () => {
-      editorService?.moveLayer(LayerOffset.TOP);
-    },
-  },
-  {
-    type: 'button',
-    text: '置底',
-    icon: markRaw(Bottom),
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-    handler: () => {
-      editorService?.moveLayer(LayerOffset.BOTTOM);
-    },
-  },
-  useMoveToMenu(services),
-  {
-    type: 'divider',
-    direction: 'horizontal',
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-  },
-  useDeleteMenu(),
-  {
-    type: 'divider',
-    direction: 'horizontal',
-  },
-  {
-    type: 'button',
-    text: '清空参考线',
-    handler: () => {
-      editorService?.get('stage')?.clearGuides();
-    },
-  },
-  ...props.stageContentMenu,
-]);
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
+      {
+        type: 'button',
+        text: '水平居中',
+        icon: markRaw(CenterIcon),
+        display: () => canCenter.value,
+        handler: () => {
+          if (!nodes.value) return;
+          editorService?.alignCenter(nodes.value);
+        },
+      },
+      useCopyMenu(),
+      usePasteMenu(menu),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+        display: () => {
+          if (!node.value) return false;
+          return !isPage(node.value) && !isPageFragment(node.value);
+        },
+      },
+      {
+        type: 'button',
+        text: '上移一层',
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(1);
+        },
+      },
+      {
+        type: 'button',
+        text: '下移一层',
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(-1);
+        },
+      },
+      {
+        type: 'button',
+        text: '置顶',
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.TOP);
+        },
+      },
+      {
+        type: 'button',
+        text: '置底',
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.BOTTOM);
+        },
+      },
+      useMoveToMenu(services),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+      },
+      useDeleteMenu(),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+      },
+      {
+        type: 'button',
+        text: '清空参考线',
+        handler: () => {
+          editorService?.get('stage')?.clearGuides();
+        },
+      },
+      ...props.stageContentMenu,
+    ],
+    'viewer',
+  ),
+);
 
 watch(
   parent,
@@ -127,10 +137,8 @@ watch(
   { immediate: true },
 );
 
-const show = async (e: MouseEvent) => {
+const show = (e: MouseEvent) => {
   menu.value?.show(e);
-  const data = await storageService.getItem(COPY_STORAGE_KEY);
-  canPaste.value = data !== 'undefined' && !!data;
 };
 
 defineExpose({ show });

package/src/services/BaseService.ts

@@ -24,13 +24,48 @@ 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 (
+const doAction = (
   args: any[],
   scope: any,
   sourceMethod: any,
   beforeMethodName: string,
   afterMethodName: string,
-  fn: (args: any[], next?: Function | undefined) => Promise<void>,
+  fn: (args: any[], next?: Function | undefined) => void,
+) => {
+  try {
+    let beforeArgs = args;
+
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = beforeMethod(...beforeArgs) || [];
+
+      if (isError(beforeArgs)) throw beforeArgs;
+
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
+      }
+    }
+
+    let returnValue: any = fn(beforeArgs, sourceMethod.bind(scope));
+
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = afterMethod(returnValue, ...beforeArgs);
+
+      if (isError(returnValue)) throw returnValue;
+    }
+
+    return returnValue;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const doAsyncAction = async (
+  args: any[],
+  scope: any,
+  sourceMethod: any,
+  beforeMethodName: string,
+  afterMethodName: string,
+  fn: (args: any[], next?: Function | undefined) => Promise<void> | void,
 ) => {
   try {
     let beforeArgs = args;
@@ -112,10 +147,10 @@ export default class extends EventEmitter {
   private taskList: (() => Promise<void>)[] = [];
   private doingTask = false;
 
-  constructor(methods: string[] = [], serialMethods: string[] = []) {
+  constructor(methods: { name: string; isAsync: boolean }[] = [], serialMethods: string[] = []) {
     super();
 
-    methods.forEach((propertyName: string) => {
+    methods.forEach(({ name: propertyName, isAsync }) => {
       const scope = this as any;
 
       const sourceMethod = scope[propertyName];
@@ -127,32 +162,34 @@ export default class extends EventEmitter {
       this.pluginOptionsList[afterMethodName] = [];
       this.middleware[propertyName] = [];
 
-      const fn = compose(this.middleware[propertyName]);
+      const fn = compose(this.middleware[propertyName], isAsync);
       Object.defineProperty(scope, propertyName, {
-        value: async (...args: any[]) => {
-          if (!serialMethods.includes(propertyName)) {
-            return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
-          }
-
-          // 由于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);
+        value: isAsync
+          ? async (...args: any[]) => {
+              if (!serialMethods.includes(propertyName)) {
+                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
               }
-            });
-          });
 
-          if (!this.doingTask) {
-            this.doTask();
-          }
+              // 由于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 doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                    resolve(value);
+                  } catch (e) {
+                    reject(e);
+                  }
+                });
+              });
+
+              if (!this.doingTask) {
+                this.doTask();
+              }
 
-          return promise;
-        },
+              return promise;
+            }
+          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn),
       });
     });
   }

package/src/services/codeBlock.ts

@@ -38,7 +38,13 @@ class CodeBlock extends BaseService {
   });
 
   constructor() {
-    super(['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds']);
+    super([
+      { name: 'setCodeDslById', isAsync: true },
+      { name: 'setEditStatus', isAsync: true },
+      { name: 'setCombineIds', isAsync: true },
+      { name: 'setUndeleteableList', isAsync: true },
+      { name: 'deleteCodeDslByIds', isAsync: true },
+    ]);
   }
 
   /**

package/src/services/dep.ts

@@ -35,8 +35,8 @@ class Dep extends BaseService {
     return this.watcher.getTargets(type);
   }
 
-  public getTarget(id: Id) {
-    return this.watcher.getTarget(id);
+  public getTarget(id: Id, type: string = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
   }
 
   public addTarget(target: Target) {
@@ -44,8 +44,8 @@ class Dep extends BaseService {
     this.emit('add-target', target);
   }
 
-  public removeTarget(id: Id) {
-    this.watcher.removeTarget(id);
+  public removeTarget(id: Id, type: string = DepTargetType.DEFAULT) {
+    this.watcher.removeTarget(id, type);
     this.emit('remove-target');
   }
 
@@ -53,8 +53,8 @@ class Dep extends BaseService {
     this.watcher.clearTargets();
   }
 
-  public collect(nodes: MNode[], deep = false) {
-    this.watcher.collect(nodes, deep);
+  public collect(nodes: MNode[], deep = false, type?: DepTargetType) {
+    this.watcher.collect(nodes, deep, type);
     this.emit('collected', nodes, deep);
   }
 
@@ -62,8 +62,12 @@ class Dep extends BaseService {
     return this.watcher.clear(nodes);
   }
 
-  public hasTarget(id: Id) {
-    return this.watcher.hasTarget(id);
+  public hasTarget(id: Id, type: string = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
+  }
+
+  public hasSpecifiedTypeTarget(type: string = DepTargetType.DEFAULT): boolean {
+    return this.watcher.hasSpecifiedTypeTarget(type);
   }
 }