@tmagic/stage 1.2.0-beta.17 → 1.2.0-beta.19

package/dist/tmagic-stage.mjs

@@ -1,15 +1,16 @@
-import EventEmitter$1, { EventEmitter } from 'events';
-import { removeClassName, removeClassNameByClassName, createDiv, injectStyle, isSameDomain, getHost, addClassName } from '@tmagic/utils';
+import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
 import KeyController from 'keycon';
+import { merge, throttle } from 'lodash-es';
+import { Env } from '@tmagic/core';
+import { removeClassName, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
-import { throttle } from 'lodash-es';
 import Guides from '@scena/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 CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
 const PAGE_CLASS = "magic-ui-page";
 const DEFAULT_ZOOM = 1;
 var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
@@ -39,89 +40,6 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
 })(Mode || {});
 const SELECTED_CLASS = "tmagic-stage-selected-area";
 
-const selectParentAbles = (dr) => ({
-  name: "selectParent",
-  props: {},
-  events: {},
-  render(moveable, React) {
-    const rect = moveable.getRect();
-    const { pos2 } = moveable.state;
-    const editableViewer = moveable.useCSS(
-      "div",
-      `
-      {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        will-change: transform;
-        transform-origin: 0px 0px;
-        display: flex;
-      }
-      .moveable-button {
-        width: 20px;
-        height: 20px;
-        background: #4af;
-        border-radius: 4px;
-        appearance: none;
-        border: 0;
-        color: white;
-        font-size: 12px;
-        font-weight: bold;
-      }
-      `
-    );
-    return React.createElement(
-      editableViewer,
-      {
-        className: "moveable-editable",
-        style: {
-          transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`
-        }
-      },
-      React.createElement(
-        "button",
-        {
-          className: "moveable-button",
-          title: "\u9009\u4E2D\u7236\u7EC4\u4EF6",
-          onClick: () => {
-            dr.emit("select-parent");
-          }
-        },
-        React.createElement(
-          "svg",
-          {
-            width: "1em",
-            height: "1em",
-            viewBox: "0 0 16 16",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            style: {
-              transform: "rotate(90deg)"
-            }
-          },
-          React.createElement("path", {
-            d: "M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z",
-            fill: "currentColor",
-            fillOpacity: "0.9"
-          })
-        )
-      )
-    );
-  }
-});
-
-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 = [];
@@ -132,9 +50,10 @@ const getParents = (el, relative) => {
   return parents;
 };
 const getOffset = (el) => {
-  const { offsetParent } = el;
-  const left = el.offsetLeft;
-  const top = el.offsetTop;
+  const htmlEl = el;
+  const { offsetParent } = htmlEl;
+  const left = htmlEl.offsetLeft || 0;
+  const top = htmlEl.offsetTop || 0;
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent);
     return {
@@ -147,7 +66,7 @@ const getOffset = (el) => {
     top
   };
 };
-const getTargetElStyle = (el) => {
+const getTargetElStyle = (el, zIndex) => {
   const offset = getOffset(el);
   const { transform } = getComputedStyle(el);
   return `
@@ -157,7 +76,7 @@ const getTargetElStyle = (el) => {
     top: ${offset.top}px;
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
-    z-index: ${ZIndex.DRAG_EL};
+    ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
   `;
 };
 const getAbsolutePosition = (el, { top, left }) => {
@@ -294,251 +213,665 @@ const up = (deltaTop, target) => {
 };
 const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
 
-class StageDragResize extends EventEmitter {
-  core;
-  mask;
+class TargetShadow {
+  el;
+  els = [];
+  idPrefix = "target_calibrate_";
   container;
-  target;
-  dragEl;
-  moveable;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
-  elementGuidelines = [];
-  mode = Mode.ABSOLUTE;
-  moveableOptions = {};
-  dragStatus = StageDragStatus.END;
-  ghostEl;
-  moveableHelper;
-  isContainerHighlight = false;
+  scrollLeft = 0;
+  scrollTop = 0;
+  zIndex;
+  updateDragEl;
   constructor(config) {
-    super();
-    this.core = config.core;
     this.container = config.container;
-    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;
-    });
+    if (config.updateDragEl) {
+      this.updateDragEl = config.updateDragEl;
+    }
+    if (typeof config.zIndex !== "undefined") {
+      this.zIndex = config.zIndex;
+    }
+    if (config.idPrefix) {
+      this.idPrefix = config.idPrefix;
+    }
+    this.container.addEventListener("customScroll", this.scrollHandler);
   }
-  select(el, event) {
-    const oldTarget = this.target;
-    this.target = el;
-    if (!this.dragEl) {
-      this.dragEl = globalThis.document.createElement("div");
-      this.container.append(this.dragEl);
-    }
-    if (!this.moveable || this.target !== oldTarget) {
-      this.init(el);
-      this.moveableHelper = MoveableHelper.create({
-        useBeforeRender: true,
-        useRender: false,
-        createAuto: true
+  update(target) {
+    this.el = this.updateEl(target, this.el);
+    return this.el;
+  }
+  updateGroup(targetGroup) {
+    if (this.els.length > targetGroup.length) {
+      this.els.slice(targetGroup.length - 1).forEach((el) => {
+        el.remove();
       });
-      this.initMoveable();
-    } else {
-      this.updateMoveable();
-    }
-    if (event) {
-      this.moveable?.dragStart(event);
     }
+    this.els = targetGroup.map((target, index) => this.updateEl(target, this.els[index]));
+    return this.els;
   }
-  updateMoveable(el = this.target) {
-    if (!this.moveable)
-      throw new Error("\u672A\u521D\u59CB\u5316moveable");
-    if (!el)
-      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
-    this.target = el;
-    this.init(el);
-    Object.entries(this.moveableOptions).forEach(([key, value]) => {
-      this.moveable[key] = value;
+  destroyEl() {
+    this.el?.remove();
+    this.el = void 0;
+  }
+  destroyEls() {
+    this.els.forEach((el) => {
+      el.remove();
     });
-    this.moveable.updateTarget();
+    this.els = [];
   }
-  setGuidelines(type, guidelines) {
-    if (type === GuidesType.HORIZONTAL) {
-      this.horizontalGuidelines = guidelines;
-      this.moveableOptions.horizontalGuidelines = guidelines;
-    } else if (type === GuidesType.VERTICAL) {
-      this.verticalGuidelines = guidelines;
-      this.moveableOptions.verticalGuidelines = guidelines;
+  destroy() {
+    this.container.removeEventListener("customScroll", this.scrollHandler);
+    this.destroyEl();
+    this.destroyEls();
+  }
+  updateEl(target, src) {
+    const el = src || globalThis.document.createElement("div");
+    el.id = `${this.idPrefix}${target.id}`;
+    el.style.cssText = getTargetElStyle(target, this.zIndex);
+    if (typeof this.updateDragEl === "function") {
+      this.updateDragEl(el, target);
     }
-    if (this.moveable) {
-      this.updateMoveable();
+    const isFixed = isFixedParent(target);
+    const mode = this.container.dataset.mode || Mode.ABSOLUTE;
+    if (isFixed && mode !== Mode.FIXED) {
+      el.style.transform = `translate3d(${this.scrollLeft}px, ${this.scrollTop}px, 0)`;
+    } else if (!isFixed && mode === Mode.FIXED) {
+      el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
     }
+    if (!globalThis.document.getElementById(el.id)) {
+      this.container.append(el);
+    }
+    return el;
   }
-  clearGuides() {
-    this.horizontalGuidelines = [];
-    this.verticalGuidelines = [];
-    this.moveableOptions.horizontalGuidelines = [];
-    this.moveableOptions.verticalGuidelines = [];
-    this.updateMoveable();
-  }
-  clearSelectStatus() {
-    if (!this.moveable)
-      return;
-    this.destroyDragEl();
-    this.dragEl = void 0;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
-  }
-  destroyDragEl() {
-    this.dragEl?.remove();
+  scrollHandler = (e) => {
+    this.scrollLeft = e.detail.scrollLeft;
+    this.scrollTop = e.detail.scrollTop;
+  };
+}
+
+class DragResizeHelper {
+  targetShadow;
+  target;
+  targetList = [];
+  moveableHelper;
+  ghostEl;
+  frameSnapShot = {
+    left: 0,
+    top: 0
+  };
+  framesSnapShot = [];
+  mode = Mode.ABSOLUTE;
+  constructor(config) {
+    this.moveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true
+    });
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.DRAG_EL,
+      idPrefix: DRAG_EL_ID_PREFIX
+    });
   }
   destroy() {
-    this.moveable?.destroy();
+    this.targetShadow.destroy();
     this.destroyGhostEl();
-    this.destroyDragEl();
-    this.dragStatus = StageDragStatus.END;
-    this.removeAllListeners();
+    this.moveableHelper.clear();
   }
-  init(el) {
-    if (/(auto|scroll)/.test(el.style.overflow)) {
-      el.style.overflow = "hidden";
-    }
-    this.mode = getMode(el);
+  destroyShadowEl() {
+    this.targetShadow.destroyEl();
+  }
+  getShadowEl() {
+    return this.targetShadow.el;
+  }
+  updateShadowEl(el) {
     this.destroyGhostEl();
-    if (!this.dragEl) {
-      return;
-    }
-    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.target = el;
+    this.targetShadow.update(el);
+  }
+  setMode(mode) {
+    this.mode = mode;
+  }
+  onResizeStart(e) {
+    this.moveableHelper.onResizeStart(e);
+    this.frameSnapShot.top = this.target.offsetTop;
+    this.frameSnapShot.left = this.target.offsetLeft;
+  }
+  onResize(e) {
+    const { width, height, drag } = e;
+    const { beforeTranslate } = drag;
+    if (this.mode === Mode.SORTABLE) {
+      this.target.style.top = "0px";
+      if (this.targetShadow.el) {
+        this.targetShadow.el.style.width = `${width}px`;
+        this.targetShadow.el.style.height = `${height}px`;
+      }
+    } else {
+      this.moveableHelper.onResize(e);
+      this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0]}px`;
+      this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1]}px`;
     }
-    this.moveableOptions = this.getOptions({
-      target: this.dragEl
-    });
+    this.target.style.width = `${width}px`;
+    this.target.style.height = `${height}px`;
   }
-  setElementGuidelines(nodes) {
-    this.elementGuidelines.forEach((node) => {
-      node.remove();
-    });
-    this.elementGuidelines = [];
-    if (this.mode === Mode.ABSOLUTE) {
-      this.container.append(this.createGuidelineElements(nodes));
+  onDragStart(e) {
+    this.moveableHelper.onDragStart(e);
+    if (this.mode === Mode.SORTABLE) {
+      this.ghostEl = this.generateGhostEl(this.target);
     }
+    this.frameSnapShot.top = this.target.offsetTop;
+    this.frameSnapShot.left = this.target.offsetLeft;
   }
-  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);
+  onDrag(e) {
+    if (this.ghostEl) {
+      this.ghostEl.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
+      return;
     }
-    return frame;
+    this.moveableHelper.onDrag(e);
+    this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0]}px`;
+    this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
   }
-  initMoveable() {
-    this.moveable?.destroy();
-    this.moveable = new Moveable(this.container, {
-      ...this.moveableOptions
-    });
-    this.bindResizeEvent();
-    this.bindDragEvent();
-    this.bindRotateEvent();
-    this.bindScaleEvent();
+  onRotateStart(e) {
+    this.moveableHelper.onRotateStart(e);
   }
-  bindResizeEvent() {
-    if (!this.moveable)
-      throw new Error("moveable \u672A\u521D\u59CB\u5316");
-    const frame = {
-      left: 0,
-      top: 0
-    };
-    this.moveable.on("resizeStart", (e) => {
-      if (!this.target)
+  onRotate(e) {
+    this.moveableHelper.onRotate(e);
+    const frame = this.moveableHelper.getFrame(e.target);
+    this.target.style.transform = frame?.toCSSObject().transform || "";
+  }
+  onScaleStart(e) {
+    this.moveableHelper.onScaleStart(e);
+  }
+  onScale(e) {
+    this.moveableHelper.onScale(e);
+    const frame = this.moveableHelper.getFrame(e.target);
+    this.target.style.transform = frame?.toCSSObject().transform || "";
+  }
+  getGhostEl() {
+    return this.ghostEl;
+  }
+  destroyGhostEl() {
+    this.ghostEl?.remove();
+    this.ghostEl = void 0;
+  }
+  clear() {
+    this.moveableHelper.clear();
+  }
+  getFrame(el) {
+    return this.moveableHelper.getFrame(el);
+  }
+  getShadowEls() {
+    return this.targetShadow.els;
+  }
+  updateGroup(els) {
+    this.targetList = els;
+    this.framesSnapShot = [];
+    this.targetShadow.updateGroup(els);
+  }
+  setTargetList(targetList) {
+    this.targetList = targetList;
+  }
+  clearMultiSelectStatus() {
+    this.targetList = [];
+    this.targetShadow.destroyEls();
+  }
+  onResizeGroupStart(e) {
+    const { events } = e;
+    this.moveableHelper.onResizeGroupStart(e);
+    this.setFramesSnapShot(events);
+  }
+  onResizeGroup(e) {
+    const { events } = e;
+    events.forEach((ev) => {
+      const { width, height, beforeTranslate } = ev.drag;
+      const frameSnapShot = this.framesSnapShot.find(
+        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+      );
+      if (!frameSnapShot)
         return;
-      this.dragStatus = StageDragStatus.START;
-      this.moveableHelper?.onResizeStart(e);
-      frame.top = this.target.offsetTop;
-      frame.left = this.target.offsetLeft;
-    }).on("resize", (e) => {
-      const { width, height, drag } = e;
-      if (!this.moveable || !this.target || !this.dragEl)
+      const targeEl = this.targetList.find(
+        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+      );
+      if (!targeEl)
         return;
-      const { beforeTranslate } = drag;
-      this.dragStatus = StageDragStatus.ING;
-      if (this.mode === Mode.SORTABLE) {
-        this.target.style.top = "0px";
-        this.dragEl.style.width = `${width}px`;
-        this.dragEl.style.height = `${height}px`;
-      } else {
-        this.moveableHelper?.onResize(e);
-        this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
-        this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
+      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      if (!isParentIncluded) {
+        targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0]}px`;
+        targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
       }
-      this.target.style.width = `${width}px`;
-      this.target.style.height = `${height}px`;
-    }).on("resizeEnd", () => {
-      this.dragStatus = StageDragStatus.END;
-      this.update(true);
+      targeEl.style.width = `${width}px`;
+      targeEl.style.height = `${height}px`;
     });
-  }
-  bindDragEvent() {
-    if (!this.moveable)
-      throw new Error("moveable \u672A\u521D\u59CB\u5316");
-    const frame = {
-      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 = StageDragStatus.START;
-      this.moveableHelper?.onDragStart(e);
-      if (this.mode === Mode.SORTABLE) {
-        this.ghostEl = this.generateGhostEl(this.target);
-      }
-      frame.top = this.target.offsetTop;
-      frame.left = this.target.offsetLeft;
-    }).on("drag", (e) => {
-      if (!this.target || !this.dragEl)
+    this.moveableHelper.onResizeGroup(e);
+  }
+  onDragGroupStart(e) {
+    const { events } = e;
+    this.moveableHelper.onDragGroupStart(e);
+    this.setFramesSnapShot(events);
+  }
+  onDragGroup(e) {
+    const { events } = e;
+    events.forEach((ev) => {
+      const frameSnapShot = this.framesSnapShot.find(
+        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+      );
+      if (!frameSnapShot)
         return;
-      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`;
+      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.moveableHelper?.onDrag(e);
-      this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
-      this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
-    }).on("dragEnd", () => {
-      if (timeout) {
-        globalThis.clearTimeout(timeout);
-        timeout = void 0;
-      }
-      let parentEl = null;
-      if (doc && this.canContainerHighlight()) {
-        parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
-      }
-      if (this.dragStatus === StageDragStatus.ING) {
-        if (parentEl) {
-          this.update(false, parentEl);
-        } else {
-          switch (this.mode) {
-            case Mode.SORTABLE:
+    });
+    this.moveableHelper.onDragGroup(e);
+  }
+  setFramesSnapShot(events) {
+    if (this.framesSnapShot.length > 0)
+      return;
+    events.forEach((ev) => {
+      const matchEventTarget = this.targetList.find(
+        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+      );
+      if (!matchEventTarget)
+        return;
+      this.framesSnapShot.push({
+        left: matchEventTarget.offsetLeft,
+        top: matchEventTarget.offsetTop,
+        id: matchEventTarget.id
+      });
+    });
+  }
+  generateGhostEl(el) {
+    if (this.ghostEl) {
+      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;
+    ghostEl.style.opacity = ".5";
+    ghostEl.style.position = "absolute";
+    ghostEl.style.left = `${left}px`;
+    ghostEl.style.top = `${top}px`;
+    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);
+      }
+    }
+  }
+}
+
+const selectParentAbles = (selectParentHandler) => ({
+  name: "select-parent",
+  props: {},
+  events: {},
+  render(moveable, React) {
+    const rect = moveable.getRect();
+    const { pos2 } = moveable.state;
+    const editableViewer = moveable.useCSS(
+      "div",
+      `
+      {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        will-change: transform;
+        transform-origin: 0px 0px;
+        display: flex;
+      }
+      .moveable-button {
+        width: 20px;
+        height: 20px;
+        background: #4af;
+        border-radius: 4px;
+        appearance: none;
+        border: 0;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      `
+    );
+    return React.createElement(
+      editableViewer,
+      {
+        className: "moveable-editable",
+        style: {
+          transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`
+        }
+      },
+      React.createElement(
+        "button",
+        {
+          className: "moveable-button",
+          title: "\u9009\u4E2D\u7236\u7EC4\u4EF6",
+          onClick: () => {
+            selectParentHandler();
+          }
+        },
+        React.createElement(
+          "svg",
+          {
+            width: "1em",
+            height: "1em",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            style: {
+              transform: "rotate(90deg)"
+            }
+          },
+          React.createElement("path", {
+            d: "M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z",
+            fill: "currentColor",
+            fillOpacity: "0.9"
+          })
+        )
+      )
+    );
+  }
+});
+
+class MoveableOptionsManager extends EventEmitter {
+  mode = Mode.ABSOLUTE;
+  container;
+  horizontalGuidelines = [];
+  verticalGuidelines = [];
+  elementGuidelines = [];
+  customizedOptions;
+  getRootContainer;
+  constructor(config) {
+    super();
+    this.customizedOptions = config.moveableOptions;
+    this.container = config.container;
+    this.getRootContainer = config.getRootContainer;
+  }
+  setGuidelines(type, guidelines) {
+    if (type === GuidesType.HORIZONTAL) {
+      this.horizontalGuidelines = guidelines;
+    } else if (type === GuidesType.VERTICAL) {
+      this.verticalGuidelines = guidelines;
+    }
+    this.emit("update-moveable");
+  }
+  clearGuides() {
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+    this.emit("update-moveable");
+  }
+  setElementGuidelines(selectedElList, allElList) {
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+    if (this.mode === Mode.ABSOLUTE) {
+      this.container.append(this.createGuidelineElements(selectedElList, allElList));
+    }
+  }
+  getOptions(isMultiSelect, runtimeOptions = {}) {
+    const defaultOptions = this.getDefaultOptions(isMultiSelect);
+    const customizedOptions = this.getCustomizeOptions();
+    return merge(defaultOptions, customizedOptions, runtimeOptions);
+  }
+  getDefaultOptions(isMultiSelect) {
+    const isSortable = this.mode === Mode.SORTABLE;
+    const commonOptions = {
+      draggable: true,
+      resizable: true,
+      rootContainer: this.getRootContainer(),
+      zoom: 1,
+      throttleDrag: 0,
+      snappable: true,
+      horizontalGuidelines: this.horizontalGuidelines,
+      verticalGuidelines: this.verticalGuidelines,
+      elementGuidelines: this.elementGuidelines,
+      bounds: {
+        top: 0,
+        left: -1,
+        right: this.container.clientWidth - 1,
+        bottom: isSortable ? void 0 : this.container.clientHeight
+      }
+    };
+    const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
+    return merge(commonOptions, differenceOptions);
+  }
+  getSingleOptions() {
+    const isAbsolute = this.mode === Mode.ABSOLUTE;
+    const isFixed = this.mode === Mode.FIXED;
+    return {
+      origin: false,
+      dragArea: false,
+      scalable: false,
+      rotatable: false,
+      snapGap: isAbsolute || isFixed,
+      snapThreshold: 5,
+      snapDigit: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute
+      },
+      elementSnapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute
+      },
+      isDisplayInnerSnapDigit: true,
+      props: {
+        selectParent: true
+      },
+      ables: [selectParentAbles(this.selectParentHandler.bind(this))]
+    };
+  }
+  getMultiOptions() {
+    return {
+      defaultGroupRotate: 0,
+      defaultGroupOrigin: "50% 50%",
+      startDragRotate: 0,
+      throttleDragRotate: 0,
+      origin: true,
+      padding: { left: 0, top: 0, right: 0, bottom: 0 }
+    };
+  }
+  getCustomizeOptions() {
+    if (typeof this.customizedOptions === "function") {
+      return this.customizedOptions();
+    }
+    return this.customizedOptions;
+  }
+  selectParentHandler() {
+    this.emit("select-parent");
+  }
+  createGuidelineElements(selectedElList, allElList) {
+    const frame = globalThis.document.createDocumentFragment();
+    for (const node of allElList) {
+      const { width, height } = node.getBoundingClientRect();
+      if (this.isInElementList(node, selectedElList))
+        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;
+  }
+  isInElementList(ele, eleList) {
+    for (const eleItem of eleList) {
+      if (ele === eleItem)
+        return true;
+    }
+    return false;
+  }
+}
+
+var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+  ContainerHighlightType2["DEFAULT"] = "default";
+  ContainerHighlightType2["ALT"] = "alt";
+  return ContainerHighlightType2;
+})(ContainerHighlightType || {});
+var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+  SelectStatus2["SELECT"] = "select";
+  SelectStatus2["MULTI_SELECT"] = "multiSelect";
+  return SelectStatus2;
+})(SelectStatus || {});
+var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+  StageDragStatus2["START"] = "start";
+  StageDragStatus2["ING"] = "ing";
+  StageDragStatus2["END"] = "end";
+  return StageDragStatus2;
+})(StageDragStatus || {});
+
+class StageDragResize extends MoveableOptionsManager {
+  target;
+  moveable;
+  dragStatus = StageDragStatus.END;
+  dragResizeHelper;
+  getRenderDocument;
+  markContainerEnd;
+  delayedMarkContainer;
+  constructor(config) {
+    super(config);
+    this.getRenderDocument = config.getRenderDocument;
+    this.markContainerEnd = config.markContainerEnd;
+    this.delayedMarkContainer = config.delayedMarkContainer;
+    this.dragResizeHelper = new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    this.on("update-moveable", () => {
+      if (this.moveable) {
+        this.updateMoveable();
+      }
+    });
+  }
+  select(el, event) {
+    if (!this.moveable || el !== this.target) {
+      this.initMoveable(el);
+    } else {
+      this.updateMoveable(el);
+    }
+    if (event) {
+      this.moveable?.dragStart(event);
+    }
+  }
+  updateMoveable(el = this.target) {
+    if (!this.moveable)
+      return;
+    if (!el)
+      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
+    const options = this.init(el);
+    Object.entries(options).forEach(([key, value]) => {
+      this.moveable[key] = value;
+    });
+    this.moveable.updateTarget();
+  }
+  clearSelectStatus() {
+    if (!this.moveable)
+      return;
+    this.dragResizeHelper.destroyShadowEl();
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+  destroy() {
+    this.moveable?.destroy();
+    this.dragResizeHelper.destroy();
+    this.dragStatus = StageDragStatus.END;
+    this.removeAllListeners();
+  }
+  init(el) {
+    if (/(auto|scroll)/.test(el.style.overflow)) {
+      el.style.overflow = "hidden";
+    }
+    this.target = el;
+    this.mode = getMode(el);
+    this.dragResizeHelper.updateShadowEl(el);
+    this.dragResizeHelper.setMode(this.mode);
+    const elementGuidelines = Array.prototype.slice.call(this.target?.parentElement?.children) || [];
+    this.setElementGuidelines([this.target], elementGuidelines);
+    return this.getOptions(false, {
+      target: this.dragResizeHelper.getShadowEl()
+    });
+  }
+  initMoveable(el) {
+    const options = this.init(el);
+    this.dragResizeHelper.clear();
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      ...options
+    });
+    this.bindResizeEvent();
+    this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
+  }
+  bindResizeEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    this.moveable.on("resizeStart", (e) => {
+      if (!this.target)
+        return;
+      this.dragStatus = StageDragStatus.START;
+      this.dragResizeHelper.onResizeStart(e);
+    }).on("resize", (e) => {
+      if (!this.moveable || !this.target || !this.dragResizeHelper.getShadowEl())
+        return;
+      this.dragStatus = StageDragStatus.ING;
+      this.dragResizeHelper.onResize(e);
+    }).on("resizeEnd", () => {
+      this.dragStatus = StageDragStatus.END;
+      this.update(true);
+    });
+  }
+  bindDragEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    let timeout;
+    this.moveable.on("dragStart", (e) => {
+      if (!this.target)
+        throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
+      this.dragStatus = StageDragStatus.START;
+      this.dragResizeHelper.onDragStart(e);
+    }).on("drag", (e) => {
+      if (!this.target || !this.dragResizeHelper.getShadowEl())
+        return;
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
+      timeout = this.delayedMarkContainer(e.inputEvent, [this.target]);
+      this.dragStatus = StageDragStatus.ING;
+      this.dragResizeHelper.onDrag(e);
+    }).on("dragEnd", () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
+      const parentEl = this.markContainerEnd();
+      if (this.dragStatus === StageDragStatus.ING) {
+        if (parentEl) {
+          this.update(false, parentEl);
+        } else {
+          switch (this.mode) {
+            case Mode.SORTABLE:
               this.sort();
               break;
             default:
@@ -547,7 +880,7 @@ class StageDragResize extends EventEmitter {
         }
       }
       this.dragStatus = StageDragStatus.END;
-      this.destroyGhostEl();
+      this.dragResizeHelper.destroyGhostEl();
     });
   }
   bindRotateEvent() {
@@ -555,17 +888,15 @@ class StageDragResize extends EventEmitter {
       throw new Error("moveable \u672A\u521D\u59CB\u5316");
     this.moveable.on("rotateStart", (e) => {
       this.dragStatus = StageDragStatus.START;
-      this.moveableHelper?.onRotateStart(e);
+      this.dragResizeHelper.onRotateStart(e);
     }).on("rotate", (e) => {
-      if (!this.target || !this.dragEl)
+      if (!this.target || !this.dragResizeHelper.getShadowEl())
         return;
       this.dragStatus = StageDragStatus.ING;
-      this.moveableHelper?.onRotate(e);
-      const frame = this.moveableHelper?.getFrame(e.target);
-      this.target.style.transform = frame?.toCSSObject().transform || "";
+      this.dragResizeHelper.onRotate(e);
     }).on("rotateEnd", (e) => {
       this.dragStatus = StageDragStatus.END;
-      const frame = this.moveableHelper?.getFrame(e.target);
+      const frame = this.dragResizeHelper?.getFrame(e.target);
       this.emit("update", {
         data: [
           {
@@ -583,17 +914,15 @@ class StageDragResize extends EventEmitter {
       throw new Error("moveable \u672A\u521D\u59CB\u5316");
     this.moveable.on("scaleStart", (e) => {
       this.dragStatus = StageDragStatus.START;
-      this.moveableHelper?.onScaleStart(e);
+      this.dragResizeHelper.onScaleStart(e);
     }).on("scale", (e) => {
-      if (!this.target || !this.dragEl)
+      if (!this.target || !this.dragResizeHelper.getShadowEl())
         return;
       this.dragStatus = StageDragStatus.ING;
-      this.moveableHelper?.onScale(e);
-      const frame = this.moveableHelper?.getFrame(e.target);
-      this.target.style.transform = frame?.toCSSObject().transform || "";
+      this.dragResizeHelper.onScale(e);
     }).on("scaleEnd", (e) => {
       this.dragStatus = StageDragStatus.END;
-      const frame = this.moveableHelper?.getFrame(e.target);
+      const frame = this.dragResizeHelper.getFrame(e.target);
       this.emit("update", {
         data: [
           {
@@ -607,9 +936,9 @@ class StageDragResize extends EventEmitter {
     });
   }
   sort() {
-    if (!this.target || !this.ghostEl)
+    if (!this.target || !this.dragResizeHelper.getGhostEl())
       throw new Error("\u672A\u77E5\u9519\u8BEF");
-    const { top } = this.ghostEl.getBoundingClientRect();
+    const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
     const { top: oriTop } = this.target.getBoundingClientRect();
     const deltaTop = top - oriTop;
     if (Math.abs(deltaTop) >= this.target.clientHeight / 2) {
@@ -628,8 +957,7 @@ class StageDragResize extends EventEmitter {
   update(isResize = false, parentEl = null) {
     if (!this.target)
       return;
-    const { contentWindow } = this.core.renderer;
-    const doc = contentWindow?.document;
+    const doc = this.getRenderDocument();
     if (!doc)
       return;
     const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
@@ -637,11 +965,16 @@ class StageDragResize extends EventEmitter {
     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 shadowEl = this.dragResizeHelper.getShadowEl();
+    if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
+      const targetShadowHtmlEl = shadowEl;
+      const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
+      const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
+      const frame = this.dragResizeHelper.getFrame(shadowEl);
+      const [translateX, translateY] = frame?.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);
+      left = calcValueByFontsize(doc, targetShadowElOffsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
+      top = calcValueByFontsize(doc, targetShadowElOffsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
     }
     this.emit("update", {
       data: [
@@ -653,219 +986,516 @@ class StageDragResize extends EventEmitter {
       parentEl
     });
   }
-  generateGhostEl(el) {
-    if (this.ghostEl) {
-      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;
-    ghostEl.style.opacity = ".5";
-    ghostEl.style.position = "absolute";
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    el.after(ghostEl);
-    return ghostEl;
+}
+
+class StageHighlight extends EventEmitter$1 {
+  container;
+  target;
+  moveable;
+  targetShadow;
+  getRootContainer;
+  constructor(config) {
+    super();
+    this.container = config.container;
+    this.getRootContainer = config.getRootContainer;
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.HIGHLIGHT_EL,
+      idPrefix: HIGHLIGHT_EL_ID_PREFIX
+    });
   }
-  setGhostElChildrenId(el) {
-    for (const child of Array.from(el.children)) {
-      if (child.id) {
-        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+  highlight(el) {
+    if (!el || el === this.target)
+      return;
+    this.target = el;
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      target: this.targetShadow.update(el),
+      origin: false,
+      rootContainer: this.getRootContainer(),
+      zoom: 2
+    });
+  }
+  clearHighlight() {
+    if (!this.moveable || !this.target)
+      return;
+    this.target = void 0;
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+  destroy() {
+    this.moveable?.destroy();
+    this.targetShadow.destroy();
+  }
+}
+
+class StageMultiDragResize extends MoveableOptionsManager {
+  container;
+  targetList = [];
+  moveableForMulti;
+  dragStatus = StageDragStatus.END;
+  dragResizeHelper;
+  getRenderDocument;
+  constructor(config) {
+    const moveableOptionsManagerConfig = {
+      container: config.container,
+      moveableOptions: config.multiMoveableOptions,
+      getRootContainer: config.getRootContainer
+    };
+    super(moveableOptionsManagerConfig);
+    this.container = config.container;
+    this.getRenderDocument = config.getRenderDocument;
+    this.dragResizeHelper = new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    this.on("update-moveable", () => {
+      if (this.moveableForMulti) {
+        this.updateMoveable();
       }
-      if (child.children.length) {
-        this.setGhostElChildrenId(child);
+    });
+  }
+  multiSelect(els) {
+    if (els.length === 0) {
+      return;
+    }
+    this.mode = getMode(els[0]);
+    this.targetList = els;
+    this.dragResizeHelper.updateGroup(els);
+    const elementGuidelines = Array.prototype.slice.call(this.targetList[0].parentElement?.children) || [];
+    this.setElementGuidelines(this.targetList, elementGuidelines);
+    this.moveableForMulti?.destroy();
+    this.dragResizeHelper.clear();
+    this.moveableForMulti = new Moveable(
+      this.container,
+      this.getOptions(true, {
+        target: this.dragResizeHelper.getShadowEls()
+      })
+    );
+    this.moveableForMulti.on("resizeGroupStart", (e) => {
+      this.dragResizeHelper.onResizeGroupStart(e);
+      this.dragStatus = StageDragStatus.START;
+    }).on("resizeGroup", (e) => {
+      this.dragResizeHelper.onResizeGroup(e);
+      this.dragStatus = StageDragStatus.ING;
+    }).on("resizeGroupEnd", () => {
+      this.update(true);
+      this.dragStatus = StageDragStatus.END;
+    }).on("dragGroupStart", (e) => {
+      this.dragResizeHelper.onDragGroupStart(e);
+      this.dragStatus = StageDragStatus.START;
+    }).on("dragGroup", (e) => {
+      this.dragResizeHelper.onDragGroup(e);
+      this.dragStatus = StageDragStatus.ING;
+    }).on("dragGroupEnd", () => {
+      this.update();
+      this.dragStatus = StageDragStatus.END;
+    }).on("clickGroup", (e) => {
+      const { inputTarget, targets } = e;
+      if (targets.length > 1 && targets.includes(inputTarget)) {
+        this.emit("change-to-select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""));
       }
+    });
+  }
+  canSelect(el, selectedEl) {
+    const currentTargetMode = getMode(el);
+    let selectedElMode = "";
+    if (currentTargetMode === Mode.SORTABLE) {
+      return false;
+    }
+    if (this.targetList.length === 0 && selectedEl) {
+      selectedElMode = getMode(selectedEl);
+    } else if (this.targetList.length > 0) {
+      selectedElMode = getMode(this.targetList[0]);
     }
+    if (currentTargetMode !== selectedElMode) {
+      return false;
+    }
+    return true;
   }
-  destroyGhostEl() {
-    this.ghostEl?.remove();
-    this.ghostEl = void 0;
+  updateMoveable(eleList = this.targetList) {
+    if (!this.moveableForMulti)
+      return;
+    if (!eleList)
+      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
+    this.targetList = eleList;
+    this.dragResizeHelper.setTargetList(eleList);
+    const options = this.getOptions(true, {
+      target: this.dragResizeHelper.getShadowEls()
+    });
+    Object.entries(options).forEach(([key, value]) => {
+      this.moveableForMulti[key] = value;
+    });
+    this.moveableForMulti.updateTarget();
   }
-  getOptions(options = {}) {
-    if (!this.target)
-      return {};
-    const isAbsolute = this.mode === Mode.ABSOLUTE;
-    const isFixed = this.mode === Mode.FIXED;
-    const isSortable = this.mode === Mode.SORTABLE;
-    let { moveableOptions = {} } = this.core.config;
-    if (typeof moveableOptions === "function") {
-      moveableOptions = moveableOptions(this.core);
-    }
-    const elementGuidelines = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
-    this.setElementGuidelines(elementGuidelines);
-    if (moveableOptions.elementGuidelines) {
-      delete moveableOptions.elementGuidelines;
+  clearSelectStatus() {
+    if (!this.moveableForMulti)
+      return;
+    this.dragResizeHelper.clearMultiSelectStatus();
+    this.moveableForMulti.target = null;
+    this.moveableForMulti.updateTarget();
+    this.targetList = [];
+  }
+  destroy() {
+    this.moveableForMulti?.destroy();
+    this.dragResizeHelper.destroy();
+  }
+  update(isResize = false) {
+    if (this.targetList.length === 0)
+      return;
+    const doc = this.getRenderDocument();
+    if (!doc)
+      return;
+    const data = this.targetList.map((targetItem) => {
+      const left = calcValueByFontsize(doc, targetItem.offsetLeft);
+      const top = calcValueByFontsize(doc, targetItem.offsetTop);
+      const width = calcValueByFontsize(doc, targetItem.clientWidth);
+      const height = calcValueByFontsize(doc, targetItem.clientHeight);
+      return {
+        el: targetItem,
+        style: isResize ? { left, top, width, height } : { left, top }
+      };
+    });
+    this.emit("update", data, null);
+  }
+}
+
+const throttleTime = 100;
+const defaultContainerHighlightDuration = 800;
+class ActionManager extends EventEmitter {
+  dr;
+  multiDr;
+  highlightLayer;
+  container;
+  selectedEl;
+  selectedElList = [];
+  highlightedEl;
+  isMultiSelectStatus = false;
+  containerHighlightClassName;
+  containerHighlightDuration;
+  containerHighlightType;
+  isAltKeydown = false;
+  getTargetElement;
+  getElementsFromPoint;
+  canSelect;
+  isContainer;
+  getRenderDocument;
+  mouseMoveHandler = throttle(async (event) => {
+    const el = await this.getElementFromPoint(event);
+    if (!el) {
+      this.clearHighlight();
+      return;
     }
-    return {
-      origin: false,
-      rootContainer: this.core.container,
-      zoom: 1,
-      dragArea: false,
-      draggable: true,
-      resizable: true,
-      scalable: false,
-      rotatable: false,
-      snappable: true,
-      snapGap: isAbsolute || isFixed,
-      snapThreshold: 5,
-      snapDigit: 0,
-      throttleDrag: 0,
-      isDisplaySnapDigit: isAbsolute,
-      snapDirections: {
-        top: isAbsolute,
-        right: isAbsolute,
-        bottom: isAbsolute,
-        left: isAbsolute,
-        center: isAbsolute,
-        middle: isAbsolute
-      },
-      elementSnapDirections: {
-        top: isAbsolute,
-        right: isAbsolute,
-        bottom: isAbsolute,
-        left: isAbsolute
-      },
-      isDisplayInnerSnapDigit: true,
-      horizontalGuidelines: this.horizontalGuidelines,
-      verticalGuidelines: this.verticalGuidelines,
-      elementGuidelines: this.elementGuidelines,
-      bounds: {
-        top: 0,
-        left: -1,
-        right: this.container.clientWidth - 1,
-        bottom: isSortable ? void 0 : this.container.clientHeight,
-        ...moveableOptions.bounds || {}
-      },
-      props: {
-        selectParent: true
+    this.highlight(el);
+  }, throttleTime);
+  constructor(config) {
+    super();
+    this.container = config.container;
+    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS_NAME;
+    this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
+    this.containerHighlightType = config.containerHighlightType;
+    this.getTargetElement = config.getTargetElement;
+    this.getElementsFromPoint = config.getElementsFromPoint;
+    this.canSelect = config.canSelect || ((el) => !!el.id);
+    this.getRenderDocument = config.getRenderDocument;
+    this.isContainer = config.isContainer;
+    this.dr = new StageDragResize({
+      container: config.container,
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      updateDragEl: config.updateDragEl,
+      markContainerEnd: () => this.markContainerEnd(),
+      delayedMarkContainer: (event, exclude) => {
+        if (this.canAddToContainer()) {
+          return this.delayedMarkContainer(event, exclude);
+        }
+        return void 0;
       },
-      ables: [selectParentAbles(this)],
-      ...options,
-      ...moveableOptions
-    };
+      moveableOptions: this.changeCallback(config.moveableOptions)
+    });
+    this.multiDr = new StageMultiDragResize({
+      container: config.container,
+      multiMoveableOptions: config.multiMoveableOptions,
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      updateDragEl: config.updateDragEl
+    });
+    this.highlightLayer = new StageHighlight({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      getRootContainer: config.getRootContainer
+    });
+    this.initMouseEvent();
+    this.initKeyEvent();
+    this.initActionEvent();
+  }
+  setGuidelines(type, guidelines) {
+    this.dr.setGuidelines(type, guidelines);
+    this.multiDr.setGuidelines(type, guidelines);
+  }
+  clearGuides() {
+    this.dr.clearGuides();
+    this.multiDr.clearGuides();
+  }
+  updateMoveable(el) {
+    this.dr.updateMoveable(el);
+    this.multiDr.updateMoveable();
+  }
+  isSelectedEl(el) {
+    return el.id === this.selectedEl?.id;
+  }
+  setSelectedEl(el) {
+    this.selectedEl = el;
+  }
+  getSelectedEl() {
+    return this.selectedEl;
+  }
+  getSelectedElList() {
+    return this.selectedElList;
+  }
+  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.isElCanSelect(el, event, stop)) {
+        if (stopped)
+          break;
+        return el;
+      }
+    }
+  }
+  async isElCanSelect(el, event, stop) {
+    const canSelectByProp = await this.canSelect(el, event, stop);
+    if (!canSelectByProp)
+      return false;
+    if (this.isMultiSelectStatus) {
+      return this.canMultiSelect(el, stop);
+    }
+    return true;
+  }
+  canMultiSelect(el, stop) {
+    if (el.className.includes(PAGE_CLASS)) {
+      stop();
+      return false;
+    }
+    const selectedEl = this.getSelectedEl();
+    if (selectedEl?.className.includes(PAGE_CLASS)) {
+      return true;
+    }
+    return this.multiDr.canSelect(el, selectedEl);
+  }
+  select(el, event) {
+    this.selectedEl = el;
+    this.clearSelectStatus(SelectStatus.MULTI_SELECT);
+    this.dr.select(el, event);
+  }
+  multiSelect(idOrElList) {
+    this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
+    this.clearSelectStatus(SelectStatus.SELECT);
+    this.multiDr.multiSelect(this.selectedElList);
+  }
+  getHighlightEl() {
+    return this.highlightedEl;
+  }
+  setHighlightEl(el) {
+    this.highlightedEl = el;
+  }
+  highlight(idOrEl) {
+    let el;
+    try {
+      el = this.getTargetElement(idOrEl);
+    } catch (error) {
+      this.clearHighlight();
+      return;
+    }
+    if (el === this.getSelectedEl() || this.multiDr.dragStatus === StageDragStatus.ING) {
+      this.clearHighlight();
+      return;
+    }
+    if (el === this.highlightedEl || !el)
+      return;
+    this.highlightLayer.highlight(el);
+    this.highlightedEl = el;
+    this.emit("highlight", el);
   }
-  canContainerHighlight() {
-    return this.core.containerHighlightType === ContainerHighlightType.DEFAULT || this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight;
+  clearHighlight() {
+    this.setHighlightEl(void 0);
+    this.highlightLayer.clearHighlight();
   }
-}
-
-class TargetCalibrate extends EventEmitter {
-  parent;
-  mask;
-  dr;
-  core;
-  operationEl;
-  constructor(config) {
-    super();
-    this.parent = config.parent;
-    this.mask = config.mask;
-    this.dr = config.dr;
-    this.core = config.core;
-    this.operationEl = globalThis.document.createElement("div");
-    this.parent.append(this.operationEl);
-  }
-  update(el, prefix) {
-    const { left, top } = this.getOffset(el);
-    const { transform } = getComputedStyle(el);
-    this.operationEl.style.cssText = `
-      position: absolute;
-      transform: ${transform};
-      left: ${left}px;
-      top: ${top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.HIGHLIGHT_EL};
-    `;
-    this.operationEl.id = `${prefix}${el.id}`;
-    if (typeof this.core.config.updateDragEl === "function") {
-      this.core.config.updateDragEl(this.operationEl, el);
+  clearSelectStatus(selectType) {
+    if (selectType === SelectStatus.MULTI_SELECT) {
+      this.multiDr.clearSelectStatus();
+      this.selectedElList = [];
+    } else {
+      this.dr.clearSelectStatus();
+    }
+  }
+  async addContainerHighlightClassName(event, excludeElList) {
+    const doc = this.getRenderDocument();
+    if (!doc)
+      return;
+    const els = this.getElementsFromPoint(event);
+    for (const el of els) {
+      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !excludeElList.includes(el)) {
+        addClassName(el, doc, this.containerHighlightClassName);
+        break;
+      }
     }
-    return this.operationEl;
+  }
+  delayedMarkContainer(event, excludeElList = []) {
+    return globalThis.setTimeout(() => {
+      this.addContainerHighlightClassName(event, excludeElList);
+    }, this.containerHighlightDuration);
   }
   destroy() {
-    this.operationEl?.remove();
-  }
-  getOffset(el) {
-    const { offsetParent } = el;
-    const left = el.offsetLeft;
-    const top = el.offsetTop;
-    if (offsetParent) {
-      const parentOffset = this.getOffset(offsetParent);
-      return {
-        left: left + parentOffset.left,
-        top: top + parentOffset.top
+    this.container.removeEventListener("mousedown", this.mouseDownHandler);
+    this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+    this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
+    this.container.removeEventListener("wheel", this.mouseWheelHandler);
+    this.dr.destroy();
+    this.multiDr.destroy();
+    this.highlightLayer.destroy();
+  }
+  changeCallback(options) {
+    if (typeof options === "function") {
+      return () => {
+        if (typeof options === "function") {
+          const cfg = {
+            targetElId: this.selectedEl?.id
+          };
+          return options(cfg);
+        }
+        return options;
       };
     }
-    if (this.dr.mode === Mode.FIXED) {
-      if (getMode(el) === Mode.FIXED) {
-        return {
-          left,
-          top
-        };
-      }
-      return {
-        left: left - this.mask.scrollLeft,
-        top: top - this.mask.scrollTop
-      };
+    return options;
+  }
+  async beforeMultiSelect(event) {
+    const el = await this.getElementFromPoint(event);
+    if (!el)
+      return;
+    if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
+      this.selectedElList.push(this.selectedEl);
+      this.selectedEl = void 0;
     }
-    if (getMode(el) === Mode.FIXED) {
-      return {
-        left: left + this.mask.scrollLeft,
-        top: top + this.mask.scrollTop
-      };
+    const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+    if (existIndex !== -1) {
+      this.selectedElList.splice(existIndex, 1);
+    } else {
+      this.selectedElList.push(el);
     }
-    return {
-      left,
-      top
-    };
   }
-}
-
-class StageHighlight extends EventEmitter {
-  core;
-  container;
-  target;
-  moveable;
-  calibrationTarget;
-  constructor(config) {
-    super();
-    this.core = config.core;
-    this.container = config.container;
-    this.calibrationTarget = new TargetCalibrate({
-      parent: this.core.mask.content,
-      mask: this.core.mask,
-      dr: this.core.dr,
-      core: this.core
+  canAddToContainer() {
+    return this.containerHighlightType === ContainerHighlightType.DEFAULT || this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown;
+  }
+  markContainerEnd() {
+    const doc = this.getRenderDocument();
+    if (doc && this.canAddToContainer()) {
+      return removeClassNameByClassName(doc, this.containerHighlightClassName);
+    }
+    return null;
+  }
+  initMouseEvent() {
+    this.container.addEventListener("mousedown", this.mouseDownHandler);
+    this.container.addEventListener("mousemove", this.mouseMoveHandler);
+    this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
+    this.container.addEventListener("wheel", this.mouseWheelHandler);
+  }
+  initKeyEvent() {
+    const { isMac } = new Env();
+    const ctrl = isMac ? "meta" : "ctrl";
+    KeyController.global.keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = true;
+    });
+    KeyController.global.on("blur", () => {
+      this.isMultiSelectStatus = false;
+    });
+    KeyController.global.keyup(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = false;
+    });
+    KeyController.global.keydown("alt", (e) => {
+      e.inputEvent.preventDefault();
+      this.isAltKeydown = true;
+    });
+    KeyController.global.keyup("alt", (e) => {
+      e.inputEvent.preventDefault();
+      this.markContainerEnd();
+      this.isAltKeydown = false;
     });
   }
-  highlight(el) {
-    if (!el || el === this.target)
-      return;
-    this.target = el;
-    this.moveable?.destroy();
-    this.moveable = new Moveable(this.container, {
-      target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
-      origin: false,
-      rootContainer: this.core.container,
-      zoom: 2
+  initActionEvent() {
+    this.dr.on("update", (data) => {
+      setTimeout(() => this.emit("update", data));
+    }).on("sort", (data) => {
+      setTimeout(() => this.emit("sort", data));
+    }).on("select-parent", () => {
+      this.emit("select-parent");
+    });
+    this.multiDr.on("update", (data, parentEl) => {
+      this.emit("multi-update", data, parentEl);
+    }).on("change-to-select", async (id) => {
+      if (this.isMultiSelectStatus)
+        return false;
+      const el = this.getTargetElement(id);
+      this.emit("change-to-select", el);
     });
   }
-  clearHighlight() {
-    if (!this.moveable)
+  mouseDownHandler = async (event) => {
+    this.clearHighlight();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    if (this.isStopTriggerSelect(event))
       return;
-    this.target = void 0;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
-  }
-  destroy() {
-    this.moveable?.destroy();
-    this.calibrationTarget.destroy();
+    this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+    if (this.isMultiSelectStatus) {
+      await this.beforeMultiSelect(event);
+      if (this.selectedElList.length > 0) {
+        this.emit("before-multi-select", this.selectedElList);
+      }
+    } else {
+      const el = await this.getElementFromPoint(event);
+      if (!el)
+        return;
+      this.emit("before-select", el, event);
+    }
+    getDocument().addEventListener("mouseup", this.mouseUpHandler);
+  };
+  isStopTriggerSelect(event) {
+    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
+      return true;
+    if (!event.target)
+      return true;
+    const targetClassList = event.target.classList;
+    if (!this.isMultiSelectStatus && targetClassList.contains("moveable-area")) {
+      return true;
+    }
+    if (targetClassList.contains("moveable-control") || isMoveableButton(event.target)) {
+      return true;
+    }
+    return false;
   }
+  mouseUpHandler = () => {
+    getDocument().removeEventListener("mouseup", this.mouseUpHandler);
+    this.container.addEventListener("mousemove", this.mouseMoveHandler);
+    if (this.isMultiSelectStatus) {
+      this.emit("multi-select", this.selectedElList);
+    } else {
+      this.emit("select", this.selectedEl);
+    }
+  };
+  mouseLeaveHandler = () => {
+    setTimeout(() => this.clearHighlight(), throttleTime);
+  };
+  mouseWheelHandler = () => {
+    this.clearHighlight();
+  };
 }
 
-class Rule extends EventEmitter$1 {
+class Rule extends EventEmitter {
   hGuides;
   vGuides;
   horizontalGuidelines = [];
@@ -904,11 +1534,11 @@ class Rule extends EventEmitter$1 {
     this.vGuides.setState({
       defaultGuides: vLines
     });
-    this.emit("changeGuides", {
+    this.emit("change-guides", {
       type: GuidesType.HORIZONTAL,
       guides: hLines
     });
-    this.emit("changeGuides", {
+    this.emit("change-guides", {
       type: GuidesType.VERTICAL,
       guides: vLines
     });
@@ -967,14 +1597,14 @@ class Rule extends EventEmitter$1 {
   });
   hGuidesChangeGuidesHandler = (e) => {
     this.horizontalGuidelines = e.guides;
-    this.emit("changeGuides", {
+    this.emit("change-guides", {
       type: GuidesType.HORIZONTAL,
       guides: this.horizontalGuidelines
     });
   };
   vGuidesChangeGuidesHandler = (e) => {
     this.verticalGuidelines = e.guides;
-    this.emit("changeGuides", {
+    this.emit("change-guides", {
       type: GuidesType.VERTICAL,
       guides: this.verticalGuidelines
     });
@@ -982,9 +1612,8 @@ class Rule extends EventEmitter$1 {
 }
 
 const wrapperClassName = "editor-mask-wrapper";
-const throttleTime = 100;
 const hideScrollbar = () => {
-  injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
+  injectStyle(getDocument(), `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
 };
 const createContent = () => createDiv({
   className: "editor-mask",
@@ -1023,25 +1652,21 @@ class StageMask extends Rule {
   wrapperWidth = 0;
   maxScrollTop = 0;
   maxScrollLeft = 0;
-  isMultiSelectStatus = false;
   mode = Mode.ABSOLUTE;
   pageScrollParent = null;
   intersectionObserver = null;
   wrapperResizeObserver = null;
-  highlightHandler = throttle((event) => {
-    this.emit("highlight", event);
-  }, throttleTime);
   constructor() {
     const wrapper = createWrapper();
     super(wrapper);
     this.wrapper = wrapper;
-    this.initContentEventListener();
+    this.content.addEventListener("wheel", this.mouseWheelHandler);
     this.wrapper.appendChild(this.content);
-    this.initMultiSelectEvent();
   }
   setMode(mode) {
     this.mode = mode;
     this.scroll();
+    this.content.dataset.mode = mode;
     if (mode === Mode.FIXED) {
       this.content.style.width = `${this.wrapperWidth}px`;
       this.content.style.height = `${this.wrapperHeight}px`;
@@ -1088,30 +1713,8 @@ class StageMask extends Rule {
     this.page = null;
     this.pageScrollParent = null;
     this.wrapperResizeObserver?.disconnect();
-    this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
     super.destroy();
   }
-  initContentEventListener() {
-    this.content.addEventListener("mousedown", this.mouseDownHandler);
-    this.content.addEventListener("wheel", this.mouseWheelHandler);
-    this.content.addEventListener("mousemove", this.highlightHandler);
-    this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
-  }
-  initMultiSelectEvent() {
-    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.on("blur", () => {
-      this.isMultiSelectStatus = false;
-    });
-    KeyController.global.keyup(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
-    });
-  }
   initObserverIntersection() {
     this.pageScrollParent = getScrollParent(this.page) || null;
     this.intersectionObserver?.disconnect();
@@ -1161,317 +1764,78 @@ class StageMask extends Rule {
       scrollLeft = 0;
       scrollTop = 0;
     }
-    this.scrollRule(scrollTop);
-    this.scrollTo(scrollLeft, scrollTop);
-  }
-  scrollTo(scrollLeft, scrollTop) {
-    this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
-  }
-  setHeight(height) {
-    this.height = height;
-    this.setMaxScrollTop();
-    this.content.style.height = `${height}px`;
-  }
-  setWidth(width) {
-    this.width = width;
-    this.setMaxScrollLeft();
-    this.content.style.width = `${width}px`;
-  }
-  setMaxScrollLeft() {
-    this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
-  }
-  setMaxScrollTop() {
-    this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
-  }
-  fixScrollValue() {
-    if (this.scrollTop < 0)
-      this.scrollTop = 0;
-    if (this.scrollLeft < 0)
-      this.scrollLeft = 0;
-    if (this.maxScrollTop < this.scrollTop)
-      this.scrollTop = this.maxScrollTop;
-    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 (!event.target)
-      return;
-    const targetClassList = event.target.classList;
-    if (!this.isMultiSelectStatus && targetClassList.contains("moveable-area")) {
-      return;
-    }
-    if (targetClassList.contains("moveable-control") || isMoveableButton(event.target)) {
-      return;
-    }
-    this.content.removeEventListener("mousemove", this.highlightHandler);
-    if (this.isMultiSelectStatus) {
-      this.emit("beforeMultiSelect", event);
-    } else {
-      this.emit("beforeSelect", event);
-    }
-    globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-  };
-  mouseUpHandler = () => {
-    globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-    this.content.addEventListener("mousemove", this.highlightHandler);
-    if (!this.isMultiSelectStatus) {
-      this.emit("select");
-    }
-  };
-  mouseWheelHandler = (event) => {
-    this.emit("clearHighlight");
-    if (!this.page)
-      throw new Error("page \u672A\u521D\u59CB\u5316");
-    const { deltaY, deltaX } = event;
-    if (this.page.clientHeight < this.wrapperHeight && deltaY)
-      return;
-    if (this.page.clientWidth < this.wrapperWidth && deltaX)
-      return;
-    if (this.maxScrollTop > 0) {
-      this.scrollTop = this.scrollTop + deltaY;
-    }
-    if (this.maxScrollLeft > 0) {
-      this.scrollLeft = this.scrollLeft + deltaX;
-    }
-    this.scroll();
-    this.emit("scroll", event);
-  };
-  mouseLeaveHandler = () => {
-    setTimeout(() => this.emit("clearHighlight"), throttleTime);
-  };
-}
-
-class StageMultiDragResize extends EventEmitter {
-  core;
-  mask;
-  container;
-  targetList = [];
-  dragElList = [];
-  moveableForMulti;
-  dragStatus = StageDragStatus.END;
-  multiMoveableHelper;
-  constructor(config) {
-    super();
-    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.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 = [];
-    const setFrames = (events) => {
-      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.moveableForMulti.on("resizeGroupStart", (params) => {
-      const { events } = params;
-      this.multiMoveableHelper?.onResizeGroupStart(params);
-      setFrames(events);
-      this.dragStatus = StageDragStatus.START;
-    }).on("resizeGroup", (params) => {
-      const { events } = params;
-      events.forEach((ev) => {
-        const { width, height, beforeTranslate } = ev.drag;
-        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 + beforeTranslate[0]}px`;
-          targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
-        }
-        targeEl.style.width = `${width}px`;
-        targeEl.style.height = `${height}px`;
-      });
-      this.multiMoveableHelper?.onResizeGroup(params);
-      this.dragStatus = StageDragStatus.ING;
-    }).on("resizeGroupEnd", () => {
-      this.update(true);
-      this.dragStatus = StageDragStatus.END;
-    }).on("dragGroupStart", (params) => {
-      const { events } = params;
-      this.multiMoveableHelper?.onDragGroupStart(params);
-      setFrames(events);
-      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.scrollRule(scrollTop);
+    this.scrollTo(scrollLeft, scrollTop);
+  }
+  scrollTo(scrollLeft, scrollTop) {
+    this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
+    const event = new CustomEvent("customScroll", {
+      detail: {
+        scrollLeft: this.scrollLeft,
+        scrollTop: this.scrollTop
       }
     });
+    this.content.dispatchEvent(event);
   }
-  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;
+  setHeight(height) {
+    this.height = height;
+    this.setMaxScrollTop();
+    this.content.style.height = `${height}px`;
   }
-  clearSelectStatus() {
-    if (!this.moveableForMulti)
-      return;
-    this.destroyDragElList();
-    this.moveableForMulti.target = null;
-    this.moveableForMulti.updateTarget();
-    this.targetList = [];
+  setWidth(width) {
+    this.width = width;
+    this.setMaxScrollLeft();
+    this.content.style.width = `${width}px`;
   }
-  destroy() {
-    this.moveableForMulti?.destroy();
-    this.destroyDragElList();
+  setMaxScrollLeft() {
+    this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
   }
-  destroyDragElList() {
-    this.dragElList.forEach((dragElItem) => dragElItem?.remove());
+  setMaxScrollTop() {
+    this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
   }
-  update(isResize = false) {
-    if (this.targetList.length === 0)
+  fixScrollValue() {
+    if (this.scrollTop < 0)
+      this.scrollTop = 0;
+    if (this.scrollLeft < 0)
+      this.scrollLeft = 0;
+    if (this.maxScrollTop < this.scrollTop)
+      this.scrollTop = this.maxScrollTop;
+    if (this.maxScrollLeft < this.scrollLeft)
+      this.scrollLeft = this.maxScrollLeft;
+  }
+  mouseWheelHandler = (event) => {
+    if (!this.page)
+      throw new Error("page \u672A\u521D\u59CB\u5316");
+    const { deltaY, deltaX } = event;
+    if (this.page.clientHeight < this.wrapperHeight && deltaY)
       return;
-    const { contentWindow } = this.core.renderer;
-    const doc = contentWindow?.document;
-    if (!doc)
+    if (this.page.clientWidth < this.wrapperWidth && deltaX)
       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);
+    if (this.maxScrollTop > 0) {
+      this.scrollTop = this.scrollTop + deltaY;
     }
-    return {
-      defaultGroupRotate: 0,
-      defaultGroupOrigin: "50% 50%",
-      draggable: true,
-      resizable: true,
-      throttleDrag: 0,
-      startDragRotate: 0,
-      throttleDragRotate: 0,
-      zoom: 1,
-      origin: true,
-      padding: { left: 0, top: 0, right: 0, bottom: 0 },
-      snappable: true,
-      bounds: {
-        top: 0,
-        left: -1,
-        right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
-        ...multiMoveableOptions.bounds || {}
-      },
-      ...options,
-      ...multiMoveableOptions
-    };
-  }
+    if (this.maxScrollLeft > 0) {
+      this.scrollLeft = this.scrollLeft + deltaX;
+    }
+    this.scroll();
+    this.emit("scroll", event);
+  };
 }
 
 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\n.magic-ui-container.magic-layout-relative {\n  min-height: 50px;\n}\n";
 
-class StageRender extends EventEmitter {
+class StageRender extends EventEmitter$1 {
   contentWindow = null;
   runtime = null;
   iframe;
   runtimeUrl;
-  render;
-  constructor({ runtimeUrl, render }) {
+  zoom = DEFAULT_ZOOM;
+  customizedRender;
+  constructor({ runtimeUrl, zoom, customizedRender }) {
     super();
     this.runtimeUrl = runtimeUrl || "";
-    this.render = render;
+    this.customizedRender = customizedRender;
+    this.setZoom(zoom);
     this.iframe = globalThis.document.createElement("iframe");
     this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
     this.iframe.style.cssText = `
@@ -1489,6 +1853,31 @@ class StageRender extends EventEmitter {
       this.emit("runtime-ready", runtime);
     }
   });
+  async add(data) {
+    const runtime = await this.getRuntime();
+    return runtime?.add?.(data);
+  }
+  async remove(data) {
+    const runtime = await this.getRuntime();
+    return runtime?.remove?.(data);
+  }
+  async update(data) {
+    const runtime = await this.getRuntime();
+    runtime?.update?.(data);
+  }
+  async select(els) {
+    const runtime = await this.getRuntime();
+    for (const el of els) {
+      await runtime?.select?.(el.id);
+      if (runtime?.beforeSelect) {
+        await runtime.beforeSelect(el);
+      }
+      this.flagSelectedEl(el);
+    }
+  }
+  setZoom(zoom = DEFAULT_ZOOM) {
+    this.zoom = zoom;
+  }
   async mount(el) {
     if (!this.iframe) {
       throw Error("mount \u5931\u8D25");
@@ -1517,6 +1906,27 @@ class StageRender extends EventEmitter {
   getDocument() {
     return this.contentWindow?.document;
   }
+  getElementsFromPoint(point) {
+    let x = point.clientX;
+    let y = point.clientY;
+    if (this.iframe) {
+      const rect = this.iframe.getClientRects()[0];
+      if (rect) {
+        x = x - rect.left;
+        y = y - rect.top;
+      }
+    }
+    return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
+  }
+  getTargetElement(idOrEl) {
+    if (typeof idOrEl === "string" || typeof idOrEl === "number") {
+      const el = this.getDocument()?.getElementById(`${idOrEl}`);
+      if (!el)
+        throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
+      return el;
+    }
+    return idOrEl;
+  }
   destroy() {
     this.iframe?.removeEventListener("load", this.loadHandler);
     this.contentWindow = null;
@@ -1524,14 +1934,21 @@ class StageRender extends EventEmitter {
     this.iframe = void 0;
     this.removeAllListeners();
   }
+  flagSelectedEl(el) {
+    const doc = this.getDocument();
+    if (doc) {
+      removeSelectedClassName(doc);
+      addSelectedClassName(el, doc);
+    }
+  }
   loadHandler = async () => {
     if (!this.contentWindow?.magic) {
       this.postTmagicRuntimeReady();
     }
     if (!this.contentWindow)
       return;
-    if (this.render) {
-      const el = await this.render();
+    if (this.customizedRender) {
+      const el = await this.customizedRender();
       if (el) {
         this.contentWindow.document?.body?.appendChild(el);
       }
@@ -1551,211 +1968,81 @@ class StageRender extends EventEmitter {
   }
 }
 
-class StageCore extends EventEmitter {
+class StageCore extends EventEmitter$1 {
   container;
-  selectedDom;
-  selectedDomList = [];
-  highlightedDom;
   renderer;
   mask;
-  dr;
-  multiDr;
-  highlightLayer;
-  config;
-  zoom = DEFAULT_ZOOM;
-  containerHighlightClassName;
-  containerHighlightDuration;
-  containerHighlightType;
-  isContainer;
-  canSelect;
+  actionManager;
   pageResizeObserver = null;
+  autoScrollIntoView;
+  customizedRender;
   constructor(config) {
     super();
-    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({ runtimeUrl: config.runtimeUrl, render: this.render.bind(this) });
-    this.mask = new StageMask();
-    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);
-    });
-    this.renderer.on("page-el-update", (el) => {
-      this.mask?.observe(el);
-      this.observePageResize(el);
-    });
-    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) => {
-      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.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.autoScrollIntoView = config.autoScrollIntoView;
+    this.customizedRender = config.render;
+    this.renderer = new StageRender({
+      runtimeUrl: config.runtimeUrl,
+      zoom: config.zoom,
+      customizedRender: async () => {
+        if (this?.customizedRender) {
+          return await this.customizedRender(this);
+        }
+        return null;
       }
-      this.multiSelect(this.selectedDomList);
-      this.emit("multiSelect", this.selectedDomList);
-    });
-    this.dr.on("update", (data) => {
-      setTimeout(() => this.emit("update", data));
-    }).on("sort", (data) => {
-      setTimeout(() => this.emit("sort", data));
-    }).on("select-parent", () => {
-      this.emit("select-parent");
-    });
-    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;
-    let x = event.clientX;
-    let y = event.clientY;
-    if (renderer.iframe) {
-      const rect = renderer.iframe.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
-    }
-    return renderer.getDocument()?.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.isElCanSelect(el, event, stop)) {
-        if (stopped)
-          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;
+    this.mask = new StageMask();
+    this.actionManager = new ActionManager(this.getActionManagerConfig(config));
+    this.initRenderEvent();
+    this.initActionEvent();
+    this.initMaskEvent();
   }
   async select(idOrEl, event) {
-    this.clearSelectStatus("multiSelect");
-    const el = await this.getTargetElement(idOrEl);
-    if (el === this.selectedDom)
+    const el = this.renderer.getTargetElement(idOrEl);
+    if (el === this.actionManager.getSelectedEl())
       return;
-    const runtime = await this.renderer.getRuntime();
-    await runtime?.select?.(el.id);
-    if (runtime?.beforeSelect) {
-      await runtime.beforeSelect(el);
-    }
+    await this.renderer.select([el]);
     this.mask.setLayout(el);
-    this.dr.select(el, event);
-    if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+    this.actionManager.select(el, event);
+    if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
       this.mask.observerIntersection(el);
     }
-    this.selectedDom = el;
-    const doc = this.renderer.getDocument();
-    if (doc) {
-      removeSelectedClassName(doc);
-      if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom, doc);
-      }
-    }
   }
   async multiSelect(idOrElList) {
-    this.clearSelectStatus("select");
-    this.selectedDomList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
-    this.multiDr.multiSelect(this.selectedDomList);
-  }
-  update(data) {
-    const { config } = data;
-    return this.renderer?.getRuntime().then((runtime) => {
-      runtime?.update?.(data);
-      setTimeout(() => {
-        const el = this.renderer.getDocument()?.getElementById(`${config.id}`);
-        if (el && el.id === this.selectedDom?.id) {
-          this.selectedDom = el;
-          this.mask.setLayout(el);
-          this.dr.updateMoveable(el);
-        }
-      }, 0);
-    });
-  }
-  async highlight(idOrEl) {
-    let el;
-    try {
-      el = await this.getTargetElement(idOrEl);
-    } catch (error) {
-      this.highlightLayer.clearHighlight();
+    const els = idOrElList.map((idOrEl) => this.renderer.getTargetElement(idOrEl));
+    if (els.length === 0)
       return;
+    const lastEl = els[els.length - 1];
+    const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
+    await this.renderer.select(els);
+    this.mask.setLayout(lastEl);
+    this.actionManager.multiSelect(idOrElList);
+    if ((this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
+      this.mask.observerIntersection(lastEl);
     }
-    if (el === this.highlightedDom || !el)
-      return;
-    this.highlightLayer.highlight(el);
-    this.highlightedDom = el;
   }
-  sortNode(data) {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
+  highlight(idOrEl) {
+    this.actionManager.highlight(idOrEl);
   }
-  add(data) {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+  async update(data) {
+    const { config } = data;
+    await this.renderer.update(data);
+    setTimeout(() => {
+      const el = this.renderer.getTargetElement(`${config.id}`);
+      if (el && this.actionManager.isSelectedEl(el)) {
+        this.mask.setLayout(el);
+        this.actionManager.setSelectedEl(el);
+        this.actionManager.updateMoveable(el);
+      }
+    });
   }
-  remove(data) {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
+  async add(data) {
+    return await this.renderer.add(data);
   }
-  setZoom(zoom = DEFAULT_ZOOM) {
-    this.zoom = zoom;
+  async remove(data) {
+    return await this.renderer.remove(data);
   }
-  clearSelectStatus(selectType) {
-    if (selectType === "multiSelect") {
-      this.multiDr.clearSelectStatus();
-      this.selectedDomList = [];
-    } else {
-      this.dr.clearSelectStatus();
-    }
+  setZoom(zoom = DEFAULT_ZOOM) {
+    this.renderer.setZoom(zoom);
   }
   async mount(el) {
     this.container = el;
@@ -1766,32 +2053,19 @@ class StageCore extends EventEmitter {
   }
   clearGuides() {
     this.mask.clearGuides();
-    this.dr.clearGuides();
+    this.actionManager.clearGuides();
   }
-  async addContainerHighlightClassName(event, exclude) {
-    const els = this.getElementsFromPoint(event);
-    const { renderer } = this;
-    const doc = renderer.getDocument();
-    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, excludeElList = []) {
+    return this.delayedMarkContainer(event, excludeElList);
   }
-  getAddContainerHighlightClassNameTimeout(event, exclude = []) {
-    return globalThis.setTimeout(() => {
-      this.addContainerHighlightClassName(event, exclude);
-    }, this.containerHighlightDuration);
+  delayedMarkContainer(event, excludeElList = []) {
+    return this.actionManager.delayedMarkContainer(event, excludeElList);
   }
   destroy() {
-    const { mask, renderer, dr, highlightLayer, pageResizeObserver } = this;
+    const { mask, renderer, actionManager, pageResizeObserver } = this;
     renderer.destroy();
     mask.destroy();
-    dr.destroy();
-    highlightLayer.destroy();
+    actionManager.destroy();
     pageResizeObserver?.disconnect();
     this.removeAllListeners();
     this.container = void 0;
@@ -1800,29 +2074,84 @@ class StageCore extends EventEmitter {
     if (typeof ResizeObserver !== "undefined") {
       this.pageResizeObserver = new ResizeObserver((entries) => {
         this.mask.pageResize(entries);
-        if (this.dr.moveable) {
-          this.dr.updateMoveable();
-        }
+        this.actionManager.updateMoveable();
       });
       this.pageResizeObserver.observe(page);
     }
   }
-  async render() {
-    if (this.config?.render) {
-      return await this.config.render(this);
-    }
-    return null;
+  getActionManagerConfig(config) {
+    const actionManagerConfig = {
+      containerHighlightClassName: config.containerHighlightClassName,
+      containerHighlightDuration: config.containerHighlightDuration,
+      containerHighlightType: config.containerHighlightType,
+      moveableOptions: config.moveableOptions,
+      multiMoveableOptions: config.multiMoveableOptions,
+      container: this.mask.content,
+      canSelect: config.canSelect,
+      isContainer: config.isContainer,
+      updateDragEl: config.updateDragEl,
+      getRootContainer: () => this.container,
+      getRenderDocument: () => this.renderer.getDocument(),
+      getTargetElement: (idOrEl) => this.renderer.getTargetElement(idOrEl),
+      getElementsFromPoint: (point) => this.renderer.getElementsFromPoint(point)
+    };
+    return actionManagerConfig;
   }
-  async getTargetElement(idOrEl) {
-    if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-      const el = this.renderer.getDocument()?.getElementById(`${idOrEl}`);
-      if (!el)
-        throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
-      return el;
-    }
-    return idOrEl;
+  initRenderEvent() {
+    this.renderer.on("runtime-ready", (runtime) => {
+      this.emit("runtime-ready", runtime);
+    });
+    this.renderer.on("page-el-update", (el) => {
+      this.mask?.observe(el);
+      this.observePageResize(el);
+    });
+  }
+  initMaskEvent() {
+    this.mask.on("change-guides", (data) => {
+      this.actionManager.setGuidelines(data.type, data.guides);
+      this.emit("change-guides", data);
+    });
+  }
+  initActionEvent() {
+    this.initActionManagerEvent();
+    this.initDrEvent();
+    this.initMulDrEvent();
+    this.initHighlightEvent();
+  }
+  initActionManagerEvent() {
+    this.actionManager.on("before-select", (idOrEl, event) => {
+      this.select(idOrEl, event);
+    }).on("select", (selectedEl) => {
+      this.emit("select", selectedEl);
+    }).on("before-multi-select", (idOrElList) => {
+      this.multiSelect(idOrElList);
+    }).on("multi-select", (selectedElList) => {
+      this.emit("multi-select", selectedElList);
+    });
+  }
+  initDrEvent() {
+    this.actionManager.on("update", (data) => {
+      this.emit("update", data);
+    }).on("sort", (data) => {
+      this.emit("sort", data);
+    }).on("select-parent", () => {
+      this.emit("select-parent");
+    });
+  }
+  initMulDrEvent() {
+    this.actionManager.on("change-to-select", (el) => {
+      this.select(el);
+      setTimeout(() => this.emit("select", el));
+    }).on("multi-update", (data, parentEl) => {
+      this.emit("update", { data, parentEl });
+    });
+  }
+  initHighlightEvent() {
+    this.actionManager.on("highlight", async (highlightEl) => {
+      this.emit("highlight", highlightEl);
+    });
   }
 }
 
-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, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.mjs.map