@tmagic/stage 1.5.20 → 1.5.22

package/dist/tmagic-stage.js

@@ -2211,6 +2211,10 @@ 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();
       });
@@ -2250,7 +2254,9 @@ class StageMask extends Rule {
   setHeight(height) {
     this.height = height;
     this.setMaxScrollTop();
-    this.content.style.height = `${height}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.height = `${height}px`;
+    }
   }
   /**
    * 设置蒙层宽度
@@ -2259,7 +2265,9 @@ class StageMask extends Rule {
   setWidth(width) {
     this.width = width;
     this.setMaxScrollLeft();
-    this.content.style.width = `${width}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.width = `${width}px`;
+    }
   }
   /**
    * 计算并设置最大滚动宽度
@@ -2324,7 +2332,10 @@ class StageRender extends EventEmitter$1 {
     }
   }
   getMagicApi = () => ({
-    onPageElUpdate: (el) => this.emit("page-el-update", el),
+    id: guid(),
+    onPageElUpdate: (el) => {
+      this.emit("page-el-update", el);
+    },
     onRuntimeReady: (runtime) => {
       if (this.runtime) {
         return;
@@ -2418,14 +2429,27 @@ class StageRender extends EventEmitter$1 {
       "*"
     );
   }
-  /**
-   * 销毁实例
-   */
-  destroy() {
+  reloadIframe(url) {
+    if (this.renderType !== RenderType.IFRAME) return;
+    const el = this.iframe?.parentElement;
+    this.destroyIframe();
+    this.runtimeUrl = url;
+    this.createIframe();
+    this.mount(el);
+    this.runtime = null;
+  }
+  destroyIframe() {
     this.iframe?.removeEventListener("load", this.iframeLoadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
     this.iframe = void 0;
+  }
+  /**
+   * 销毁实例
+   */
+  destroy() {
+    this.destroyIframe();
+    globalThis.runtime = void 0;
     this.removeAllListeners();
   }
   on(eventName, listener) {
@@ -2638,6 +2662,9 @@ class StageCore extends EventEmitter$1 {
   enableMultiSelect() {
     this.actionManager?.enableMultiSelect();
   }
+  reloadIframe(url) {
+    this.renderer?.reloadIframe(url);
+  }
   /**
    * 销毁实例
    */

package/dist/tmagic-stage.umd.cjs

@@ -4684,6 +4684,10 @@
           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();
         });
@@ -4723,7 +4727,9 @@
     setHeight(height) {
       this.height = height;
       this.setMaxScrollTop();
-      this.content.style.height = `${height}px`;
+      if (this.mode !== Mode.FIXED) {
+        this.content.style.height = `${height}px`;
+      }
     }
     /**
      * 设置蒙层宽度
@@ -4732,7 +4738,9 @@
     setWidth(width) {
       this.width = width;
       this.setMaxScrollLeft();
-      this.content.style.width = `${width}px`;
+      if (this.mode !== Mode.FIXED) {
+        this.content.style.width = `${width}px`;
+      }
     }
     /**
      * 计算并设置最大滚动宽度
@@ -4797,7 +4805,10 @@
       }
     }
     getMagicApi = () => ({
-      onPageElUpdate: (el) => this.emit("page-el-update", el),
+      id: core.guid(),
+      onPageElUpdate: (el) => {
+        this.emit("page-el-update", el);
+      },
       onRuntimeReady: (runtime) => {
         if (this.runtime) {
           return;
@@ -4891,14 +4902,27 @@
         "*"
       );
     }
-    /**
-     * 销毁实例
-     */
-    destroy() {
+    reloadIframe(url) {
+      if (this.renderType !== RenderType.IFRAME) return;
+      const el = this.iframe?.parentElement;
+      this.destroyIframe();
+      this.runtimeUrl = url;
+      this.createIframe();
+      this.mount(el);
+      this.runtime = null;
+    }
+    destroyIframe() {
       this.iframe?.removeEventListener("load", this.iframeLoadHandler);
       this.contentWindow = null;
       this.iframe?.remove();
       this.iframe = void 0;
+    }
+    /**
+     * 销毁实例
+     */
+    destroy() {
+      this.destroyIframe();
+      globalThis.runtime = void 0;
       this.removeAllListeners();
     }
     on(eventName, listener) {
@@ -5111,6 +5135,9 @@
     enableMultiSelect() {
       this.actionManager?.enableMultiSelect();
     }
+    reloadIframe(url) {
+      this.renderer?.reloadIframe(url);
+    }
     /**
      * 销毁实例
      */

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.20",
+  "version": "1.5.22",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/core": "1.5.20"
+    "@tmagic/core": "1.5.22"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/StageCore.ts

@@ -236,6 +236,10 @@ export default class StageCore extends EventEmitter {
     this.actionManager?.enableMultiSelect();
   }
 
+  public reloadIframe(url: string) {
+    this.renderer?.reloadIframe(url);
+  }
+
   /**
    * 销毁实例
    */

package/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`;
+    }
   }
 
   /**

package/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;
@@ -172,14 +175,31 @@ export default class StageRender extends EventEmitter {
     );
   }
 
-  /**
-   * 销毁实例
-   */
-  public destroy(): void {
+  public reloadIframe(url: string) {
+    if (this.renderType !== RenderType.IFRAME) return;
+
+    const el = this.iframe?.parentElement;
+    this.destroyIframe();
+    this.runtimeUrl = url;
+    this.createIframe();
+    this.mount(el as HTMLDivElement);
+    this.runtime = null;
+  }
+
+  public destroyIframe() {
     this.iframe?.removeEventListener('load', this.iframeLoadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
     this.iframe = undefined;
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.destroyIframe();
+    // @ts-ignore
+    globalThis.runtime = undefined;
     this.removeAllListeners();
   }
 

package/src/types.ts

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

package/types/index.d.ts

@@ -317,6 +317,7 @@ interface Runtime {
     [key: string]: any;
 }
 interface Magic {
+    id: string;
     /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
     onPageElUpdate: (el: HTMLElement) => void;
     onRuntimeReady: (runtime: Runtime) => void;
@@ -680,7 +681,8 @@ declare class StageRender extends EventEmitter$1 {
     private customizedRender?;
     constructor({ runtimeUrl, zoom, customizedRender, renderType }: StageRenderConfig);
     getMagicApi: () => {
-        onPageElUpdate: (el: HTMLElement) => boolean;
+        id: string;
+        onPageElUpdate: (el: HTMLElement) => void;
         onRuntimeReady: (runtime: Runtime) => void;
     };
     add(data: UpdateData): Promise<void>;
@@ -703,6 +705,8 @@ declare class StageRender extends EventEmitter$1 {
     getElementsFromPoint(point: Point): HTMLElement[];
     getTargetElement(id: Id): HTMLElement | null;
     postTmagicRuntimeReady(): void;
+    reloadIframe(url: string): void;
+    destroyIframe(): void;
     /**
      * 销毁实例
      */
@@ -788,6 +792,7 @@ declare class StageCore extends EventEmitter$1 {
     getDragStatus(): _tmagic_editor.StageDragStatus | undefined;
     disableMultiSelect(): void;
     enableMultiSelect(): void;
+    reloadIframe(url: string): void;
     /**
      * 销毁实例
      */