refactor(editor,stage): 完善页面变化后画布大小更新

packages/editor/src/layouts/workspace/viewer/Stage.vue

@@ -164,9 +164,23 @@ watch(page, (page) => {
     }, 3000);
 
     runtime.updatePageId?.(page.id);
+
+    const unWatch = watch(
+      stageLoading,
+      () => {
+        if (stageLoading.value) {
+          return;
+        }
+
         nextTick(() => {
           stage?.select(page.id);
+          unWatch();
         });
+      },
+      {
+        immediate: true,
+      },
+    );
   }
 });
 

packages/stage/src/StageMask.ts

@@ -236,6 +236,12 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+
+        if (this.mode === Mode.FIXED) {
+          this.content.style.width = `${this.wrapperWidth}px`;
+          this.content.style.height = `${this.wrapperHeight}px`;
+        }
+
         this.setMaxScrollLeft();
         this.setMaxScrollTop();
       });
@@ -286,8 +292,10 @@ export default class StageMask extends Rule {
   private setHeight(height: number): void {
     this.height = height;
     this.setMaxScrollTop();
+    if (this.mode !== Mode.FIXED) {
       this.content.style.height = `${height}px`;
     }
+  }
 
   /**
    * 设置蒙层宽度
@@ -296,8 +304,10 @@ export default class StageMask extends Rule {
   private setWidth(width: number): void {
     this.width = width;
     this.setMaxScrollLeft();
+    if (this.mode !== Mode.FIXED) {
       this.content.style.width = `${width}px`;
     }
+  }
 
   /**
    * 计算并设置最大滚动宽度

packages/stage/src/StageRender.ts

@@ -19,7 +19,7 @@
 import { EventEmitter } from 'events';
 
 import type { Id } from '@tmagic/core';
-import { getElById, getHost, injectStyle, isSameDomain } from '@tmagic/core';
+import { getElById, getHost, guid, injectStyle, isSameDomain } from '@tmagic/core';
 
 import { DEFAULT_ZOOM, RenderType } from './const';
 import style from './style.css?raw';
@@ -54,7 +54,10 @@ export default class StageRender extends EventEmitter {
   }
 
   public getMagicApi = () => ({
-    onPageElUpdate: (el: HTMLElement) => this.emit('page-el-update', el),
+    id: guid(),
+    onPageElUpdate: (el: HTMLElement) => {
+      this.emit('page-el-update', el);
+    },
     onRuntimeReady: (runtime: Runtime) => {
       if (this.runtime) {
         return;

packages/stage/src/types.ts

@@ -214,6 +214,7 @@ export interface Runtime {
 }
 
 export interface Magic {
+  id: string;
   /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
   onPageElUpdate: (el: HTMLElement) => void;