@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.11

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -29,6 +29,8 @@
     :disabled="!editable"
     :values="dataSourceValues"
     :title="dialogTitle"
+    :edit-method-name="editMethodName"
+    :edit-field-path="editFieldPath"
     @submit="submitDataSourceHandler"
     @close="editDialogCloseHandler"
   ></DataSourceConfigPanel>
@@ -45,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef, watch } from 'vue';
+import { computed, inject, ref, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { tMagicMessageBox, TMagicScrollbar } from '@tmagic/design';
@@ -79,7 +81,16 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+/** 打开数据源详情时需要直接定位并打开的方法名，为空则正常展示「数据定义」tab */
+const editMethodName = ref('');
+
+/** 打开数据源详情时需要直接定位并打开的字段路径，为空则不自动打开字段配置 */
+const editFieldPath = ref<string[]>([]);
+
 const editDialogCloseHandler = () => {
+  editMethodName.value = '';
+  editFieldPath.value = [];
+
   if (dataSourceListRef.value) {
     for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
       status.selected = false;
@@ -129,7 +140,7 @@ const removeHandler = async (id: string) => {
     type: 'warning',
   });
 
-  dataSourceService.remove(id);
+  dataSourceService.remove(id, { historySource: 'tree-contextmenu' });
 };
 
 const dataSourceListRef = useTemplateRef<InstanceType<typeof DataSourceList>>('dataSourceList');
@@ -139,6 +150,20 @@ const filterTextChangeHandler = (val: string) => {
 };
 
 eventBus?.on('edit-data-source', (id: string) => {
+  editMethodName.value = '';
+  editFieldPath.value = [];
+  editHandler(id);
+});
+
+eventBus?.on('edit-data-source-method', (id: string, methodName: string) => {
+  editMethodName.value = methodName;
+  editFieldPath.value = [];
+  editHandler(id);
+});
+
+eventBus?.on('edit-data-source-field', (id: string, fieldPath: string[]) => {
+  editMethodName.value = '';
+  editFieldPath.value = fieldPath;
   editHandler(id);
 });
 

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -39,7 +39,7 @@ export const useContentMenu = () => {
           return;
         }
 
-        dataSourceService.add(cloneDeep(ds));
+        dataSourceService.add(cloneDeep(ds), { historySource: 'tree-contextmenu' });
       },
     },
     {

package/src/layouts/sidebar/layer/LayerMenu.vue

@@ -41,11 +41,15 @@ const createMenuItems = (group: ComponentGroup): MenuButton[] =>
     type: 'button',
     icon: component.icon,
     handler: () => {
-      editorService.add({
-        name: component.text,
-        type: component.type,
-        ...(component.data || {}),
-      });
+      editorService.add(
+        {
+          name: component.text,
+          type: component.type,
+          ...(component.data || {}),
+        },
+        undefined,
+        { historySource: 'tree-contextmenu' },
+      );
     },
   }));
 
@@ -57,9 +61,13 @@ const getSubMenuData = computed<MenuButton[]>(() => {
         type: 'button',
         icon: Files,
         handler: () => {
-          editorService.add({
-            type: 'tab-pane',
-          });
+          editorService.add(
+            {
+              type: 'tab-pane',
+            },
+            undefined,
+            { historySource: 'tree-contextmenu' },
+          );
         },
       },
     ];
@@ -106,9 +114,9 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         items: getSubMenuData.value,
       },
       useCopyMenu(),
-      usePasteMenu(),
-      useDeleteMenu(),
-      useMoveToMenu(services),
+      usePasteMenu('tree-contextmenu'),
+      useDeleteMenu('tree-contextmenu'),
+      useMoveToMenu(services, 'tree-contextmenu'),
       ...props.layerContentMenu,
     ],
     'layer',

package/src/layouts/sidebar/layer/LayerNodeTool.vue

@@ -25,9 +25,12 @@ const props = defineProps<{
 const { editorService } = useServices();
 
 const setNodeVisible = (visible: boolean) => {
-  editorService.update({
-    id: props.data.id,
-    visible,
-  });
+  editorService.update(
+    {
+      id: props.data.id,
+      visible,
+    },
+    { historySource: 'tree' },
+  );
 };
 </script>

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -9,12 +9,15 @@ import { updateStatus } from '@editor/utils/tree';
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();
 
-  map.set(page.id, {
-    visible: true,
-    expand: true,
-    selected: true,
-    draggable: false,
-  });
+  map.set(
+    page.id,
+    initialLayerNodeStatus?.get(page.id) || {
+      visible: true,
+      expand: true,
+      selected: true,
+      draggable: false,
+    },
+  );
 
   page.items.forEach((node: MNode) =>
     traverseNode<MNode>(node, (node) => {

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

@@ -380,7 +380,7 @@ const dropHandler = async (e: DragEvent) => {
 
     config.data.inputEvent = e;
 
-    editorService.add(config.data, parent);
+    editorService.add(config.data, parent, { historySource: 'component-panel' });
   }
 };
 </script>

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

@@ -49,11 +49,11 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         display: () => canCenter.value,
         handler: () => {
           if (!nodes.value) return;
-          editorService.alignCenter(nodes.value);
+          editorService.alignCenter(nodes.value, { historySource: 'stage-contextmenu' });
         },
       },
       useCopyMenu(),
-      usePasteMenu(menuRef),
+      usePasteMenu('stage-contextmenu', menuRef),
       {
         type: 'divider',
         direction: 'horizontal',
@@ -68,7 +68,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(1);
+          editorService.moveLayer(1, { historySource: 'stage-contextmenu' });
         },
       },
       {
@@ -77,7 +77,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(-1);
+          editorService.moveLayer(-1, { historySource: 'stage-contextmenu' });
         },
       },
       {
@@ -86,7 +86,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(LayerOffset.TOP);
+          editorService.moveLayer(LayerOffset.TOP, { historySource: 'stage-contextmenu' });
         },
       },
       {
@@ -95,16 +95,16 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(LayerOffset.BOTTOM);
+          editorService.moveLayer(LayerOffset.BOTTOM, { historySource: 'stage-contextmenu' });
         },
       },
-      useMoveToMenu(services),
+      useMoveToMenu(services, 'stage-contextmenu'),
       {
         type: 'divider',
         direction: 'horizontal',
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
       },
-      useDeleteMenu(),
+      useDeleteMenu('stage-contextmenu'),
       {
         type: 'divider',
         direction: 'horizontal',

package/src/services/BaseService.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
@@ -19,45 +18,32 @@
 
 import { EventEmitter } from 'events';
 
-import { compose } from '@editor/utils/compose';
-
 const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 
 const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
 
-const doAction = (
-  args: any[],
-  scope: any,
-  sourceMethod: any,
-  beforeMethodName: string,
-  afterMethodName: string,
-  fn: (args: any[], next?: Function | undefined) => void,
-) => {
-  try {
-    let beforeArgs = args;
+const doAction = (args: any[], scope: any, sourceMethod: any, beforeMethodName: string, afterMethodName: string) => {
+  let beforeArgs = args;
 
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = beforeMethod(...beforeArgs) || [];
+  for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+    beforeArgs = beforeMethod(...beforeArgs) || [];
 
-      if (isError(beforeArgs)) throw beforeArgs;
+    if (isError(beforeArgs)) throw beforeArgs;
 
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [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);
+  let returnValue: any = sourceMethod.apply(scope, beforeArgs);
 
-      if (isError(returnValue)) throw returnValue;
-    }
+  for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+    returnValue = afterMethod(returnValue, ...beforeArgs);
 
-    return returnValue;
-  } catch (error) {
-    throw error;
+    if (isError(returnValue)) throw returnValue;
   }
+
+  return returnValue;
 };
 
 const doAsyncAction = async (
@@ -66,40 +52,34 @@ const doAsyncAction = async (
   sourceMethod: any,
   beforeMethodName: string,
   afterMethodName: string,
-  fn: (args: any[], next?: Function | undefined) => Promise<void> | void,
 ) => {
-  try {
-    let beforeArgs = args;
+  let beforeArgs = args;
 
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = (await beforeMethod(...beforeArgs)) || [];
+  for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+    beforeArgs = (await beforeMethod(...beforeArgs)) || [];
 
-      if (isError(beforeArgs)) throw beforeArgs;
+    if (isError(beforeArgs)) throw beforeArgs;
 
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
+    if (!Array.isArray(beforeArgs)) {
+      beforeArgs = [beforeArgs];
     }
+  }
 
-    let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
-
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(returnValue, ...beforeArgs);
+  let returnValue: any = await sourceMethod.apply(scope, beforeArgs);
 
-      if (isError(returnValue)) throw returnValue;
-    }
+  for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+    returnValue = await afterMethod(returnValue, ...beforeArgs);
 
-    return returnValue;
-  } catch (error) {
-    throw error;
+    if (isError(returnValue)) throw returnValue;
   }
+
+  return returnValue;
 };
 
 /**
- * 提供两种方式对Class进行扩展
- * 方法1：
+ * 对Class进行扩展
  * 给Class中的每个方法都添加before after两个钩子
- * 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+ * 给Class添加一个usePlugin方法，usePlugin方法可以传入一个包含before或者after方法的对象
  *
  * 例如：
  *   Class EditorService extends BaseService {
@@ -124,27 +104,9 @@ const doAsyncAction = async (
  *
  * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
- *
- * 方法2：
- * 给Class中的每个方法都添加中间件
- * 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
- *
- * 例如：
- *   Class EditorService extends BaseService {
- *     constructor() {
- *       super([ { name: 'add', isAsync: true },]);
- *     }
- *     add(value) { return result; }
- *   };
- *
- *  const editorService = new EditorService();
- *  editorService.use({
- *    add(value, next) { console.log(value); next() },
- *  });
  */
-export default class extends EventEmitter {
+class BaseService extends EventEmitter {
   private pluginOptionsList: Record<string, Function[]> = {};
-  private middleware: Record<string, Function[]> = {};
   private taskList: (() => Promise<void>)[] = [];
   private doingTask = false;
 
@@ -161,14 +123,12 @@ export default class extends EventEmitter {
 
       this.pluginOptionsList[beforeMethodName] = [];
       this.pluginOptionsList[afterMethodName] = [];
-      this.middleware[propertyName] = [];
 
-      const fn = compose(this.middleware[propertyName], isAsync);
       Object.defineProperty(scope, propertyName, {
         value: isAsync
           ? async (...args: any[]) => {
               if (!serialMethods.includes(propertyName)) {
-                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName);
               }
 
               // 由于async await，所以会出现函数执行到await时让出线程，导致执行顺序出错，例如调用了select(1) -> update -> select(2)，这个时候就有可能出现update了2；
@@ -176,7 +136,7 @@ export default class extends EventEmitter {
               const promise = new Promise<any>((resolve, reject) => {
                 this.taskList.push(async () => {
                   try {
-                    const value = await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                    const value = await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName);
                     resolve(value);
                   } catch (e) {
                     reject(e);
@@ -190,20 +150,11 @@ export default class extends EventEmitter {
 
               return promise;
             }
-          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn),
+          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName),
       });
     });
   }
 
-  /**
-   * @deprecated 请使用usePlugin代替
-   */
-  public use(options: Record<string, Function>) {
-    for (const [methodName, method] of Object.entries(options)) {
-      if (typeof method === 'function') this.middleware[methodName].push(method);
-    }
-  }
-
   public usePlugin(options: Record<string, Function>) {
     for (const [methodName, method] of Object.entries(options)) {
       if (typeof method === 'function' && !this.pluginOptionsList[methodName].includes(method)) {
@@ -224,10 +175,6 @@ export default class extends EventEmitter {
     for (const key of Object.keys(this.pluginOptionsList)) {
       this.pluginOptionsList[key] = [];
     }
-
-    for (const key of Object.keys(this.middleware)) {
-      this.middleware[key] = [];
-    }
   }
 
   private async doTask() {
@@ -240,3 +187,5 @@ export default class extends EventEmitter {
     this.doingTask = false;
   }
 }
+
+export default BaseService;