From f0f94d4fcc451dc1d3e55ea2a3656d75592bd62e Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 6 Nov 2023 16:33:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20model-value=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E5=90=8E=E9=9C=80=E8=A6=81=E9=87=8D=E6=96=B0=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=90=8E=E5=86=8D=E9=80=9A=E7=9F=A5runtime?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/initService.ts            | 42 +++++++++----------
 .../src/layouts/workspace/viewer/Stage.vue    | 17 ++++----
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
index 0fb088275..6cd7f8a37 100644
--- a/packages/editor/src/initService.ts
+++ b/packages/editor/src/initService.ts
@@ -276,26 +276,6 @@ export const initServiceEvents = (
   };
 
   const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
-
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value?.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value?.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
-
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
-
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -314,12 +294,32 @@ export const initServiceEvents = (
       initDataSourceDepTarget(ds);
     });
 
-    if (value && Array.isArray(value.items)) {
+    if (Array.isArray(value.items)) {
       depService.collect(value.items, true);
     } else {
       depService.clear();
       delete value.dataSourceDeps;
     }
+
+    const nodeId = editorService.get('node')?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set('nodes', [value]);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+    }
+
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit('update:modelValue', value);
+    }
   };
 
   // 新增节点，收集依赖
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 5f810403f..fb5ad4267 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -33,7 +33,7 @@
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MContainer } from '@tmagic/schema';
+import type { MApp, MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
@@ -105,12 +105,6 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
-watch(root, (root) => {
-  if (runtime && root) {
-    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
-  }
-});
-
 watch(page, (page) => {
   if (runtime && page) {
     runtime.updatePageId?.(page.id);
@@ -120,6 +114,14 @@ watch(page, (page) => {
   }
 });
 
+const rootChangeHandler = (root: MApp) => {
+  if (runtime && root) {
+    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+  }
+};
+
+services?.editorService.on('root-change', rootChangeHandler);
+
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     services?.uiService.set('stageContainerRect', {
@@ -141,6 +143,7 @@ onUnmounted(() => {
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
   services?.keybindingService.unregisteEl('stage');
+  services?.editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getConfig('parseDSL');