@tmagic/stage 1.8.0-beta.20 → 1.8.0-beta.22

package/dist/es/StageMask.js

@@ -81,17 +81,20 @@ var StageMask = class extends Rule {
 		this.page = page;
 		this.initObserverIntersection();
 		this.initObserverWrapper();
+		this.syncPageSize();
 	}
 	/**
-	* 处理页面大小变更，同步页面和mask大小
+	* 处理页面大小变更，同步页面和 mask 大小
+	* @description 仅处理当前 page 且仍挂载在文档中的 entry；非当前页、已卸载或宽高为 0 的回调会被忽略
 	* @param entries ResizeObserverEntry，获取页面最新大小
 	*/
 	pageResize(entries) {
-		const [entry] = entries;
-		const { clientHeight, clientWidth } = entry.target;
-		this.setHeight(clientHeight);
-		this.setWidth(clientWidth);
-		this.scroll();
+		if (!this.page || !entries.length) return;
+		const entry = entries.find((item) => item.target === this.page);
+		if (!entry) return;
+		const { target } = entry;
+		if (!target.isConnected) return;
+		this.applyPageSize(target.clientWidth, target.clientHeight);
 	}
 	/**
 	* 监听一个组件是否在画布可视区域内
@@ -132,6 +135,7 @@ var StageMask = class extends Rule {
 		this.content?.remove();
 		this.page = null;
 		this.pageScrollParent = null;
+		this.intersectionObserver?.disconnect();
 		this.wrapperResizeObserver?.disconnect();
 	}
 	on(eventName, listener) {
@@ -202,6 +206,22 @@ var StageMask = class extends Rule {
 		this.content.dispatchEvent(event);
 	}
 	/**
+	* 从当前页面同步蒙层宽高，并修正滚动偏移
+	*/
+	syncPageSize() {
+		if (!this.page?.isConnected) return;
+		this.applyPageSize(this.page.clientWidth, this.page.clientHeight);
+	}
+	/**
+	* 应用页面尺寸到蒙层；宽高为 0 时忽略，避免切换/布局过程中把 editor-mask 置空
+	*/
+	applyPageSize(clientWidth, clientHeight) {
+		if (clientWidth <= 0 || clientHeight <= 0) return;
+		this.setHeight(clientHeight);
+		this.setWidth(clientWidth);
+		this.scroll();
+	}
+	/**
 	* 设置蒙层高度
 	* @param height 高度
 	*/

package/dist/tmagic-stage.umd.cjs

@@ -4373,17 +4373,20 @@
 			this.page = page;
 			this.initObserverIntersection();
 			this.initObserverWrapper();
+			this.syncPageSize();
 		}
 		/**
-		* 处理页面大小变更，同步页面和mask大小
+		* 处理页面大小变更，同步页面和 mask 大小
+		* @description 仅处理当前 page 且仍挂载在文档中的 entry；非当前页、已卸载或宽高为 0 的回调会被忽略
 		* @param entries ResizeObserverEntry，获取页面最新大小
 		*/
 		pageResize(entries) {
-			const [entry] = entries;
-			const { clientHeight, clientWidth } = entry.target;
-			this.setHeight(clientHeight);
-			this.setWidth(clientWidth);
-			this.scroll();
+			if (!this.page || !entries.length) return;
+			const entry = entries.find((item) => item.target === this.page);
+			if (!entry) return;
+			const { target } = entry;
+			if (!target.isConnected) return;
+			this.applyPageSize(target.clientWidth, target.clientHeight);
 		}
 		/**
 		* 监听一个组件是否在画布可视区域内
@@ -4424,6 +4427,7 @@
 			this.content?.remove();
 			this.page = null;
 			this.pageScrollParent = null;
+			this.intersectionObserver?.disconnect();
 			this.wrapperResizeObserver?.disconnect();
 		}
 		on(eventName, listener) {
@@ -4494,6 +4498,22 @@
 			this.content.dispatchEvent(event);
 		}
 		/**
+		* 从当前页面同步蒙层宽高，并修正滚动偏移
+		*/
+		syncPageSize() {
+			if (!this.page?.isConnected) return;
+			this.applyPageSize(this.page.clientWidth, this.page.clientHeight);
+		}
+		/**
+		* 应用页面尺寸到蒙层；宽高为 0 时忽略，避免切换/布局过程中把 editor-mask 置空
+		*/
+		applyPageSize(clientWidth, clientHeight) {
+			if (clientWidth <= 0 || clientHeight <= 0) return;
+			this.setHeight(clientHeight);
+			this.setWidth(clientWidth);
+			this.scroll();
+		}
+		/**
 		* 设置蒙层高度
 		* @param height 高度
 		*/

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.20",
+  "version": "1.8.0-beta.22",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": false,
@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "typescript": "^6.0.3",
-    "@tmagic/core": "1.8.0-beta.20"
+    "@tmagic/core": "1.8.0-beta.22"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/StageMask.ts

@@ -117,19 +117,27 @@ export default class StageMask extends Rule {
     this.page = page;
     this.initObserverIntersection();
     this.initObserverWrapper();
+    // 页面切换后立即同步一次；ResizeObserver 首次回调可能仍上报旧页/0 尺寸
+    this.syncPageSize();
   }
 
   /**
-   * 处理页面大小变更，同步页面和mask大小
+   * 处理页面大小变更，同步页面和 mask 大小
+   * @description 仅处理当前 page 且仍挂载在文档中的 entry；非当前页、已卸载或宽高为 0 的回调会被忽略
    * @param entries ResizeObserverEntry，获取页面最新大小
    */
   public pageResize(entries: ResizeObserverEntry[]): void {
-    const [entry] = entries;
-    const { clientHeight, clientWidth } = entry.target;
-    this.setHeight(clientHeight);
-    this.setWidth(clientWidth);
+    if (!this.page || !entries.length) return;
 
-    this.scroll();
+    // 取当前 page 对应 entry，避免 batch 中首项是旧页时整批被丢弃
+    const entry = entries.find((item) => item.target === this.page);
+    if (!entry) return;
+
+    const { target } = entry;
+    // 旧页卸载后仍可能回调，已断开连接的节点不再同步尺寸
+    if (!target.isConnected) return;
+
+    this.applyPageSize(target.clientWidth, target.clientHeight);
   }
 
   /**
@@ -186,6 +194,7 @@ export default class StageMask extends Rule {
     this.content?.remove();
     this.page = null;
     this.pageScrollParent = null;
+    this.intersectionObserver?.disconnect();
     this.wrapperResizeObserver?.disconnect();
   }
 
@@ -287,6 +296,26 @@ export default class StageMask extends Rule {
     this.content.dispatchEvent(event);
   }
 
+  /**
+   * 从当前页面同步蒙层宽高，并修正滚动偏移
+   */
+  private syncPageSize(): void {
+    if (!this.page?.isConnected) return;
+
+    this.applyPageSize(this.page.clientWidth, this.page.clientHeight);
+  }
+
+  /**
+   * 应用页面尺寸到蒙层；宽高为 0 时忽略，避免切换/布局过程中把 editor-mask 置空
+   */
+  private applyPageSize(clientWidth: number, clientHeight: number): void {
+    if (clientWidth <= 0 || clientHeight <= 0) return;
+
+    this.setHeight(clientHeight);
+    this.setWidth(clientWidth);
+    this.scroll();
+  }
+
   /**
    * 设置蒙层高度
    * @param height 高度

package/types/index.d.ts

@@ -710,7 +710,8 @@ declare class StageMask extends Rule {
    */
   observe(page: HTMLElement): void;
   /**
-   * 处理页面大小变更，同步页面和mask大小
+   * 处理页面大小变更，同步页面和 mask 大小
+   * @description 仅处理当前 page 且仍挂载在文档中的 entry；非当前页、已卸载或宽高为 0 的回调会被忽略
    * @param entries ResizeObserverEntry，获取页面最新大小
    */
   pageResize(entries: ResizeObserverEntry[]): void;
@@ -742,6 +743,14 @@ declare class StageMask extends Rule {
   private initObserverWrapper;
   private scroll;
   private scrollTo;
+  /**
+   * 从当前页面同步蒙层宽高，并修正滚动偏移
+   */
+  private syncPageSize;
+  /**
+   * 应用页面尺寸到蒙层；宽高为 0 时忽略，避免切换/布局过程中把 editor-mask 置空
+   */
+  private applyPageSize;
   /**
    * 设置蒙层高度
    * @param height 高度