From 7305f878f341ea8531f4075cb23e27a75590029b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 15 Dec 2023 14:09:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,=20stage):=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E5=8A=A0=E8=BD=BDruntime=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/hooks/use-stage.ts                 | 4 ++++
 packages/editor/src/layouts/Framework.vue              | 3 +++
 packages/editor/src/layouts/workspace/viewer/Stage.vue | 1 +
 packages/editor/src/services/editor.ts                 | 3 +++
 packages/editor/src/type.ts                            | 1 +
 packages/stage/src/StageCore.ts                        | 2 ++
 6 files changed, 14 insertions(+)

diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
index 7f32fbeb..442d9531 100644
--- a/packages/editor/src/hooks/use-stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -51,6 +51,10 @@ export const useStage = (stageOptions: StageOptions) => {
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);
 
+  stage.on('page-el-update', () => {
+    editorService.set('stageLoading', false);
+  });
+
   stage.on('select', (el: HTMLElement) => {
     if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
     editorService.select(el.id);
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 5cd90b49..bb6fce94 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -11,6 +11,8 @@
     </slot>
 
     <SplitView
+      v-loading="stageLoading"
+      element-loading-text="Runtime 加载中..."
       v-else
       ref="splitView"
       class="m-editor-content"
@@ -77,6 +79,7 @@ const splitView = ref<InstanceType<typeof SplitView>>();
 const root = computed(() => editorService?.get('root'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const stageLoading = computed(() => editorService?.get('stageLoading') || false);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 3f46a31b..2ee2c043 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -108,6 +108,7 @@ watch(zoom, (zoom) => {
 
 watch(page, (page) => {
   if (runtime && page) {
+    services?.editorService.set('stageLoading', true);
     runtime.updatePageId?.(page.id);
     nextTick(() => {
       stage?.select(page.id);
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 7620a8cb..dfc057ad 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -54,6 +54,7 @@ class Editor extends BaseService {
     node: null,
     nodes: [],
     stage: null,
+    stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: new Map(),
     pageLength: 0,
@@ -111,8 +112,10 @@ class Editor extends BaseService {
 
       if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
         this.state.pageLength = value.items?.length || 0;
+        this.state.stageLoading = this.state.pageLength !== 0;
       } else {
         this.state.pageLength = 0;
+        this.state.stageLoading = false;
       }
 
       this.emit('root-change', value, preValue);
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 2893678b..291527a4 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -141,6 +141,7 @@ export interface StoreState {
   highlightNode: MNode | null;
   nodes: MNode[];
   stage: StageCore | null;
+  stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
 }
diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 49af52c9..e0c29d6d 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -279,6 +279,8 @@ export default class StageCore extends EventEmitter {
     this.renderer.on('page-el-update', (el: HTMLElement) => {
       this.mask?.observe(el);
       this.observePageResize(el);
+
+      this.emit('page-el-update', el);
     });
   }