diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts index cd0012ea..ebd93637 100644 --- a/packages/editor/src/hooks/use-stage.ts +++ b/packages/editor/src/hooks/use-stage.ts @@ -1,5 +1,4 @@ import { computed, watch } from 'vue'; -import { cloneDeep } from 'lodash-es'; import type { MNode } from '@tmagic/core'; import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage'; @@ -132,17 +131,5 @@ export const useStage = (stageOptions: StageOptions) => { } }); - stage.on('rerender', () => { - const node = editorService.get('node'); - - if (!node || !root.value) return; - - stage.update({ - config: cloneDeep(node), - parentId: editorService.getParentById(node.id)?.id, - root: cloneDeep(root.value), - }); - }); - return stage; }; diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts index b0b2ed85..588482fc 100644 --- a/packages/editor/src/initService.ts +++ b/packages/editor/src/initService.ts @@ -1,4 +1,4 @@ -import { onBeforeUnmount, reactive, toRaw, watch } from 'vue'; +import { computed, onBeforeUnmount, reactive, toRaw, watch } from 'vue'; import { cloneDeep } from 'lodash-es'; import type { @@ -251,10 +251,25 @@ export const initServiceEvents = ( } }; - const getApp = () => { - const stage = editorService.get('stage'); - return stage?.renderer?.runtime?.getApp?.(); - }; + 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).then(() => { + afterUpdateNodes([node]); + }); + }); + }); + + const getApp = () => stage.value?.renderer?.runtime?.getApp?.(); const updateDataSourceSchema = (nodes: MNode[], deep: boolean) => { const root = editorService.get('root'); @@ -270,9 +285,7 @@ export const initServiceEvents = ( getApp()?.dataSourceManager?.updateSchema(root.dataSources); } - const stage = editorService.get('stage'); - - if (!root || !stage) return; + if (!root || !stage.value) return; const allNodes: MNode[] = []; @@ -293,7 +306,7 @@ export const initServiceEvents = ( Object.keys(dep).forEach((id) => { const node = allNodes.find((node) => node.id === id); node && - stage.update({ + stage.value?.update({ config: cloneDeep(node), parentId: editorService.getParentById(node.id)?.id, root: cloneDeep(root), @@ -305,9 +318,8 @@ export const initServiceEvents = ( const afterUpdateNodes = (nodes: MNode[]) => { const root = editorService.get('root'); if (!root) return; - const stage = editorService.get('stage'); for (const node of nodes) { - stage?.update({ + stage.value?.update({ config: cloneDeep(node), parentId: editorService.getParentById(node.id)?.id, root: cloneDeep(root), diff --git a/packages/stage/src/MoveableActionsAble.ts b/packages/stage/src/MoveableActionsAble.ts index de76b665..3153d14b 100644 --- a/packages/stage/src/MoveableActionsAble.ts +++ b/packages/stage/src/MoveableActionsAble.ts @@ -61,7 +61,7 @@ export default ( 'button', { className: 'moveable-button moveable-rerender-button', - title: '重新渲染', + title: '重新收集依赖后渲染', onClick: () => { handler(AbleActionEventType.RERENDER); },