@tmagic/stage 1.5.12 → 1.5.14

package/dist/tmagic-stage.js

@@ -293,7 +293,7 @@ class TargetShadow {
   }
   destroyEl() {
     this.el?.remove();
-    this.el = undefined;
+    this.el = void 0;
   }
   destroyEls() {
     this.els.forEach((el) => {
@@ -453,7 +453,7 @@ class DragResizeHelper {
   }
   destroyGhostEl() {
     this.ghostEl?.remove();
-    this.ghostEl = undefined;
+    this.ghostEl = void 0;
   }
   clear() {
     this.moveableHelper.clear();
@@ -522,9 +522,13 @@ class DragResizeHelper {
         (frameItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id)
       );
       if (!frameSnapShot) return;
-      const targeEl = this.targetList.find(
-        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(targetItem) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem))
-      );
+      const findTargetElFuctin = (targetItem) => {
+        const getId = getIdFromEl();
+        const targetId = getId(ev.target);
+        const targetItemId = getId(targetItem);
+        return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
+      };
+      const targeEl = this.targetList.find(findTargetElFuctin);
       if (!targeEl) return;
       const isParentIncluded = this.targetList.find(
         (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
@@ -802,7 +806,7 @@ class MoveableOptionsManager extends EventEmitter {
         top: 0,
         left: 0,
         right: this.container.clientWidth,
-        bottom: isSortable ? undefined : this.container.clientHeight
+        bottom: isSortable ? void 0 : this.container.clientHeight
       }
     };
     const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
@@ -952,7 +956,7 @@ class StageDragResize extends MoveableOptionsManager {
   select(el, event) {
     if (!el) {
       this.moveable?.destroy();
-      this.moveable = undefined;
+      this.moveable = void 0;
       return;
     }
     if (!this.moveable || el !== this.target) {
@@ -1053,7 +1057,7 @@ class StageDragResize extends MoveableOptionsManager {
       if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
       if (timeout) {
         globalThis.clearTimeout(timeout);
-        timeout = undefined;
+        timeout = void 0;
       }
       timeout = this.delayedMarkContainer(e.inputEvent, [this.target]);
       this.dragStatus = StageDragStatus.ING;
@@ -1061,7 +1065,7 @@ class StageDragResize extends MoveableOptionsManager {
     }).on("dragEnd", () => {
       if (timeout) {
         globalThis.clearTimeout(timeout);
-        timeout = undefined;
+        timeout = void 0;
       }
       const parentEl = this.markContainerEnd();
       if (this.dragStatus === StageDragStatus.ING) {
@@ -1215,17 +1219,17 @@ class StageHighlight extends EventEmitter$1 {
     if (!this.moveable || !this.target) return;
     this.moveable.zoom = 0;
     this.moveable.updateRect();
-    this.target = undefined;
+    this.target = void 0;
   }
   /**
    * 销毁实例
    */
   destroy() {
-    this.target = undefined;
+    this.target = void 0;
     this.moveable?.destroy();
     this.targetShadow?.destroy();
-    this.moveable = undefined;
-    this.targetShadow = undefined;
+    this.moveable = void 0;
+    this.targetShadow = void 0;
   }
 }
 
@@ -1295,7 +1299,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
     }).on("dragGroup", (e) => {
       if (timeout) {
         globalThis.clearTimeout(timeout);
-        timeout = undefined;
+        timeout = void 0;
       }
       timeout = this.delayedMarkContainer(e.inputEvent, this.targetList);
       this.dragResizeHelper.onDragGroup(e);
@@ -1303,7 +1307,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
     }).on("dragGroupEnd", () => {
       if (timeout) {
         globalThis.clearTimeout(timeout);
-        timeout = undefined;
+        timeout = void 0;
       }
       const parentEl = this.markContainerEnd();
       this.update(false, parentEl);
@@ -1417,18 +1421,21 @@ class ActionManager extends EventEmitter {
   getRenderDocument;
   disabledMultiSelect = false;
   config;
-  mouseMoveHandler = throttle(async (event) => {
-    if (event.target?.classList?.contains("moveable-direction")) {
-      return;
-    }
-    const el = await this.getElementFromPoint(event);
-    const id = getIdFromEl()(el);
-    if (!id) {
-      this.clearHighlight();
-      return;
-    }
-    this.emit("mousemove", event);
-    this.highlight(id);
+  mouseMoveHandler = throttle((event) => {
+    const handler = async () => {
+      if (event.target?.classList?.contains("moveable-direction")) {
+        return;
+      }
+      const el = await this.getElementFromPoint(event);
+      const id = getIdFromEl()(el);
+      if (!id) {
+        this.clearHighlight();
+        return;
+      }
+      this.emit("mousemove", event);
+      this.highlight(id);
+    };
+    handler();
   }, throttleTime);
   constructor(config) {
     super();
@@ -1590,6 +1597,7 @@ class ActionManager extends EventEmitter {
       el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
+      console.warn("getTargetElement error:", error);
       return;
     }
     if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
@@ -1602,7 +1610,7 @@ class ActionManager extends EventEmitter {
     this.emit("highlight", el);
   }
   clearHighlight() {
-    this.setHighlightEl(undefined);
+    this.setHighlightEl(void 0);
     this.highlightLayer?.clearHighlight();
   }
   /**
@@ -1646,7 +1654,7 @@ class ActionManager extends EventEmitter {
         this.addContainerHighlightClassName(event, excludeElList);
       }, this.containerHighlightDuration);
     }
-    return undefined;
+    return void 0;
   }
   getDragStatus() {
     return this.dr?.getDragStatus();
@@ -1830,23 +1838,26 @@ class ActionManager extends EventEmitter {
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */
-  mouseDownHandler = async (event) => {
-    this.clearHighlight();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    if (this.isStopTriggerSelect(event)) return;
-    this.container.removeEventListener("mousemove", this.mouseMoveHandler);
-    if (this.isMultiSelectStatus) {
-      await this.beforeMultiSelect(event);
-      if (this.selectedElList.length > 0) {
-        this.emit("before-multi-select", this.selectedElList);
+  mouseDownHandler = (event) => {
+    const handler = async () => {
+      this.clearHighlight();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      if (this.isStopTriggerSelect(event)) return;
+      this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+      if (this.isMultiSelectStatus) {
+        await this.beforeMultiSelect(event);
+        if (this.selectedElList.length > 0) {
+          this.emit("before-multi-select", this.selectedElList);
+        }
+      } else {
+        const el = await this.getElementFromPoint(event);
+        if (!el) return;
+        this.emit("before-select", el, event);
       }
-    } else {
-      const el = await this.getElementFromPoint(event);
-      if (!el) return;
-      this.emit("before-select", el, event);
-    }
-    getDocument().addEventListener("mouseup", this.mouseUpHandler);
+      getDocument().addEventListener("mouseup", this.mouseUpHandler);
+    };
+    handler();
   };
   isStopTriggerSelect(event) {
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return true;
@@ -2409,7 +2420,7 @@ class StageRender extends EventEmitter$1 {
     this.iframe?.removeEventListener("load", this.iframeLoadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
-    this.iframe = undefined;
+    this.iframe = void 0;
     this.removeAllListeners();
   }
   on(eventName, listener) {
@@ -2451,19 +2462,22 @@ class StageRender extends EventEmitter$1 {
       el && addSelectedClassName(el, doc);
     }
   }
-  iframeLoadHandler = async () => {
-    if (!this.contentWindow?.magic) {
-      this.postTmagicRuntimeReady();
-    }
-    if (!this.contentWindow) return;
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (el) {
-        this.contentWindow.document?.body?.appendChild(el);
+  iframeLoadHandler = () => {
+    const handler = async () => {
+      if (!this.contentWindow?.magic) {
+        this.postTmagicRuntimeReady();
       }
-    }
-    this.emit("onload");
-    injectStyle(this.contentWindow.document, style);
+      if (!this.contentWindow) return;
+      if (this.customizedRender) {
+        const el = await this.customizedRender();
+        if (el) {
+          this.contentWindow.document?.body?.appendChild(el);
+        }
+      }
+      this.emit("onload");
+      injectStyle(this.contentWindow.document, style);
+    };
+    handler();
   };
 }
 
@@ -2629,7 +2643,7 @@ class StageCore extends EventEmitter$1 {
     actionManager?.destroy();
     pageResizeObserver?.disconnect();
     this.removeAllListeners();
-    this.container = undefined;
+    this.container = void 0;
     this.renderer = null;
     this.mask = null;
     this.actionManager = null;

package/dist/tmagic-stage.umd.cjs

@@ -2766,7 +2766,7 @@
     }
     destroyEl() {
       this.el?.remove();
-      this.el = undefined;
+      this.el = void 0;
     }
     destroyEls() {
       this.els.forEach((el) => {
@@ -2926,7 +2926,7 @@
     }
     destroyGhostEl() {
       this.ghostEl?.remove();
-      this.ghostEl = undefined;
+      this.ghostEl = void 0;
     }
     clear() {
       this.moveableHelper.clear();
@@ -2995,9 +2995,13 @@
           (frameItem) => core.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && core.getIdFromEl()(ev.target)?.endsWith(frameItem.id)
         );
         if (!frameSnapShot) return;
-        const targeEl = this.targetList.find(
-          (targetItem) => core.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && core.getIdFromEl()(targetItem) && core.getIdFromEl()(ev.target)?.endsWith(core.getIdFromEl()(targetItem))
-        );
+        const findTargetElFuctin = (targetItem) => {
+          const getId = core.getIdFromEl();
+          const targetId = getId(ev.target);
+          const targetItemId = getId(targetItem);
+          return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
+        };
+        const targeEl = this.targetList.find(findTargetElFuctin);
         if (!targeEl) return;
         const isParentIncluded = this.targetList.find(
           (targetItem) => core.getIdFromEl()(targetItem) === core.getIdFromEl()(targeEl.parentElement)
@@ -3275,7 +3279,7 @@
           top: 0,
           left: 0,
           right: this.container.clientWidth,
-          bottom: isSortable ? undefined : this.container.clientHeight
+          bottom: isSortable ? void 0 : this.container.clientHeight
         }
       };
       const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
@@ -3425,7 +3429,7 @@
     select(el, event) {
       if (!el) {
         this.moveable?.destroy();
-        this.moveable = undefined;
+        this.moveable = void 0;
         return;
       }
       if (!this.moveable || el !== this.target) {
@@ -3526,7 +3530,7 @@
         if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
         if (timeout) {
           globalThis.clearTimeout(timeout);
-          timeout = undefined;
+          timeout = void 0;
         }
         timeout = this.delayedMarkContainer(e.inputEvent, [this.target]);
         this.dragStatus = StageDragStatus.ING;
@@ -3534,7 +3538,7 @@
       }).on("dragEnd", () => {
         if (timeout) {
           globalThis.clearTimeout(timeout);
-          timeout = undefined;
+          timeout = void 0;
         }
         const parentEl = this.markContainerEnd();
         if (this.dragStatus === StageDragStatus.ING) {
@@ -3688,17 +3692,17 @@
       if (!this.moveable || !this.target) return;
       this.moveable.zoom = 0;
       this.moveable.updateRect();
-      this.target = undefined;
+      this.target = void 0;
     }
     /**
      * 销毁实例
      */
     destroy() {
-      this.target = undefined;
+      this.target = void 0;
       this.moveable?.destroy();
       this.targetShadow?.destroy();
-      this.moveable = undefined;
-      this.targetShadow = undefined;
+      this.moveable = void 0;
+      this.targetShadow = void 0;
     }
   }
 
@@ -3768,7 +3772,7 @@
       }).on("dragGroup", (e) => {
         if (timeout) {
           globalThis.clearTimeout(timeout);
-          timeout = undefined;
+          timeout = void 0;
         }
         timeout = this.delayedMarkContainer(e.inputEvent, this.targetList);
         this.dragResizeHelper.onDragGroup(e);
@@ -3776,7 +3780,7 @@
       }).on("dragGroupEnd", () => {
         if (timeout) {
           globalThis.clearTimeout(timeout);
-          timeout = undefined;
+          timeout = void 0;
         }
         const parentEl = this.markContainerEnd();
         this.update(false, parentEl);
@@ -3890,18 +3894,21 @@
     getRenderDocument;
     disabledMultiSelect = false;
     config;
-    mouseMoveHandler = throttle(async (event) => {
-      if (event.target?.classList?.contains("moveable-direction")) {
-        return;
-      }
-      const el = await this.getElementFromPoint(event);
-      const id = core.getIdFromEl()(el);
-      if (!id) {
-        this.clearHighlight();
-        return;
-      }
-      this.emit("mousemove", event);
-      this.highlight(id);
+    mouseMoveHandler = throttle((event) => {
+      const handler = async () => {
+        if (event.target?.classList?.contains("moveable-direction")) {
+          return;
+        }
+        const el = await this.getElementFromPoint(event);
+        const id = core.getIdFromEl()(el);
+        if (!id) {
+          this.clearHighlight();
+          return;
+        }
+        this.emit("mousemove", event);
+        this.highlight(id);
+      };
+      handler();
     }, throttleTime);
     constructor(config) {
       super();
@@ -4063,6 +4070,7 @@
         el = this.getTargetElement(id);
       } catch (error) {
         this.clearHighlight();
+        console.warn("getTargetElement error:", error);
         return;
       }
       if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
@@ -4075,7 +4083,7 @@
       this.emit("highlight", el);
     }
     clearHighlight() {
-      this.setHighlightEl(undefined);
+      this.setHighlightEl(void 0);
       this.highlightLayer?.clearHighlight();
     }
     /**
@@ -4119,7 +4127,7 @@
           this.addContainerHighlightClassName(event, excludeElList);
         }, this.containerHighlightDuration);
       }
-      return undefined;
+      return void 0;
     }
     getDragStatus() {
       return this.dr?.getDragStatus();
@@ -4303,23 +4311,26 @@
     /**
      * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
      */
-    mouseDownHandler = async (event) => {
-      this.clearHighlight();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      if (this.isStopTriggerSelect(event)) return;
-      this.container.removeEventListener("mousemove", this.mouseMoveHandler);
-      if (this.isMultiSelectStatus) {
-        await this.beforeMultiSelect(event);
-        if (this.selectedElList.length > 0) {
-          this.emit("before-multi-select", this.selectedElList);
+    mouseDownHandler = (event) => {
+      const handler = async () => {
+        this.clearHighlight();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        if (this.isStopTriggerSelect(event)) return;
+        this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+        if (this.isMultiSelectStatus) {
+          await this.beforeMultiSelect(event);
+          if (this.selectedElList.length > 0) {
+            this.emit("before-multi-select", this.selectedElList);
+          }
+        } else {
+          const el = await this.getElementFromPoint(event);
+          if (!el) return;
+          this.emit("before-select", el, event);
         }
-      } else {
-        const el = await this.getElementFromPoint(event);
-        if (!el) return;
-        this.emit("before-select", el, event);
-      }
-      core.getDocument().addEventListener("mouseup", this.mouseUpHandler);
+        core.getDocument().addEventListener("mouseup", this.mouseUpHandler);
+      };
+      handler();
     };
     isStopTriggerSelect(event) {
       if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return true;
@@ -4882,7 +4893,7 @@
       this.iframe?.removeEventListener("load", this.iframeLoadHandler);
       this.contentWindow = null;
       this.iframe?.remove();
-      this.iframe = undefined;
+      this.iframe = void 0;
       this.removeAllListeners();
     }
     on(eventName, listener) {
@@ -4924,19 +4935,22 @@
         el && addSelectedClassName(el, doc);
       }
     }
-    iframeLoadHandler = async () => {
-      if (!this.contentWindow?.magic) {
-        this.postTmagicRuntimeReady();
-      }
-      if (!this.contentWindow) return;
-      if (this.customizedRender) {
-        const el = await this.customizedRender();
-        if (el) {
-          this.contentWindow.document?.body?.appendChild(el);
+    iframeLoadHandler = () => {
+      const handler = async () => {
+        if (!this.contentWindow?.magic) {
+          this.postTmagicRuntimeReady();
         }
-      }
-      this.emit("onload");
-      core.injectStyle(this.contentWindow.document, style);
+        if (!this.contentWindow) return;
+        if (this.customizedRender) {
+          const el = await this.customizedRender();
+          if (el) {
+            this.contentWindow.document?.body?.appendChild(el);
+          }
+        }
+        this.emit("onload");
+        core.injectStyle(this.contentWindow.document, style);
+      };
+      handler();
     };
   }
 
@@ -5102,7 +5116,7 @@
       actionManager?.destroy();
       pageResizeObserver?.disconnect();
       this.removeAllListeners();
-      this.container = undefined;
+      this.container = void 0;
       this.renderer = null;
       this.mask = null;
       this.actionManager = null;

package/package.json

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

package/src/ActionManager.ts

@@ -92,20 +92,24 @@ export default class ActionManager extends EventEmitter {
   private disabledMultiSelect = false;
   private config: ActionManagerConfig;
 
-  private mouseMoveHandler = throttle(async (event: MouseEvent): Promise<void> => {
-    if ((event.target as HTMLDivElement)?.classList?.contains('moveable-direction')) {
-      return;
-    }
+  private mouseMoveHandler = throttle((event: MouseEvent): void => {
+    const handler = async () => {
+      if ((event.target as HTMLDivElement)?.classList?.contains('moveable-direction')) {
+        return;
+      }
 
-    const el = await this.getElementFromPoint(event);
-    const id = getIdFromEl()(el);
-    if (!id) {
-      this.clearHighlight();
-      return;
-    }
+      const el = await this.getElementFromPoint(event);
+      const id = getIdFromEl()(el);
+      if (!id) {
+        this.clearHighlight();
+        return;
+      }
+
+      this.emit('mousemove', event);
+      this.highlight(id);
+    };
 
-    this.emit('mousemove', event);
-    this.highlight(id);
+    handler();
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -299,6 +303,7 @@ export default class ActionManager extends EventEmitter {
       el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
+      console.warn('getTargetElement error:', error);
       return;
     }
 
@@ -606,29 +611,33 @@ export default class ActionManager extends EventEmitter {
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */
-  private mouseDownHandler = async (event: MouseEvent): Promise<void> => {
-    this.clearHighlight();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
+  private mouseDownHandler = (event: MouseEvent): void => {
+    const handler = async () => {
+      this.clearHighlight();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
 
-    if (this.isStopTriggerSelect(event)) return;
+      if (this.isStopTriggerSelect(event)) return;
 
-    // 点击状态下不触发高亮事件
-    this.container.removeEventListener('mousemove', this.mouseMoveHandler);
+      // 点击状态下不触发高亮事件
+      this.container.removeEventListener('mousemove', this.mouseMoveHandler);
 
-    // 判断触发多选还是单选
-    if (this.isMultiSelectStatus) {
-      await this.beforeMultiSelect(event);
-      if (this.selectedElList.length > 0) {
-        this.emit('before-multi-select', this.selectedElList);
+      // 判断触发多选还是单选
+      if (this.isMultiSelectStatus) {
+        await this.beforeMultiSelect(event);
+        if (this.selectedElList.length > 0) {
+          this.emit('before-multi-select', this.selectedElList);
+        }
+      } else {
+        const el = await this.getElementFromPoint(event);
+        if (!el) return;
+        this.emit('before-select', el, event);
       }
-    } else {
-      const el = await this.getElementFromPoint(event);
-      if (!el) return;
-      this.emit('before-select', el, event);
-    }
 
-    getDocument().addEventListener('mouseup', this.mouseUpHandler);
+      getDocument().addEventListener('mouseup', this.mouseUpHandler);
+    };
+
+    handler();
   };
 
   private isStopTriggerSelect(event: MouseEvent): boolean {

package/src/DragResizeHelper.ts

@@ -285,13 +285,18 @@ export default class DragResizeHelper {
           getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
-      const targeEl = this.targetList.find(
-        (targetItem) =>
-          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
-          getIdFromEl()(targetItem) &&
-          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!),
-      );
+
+      const findTargetElFuctin = (targetItem: HTMLElement) => {
+        const getId = getIdFromEl();
+        const targetId = getId(ev.target);
+        const targetItemId = getId(targetItem);
+        return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
+      };
+
+      const targeEl = this.targetList.find(findTargetElFuctin);
+
       if (!targeEl) return;
+
       // 元素与其所属组同时加入多选列表时，只更新父元素
       const isParentIncluded = this.targetList.find(
         (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),

package/src/StageDragResize.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-param-reassign */
 import Moveable, { MoveableOptions } from 'moveable';
 
 import { getIdFromEl } from '@tmagic/core';

package/src/StageRender.ts

@@ -235,22 +235,26 @@ export default class StageRender extends EventEmitter {
     }
   }
 
-  private iframeLoadHandler = async () => {
-    if (!this.contentWindow?.magic) {
-      this.postTmagicRuntimeReady();
-    }
+  private iframeLoadHandler = () => {
+    const handler = async () => {
+      if (!this.contentWindow?.magic) {
+        this.postTmagicRuntimeReady();
+      }
 
-    if (!this.contentWindow) return;
+      if (!this.contentWindow) return;
 
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (el) {
-        this.contentWindow.document?.body?.appendChild(el);
+      if (this.customizedRender) {
+        const el = await this.customizedRender();
+        if (el) {
+          this.contentWindow.document?.body?.appendChild(el);
+        }
       }
-    }
 
-    this.emit('onload');
+      this.emit('onload');
+
+      injectStyle(this.contentWindow.document, style);
+    };
 
-    injectStyle(this.contentWindow.document, style);
+    handler();
   };
 }

package/types/index.d.ts

@@ -2,7 +2,7 @@ import * as _tmagic_editor from '@tmagic/editor';
 import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
 import { OnResizeStart, OnResize, OnDragStart, OnDrag, OnRotateStart, OnRotate, OnScaleStart, OnScale, OnResizeGroupStart, OnResizeGroup, OnDragGroupStart, OnDragGroup, MoveableOptions, Renderer, MoveableManagerInterface } from 'moveable';
 export * from 'moveable';
-import Core, { Id, MApp, MNode, MContainer } from '@tmagic/core';
+import Core, { MApp, Id, MNode, MContainer } from '@tmagic/core';
 import Guides, { GuidesOptions } from '@scena/guides';
 export { GuidesOptions } from '@scena/guides';
 import MoveableHelper from 'moveable-helper';
@@ -1022,4 +1022,5 @@ declare const _default: (handler: (type: AbleActionEventType) => void, customize
     render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
 };
 
-export { AbleActionEventType, type AbleCustomizedButton, type ActionManagerConfig, type ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, type CanSelect, ContainerHighlightType, type CoreEvents, type CustomizeMoveableOptions, type CustomizeMoveableOptionsCallbackConfig, type CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, type DelayedMarkContainer, type DrEvents, type DragResizeHelperConfig, GHOST_EL_ID_PREFIX, type GetElementsFromPoint, type GetRenderDocument, type GetRootContainer, type GetTargetElement, type GuidesEventData, GuidesType, HIGHLIGHT_EL_ID_PREFIX, type IsContainer, type Magic, type MarkContainerEnd, type MaskEvents, Mode, MouseButton, _default as MoveableActionsAble, type MoveableOptionsManagerConfig, type MultiDrEvents, type Offset, PAGE_CLASS, type Point, type Rect, type RemoveData, type RemoveEventData, type RenderEvents, RenderType, type RuleOptions, type Runtime, type RuntimeWindow, SELECTED_CLASS, SelectStatus, type SortEventData, type StageCoreConfig, StageDragResize, type StageDragResizeConfig, StageDragStatus, type StageHighlightConfig, StageMask, type StageMaskConfig, type StageMultiDragResizeConfig, StageRender, type StageRenderConfig, type TargetElement, type TargetShadowConfig, type UpdateData, type UpdateDragEl, type UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, _default as MoveableActionsAble, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export type { AbleCustomizedButton, ActionManagerConfig, ActionManagerEvents, CanSelect, CoreEvents, CustomizeMoveableOptions, CustomizeMoveableOptionsCallbackConfig, CustomizeRender, DelayedMarkContainer, DrEvents, DragResizeHelperConfig, GetElementsFromPoint, GetRenderDocument, GetRootContainer, GetTargetElement, GuidesEventData, IsContainer, Magic, MarkContainerEnd, MaskEvents, MoveableOptionsManagerConfig, MultiDrEvents, Offset, Point, Rect, RemoveData, RemoveEventData, RenderEvents, RuleOptions, Runtime, RuntimeWindow, SortEventData, StageCoreConfig, StageDragResizeConfig, StageHighlightConfig, StageMaskConfig, StageMultiDragResizeConfig, StageRenderConfig, TargetElement, TargetShadowConfig, UpdateData, UpdateDragEl, UpdateEventData };