feat(edtior,stage): 重新渲染改成重新收集依赖后渲染

Tencent · Nov 25, 2024 · a0dd484 · a0dd484
1 parent 8505f82
commit a0dd484
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git 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
@@ -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
@@ -61,7 +61,7 @@ export default (
           'button',
           {
             className: 'moveable-button moveable-rerender-button',
-            title: '重新渲染',
+            title: '重新收集依赖后渲染',
             onClick: () => {
               handler(AbleActionEventType.RERENDER);
             },