@tmagic/stage 1.3.5 → 1.3.7

package/dist/tmagic-stage.js

@@ -39,6 +39,11 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
   return Mode2;
 })(Mode || {});
 const SELECTED_CLASS = "tmagic-stage-selected-area";
+var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
+  AbleActionEventType2["SELECT_PARENT"] = "select-parent";
+  AbleActionEventType2["REMOVE"] = "remove";
+  return AbleActionEventType2;
+})(AbleActionEventType || {});
 
 const getParents = (el, relative) => {
   let cur = el.parentElement;
@@ -282,7 +287,7 @@ class TargetShadow {
     el.id = `${this.idPrefix}${target.id}`;
     el.style.cssText = getTargetElStyle(target, this.zIndex);
     if (typeof this.updateDragEl === "function") {
-      this.updateDragEl(el, target);
+      this.updateDragEl(el, target, this.container);
     }
     const isFixed = isFixedParent(target);
     const mode = this.container.dataset.mode || Mode.ABSOLUTE;
@@ -582,28 +587,6 @@ 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";
 
-var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-  ContainerHighlightType2["DEFAULT"] = "default";
-  ContainerHighlightType2["ALT"] = "alt";
-  return ContainerHighlightType2;
-})(ContainerHighlightType || {});
-var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
-  SelectStatus2["SELECT"] = "select";
-  SelectStatus2["MULTI_SELECT"] = "multiSelect";
-  return SelectStatus2;
-})(SelectStatus || {});
-var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-  StageDragStatus2["START"] = "start";
-  StageDragStatus2["ING"] = "ing";
-  StageDragStatus2["END"] = "end";
-  return StageDragStatus2;
-})(StageDragStatus || {});
-var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
-  AbleActionEventType2["SELECT_PARENT"] = "select-parent";
-  AbleActionEventType2["REMOVE"] = "remove";
-  return AbleActionEventType2;
-})(AbleActionEventType || {});
-
 const MoveableActionsAble = (handler) => ({
   name: "actions",
   props: [],
@@ -896,6 +879,28 @@ class MoveableOptionsManager extends EventEmitter {
   }
 }
 
+var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+  ContainerHighlightType2["DEFAULT"] = "default";
+  ContainerHighlightType2["ALT"] = "alt";
+  return ContainerHighlightType2;
+})(ContainerHighlightType || {});
+var RenderType = /* @__PURE__ */ ((RenderType2) => {
+  RenderType2["IFRAME"] = "iframe";
+  RenderType2["NATIVE"] = "native";
+  return RenderType2;
+})(RenderType || {});
+var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+  SelectStatus2["SELECT"] = "select";
+  SelectStatus2["MULTI_SELECT"] = "multiSelect";
+  return SelectStatus2;
+})(SelectStatus || {});
+var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+  StageDragStatus2["START"] = "start";
+  StageDragStatus2["ING"] = "ing";
+  StageDragStatus2["END"] = "end";
+  return StageDragStatus2;
+})(StageDragStatus || {});
+
 class StageDragResize extends MoveableOptionsManager {
   /** 目标节点 */
   target;
@@ -1388,6 +1393,8 @@ class ActionManager extends EventEmitter {
   canSelect;
   isContainer;
   getRenderDocument;
+  disabledMultiSelect = false;
+  config;
   mouseMoveHandler = throttle(async (event) => {
     if (event.target?.classList?.contains("moveable-direction")) {
       return;
@@ -1402,38 +1409,21 @@ class ActionManager extends EventEmitter {
   }, throttleTime);
   constructor(config) {
     super();
+    this.config = config;
     this.container = config.container;
     this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS_NAME;
     this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
     this.containerHighlightType = config.containerHighlightType;
+    this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
     this.canSelect = config.canSelect || ((el) => !!el.id);
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
-    const createDrHelper = () => new DragResizeHelper({
-      container: config.container,
-      updateDragEl: config.updateDragEl
-    });
-    this.dr = new StageDragResize({
-      container: config.container,
-      disabledDragStart: config.disabledDragStart,
-      moveableOptions: this.changeCallback(config.moveableOptions, false),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this)
-    });
-    this.multiDr = new StageMultiDragResize({
-      container: config.container,
-      moveableOptions: this.changeCallback(config.moveableOptions, true),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this)
-    });
+    this.dr = this.createDr(config);
+    if (!this.disabledMultiSelect) {
+      this.multiDr = this.createMultiDr(config);
+    }
     this.highlightLayer = new StageHighlight({
       container: config.container,
       updateDragEl: config.updateDragEl,
@@ -1441,7 +1431,19 @@ class ActionManager extends EventEmitter {
     });
     this.initMouseEvent();
     this.initKeyEvent();
-    this.initActionEvent();
+  }
+  disableMultiSelect() {
+    this.disabledMultiSelect = true;
+    if (this.multiDr) {
+      this.multiDr.destroy();
+      this.multiDr = void 0;
+    }
+  }
+  enableMultiSelect() {
+    this.disabledMultiSelect = false;
+    if (!this.multiDr) {
+      this.multiDr = this.createMultiDr(this.config);
+    }
   }
   /**
    * 设置水平/垂直参考线
@@ -1450,14 +1452,14 @@ class ActionManager extends EventEmitter {
    */
   setGuidelines(type, guidelines) {
     this.dr.setGuidelines(type, guidelines);
-    this.multiDr.setGuidelines(type, guidelines);
+    this.multiDr?.setGuidelines(type, guidelines);
   }
   /**
    * 清空所有参考线
    */
   clearGuides() {
     this.dr.clearGuides();
-    this.multiDr.clearGuides();
+    this.multiDr?.clearGuides();
   }
   /**
    * 更新moveable，外部主要调用场景是元素配置变更、页面大小变更
@@ -1465,7 +1467,7 @@ class ActionManager extends EventEmitter {
    */
   updateMoveable(el) {
     this.dr.updateMoveable(el);
-    this.multiDr.updateMoveable();
+    this.multiDr?.updateMoveable();
   }
   /**
    * 判断是否单选选中的元素
@@ -1486,7 +1488,7 @@ class ActionManager extends EventEmitter {
     if (this.dr.getTarget()) {
       return this.dr.getOption(key);
     }
-    if (this.multiDr.targetList.length) {
+    if (this.multiDr?.targetList.length) {
       return this.multiDr.getOption(key);
     }
   }
@@ -1536,17 +1538,17 @@ class ActionManager extends EventEmitter {
     if (selectedEl?.className.includes(PAGE_CLASS)) {
       return true;
     }
-    return this.multiDr.canSelect(el, selectedEl);
+    return this.multiDr?.canSelect(el, selectedEl) || false;
   }
   select(el, event) {
-    this.selectedEl = el;
+    this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
   multiSelect(idOrElList) {
     this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
     this.clearSelectStatus(SelectStatus.SELECT);
-    this.multiDr.multiSelect(this.selectedElList);
+    this.multiDr?.multiSelect(this.selectedElList);
   }
   getHighlightEl() {
     return this.highlightedEl;
@@ -1562,7 +1564,7 @@ class ActionManager extends EventEmitter {
       this.clearHighlight();
       return;
     }
-    if (el === this.getSelectedEl() || this.multiDr.dragStatus === StageDragStatus.ING) {
+    if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
       this.clearHighlight();
       return;
     }
@@ -1582,7 +1584,7 @@ class ActionManager extends EventEmitter {
    */
   clearSelectStatus(selectType) {
     if (selectType === SelectStatus.MULTI_SELECT) {
-      this.multiDr.clearSelectStatus();
+      this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
       this.dr.clearSelectStatus();
@@ -1629,9 +1631,67 @@ class ActionManager extends EventEmitter {
     this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
     this.container.removeEventListener("wheel", this.mouseWheelHandler);
     this.dr.destroy();
-    this.multiDr.destroy();
+    this.multiDr?.destroy();
     this.highlightLayer.destroy();
   }
+  createDr(config) {
+    const createDrHelper = () => new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    const dr = new StageDragResize({
+      container: config.container,
+      disabledDragStart: config.disabledDragStart,
+      moveableOptions: this.changeCallback(config.moveableOptions, false),
+      dragResizeHelper: createDrHelper(),
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this)
+    });
+    dr.on("update", (data) => {
+      setTimeout(() => this.emit("update", data));
+    }).on("sort", (data) => {
+      setTimeout(() => this.emit("sort", data));
+    }).on("select-parent", () => {
+      this.emit("select-parent");
+    }).on("remove", () => {
+      const drTarget = this.dr.getTarget();
+      if (!drTarget)
+        return;
+      const data = {
+        data: [{ el: drTarget }]
+      };
+      this.emit("remove", data);
+    }).on("drag-start", (e) => {
+      this.emit("drag-start", e);
+    });
+    return dr;
+  }
+  createMultiDr(config) {
+    const createDrHelper = () => new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    const multiDr = new StageMultiDragResize({
+      container: config.container,
+      moveableOptions: this.changeCallback(config.moveableOptions, true),
+      dragResizeHelper: createDrHelper(),
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this)
+    });
+    multiDr?.on("update", (data) => {
+      this.emit("multi-update", data);
+    }).on("change-to-select", async (id) => {
+      if (this.isMultiSelectStatus)
+        return false;
+      const el = this.getTargetElement(id);
+      this.emit("change-to-select", el);
+    });
+    return multiDr;
+  }
   changeCallback(options, isMulti) {
     if (typeof options === "function") {
       return () => {
@@ -1662,7 +1722,7 @@ class ActionManager extends EventEmitter {
       return;
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl);
-      this.selectedEl = void 0;
+      this.setSelectedEl(void 0);
     }
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
     if (existIndex !== -1) {
@@ -1702,14 +1762,20 @@ class ActionManager extends EventEmitter {
     const ctrl = isMac ? "meta" : "ctrl";
     KeyController.global.keydown(ctrl, (e) => {
       e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = true;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = true;
+      }
     });
     KeyController.global.on("blur", () => {
-      this.isMultiSelectStatus = false;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = false;
+      }
     });
     KeyController.global.keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = false;
+      }
     });
     KeyController.global.keydown("alt", (e) => {
       e.inputEvent.preventDefault();
@@ -1721,36 +1787,6 @@ class ActionManager extends EventEmitter {
       this.isAltKeydown = false;
     });
   }
-  /**
-   * 处理单选、多选抛出来的事件
-   */
-  initActionEvent() {
-    this.dr.on("update", (data) => {
-      setTimeout(() => this.emit("update", data));
-    }).on("sort", (data) => {
-      setTimeout(() => this.emit("sort", data));
-    }).on("select-parent", () => {
-      this.emit("select-parent");
-    }).on("remove", () => {
-      const drTarget = this.dr.getTarget();
-      if (!drTarget)
-        return;
-      const data = {
-        data: [{ el: drTarget }]
-      };
-      this.emit("remove", data);
-    }).on("drag-start", (e) => {
-      this.emit("drag-start", e);
-    });
-    this.multiDr.on("update", (data) => {
-      this.emit("multi-update", data);
-    }).on("change-to-select", async (id) => {
-      if (this.isMultiSelectStatus)
-        return false;
-      const el = this.getTargetElement(id);
-      this.emit("change-to-select", el);
-    });
-  }
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */
@@ -1791,13 +1827,13 @@ class ActionManager extends EventEmitter {
   /**
    * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
    */
-  mouseUpHandler = () => {
+  mouseUpHandler = (event) => {
     getDocument().removeEventListener("mouseup", this.mouseUpHandler);
     this.container.addEventListener("mousemove", this.mouseMoveHandler);
     if (this.isMultiSelectStatus) {
-      this.emit("multi-select", this.selectedElList);
+      this.emit("multi-select", this.selectedElList, event);
     } else {
-      this.emit("select", this.selectedEl);
+      this.emit("select", this.selectedEl, event);
     }
   };
   mouseLeaveHandler = (event) => {
@@ -1817,8 +1853,10 @@ class Rule extends EventEmitter {
   container;
   containerResizeObserver;
   isShowGuides = true;
-  constructor(container) {
+  guidesOptions;
+  constructor(container, options) {
     super();
+    this.guidesOptions = options?.guidesOptions || {};
     this.container = container;
     this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
     this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
@@ -1917,7 +1955,8 @@ class Rule extends EventEmitter {
       lineColor: "#000",
       textColor: "#000",
       style: this.getGuidesStyle(type),
-      showGuides: this.isShowGuides
+      showGuides: this.isShowGuides,
+      ...this.guidesOptions
     });
     const changEventHandler = {
       [GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
@@ -1989,9 +2028,9 @@ class StageMask extends Rule {
   pageScrollParent = null;
   intersectionObserver = null;
   wrapperResizeObserver = null;
-  constructor() {
+  constructor(options) {
     const wrapper = createWrapper();
-    super(wrapper);
+    super(wrapper, options);
     this.wrapper = wrapper;
     this.content.addEventListener("wheel", this.mouseWheelHandler);
     this.wrapper.appendChild(this.content);
@@ -2206,22 +2245,22 @@ class StageRender extends EventEmitter$1 {
   contentWindow = null;
   runtime = null;
   iframe;
+  nativeContainer;
   runtimeUrl;
   zoom = DEFAULT_ZOOM;
+  renderType;
   customizedRender;
-  constructor({ runtimeUrl, zoom, customizedRender }) {
+  constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }) {
     super();
+    this.renderType = renderType;
     this.runtimeUrl = runtimeUrl || "";
     this.customizedRender = customizedRender;
     this.setZoom(zoom);
-    this.iframe = globalThis.document.createElement("iframe");
-    this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
-    this.iframe.style.cssText = `
-      border: 0;
-      width: 100%;
-      height: 100%;
-    `;
-    this.iframe.addEventListener("load", this.loadHandler);
+    if (this.renderType === RenderType.IFRAME) {
+      this.createIframe();
+    } else if (this.renderType === RenderType.NATIVE) {
+      this.createNativeContainer();
+    }
   }
   getMagicApi = () => ({
     onPageElUpdate: (el) => this.emit("page-el-update", el),
@@ -2261,18 +2300,19 @@ class StageRender extends EventEmitter$1 {
    * @param el 将页面挂载到该Dom节点上
    */
   async mount(el) {
-    if (!this.iframe) {
-      throw Error("mount 失败");
-    }
-    if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-      let html = await fetch(this.runtimeUrl).then((res) => res.text());
-      const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
-      html = html.replace("<head>", `<head>
+    if (this.iframe) {
+      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+        let html = await fetch(this.runtimeUrl).then((res) => res.text());
+        const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+        html = html.replace("<head>", `<head>
 <base href="${base}">`);
-      this.iframe.srcdoc = html;
+        this.iframe.srcdoc = html;
+      }
+      el.appendChild(this.iframe);
+      this.postTmagicRuntimeReady();
+    } else if (this.nativeContainer) {
+      el.appendChild(this.nativeContainer);
     }
-    el.appendChild(this.iframe);
-    this.postTmagicRuntimeReady();
   }
   getRuntime = () => {
     if (this.runtime)
@@ -2318,12 +2358,34 @@ class StageRender extends EventEmitter$1 {
    * 销毁实例
    */
   destroy() {
-    this.iframe?.removeEventListener("load", this.loadHandler);
+    this.iframe?.removeEventListener("load", this.iframeLoadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
     this.iframe = void 0;
     this.removeAllListeners();
   }
+  createIframe() {
+    this.iframe = globalThis.document.createElement("iframe");
+    this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
+    this.iframe.style.cssText = `
+      border: 0;
+      width: 100%;
+      height: 100%;
+    `;
+    this.iframe.addEventListener("load", this.iframeLoadHandler);
+    return this.iframe;
+  }
+  async createNativeContainer() {
+    this.contentWindow = globalThis;
+    this.nativeContainer = globalThis.document.createElement("div");
+    this.contentWindow.magic = this.getMagicApi();
+    if (this.customizedRender) {
+      const el = await this.customizedRender();
+      if (el) {
+        this.nativeContainer.appendChild(el);
+      }
+    }
+  }
   /**
    * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
    * @param el 被选中的元素
@@ -2335,7 +2397,7 @@ class StageRender extends EventEmitter$1 {
       addSelectedClassName(el, doc);
     }
   }
-  loadHandler = async () => {
+  iframeLoadHandler = async () => {
     if (!this.contentWindow?.magic) {
       this.postTmagicRuntimeReady();
     }
@@ -2377,6 +2439,7 @@ class StageCore extends EventEmitter$1 {
     this.renderer = new StageRender({
       runtimeUrl: config.runtimeUrl,
       zoom: config.zoom,
+      renderType: config.renderType,
       customizedRender: async () => {
         if (this?.customizedRender) {
           return await this.customizedRender(this);
@@ -2384,7 +2447,9 @@ class StageCore extends EventEmitter$1 {
         return null;
       }
     });
-    this.mask = new StageMask();
+    this.mask = new StageMask({
+      guidesOptions: config.guidesOptions
+    });
     this.actionManager = new ActionManager(this.getActionManagerConfig(config));
     this.initRenderEvent();
     this.initActionEvent();
@@ -2505,6 +2570,12 @@ class StageCore extends EventEmitter$1 {
   getDragStatus() {
     return this.actionManager.getDragStatus();
   }
+  disableMultiSelect() {
+    this.actionManager.disableMultiSelect();
+  }
+  enableMultiSelect() {
+    this.actionManager.enableMultiSelect();
+  }
   /**
    * 销毁实例
    */
@@ -2537,6 +2608,7 @@ class StageCore extends EventEmitter$1 {
       moveableOptions: config.moveableOptions,
       container: this.mask.content,
       disabledDragStart: config.disabledDragStart,
+      disabledMultiSelect: config.disabledMultiSelect,
       canSelect: config.canSelect,
       isContainer: config.isContainer,
       updateDragEl: config.updateDragEl,
@@ -2554,6 +2626,7 @@ class StageCore extends EventEmitter$1 {
     this.renderer.on("page-el-update", (el) => {
       this.mask?.observe(el);
       this.observePageResize(el);
+      this.emit("page-el-update", el);
     });
   }
   initMaskEvent() {
@@ -2578,12 +2651,12 @@ class StageCore extends EventEmitter$1 {
   initActionManagerEvent() {
     this.actionManager.on("before-select", (idOrEl, event) => {
       this.select(idOrEl, event);
-    }).on("select", (selectedEl) => {
-      this.emit("select", selectedEl);
+    }).on("select", (selectedEl, event) => {
+      this.emit("select", selectedEl, event);
     }).on("before-multi-select", (idOrElList) => {
       this.multiSelect(idOrElList);
-    }).on("multi-select", (selectedElList) => {
-      this.emit("multi-select", selectedElList);
+    }).on("multi-select", (selectedElList, event) => {
+      this.emit("multi-select", selectedElList, event);
     });
   }
   /**
@@ -2633,5 +2706,5 @@ 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, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, 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, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.js.map