@tmagic/stage 1.1.0-beta.3 → 1.1.0-beta.6

package/dist/tmagic-stage.umd.js

@@ -4,13 +4,13 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.utils, global.Moveable, global.MoveableHelper, global.KeyController, global.lodashEs, global.Guides));
 })(this, (function (exports, EventEmitter, utils, Moveable, MoveableHelper, KeyController, lodashEs, Guides) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
-  var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
-  var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
-  var MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
-  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
-  var Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
+  const EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+  const Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
+  const MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
+  const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
+  const Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
@@ -162,16 +162,70 @@
     }
     return value;
   };
+  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));
+    const index = brothers.indexOf(target);
+    const downEls = brothers.slice(index + 1);
+    for (let i = 0; i < downEls.length; i++) {
+      const ele = downEls[i];
+      if (ele.style?.position === "fixed") {
+        continue;
+      }
+      addUpH += ele.clientHeight / 2;
+      if (deltaTop <= addUpH) {
+        break;
+      }
+      addUpH += ele.clientHeight / 2;
+      swapIndex = i;
+    }
+    return {
+      src: target.id,
+      dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+    };
+  };
+  const up = (deltaTop, target) => {
+    const brothers = Array.from(target.parentNode?.children || []).filter((node) => !node.id.startsWith(GHOST_EL_ID_PREFIX));
+    const index = brothers.indexOf(target);
+    const upEls = brothers.slice(0, index);
+    let addUpH = target.clientHeight;
+    let swapIndex = upEls.length - 1;
+    for (let i = upEls.length - 1; i >= 0; i--) {
+      const ele = upEls[i];
+      if (!ele)
+        continue;
+      if (ele.style.position === "fixed")
+        continue;
+      addUpH += ele.clientHeight / 2;
+      if (-deltaTop <= addUpH)
+        break;
+      addUpH += ele.clientHeight / 2;
+      swapIndex = i;
+    }
+    return {
+      src: target.id,
+      dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+    };
+  };
 
   class StageDragResize extends EventEmitter.EventEmitter {
+    core;
+    mask;
+    container;
+    target;
+    dragEl;
+    moveable;
+    horizontalGuidelines = [];
+    verticalGuidelines = [];
+    elementGuidelines = [];
+    mode = Mode.ABSOLUTE;
+    moveableOptions = {};
+    dragStatus = "end" /* END */;
+    ghostEl;
+    moveableHelper;
     constructor(config) {
       super();
-      this.horizontalGuidelines = [];
-      this.verticalGuidelines = [];
-      this.elementGuidelines = [];
-      this.mode = Mode.ABSOLUTE;
-      this.moveableOptions = {};
-      this.dragStatus = "end" /* END */;
       this.core = config.core;
       this.container = config.container;
       this.mask = config.mask;
@@ -181,7 +235,7 @@
       this.target = el;
       if (!this.moveable || this.target !== oldTarget) {
         this.init(el);
-        this.moveableHelper = MoveableHelper__default["default"].create({
+        this.moveableHelper = MoveableHelper__default.default.create({
           useBeforeRender: true,
           useRender: false,
           createAuto: true
@@ -285,7 +339,7 @@
     }
     initMoveable() {
       this.moveable?.destroy();
-      this.moveable = new Moveable__default["default"](this.container, {
+      this.moveable = new Moveable__default.default(this.container, {
         ...this.moveableOptions
       });
       this.bindResizeEvent();
@@ -497,7 +551,7 @@
       return ghostEl;
     }
     setGhostElChildrenId(el) {
-      for (const child of el.children) {
+      for (const child of Array.from(el.children)) {
         if (child.id) {
           child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
         }
@@ -560,7 +614,7 @@
         bounds: {
           top: 0,
           left: -1,
-          right: this.container.clientWidth,
+          right: this.container.clientWidth - 1,
           bottom: this.container.clientHeight,
           ...moveableOptions.bounds || {}
         },
@@ -569,54 +623,13 @@
       };
     }
   }
-  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));
-    const index = brothers.indexOf(target);
-    const downEls = brothers.slice(index + 1);
-    for (let i = 0; i < downEls.length; i++) {
-      const ele = downEls[i];
-      if (ele.style?.position === "fixed") {
-        continue;
-      }
-      addUpH += ele.clientHeight / 2;
-      if (deltaTop <= addUpH) {
-        break;
-      }
-      addUpH += ele.clientHeight / 2;
-      swapIndex = i;
-    }
-    return {
-      src: target.id,
-      dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
-    };
-  };
-  const up = (deltaTop, target) => {
-    const brothers = Array.from(target.parentNode?.children || []).filter((node) => !node.id.startsWith(GHOST_EL_ID_PREFIX));
-    const index = brothers.indexOf(target);
-    const upEls = brothers.slice(0, index);
-    let addUpH = target.clientHeight;
-    let swapIndex = upEls.length - 1;
-    for (let i = upEls.length - 1; i >= 0; i--) {
-      const ele = upEls[i];
-      if (!ele)
-        continue;
-      if (ele.style.position === "fixed")
-        continue;
-      addUpH += ele.clientHeight / 2;
-      if (-deltaTop <= addUpH)
-        break;
-      addUpH += ele.clientHeight / 2;
-      swapIndex = i;
-    }
-    return {
-      src: target.id,
-      dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
-    };
-  };
 
   class TargetCalibrate extends EventEmitter.EventEmitter {
+    parent;
+    mask;
+    dr;
+    core;
+    operationEl;
     constructor(config) {
       super();
       this.parent = config.parent;
@@ -636,6 +649,7 @@
       top: ${top}px;
       width: ${el.clientWidth}px;
       height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
       this.operationEl.id = `${prefix}${el.id}`;
       if (typeof this.core.config.updateDragEl === "function") {
@@ -683,6 +697,11 @@
   }
 
   class StageHighlight extends EventEmitter.EventEmitter {
+    core;
+    container;
+    target;
+    moveable;
+    calibrationTarget;
     constructor(config) {
       super();
       this.core = config.core;
@@ -699,11 +718,11 @@
         return;
       this.target = el;
       this.moveable?.destroy();
-      this.moveable = new Moveable__default["default"](this.container, {
+      this.moveable = new Moveable__default.default(this.container, {
         target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
         origin: false,
         rootContainer: this.core.container,
-        zoom: 1
+        zoom: 2
       });
     }
     clearHighlight() {
@@ -719,42 +738,15 @@
     }
   }
 
-  class Rule extends EventEmitter__default["default"] {
+  class Rule extends EventEmitter__default.default {
+    hGuides;
+    vGuides;
+    horizontalGuidelines = [];
+    verticalGuidelines = [];
+    container;
+    containerResizeObserver;
     constructor(container) {
       super();
-      this.horizontalGuidelines = [];
-      this.verticalGuidelines = [];
-      this.getGuidesStyle = (type) => ({
-        position: "fixed",
-        zIndex: 1,
-        left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
-        top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
-        width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
-        height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
-      });
-      this.createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.container, {
-        type,
-        defaultGuides,
-        displayDragPos: true,
-        backgroundColor: "#fff",
-        lineColor: "#000",
-        textColor: "#000",
-        style: this.getGuidesStyle(type)
-      });
-      this.hGuidesChangeGuidesHandler = (e) => {
-        this.horizontalGuidelines = e.guides;
-        this.emit("changeGuides", {
-          type: GuidesType.HORIZONTAL,
-          guides: this.horizontalGuidelines
-        });
-      };
-      this.vGuidesChangeGuidesHandler = (e) => {
-        this.verticalGuidelines = e.guides;
-        this.emit("changeGuides", {
-          type: GuidesType.VERTICAL,
-          guides: this.verticalGuidelines
-        });
-      };
       this.container = container;
       this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
       this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
@@ -826,6 +818,37 @@
       this.containerResizeObserver.disconnect();
       this.removeAllListeners();
     }
+    getGuidesStyle = (type) => ({
+      position: "fixed",
+      zIndex: 1,
+      left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
+      top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
+      width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
+      height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
+    });
+    createGuides = (type, defaultGuides = []) => new Guides__default.default(this.container, {
+      type,
+      defaultGuides,
+      displayDragPos: true,
+      backgroundColor: "#fff",
+      lineColor: "#000",
+      textColor: "#000",
+      style: this.getGuidesStyle(type)
+    });
+    hGuidesChangeGuidesHandler = (e) => {
+      this.horizontalGuidelines = e.guides;
+      this.emit("changeGuides", {
+        type: GuidesType.HORIZONTAL,
+        guides: this.horizontalGuidelines
+      });
+    };
+    vGuidesChangeGuidesHandler = (e) => {
+      this.verticalGuidelines = e.guides;
+      this.emit("changeGuides", {
+        type: GuidesType.VERTICAL,
+        guides: this.verticalGuidelines
+      });
+    };
   }
 
   const wrapperClassName = "editor-mask-wrapper";
@@ -859,74 +882,30 @@
     return el;
   };
   class StageMask extends Rule {
+    content = createContent();
+    wrapper;
+    core;
+    page = null;
+    pageScrollParent = null;
+    scrollTop = 0;
+    scrollLeft = 0;
+    width = 0;
+    height = 0;
+    wrapperHeight = 0;
+    wrapperWidth = 0;
+    maxScrollTop = 0;
+    maxScrollLeft = 0;
+    intersectionObserver = null;
+    isMultiSelectStatus = false;
+    mode = Mode.ABSOLUTE;
+    pageResizeObserver = null;
+    wrapperResizeObserver = null;
+    highlightHandler = lodashEs.throttle((event) => {
+      this.emit("highlight", event);
+    }, throttleTime);
     constructor(config) {
       const wrapper = createWrapper();
       super(wrapper);
-      this.content = createContent();
-      this.page = null;
-      this.pageScrollParent = null;
-      this.scrollTop = 0;
-      this.scrollLeft = 0;
-      this.width = 0;
-      this.height = 0;
-      this.wrapperHeight = 0;
-      this.wrapperWidth = 0;
-      this.maxScrollTop = 0;
-      this.maxScrollLeft = 0;
-      this.intersectionObserver = null;
-      this.shiftKeyDown = false;
-      this.mode = Mode.ABSOLUTE;
-      this.pageResizeObserver = null;
-      this.wrapperResizeObserver = null;
-      this.highlightHandler = lodashEs.throttle((event) => {
-        this.emit("highlight", event);
-      }, throttleTime);
-      this.mouseDownHandler = (event) => {
-        this.emit("clearHighlight");
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
-          return;
-        if (!this.shiftKeyDown && event.target.className.indexOf("moveable-area") !== -1) {
-          return;
-        }
-        if (event.target.className.indexOf("moveable-control") !== -1) {
-          return;
-        }
-        this.content.removeEventListener("mousemove", this.highlightHandler);
-        if (this.shiftKeyDown) {
-          this.emit("beforeMultiSelect", event);
-        } else {
-          this.emit("beforeSelect", event);
-          globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-        }
-      };
-      this.mouseUpHandler = () => {
-        globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-        this.content.addEventListener("mousemove", this.highlightHandler);
-        this.emit("select");
-      };
-      this.mouseWheelHandler = (event) => {
-        this.emit("clearHighlight");
-        if (!this.page)
-          throw new Error("page \u672A\u521D\u59CB\u5316");
-        const { deltaY, deltaX } = event;
-        if (this.page.clientHeight < this.wrapperHeight && deltaY)
-          return;
-        if (this.page.clientWidth < this.wrapperWidth && deltaX)
-          return;
-        if (this.maxScrollTop > 0) {
-          this.scrollTop = this.scrollTop + deltaY;
-        }
-        if (this.maxScrollLeft > 0) {
-          this.scrollLeft = this.scrollLeft + deltaX;
-        }
-        this.scroll();
-        this.emit("scroll", event);
-      };
-      this.mouseLeaveHandler = () => {
-        setTimeout(() => this.emit("clearHighlight"), throttleTime);
-      };
       this.wrapper = wrapper;
       this.core = config.core;
       this.content.addEventListener("mousedown", this.mouseDownHandler);
@@ -934,13 +913,13 @@
       this.content.addEventListener("wheel", this.mouseWheelHandler);
       this.content.addEventListener("mousemove", this.highlightHandler);
       this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
-      KeyController__default["default"].global.keydown("shift", (e) => {
+      KeyController__default.default.global.keydown("shift", (e) => {
         e.inputEvent.preventDefault();
-        this.shiftKeyDown = true;
+        this.isMultiSelectStatus = true;
       });
-      KeyController__default["default"].global.keyup("shift", (e) => {
+      KeyController__default.default.global.keyup("shift", (e) => {
         e.inputEvent.preventDefault();
-        this.shiftKeyDown = false;
+        this.isMultiSelectStatus = false;
       });
     }
     setMode(mode) {
@@ -1070,13 +1049,66 @@
       if (this.maxScrollLeft < this.scrollLeft)
         this.scrollLeft = this.maxScrollLeft;
     }
+    mouseDownHandler = (event) => {
+      this.emit("clearHighlight");
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
+        return;
+      if (!this.isMultiSelectStatus && event.target.className.indexOf("moveable-area") !== -1) {
+        return;
+      }
+      if (event.target.className.indexOf("moveable-control") !== -1) {
+        return;
+      }
+      this.content.removeEventListener("mousemove", this.highlightHandler);
+      if (this.isMultiSelectStatus) {
+        this.emit("beforeMultiSelect", event);
+      } else {
+        this.emit("beforeSelect", event);
+      }
+      globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+    };
+    mouseUpHandler = () => {
+      globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
+      this.content.addEventListener("mousemove", this.highlightHandler);
+      if (!this.isMultiSelectStatus) {
+        this.emit("select");
+      }
+    };
+    mouseWheelHandler = (event) => {
+      this.emit("clearHighlight");
+      if (!this.page)
+        throw new Error("page \u672A\u521D\u59CB\u5316");
+      const { deltaY, deltaX } = event;
+      if (this.page.clientHeight < this.wrapperHeight && deltaY)
+        return;
+      if (this.page.clientWidth < this.wrapperWidth && deltaX)
+        return;
+      if (this.maxScrollTop > 0) {
+        this.scrollTop = this.scrollTop + deltaY;
+      }
+      if (this.maxScrollLeft > 0) {
+        this.scrollLeft = this.scrollLeft + deltaX;
+      }
+      this.scroll();
+      this.emit("scroll", event);
+    };
+    mouseLeaveHandler = () => {
+      setTimeout(() => this.emit("clearHighlight"), throttleTime);
+    };
   }
 
   class StageMultiDragResize extends EventEmitter.EventEmitter {
+    core;
+    mask;
+    container;
+    targetList = [];
+    dragElList = [];
+    moveableForMulti;
+    multiMoveableHelper;
     constructor(config) {
       super();
-      this.targetList = [];
-      this.dragElList = [];
       this.core = config.core;
       this.container = config.container;
       this.mask = config.mask;
@@ -1097,20 +1129,10 @@
       });
       this.moveableForMulti?.destroy();
       this.multiMoveableHelper?.clear();
-      this.moveableForMulti = new Moveable__default["default"](this.container, {
-        target: this.dragElList,
-        defaultGroupRotate: 0,
-        defaultGroupOrigin: "50% 50%",
-        draggable: true,
-        resizable: true,
-        throttleDrag: 0,
-        startDragRotate: 0,
-        throttleDragRotate: 0,
-        zoom: 1,
-        origin: true,
-        padding: { left: 0, top: 0, right: 0, bottom: 0 }
-      });
-      this.multiMoveableHelper = MoveableHelper__default["default"].create({
+      this.moveableForMulti = new Moveable__default.default(this.container, this.getOptions({
+        target: this.dragElList
+      }));
+      this.multiMoveableHelper = MoveableHelper__default.default.create({
         useBeforeRender: true,
         useRender: false,
         createAuto: true
@@ -1149,12 +1171,31 @@
         this.update();
       });
     }
+    canSelect(el) {
+      if (el.className.includes(PAGE_CLASS)) {
+        this.core.highlightedDom = void 0;
+        this.core.highlightLayer.clearHighlight();
+        return false;
+      }
+      const currentTargetMode = getMode(el);
+      let selectedDomMode = "";
+      if (this.targetList.length === 0 && this.core.selectedDom) {
+        selectedDomMode = getMode(this.core.selectedDom);
+      } else if (this.targetList.length > 0) {
+        selectedDomMode = getMode(this.targetList[0]);
+      }
+      if (currentTargetMode !== selectedDomMode) {
+        return false;
+      }
+      return true;
+    }
     clearSelectStatus() {
       if (!this.moveableForMulti)
         return;
       this.destroyDragElList();
       this.moveableForMulti.target = null;
       this.moveableForMulti.updateTarget();
+      this.targetList = [];
     }
     destroy() {
       this.moveableForMulti?.destroy();
@@ -1182,49 +1223,39 @@
         });
       });
     }
+    getOptions(options = {}) {
+      let { multiMoveableOptions = {} } = this.core.config;
+      if (typeof multiMoveableOptions === "function") {
+        multiMoveableOptions = multiMoveableOptions(this.core);
+      }
+      return {
+        defaultGroupRotate: 0,
+        defaultGroupOrigin: "50% 50%",
+        draggable: true,
+        resizable: true,
+        throttleDrag: 0,
+        startDragRotate: 0,
+        throttleDragRotate: 0,
+        zoom: 1,
+        origin: true,
+        padding: { left: 0, top: 0, right: 0, bottom: 0 },
+        ...options,
+        ...multiMoveableOptions
+      };
+    }
   }
 
-  var style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n}\n";
+  const style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n";
 
   class StageRender extends EventEmitter.EventEmitter {
+    contentWindow = null;
+    runtime = null;
+    iframe;
+    runtimeUrl;
+    core;
+    render;
     constructor({ core }) {
       super();
-      this.contentWindow = null;
-      this.runtime = null;
-      this.getMagicApi = () => ({
-        onPageElUpdate: (el) => this.emit("page-el-update", el),
-        onRuntimeReady: (runtime) => {
-          this.runtime = runtime;
-          globalThis.runtime = runtime;
-          this.emit("runtime-ready", runtime);
-        }
-      });
-      this.getRuntime = () => {
-        if (this.runtime)
-          return Promise.resolve(this.runtime);
-        return new Promise((resolve) => {
-          const listener = (runtime) => {
-            this.off("runtime-ready", listener);
-            resolve(runtime);
-          };
-          this.on("runtime-ready", listener);
-        });
-      };
-      this.loadHandler = async () => {
-        this.contentWindow = this.iframe?.contentWindow;
-        this.contentWindow.magic = this.getMagicApi();
-        if (this.render) {
-          const el = await this.render(this.core);
-          if (el) {
-            this.iframe?.contentDocument?.body?.appendChild(el);
-          }
-        }
-        this.emit("onload");
-        this.contentWindow.postMessage({
-          tmagicRuntimeReady: true
-        }, "*");
-        utils.injectStyle(this.contentWindow.document, style);
-      };
       this.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";
       this.render = core.config.render;
@@ -1237,20 +1268,39 @@
     `;
       this.iframe.addEventListener("load", this.loadHandler);
     }
+    getMagicApi = () => ({
+      onPageElUpdate: (el) => this.emit("page-el-update", el),
+      onRuntimeReady: (runtime) => {
+        this.runtime = runtime;
+        globalThis.runtime = runtime;
+        this.emit("runtime-ready", runtime);
+      }
+    });
     async mount(el) {
-      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;
-        }
-        el.appendChild(this.iframe);
-      } else {
+      if (!this.iframe) {
         throw Error("mount \u5931\u8D25");
       }
-    }
+      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;
+      }
+      el.appendChild(this.iframe);
+      this.postTmagicRuntimeReady();
+    }
+    getRuntime = () => {
+      if (this.runtime)
+        return Promise.resolve(this.runtime);
+      return new Promise((resolve) => {
+        const listener = (runtime) => {
+          this.off("runtime-ready", listener);
+          resolve(runtime);
+        };
+        this.on("runtime-ready", listener);
+      });
+    };
     destroy() {
       this.iframe?.removeEventListener("load", this.loadHandler);
       this.contentWindow = null;
@@ -1258,13 +1308,48 @@
       this.iframe = void 0;
       this.removeAllListeners();
     }
+    loadHandler = async () => {
+      if (!this.contentWindow?.magic) {
+        this.postTmagicRuntimeReady();
+      }
+      if (!this.contentWindow)
+        return;
+      if (this.render) {
+        const el = await this.render(this.core);
+        if (el) {
+          this.contentWindow.document?.body?.appendChild(el);
+        }
+      }
+      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;
+    selectedDom;
+    selectedDomList = [];
+    highlightedDom;
+    renderer;
+    mask;
+    dr;
+    multiDr;
+    highlightLayer;
+    config;
+    zoom = DEFAULT_ZOOM;
+    containerHighlightClassName;
+    containerHighlightDuration;
+    isContainer;
+    canSelect;
     constructor(config) {
       super();
-      this.selectedDomList = [];
-      this.zoom = DEFAULT_ZOOM;
       this.config = config;
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
@@ -1294,7 +1379,7 @@
         this.dr.setGuidelines(data.type, data.guides);
         this.emit("changeGuides", data);
       }).on("highlight", async (event) => {
-        const el = await this.getElementFromPoint(event, "mousemove");
+        const el = await this.getElementFromPoint(event);
         if (!el)
           return;
         await this.highlight(el);
@@ -1309,9 +1394,6 @@
         const el = await this.getElementFromPoint(event);
         if (!el)
           return;
-        if (el.className.includes(PAGE_CLASS))
-          return;
-        this.clearSelectStatus("select");
         if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
           this.selectedDomList.push(this.selectedDom);
           this.selectedDom = void 0;
@@ -1322,8 +1404,7 @@
         } else {
           this.selectedDomList.push(el);
         }
-        this.multiDr.multiSelect(this.selectedDomList);
-        this.emit("multiSelect", this.selectedDomList);
+        this.multiSelect(this.selectedDomList);
       });
       this.dr.on("update", (data) => {
         setTimeout(() => this.emit("update", data));
@@ -1348,22 +1429,29 @@
       }
       return doc?.elementsFromPoint(x / zoom, y / zoom);
     }
-    async getElementFromPoint(event, type) {
+    async getElementFromPoint(event) {
       const els = this.getElementsFromPoint(event);
       let stopped = false;
       const stop = () => stopped = true;
       for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.canSelect(el, event, stop)) {
+        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
           if (stopped)
             break;
-          if (event.type === type) {
-            return el;
-          }
           return el;
         }
       }
     }
+    async isElCanSelect(el, event, stop) {
+      const canSelectByProp = await this.canSelect(el, event, stop);
+      if (!canSelectByProp)
+        return false;
+      if (this.mask.isMultiSelectStatus) {
+        return this.multiDr.canSelect(el);
+      }
+      return true;
+    }
     async select(idOrEl, event) {
+      this.clearSelectStatus("multiSelect");
       const el = await this.getTargetElement(idOrEl);
       if (el === this.selectedDom)
         return;
@@ -1373,7 +1461,6 @@
         await runtime.beforeSelect(el);
       }
       this.mask.setLayout(el);
-      this.multiDr.destroyDragElList();
       this.dr.select(el, event);
       if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
         this.mask.intersectionObserver?.observe(el);
@@ -1386,6 +1473,12 @@
         }
       }
     }
+    async multiSelect(idOrElList) {
+      this.clearSelectStatus("select");
+      const elList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
+      this.multiDr.multiSelect(elList);
+      this.emit("multiSelect", elList);
+    }
     update(data) {
       const { config } = data;
       return this.renderer?.getRuntime().then((runtime) => {
@@ -1498,7 +1591,8 @@
   exports.ZIndex = ZIndex;
   exports.addSelectedClassName = addSelectedClassName;
   exports.calcValueByFontsize = calcValueByFontsize;
-  exports["default"] = StageCore;
+  exports.default = StageCore;
+  exports.down = down;
   exports.getAbsolutePosition = getAbsolutePosition;
   exports.getMode = getMode;
   exports.getOffset = getOffset;
@@ -1510,6 +1604,7 @@
   exports.isRelative = isRelative;
   exports.isStatic = isStatic;
   exports.removeSelectedClassName = removeSelectedClassName;
+  exports.up = up;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });