diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue index 9b2ae33b..108ed685 100644 --- a/packages/editor/src/layouts/workspace/viewer/Stage.vue +++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue @@ -164,9 +164,23 @@ watch(page, (page) => { }, 3000); runtime.updatePageId?.(page.id); - nextTick(() => { - stage?.select(page.id); - }); + + const unWatch = watch( + stageLoading, + () => { + if (stageLoading.value) { + return; + } + + nextTick(() => { + stage?.select(page.id); + unWatch(); + }); + }, + { + immediate: true, + }, + ); } }); diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts index 03c1a3bf..e7c4b147 100644 --- a/packages/stage/src/StageMask.ts +++ b/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,7 +292,9 @@ export default class StageMask extends Rule { private setHeight(height: number): void { this.height = height; this.setMaxScrollTop(); - this.content.style.height = `${height}px`; + if (this.mode !== Mode.FIXED) { + this.content.style.height = `${height}px`; + } } /** @@ -296,7 +304,9 @@ export default class StageMask extends Rule { private setWidth(width: number): void { this.width = width; this.setMaxScrollLeft(); - this.content.style.width = `${width}px`; + if (this.mode !== Mode.FIXED) { + this.content.style.width = `${width}px`; + } } /** diff --git a/packages/stage/src/StageRender.ts b/packages/stage/src/StageRender.ts index 5fd4adff..93c52f80 100644 --- a/packages/stage/src/StageRender.ts +++ b/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; diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts index bf0734c1..3ab520f4 100644 --- a/packages/stage/src/types.ts +++ b/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;