feat(editor): 复制组件时收集依赖性能优化改造

parisma · roymondchen · commit cd191f68154e · 2024-05-30T07:44:27.000Z
diff --git a/packages/dep/src/Watcher.ts b/packages/dep/src/Watcher.ts
@@ -114,7 +114,12 @@ export default class Watcher {
    * @param deep 是否需要收集子节点
    * @param type 强制收集指定类型的依赖
    */
-  public collect(nodes: TargetNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+  public collect(
+    nodes: TargetNode[],
+    depExtendedData: DepExtendedData = {},
+    deep = false,
+    type?: DepTargetType | string,
+  ) {
     this.collectByCallback(nodes, type, ({ node, target }) => {
       this.removeTargetDep(target, node);
       this.collectItem(node, target, depExtendedData, deep);
@@ -123,7 +128,7 @@ export default class Watcher {
 
   public collectByCallback(
     nodes: TargetNode[],
-    type: DepTargetType | undefined,
+    type: DepTargetType | string | undefined,
     cb: (data: { node: TargetNode; target: Target }) => void,
   ) {
     traverseTarget(
@@ -144,7 +149,7 @@ export default class Watcher {
    * 清除所有目标的依赖
    * @param nodes 需要清除依赖的节点
    */
-  public clear(nodes?: TargetNode[], type?: DepTargetType) {
+  public clear(nodes?: TargetNode[], type?: DepTargetType | string) {
     let { targetsList } = this;
 
     if (type) {
@@ -179,7 +184,7 @@ export default class Watcher {
    * @param type 类型
    * @param nodes 需要清除依赖的节点
    */
-  public clearByType(type: DepTargetType, nodes?: TargetNode[]) {
+  public clearByType(type: DepTargetType | string, nodes?: TargetNode[]) {
     this.clear(nodes, type);
   }
 
diff --git a/packages/dep/src/types.ts b/packages/dep/src/types.ts
@@ -28,14 +28,6 @@ export interface TargetOptions {
   isCollectByDefault?: boolean;
 }
 
-export interface CustomTargetOptions {
-  isTarget: IsTarget;
-  name?: string;
-  initialDeps?: DepData;
-  /** 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集 */
-  isCollectByDefault?: boolean;
-}
-
 export interface TargetList {
   [type: string]: {
     [targetId: string | number]: Target;
diff --git a/packages/dep/src/utils.ts b/packages/dep/src/utils.ts
@@ -193,7 +193,11 @@ export const createDataSourceMethodTarget = (ds: DataSourceSchema, initialDeps:
     },
   });
 
-export const traverseTarget = (targetsList: TargetList, cb: (target: Target) => void, type?: DepTargetType) => {
+export const traverseTarget = (
+  targetsList: TargetList,
+  cb: (target: Target) => void,
+  type?: DepTargetType | string,
+) => {
   Object.values(targetsList).forEach((targets) => {
     Object.values(targets).forEach((target) => {
       if (type && target.type !== type) {
diff --git a/packages/editor/src/services/codeBlock.ts b/packages/editor/src/services/codeBlock.ts
@@ -20,7 +20,7 @@ import { reactive } from 'vue';
 import { cloneDeep, get, keys, pick } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import { type CustomTargetOptions, Target, Watcher } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { ColumnConfig } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
 
@@ -257,25 +257,20 @@ class CodeBlock extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  public copyWithRelated(config: MNode | MNode[], collectorOptions?: CustomTargetOptions): void {
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
     const copyData: CodeBlockDSL = {};
 
     if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
       const customTarget = new Target({
-        id: 'related-code-when-copy',
         ...collectorOptions,
       });
 
       const coperWatcher = new Watcher();
 
       coperWatcher.addTarget(customTarget);
 
-      coperWatcher.collect(
-        copyNodes.map((node) => ({ id: `${node.id}`, name: `${node.name || node.id}` })),
-        {},
-        true,
-      );
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
 
       Object.keys(customTarget.deps).forEach((nodeId: Id) => {
         const node = editorService.getNodeById(nodeId);
diff --git a/packages/editor/src/services/dataSource.ts b/packages/editor/src/services/dataSource.ts
@@ -3,7 +3,7 @@ import { cloneDeep, get } from 'lodash-es';
 import { Writable } from 'type-fest';
 
 import type { EventOption } from '@tmagic/core';
-import { type CustomTargetOptions, Target, Watcher } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema, Id, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
@@ -162,25 +162,20 @@ class DataSource extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  public copyWithRelated(config: MNode | MNode[], collectorOptions?: CustomTargetOptions): void {
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
     const copyData: DataSourceSchema[] = [];
 
     if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
       const customTarget = new Target({
-        id: 'related-ds-when-copy',
         ...collectorOptions,
       });
 
       const coperWatcher = new Watcher();
 
       coperWatcher.addTarget(customTarget);
 
-      coperWatcher.collect(
-        copyNodes.map((node) => ({ id: `${node.id}`, name: `${node.name || node.id}` })),
-        {},
-        true,
-      );
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
 
       Object.keys(customTarget.deps).forEach((nodeId: Id) => {
         const node = editorService.getNodeById(nodeId);
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
@@ -20,7 +20,7 @@ import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 import { Writable } from 'type-fest';
 
-import { type CustomTargetOptions, Target, Watcher } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
@@ -660,26 +660,20 @@ class Editor extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  public copyWithRelated(config: MNode | MNode[], collectorOptions?: CustomTargetOptions): void {
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
 
     // 初始化复制组件相关的依赖收集器
     if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
       const customTarget = new Target({
-        id: 'related-comp-when-copy',
         ...collectorOptions,
       });
 
       const coperWatcher = new Watcher();
 
       coperWatcher.addTarget(customTarget);
 
-      coperWatcher.collect(
-        copyNodes.map((node) => ({ id: `${node.id}`, name: `${node.name || node.id}` })),
-        {},
-        true,
-      );
-
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
       Object.keys(customTarget.deps).forEach((nodeId: Id) => {
         const node = this.getNodeById(nodeId);
         if (!node) return;
@@ -706,10 +700,7 @@ class Editor extends BaseService {
    * @param position 粘贴的坐标
    * @returns 添加后的组件节点配置
    */
-  public async paste(
-    position: PastePosition = {},
-    collectorOptions?: CustomTargetOptions,
-  ): Promise<MNode | MNode[] | void> {
+  public async paste(position: PastePosition = {}, collectorOptions?: TargetOptions): Promise<MNode | MNode[] | void> {
     const config: MNode[] = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config)) return;
 
diff --git a/packages/editor/src/services/props.ts b/packages/editor/src/services/props.ts
@@ -20,7 +20,7 @@ import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
 import { Writable } from 'type-fest';
 
-import { type CustomTargetOptions, Target, Watcher } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MComponent, MNode } from '@tmagic/schema';
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
@@ -195,20 +195,19 @@ class Props extends BaseService {
    * @param originConfigs 原组件配置
    * @param targetConfigs 待替换的组件配置
    */
-  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[], collectorOptions: CustomTargetOptions) {
+  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[], collectorOptions: TargetOptions) {
     const relateIdMap = this.getRelateIdMap();
 
     if (Object.keys(relateIdMap).length === 0) return;
 
     const target = new Target({
-      id: 'related-comp-when-copy',
       ...collectorOptions,
     });
 
     const coperWatcher = new Watcher();
 
     coperWatcher.addTarget(target);
-    coperWatcher.collect(originConfigs);
+    coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
 
     originConfigs.forEach((config: MNode) => {
       const newId = relateIdMap[config.id];
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
@@ -104,7 +104,7 @@ const collectorOptions = {
   name: '蒙层',
   isTarget: (key: string | number, value: any) =>
     typeof key === 'string' && typeof value === 'string' && key.includes('events') && value.startsWith('overlay_'),
-  autoCollect: false,
+  isCollectByDefault: false,
 };
 
 const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
