@tmagic/stage 1.1.0-beta.1 → 1.1.0-beta.12

package/dist/{tmagic-stage.es.js → tmagic-stage.mjs}

@@ -1,7 +1,8 @@
 import EventEmitter$1, { EventEmitter } from 'events';
+import { removeClassName, removeClassNameByClassName, createDiv, injectStyle, isSameDomain, getHost, addClassName } from '@tmagic/utils';
+import KeyController from 'keycon';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
-import { removeClassName, addClassName, removeClassNameByClassName, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import { throttle } from 'lodash-es';
 import Guides from '@scena/guides';
 
@@ -9,6 +10,7 @@ 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";
@@ -36,6 +38,18 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
 })(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 = [];
@@ -61,6 +75,19 @@ const getOffset = (el) => {
     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) {
@@ -141,20 +168,86 @@ const calcValueByFontsize = (doc, value) => {
   }
   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 {
+  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.global.keydown("alt", (e) => {
+      e.inputEvent.preventDefault();
+      this.isContainerHighlight = true;
+    });
+    KeyController.global.keyup("alt", (e) => {
+      e.inputEvent.preventDefault();
+      const doc = this.core.renderer.contentWindow?.document;
+      if (doc && this.canContainerHighlight()) {
+        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+      }
+      this.isContainerHighlight = false;
+    });
   }
   select(el, event) {
     const oldTarget = this.target;
@@ -205,11 +298,21 @@ class StageDragResize extends EventEmitter {
     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) {
@@ -218,7 +321,14 @@ class StageDragResize extends EventEmitter {
     }
     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
     });
@@ -266,7 +376,7 @@ class StageDragResize extends EventEmitter {
     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;
@@ -275,7 +385,7 @@ class StageDragResize extends EventEmitter {
       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";
@@ -286,7 +396,7 @@ class StageDragResize extends EventEmitter {
       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,7 +413,7 @@ class StageDragResize extends EventEmitter {
     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);
@@ -317,16 +427,10 @@ class StageDragResize extends EventEmitter {
         globalThis.clearTimeout(timeout);
         timeout = void 0;
       }
-      timeout = globalThis.setTimeout(async () => {
-        const els = this.core.getElementsFromPoint(e.inputEvent);
-        for (const el of els) {
-          if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && el !== this.target && await this.core.isContainer(el)) {
-            addClassName(el, doc, this.core.containerHighlightClassName);
-            break;
-          }
-        }
-      }, this.core.containerHighlightDuration);
-      this.dragStatus = "ing" /* ING */;
+      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;
@@ -340,10 +444,10 @@ class StageDragResize extends EventEmitter {
         timeout = void 0;
       }
       let parentEl = null;
-      if (doc) {
+      if (doc && this.canContainerHighlight()) {
         parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
       }
-      if (this.dragStatus === "ing" /* ING */) {
+      if (this.dragStatus === StageDragStatus.ING) {
         if (parentEl) {
           this.update(false, parentEl);
         } else {
@@ -356,7 +460,7 @@ class StageDragResize extends EventEmitter {
           }
         }
       }
-      this.dragStatus = "end" /* END */;
+      this.dragStatus = StageDragStatus.END;
       this.destroyGhostEl();
     });
   }
@@ -364,17 +468,17 @@ class StageDragResize extends EventEmitter {
     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,
@@ -388,17 +492,17 @@ class StageDragResize extends EventEmitter {
     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,
@@ -446,9 +550,13 @@ class StageDragResize extends EventEmitter {
       top = calcValueByFontsize(doc, this.dragEl.offsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
     }
     this.emit("update", {
-      el: this.target,
-      parentEl,
-      style: isResize ? { left, top, width, height } : { left, top }
+      data: [
+        {
+          el: this.target,
+          style: isResize ? { left, top, width, height } : { left, top }
+        }
+      ],
+      parentEl
     });
   }
   generateGhostEl(el) {
@@ -456,6 +564,7 @@ class StageDragResize extends EventEmitter {
       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;
@@ -466,30 +575,20 @@ class StageDragResize extends EventEmitter {
     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 {};
@@ -540,7 +639,7 @@ class StageDragResize extends EventEmitter {
       bounds: {
         top: 0,
         left: -1,
-        right: this.container.clientWidth,
+        right: this.container.clientWidth - 1,
         bottom: this.container.clientHeight,
         ...moveableOptions.bounds || {}
       },
@@ -548,55 +647,17 @@ class StageDragResize extends EventEmitter {
       ...moveableOptions
     };
   }
-}
-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;
+  canContainerHighlight() {
+    return this.core.containerHighlightType === ContainerHighlightType.DEFAULT || this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight;
   }
-  return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
-  };
-};
+}
 
 class TargetCalibrate extends EventEmitter {
+  parent;
+  mask;
+  dr;
+  core;
+  operationEl;
   constructor(config) {
     super();
     this.parent = config.parent;
@@ -616,6 +677,7 @@ class TargetCalibrate extends EventEmitter {
       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") {
@@ -663,6 +725,11 @@ class TargetCalibrate extends EventEmitter {
 }
 
 class StageHighlight extends EventEmitter {
+  core;
+  container;
+  target;
+  moveable;
+  calibrationTarget;
   constructor(config) {
     super();
     this.core = config.core;
@@ -683,7 +750,7 @@ class StageHighlight extends EventEmitter {
       target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
       origin: false,
       rootContainer: this.core.container,
-      zoom: 1
+      zoom: 2
     });
   }
   clearHighlight() {
@@ -700,41 +767,14 @@ class StageHighlight extends EventEmitter {
 }
 
 class Rule extends EventEmitter$1 {
+  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(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);
@@ -806,6 +846,37 @@ class Rule extends EventEmitter$1 {
     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(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";
@@ -839,66 +910,30 @@ const createWrapper = () => {
   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 = 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 = 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);
@@ -906,6 +941,16 @@ class StageMask extends Rule {
     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.global.keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = true;
+    });
+    KeyController.global.keyup(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = false;
+    });
   }
   setMode(mode) {
     this.mode = mode;
@@ -1034,49 +1079,237 @@ class StageMask extends Rule {
     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);
+  };
 }
 
-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";
-
-class StageRender extends EventEmitter {
-  constructor({ core }) {
+class StageMultiDragResize extends 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(this.container, this.getOptions({
+      target: this.dragElList
+    }));
+    this.multiMoveableHelper = MoveableHelper.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
-      }, "*");
-      injectStyle(this.contentWindow.document, style);
+    });
+  }
+  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 {
+  contentWindow = null;
+  runtime = null;
+  iframe;
+  runtimeUrl;
+  core;
+  render;
+  constructor({ core }) {
+    super();
     this.core = core;
     this.runtimeUrl = core.config.runtimeUrl || "";
     this.render = core.config.render;
@@ -1089,20 +1322,39 @@ class StageRender extends EventEmitter {
     `;
     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 (!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);
+    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;
@@ -1110,21 +1362,60 @@ class StageRender extends EventEmitter {
     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");
+    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 {
+  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;
-    this.containerHighlightDuration = config.containerHighlightDuration;
+    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);
@@ -1132,29 +1423,59 @@ class StageCore extends EventEmitter {
     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));
+    });
   }
   getElementsFromPoint(event) {
     const { renderer, zoom } = this;
@@ -1170,24 +1491,29 @@ class StageCore extends EventEmitter {
     }
     return doc?.elementsFromPoint(x / zoom, y / zoom);
   }
-  async setElementFromPoint(event) {
+  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;
@@ -1209,6 +1535,12 @@ class StageCore extends EventEmitter {
       }
     }
   }
+  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) => {
@@ -1231,7 +1563,7 @@ class StageCore extends EventEmitter {
       this.highlightLayer.clearHighlight();
       return;
     }
-    if (el === this.highlightedDom)
+    if (el === this.highlightedDom || !el)
       return;
     this.highlightLayer.highlight(el);
     this.highlightedDom = el;
@@ -1248,6 +1580,14 @@ class StageCore extends EventEmitter {
   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;
@@ -1259,6 +1599,24 @@ class StageCore extends EventEmitter {
     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)) {
+        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();
@@ -1279,5 +1637,5 @@ class StageCore extends EventEmitter {
   }
 }
 
-export { CONTAINER_HIGHLIGHT_CLASS, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, SELECTED_CLASS, StageDragResize, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, getAbsolutePosition, getMode, getOffset, getScrollParent, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName };
-//# sourceMappingURL=tmagic-stage.es.js.map
+export { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName, up };
+//# sourceMappingURL=tmagic-stage.mjs.map