diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue index a11245eb..51b4db4a 100644 --- 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 index 0d414d86..b465e068 100644 --- 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 index 52eee764..f253314b 100644 --- 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) => { const map = new Map(); diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts index b0938fa0..5112ee20 100644 --- 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 = { [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 index 15ac7365..fda5cd9e 100644 --- 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) => { diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts index 1a6f910d..e25c3c58 100644 --- 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 = ( - 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 index 09f942e1..a6ca931a 100644 --- 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 = ( + 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]); + }); + } +};