@tmagic/stage 1.5.0-beta.1 → 1.5.0-beta.11

package/dist/tmagic-stage.js

@@ -1,10 +1,11 @@
 import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
-import { removeClassName, guid, setIdToEl, getIdFromEl, getElById, calcValueByFontsize, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
+import { removeClassName, getIdFromEl, guid, setIdToEl, getElById, calcValueByFontsize, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import KeyController from 'keycon';
 import { merge, throttle } from 'lodash-es';
 import { Env } from '@tmagic/core';
 import MoveableHelper from 'moveable-helper';
-import Moveable from 'moveable';
+import Moveable__default from 'moveable';
+export * from 'moveable';
 import Guides from '@scena/guides';
 
 const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -178,7 +179,7 @@ const down = (deltaTop, target) => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+    (child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
   );
   const index = brothers.indexOf(target);
   const downEls = brothers.slice(index + 1);
@@ -194,14 +195,15 @@ const down = (deltaTop, target) => {
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+  const src = getIdFromEl()(target) || "";
   return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+    src,
+    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || "" : src
   };
 };
 const up = (deltaTop, target) => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+    (child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
   );
   const index = brothers.indexOf(target);
   const upEls = brothers.slice(0, index);
@@ -216,9 +218,10 @@ const up = (deltaTop, target) => {
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+  const src = getIdFromEl()(target) || "";
   return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+    src,
+    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || "" : src
   };
 };
 const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
@@ -328,12 +331,11 @@ class TargetShadow {
   };
 }
 
-const getId = getIdFromEl();
 class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   targetShadow;
   /** 要操作的原始目标节点 */
-  target;
+  target = null;
   /** 多选:目标节点组 */
   targetList = [];
   /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
@@ -364,6 +366,8 @@ class DragResizeHelper {
     });
   }
   destroy() {
+    this.target = null;
+    this.targetList = [];
     this.targetShadow.destroy();
     this.destroyGhostEl();
     this.moveableHelper.clear();
@@ -486,14 +490,16 @@ class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
+      );
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -513,14 +519,16 @@ class DragResizeHelper {
     const { events } = e;
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
+        (frameItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id)
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
+        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(targetItem) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem))
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
+      );
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -539,7 +547,7 @@ class DragResizeHelper {
     let shadowEl = this.getShadowEl();
     const shadowEls = this.getShadowEls();
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
+      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ""));
     }
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
       const targetShadowHtmlEl = shadowEl;
@@ -560,10 +568,10 @@ class DragResizeHelper {
     if (this.framesSnapShot.length > 0) return;
     events.forEach((ev) => {
       const matchEventTarget = this.targetList.find(
-        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
+        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || "")
       );
       if (!matchEventTarget) return;
-      const id = getId(matchEventTarget);
+      const id = getIdFromEl()(matchEventTarget);
       id && this.framesSnapShot.push({
         left: matchEventTarget.offsetLeft,
         top: matchEventTarget.offsetTop,
@@ -578,24 +586,27 @@ class DragResizeHelper {
     if (this.ghostEl) {
       this.destroyGhostEl();
     }
-    const ghostEl = el.cloneNode(true);
-    this.setGhostElChildrenId(ghostEl);
+    const ghostEl = document.createElement("div");
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = ".5";
-    ghostEl.style.position = "absolute";
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    ghostEl.style.marginLeft = "0";
-    ghostEl.style.marginTop = "0";
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+    ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
     el.after(ghostEl);
     return ghostEl;
   }
   setGhostElChildrenId(el) {
     for (const child of Array.from(el.children)) {
       const el2 = child;
-      const id = getId(el2);
+      const id = getIdFromEl()(el2);
       if (id) {
         setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
       }
@@ -608,9 +619,10 @@ class DragResizeHelper {
 
 const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
 
-const MoveableActionsAble = (handler) => ({
+const MoveableActionsAble = (handler, customizedButton = []) => ({
   name: "actions",
   props: [],
+  always: true,
   events: [],
   render(moveable, React) {
     const rect = moveable.getRect();
@@ -634,10 +646,14 @@ const MoveableActionsAble = (handler) => ({
       {
         className: "moveable-editable",
         style: {
-          transform: `translate(${pos2[0] - 60}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
+          transform: `translate(${pos2[0] - (customizedButton.length + 3) * 20}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
         }
       },
       [
+        ...customizedButton.map((buttonRenderer) => {
+          const options = buttonRenderer(React);
+          return React.createElement("button", options.props || {}, ...options.children || []);
+        }),
         React.createElement(
           "button",
           {
@@ -759,7 +775,7 @@ class MoveableOptionsManager extends EventEmitter {
    */
   getOptions(isMultiSelect, runtimeOptions = {}) {
     const defaultOptions = this.getDefaultOptions(isMultiSelect);
-    const customizedOptions = this.getCustomizeOptions();
+    const customizedOptions = this.getCustomizeOptions() || {};
     this.options = merge(defaultOptions, customizedOptions, runtimeOptions);
     return this.options;
   }
@@ -970,6 +986,7 @@ class StageDragResize extends MoveableOptionsManager {
    * 销毁实例
    */
   destroy() {
+    this.target = null;
     this.moveable?.destroy();
     this.dragResizeHelper.destroy();
     this.dragStatus = StageDragStatus.END;
@@ -998,7 +1015,7 @@ class StageDragResize extends MoveableOptionsManager {
     const options = this.init(el);
     this.dragResizeHelper.clear();
     this.moveable?.destroy();
-    this.moveable = new Moveable(this.container, {
+    this.moveable = new Moveable__default(this.container, {
       ...options
     });
     this.bindResizeEvent();
@@ -1180,7 +1197,7 @@ class StageHighlight extends EventEmitter$1 {
       this.moveable.zoom = 2;
       this.moveable.updateRect();
     } else {
-      this.moveable = new Moveable(this.container, {
+      this.moveable = new Moveable__default(this.container, {
         target: this.targetShadow?.el,
         origin: false,
         rootContainer: this.getRootContainer(),
@@ -1201,6 +1218,7 @@ class StageHighlight extends EventEmitter$1 {
    * 销毁实例
    */
   destroy() {
+    this.target = void 0;
     this.moveable?.destroy();
     this.targetShadow?.destroy();
     this.moveable = void 0;
@@ -1252,7 +1270,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
     this.setElementGuidelines(this.targetList);
     this.moveableForMulti?.destroy();
     this.dragResizeHelper.clear();
-    this.moveableForMulti = new Moveable(
+    this.moveableForMulti = new Moveable__default(
       this.container,
       this.getOptions(true, {
         target: this.dragResizeHelper.getShadowEls()
@@ -1369,9 +1387,9 @@ class StageMultiDragResize extends MoveableOptionsManager {
 const throttleTime = 100;
 const defaultContainerHighlightDuration = 800;
 class ActionManager extends EventEmitter {
-  dr;
-  multiDr;
-  highlightLayer;
+  dr = null;
+  multiDr = null;
+  highlightLayer = null;
   /** 单选、多选、高亮的容器（蒙层的content） */
   container;
   /** 当前选中的节点 */
@@ -1438,7 +1456,7 @@ class ActionManager extends EventEmitter {
     this.disabledMultiSelect = true;
     if (this.multiDr) {
       this.multiDr.destroy();
-      this.multiDr = void 0;
+      this.multiDr = null;
     }
   }
   enableMultiSelect() {
@@ -1453,14 +1471,14 @@ class ActionManager extends EventEmitter {
    * @param guidelines 参考线坐标数组
    */
   setGuidelines(type, guidelines) {
-    this.dr.setGuidelines(type, guidelines);
+    this.dr?.setGuidelines(type, guidelines);
     this.multiDr?.setGuidelines(type, guidelines);
   }
   /**
    * 清空所有参考线
    */
   clearGuides() {
-    this.dr.clearGuides();
+    this.dr?.clearGuides();
     this.multiDr?.clearGuides();
   }
   /**
@@ -1468,7 +1486,7 @@ class ActionManager extends EventEmitter {
    * @param el 变更的元素
    */
   updateMoveable(el) {
-    this.dr.updateMoveable(el);
+    this.dr?.updateMoveable(el);
     this.multiDr?.updateMoveable();
   }
   /**
@@ -1487,7 +1505,7 @@ class ActionManager extends EventEmitter {
     return this.selectedElList;
   }
   getMoveableOption(key) {
-    if (this.dr.getTarget()) {
+    if (this.dr?.getTarget()) {
       return this.dr.getOption(key);
     }
     if (this.multiDr?.targetList.length) {
@@ -1544,7 +1562,7 @@ class ActionManager extends EventEmitter {
   select(el, event) {
     this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
-    this.dr.select(el, event);
+    this.dr?.select(el, event);
   }
   multiSelect(ids) {
     this.selectedElList = [];
@@ -1576,13 +1594,13 @@ class ActionManager extends EventEmitter {
       return;
     }
     if (el === this.highlightedEl || !el) return;
-    this.highlightLayer.highlight(el);
+    this.highlightLayer?.highlight(el);
     this.highlightedEl = el;
     this.emit("highlight", el);
   }
   clearHighlight() {
     this.setHighlightEl(void 0);
-    this.highlightLayer.clearHighlight();
+    this.highlightLayer?.clearHighlight();
   }
   /**
    * 用于在切换选择模式时清除上一次的状态
@@ -1593,7 +1611,7 @@ class ActionManager extends EventEmitter {
       this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
-      this.dr.clearSelectStatus();
+      this.dr?.clearSelectStatus();
     }
   }
   /**
@@ -1628,7 +1646,7 @@ class ActionManager extends EventEmitter {
     return void 0;
   }
   getDragStatus() {
-    return this.dr.getDragStatus();
+    return this.dr?.getDragStatus();
   }
   destroy() {
     this.container.removeEventListener("mousedown", this.mouseDownHandler);
@@ -1636,9 +1654,14 @@ class ActionManager extends EventEmitter {
     this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
     this.container.removeEventListener("wheel", this.mouseWheelHandler);
     this.container.removeEventListener("dblclick", this.dblclickHandler);
-    this.dr.destroy();
+    this.selectedEl = null;
+    this.selectedElList = [];
+    this.dr?.destroy();
     this.multiDr?.destroy();
-    this.highlightLayer.destroy();
+    this.highlightLayer?.destroy();
+    this.dr = null;
+    this.multiDr = null;
+    this.highlightLayer = null;
   }
   on(eventName, listener) {
     return super.on(eventName, listener);
@@ -1668,7 +1691,7 @@ class ActionManager extends EventEmitter {
     }).on(AbleActionEventType.SELECT_PARENT, () => {
       this.emit("select-parent");
     }).on(AbleActionEventType.REMOVE, () => {
-      const drTarget = this.dr.getTarget();
+      const drTarget = this.dr?.getTarget();
       if (!drTarget) return;
       const data = {
         data: [{ el: drTarget }]
@@ -2361,6 +2384,16 @@ class StageRender extends EventEmitter$1 {
   getTargetElement(id) {
     return getElById()(this.getDocument(), id);
   }
+  postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow;
+    this.contentWindow.magic = this.getMagicApi();
+    this.contentWindow.postMessage(
+      {
+        tmagicRuntimeReady: true
+      },
+      "*"
+    );
+  }
   /**
    * 销毁实例
    */
@@ -2424,23 +2457,13 @@ class StageRender extends EventEmitter$1 {
     this.emit("onload");
     injectStyle(this.contentWindow.document, style);
   };
-  postTmagicRuntimeReady() {
-    this.contentWindow = this.iframe?.contentWindow;
-    this.contentWindow.magic = this.getMagicApi();
-    this.contentWindow.postMessage(
-      {
-        tmagicRuntimeReady: true
-      },
-      "*"
-    );
-  }
 }
 
 class StageCore extends EventEmitter$1 {
   container;
-  renderer;
-  mask;
-  actionManager;
+  renderer = null;
+  mask = null;
+  actionManager = null;
   pageResizeObserver = null;
   autoScrollIntoView;
   customizedRender;
@@ -2472,13 +2495,15 @@ class StageCore extends EventEmitter$1 {
    * @param id 选中的id
    */
   async select(id, event) {
-    const el = this.renderer.getTargetElement(id);
-    if (el === this.actionManager.getSelectedEl()) return;
-    await this.renderer.select([id]);
-    el && this.mask.setLayout(el);
-    this.actionManager.select(el, event);
+    const el = this.renderer?.getTargetElement(id) || null;
+    if (el === this.actionManager?.getSelectedEl()) return;
+    await this.renderer?.select([id]);
+    if (el) {
+      this.mask?.setLayout(el);
+    }
+    this.actionManager?.select(el, event);
     if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
-      this.mask.observerIntersection(el);
+      this.mask?.observerIntersection(el);
     }
   }
   /**
@@ -2486,15 +2511,15 @@ class StageCore extends EventEmitter$1 {
    * @param ids 选中元素的id列表
    */
   async multiSelect(ids) {
-    const els = ids.map((id) => this.renderer.getTargetElement(id)).filter((el) => Boolean(el));
+    const els = ids.map((id) => this.renderer?.getTargetElement(id)).filter((el) => Boolean(el));
     if (els.length === 0) return;
     const lastEl = els[els.length - 1];
     const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
-    await this.renderer.select(ids);
-    lastEl && this.mask.setLayout(lastEl);
-    this.actionManager.multiSelect(ids);
+    await this.renderer?.select(ids);
+    lastEl && this.mask?.setLayout(lastEl);
+    this.actionManager?.multiSelect(ids);
     if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
-      this.mask.observerIntersection(lastEl);
+      this.mask?.observerIntersection(lastEl);
     }
   }
   /**
@@ -2502,10 +2527,10 @@ class StageCore extends EventEmitter$1 {
    * @param el 要高亮的元素
    */
   highlight(id) {
-    this.actionManager.highlight(id);
+    this.actionManager?.highlight(id);
   }
   clearHighlight() {
-    this.actionManager.clearHighlight();
+    this.actionManager?.clearHighlight();
   }
   /**
    * 更新组件
@@ -2513,11 +2538,11 @@ class StageCore extends EventEmitter$1 {
    */
   async update(data) {
     const { config } = data;
-    await this.renderer.update(data);
+    await this.renderer?.update(data);
     setTimeout(() => {
-      const el = this.renderer.getTargetElement(`${config.id}`);
-      if (el && this.actionManager.isSelectedEl(el)) {
-        this.mask.setLayout(el);
+      const el = this.renderer?.getTargetElement(`${config.id}`);
+      if (el && this.actionManager?.isSelectedEl(el)) {
+        this.mask?.setLayout(el);
         this.actionManager.setSelectedEl(el);
         this.actionManager.updateMoveable(el);
       }
@@ -2528,17 +2553,17 @@ class StageCore extends EventEmitter$1 {
    * @param data 组件信息数据
    */
   async add(data) {
-    return await this.renderer.add(data);
+    return await this.renderer?.add(data);
   }
   /**
    * 从画布删除一个组件
    * @param data 组件信息数据
    */
   async remove(data) {
-    return await this.renderer.remove(data);
+    return await this.renderer?.remove(data);
   }
   setZoom(zoom = DEFAULT_ZOOM) {
-    this.renderer.setZoom(zoom);
+    this.renderer?.setZoom(zoom);
   }
   /**
    * 挂载Dom节点
@@ -2547,16 +2572,16 @@ class StageCore extends EventEmitter$1 {
   async mount(el) {
     this.container = el;
     const { mask, renderer } = this;
-    await renderer.mount(el);
-    mask.mount(el);
+    await renderer?.mount(el);
+    mask?.mount(el);
     this.emit("mounted");
   }
   /**
    * 清空所有参考线
    */
   clearGuides() {
-    this.mask.clearGuides();
-    this.actionManager.clearGuides();
+    this.mask?.clearGuides();
+    this.actionManager?.clearGuides();
   }
   /**
    * @deprecated 废弃接口，建议用delayedMarkContainer代替
@@ -2572,31 +2597,35 @@ class StageCore extends EventEmitter$1 {
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
   delayedMarkContainer(event, excludeElList = []) {
-    return this.actionManager.delayedMarkContainer(event, excludeElList);
+    return this.actionManager?.delayedMarkContainer(event, excludeElList);
   }
   getMoveableOption(key) {
-    return this.actionManager.getMoveableOption(key);
+    return this.actionManager?.getMoveableOption(key);
   }
   getDragStatus() {
-    return this.actionManager.getDragStatus();
+    return this.actionManager?.getDragStatus();
   }
   disableMultiSelect() {
-    this.actionManager.disableMultiSelect();
+    this.actionManager?.disableMultiSelect();
   }
   enableMultiSelect() {
-    this.actionManager.enableMultiSelect();
+    this.actionManager?.enableMultiSelect();
   }
   /**
    * 销毁实例
    */
   destroy() {
     const { mask, renderer, actionManager, pageResizeObserver } = this;
-    renderer.destroy();
-    mask.destroy();
-    actionManager.destroy();
+    renderer?.destroy();
+    mask?.destroy();
+    actionManager?.destroy();
     pageResizeObserver?.disconnect();
     this.removeAllListeners();
     this.container = void 0;
+    this.renderer = null;
+    this.mask = null;
+    this.actionManager = null;
+    this.pageResizeObserver = null;
   }
   on(eventName, listener) {
     return super.on(eventName, listener);
@@ -2613,8 +2642,8 @@ class StageCore extends EventEmitter$1 {
     }
     if (typeof ResizeObserver !== "undefined") {
       this.pageResizeObserver = new ResizeObserver((entries) => {
-        this.mask.pageResize(entries);
-        this.actionManager.updateMoveable();
+        this.mask?.pageResize(entries);
+        this.actionManager?.updateMoveable();
       });
       this.pageResizeObserver.observe(page);
     }
@@ -2639,18 +2668,18 @@ class StageCore extends EventEmitter$1 {
     return actionManagerConfig;
   }
   initRenderEvent() {
-    this.renderer.on("runtime-ready", (runtime) => {
+    this.renderer?.on("runtime-ready", (runtime) => {
       this.emit("runtime-ready", runtime);
     });
-    this.renderer.on("page-el-update", (el) => {
+    this.renderer?.on("page-el-update", (el) => {
       this.mask?.observe(el);
       this.observePageResize(el);
       this.emit("page-el-update", el);
     });
   }
   initMaskEvent() {
-    this.mask.on("change-guides", (data) => {
-      this.actionManager.setGuidelines(data.type, data.guides);
+    this.mask?.on("change-guides", (data) => {
+      this.actionManager?.setGuidelines(data.type, data.guides);
       this.emit("change-guides", data);
     });
   }
@@ -2668,7 +2697,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化ActionManager类本身抛出来的事件监听
    */
   initActionManagerEvent() {
-    this.actionManager.on("before-select", (el, event) => {
+    this.actionManager?.on("before-select", (el, event) => {
       const id = getIdFromEl()(el);
       id && this.select(id, event);
     }).on("select", (selectedEl, event) => {
@@ -2685,7 +2714,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化DragResize类通过ActionManager抛出来的事件监听
    */
   initDrEvent() {
-    this.actionManager.on("update", (data) => {
+    this.actionManager?.on("update", (data) => {
       this.emit("update", data);
     }).on("sort", (data) => {
       this.emit("sort", data);
@@ -2699,10 +2728,10 @@ class StageCore extends EventEmitter$1 {
    * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
    */
   initMulDrEvent() {
-    this.actionManager.on("change-to-select", (id, e) => {
+    this.actionManager?.on("change-to-select", (id, e) => {
       this.select(id);
       setTimeout(() => {
-        const el = this.renderer.getTargetElement(id);
+        const el = this.renderer?.getTargetElement(id);
         el && this.emit("select", el, e);
       });
     }).on("multi-update", (data) => {
@@ -2713,7 +2742,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   initHighlightEvent() {
-    this.actionManager.on("highlight", (highlightEl) => {
+    this.actionManager?.on("highlight", (highlightEl) => {
       this.emit("highlight", highlightEl);
     });
   }
@@ -2721,7 +2750,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   initMouseEvent() {
-    this.actionManager.on("mousemove", (event) => {
+    this.actionManager?.on("mousemove", (event) => {
       this.emit("mousemove", event);
     }).on("mouseleave", (event) => {
       this.emit("mouseleave", event);
@@ -2731,4 +2760,4 @@ class StageCore extends EventEmitter$1 {
   }
 }
 
-export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, 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 { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, 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 };