@tmagic/stage 1.3.5 → 1.3.7

package/dist/tmagic-stage.umd.cjs

@@ -36,6 +36,11 @@
     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;
@@ -279,7 +284,7 @@
       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;
@@ -579,28 +584,6 @@
 
   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: [],
@@ -893,6 +876,28 @@
     }
   }
 
+  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;
@@ -1385,6 +1390,8 @@
     canSelect;
     isContainer;
     getRenderDocument;
+    disabledMultiSelect = false;
+    config;
     mouseMoveHandler = lodashEs.throttle(async (event) => {
       if (event.target?.classList?.contains("moveable-direction")) {
         return;
@@ -1399,38 +1406,21 @@
     }, 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,
@@ -1438,7 +1428,19 @@
       });
       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);
+      }
     }
     /**
      * 设置水平/垂直参考线
@@ -1447,14 +1449,14 @@
      */
     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，外部主要调用场景是元素配置变更、页面大小变更
@@ -1462,7 +1464,7 @@
      */
     updateMoveable(el) {
       this.dr.updateMoveable(el);
-      this.multiDr.updateMoveable();
+      this.multiDr?.updateMoveable();
     }
     /**
      * 判断是否单选选中的元素
@@ -1483,7 +1485,7 @@
       if (this.dr.getTarget()) {
         return this.dr.getOption(key);
       }
-      if (this.multiDr.targetList.length) {
+      if (this.multiDr?.targetList.length) {
         return this.multiDr.getOption(key);
       }
     }
@@ -1533,17 +1535,17 @@
       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;
@@ -1559,7 +1561,7 @@
         this.clearHighlight();
         return;
       }
-      if (el === this.getSelectedEl() || this.multiDr.dragStatus === StageDragStatus.ING) {
+      if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
         this.clearHighlight();
         return;
       }
@@ -1579,7 +1581,7 @@
      */
     clearSelectStatus(selectType) {
       if (selectType === SelectStatus.MULTI_SELECT) {
-        this.multiDr.clearSelectStatus();
+        this.multiDr?.clearSelectStatus();
         this.selectedElList = [];
       } else {
         this.dr.clearSelectStatus();
@@ -1626,9 +1628,67 @@
       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 () => {
@@ -1659,7 +1719,7 @@
         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) {
@@ -1699,14 +1759,20 @@
       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();
@@ -1718,36 +1784,6 @@
         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事件中再通知外面的编辑器更新
      */
@@ -1788,13 +1824,13 @@
     /**
      * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
      */
-    mouseUpHandler = () => {
+    mouseUpHandler = (event) => {
       utils.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) => {
@@ -1814,8 +1850,10 @@
     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);
@@ -1914,7 +1952,8 @@
         lineColor: "#000",
         textColor: "#000",
         style: this.getGuidesStyle(type),
-        showGuides: this.isShowGuides
+        showGuides: this.isShowGuides,
+        ...this.guidesOptions
       });
       const changEventHandler = {
         [GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
@@ -1986,9 +2025,9 @@
     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);
@@ -2203,22 +2242,22 @@
     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 = utils.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),
@@ -2258,18 +2297,19 @@
      * @param el 将页面挂载到该Dom节点上
      */
     async mount(el) {
-      if (!this.iframe) {
-        throw Error("mount 失败");
-      }
-      if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-        let html = await fetch(this.runtimeUrl).then((res) => res.text());
-        const base = `${location.protocol}//${utils.getHost(this.runtimeUrl)}`;
-        html = html.replace("<head>", `<head>
+      if (this.iframe) {
+        if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+          let html = await fetch(this.runtimeUrl).then((res) => res.text());
+          const base = `${location.protocol}//${utils.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)
@@ -2315,12 +2355,34 @@
      * 销毁实例
      */
     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 && utils.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 被选中的元素
@@ -2332,7 +2394,7 @@
         addSelectedClassName(el, doc);
       }
     }
-    loadHandler = async () => {
+    iframeLoadHandler = async () => {
       if (!this.contentWindow?.magic) {
         this.postTmagicRuntimeReady();
       }
@@ -2374,6 +2436,7 @@
       this.renderer = new StageRender({
         runtimeUrl: config.runtimeUrl,
         zoom: config.zoom,
+        renderType: config.renderType,
         customizedRender: async () => {
           if (this?.customizedRender) {
             return await this.customizedRender(this);
@@ -2381,7 +2444,9 @@
           return null;
         }
       });
-      this.mask = new StageMask();
+      this.mask = new StageMask({
+        guidesOptions: config.guidesOptions
+      });
       this.actionManager = new ActionManager(this.getActionManagerConfig(config));
       this.initRenderEvent();
       this.initActionEvent();
@@ -2502,6 +2567,12 @@
     getDragStatus() {
       return this.actionManager.getDragStatus();
     }
+    disableMultiSelect() {
+      this.actionManager.disableMultiSelect();
+    }
+    enableMultiSelect() {
+      this.actionManager.enableMultiSelect();
+    }
     /**
      * 销毁实例
      */
@@ -2534,6 +2605,7 @@
         moveableOptions: config.moveableOptions,
         container: this.mask.content,
         disabledDragStart: config.disabledDragStart,
+        disabledMultiSelect: config.disabledMultiSelect,
         canSelect: config.canSelect,
         isContainer: config.isContainer,
         updateDragEl: config.updateDragEl,
@@ -2551,6 +2623,7 @@
       this.renderer.on("page-el-update", (el) => {
         this.mask?.observe(el);
         this.observePageResize(el);
+        this.emit("page-el-update", el);
       });
     }
     initMaskEvent() {
@@ -2575,12 +2648,12 @@
     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);
       });
     }
     /**
@@ -2641,6 +2714,7 @@
   exports.Mode = Mode;
   exports.MouseButton = MouseButton;
   exports.PAGE_CLASS = PAGE_CLASS;
+  exports.RenderType = RenderType;
   exports.SELECTED_CLASS = SELECTED_CLASS;
   exports.SelectStatus = SelectStatus;
   exports.StageDragResize = StageDragResize;