refactor(editor,utils): 将traverseNode方法挪到utils中

Tencent · Sep 19, 2024 · eae4892 · eae4892
1 parent 0d1e28b
commit eae4892
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 33 deletions.
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
@@ -58,10 +58,10 @@ import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',

diff --git a/packages/editor/src/hooks/use-filter.ts b/packages/editor/src/hooks/use-filter.ts
@@ -1,9 +1,9 @@
 import { type Ref, ref } from 'vue';
 
 import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
 export const useFilter = (

diff --git a/packages/editor/src/hooks/use-node-status.ts b/packages/editor/src/hooks/use-node-status.ts
@@ -1,9 +1,9 @@
-import { ComputedRef, ref, watch } from 'vue';
+import { type ComputedRef, ref, watch } from 'vue';
 
 import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 
 const createPageNodeStatus = (nodeData: TreeNodeData[], initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();

diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
@@ -1,5 +1,5 @@
 import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, debounce } from 'lodash-es';
 
 import type {
   CodeBlockContent,
@@ -19,12 +19,11 @@ import {
   DepTargetType,
   Target,
 } from '@tmagic/core';
-import { isPage } from '@tmagic/utils';
+import { isPage, traverseNode } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
-import { traverseNode } from './utils';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -292,7 +291,7 @@ export const initServiceEvents = (
     }
   };
 
-  const collectedHandler = (nodes: MNode[], deep: boolean) => {
+  const collectedHandler = debounce((nodes: MNode[], deep: boolean) => {
     const root = editorService.get('root');
     const stage = editorService.get('stage');
 
@@ -336,7 +335,7 @@ export const initServiceEvents = (
           });
       });
     });
-  };
+  }, 300);
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);

diff --git a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
@@ -1,10 +1,9 @@
 import { computed, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
+import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
 
-import { LayerNodeStatus, Services } from '@editor/type';
-import { traverseNode } from '@editor/utils';
+import type { LayerNodeStatus, Services } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {

diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts
@@ -272,26 +272,6 @@ export const serializeConfig = (config: any) =>
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
 
-export interface NodeItem {
-  items?: NodeItem[];
-  [key: string]: any;
-}
-
-export const traverseNode = <T extends NodeItem = NodeItem>(
-  node: T,
-  cb: (node: T, parents: T[]) => void,
-  parents: T[] = [],
-) => {
-  cb(node, parents);
-
-  if (Array.isArray(node.items) && node.items.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item as T, cb, [...parents]);
-    });
-  }
-};
-
 export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer, targetIndex: number) => {
   sourceIndices.sort((a, b) => a - b);
   for (let i = sourceIndices.length - 1; i >= 0; i--) {

diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
@@ -425,3 +425,23 @@ export const dataSourceTemplateRegExp = /\$\{([\s\S]+?)\}/g;
 
 export const isDslNode = (config: MNodeInstance) =>
   typeof config[IS_DSL_NODE_KEY] === 'undefined' || config[IS_DSL_NODE_KEY] === true;
+
+export interface NodeItem {
+  items?: NodeItem[];
+  [key: string]: any;
+}
+
+export const traverseNode = <T extends NodeItem = NodeItem>(
+  node: T,
+  cb: (node: T, parents: T[]) => void,
+  parents: T[] = [],
+) => {
+  cb(node, parents);
+
+  if (Array.isArray(node.items) && node.items.length) {
+    parents.push(node);
+    node.items.forEach((item) => {
+      traverseNode(item as T, cb, [...parents]);
+    });
+  }
+};