@tmagic/stage 1.0.6 → 1.1.0-beta.10

package/dist/tmagic-stage.umd.js

@@ -1,19 +1,22 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('moveable'), require('moveable-helper'), require('lodash-es'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', 'moveable', 'moveable-helper', 'lodash-es', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.Moveable, global.MoveableHelper, global.lodashEs, global.Guides));
-})(this, (function (exports, EventEmitter, Moveable, MoveableHelper, lodashEs, Guides) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('@tmagic/utils'), require('keycon'), require('moveable'), require('moveable-helper'), require('lodash-es'), require('@scena/guides')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'events', '@tmagic/utils', 'keycon', 'moveable', 'moveable-helper', 'lodash-es', '@scena/guides'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.utils, global.KeyController, global.Moveable, global.MoveableHelper, global.lodashEs, global.Guides));
+})(this, (function (exports, EventEmitter, utils, KeyController, Moveable, MoveableHelper, 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 Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
+  const EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+  const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
+  const Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
+  const MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
+  const Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
   const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+  const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
+  const PAGE_CLASS = "magic-ui-page";
   const DEFAULT_ZOOM = 1;
   var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
     GuidesType2["HORIZONTAL"] = "horizontal";
@@ -41,6 +44,18 @@
   })(Mode || {});
   const SELECTED_CLASS = "tmagic-stage-selected-area";
 
+  var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+    ContainerHighlightType2["DEFAULT"] = "default";
+    ContainerHighlightType2["ALT"] = "alt";
+    return ContainerHighlightType2;
+  })(ContainerHighlightType || {});
+  var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+    StageDragStatus2["START"] = "start";
+    StageDragStatus2["ING"] = "ing";
+    StageDragStatus2["END"] = "end";
+    return StageDragStatus2;
+  })(StageDragStatus || {});
+
   const getParents = (el, relative) => {
     let cur = el.parentElement;
     const parents = [];
@@ -66,6 +81,19 @@
       top
     };
   };
+  const getTargetElStyle = (el) => {
+    const offset = getOffset(el);
+    const { transform } = getComputedStyle(el);
+    return `
+    position: absolute;
+    transform: ${transform};
+    left: ${offset.left}px;
+    top: ${offset.top}px;
+    width: ${el.clientWidth}px;
+    height: ${el.clientHeight}px;
+    z-index: ${ZIndex.DRAG_EL};
+  `;
+  };
   const getAbsolutePosition = (el, { top, left }) => {
     const { offsetParent } = el;
     if (offsetParent) {
@@ -77,13 +105,6 @@
     }
     return { left, top };
   };
-  const getHost = (targetUrl) => targetUrl.match(/\/\/([^/]+)/)?.[1];
-  const isSameDomain = (targetUrl = "", source = globalThis.location.host) => {
-    const isHttpUrl = /^(http[s]?:)?\/\//.test(targetUrl);
-    if (!isHttpUrl)
-      return true;
-    return getHost(targetUrl) === source;
-  };
   const isAbsolute = (style) => style.position === "absolute";
   const isRelative = (style) => style.position === "relative";
   const isStatic = (style) => style.position === "static";
@@ -127,19 +148,14 @@
     }
     return null;
   };
-  const createDiv = ({ className, cssText }) => {
-    const el = globalThis.document.createElement("div");
-    el.className = className;
-    el.style.cssText = cssText;
-    return el;
-  };
   const removeSelectedClassName = (doc) => {
     const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
     if (oldEl) {
-      oldEl.classList.remove(SELECTED_CLASS);
-      oldEl.parentNode?.classList.remove(`${SELECTED_CLASS}-parent`);
+      utils.removeClassName(oldEl, SELECTED_CLASS);
+      if (oldEl.parentNode)
+        utils.removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
       doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
-        item.classList.remove(`${SELECTED_CLASS}-parents`);
+        utils.removeClassName(item, `${SELECTED_CLASS}-parents`);
       });
     }
   };
@@ -150,27 +166,101 @@
       item.classList.add(`${SELECTED_CLASS}-parents`);
     });
   };
+  const calcValueByFontsize = (doc, value) => {
+    const { fontSize } = doc.documentElement.style;
+    if (fontSize) {
+      const times = globalThis.parseFloat(fontSize) / 100;
+      return Number((value / times).toFixed(2));
+    }
+    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 = StageDragStatus.END;
+    ghostEl;
+    moveableHelper;
+    isContainerHighlight = false;
     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.dragEl = globalThis.document.createElement("div");
-      this.container.append(this.dragEl);
+      this.mask = config.mask;
+      KeyController__default.default.global.keydown("alt", (e) => {
+        e.inputEvent.preventDefault();
+        this.isContainerHighlight = true;
+      });
+      KeyController__default.default.global.keyup("alt", (e) => {
+        e.inputEvent.preventDefault();
+        const doc = this.core.renderer.contentWindow?.document;
+        if (doc && this.canContainerHighlight()) {
+          utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+        }
+        this.isContainerHighlight = false;
+      });
     }
     select(el, event) {
       const oldTarget = this.target;
       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
@@ -214,11 +304,21 @@
       this.moveableOptions.verticalGuidelines = [];
       this.updateMoveable();
     }
+    clearSelectStatus() {
+      if (!this.moveable)
+        return;
+      this.destroyDragEl();
+      this.moveable.target = null;
+      this.moveable.updateTarget();
+    }
+    destroyDragEl() {
+      this.dragEl?.remove();
+    }
     destroy() {
       this.moveable?.destroy();
       this.destroyGhostEl();
       this.destroyDragEl();
-      this.dragStatus = "end" /* END */;
+      this.dragStatus = StageDragStatus.END;
       this.removeAllListeners();
     }
     init(el) {
@@ -227,7 +327,14 @@
       }
       this.mode = getMode(el);
       this.destroyGhostEl();
-      this.updateDragEl(el);
+      this.destroyDragEl();
+      this.dragEl = globalThis.document.createElement("div");
+      this.container.append(this.dragEl);
+      this.dragEl.style.cssText = getTargetElStyle(el);
+      this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+      if (typeof this.core.config.updateDragEl === "function") {
+        this.core.config.updateDragEl(this.dragEl, el);
+      }
       this.moveableOptions = this.getOptions({
         target: this.dragEl
       });
@@ -238,23 +345,26 @@
       });
       this.elementGuidelines = [];
       if (this.mode === Mode.ABSOLUTE) {
-        const frame = document.createDocumentFragment();
-        for (const node of nodes) {
-          const { width, height } = node.getBoundingClientRect();
-          if (node === this.target)
-            continue;
-          const { left, top } = getOffset(node);
-          const elementGuideline = document.createElement("div");
-          elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
-          this.elementGuidelines.push(elementGuideline);
-          frame.append(elementGuideline);
-        }
-        this.container.append(frame);
+        this.container.append(this.createGuidelineElements(nodes));
+      }
+    }
+    createGuidelineElements(nodes) {
+      const frame = globalThis.document.createDocumentFragment();
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === this.target)
+          continue;
+        const { left, top } = getOffset(node);
+        const elementGuideline = globalThis.document.createElement("div");
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
       }
+      return frame;
     }
     initMoveable() {
       this.moveable?.destroy();
-      this.moveable = new Moveable__default["default"](this.container, {
+      this.moveable = new Moveable__default.default(this.container, {
         ...this.moveableOptions
       });
       this.bindResizeEvent();
@@ -272,7 +382,7 @@
       this.moveable.on("resizeStart", (e) => {
         if (!this.target)
           return;
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onResizeStart(e);
         frame.top = this.target.offsetTop;
         frame.left = this.target.offsetLeft;
@@ -281,7 +391,7 @@
         if (!this.moveable || !this.target || !this.dragEl)
           return;
         const { beforeTranslate } = drag;
-        this.dragStatus = "ing" /* ING */;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onResize(e);
         if (this.mode === Mode.SORTABLE) {
           this.target.style.top = "0px";
@@ -292,7 +402,7 @@
         this.target.style.width = `${width}px`;
         this.target.style.height = `${height}px`;
       }).on("resizeEnd", () => {
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         this.update(true);
       });
     }
@@ -303,10 +413,13 @@
         left: 0,
         top: 0
       };
+      let timeout;
+      const { contentWindow } = this.core.renderer;
+      const doc = contentWindow?.document;
       this.moveable.on("dragStart", (e) => {
         if (!this.target)
           throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onDragStart(e);
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
@@ -316,7 +429,14 @@
       }).on("drag", (e) => {
         if (!this.target || !this.dragEl)
           return;
-        this.dragStatus = "ing" /* ING */;
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        if (this.canContainerHighlight()) {
+          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        }
+        this.dragStatus = StageDragStatus.ING;
         if (this.ghostEl) {
           this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
           return;
@@ -325,16 +445,28 @@
         this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
         this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
       }).on("dragEnd", () => {
-        if (this.dragStatus === "ing" /* ING */) {
-          switch (this.mode) {
-            case Mode.SORTABLE:
-              this.sort();
-              break;
-            default:
-              this.update();
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        let parentEl = null;
+        if (doc && this.canContainerHighlight()) {
+          parentEl = utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+        }
+        if (this.dragStatus === StageDragStatus.ING) {
+          if (parentEl) {
+            this.update(false, parentEl);
+          } else {
+            switch (this.mode) {
+              case Mode.SORTABLE:
+                this.sort();
+                break;
+              default:
+                this.update();
+            }
           }
         }
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         this.destroyGhostEl();
       });
     }
@@ -342,17 +474,17 @@
       if (!this.moveable)
         throw new Error("moveable \u672A\u521D\u59CB\u5316");
       this.moveable.on("rotateStart", (e) => {
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onRotateStart(e);
       }).on("rotate", (e) => {
         if (!this.target || !this.dragEl)
           return;
-        this.dragStatus = "ing" /* ING */;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onRotate(e);
         const frame = this.moveableHelper?.getFrame(e.target);
         this.target.style.transform = frame?.toCSSObject().transform || "";
       }).on("rotateEnd", (e) => {
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit("update", {
           el: this.target,
@@ -366,17 +498,17 @@
       if (!this.moveable)
         throw new Error("moveable \u672A\u521D\u59CB\u5316");
       this.moveable.on("scaleStart", (e) => {
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onScaleStart(e);
       }).on("scale", (e) => {
         if (!this.target || !this.dragEl)
           return;
-        this.dragStatus = "ing" /* ING */;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onScale(e);
         const frame = this.moveableHelper?.getFrame(e.target);
         this.target.style.transform = frame?.toCSSObject().transform || "";
       }).on("scaleEnd", (e) => {
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit("update", {
           el: this.target,
@@ -405,17 +537,32 @@
         });
       }
     }
-    update(isResize = false) {
+    update(isResize = false, parentEl = null) {
       if (!this.target)
         return;
+      const { contentWindow } = this.core.renderer;
+      const doc = contentWindow?.document;
+      if (!doc)
+        return;
       const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
-      const left = this.calcValueByFontsize(offset.left);
-      const top = this.calcValueByFontsize(offset.top);
-      const width = this.calcValueByFontsize(this.target.clientWidth);
-      const height = this.calcValueByFontsize(this.target.clientHeight);
+      let left = calcValueByFontsize(doc, offset.left);
+      let top = calcValueByFontsize(doc, offset.top);
+      const width = calcValueByFontsize(doc, this.target.clientWidth);
+      const height = calcValueByFontsize(doc, this.target.clientHeight);
+      if (parentEl && this.mode === Mode.ABSOLUTE && this.dragEl) {
+        const [translateX, translateY] = this.moveableHelper?.getFrame(this.dragEl).properties.transform.translate.value;
+        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+        left = calcValueByFontsize(doc, this.dragEl.offsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
+        top = calcValueByFontsize(doc, this.dragEl.offsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
+      }
       this.emit("update", {
-        el: this.target,
-        style: isResize ? { left, top, width, height } : { left, top }
+        data: [
+          {
+            el: this.target,
+            style: isResize ? { left, top, width, height } : { left, top }
+          }
+        ],
+        parentEl
       });
     }
     generateGhostEl(el) {
@@ -423,6 +570,7 @@
         this.destroyGhostEl();
       }
       const ghostEl = el.cloneNode(true);
+      this.setGhostElChildrenId(ghostEl);
       const { top, left } = getAbsolutePosition(el, getOffset(el));
       ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
       ghostEl.style.zIndex = ZIndex.GHOST_EL;
@@ -433,30 +581,20 @@
       el.after(ghostEl);
       return ghostEl;
     }
+    setGhostElChildrenId(el) {
+      for (const child of Array.from(el.children)) {
+        if (child.id) {
+          child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+        }
+        if (child.children.length) {
+          this.setGhostElChildrenId(child);
+        }
+      }
+    }
     destroyGhostEl() {
       this.ghostEl?.remove();
       this.ghostEl = void 0;
     }
-    updateDragEl(el) {
-      const offset = getOffset(el);
-      const { transform } = getComputedStyle(el);
-      this.dragEl.style.cssText = `
-      position: absolute;
-      transform: ${transform};
-      left: ${offset.left}px;
-      top: ${offset.top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.DRAG_EL};
-    `;
-      this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
-      if (typeof this.core.config.updateDragEl === "function") {
-        this.core.config.updateDragEl(this.dragEl, el);
-      }
-    }
-    destroyDragEl() {
-      this.dragEl?.remove();
-    }
     getOptions(options = {}) {
       if (!this.target)
         return {};
@@ -507,7 +645,7 @@
         bounds: {
           top: 0,
           left: -1,
-          right: this.container.clientWidth,
+          right: this.container.clientWidth - 1,
           bottom: this.container.clientHeight,
           ...moveableOptions.bounds || {}
         },
@@ -515,64 +653,17 @@
         ...moveableOptions
       };
     }
-    calcValueByFontsize(value) {
-      const { contentWindow } = this.core.renderer;
-      const fontSize = contentWindow?.document.documentElement.style.fontSize;
-      if (fontSize) {
-        const times = globalThis.parseFloat(fontSize) / 100;
-        return (value / times).toFixed(2);
-      }
-      return value;
+    canContainerHighlight() {
+      return this.core.containerHighlightType === ContainerHighlightType.DEFAULT || this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight;
     }
   }
-  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;
@@ -592,6 +683,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") {
@@ -639,6 +731,11 @@
   }
 
   class StageHighlight extends EventEmitter.EventEmitter {
+    core;
+    container;
+    target;
+    moveable;
+    calibrationTarget;
     constructor(config) {
       super();
       this.core = config.core;
@@ -655,11 +752,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() {
@@ -675,42 +772,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);
@@ -782,18 +852,45 @@
       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";
   const throttleTime = 100;
   const hideScrollbar = () => {
-    const style = globalThis.document.createElement("style");
-    style.innerHTML = `
-    .${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }
-  `;
-    globalThis.document.head.appendChild(style);
+    utils.injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
   };
-  const createContent = () => createDiv({
+  const createContent = () => utils.createDiv({
     className: "editor-mask",
     cssText: `
     position: absolute;
@@ -803,7 +900,7 @@
   `
   });
   const createWrapper = () => {
-    const el = createDiv({
+    const el = utils.createDiv({
       className: wrapperClassName,
       cssText: `
       position: absolute;
@@ -819,66 +916,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.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 (event.target.className.indexOf("moveable-control") !== -1) {
-          return;
-        }
-        this.content.removeEventListener("mousemove", this.highlightHandler);
-        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);
@@ -886,6 +947,16 @@
       this.content.addEventListener("wheel", this.mouseWheelHandler);
       this.content.addEventListener("mousemove", this.highlightHandler);
       this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+      const ctrl = isMac ? "meta" : "ctrl";
+      KeyController__default.default.global.keydown(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        this.isMultiSelectStatus = true;
+      });
+      KeyController__default.default.global.keyup(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        this.isMultiSelectStatus = false;
+      });
     }
     setMode(mode) {
       this.mode = mode;
@@ -1014,51 +1085,242 @@
       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 StageRender extends EventEmitter.EventEmitter {
-    constructor({ core }) {
+  class StageMultiDragResize extends EventEmitter.EventEmitter {
+    core;
+    mask;
+    container;
+    targetList = [];
+    dragElList = [];
+    moveableForMulti;
+    dragStatus = StageDragStatus.END;
+    multiMoveableHelper;
+    constructor(config) {
       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.core = config.core;
+      this.container = config.container;
+      this.mask = config.mask;
+    }
+    multiSelect(els) {
+      this.targetList = els;
+      this.core.dr.destroyDragEl();
+      this.destroyDragElList();
+      this.dragElList = els.map((elItem) => {
+        const dragElDiv = globalThis.document.createElement("div");
+        this.container.append(dragElDiv);
+        dragElDiv.style.cssText = getTargetElStyle(elItem);
+        dragElDiv.id = `${DRAG_EL_ID_PREFIX}${elItem.id}`;
+        if (typeof this.core.config.updateDragEl === "function") {
+          this.core.config.updateDragEl(dragElDiv, elItem);
         }
+        return dragElDiv;
       });
-      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.moveableForMulti?.destroy();
+      this.multiMoveableHelper?.clear();
+      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
+      });
+      const frames = [];
+      this.moveableForMulti.on("dragGroupStart", (params) => {
+        const { events } = params;
+        this.multiMoveableHelper?.onDragGroupStart(params);
+        events.forEach((ev) => {
+          const matchEventTarget = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+          if (!matchEventTarget)
+            return;
+          frames.push({
+            left: matchEventTarget.offsetLeft,
+            top: matchEventTarget.offsetTop,
+            id: matchEventTarget.id
+          });
         });
-      };
-      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.dragStatus = StageDragStatus.START;
+      }).on("dragGroup", (params) => {
+        const { events } = params;
+        events.forEach((ev) => {
+          const frameSnapShot = frames.find((frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+          if (!frameSnapShot)
+            return;
+          const targeEl = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+          if (!targeEl)
+            return;
+          const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+          if (!isParentIncluded) {
+            targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0]}px`;
+            targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1]}px`;
           }
+        });
+        this.multiMoveableHelper?.onDragGroup(params);
+        this.dragStatus = StageDragStatus.ING;
+      }).on("dragGroupEnd", () => {
+        this.update();
+        this.dragStatus = StageDragStatus.END;
+      }).on("clickGroup", (params) => {
+        const { inputTarget, targets } = params;
+        if (!this.mask.isMultiSelectStatus && targets.length > 1 && targets.includes(inputTarget)) {
+          this.emit("select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""));
         }
-        this.emit("onload");
-        this.contentWindow.postMessage({
-          tmagicRuntimeReady: true
-        }, "*");
+      });
+    }
+    canSelect(el, stop) {
+      if (el.className.includes(PAGE_CLASS)) {
+        this.core.highlightedDom = void 0;
+        this.core.highlightLayer.clearHighlight();
+        stop();
+        return false;
+      }
+      const currentTargetMode = getMode(el);
+      let selectedDomMode = "";
+      if (this.core.selectedDom?.className.includes(PAGE_CLASS)) {
+        return true;
+      }
+      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();
+      this.destroyDragElList();
+    }
+    destroyDragElList() {
+      this.dragElList.forEach((dragElItem) => dragElItem?.remove());
+    }
+    update(isResize = false) {
+      if (this.targetList.length === 0)
+        return;
+      const { contentWindow } = this.core.renderer;
+      const doc = contentWindow?.document;
+      if (!doc)
+        return;
+      this.emit("update", {
+        data: this.targetList.map((targetItem) => {
+          const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
+          const left = calcValueByFontsize(doc, offset.left);
+          const top = calcValueByFontsize(doc, offset.top);
+          const width = calcValueByFontsize(doc, targetItem.clientWidth);
+          const height = calcValueByFontsize(doc, targetItem.clientHeight);
+          return {
+            el: targetItem,
+            style: isResize ? { left, top, width, height } : { left, top }
+          };
+        }),
+        parentEl: null
+      });
+    }
+    getOptions(options = {}) {
+      let { multiMoveableOptions = {} } = this.core.config;
+      if (typeof multiMoveableOptions === "function") {
+        multiMoveableOptions = multiMoveableOptions(this.core);
+      }
+      return {
+        defaultGroupRotate: 0,
+        defaultGroupOrigin: "50% 50%",
+        draggable: true,
+        resizable: false,
+        throttleDrag: 0,
+        startDragRotate: 0,
+        throttleDragRotate: 0,
+        zoom: 1,
+        origin: true,
+        padding: { left: 0, top: 0, right: 0, bottom: 0 },
+        snappable: true,
+        bounds: {
+          top: 0,
+          left: -1,
+          right: this.container.clientWidth - 1,
+          bottom: this.container.clientHeight,
+          ...multiMoveableOptions.bounds || {}
+        },
+        ...options,
+        ...multiMoveableOptions
       };
+    }
+  }
+
+  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.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";
       this.render = core.config.render;
       this.iframe = globalThis.document.createElement("iframe");
-      this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
+      this.iframe.src = utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
       this.iframe.style.cssText = `
       border: 0;
       width: 100%;
@@ -1066,20 +1328,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 (!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;
-        }
-        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;
@@ -1087,18 +1368,60 @@
       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;
+    containerHighlightType;
+    isContainer;
+    canSelect;
     constructor(config) {
       super();
-      this.zoom = DEFAULT_ZOOM;
       this.config = config;
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
+      this.isContainer = config.isContainer;
+      this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
+      this.containerHighlightDuration = config.containerHighlightDuration || 800;
+      this.containerHighlightType = config.containerHighlightType;
       this.renderer = new StageRender({ core: this });
       this.mask = new StageMask({ core: this });
-      this.dr = new StageDragResize({ core: this, container: this.mask.content });
+      this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
+      this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
       this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
       this.renderer.on("runtime-ready", (runtime) => {
         this.emit("runtime-ready", runtime);
@@ -1106,31 +1429,61 @@
       this.renderer.on("page-el-update", (el) => {
         this.mask?.observe(el);
       });
-      this.mask.on("beforeSelect", (event) => {
-        this.setElementFromPoint(event);
+      this.mask.on("beforeSelect", async (event) => {
+        this.clearSelectStatus("multiSelect");
+        const el = await this.getElementFromPoint(event);
+        if (!el)
+          return;
+        this.select(el, event);
       }).on("select", () => {
         this.emit("select", this.selectedDom);
       }).on("changeGuides", (data) => {
         this.dr.setGuidelines(data.type, data.guides);
         this.emit("changeGuides", data);
       }).on("highlight", async (event) => {
-        await this.setElementFromPoint(event);
+        const el = await this.getElementFromPoint(event);
+        if (!el)
+          return;
+        if (this.multiDr.dragStatus === StageDragStatus.ING)
+          return;
+        await this.highlight(el);
         if (this.highlightedDom === this.selectedDom) {
           this.highlightLayer.clearHighlight();
           return;
         }
-        this.highlightLayer.highlight(this.highlightedDom);
         this.emit("highlight", this.highlightedDom);
       }).on("clearHighlight", async () => {
         this.highlightLayer.clearHighlight();
+      }).on("beforeMultiSelect", async (event) => {
+        const el = await this.getElementFromPoint(event);
+        if (!el)
+          return;
+        if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
+          this.selectedDomList.push(this.selectedDom);
+          this.selectedDom = void 0;
+        }
+        const existIndex = this.selectedDomList.findIndex((selectedDom) => selectedDom.id === el.id);
+        if (existIndex !== -1) {
+          this.selectedDomList.splice(existIndex, 1);
+        } else {
+          this.selectedDomList.push(el);
+        }
+        this.multiSelect(this.selectedDomList);
       });
       this.dr.on("update", (data) => {
         setTimeout(() => this.emit("update", data));
       }).on("sort", (data) => {
         setTimeout(() => this.emit("sort", data));
       });
+      this.multiDr.on("update", (data) => {
+        setTimeout(() => this.emit("update", data));
+      }).on("select", async (id) => {
+        const el = await this.getTargetElement(id);
+        this.select(el);
+        setTimeout(() => this.emit("select", el));
+      });
     }
-    async setElementFromPoint(event) {
+    getElementsFromPoint(event) {
       const { renderer, zoom } = this;
       const doc = renderer.contentWindow?.document;
       let x = event.clientX;
@@ -1142,23 +1495,31 @@
           y = y - rect.top;
         }
       }
-      const els = doc?.elementsFromPoint(x / zoom, y / zoom);
+      return doc?.elementsFromPoint(x / zoom, y / zoom);
+    }
+    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 === "mousemove") {
-            this.highlight(el);
-            break;
-          }
-          this.select(el, event);
-          break;
+          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, stop);
+      }
+      return true;
+    }
     async select(idOrEl, event) {
+      this.clearSelectStatus("multiSelect");
       const el = await this.getTargetElement(idOrEl);
       if (el === this.selectedDom)
         return;
@@ -1180,6 +1541,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) => {
@@ -1202,7 +1569,7 @@
         this.highlightLayer.clearHighlight();
         return;
       }
-      if (el === this.highlightedDom)
+      if (el === this.highlightedDom || !el)
         return;
       this.highlightLayer.highlight(el);
       this.highlightedDom = el;
@@ -1219,6 +1586,14 @@
     setZoom(zoom = DEFAULT_ZOOM) {
       this.zoom = zoom;
     }
+    clearSelectStatus(selectType) {
+      if (selectType === "multiSelect") {
+        this.multiDr.clearSelectStatus();
+        this.selectedDomList = [];
+      } else {
+        this.dr.clearSelectStatus();
+      }
+    }
     async mount(el) {
       this.container = el;
       const { mask, renderer } = this;
@@ -1230,6 +1605,24 @@
       this.mask.clearGuides();
       this.dr.clearGuides();
     }
+    async addContainerHighlightClassName(event, exclude) {
+      const els = this.getElementsFromPoint(event);
+      const { renderer } = this;
+      const doc = renderer.contentWindow?.document;
+      if (!doc)
+        return;
+      for (const el of els) {
+        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !exclude.includes(el)) {
+          utils.addClassName(el, doc, this.containerHighlightClassName);
+          break;
+        }
+      }
+    }
+    getAddContainerHighlightClassNameTimeout(event, exclude = []) {
+      return globalThis.setTimeout(() => {
+        this.addContainerHighlightClassName(event, exclude);
+      }, this.containerHighlightDuration);
+    }
     destroy() {
       const { mask, renderer, dr, highlightLayer } = this;
       renderer.destroy();
@@ -1250,6 +1643,8 @@
     }
   }
 
+  exports.CONTAINER_HIGHLIGHT_CLASS = CONTAINER_HIGHLIGHT_CLASS;
+  exports.ContainerHighlightType = ContainerHighlightType;
   exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
   exports.DRAG_EL_ID_PREFIX = DRAG_EL_ID_PREFIX;
   exports.GHOST_EL_ID_PREFIX = GHOST_EL_ID_PREFIX;
@@ -1257,12 +1652,29 @@
   exports.HIGHLIGHT_EL_ID_PREFIX = HIGHLIGHT_EL_ID_PREFIX;
   exports.Mode = Mode;
   exports.MouseButton = MouseButton;
+  exports.PAGE_CLASS = PAGE_CLASS;
   exports.SELECTED_CLASS = SELECTED_CLASS;
   exports.StageDragResize = StageDragResize;
+  exports.StageDragStatus = StageDragStatus;
   exports.StageMask = StageMask;
   exports.StageRender = StageRender;
   exports.ZIndex = ZIndex;
-  exports["default"] = StageCore;
+  exports.addSelectedClassName = addSelectedClassName;
+  exports.calcValueByFontsize = calcValueByFontsize;
+  exports.default = StageCore;
+  exports.down = down;
+  exports.getAbsolutePosition = getAbsolutePosition;
+  exports.getMode = getMode;
+  exports.getOffset = getOffset;
+  exports.getScrollParent = getScrollParent;
+  exports.getTargetElStyle = getTargetElStyle;
+  exports.isAbsolute = isAbsolute;
+  exports.isFixed = isFixed;
+  exports.isFixedParent = isFixedParent;
+  exports.isRelative = isRelative;
+  exports.isStatic = isStatic;
+  exports.removeSelectedClassName = removeSelectedClassName;
+  exports.up = up;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });