@tmagic/editor 1.5.4 → 1.5.5

package/src/initService.ts

@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
+import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type TMagicCore from '@tmagic/core';
@@ -8,7 +8,7 @@ import type {
   EventOption,
   Id,
   MApp,
-  MNode,
+  MComponent,
   MPage,
   MPageFragment,
 } from '@tmagic/core';
@@ -22,7 +22,7 @@ import {
   Target,
 } from '@tmagic/core';
 import { ChangeRecord } from '@tmagic/form';
-import { getNodes, isPage, isValueIncludeDataSource, traverseNode } from '@tmagic/utils';
+import { getNodes, isPage, isValueIncludeDataSource } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { isIncludeDataSource } from './utils/editor';
@@ -106,11 +106,12 @@ export const initServiceState = (
       const eventsList: Record<string, EventOption[]> = {};
       const methodsList: Record<string, EventOption[]> = {};
 
-      eventMethodList &&
-        Object.keys(eventMethodList).forEach((type: string) => {
+      if (eventMethodList) {
+        for (const type of Object.keys(eventMethodList)) {
           eventsList[type] = eventMethodList[type].events;
           methodsList[type] = eventMethodList[type].methods;
-        });
+        }
+      }
 
       eventsService.setEvents(eventsList);
       eventsService.setMethods(methodsList);
@@ -123,10 +124,13 @@ export const initServiceState = (
   watch(
     () => props.datasourceConfigs,
     (configs) => {
-      configs &&
-        Object.entries(configs).forEach(([key, value]) => {
-          dataSourceService.setFormConfig(key, value);
-        });
+      if (!configs) {
+        return;
+      }
+
+      for (const [key, value] of Object.entries(configs)) {
+        dataSourceService.setFormConfig(key, value);
+      }
     },
     {
       immediate: true,
@@ -136,10 +140,13 @@ export const initServiceState = (
   watch(
     () => props.datasourceValues,
     (values) => {
-      values &&
-        Object.entries(values).forEach(([key, value]) => {
-          dataSourceService.setFormValue(key, value);
-        });
+      if (!values) {
+        return;
+      }
+
+      for (const [key, value] of Object.entries(values)) {
+        dataSourceService.setFormValue(key, value);
+      }
     },
     {
       immediate: true,
@@ -152,18 +159,20 @@ export const initServiceState = (
       const eventsList: Record<string, EventOption[]> = {};
       const methodsList: Record<string, EventOption[]> = {};
 
-      eventMethodList &&
-        Object.keys(eventMethodList).forEach((type: string) => {
+      if (eventMethodList) {
+        for (const type of Object.keys(eventMethodList)) {
           eventsList[type] = eventMethodList[type].events;
           methodsList[type] = eventMethodList[type].methods;
-        });
+        }
+      }
 
-      Object.entries(eventsList).forEach(([key, value]) => {
+      for (const [key, value] of Object.entries(eventsList)) {
         dataSourceService.setFormEvent(key, value);
-      });
-      Object.entries(methodsList).forEach(([key, value]) => {
+      }
+
+      for (const [key, value] of Object.entries(methodsList)) {
         dataSourceService.setFormMethod(key, value);
-      });
+      }
     },
     {
       immediate: true,
@@ -203,74 +212,8 @@ export const initServiceEvents = (
     ((event: 'update:modelValue', value: MApp | null) => void),
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
-  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
-    if (!value) return;
-
-    value.codeBlocks = value.codeBlocks || {};
-    value.dataSources = value.dataSources || [];
-
-    codeBlockService.setCodeDsl(value.codeBlocks);
-    dataSourceService.set('dataSources', value.dataSources);
-
-    depService.removeTargets(DepTargetType.CODE_BLOCK);
-
-    Object.entries(value.codeBlocks).forEach(([id, code]) => {
-      depService.addTarget(createCodeBlockTarget(id, code));
-    });
-
-    dataSourceService.get('dataSources').forEach((ds) => {
-      initDataSourceDepTarget(ds);
-    });
-
-    if (Array.isArray(value.items)) {
-      depService.clearIdleTasks();
-      collectIdle(value.items, true);
-    } else {
-      depService.clear();
-      delete value.dataSourceDeps;
-      delete value.dataSourceCondDeps;
-    }
-
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
-
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
-
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
-  };
-
-  const stage = computed(() => editorService.get('stage'));
-
-  watch(stage, (stage) => {
-    if (!stage) {
-      return;
-    }
-
-    stage.on('rerender', () => {
-      const node = editorService.get('node');
-
-      if (!node) return;
-
-      collectIdle([node], true);
-      updateStage([node]);
-    });
-  });
-
-  const getApp = () => {
-    const renderer = stage.value?.renderer;
+  const getTMagicApp = () => {
+    const renderer = editorService.get('stage')?.renderer;
     if (!renderer) {
       return undefined;
     }
@@ -280,6 +223,7 @@ export const initServiceEvents = (
     }
 
     return new Promise<TMagicCore | undefined>((resolve) => {
+      // 设置 10s 超时
       const timeout = globalThis.setTimeout(() => {
         resolve(undefined);
       }, 10000);
@@ -293,127 +237,50 @@ export const initServiceEvents = (
     });
   };
 
-  const updateDataSourceSchema = async () => {
-    const root = editorService.get('root');
-    const app = await getApp();
-
-    if (root && app?.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSources = root.dataSources;
-    }
-
-    if (root?.dataSources) {
-      app?.dataSourceManager?.updateSchema(root.dataSources);
+  const updateStageNodes = (nodes: MComponent[]) => {
+    for (const node of nodes) {
+      updateStageNode(node);
     }
   };
 
-  const targetAddHandler = (target: Target) => {
+  const updateStageNode = (node: MComponent) => {
     const root = editorService.get('root');
     if (!root) return;
 
-    if (target.type === DepTargetType.DATA_SOURCE) {
-      if (!root.dataSourceDeps) {
-        root.dataSourceDeps = {};
-      }
-      root.dataSourceDeps[target.id] = target.deps;
-    }
-
-    if (target.type === DepTargetType.DATA_SOURCE_COND) {
-      if (!root.dataSourceCondDeps) {
-        root.dataSourceCondDeps = {};
-      }
-      root.dataSourceCondDeps[target.id] = target.deps;
-    }
+    return editorService.get('stage')?.update({
+      config: cloneDeep(node),
+      parentId: editorService.getParentById(node.id)?.id,
+      root: cloneDeep(root),
+    });
   };
 
-  const targetRemoveHandler = (id: string | number) => {
+  const updateDataSourceSchema = async () => {
     const root = editorService.get('root');
+    const app = await getTMagicApp();
 
-    if (!root) return;
+    if (!app || !root) {
+      return;
+    }
 
-    if (root.dataSourceDeps) {
-      delete root.dataSourceDeps[id];
+    if (app.dsl) {
+      app.dsl.dataSources = root.dataSources;
     }
 
-    if (root.dataSourceCondDeps) {
-      delete root.dataSourceCondDeps[id];
+    if (root.dataSources) {
+      app.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
 
-  /**
-   * 修改dsl后会执行依赖收集并调用此方法
-   * 所以这个方法是会被执行两次，当时updateStage应当时一次，所以通过inDeps参数来区分调用时机
-   * inDeps为true是则更新依赖收集到的节点，否则则更新没有依赖的节点
-   * @param nodes 需要更新的节点
-   * @param inDeps 是否依赖收集完成事件中执行的
-   * @returns
-   */
-  const updateStage = (nodes: MNode[], inDeps = false) => {
+  const dsDepCollectedHandler = async () => {
     const root = editorService.get('root');
-    if (!root) return;
-
-    const update = (node: MNode) =>
-      stage.value?.update({
-        config: cloneDeep(node),
-        parentId: editorService.getParentById(node.id)?.id,
-        root: cloneDeep(root),
-      });
-
-    nodes.forEach((node) => {
-      const inDepsNodeId: Id[] = [];
-      const deps = Object.values(root.dataSourceDeps || {});
-      deps.forEach((dep) => {
-        Object.keys(dep).forEach((id) => {
-          inDepsNodeId.push(id);
-        });
-      });
-
-      if (inDeps) {
-        if (inDepsNodeId.includes(node.id)) {
-          update(node);
-        }
-      } else {
-        if (!inDepsNodeId.includes(node.id)) {
-          update(node);
-        }
-      }
-    });
-  };
+    const app = await getTMagicApp();
 
-  const dsDepCollectedHandler = async (nodes: MNode[], deep: boolean) => {
-    const root = editorService.get('root');
-    if (!root) return;
-    const app = await getApp();
-    if (app?.dsl) {
+    if (root && app?.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
     }
-    if (deep) {
-      nodes.forEach((node) => {
-        traverseNode<MNode>(
-          node,
-          (node) => {
-            updateStage([node], true);
-          },
-          [],
-          true,
-        );
-      });
-    } else {
-      updateStage(nodes, true);
-    }
-  };
-
-  depService.on('add-target', targetAddHandler);
-  depService.on('remove-target', targetRemoveHandler);
-  depService.on('ds-collected', dsDepCollectedHandler);
-
-  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
-    depService.addTarget(createDataSourceTarget(ds, reactive({})));
-    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
-    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const collectIdle = (nodes: MNode[], deep: boolean) =>
+  const collectIdle = (nodes: MComponent[], deep: boolean, type?: DepTargetType) =>
     Promise.all(
       nodes.map((node) => {
         let pageId: Id | undefined;
@@ -424,63 +291,163 @@ export const initServiceEvents = (
           const info = editorService.getNodeInfo(node.id);
           pageId = info.page?.id;
         }
-        return depService.collectIdle([node], { pageId }, deep);
+        return depService.collectIdle([node], { pageId }, deep, type);
       }),
     );
 
+  watch(
+    () => editorService.get('stage'),
+    (stage) => {
+      if (!stage) {
+        return;
+      }
+
+      stage.on('rerender', async () => {
+        const node = editorService.get('node');
+
+        if (!node) return;
+
+        await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+        updateStageNode(node);
+      });
+    },
+  );
+
+  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
+  };
+
+  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
+    if (!value) return;
+
+    value.codeBlocks = value.codeBlocks || {};
+    value.dataSources = value.dataSources || [];
+
+    codeBlockService.setCodeDsl(value.codeBlocks);
+    dataSourceService.set('dataSources', value.dataSources);
+
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
+
+    for (const [id, code] of Object.entries(value.codeBlocks)) {
+      depService.addTarget(createCodeBlockTarget(id, code));
+    }
+
+    for (const ds of dataSourceService.get('dataSources')) {
+      initDataSourceDepTarget(ds);
+    }
+
+    if (Array.isArray(value.items)) {
+      depService.clearIdleTasks();
+      collectIdle(value.items, true).then(() => {
+        updateStageNodes(value.items);
+      });
+    } else {
+      depService.clear();
+      delete value.dataSourceDeps;
+      delete value.dataSourceCondDeps;
+    }
+
+    const nodeId = editorService.get('node')?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set('nodes', [value]);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+    }
+
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit('update:modelValue', value);
+    }
+  };
+
   // 新增节点，收集依赖
-  const nodeAddHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true);
+  const nodeAddHandler = async (nodes: MComponent[]) => {
+    await collectIdle(nodes, true);
 
-    updateStage(nodes);
+    updateStageNodes(nodes);
   };
 
   // 节点更新，收集依赖
   // 仅当修改到数据源相关的才收集
-  const nodeUpdateHandler = (data: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]) => {
-    const needRecollectNodes: MNode[] = [];
-    const normalNodes: MNode[] = [];
-    data.forEach(({ newNode, oldNode, changeRecords }) => {
+  const nodeUpdateHandler = async (
+    data: { newNode: MComponent; oldNode: MComponent; changeRecords?: ChangeRecord[] }[],
+  ) => {
+    const needRecollectNodes: MComponent[] = [];
+    const normalNodes: MComponent[] = [];
+    for (const { newNode, oldNode, changeRecords } of data) {
       if (changeRecords?.length) {
-        for (const record of changeRecords) {
+        // eslint-disable-next-line no-restricted-syntax
+        forChangeRecords: for (const record of changeRecords) {
+          if (!record.propPath) {
+            needRecollectNodes.push(newNode);
+            break forChangeRecords;
+          }
+
           // NODE_CONDS_KEY为显示条件key
           if (
-            !record.propPath ||
             new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) ||
             new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) ||
             record.propPath === NODE_CONDS_KEY ||
             isValueIncludeDataSource(record.value)
           ) {
             needRecollectNodes.push(newNode);
-          } else {
-            normalNodes.push(newNode);
+            break forChangeRecords;
           }
+
+          // 修改的key在收集的依赖中，则需要触发重新收集
+          for (const target of Object.values(depService.getTargets(DepTargetType.DATA_SOURCE))) {
+            if (!target.deps[newNode.id]) {
+              continue;
+            }
+            if (target.deps[newNode.id].keys.includes(record.propPath)) {
+              needRecollectNodes.push(newNode);
+              break forChangeRecords;
+            }
+          }
+
+          normalNodes.push(newNode);
         }
       } else if (isIncludeDataSource(newNode, oldNode)) {
         needRecollectNodes.push(newNode);
       } else {
         normalNodes.push(newNode);
       }
-    });
+    }
 
     if (needRecollectNodes.length) {
-      collectIdle(needRecollectNodes, true);
-      updateStage(needRecollectNodes);
-    } else if (normalNodes.length) {
-      updateStage(normalNodes);
+      // 有数据源依赖，需要等依赖重新收集完才更新stage
+      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
+      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+      updateStageNodes(needRecollectNodes);
+    } else {
+      updateStageNodes(normalNodes);
+      // 在上面判断是否需要收集数据源依赖中已经更新stage
+      Promise.all([
+        collectIdle(normalNodes, true, DepTargetType.CODE_BLOCK),
+        collectIdle(normalNodes, true, DepTargetType.DATA_SOURCE_METHOD),
+      ]);
     }
   };
 
   // 节点删除，清除对齐的依赖收集
-  const nodeRemoveHandler = (nodes: MNode[]) => {
+  const nodeRemoveHandler = (nodes: MComponent[]) => {
     depService.clear(nodes);
   };
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
-  const historyChangeHandler = (page: MPage | MPageFragment) => {
-    collectIdle([page], true).then(() => {
-      updateDataSourceSchema();
-    });
+  const historyChangeHandler = async (page: MPage | MPageFragment) => {
+    await collectIdle([page], true);
+    updateStageNode(page);
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -489,25 +456,9 @@ export const initServiceEvents = (
   editorService.on('remove', nodeRemoveHandler);
   editorService.on('update', nodeUpdateHandler);
 
-  const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
-    if (depService.hasTarget(id, DepTargetType.CODE_BLOCK)) {
-      depService.getTarget(id, DepTargetType.CODE_BLOCK)!.name = codeBlock.name;
-      return;
-    }
-
-    depService.addTarget(createCodeBlockTarget(id, codeBlock));
-  };
-
-  const codeBlockRemoveHandler = (id: Id) => {
-    depService.removeTarget(id, DepTargetType.CODE_BLOCK);
-  };
-
-  codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
-  codeBlockService.on('remove', codeBlockRemoveHandler);
-
   const dataSourceAddHandler = async (config: DataSourceSchema) => {
     initDataSourceDepTarget(config);
-    const app = await getApp();
+    const app = await getTMagicApp();
     app?.dataSourceManager?.addDataSource(config);
   };
 
@@ -516,19 +467,28 @@ export const initServiceEvents = (
     { changeRecords }: { changeRecords: ChangeRecord[] },
   ) => {
     let needRecollectDep = false;
+    let isModifyField = false;
+    let isModifyMock = false;
+    let isModifyMethod = false;
     for (const changeRecord of changeRecords) {
       if (!changeRecord.propPath) {
         continue;
       }
 
-      needRecollectDep =
+      isModifyField =
         changeRecord.propPath === 'fields' ||
-        changeRecord.propPath === 'methods' ||
         /fields.(\d)+.name/.test(changeRecord.propPath) ||
-        /fields.(\d)+$/.test(changeRecord.propPath) ||
+        /fields.(\d)+$/.test(changeRecord.propPath);
+
+      isModifyMock = changeRecord.propPath === 'mocks';
+
+      isModifyMethod =
+        changeRecord.propPath === 'methods' ||
         /methods.(\d)+.name/.test(changeRecord.propPath) ||
         /methods.(\d)+$/.test(changeRecord.propPath);
 
+      needRecollectDep = isModifyField || isModifyMock || isModifyMethod;
+
       if (needRecollectDep) {
         break;
       }
@@ -542,12 +502,24 @@ export const initServiceEvents = (
         removeDataSourceTarget(config.id);
         initDataSourceDepTarget(config);
 
-        collectIdle(root.items, true).then(() => {
+        let collectIdlePromises: Promise<void[]>[] = [];
+        if (isModifyField) {
+          collectIdlePromises = [
+            collectIdle(root.items, true, DepTargetType.DATA_SOURCE),
+            collectIdle(root.items, true, DepTargetType.DATA_SOURCE_COND),
+          ];
+        } else if (isModifyMock) {
+          collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE)];
+        } else if (isModifyMethod) {
+          collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
+        }
+        Promise.all(collectIdlePromises).then(() => {
           updateDataSourceSchema();
+          updateStageNodes(root.items);
         });
       }
     } else if (root?.dataSources) {
-      const app = await getApp();
+      const app = await getTMagicApp();
       app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
@@ -562,8 +534,14 @@ export const initServiceEvents = (
     const root = editorService.get('root');
     const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
     const nodes = getNodes(nodeIds, root?.items);
-    collectIdle(nodes, false).then(() => {
+
+    Promise.all([
+      collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
+      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
+      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
+    ]).then(() => {
       updateDataSourceSchema();
+      updateStageNodes(nodes);
     });
 
     removeDataSourceTarget(id);
@@ -573,6 +551,59 @@ export const initServiceEvents = (
   dataSourceService.on('update', dataSourceUpdateHandler);
   dataSourceService.on('remove', dataSourceRemoveHandler);
 
+  const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
+    if (depService.hasTarget(id, DepTargetType.CODE_BLOCK)) {
+      depService.getTarget(id, DepTargetType.CODE_BLOCK)!.name = codeBlock.name;
+      return;
+    }
+
+    depService.addTarget(createCodeBlockTarget(id, codeBlock));
+  };
+
+  const codeBlockRemoveHandler = (id: Id) => {
+    depService.removeTarget(id, DepTargetType.CODE_BLOCK);
+  };
+
+  codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
+  codeBlockService.on('remove', codeBlockRemoveHandler);
+
+  const targetAddHandler = (target: Target) => {
+    const root = editorService.get('root');
+    if (!root) return;
+
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    }
+
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
+  };
+
+  const targetRemoveHandler = (id: string | number) => {
+    const root = editorService.get('root');
+
+    if (!root) return;
+
+    if (root.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
+  };
+
+  depService.on('add-target', targetAddHandler);
+  depService.on('remove-target', targetRemoveHandler);
+  depService.on('ds-collected', dsDepCollectedHandler);
+
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);