@tmagic/stage 1.2.0-beta.2 → 1.2.0-beta.21

package/dist/{tmagic-stage.umd.js → tmagic-stage.umd.cjs}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('@tmagic/utils'), require('keycon'), require('moveable'), require('moveable-helper'), require('lodash-es'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', '@tmagic/utils', 'keycon', 'moveable', 'moveable-helper', 'lodash-es', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.utils, global.KeyController, global.Moveable, global.MoveableHelper, global.lodashEs, global.Guides));
-})(this, (function (exports, EventEmitter, utils, KeyController, Moveable, MoveableHelper, lodashEs, Guides) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('keycon'), require('lodash-es'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('moveable-helper'), require('@scena/guides')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'events', 'keycon', 'lodash-es', '@tmagic/core', '@tmagic/utils', 'moveable', 'moveable-helper', '@scena/guides'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.KeyController, global.lodashEs, global.core, global.utils, global.Moveable, global.MoveableHelper, global.Guides));
+})(this, (function (exports, EventEmitter, KeyController, lodashEs, core, utils, Moveable, MoveableHelper, Guides) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -15,7 +15,7 @@
   const GHOST_EL_ID_PREFIX = "ghost_el_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
   const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
-  const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
+  const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
   const PAGE_CLASS = "magic-ui-page";
   const DEFAULT_ZOOM = 1;
   var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
@@ -45,18 +45,6 @@
   })(Mode || {});
   const SELECTED_CLASS = "tmagic-stage-selected-area";
 
-  var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-    ContainerHighlightType2["DEFAULT"] = "default";
-    ContainerHighlightType2["ALT"] = "alt";
-    return ContainerHighlightType2;
-  })(ContainerHighlightType || {});
-  var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-    StageDragStatus2["START"] = "start";
-    StageDragStatus2["ING"] = "ing";
-    StageDragStatus2["END"] = "end";
-    return StageDragStatus2;
-  })(StageDragStatus || {});
-
   const getParents = (el, relative) => {
     let cur = el.parentElement;
     const parents = [];
@@ -67,9 +55,10 @@
     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 {
@@ -82,7 +71,7 @@
       top
     };
   };
-  const getTargetElStyle = (el) => {
+  const getTargetElStyle = (el, zIndex) => {
     const offset = getOffset(el);
     const { transform } = getComputedStyle(el);
     return `
@@ -92,7 +81,7 @@
     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 }) => {
@@ -141,6 +130,8 @@
       return null;
     for (let parent = element; parent.parentElement; ) {
       parent = parent.parentElement;
+      if (parent.tagName === "HTML")
+        return parent;
       style = getComputedStyle(parent);
       if (isAbsolute(style) && isStatic(style))
         continue;
@@ -225,144 +216,500 @@
       dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
     };
   };
+  const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
 
-  class StageDragResize extends EventEmitter.EventEmitter {
-    core;
-    mask;
+  class TargetShadow {
+    el;
+    els = [];
+    idPrefix = "target_calibrate_";
     container;
+    scrollLeft = 0;
+    scrollTop = 0;
+    zIndex;
+    updateDragEl;
+    constructor(config) {
+      this.container = config.container;
+      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);
+    }
+    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.els = targetGroup.map((target, index) => this.updateEl(target, this.els[index]));
+      return this.els;
+    }
+    destroyEl() {
+      this.el?.remove();
+      this.el = void 0;
+    }
+    destroyEls() {
+      this.els.forEach((el) => {
+        el.remove();
+      });
+      this.els = [];
+    }
+    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);
+      }
+      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;
+    }
+    scrollHandler = (e) => {
+      this.scrollLeft = e.detail.scrollLeft;
+      this.scrollTop = e.detail.scrollTop;
+    };
+  }
+
+  class DragResizeHelper {
+    targetShadow;
     target;
-    dragEl;
-    moveable;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
-    elementGuidelines = [];
-    mode = Mode.ABSOLUTE;
-    moveableOptions = {};
-    dragStatus = StageDragStatus.END;
-    ghostEl;
+    targetList = [];
     moveableHelper;
-    isContainerHighlight = false;
+    ghostEl;
+    frameSnapShot = {
+      left: 0,
+      top: 0
+    };
+    framesSnapShot = [];
+    mode = Mode.ABSOLUTE;
     constructor(config) {
-      super();
-      this.core = config.core;
-      this.container = config.container;
-      this.mask = config.mask;
-      KeyController__default.default.global.keydown("alt", (e) => {
-        e.inputEvent.preventDefault();
-        this.isContainerHighlight = true;
+      this.moveableHelper = MoveableHelper__default.default.create({
+        useBeforeRender: true,
+        useRender: false,
+        createAuto: true
       });
-      KeyController__default.default.global.keyup("alt", (e) => {
-        e.inputEvent.preventDefault();
-        const doc = this.core.renderer.contentWindow?.document;
-        if (doc && this.canContainerHighlight()) {
-          utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
-        }
-        this.isContainerHighlight = false;
+      this.targetShadow = new TargetShadow({
+        container: config.container,
+        updateDragEl: config.updateDragEl,
+        zIndex: ZIndex.DRAG_EL,
+        idPrefix: DRAG_EL_ID_PREFIX
       });
     }
-    select(el, event) {
-      const oldTarget = this.target;
+    destroy() {
+      this.targetShadow.destroy();
+      this.destroyGhostEl();
+      this.moveableHelper.clear();
+    }
+    destroyShadowEl() {
+      this.targetShadow.destroyEl();
+    }
+    getShadowEl() {
+      return this.targetShadow.el;
+    }
+    updateShadowEl(el) {
+      this.destroyGhostEl();
       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__default.default.create({
-          useBeforeRender: true,
-          useRender: false,
-          createAuto: true
-        });
-        this.initMoveable();
+      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.updateMoveable();
+        this.moveableHelper.onResize(e);
+        this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0]}px`;
+        this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1]}px`;
       }
-      if (event) {
-        this.moveable?.dragStart(event);
+      this.target.style.width = `${width}px`;
+      this.target.style.height = `${height}px`;
+    }
+    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;
     }
-    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;
+    onDrag(e) {
+      if (this.ghostEl) {
+        this.ghostEl.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
+        return;
+      }
+      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`;
+    }
+    onRotateStart(e) {
+      this.moveableHelper.onRotateStart(e);
+    }
+    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;
+        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.moveable.updateTarget();
+      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;
+        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.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__default.default {
+    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;
-        this.moveableOptions.horizontalGuidelines = guidelines;
       } else if (type === GuidesType.VERTICAL) {
         this.verticalGuidelines = guidelines;
-        this.moveableOptions.verticalGuidelines = guidelines;
-      }
-      if (this.moveable) {
-        this.updateMoveable();
       }
+      this.emit("update-moveable");
     }
     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();
-    }
-    destroy() {
-      this.moveable?.destroy();
-      this.destroyGhostEl();
-      this.destroyDragEl();
-      this.dragStatus = StageDragStatus.END;
-      this.removeAllListeners();
-    }
-    init(el) {
-      if (/(auto|scroll)/.test(el.style.overflow)) {
-        el.style.overflow = "hidden";
-      }
-      this.mode = getMode(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.moveableOptions = this.getOptions({
-        target: this.dragEl
-      });
+      this.emit("update-moveable");
     }
-    setElementGuidelines(nodes) {
+    setElementGuidelines(selectedElList, allElList) {
       this.elementGuidelines.forEach((node) => {
         node.remove();
       });
       this.elementGuidelines = [];
       if (this.mode === Mode.ABSOLUTE) {
-        this.container.append(this.createGuidelineElements(nodes));
+        this.container.append(this.createGuidelineElements(selectedElList, allElList));
+      }
+    }
+    getOptions(isMultiSelect, runtimeOptions = {}) {
+      const defaultOptions = this.getDefaultOptions(isMultiSelect);
+      const customizedOptions = this.getCustomizeOptions();
+      return lodashEs.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 lodashEs.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(nodes) {
+    createGuidelineElements(selectedElList, allElList) {
       const frame = globalThis.document.createDocumentFragment();
-      for (const node of nodes) {
+      for (const node of allElList) {
         const { width, height } = node.getBoundingClientRect();
-        if (node === this.target)
+        if (this.isInElementList(node, selectedElList))
           continue;
         const { left, top } = getOffset(node);
         const elementGuideline = globalThis.document.createElement("div");
@@ -372,10 +719,109 @@
       }
       return frame;
     }
-    initMoveable() {
-      this.moveable?.destroy();
-      this.moveable = new Moveable__default.default(this.container, {
-        ...this.moveableOptions
+    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__default.default(this.container, {
+        ...options
       });
       this.bindResizeEvent();
       this.bindDragEvent();
@@ -385,34 +831,16 @@
     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)
           return;
         this.dragStatus = StageDragStatus.START;
-        this.moveableHelper?.onResizeStart(e);
-        frame.top = this.target.offsetTop;
-        frame.left = this.target.offsetLeft;
+        this.dragResizeHelper.onResizeStart(e);
       }).on("resize", (e) => {
-        const { width, height, drag } = e;
-        if (!this.moveable || !this.target || !this.dragEl)
+        if (!this.moveable || !this.target || !this.dragResizeHelper.getShadowEl())
           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`;
-        }
-        this.target.style.width = `${width}px`;
-        this.target.style.height = `${height}px`;
+        this.dragResizeHelper.onResize(e);
       }).on("resizeEnd", () => {
         this.dragStatus = StageDragStatus.END;
         this.update(true);
@@ -421,50 +849,28 @@
     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;
+        this.dragResizeHelper.onDragStart(e);
       }).on("drag", (e) => {
-        if (!this.target || !this.dragEl)
+        if (!this.target || !this.dragResizeHelper.getShadowEl())
           return;
         if (timeout) {
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        if (this.canContainerHighlight()) {
-          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
-        }
+        timeout = this.delayedMarkContainer(e.inputEvent, [this.target]);
         this.dragStatus = StageDragStatus.ING;
-        if (this.ghostEl) {
-          this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
-          return;
-        }
-        this.moveableHelper?.onDrag(e);
-        this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
-        this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
+        this.dragResizeHelper.onDrag(e);
       }).on("dragEnd", () => {
         if (timeout) {
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        let parentEl = null;
-        if (doc && this.canContainerHighlight()) {
-          parentEl = utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
-        }
+        const parentEl = this.markContainerEnd();
         if (this.dragStatus === StageDragStatus.ING) {
           if (parentEl) {
             this.update(false, parentEl);
@@ -479,7 +885,7 @@
           }
         }
         this.dragStatus = StageDragStatus.END;
-        this.destroyGhostEl();
+        this.dragResizeHelper.destroyGhostEl();
       });
     }
     bindRotateEvent() {
@@ -487,17 +893,15 @@
         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: [
             {
@@ -515,17 +919,15 @@
         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: [
             {
@@ -539,9 +941,9 @@
       });
     }
     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) {
@@ -560,8 +962,7 @@
     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 };
@@ -569,11 +970,16 @@
       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: [
@@ -585,187 +991,23 @@
         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;
-    }
-    setGhostElChildrenId(el) {
-      for (const child of Array.from(el.children)) {
-        if (child.id) {
-          child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
-        }
-        if (child.children.length) {
-          this.setGhostElChildrenId(child);
-        }
-      }
-    }
-    destroyGhostEl() {
-      this.ghostEl?.remove();
-      this.ghostEl = void 0;
-    }
-    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;
-      }
-      return {
-        origin: false,
-        rootContainer: this.core.container,
-        zoom: 1,
-        dragArea: false,
-        draggable: true,
-        resizable: true,
-        scalable: false,
-        rotatable: false,
-        snappable: isAbsolute || isFixed,
-        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 || {}
-        },
-        ...options,
-        ...moveableOptions
-      };
-    }
-    canContainerHighlight() {
-      return this.core.containerHighlightType === ContainerHighlightType.DEFAULT || this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight;
-    }
-  }
-
-  class TargetCalibrate extends EventEmitter.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);
-      }
-      return this.operationEl;
-    }
-    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
-        };
-      }
-      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
-        };
-      }
-      if (getMode(el) === Mode.FIXED) {
-        return {
-          left: left + this.mask.scrollLeft,
-          top: top + this.mask.scrollTop
-        };
-      }
-      return {
-        left,
-        top
-      };
-    }
   }
 
   class StageHighlight extends EventEmitter.EventEmitter {
-    core;
     container;
     target;
     moveable;
-    calibrationTarget;
+    targetShadow;
+    getRootContainer;
     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
+      this.getRootContainer = config.getRootContainer;
+      this.targetShadow = new TargetShadow({
+        container: config.container,
+        updateDragEl: config.updateDragEl,
+        zIndex: ZIndex.HIGHLIGHT_EL,
+        idPrefix: HIGHLIGHT_EL_ID_PREFIX
       });
     }
     highlight(el) {
@@ -774,14 +1016,14 @@
       this.target = el;
       this.moveable?.destroy();
       this.moveable = new Moveable__default.default(this.container, {
-        target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
+        target: this.targetShadow.update(el),
         origin: false,
-        rootContainer: this.core.container,
+        rootContainer: this.getRootContainer(),
         zoom: 2
       });
     }
     clearHighlight() {
-      if (!this.moveable)
+      if (!this.moveable || !this.target)
         return;
       this.target = void 0;
       this.moveable.target = null;
@@ -789,62 +1031,529 @@
     }
     destroy() {
       this.moveable?.destroy();
-      this.calibrationTarget.destroy();
+      this.targetShadow.destroy();
     }
   }
 
-  class Rule extends EventEmitter__default.default {
-    hGuides;
-    vGuides;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
+  class StageMultiDragResize extends MoveableOptionsManager {
     container;
-    containerResizeObserver;
-    constructor(container) {
-      super();
-      this.container = container;
-      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
-      this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
-      this.hGuides.on("changeGuides", this.hGuidesChangeGuidesHandler);
-      this.vGuides.on("changeGuides", this.vGuidesChangeGuidesHandler);
-      this.containerResizeObserver = new ResizeObserver(() => {
-        this.vGuides.resize();
-        this.hGuides.resize();
-      });
-      this.containerResizeObserver.observe(this.container);
-    }
-    showGuides(show = true) {
-      this.hGuides.setState({
-        showGuides: show
+    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.vGuides.setState({
-        showGuides: show
+      this.on("update-moveable", () => {
+        if (this.moveableForMulti) {
+          this.updateMoveable();
+        }
       });
     }
-    setGuides([hLines, vLines]) {
-      this.horizontalGuidelines = hLines;
-      this.verticalGuidelines = vLines;
-      this.hGuides.setState({
-        defaultGuides: hLines
-      });
-      this.vGuides.setState({
-        defaultGuides: vLines
+    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__default.default(
+        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, ""));
+        }
       });
-      this.emit("changeGuides", {
-        type: GuidesType.HORIZONTAL,
-        guides: hLines
+    }
+    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;
+    }
+    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()
       });
-      this.emit("changeGuides", {
-        type: GuidesType.VERTICAL,
-        guides: vLines
+      Object.entries(options).forEach(([key, value]) => {
+        this.moveableForMulti[key] = value;
       });
+      this.moveableForMulti.updateTarget();
     }
-    clearGuides() {
-      this.setGuides([[], []]);
+    clearSelectStatus() {
+      if (!this.moveableForMulti)
+        return;
+      this.dragResizeHelper.clearMultiSelectStatus();
+      this.moveableForMulti.target = null;
+      this.moveableForMulti.updateTarget();
+      this.targetList = [];
     }
-    showRule(show = true) {
-      if (show) {
-        this.hGuides.destroy();
+    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__default.default {
+    dr;
+    multiDr;
+    highlightLayer;
+    container;
+    selectedEl;
+    selectedElList = [];
+    highlightedEl;
+    isMultiSelectStatus = false;
+    containerHighlightClassName;
+    containerHighlightDuration;
+    containerHighlightType;
+    isAltKeydown = false;
+    getTargetElement;
+    getElementsFromPoint;
+    canSelect;
+    isContainer;
+    getRenderDocument;
+    mouseMoveHandler = lodashEs.throttle(async (event) => {
+      const el = await this.getElementFromPoint(event);
+      if (!el) {
+        this.clearHighlight();
+        return;
+      }
+      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;
+        },
+        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);
+    }
+    clearHighlight() {
+      this.setHighlightEl(void 0);
+      this.highlightLayer.clearHighlight();
+    }
+    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)) {
+          utils.addClassName(el, doc, this.containerHighlightClassName);
+          break;
+        }
+      }
+    }
+    delayedMarkContainer(event, excludeElList = []) {
+      return globalThis.setTimeout(() => {
+        this.addContainerHighlightClassName(event, excludeElList);
+      }, this.containerHighlightDuration);
+    }
+    destroy() {
+      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;
+        };
+      }
+      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;
+      }
+      const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+      if (existIndex !== -1) {
+        this.selectedElList.splice(existIndex, 1);
+      } else {
+        this.selectedElList.push(el);
+      }
+    }
+    canAddToContainer() {
+      return this.containerHighlightType === ContainerHighlightType.DEFAULT || this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown;
+    }
+    markContainerEnd() {
+      const doc = this.getRenderDocument();
+      if (doc && this.canAddToContainer()) {
+        return utils.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 core.Env();
+      const ctrl = isMac ? "meta" : "ctrl";
+      KeyController__default.default.global.keydown(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        this.isMultiSelectStatus = true;
+      });
+      KeyController__default.default.global.on("blur", () => {
+        this.isMultiSelectStatus = false;
+      });
+      KeyController__default.default.global.keyup(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        this.isMultiSelectStatus = false;
+      });
+      KeyController__default.default.global.keydown("alt", (e) => {
+        e.inputEvent.preventDefault();
+        this.isAltKeydown = true;
+      });
+      KeyController__default.default.global.keyup("alt", (e) => {
+        e.inputEvent.preventDefault();
+        this.markContainerEnd();
+        this.isAltKeydown = false;
+      });
+    }
+    initActionEvent() {
+      this.dr.on("update", (data) => {
+        setTimeout(() => this.emit("update", data));
+      }).on("sort", (data) => {
+        setTimeout(() => this.emit("sort", data));
+      }).on("select-parent", () => {
+        this.emit("select-parent");
+      });
+      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);
+      });
+    }
+    mouseDownHandler = async (event) => {
+      this.clearHighlight();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      if (this.isStopTriggerSelect(event))
+        return;
+      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);
+      }
+      utils.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 = () => {
+      utils.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__default.default {
+    hGuides;
+    vGuides;
+    horizontalGuidelines = [];
+    verticalGuidelines = [];
+    container;
+    containerResizeObserver;
+    isShowGuides = true;
+    constructor(container) {
+      super();
+      this.container = container;
+      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+      this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
+      this.hGuides.on("changeGuides", this.hGuidesChangeGuidesHandler);
+      this.vGuides.on("changeGuides", this.vGuidesChangeGuidesHandler);
+      this.containerResizeObserver = new ResizeObserver(() => {
+        this.vGuides.resize();
+        this.hGuides.resize();
+      });
+      this.containerResizeObserver.observe(this.container);
+    }
+    showGuides(isShowGuides = true) {
+      this.isShowGuides = isShowGuides;
+      this.hGuides.setState({
+        showGuides: isShowGuides
+      });
+      this.vGuides.setState({
+        showGuides: isShowGuides
+      });
+    }
+    setGuides([hLines, vLines]) {
+      this.horizontalGuidelines = hLines;
+      this.verticalGuidelines = vLines;
+      this.hGuides.setState({
+        defaultGuides: hLines
+      });
+      this.vGuides.setState({
+        defaultGuides: vLines
+      });
+      this.emit("change-guides", {
+        type: GuidesType.HORIZONTAL,
+        guides: hLines
+      });
+      this.emit("change-guides", {
+        type: GuidesType.VERTICAL,
+        guides: vLines
+      });
+    }
+    clearGuides() {
+      this.setGuides([[], []]);
+    }
+    showRule(show = true) {
+      if (show) {
+        this.hGuides.destroy();
         this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
         this.vGuides.destroy();
         this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
@@ -888,18 +1597,19 @@
       backgroundColor: "#fff",
       lineColor: "#000",
       textColor: "#000",
-      style: this.getGuidesStyle(type)
+      style: this.getGuidesStyle(type),
+      showGuides: this.isShowGuides
     });
     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
       });
@@ -907,9 +1617,8 @@
   }
 
   const wrapperClassName = "editor-mask-wrapper";
-  const throttleTime = 100;
   const hideScrollbar = () => {
-    utils.injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
+    utils.injectStyle(utils.getDocument(), `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
   };
   const createContent = () => utils.createDiv({
     className: "editor-mask",
@@ -939,9 +1648,7 @@
   class StageMask extends Rule {
     content = createContent();
     wrapper;
-    core;
     page = null;
-    pageScrollParent = null;
     scrollTop = 0;
     scrollLeft = 0;
     width = 0;
@@ -950,41 +1657,21 @@
     wrapperWidth = 0;
     maxScrollTop = 0;
     maxScrollLeft = 0;
-    intersectionObserver = null;
-    isMultiSelectStatus = false;
     mode = Mode.ABSOLUTE;
-    pageResizeObserver = null;
+    pageScrollParent = null;
+    intersectionObserver = null;
     wrapperResizeObserver = null;
-    highlightHandler = lodashEs.throttle((event) => {
-      this.emit("highlight", event);
-    }, throttleTime);
-    constructor(config) {
+    constructor() {
       const wrapper = createWrapper();
       super(wrapper);
       this.wrapper = wrapper;
-      this.core = config.core;
-      this.content.addEventListener("mousedown", this.mouseDownHandler);
-      this.wrapper.appendChild(this.content);
       this.content.addEventListener("wheel", this.mouseWheelHandler);
-      this.content.addEventListener("mousemove", this.highlightHandler);
-      this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
-      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-      const ctrl = isMac ? "meta" : "ctrl";
-      KeyController__default.default.global.keydown(ctrl, (e) => {
-        e.inputEvent.preventDefault();
-        this.isMultiSelectStatus = true;
-      });
-      KeyController__default.default.global.on("blur", () => {
-        this.isMultiSelectStatus = false;
-      });
-      KeyController__default.default.global.keyup(ctrl, (e) => {
-        e.inputEvent.preventDefault();
-        this.isMultiSelectStatus = false;
-      });
+      this.wrapper.appendChild(this.content);
     }
     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`;
@@ -997,9 +1684,44 @@
       if (!page)
         return;
       this.page = page;
-      this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
-      this.pageResizeObserver?.disconnect();
+      this.initObserverIntersection();
+      this.initObserverWrapper();
+    }
+    pageResize(entries) {
+      const [entry] = entries;
+      const { clientHeight, clientWidth } = entry.target;
+      this.setHeight(clientHeight);
+      this.setWidth(clientWidth);
+      this.scroll();
+    }
+    observerIntersection(el) {
+      this.intersectionObserver?.observe(el);
+    }
+    mount(el) {
+      if (!this.content)
+        throw new Error("content \u4E0D\u5B58\u5728");
+      el.appendChild(this.wrapper);
+    }
+    setLayout(el) {
+      this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
+    }
+    scrollIntoView(el) {
+      el.scrollIntoView();
+      if (!this.pageScrollParent)
+        return;
+      this.scrollLeft = this.pageScrollParent.scrollLeft;
+      this.scrollTop = this.pageScrollParent.scrollTop;
+      this.scroll();
+    }
+    destroy() {
+      this.content?.remove();
+      this.page = null;
+      this.pageScrollParent = null;
       this.wrapperResizeObserver?.disconnect();
+      super.destroy();
+    }
+    initObserverIntersection() {
+      this.pageScrollParent = getScrollParent(this.page) || null;
       this.intersectionObserver?.disconnect();
       if (typeof IntersectionObserver !== "undefined") {
         this.intersectionObserver = new IntersectionObserver(
@@ -1019,18 +1741,10 @@
           }
         );
       }
+    }
+    initObserverWrapper() {
+      this.wrapperResizeObserver?.disconnect();
       if (typeof ResizeObserver !== "undefined") {
-        this.pageResizeObserver = new ResizeObserver((entries) => {
-          const [entry] = entries;
-          const { clientHeight, clientWidth } = entry.target;
-          this.setHeight(clientHeight);
-          this.setWidth(clientWidth);
-          this.scroll();
-          if (this.core.dr.moveable) {
-            this.core.dr.updateMoveable();
-          }
-        });
-        this.pageResizeObserver.observe(page);
         this.wrapperResizeObserver = new ResizeObserver((entries) => {
           const [entry] = entries;
           const { clientHeight, clientWidth } = entry.target;
@@ -1042,338 +1756,75 @@
         this.wrapperResizeObserver.observe(this.wrapper);
       }
     }
-    mount(el) {
-      if (!this.content)
-        throw new Error("content \u4E0D\u5B58\u5728");
-      el.appendChild(this.wrapper);
-    }
-    setLayout(el) {
-      this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
-    }
-    scrollIntoView(el) {
-      el.scrollIntoView();
-      if (!this.pageScrollParent)
-        return;
-      this.scrollLeft = this.pageScrollParent.scrollLeft;
-      this.scrollTop = this.pageScrollParent.scrollTop;
-      this.scroll();
-    }
-    destroy() {
-      this.content?.remove();
-      this.page = null;
-      this.pageScrollParent = null;
-      this.pageResizeObserver?.disconnect();
-      this.wrapperResizeObserver?.disconnect();
-      this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
-      super.destroy();
-    }
     scroll() {
       this.fixScrollValue();
       let { scrollLeft, scrollTop } = this;
       if (this.pageScrollParent) {
         this.pageScrollParent.scrollTo({
           top: scrollTop,
-          left: scrollLeft
-        });
-      }
-      if (this.mode === Mode.FIXED) {
-        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 (!this.isMultiSelectStatus && event.target.className.indexOf("moveable-area") !== -1) {
-        return;
-      }
-      if (event.target.className.indexOf("moveable-control") !== -1) {
-        return;
-      }
-      this.content.removeEventListener("mousemove", this.highlightHandler);
-      if (this.isMultiSelectStatus) {
-        this.emit("beforeMultiSelect", event);
-      } else {
-        this.emit("beforeSelect", event);
-      }
-      globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-    };
-    mouseUpHandler = () => {
-      globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-      this.content.addEventListener("mousemove", this.highlightHandler);
-      if (!this.isMultiSelectStatus) {
-        this.emit("select");
-      }
-    };
-    mouseWheelHandler = (event) => {
-      this.emit("clearHighlight");
-      if (!this.page)
-        throw new Error("page \u672A\u521D\u59CB\u5316");
-      const { deltaY, deltaX } = event;
-      if (this.page.clientHeight < this.wrapperHeight && deltaY)
-        return;
-      if (this.page.clientWidth < this.wrapperWidth && deltaX)
-        return;
-      if (this.maxScrollTop > 0) {
-        this.scrollTop = this.scrollTop + deltaY;
-      }
-      if (this.maxScrollLeft > 0) {
-        this.scrollLeft = this.scrollLeft + deltaX;
-      }
-      this.scroll();
-      this.emit("scroll", event);
-    };
-    mouseLeaveHandler = () => {
-      setTimeout(() => this.emit("clearHighlight"), throttleTime);
-    };
-  }
-
-  class StageMultiDragResize extends EventEmitter.EventEmitter {
-    core;
-    mask;
-    container;
-    targetList = [];
-    dragElList = [];
-    moveableForMulti;
-    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__default.default(
-        this.container,
-        this.getOptions({
-          target: this.dragElList
-        })
-      );
-      this.multiMoveableHelper = MoveableHelper__default.default.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`;
-          }
+          left: scrollLeft
         });
-        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, ""));
+      }
+      if (this.mode === Mode.FIXED) {
+        scrollLeft = 0;
+        scrollTop = 0;
+      }
+      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";
@@ -1383,13 +1834,13 @@
     runtime = null;
     iframe;
     runtimeUrl;
-    core;
-    render;
-    constructor({ core }) {
+    zoom = DEFAULT_ZOOM;
+    customizedRender;
+    constructor({ runtimeUrl, zoom, customizedRender }) {
       super();
-      this.core = core;
-      this.runtimeUrl = core.config.runtimeUrl || "";
-      this.render = core.config.render;
+      this.runtimeUrl = runtimeUrl || "";
+      this.customizedRender = customizedRender;
+      this.setZoom(zoom);
       this.iframe = globalThis.document.createElement("iframe");
       this.iframe.src = utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
       this.iframe.style.cssText = `
@@ -1407,6 +1858,31 @@
         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");
@@ -1432,6 +1908,30 @@
         this.on("runtime-ready", listener);
       });
     };
+    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;
@@ -1439,14 +1939,21 @@
       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(this.core);
+      if (this.customizedRender) {
+        const el = await this.customizedRender();
         if (el) {
           this.contentWindow.document?.body?.appendChild(el);
         }
@@ -1468,205 +1975,79 @@
 
   class StageCore extends EventEmitter.EventEmitter {
     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({ core: this });
-      this.mask = new StageMask({ core: this });
-      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.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.dr.on("update", (data) => {
-        setTimeout(() => this.emit("update", data));
-      }).on("sort", (data) => {
-        setTimeout(() => this.emit("sort", data));
-      });
-      this.multiDr.on("update", (data) => {
-        setTimeout(() => this.emit("update", data));
-      }).on("select", async (id) => {
-        const el = await this.getTargetElement(id);
-        this.select(el);
-        setTimeout(() => this.emit("select", el));
       });
-    }
-    getElementsFromPoint(event) {
-      const { renderer, zoom } = this;
-      const doc = renderer.contentWindow?.document;
-      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 doc?.elementsFromPoint(x / zoom, y / zoom);
-    }
-    async getElementFromPoint(event) {
-      const els = this.getElementsFromPoint(event);
-      let stopped = false;
-      const stop = () => stopped = true;
-      for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.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.mask.intersectionObserver?.observe(el);
-      }
-      this.selectedDom = el;
-      if (this.renderer.contentWindow) {
-        removeSelectedClassName(this.renderer.contentWindow.document);
-        if (this.selectedDom) {
-          addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
-        }
+      this.actionManager.select(el, event);
+      if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+        this.mask.observerIntersection(el);
       }
     }
     async multiSelect(idOrElList) {
-      this.clearSelectStatus("select");
-      const elList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
-      this.multiDr.multiSelect(elList);
-      this.emit("multiSelect", elList);
-    }
-    update(data) {
-      const { config } = data;
-      return this.renderer?.getRuntime().then((runtime) => {
-        runtime?.update?.(data);
-        setTimeout(() => {
-          const el = this.renderer.contentWindow?.document.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;
@@ -1677,47 +2058,107 @@
     }
     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.contentWindow?.document;
-      if (!doc)
-        return;
-      for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !exclude.includes(el)) {
-          utils.addClassName(el, doc, this.containerHighlightClassName);
-          break;
-        }
-      }
+    getAddContainerHighlightClassNameTimeout(event, 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 } = 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;
     }
-    async getTargetElement(idOrEl) {
-      if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-        const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
-        if (!el)
-          throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
-        return el;
+    observePageResize(page) {
+      if (typeof ResizeObserver !== "undefined") {
+        this.pageResizeObserver = new ResizeObserver((entries) => {
+          this.mask.pageResize(entries);
+          this.actionManager.updateMoveable();
+        });
+        this.pageResizeObserver.observe(page);
       }
-      return idOrEl;
+    }
+    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;
+    }
+    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);
+      });
     }
   }
 
-  exports.CONTAINER_HIGHLIGHT_CLASS = CONTAINER_HIGHLIGHT_CLASS;
+  exports.CONTAINER_HIGHLIGHT_CLASS_NAME = CONTAINER_HIGHLIGHT_CLASS_NAME;
   exports.ContainerHighlightType = ContainerHighlightType;
   exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
   exports.DRAG_EL_ID_PREFIX = DRAG_EL_ID_PREFIX;
@@ -1728,6 +2169,7 @@
   exports.MouseButton = MouseButton;
   exports.PAGE_CLASS = PAGE_CLASS;
   exports.SELECTED_CLASS = SELECTED_CLASS;
+  exports.SelectStatus = SelectStatus;
   exports.StageDragResize = StageDragResize;
   exports.StageDragStatus = StageDragStatus;
   exports.StageMask = StageMask;
@@ -1745,6 +2187,7 @@
   exports.isAbsolute = isAbsolute;
   exports.isFixed = isFixed;
   exports.isFixedParent = isFixedParent;
+  exports.isMoveableButton = isMoveableButton;
   exports.isRelative = isRelative;
   exports.isStatic = isStatic;
   exports.removeSelectedClassName = removeSelectedClassName;
@@ -1753,4 +2196,4 @@
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
-//# sourceMappingURL=tmagic-stage.umd.js.map
+//# sourceMappingURL=tmagic-stage.umd.cjs.map