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

package/dist/tmagic-stage.js

@@ -0,0 +1,2157 @@
+import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
+import KeyController from 'keycon';
+import { merge, throttle } from 'lodash-es';
+import { Env } from '@tmagic/core';
+import { removeClassName, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
+import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
+import Guides from '@scena/guides';
+
+const GHOST_EL_ID_PREFIX = "ghost_el_";
+const DRAG_EL_ID_PREFIX = "drag_el_";
+const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
+const PAGE_CLASS = "magic-ui-page";
+const DEFAULT_ZOOM = 1;
+var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
+  GuidesType2["HORIZONTAL"] = "horizontal";
+  GuidesType2["VERTICAL"] = "vertical";
+  return GuidesType2;
+})(GuidesType || {});
+var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
+  ZIndex2["MASK"] = "99999";
+  ZIndex2["SELECTED_EL"] = "666";
+  ZIndex2["GHOST_EL"] = "700";
+  ZIndex2["DRAG_EL"] = "9";
+  ZIndex2["HIGHLIGHT_EL"] = "8";
+  return ZIndex2;
+})(ZIndex || {});
+var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
+  MouseButton2[MouseButton2["LEFT"] = 0] = "LEFT";
+  MouseButton2[MouseButton2["MIDDLE"] = 1] = "MIDDLE";
+  MouseButton2[MouseButton2["RIGHT"] = 2] = "RIGHT";
+  return MouseButton2;
+})(MouseButton || {});
+var Mode = /* @__PURE__ */ ((Mode2) => {
+  Mode2["ABSOLUTE"] = "absolute";
+  Mode2["FIXED"] = "fixed";
+  Mode2["SORTABLE"] = "sortable";
+  return Mode2;
+})(Mode || {});
+const SELECTED_CLASS = "tmagic-stage-selected-area";
+
+const getParents = (el, relative) => {
+  let cur = el.parentElement;
+  const parents = [];
+  while (cur && cur !== relative) {
+    parents.push(cur);
+    cur = cur.parentElement;
+  }
+  return parents;
+};
+const getOffset = (el) => {
+  const htmlEl = el;
+  const { offsetParent } = htmlEl;
+  const left = htmlEl.offsetLeft || 0;
+  const top = htmlEl.offsetTop || 0;
+  if (offsetParent) {
+    const parentOffset = getOffset(offsetParent);
+    return {
+      left: left + parentOffset.left,
+      top: top + parentOffset.top
+    };
+  }
+  return {
+    left,
+    top
+  };
+};
+const getTargetElStyle = (el, zIndex) => {
+  const offset = getOffset(el);
+  const { transform } = getComputedStyle(el);
+  return `
+    position: absolute;
+    transform: ${transform};
+    left: ${offset.left}px;
+    top: ${offset.top}px;
+    width: ${el.clientWidth}px;
+    height: ${el.clientHeight}px;
+    ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
+  `;
+};
+const getAbsolutePosition = (el, { top, left }) => {
+  const { offsetParent } = el;
+  if (offsetParent) {
+    const parentOffset = getOffset(offsetParent);
+    return {
+      left: left - parentOffset.left,
+      top: top - parentOffset.top
+    };
+  }
+  return { left, top };
+};
+const isAbsolute = (style) => style.position === "absolute";
+const isRelative = (style) => style.position === "relative";
+const isStatic = (style) => style.position === "static";
+const isFixed = (style) => style.position === "fixed";
+const isFixedParent = (el) => {
+  let fixed = false;
+  let dom = el;
+  while (dom) {
+    fixed = isFixed(getComputedStyle(dom));
+    if (fixed) {
+      break;
+    }
+    const { parentElement } = dom;
+    if (!parentElement || parentElement.tagName === "BODY") {
+      break;
+    }
+    dom = parentElement;
+  }
+  return fixed;
+};
+const getMode = (el) => {
+  if (isFixedParent(el))
+    return Mode.FIXED;
+  const style = getComputedStyle(el);
+  if (isStatic(style) || isRelative(style))
+    return Mode.SORTABLE;
+  return Mode.ABSOLUTE;
+};
+const getScrollParent = (element, includeHidden = false) => {
+  let style = getComputedStyle(element);
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+  if (isFixed(style))
+    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;
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+      return parent;
+  }
+  return null;
+};
+const removeSelectedClassName = (doc) => {
+  const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+  if (oldEl) {
+    removeClassName(oldEl, SELECTED_CLASS);
+    if (oldEl.parentNode)
+      removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
+    doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+      removeClassName(item, `${SELECTED_CLASS}-parents`);
+    });
+  }
+};
+const addSelectedClassName = (el, doc) => {
+  el.classList.add(SELECTED_CLASS);
+  el.parentNode?.classList.add(`${SELECTED_CLASS}-parent`);
+  getParents(el, doc.body).forEach((item) => {
+    item.classList.add(`${SELECTED_CLASS}-parents`);
+  });
+};
+const calcValueByFontsize = (doc, value) => {
+  const { fontSize } = doc.documentElement.style;
+  if (fontSize) {
+    const times = globalThis.parseFloat(fontSize) / 100;
+    return Number((value / times).toFixed(2));
+  }
+  return value;
+};
+const down = (deltaTop, target) => {
+  let swapIndex = 0;
+  let addUpH = target.clientHeight;
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+  );
+  const index = brothers.indexOf(target);
+  const downEls = brothers.slice(index + 1);
+  for (let i = 0; i < downEls.length; i++) {
+    const ele = downEls[i];
+    if (ele.style?.position === "fixed") {
+      continue;
+    }
+    addUpH += ele.clientHeight / 2;
+    if (deltaTop <= addUpH) {
+      break;
+    }
+    addUpH += ele.clientHeight / 2;
+    swapIndex = i;
+  }
+  return {
+    src: target.id,
+    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+  };
+};
+const up = (deltaTop, target) => {
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+  );
+  const index = brothers.indexOf(target);
+  const upEls = brothers.slice(0, index);
+  let addUpH = target.clientHeight;
+  let swapIndex = upEls.length - 1;
+  for (let i = upEls.length - 1; i >= 0; i--) {
+    const ele = upEls[i];
+    if (!ele)
+      continue;
+    if (ele.style.position === "fixed")
+      continue;
+    addUpH += ele.clientHeight / 2;
+    if (-deltaTop <= addUpH)
+      break;
+    addUpH += ele.clientHeight / 2;
+    swapIndex = i;
+  }
+  return {
+    src: target.id,
+    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+  };
+};
+const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
+
+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;
+  targetList = [];
+  moveableHelper;
+  ghostEl;
+  frameSnapShot = {
+    left: 0,
+    top: 0
+  };
+  framesSnapShot = [];
+  mode = Mode.ABSOLUTE;
+  constructor(config) {
+    this.moveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true
+    });
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.DRAG_EL,
+      idPrefix: DRAG_EL_ID_PREFIX
+    });
+  }
+  destroy() {
+    this.targetShadow.destroy();
+    this.destroyGhostEl();
+    this.moveableHelper.clear();
+  }
+  destroyShadowEl() {
+    this.targetShadow.destroyEl();
+  }
+  getShadowEl() {
+    return this.targetShadow.el;
+  }
+  updateShadowEl(el) {
+    this.destroyGhostEl();
+    this.target = el;
+    this.targetShadow.update(el);
+  }
+  setMode(mode) {
+    this.mode = mode;
+  }
+  onResizeStart(e) {
+    this.moveableHelper.onResizeStart(e);
+    this.frameSnapShot.top = this.target.offsetTop;
+    this.frameSnapShot.left = this.target.offsetLeft;
+  }
+  onResize(e) {
+    const { width, height, drag } = e;
+    const { beforeTranslate } = drag;
+    if (this.mode === Mode.SORTABLE) {
+      this.target.style.top = "0px";
+      if (this.targetShadow.el) {
+        this.targetShadow.el.style.width = `${width}px`;
+        this.targetShadow.el.style.height = `${height}px`;
+      }
+    } else {
+      this.moveableHelper.onResize(e);
+      this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0]}px`;
+      this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1]}px`;
+    }
+    this.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;
+  }
+  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.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 {
+  mode = Mode.ABSOLUTE;
+  container;
+  horizontalGuidelines = [];
+  verticalGuidelines = [];
+  elementGuidelines = [];
+  customizedOptions;
+  getRootContainer;
+  constructor(config) {
+    super();
+    this.customizedOptions = config.moveableOptions;
+    this.container = config.container;
+    this.getRootContainer = config.getRootContainer;
+  }
+  setGuidelines(type, guidelines) {
+    if (type === GuidesType.HORIZONTAL) {
+      this.horizontalGuidelines = guidelines;
+    } else if (type === GuidesType.VERTICAL) {
+      this.verticalGuidelines = guidelines;
+    }
+    this.emit("update-moveable");
+  }
+  clearGuides() {
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+    this.emit("update-moveable");
+  }
+  setElementGuidelines(selectedElList, allElList) {
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+    if (this.mode === Mode.ABSOLUTE) {
+      this.container.append(this.createGuidelineElements(selectedElList, allElList));
+    }
+  }
+  getOptions(isMultiSelect, runtimeOptions = {}) {
+    const defaultOptions = this.getDefaultOptions(isMultiSelect);
+    const customizedOptions = this.getCustomizeOptions();
+    return merge(defaultOptions, customizedOptions, runtimeOptions);
+  }
+  getDefaultOptions(isMultiSelect) {
+    const isSortable = this.mode === Mode.SORTABLE;
+    const commonOptions = {
+      draggable: true,
+      resizable: true,
+      rootContainer: this.getRootContainer(),
+      zoom: 1,
+      throttleDrag: 0,
+      snappable: true,
+      horizontalGuidelines: this.horizontalGuidelines,
+      verticalGuidelines: this.verticalGuidelines,
+      elementGuidelines: this.elementGuidelines,
+      bounds: {
+        top: 0,
+        left: -1,
+        right: this.container.clientWidth - 1,
+        bottom: isSortable ? void 0 : this.container.clientHeight
+      }
+    };
+    const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
+    return merge(commonOptions, differenceOptions);
+  }
+  getSingleOptions() {
+    const isAbsolute = this.mode === Mode.ABSOLUTE;
+    const isFixed = this.mode === Mode.FIXED;
+    return {
+      origin: false,
+      dragArea: false,
+      scalable: false,
+      rotatable: false,
+      snapGap: isAbsolute || isFixed,
+      snapThreshold: 5,
+      snapDigit: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute
+      },
+      elementSnapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute
+      },
+      isDisplayInnerSnapDigit: true,
+      props: {
+        selectParent: true
+      },
+      ables: [selectParentAbles(this.selectParentHandler.bind(this))]
+    };
+  }
+  getMultiOptions() {
+    return {
+      defaultGroupRotate: 0,
+      defaultGroupOrigin: "50% 50%",
+      startDragRotate: 0,
+      throttleDragRotate: 0,
+      origin: true,
+      padding: { left: 0, top: 0, right: 0, bottom: 0 }
+    };
+  }
+  getCustomizeOptions() {
+    if (typeof this.customizedOptions === "function") {
+      return this.customizedOptions();
+    }
+    return this.customizedOptions;
+  }
+  selectParentHandler() {
+    this.emit("select-parent");
+  }
+  createGuidelineElements(selectedElList, allElList) {
+    const frame = globalThis.document.createDocumentFragment();
+    for (const node of allElList) {
+      const { width, height } = node.getBoundingClientRect();
+      if (this.isInElementList(node, selectedElList))
+        continue;
+      const { left, top } = getOffset(node);
+      const elementGuideline = globalThis.document.createElement("div");
+      elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+      this.elementGuidelines.push(elementGuideline);
+      frame.append(elementGuideline);
+    }
+    return frame;
+  }
+  isInElementList(ele, eleList) {
+    for (const eleItem of eleList) {
+      if (ele === eleItem)
+        return true;
+    }
+    return false;
+  }
+}
+
+var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+  ContainerHighlightType2["DEFAULT"] = "default";
+  ContainerHighlightType2["ALT"] = "alt";
+  return ContainerHighlightType2;
+})(ContainerHighlightType || {});
+var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+  SelectStatus2["SELECT"] = "select";
+  SelectStatus2["MULTI_SELECT"] = "multiSelect";
+  return SelectStatus2;
+})(SelectStatus || {});
+var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+  StageDragStatus2["START"] = "start";
+  StageDragStatus2["ING"] = "ing";
+  StageDragStatus2["END"] = "end";
+  return StageDragStatus2;
+})(StageDragStatus || {});
+
+class StageDragResize extends MoveableOptionsManager {
+  target;
+  moveable;
+  dragStatus = StageDragStatus.END;
+  dragResizeHelper;
+  getRenderDocument;
+  markContainerEnd;
+  delayedMarkContainer;
+  constructor(config) {
+    super(config);
+    this.getRenderDocument = config.getRenderDocument;
+    this.markContainerEnd = config.markContainerEnd;
+    this.delayedMarkContainer = config.delayedMarkContainer;
+    this.dragResizeHelper = new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    this.on("update-moveable", () => {
+      if (this.moveable) {
+        this.updateMoveable();
+      }
+    });
+  }
+  select(el, event) {
+    if (!this.moveable || el !== this.target) {
+      this.initMoveable(el);
+    } else {
+      this.updateMoveable(el);
+    }
+    if (event) {
+      this.moveable?.dragStart(event);
+    }
+  }
+  updateMoveable(el = this.target) {
+    if (!this.moveable)
+      return;
+    if (!el)
+      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
+    const options = this.init(el);
+    Object.entries(options).forEach(([key, value]) => {
+      this.moveable[key] = value;
+    });
+    this.moveable.updateTarget();
+  }
+  clearSelectStatus() {
+    if (!this.moveable)
+      return;
+    this.dragResizeHelper.destroyShadowEl();
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+  destroy() {
+    this.moveable?.destroy();
+    this.dragResizeHelper.destroy();
+    this.dragStatus = StageDragStatus.END;
+    this.removeAllListeners();
+  }
+  init(el) {
+    if (/(auto|scroll)/.test(el.style.overflow)) {
+      el.style.overflow = "hidden";
+    }
+    this.target = el;
+    this.mode = getMode(el);
+    this.dragResizeHelper.updateShadowEl(el);
+    this.dragResizeHelper.setMode(this.mode);
+    const elementGuidelines = Array.prototype.slice.call(this.target?.parentElement?.children) || [];
+    this.setElementGuidelines([this.target], elementGuidelines);
+    return this.getOptions(false, {
+      target: this.dragResizeHelper.getShadowEl()
+    });
+  }
+  initMoveable(el) {
+    const options = this.init(el);
+    this.dragResizeHelper.clear();
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      ...options
+    });
+    this.bindResizeEvent();
+    this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
+  }
+  bindResizeEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    this.moveable.on("resizeStart", (e) => {
+      if (!this.target)
+        return;
+      this.dragStatus = StageDragStatus.START;
+      this.dragResizeHelper.onResizeStart(e);
+    }).on("resize", (e) => {
+      if (!this.moveable || !this.target || !this.dragResizeHelper.getShadowEl())
+        return;
+      this.dragStatus = StageDragStatus.ING;
+      this.dragResizeHelper.onResize(e);
+    }).on("resizeEnd", () => {
+      this.dragStatus = StageDragStatus.END;
+      this.update(true);
+    });
+  }
+  bindDragEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    let timeout;
+    this.moveable.on("dragStart", (e) => {
+      if (!this.target)
+        throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
+      this.dragStatus = StageDragStatus.START;
+      this.dragResizeHelper.onDragStart(e);
+    }).on("drag", (e) => {
+      if (!this.target || !this.dragResizeHelper.getShadowEl())
+        return;
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
+      timeout = this.delayedMarkContainer(e.inputEvent, [this.target]);
+      this.dragStatus = StageDragStatus.ING;
+      this.dragResizeHelper.onDrag(e);
+    }).on("dragEnd", () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
+      const parentEl = this.markContainerEnd();
+      if (this.dragStatus === StageDragStatus.ING) {
+        if (parentEl) {
+          this.update(false, parentEl);
+        } else {
+          switch (this.mode) {
+            case Mode.SORTABLE:
+              this.sort();
+              break;
+            default:
+              this.update();
+          }
+        }
+      }
+      this.dragStatus = StageDragStatus.END;
+      this.dragResizeHelper.destroyGhostEl();
+    });
+  }
+  bindRotateEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    this.moveable.on("rotateStart", (e) => {
+      this.dragStatus = StageDragStatus.START;
+      this.dragResizeHelper.onRotateStart(e);
+    }).on("rotate", (e) => {
+      if (!this.target || !this.dragResizeHelper.getShadowEl())
+        return;
+      this.dragStatus = StageDragStatus.ING;
+      this.dragResizeHelper.onRotate(e);
+    }).on("rotateEnd", (e) => {
+      this.dragStatus = StageDragStatus.END;
+      const frame = this.dragResizeHelper?.getFrame(e.target);
+      this.emit("update", {
+        data: [
+          {
+            el: this.target,
+            style: {
+              transform: frame?.get("transform")
+            }
+          }
+        ]
+      });
+    });
+  }
+  bindScaleEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    this.moveable.on("scaleStart", (e) => {
+      this.dragStatus = StageDragStatus.START;
+      this.dragResizeHelper.onScaleStart(e);
+    }).on("scale", (e) => {
+      if (!this.target || !this.dragResizeHelper.getShadowEl())
+        return;
+      this.dragStatus = StageDragStatus.ING;
+      this.dragResizeHelper.onScale(e);
+    }).on("scaleEnd", (e) => {
+      this.dragStatus = StageDragStatus.END;
+      const frame = this.dragResizeHelper.getFrame(e.target);
+      this.emit("update", {
+        data: [
+          {
+            el: this.target,
+            style: {
+              transform: frame?.get("transform")
+            }
+          }
+        ]
+      });
+    });
+  }
+  sort() {
+    if (!this.target || !this.dragResizeHelper.getGhostEl())
+      throw new Error("\u672A\u77E5\u9519\u8BEF");
+    const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
+    const { top: oriTop } = this.target.getBoundingClientRect();
+    const deltaTop = top - oriTop;
+    if (Math.abs(deltaTop) >= this.target.clientHeight / 2) {
+      if (deltaTop > 0) {
+        this.emit("sort", down(deltaTop, this.target));
+      } else {
+        this.emit("sort", up(deltaTop, this.target));
+      }
+    } else {
+      this.emit("sort", {
+        src: this.target.id,
+        dist: this.target.id
+      });
+    }
+  }
+  update(isResize = false, parentEl = null) {
+    if (!this.target)
+      return;
+    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 };
+    let left = calcValueByFontsize(doc, offset.left);
+    let top = calcValueByFontsize(doc, offset.top);
+    const width = calcValueByFontsize(doc, this.target.clientWidth);
+    const height = calcValueByFontsize(doc, this.target.clientHeight);
+    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, targetShadowElOffsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
+      top = calcValueByFontsize(doc, targetShadowElOffsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
+    }
+    this.emit("update", {
+      data: [
+        {
+          el: this.target,
+          style: isResize ? { left, top, width, height } : { left, top }
+        }
+      ],
+      parentEl
+    });
+  }
+}
+
+class StageHighlight extends EventEmitter$1 {
+  container;
+  target;
+  moveable;
+  targetShadow;
+  getRootContainer;
+  constructor(config) {
+    super();
+    this.container = config.container;
+    this.getRootContainer = config.getRootContainer;
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.HIGHLIGHT_EL,
+      idPrefix: HIGHLIGHT_EL_ID_PREFIX
+    });
+  }
+  highlight(el) {
+    if (!el || el === this.target)
+      return;
+    this.target = el;
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      target: this.targetShadow.update(el),
+      origin: false,
+      rootContainer: this.getRootContainer(),
+      zoom: 2
+    });
+  }
+  clearHighlight() {
+    if (!this.moveable || !this.target)
+      return;
+    this.target = void 0;
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+  destroy() {
+    this.moveable?.destroy();
+    this.targetShadow.destroy();
+  }
+}
+
+class StageMultiDragResize extends MoveableOptionsManager {
+  container;
+  targetList = [];
+  moveableForMulti;
+  dragStatus = StageDragStatus.END;
+  dragResizeHelper;
+  getRenderDocument;
+  constructor(config) {
+    const moveableOptionsManagerConfig = {
+      container: config.container,
+      moveableOptions: config.multiMoveableOptions,
+      getRootContainer: config.getRootContainer
+    };
+    super(moveableOptionsManagerConfig);
+    this.container = config.container;
+    this.getRenderDocument = config.getRenderDocument;
+    this.dragResizeHelper = new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    this.on("update-moveable", () => {
+      if (this.moveableForMulti) {
+        this.updateMoveable();
+      }
+    });
+  }
+  multiSelect(els) {
+    if (els.length === 0) {
+      return;
+    }
+    this.mode = getMode(els[0]);
+    this.targetList = els;
+    this.dragResizeHelper.updateGroup(els);
+    const elementGuidelines = Array.prototype.slice.call(this.targetList[0].parentElement?.children) || [];
+    this.setElementGuidelines(this.targetList, elementGuidelines);
+    this.moveableForMulti?.destroy();
+    this.dragResizeHelper.clear();
+    this.moveableForMulti = new Moveable(
+      this.container,
+      this.getOptions(true, {
+        target: this.dragResizeHelper.getShadowEls()
+      })
+    );
+    this.moveableForMulti.on("resizeGroupStart", (e) => {
+      this.dragResizeHelper.onResizeGroupStart(e);
+      this.dragStatus = StageDragStatus.START;
+    }).on("resizeGroup", (e) => {
+      this.dragResizeHelper.onResizeGroup(e);
+      this.dragStatus = StageDragStatus.ING;
+    }).on("resizeGroupEnd", () => {
+      this.update(true);
+      this.dragStatus = StageDragStatus.END;
+    }).on("dragGroupStart", (e) => {
+      this.dragResizeHelper.onDragGroupStart(e);
+      this.dragStatus = StageDragStatus.START;
+    }).on("dragGroup", (e) => {
+      this.dragResizeHelper.onDragGroup(e);
+      this.dragStatus = StageDragStatus.ING;
+    }).on("dragGroupEnd", () => {
+      this.update();
+      this.dragStatus = StageDragStatus.END;
+    }).on("clickGroup", (e) => {
+      const { inputTarget, targets } = e;
+      if (targets.length > 1 && targets.includes(inputTarget)) {
+        this.emit("change-to-select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""));
+      }
+    });
+  }
+  canSelect(el, selectedEl) {
+    const currentTargetMode = getMode(el);
+    let selectedElMode = "";
+    if (currentTargetMode === Mode.SORTABLE) {
+      return false;
+    }
+    if (this.targetList.length === 0 && selectedEl) {
+      selectedElMode = getMode(selectedEl);
+    } else if (this.targetList.length > 0) {
+      selectedElMode = getMode(this.targetList[0]);
+    }
+    if (currentTargetMode !== selectedElMode) {
+      return false;
+    }
+    return true;
+  }
+  updateMoveable(eleList = this.targetList) {
+    if (!this.moveableForMulti)
+      return;
+    if (!eleList)
+      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
+    this.targetList = eleList;
+    this.dragResizeHelper.setTargetList(eleList);
+    const options = this.getOptions(true, {
+      target: this.dragResizeHelper.getShadowEls()
+    });
+    Object.entries(options).forEach(([key, value]) => {
+      this.moveableForMulti[key] = value;
+    });
+    this.moveableForMulti.updateTarget();
+  }
+  clearSelectStatus() {
+    if (!this.moveableForMulti)
+      return;
+    this.dragResizeHelper.clearMultiSelectStatus();
+    this.moveableForMulti.target = null;
+    this.moveableForMulti.updateTarget();
+    this.targetList = [];
+  }
+  destroy() {
+    this.moveableForMulti?.destroy();
+    this.dragResizeHelper.destroy();
+  }
+  update(isResize = false) {
+    if (this.targetList.length === 0)
+      return;
+    const doc = this.getRenderDocument();
+    if (!doc)
+      return;
+    const data = this.targetList.map((targetItem) => {
+      const left = calcValueByFontsize(doc, targetItem.offsetLeft);
+      const top = calcValueByFontsize(doc, targetItem.offsetTop);
+      const width = calcValueByFontsize(doc, targetItem.clientWidth);
+      const height = calcValueByFontsize(doc, targetItem.clientHeight);
+      return {
+        el: targetItem,
+        style: isResize ? { left, top, width, height } : { left, top }
+      };
+    });
+    this.emit("update", data, null);
+  }
+}
+
+const throttleTime = 100;
+const defaultContainerHighlightDuration = 800;
+class ActionManager extends EventEmitter {
+  dr;
+  multiDr;
+  highlightLayer;
+  container;
+  selectedEl;
+  selectedElList = [];
+  highlightedEl;
+  isMultiSelectStatus = false;
+  containerHighlightClassName;
+  containerHighlightDuration;
+  containerHighlightType;
+  isAltKeydown = false;
+  getTargetElement;
+  getElementsFromPoint;
+  canSelect;
+  isContainer;
+  getRenderDocument;
+  mouseMoveHandler = throttle(async (event) => {
+    const el = await this.getElementFromPoint(event);
+    if (!el) {
+      this.clearHighlight();
+      return;
+    }
+    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)) {
+        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 removeClassNameByClassName(doc, this.containerHighlightClassName);
+    }
+    return null;
+  }
+  initMouseEvent() {
+    this.container.addEventListener("mousedown", this.mouseDownHandler);
+    this.container.addEventListener("mousemove", this.mouseMoveHandler);
+    this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
+    this.container.addEventListener("wheel", this.mouseWheelHandler);
+  }
+  initKeyEvent() {
+    const { isMac } = new Env();
+    const ctrl = isMac ? "meta" : "ctrl";
+    KeyController.global.keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = true;
+    });
+    KeyController.global.on("blur", () => {
+      this.isMultiSelectStatus = false;
+    });
+    KeyController.global.keyup(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = false;
+    });
+    KeyController.global.keydown("alt", (e) => {
+      e.inputEvent.preventDefault();
+      this.isAltKeydown = true;
+    });
+    KeyController.global.keyup("alt", (e) => {
+      e.inputEvent.preventDefault();
+      this.markContainerEnd();
+      this.isAltKeydown = false;
+    });
+  }
+  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);
+    }
+    getDocument().addEventListener("mouseup", this.mouseUpHandler);
+  };
+  isStopTriggerSelect(event) {
+    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
+      return true;
+    if (!event.target)
+      return true;
+    const targetClassList = event.target.classList;
+    if (!this.isMultiSelectStatus && targetClassList.contains("moveable-area")) {
+      return true;
+    }
+    if (targetClassList.contains("moveable-control") || isMoveableButton(event.target)) {
+      return true;
+    }
+    return false;
+  }
+  mouseUpHandler = () => {
+    getDocument().removeEventListener("mouseup", this.mouseUpHandler);
+    this.container.addEventListener("mousemove", this.mouseMoveHandler);
+    if (this.isMultiSelectStatus) {
+      this.emit("multi-select", this.selectedElList);
+    } else {
+      this.emit("select", this.selectedEl);
+    }
+  };
+  mouseLeaveHandler = () => {
+    setTimeout(() => this.clearHighlight(), throttleTime);
+  };
+  mouseWheelHandler = () => {
+    this.clearHighlight();
+  };
+}
+
+class Rule extends EventEmitter {
+  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);
+    } else {
+      this.hGuides.setState({
+        rulerStyle: {
+          visibility: "hidden"
+        }
+      });
+      this.vGuides.setState({
+        rulerStyle: {
+          visibility: "hidden"
+        }
+      });
+    }
+  }
+  scrollRule(scrollTop) {
+    this.hGuides.scrollGuides(scrollTop);
+    this.hGuides.scroll(0);
+    this.vGuides.scrollGuides(0);
+    this.vGuides.scroll(scrollTop);
+  }
+  destroy() {
+    this.hGuides.off("changeGuides", this.hGuidesChangeGuidesHandler);
+    this.vGuides.off("changeGuides", this.vGuidesChangeGuidesHandler);
+    this.containerResizeObserver.disconnect();
+    this.removeAllListeners();
+  }
+  getGuidesStyle = (type) => ({
+    position: "fixed",
+    zIndex: 1,
+    left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
+    top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
+    width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
+    height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
+  });
+  createGuides = (type, defaultGuides = []) => new Guides(this.container, {
+    type,
+    defaultGuides,
+    displayDragPos: true,
+    backgroundColor: "#fff",
+    lineColor: "#000",
+    textColor: "#000",
+    style: this.getGuidesStyle(type),
+    showGuides: this.isShowGuides
+  });
+  hGuidesChangeGuidesHandler = (e) => {
+    this.horizontalGuidelines = e.guides;
+    this.emit("change-guides", {
+      type: GuidesType.HORIZONTAL,
+      guides: this.horizontalGuidelines
+    });
+  };
+  vGuidesChangeGuidesHandler = (e) => {
+    this.verticalGuidelines = e.guides;
+    this.emit("change-guides", {
+      type: GuidesType.VERTICAL,
+      guides: this.verticalGuidelines
+    });
+  };
+}
+
+const wrapperClassName = "editor-mask-wrapper";
+const hideScrollbar = () => {
+  injectStyle(getDocument(), `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
+};
+const createContent = () => createDiv({
+  className: "editor-mask",
+  cssText: `
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate3d(0, 0, 0);
+  `
+});
+const createWrapper = () => {
+  const el = createDiv({
+    className: wrapperClassName,
+    cssText: `
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      z-index: ${ZIndex.MASK};
+    `
+  });
+  hideScrollbar();
+  return el;
+};
+class StageMask extends Rule {
+  content = createContent();
+  wrapper;
+  page = null;
+  scrollTop = 0;
+  scrollLeft = 0;
+  width = 0;
+  height = 0;
+  wrapperHeight = 0;
+  wrapperWidth = 0;
+  maxScrollTop = 0;
+  maxScrollLeft = 0;
+  mode = Mode.ABSOLUTE;
+  pageScrollParent = null;
+  intersectionObserver = null;
+  wrapperResizeObserver = null;
+  constructor() {
+    const wrapper = createWrapper();
+    super(wrapper);
+    this.wrapper = wrapper;
+    this.content.addEventListener("wheel", this.mouseWheelHandler);
+    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`;
+    } else {
+      this.content.style.width = `${this.width}px`;
+      this.content.style.height = `${this.height}px`;
+    }
+  }
+  observe(page) {
+    if (!page)
+      return;
+    this.page = page;
+    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(
+        (entries) => {
+          entries.forEach((entry) => {
+            const { target, intersectionRatio } = entry;
+            if (intersectionRatio <= 0) {
+              this.scrollIntoView(target);
+            }
+            this.intersectionObserver?.unobserve(target);
+          });
+        },
+        {
+          root: this.pageScrollParent,
+          rootMargin: "0px",
+          threshold: 1
+        }
+      );
+    }
+  }
+  initObserverWrapper() {
+    this.wrapperResizeObserver?.disconnect();
+    if (typeof ResizeObserver !== "undefined") {
+      this.wrapperResizeObserver = new ResizeObserver((entries) => {
+        const [entry] = entries;
+        const { clientHeight, clientWidth } = entry.target;
+        this.wrapperHeight = clientHeight;
+        this.wrapperWidth = clientWidth;
+        this.setMaxScrollLeft();
+        this.setMaxScrollTop();
+      });
+      this.wrapperResizeObserver.observe(this.wrapper);
+    }
+  }
+  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)`;
+    const event = new CustomEvent("customScroll", {
+      detail: {
+        scrollLeft: this.scrollLeft,
+        scrollTop: this.scrollTop
+      }
+    });
+    this.content.dispatchEvent(event);
+  }
+  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;
+  }
+  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;
+    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);
+  };
+}
+
+const style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n\n.magic-ui-container.magic-layout-relative {\n  min-height: 50px;\n}\n";
+
+class StageRender extends EventEmitter$1 {
+  contentWindow = null;
+  runtime = null;
+  iframe;
+  runtimeUrl;
+  zoom = DEFAULT_ZOOM;
+  customizedRender;
+  constructor({ runtimeUrl, zoom, customizedRender }) {
+    super();
+    this.runtimeUrl = runtimeUrl || "";
+    this.customizedRender = customizedRender;
+    this.setZoom(zoom);
+    this.iframe = globalThis.document.createElement("iframe");
+    this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
+    this.iframe.style.cssText = `
+      border: 0;
+      width: 100%;
+      height: 100%;
+    `;
+    this.iframe.addEventListener("load", this.loadHandler);
+  }
+  getMagicApi = () => ({
+    onPageElUpdate: (el) => this.emit("page-el-update", el),
+    onRuntimeReady: (runtime) => {
+      this.runtime = runtime;
+      globalThis.runtime = runtime;
+      this.emit("runtime-ready", runtime);
+    }
+  });
+  async 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");
+    }
+    if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+      let html = await fetch(this.runtimeUrl).then((res) => res.text());
+      const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+      html = html.replace("<head>", `<head>
+<base href="${base}">`);
+      this.iframe.srcdoc = html;
+    }
+    el.appendChild(this.iframe);
+    this.postTmagicRuntimeReady();
+  }
+  getRuntime = () => {
+    if (this.runtime)
+      return Promise.resolve(this.runtime);
+    return new Promise((resolve) => {
+      const listener = (runtime) => {
+        this.off("runtime-ready", listener);
+        resolve(runtime);
+      };
+      this.on("runtime-ready", listener);
+    });
+  };
+  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;
+    this.iframe?.remove();
+    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.customizedRender) {
+      const el = await this.customizedRender();
+      if (el) {
+        this.contentWindow.document?.body?.appendChild(el);
+      }
+    }
+    this.emit("onload");
+    injectStyle(this.contentWindow.document, style);
+  };
+  postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow;
+    this.contentWindow.magic = this.getMagicApi();
+    this.contentWindow.postMessage(
+      {
+        tmagicRuntimeReady: true
+      },
+      "*"
+    );
+  }
+}
+
+class StageCore extends EventEmitter$1 {
+  container;
+  renderer;
+  mask;
+  actionManager;
+  pageResizeObserver = null;
+  autoScrollIntoView;
+  customizedRender;
+  constructor(config) {
+    super();
+    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.mask = new StageMask();
+    this.actionManager = new ActionManager(this.getActionManagerConfig(config));
+    this.initRenderEvent();
+    this.initActionEvent();
+    this.initMaskEvent();
+  }
+  async select(idOrEl, event) {
+    const el = this.renderer.getTargetElement(idOrEl);
+    if (el === this.actionManager.getSelectedEl())
+      return;
+    await this.renderer.select([el]);
+    this.mask.setLayout(el);
+    this.actionManager.select(el, event);
+    if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+      this.mask.observerIntersection(el);
+    }
+  }
+  async multiSelect(idOrElList) {
+    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);
+    }
+  }
+  highlight(idOrEl) {
+    this.actionManager.highlight(idOrEl);
+  }
+  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);
+      }
+    });
+  }
+  async add(data) {
+    return await this.renderer.add(data);
+  }
+  async remove(data) {
+    return await this.renderer.remove(data);
+  }
+  setZoom(zoom = DEFAULT_ZOOM) {
+    this.renderer.setZoom(zoom);
+  }
+  async mount(el) {
+    this.container = el;
+    const { mask, renderer } = this;
+    await renderer.mount(el);
+    mask.mount(el);
+    this.emit("mounted");
+  }
+  clearGuides() {
+    this.mask.clearGuides();
+    this.actionManager.clearGuides();
+  }
+  getAddContainerHighlightClassNameTimeout(event, excludeElList = []) {
+    return this.delayedMarkContainer(event, excludeElList);
+  }
+  delayedMarkContainer(event, excludeElList = []) {
+    return this.actionManager.delayedMarkContainer(event, excludeElList);
+  }
+  destroy() {
+    const { mask, renderer, actionManager, pageResizeObserver } = this;
+    renderer.destroy();
+    mask.destroy();
+    actionManager.destroy();
+    pageResizeObserver?.disconnect();
+    this.removeAllListeners();
+    this.container = void 0;
+  }
+  observePageResize(page) {
+    if (typeof ResizeObserver !== "undefined") {
+      this.pageResizeObserver = new ResizeObserver((entries) => {
+        this.mask.pageResize(entries);
+        this.actionManager.updateMoveable();
+      });
+      this.pageResizeObserver.observe(page);
+    }
+  }
+  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);
+    });
+  }
+}
+
+export { CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+//# sourceMappingURL=tmagic-stage.js.map