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

package/dist/tmagic-stage.umd.cjs

@@ -175,7 +175,7 @@
     let swapIndex = 0;
     let addUpH = target.clientHeight;
     const brothers = Array.from(target.parentNode?.children || []).filter(
-      (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+      (child) => !utils.getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
     );
     const index = brothers.indexOf(target);
     const downEls = brothers.slice(index + 1);
@@ -191,14 +191,15 @@
       addUpH += ele.clientHeight / 2;
       swapIndex = i;
     }
+    const src = utils.getIdFromEl()(target) || "";
     return {
-      src: target.id,
-      dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+      src,
+      dist: downEls.length && swapIndex > -1 ? utils.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) => !utils.getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
     );
     const index = brothers.indexOf(target);
     const upEls = brothers.slice(0, index);
@@ -213,9 +214,10 @@
       addUpH += ele.clientHeight / 2;
       swapIndex = i;
     }
+    const src = utils.getIdFromEl()(target) || "";
     return {
-      src: target.id,
-      dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+      src,
+      dist: upEls.length && swapIndex > -1 ? utils.getIdFromEl()(upEls[swapIndex]) || "" : src
     };
   };
   const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
@@ -325,12 +327,11 @@
     };
   }
 
-  const getId = utils.getIdFromEl();
   class DragResizeHelper {
     /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
     targetShadow;
     /** 要操作的原始目标节点 */
-    target;
+    target = null;
     /** 多选:目标节点组 */
     targetList = [];
     /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
@@ -361,6 +362,8 @@
       });
     }
     destroy() {
+      this.target = null;
+      this.targetList = [];
       this.targetShadow.destroy();
       this.destroyGhostEl();
       this.moveableHelper.clear();
@@ -483,14 +486,16 @@
       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 === utils.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) => utils.getIdFromEl()(targetItem) === utils.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) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(targeEl.parentElement)
+        );
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -510,14 +515,16 @@
       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) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.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) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(targetItem) && utils.getIdFromEl()(ev.target)?.endsWith(utils.getIdFromEl()(targetItem))
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+        const isParentIncluded = this.targetList.find(
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(targeEl.parentElement)
+        );
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -536,7 +543,7 @@
       let shadowEl = this.getShadowEl();
       const shadowEls = this.getShadowEls();
       if (shadowEls.length) {
-        shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
+        shadowEl = shadowEls.find((item) => utils.getIdFromEl()(item)?.endsWith(utils.getIdFromEl()(el) || ""));
       }
       if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
         const targetShadowHtmlEl = shadowEl;
@@ -557,10 +564,10 @@
       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) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(ev.target)?.endsWith(utils.getIdFromEl()(targetItem) || "")
         );
         if (!matchEventTarget) return;
-        const id = getId(matchEventTarget);
+        const id = utils.getIdFromEl()(matchEventTarget);
         id && this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
           top: matchEventTarget.offsetTop,
@@ -575,24 +582,27 @@
       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));
-      utils.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";
+      utils.setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${utils.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 = utils.getIdFromEl()(el2);
         if (id) {
           utils.setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
         }
@@ -605,9 +615,10 @@
 
   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();
@@ -631,10 +642,14 @@
         {
           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",
             {
@@ -756,7 +771,7 @@
      */
     getOptions(isMultiSelect, runtimeOptions = {}) {
       const defaultOptions = this.getDefaultOptions(isMultiSelect);
-      const customizedOptions = this.getCustomizeOptions();
+      const customizedOptions = this.getCustomizeOptions() || {};
       this.options = lodashEs.merge(defaultOptions, customizedOptions, runtimeOptions);
       return this.options;
     }
@@ -967,6 +982,7 @@
      * 销毁实例
      */
     destroy() {
+      this.target = null;
       this.moveable?.destroy();
       this.dragResizeHelper.destroy();
       this.dragStatus = StageDragStatus.END;
@@ -1198,6 +1214,7 @@
      * 销毁实例
      */
     destroy() {
+      this.target = void 0;
       this.moveable?.destroy();
       this.targetShadow?.destroy();
       this.moveable = void 0;
@@ -1366,9 +1383,9 @@
   const throttleTime = 100;
   const defaultContainerHighlightDuration = 800;
   class ActionManager extends EventEmitter {
-    dr;
-    multiDr;
-    highlightLayer;
+    dr = null;
+    multiDr = null;
+    highlightLayer = null;
     /** 单选、多选、高亮的容器（蒙层的content） */
     container;
     /** 当前选中的节点 */
@@ -1435,7 +1452,7 @@
       this.disabledMultiSelect = true;
       if (this.multiDr) {
         this.multiDr.destroy();
-        this.multiDr = void 0;
+        this.multiDr = null;
       }
     }
     enableMultiSelect() {
@@ -1450,14 +1467,14 @@
      * @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();
     }
     /**
@@ -1465,7 +1482,7 @@
      * @param el 变更的元素
      */
     updateMoveable(el) {
-      this.dr.updateMoveable(el);
+      this.dr?.updateMoveable(el);
       this.multiDr?.updateMoveable();
     }
     /**
@@ -1484,7 +1501,7 @@
       return this.selectedElList;
     }
     getMoveableOption(key) {
-      if (this.dr.getTarget()) {
+      if (this.dr?.getTarget()) {
         return this.dr.getOption(key);
       }
       if (this.multiDr?.targetList.length) {
@@ -1541,7 +1558,7 @@
     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 = [];
@@ -1573,13 +1590,13 @@
         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();
     }
     /**
      * 用于在切换选择模式时清除上一次的状态
@@ -1590,7 +1607,7 @@
         this.multiDr?.clearSelectStatus();
         this.selectedElList = [];
       } else {
-        this.dr.clearSelectStatus();
+        this.dr?.clearSelectStatus();
       }
     }
     /**
@@ -1625,7 +1642,7 @@
       return void 0;
     }
     getDragStatus() {
-      return this.dr.getDragStatus();
+      return this.dr?.getDragStatus();
     }
     destroy() {
       this.container.removeEventListener("mousedown", this.mouseDownHandler);
@@ -1633,9 +1650,14 @@
       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);
@@ -1665,7 +1687,7 @@
       }).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 }]
@@ -2358,6 +2380,16 @@
     getTargetElement(id) {
       return utils.getElById()(this.getDocument(), id);
     }
+    postTmagicRuntimeReady() {
+      this.contentWindow = this.iframe?.contentWindow;
+      this.contentWindow.magic = this.getMagicApi();
+      this.contentWindow.postMessage(
+        {
+          tmagicRuntimeReady: true
+        },
+        "*"
+      );
+    }
     /**
      * 销毁实例
      */
@@ -2421,23 +2453,13 @@
       this.emit("onload");
       utils.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.EventEmitter {
     container;
-    renderer;
-    mask;
-    actionManager;
+    renderer = null;
+    mask = null;
+    actionManager = null;
     pageResizeObserver = null;
     autoScrollIntoView;
     customizedRender;
@@ -2469,13 +2491,15 @@
      * @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);
       }
     }
     /**
@@ -2483,15 +2507,15 @@
      * @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);
       }
     }
     /**
@@ -2499,10 +2523,10 @@
      * @param el 要高亮的元素
      */
     highlight(id) {
-      this.actionManager.highlight(id);
+      this.actionManager?.highlight(id);
     }
     clearHighlight() {
-      this.actionManager.clearHighlight();
+      this.actionManager?.clearHighlight();
     }
     /**
      * 更新组件
@@ -2510,11 +2534,11 @@
      */
     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);
         }
@@ -2525,17 +2549,17 @@
      * @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节点
@@ -2544,16 +2568,16 @@
     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代替
@@ -2569,31 +2593,35 @@
      * @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);
@@ -2610,8 +2638,8 @@
       }
       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);
       }
@@ -2636,18 +2664,18 @@
       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);
       });
     }
@@ -2665,7 +2693,7 @@
      * 初始化ActionManager类本身抛出来的事件监听
      */
     initActionManagerEvent() {
-      this.actionManager.on("before-select", (el, event) => {
+      this.actionManager?.on("before-select", (el, event) => {
         const id = utils.getIdFromEl()(el);
         id && this.select(id, event);
       }).on("select", (selectedEl, event) => {
@@ -2682,7 +2710,7 @@
      * 初始化DragResize类通过ActionManager抛出来的事件监听
      */
     initDrEvent() {
-      this.actionManager.on("update", (data) => {
+      this.actionManager?.on("update", (data) => {
         this.emit("update", data);
       }).on("sort", (data) => {
         this.emit("sort", data);
@@ -2696,10 +2724,10 @@
      * 初始化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) => {
@@ -2710,7 +2738,7 @@
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     initHighlightEvent() {
-      this.actionManager.on("highlight", (highlightEl) => {
+      this.actionManager?.on("highlight", (highlightEl) => {
         this.emit("highlight", highlightEl);
       });
     }
@@ -2718,7 +2746,7 @@
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     initMouseEvent() {
-      this.actionManager.on("mousemove", (event) => {
+      this.actionManager?.on("mousemove", (event) => {
         this.emit("mousemove", event);
       }).on("mouseleave", (event) => {
         this.emit("mouseleave", event);
@@ -2738,6 +2766,7 @@
   exports.HIGHLIGHT_EL_ID_PREFIX = HIGHLIGHT_EL_ID_PREFIX;
   exports.Mode = Mode;
   exports.MouseButton = MouseButton;
+  exports.MoveableActionsAble = MoveableActionsAble;
   exports.PAGE_CLASS = PAGE_CLASS;
   exports.RenderType = RenderType;
   exports.SELECTED_CLASS = SELECTED_CLASS;
@@ -2765,6 +2794,12 @@
   exports.isStatic = isStatic;
   exports.removeSelectedClassName = removeSelectedClassName;
   exports.up = up;
+  Object.keys(Moveable).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => Moveable[k]
+    });
+  });
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.1",
+  "version": "1.5.0-beta.10",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -40,14 +40,14 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.77.0",
-    "vite": "^5.3.5"
+    "sass": "^1.78.0",
+    "vite": "^5.4.3"
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/utils": "1.5.0-beta.1",
-    "@tmagic/core": "1.5.0-beta.1",
-    "@tmagic/schema": "1.5.0-beta.1"
+    "@tmagic/core": "1.5.0-beta.10",
+    "@tmagic/schema": "1.5.0-beta.10",
+    "@tmagic/utils": "1.5.0-beta.10"
   },
   "peerDependenciesMeta": {
     "typescript": {