@tmagic/stage 1.7.7 → 1.7.8-beta.2

package/dist/tmagic-stage.js

@@ -1,2833 +0,0 @@
-import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
-import { removeClassName, getIdFromEl, guid, setIdToEl, getElById, calcValueByFontsize, addClassName, removeClassNameByClassName, Env, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/core';
-import KeyController from 'keycon';
-import { merge, throttle } from 'lodash-es';
-import MoveableHelper from 'moveable-helper';
-import Moveable__default from 'moveable';
-export * from 'moveable';
-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";
-var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
-  AbleActionEventType2["SELECT_PARENT"] = "select-parent";
-  AbleActionEventType2["REMOVE"] = "remove";
-  AbleActionEventType2["RERENDER"] = "rerender";
-  return AbleActionEventType2;
-})(AbleActionEventType || {});
-var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-  ContainerHighlightType2["DEFAULT"] = "default";
-  ContainerHighlightType2["ALT"] = "alt";
-  return ContainerHighlightType2;
-})(ContainerHighlightType || {});
-var RenderType = /* @__PURE__ */ ((RenderType2) => {
-  RenderType2["IFRAME"] = "iframe";
-  RenderType2["NATIVE"] = "native";
-  return RenderType2;
-})(RenderType || {});
-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 || {});
-
-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, border } = getComputedStyle(el);
-  return `
-    position: absolute;
-    transform: ${transform};
-    left: ${offset.left}px;
-    top: ${offset.top}px;
-    width: ${el.clientWidth}px;
-    height: ${el.clientHeight}px;
-    border: ${border};
-    opacity: 0;
-    ${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 down = (deltaTop, target) => {
-  let swapIndex = 0;
-  let addUpH = target.clientHeight;
-  const brothers = Array.from(target.parentNode?.children || []).filter(
-    (child) => !getIdFromEl()(child)?.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;
-  }
-  const src = getIdFromEl()(target) || "";
-  return {
-    src,
-    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || "" : src
-  };
-};
-const up = (deltaTop, target) => {
-  const brothers = Array.from(target.parentNode?.children || []).filter(
-    (child) => !getIdFromEl()(child)?.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;
-  }
-  const src = getIdFromEl()(target) || "";
-  return {
-    src,
-    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || "" : src
-  };
-};
-const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
-const getMarginValue = (el) => {
-  if (!el)
-    return {
-      marginLeft: 0,
-      marginTop: 0
-    };
-  const { marginLeft, marginTop } = getComputedStyle(el);
-  const marginLeftValue = parseFloat(marginLeft) || 0;
-  const marginTopValue = parseFloat(marginTop) || 0;
-  return {
-    marginLeft: marginLeftValue,
-    marginTop: marginTopValue
-  };
-};
-const getBorderWidth = (el) => {
-  if (!el)
-    return {
-      borderLeftWidth: 0,
-      borderRightWidth: 0,
-      borderTopWidth: 0,
-      borderBottomWidth: 0
-    };
-  const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getComputedStyle(el);
-  return {
-    borderLeftWidth: parseFloat(borderLeftWidth) || 0,
-    borderRightWidth: parseFloat(borderRightWidth) || 0,
-    borderTopWidth: parseFloat(borderTopWidth) || 0,
-    borderBottomWidth: parseFloat(borderBottomWidth) || 0
-  };
-};
-
-class TargetShadow {
-  el;
-  els = [];
-  idPrefix = `target_calibrate_${guid()}`;
-  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}_${guid()}`;
-    }
-    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");
-    setIdToEl()(el, `${this.idPrefix}_${getIdFromEl()(target)}`);
-    el.style.cssText = getTargetElStyle(target, this.zIndex);
-    if (typeof this.updateDragEl === "function") {
-      this.updateDragEl(el, target, this.container);
-    }
-    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 (!getElById()(globalThis.document, getIdFromEl()(el))) {
-      this.container.append(el);
-    }
-    return el;
-  }
-  scrollHandler = (e) => {
-    this.scrollLeft = e.detail.scrollLeft;
-    this.scrollTop = e.detail.scrollTop;
-  };
-}
-
-class DragResizeHelper {
-  /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
-  targetShadow;
-  /** 要操作的原始目标节点 */
-  target = null;
-  /** 多选:目标节点组 */
-  targetList = [];
-  /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
-   * MoveableHelper里面的方法是成员属性，如果DragResizeHelper用继承的方式将无法通过super去调这些方法 */
-  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.target = null;
-    this.targetList = [];
-    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;
-  }
-  /**
-   * 改变大小事件开始
-   * @param e 包含了拖拽节点的dom，moveableHelper会直接修改拖拽节点
-   */
-  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);
-      const { marginLeft, marginTop } = getMarginValue(this.target);
-      this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
-      this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
-    }
-    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target);
-    this.target.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
-    this.target.style.height = `${height + borderTopWidth + borderBottomWidth}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);
-    const { marginLeft, marginTop } = getMarginValue(this.target);
-    this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
-    this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}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;
-    this.moveableHelper.onResizeGroup(e);
-    events.forEach((ev) => {
-      const { width, height, beforeTranslate } = ev.drag;
-      const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
-      );
-      if (!frameSnapShot) return;
-      const targeEl = this.targetList.find(
-        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
-      );
-      if (!targeEl) return;
-      const isParentIncluded = this.targetList.find(
-        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
-      );
-      if (!isParentIncluded) {
-        const { marginLeft, marginTop } = getMarginValue(targeEl);
-        targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
-        targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
-      }
-      targeEl.style.width = `${width}px`;
-      targeEl.style.height = `${height}px`;
-    });
-  }
-  onDragGroupStart(e) {
-    this.moveableHelper.onDragGroupStart(e);
-    const { events } = e;
-    this.setFramesSnapShot(events);
-  }
-  onDragGroup(e) {
-    this.moveableHelper.onDragGroup(e);
-    const { events } = e;
-    events.forEach((ev) => {
-      const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id)
-      );
-      if (!frameSnapShot) return;
-      const findTargetElFuctin = (targetItem) => {
-        const getId = getIdFromEl();
-        const targetId = getId(ev.target);
-        const targetItemId = getId(targetItem);
-        return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
-      };
-      const targeEl = this.targetList.find(findTargetElFuctin);
-      if (!targeEl) return;
-      const isParentIncluded = this.targetList.find(
-        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
-      );
-      if (!isParentIncluded) {
-        const { marginLeft, marginTop } = getMarginValue(targeEl);
-        targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
-        targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
-      }
-    });
-  }
-  getUpdatedElRect(el, parentEl, doc) {
-    const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: el.offsetLeft, top: el.offsetTop };
-    const { marginLeft, marginTop } = getMarginValue(el);
-    let left = calcValueByFontsize(doc, offset.left) - marginLeft;
-    let top = calcValueByFontsize(doc, offset.top) - marginTop;
-    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(el);
-    const width = calcValueByFontsize(doc, el.clientWidth + borderLeftWidth + borderRightWidth);
-    const height = calcValueByFontsize(doc, el.clientHeight + borderTopWidth + borderBottomWidth);
-    let shadowEl = this.getShadowEl();
-    const shadowEls = this.getShadowEls();
-    if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ""));
-    }
-    if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
-      const targetShadowHtmlEl = shadowEl;
-      const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
-      const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
-      const frame = this.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);
-    }
-    return { width, height, left, top };
-  }
-  /**
-   * 多选状态设置多个节点的快照
-   */
-  setFramesSnapShot(events) {
-    if (this.framesSnapShot.length > 0) return;
-    events.forEach((ev) => {
-      const matchEventTarget = this.targetList.find(
-        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || "")
-      );
-      if (!matchEventTarget) return;
-      const id = getIdFromEl()(matchEventTarget);
-      id && this.framesSnapShot.push({
-        left: matchEventTarget.offsetLeft,
-        top: matchEventTarget.offsetTop,
-        id
-      });
-    });
-  }
-  /**
-   * 流式布局把目标节点复制一份进行拖拽，在拖拽结束前不影响页面原布局样式
-   */
-  generateGhostEl(el) {
-    if (this.ghostEl) {
-      this.destroyGhostEl();
-    }
-    const ghostEl = document.createElement("div");
-    const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
-    ghostEl.style.cssText = `
-      z-index: ${ZIndex.GHOST_EL};
-      opacity: .6;
-      position: absolute;
-      left: ${left}px;
-      top: ${top}px;
-      margin: 0;
-      background: blue;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-    `;
-    el.after(ghostEl);
-    return ghostEl;
-  }
-}
-
-const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n  cursor: pointer;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n.moveable-rerender-button img {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n";
-
-const MoveableActionsAble = (handler, customizedButton = []) => ({
-  name: "actions",
-  props: [],
-  always: true,
-  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: 60px 28px;
-        display: flex;
-      }
-      ${ableCss}
-      `
-    );
-    return React.createElement(
-      editableViewer,
-      {
-        className: "moveable-editable",
-        style: {
-          transform: `translate(${pos2[0] - (customizedButton.length + 3) * 20}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
-        }
-      },
-      [
-        ...customizedButton.map((buttonRenderer) => {
-          const options = buttonRenderer(React);
-          return React.createElement("button", options.props || {}, ...options.children || []);
-        }),
-        React.createElement(
-          "button",
-          {
-            className: "moveable-button moveable-rerender-button",
-            title: "重新收集依赖后渲染",
-            onClick: () => {
-              handler(AbleActionEventType.RERENDER);
-            }
-          },
-          React.createElement("img", {
-            src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXJlcGxhY2UiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2ZmZmZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cmVjdCB4PSIxNSIgeT0iMTUiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiAvPgogIDxwYXRoIGQ9Ik0yMSAxMXYtM2EyIDIgMCAwIDAgLTIgLTJoLTZsMyAzbTAgLTZsLTMgMyIgLz4KICA8cGF0aCBkPSJNMyAxM3YzYTIgMiAwIDAgMCAyIDJoNmwtMyAtM20wIDZsMyAtMyIgLz4KPC9zdmc+CgoK",
-            width: "16",
-            height: "16"
-          })
-        ),
-        React.createElement(
-          "button",
-          {
-            className: "moveable-button",
-            title: "选中父组件",
-            onClick: () => {
-              handler(AbleActionEventType.SELECT_PARENT);
-            }
-          },
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-top-icon"
-          }),
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-body-icon"
-          })
-        ),
-        React.createElement("button", {
-          className: "moveable-button moveable-remove-button",
-          title: "删除",
-          onClick: () => {
-            handler(AbleActionEventType.REMOVE);
-          }
-        }),
-        React.createElement(
-          "button",
-          {
-            className: "moveable-button moveable-drag-area-button",
-            title: "拖动"
-          },
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-top"
-          }),
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-bottom"
-          }),
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-left"
-          }),
-          React.createElement("div", {
-            className: " moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-right"
-          }),
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-body-icon-horizontal"
-          }),
-          React.createElement("div", {
-            className: "moveable-select-parent-arrow-body-icon-vertical"
-          })
-        )
-      ]
-    );
-  }
-});
-
-class MoveableOptionsManager extends EventEmitter {
-  /** 布局方式：流式布局、绝对定位、固定定位 */
-  mode = Mode.ABSOLUTE;
-  /** 画布容器 */
-  container;
-  options = {};
-  /** 水平参考线 */
-  horizontalGuidelines = [];
-  /** 垂直参考线 */
-  verticalGuidelines = [];
-  /** 对齐元素集合 */
-  elementGuidelines = [];
-  /** 由外部调用方（编辑器）传入进来的moveable默认参数，可以为空，也可以是一个回调函数 */
-  customizedOptions;
-  /** 获取整个画布的根元素（在StageCore的mount函数中挂载的container） */
-  getRootContainer;
-  constructor(config) {
-    super();
-    this.customizedOptions = config.moveableOptions;
-    this.container = config.container;
-    this.getRootContainer = config.getRootContainer;
-  }
-  getOption(key) {
-    return this.options[key];
-  }
-  /**
-   * 设置水平/垂直参考线
-   * @param type 参考线类型
-   * @param guidelines 参考线坐标数组
-   */
-  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");
-  }
-  /**
-   * 设置有哪些元素要辅助对齐
-   * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
-   */
-  setElementGuidelines(selectedElList) {
-    this.elementGuidelines.forEach((node) => {
-      node.remove();
-    });
-    this.elementGuidelines = [];
-    const elementGuidelines = this.getCustomizeOptions()?.elementGuidelines || Array.from(selectedElList[0]?.parentElement?.children || []);
-    if (this.mode === Mode.ABSOLUTE) {
-      this.container.append(this.createGuidelineElements(selectedElList, elementGuidelines));
-    }
-  }
-  /**
-   * 获取moveable参数
-   * @param isMultiSelect 是否多选模式
-   * @param runtimeOptions 调用时实时传进来的的moveable参数
-   * @returns moveable所需参数
-   */
-  getOptions(isMultiSelect, runtimeOptions = {}) {
-    const defaultOptions = this.getDefaultOptions(isMultiSelect);
-    const customizedOptions = this.getCustomizeOptions() || {};
-    this.options = merge(defaultOptions, customizedOptions, runtimeOptions);
-    return this.options;
-  }
-  /**
-   * 获取单选和多选的moveable公共参数
-   * @returns moveable公共参数
-   */
-  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: 0,
-        right: this.container.clientWidth,
-        bottom: isSortable ? void 0 : this.container.clientHeight
-      }
-    };
-    const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
-    return merge(commonOptions, differenceOptions);
-  }
-  /**
-   * 获取单选下的差异化参数
-   * @returns {MoveableOptions} moveable options参数
-   */
-  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,
-      dragTarget: ".moveable-drag-area-button",
-      dragTargetSelf: true,
-      props: {
-        actions: true
-      },
-      ables: [MoveableActionsAble(this.actionHandler.bind(this))]
-    };
-  }
-  /**
-   * 获取多选下的差异化参数
-   * @returns {MoveableOptions} moveable options参数
-   */
-  getMultiOptions() {
-    return {
-      defaultGroupRotate: 0,
-      defaultGroupOrigin: "50% 50%",
-      startDragRotate: 0,
-      throttleDragRotate: 0,
-      origin: true,
-      padding: { left: 0, top: 0, right: 0, bottom: 0 }
-    };
-  }
-  /**
-   * 获取业务方自定义的moveable参数
-   */
-  getCustomizeOptions() {
-    if (typeof this.customizedOptions === "function") {
-      return this.customizedOptions();
-    }
-    return this.customizedOptions;
-  }
-  /**
-   * 这是给selectParentAbles的回调函数，用于触发选中父元素事件
-   */
-  actionHandler(type) {
-    this.emit(type);
-  }
-  /**
-   * 为需要辅助对齐的元素创建div
-   * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
-   * @param allElList 全部元素列表
-   * @returns frame 辅助对齐元素集合的页面片
-   */
-  createGuidelineElements(selectedElList, allElList) {
-    const frame = globalThis.document.createDocumentFragment();
-    for (const element of allElList) {
-      let node = element.element || element;
-      if (!node || typeof node === "string") continue;
-      if (typeof node === "function") {
-        node = node();
-      }
-      if (this.isInElementList(node, selectedElList)) continue;
-      const { width, height } = node.getBoundingClientRect();
-      if (!width || !height) 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;
-  }
-  /**
-   * 判断一个元素是否在元素列表里面
-   * @param ele 元素
-   * @param eleList 元素列表
-   * @returns 是否在元素列表里面
-   */
-  isInElementList(ele, eleList) {
-    for (const eleItem of eleList) {
-      if (ele === eleItem) return true;
-    }
-    return false;
-  }
-}
-
-class StageDragResize extends MoveableOptionsManager {
-  /** 目标节点 */
-  target = null;
-  /** Moveable拖拽类实例 */
-  moveable;
-  /** 拖动状态 */
-  dragStatus = StageDragStatus.END;
-  dragResizeHelper;
-  disabledDragStart;
-  getRenderDocument;
-  markContainerEnd;
-  delayedMarkContainer;
-  constructor(config) {
-    super(config);
-    this.getRenderDocument = config.getRenderDocument;
-    this.markContainerEnd = config.markContainerEnd;
-    this.delayedMarkContainer = config.delayedMarkContainer;
-    this.disabledDragStart = config.disabledDragStart;
-    this.dragResizeHelper = config.dragResizeHelper;
-    this.on("update-moveable", () => {
-      if (this.moveable) {
-        this.updateMoveable();
-      }
-    });
-  }
-  getTarget() {
-    return this.target;
-  }
-  /**
-   * 将选中框渲染并覆盖到选中的组件Dom节点上方
-   * 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标
-   * @param el 选中组件的Dom节点元素
-   * @param event 鼠标事件
-   */
-  select(el, event) {
-    if (!el) {
-      this.moveable?.destroy();
-      this.moveable = void 0;
-      return;
-    }
-    if (!this.moveable || el !== this.target) {
-      this.initMoveable(el);
-    } else {
-      this.updateMoveable(el);
-    }
-    if (event && !this.disabledDragStart) {
-      this.moveable?.dragStart(event);
-    }
-  }
-  /**
-   * 初始化选中框并渲染出来
-   */
-  updateMoveable(el = this.target) {
-    if (!this.moveable) return;
-    if (!el) throw new Error("未选中任何节点");
-    const options = this.init(el);
-    Object.entries(options).forEach(([key, value]) => {
-      this.moveable[key] = value;
-    });
-    this.moveable.updateRect();
-  }
-  clearSelectStatus() {
-    if (!this.moveable) return;
-    this.dragResizeHelper.destroyShadowEl();
-    this.moveable.target = null;
-    this.moveable.updateRect();
-  }
-  getDragStatus() {
-    return this.dragStatus;
-  }
-  /**
-   * 销毁实例
-   */
-  destroy() {
-    this.target = null;
-    this.moveable?.destroy();
-    this.dragResizeHelper.destroy();
-    this.dragStatus = StageDragStatus.END;
-    this.removeAllListeners();
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  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);
-    this.setElementGuidelines([this.target]);
-    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(this.container, {
-      ...options
-    });
-    this.bindResizeEvent();
-    this.bindDragEvent();
-    this.bindRotateEvent();
-    this.bindScaleEvent();
-  }
-  bindResizeEvent() {
-    if (!this.moveable) throw new Error("moveable 未初始化");
-    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 未初始化");
-    let timeout;
-    this.moveable.on("dragStart", (e) => {
-      if (!this.target) throw new Error("未选中组件");
-      this.dragStatus = StageDragStatus.START;
-      this.dragResizeHelper.onDragStart(e);
-      this.emit("drag-start", 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 未初始化");
-    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);
-      if (this.target && frame) {
-        this.emit("update", {
-          data: [
-            {
-              el: this.target,
-              style: {
-                transform: frame.get("transform")
-              }
-            }
-          ],
-          parentEl: null
-        });
-      }
-    });
-  }
-  bindScaleEvent() {
-    if (!this.moveable) throw new Error("moveable 未初始化");
-    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);
-      if (this.target && frame) {
-        this.emit("update", {
-          data: [
-            {
-              el: this.target,
-              style: {
-                transform: frame.get("transform")
-              }
-            }
-          ],
-          parentEl: null
-        });
-      }
-    });
-  }
-  sort() {
-    if (!this.target || !this.dragResizeHelper.getGhostEl()) throw new Error("未知错误");
-    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 {
-      const id = getIdFromEl()(this.target);
-      id && this.emit("sort", {
-        src: id,
-        dist: id
-      });
-    }
-  }
-  update(isResize = false, parentEl = null) {
-    if (!this.target) return;
-    const doc = this.getRenderDocument();
-    if (!doc) return;
-    const rect = this.dragResizeHelper.getUpdatedElRect(this.target, parentEl, doc);
-    this.emit("update", {
-      data: [
-        {
-          el: this.target,
-          style: isResize ? rect : { left: rect.left, top: rect.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
-    });
-  }
-  /**
-   * 高亮鼠标悬停的组件
-   * @param el 选中组件的Dom节点元素
-   */
-  highlight(el) {
-    if (!el || el === this.target) return;
-    this.target = el;
-    this.targetShadow?.update(el);
-    if (this.moveable) {
-      this.moveable.zoom = 2;
-      this.moveable.updateRect();
-    } else {
-      this.moveable = new Moveable__default(this.container, {
-        target: this.targetShadow?.el,
-        origin: false,
-        rootContainer: this.getRootContainer(),
-        zoom: 2
-      });
-    }
-  }
-  /**
-   * 清空高亮
-   */
-  clearHighlight() {
-    if (!this.moveable || !this.target) return;
-    this.moveable.zoom = 0;
-    this.moveable.updateRect();
-    this.target = void 0;
-  }
-  /**
-   * 销毁实例
-   */
-  destroy() {
-    this.target = void 0;
-    this.moveable?.destroy();
-    this.targetShadow?.destroy();
-    this.moveable = void 0;
-    this.targetShadow = void 0;
-  }
-}
-
-class StageMultiDragResize extends MoveableOptionsManager {
-  /** 画布容器 */
-  container;
-  /** 多选:目标节点组 */
-  targetList = [];
-  /** Moveable多选拖拽类实例 */
-  moveableForMulti;
-  dragStatus = StageDragStatus.END;
-  dragResizeHelper;
-  getRenderDocument;
-  delayedMarkContainer;
-  markContainerEnd;
-  constructor(config) {
-    const moveableOptionsManagerConfig = {
-      container: config.container,
-      moveableOptions: config.moveableOptions,
-      getRootContainer: config.getRootContainer
-    };
-    super(moveableOptionsManagerConfig);
-    this.delayedMarkContainer = config.delayedMarkContainer;
-    this.markContainerEnd = config.markContainerEnd;
-    this.container = config.container;
-    this.getRenderDocument = config.getRenderDocument;
-    this.dragResizeHelper = config.dragResizeHelper;
-    this.on("update-moveable", () => {
-      if (this.moveableForMulti) {
-        this.updateMoveable();
-      }
-    });
-  }
-  /**
-   * 多选
-   * @param els
-   */
-  multiSelect(els) {
-    if (els.length === 0) {
-      return;
-    }
-    this.mode = getMode(els[0]);
-    this.targetList = els;
-    this.dragResizeHelper.updateGroup(els);
-    this.setElementGuidelines(this.targetList);
-    this.moveableForMulti?.destroy();
-    this.dragResizeHelper.clear();
-    this.moveableForMulti = new Moveable__default(
-      this.container,
-      this.getOptions(true, {
-        target: this.dragResizeHelper.getShadowEls()
-      })
-    );
-    let timeout;
-    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) => {
-      if (timeout) {
-        globalThis.clearTimeout(timeout);
-        timeout = void 0;
-      }
-      timeout = this.delayedMarkContainer(e.inputEvent, this.targetList);
-      this.dragResizeHelper.onDragGroup(e);
-      this.dragStatus = StageDragStatus.ING;
-    }).on("dragGroupEnd", () => {
-      if (timeout) {
-        globalThis.clearTimeout(timeout);
-        timeout = void 0;
-      }
-      const parentEl = this.markContainerEnd();
-      this.update(false, parentEl);
-      this.dragStatus = StageDragStatus.END;
-    }).on("clickGroup", (e) => {
-      const { inputTarget, targets } = e;
-      if (targets.length > 1 && targets.includes(inputTarget)) {
-        const id = getIdFromEl()(inputTarget)?.replace(DRAG_EL_ID_PREFIX, "");
-        id && this.emit("change-to-select", id, e.inputEvent);
-      }
-    });
-  }
-  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("未选中任何节点");
-    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.updateRect();
-  }
-  /**
-   * 清除多选状态
-   */
-  clearSelectStatus() {
-    if (!this.moveableForMulti) return;
-    this.dragResizeHelper.clearMultiSelectStatus();
-    this.moveableForMulti.target = null;
-    this.moveableForMulti.updateTarget();
-    this.targetList = [];
-  }
-  /**
-   * 销毁实例
-   */
-  destroy() {
-    this.moveableForMulti?.destroy();
-    this.dragResizeHelper.destroy();
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  /**
-   * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
-   * @param isResize 是否进行大小缩放
-   */
-  update(isResize = false, parentEl = null) {
-    if (this.targetList.length === 0) return;
-    const doc = this.getRenderDocument();
-    if (!doc) return;
-    const data = this.targetList.map((targetItem) => {
-      const rect = this.dragResizeHelper.getUpdatedElRect(targetItem, parentEl, doc);
-      return {
-        el: targetItem,
-        style: isResize ? rect : { left: rect.left, top: rect.top }
-      };
-    });
-    this.emit("update", { data, parentEl });
-  }
-}
-
-const throttleTime = 100;
-const defaultContainerHighlightDuration = 800;
-class ActionManager extends EventEmitter {
-  dr = null;
-  multiDr = null;
-  highlightLayer = null;
-  /** 单选、多选、高亮的容器（蒙层的content） */
-  container;
-  /** 当前选中的节点 */
-  selectedEl = null;
-  /** 多选选中的节点组 */
-  selectedElList = [];
-  /** 当前高亮的节点 */
-  highlightedEl;
-  /** 当前是否处于多选状态 */
-  isMultiSelectStatus = false;
-  /** 当拖拽组件到容器上方进入可加入容器状态时，给容器添加的一个class名称 */
-  containerHighlightClassName;
-  /** 当拖拽组件到容器上方时，需要悬停多久才能将组件加入容器 */
-  containerHighlightDuration;
-  /** 将组件加入容器的操作方式 */
-  containerHighlightType;
-  isAltKeydown = false;
-  getTargetElement;
-  getElementsFromPoint;
-  canSelect;
-  isContainer;
-  getRenderDocument;
-  disabledMultiSelect = false;
-  config;
-  mouseMoveHandler = throttle((event) => {
-    const handler = async () => {
-      if (event.target?.classList?.contains("moveable-direction")) {
-        return;
-      }
-      const el = await this.getElementFromPoint(event);
-      const id = getIdFromEl()(el);
-      if (!id) {
-        this.clearHighlight();
-        return;
-      }
-      this.emit("mousemove", event);
-      this.highlight(id);
-    };
-    handler();
-  }, throttleTime);
-  constructor(config) {
-    super();
-    this.config = config;
-    this.container = config.container;
-    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS_NAME;
-    this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
-    this.containerHighlightType = config.containerHighlightType;
-    this.disabledMultiSelect = config.disabledMultiSelect ?? false;
-    this.getTargetElement = config.getTargetElement;
-    this.getElementsFromPoint = config.getElementsFromPoint;
-    this.canSelect = config.canSelect || ((el) => Boolean(getIdFromEl()(el)));
-    this.getRenderDocument = config.getRenderDocument;
-    this.isContainer = config.isContainer;
-    this.dr = this.createDr(config);
-    if (!this.disabledMultiSelect) {
-      this.multiDr = this.createMultiDr(config);
-    }
-    this.highlightLayer = new StageHighlight({
-      container: config.container,
-      updateDragEl: config.updateDragEl,
-      getRootContainer: config.getRootContainer
-    });
-    this.initMouseEvent();
-    this.initKeyEvent();
-  }
-  disableMultiSelect() {
-    this.disabledMultiSelect = true;
-    if (this.multiDr) {
-      this.multiDr.destroy();
-      this.multiDr = null;
-    }
-  }
-  enableMultiSelect() {
-    this.disabledMultiSelect = false;
-    if (!this.multiDr) {
-      this.multiDr = this.createMultiDr(this.config);
-    }
-  }
-  /**
-   * 设置水平/垂直参考线
-   * @param type 参考线类型
-   * @param guidelines 参考线坐标数组
-   */
-  setGuidelines(type, guidelines) {
-    this.dr?.setGuidelines(type, guidelines);
-    this.multiDr?.setGuidelines(type, guidelines);
-  }
-  /**
-   * 清空所有参考线
-   */
-  clearGuides() {
-    this.dr?.clearGuides();
-    this.multiDr?.clearGuides();
-  }
-  /**
-   * 更新moveable，外部主要调用场景是元素配置变更、页面大小变更
-   * @param el 变更的元素
-   */
-  updateMoveable(el) {
-    this.dr?.updateMoveable(el);
-    this.multiDr?.updateMoveable();
-  }
-  /**
-   * 判断是否单选选中的元素
-   */
-  isSelectedEl(el) {
-    return getIdFromEl()(el) === getIdFromEl()(this.selectedEl);
-  }
-  setSelectedEl(el) {
-    this.selectedEl = el;
-  }
-  getSelectedEl() {
-    return this.selectedEl;
-  }
-  getSelectedElList() {
-    return this.selectedElList;
-  }
-  getMoveableOption(key) {
-    if (this.dr?.getTarget()) {
-      return this.dr.getOption(key);
-    }
-    if (this.multiDr?.targetList.length) {
-      return this.multiDr.getOption(key);
-    }
-  }
-  /**
-   * 获取鼠标下方第一个可选中元素，如果元素层叠，返回到是最上层元素
-   * @param event 鼠标事件
-   * @returns 鼠标下方第一个可选中元素
-   */
-  async getElementFromPoint(event) {
-    const els = this.getElementsFromPoint(event);
-    this.emit("get-elements-from-point", els);
-    let stopped = false;
-    const stop = () => stopped = true;
-    for (const el of els) {
-      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
-        if (stopped) break;
-        return el;
-      }
-    }
-    return null;
-  }
-  /**
-   * 判断一个元素能否在当前场景被选中
-   * @param el 被判断的元素
-   * @param event 鼠标事件
-   * @param stop 通过该元素如果得知剩下的元素都不可被选中，通知调用方终止对剩下元素的判断
-   * @returns 能否选中
-   */
-  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;
-  }
-  /**
-   * 判断一个元素是否可以被多选，如果当前元素是page，则调stop函数告诉调用方不必继续判断其它元素了
-   */
-  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) || false;
-  }
-  select(el, event) {
-    this.setSelectedEl(el);
-    this.clearSelectStatus(SelectStatus.MULTI_SELECT);
-    this.dr?.select(el, event);
-  }
-  multiSelect(ids) {
-    this.selectedElList = [];
-    ids.forEach((id) => {
-      const el = this.getTargetElement(id);
-      if (el) {
-        this.selectedElList.push(el);
-      }
-    });
-    this.clearSelectStatus(SelectStatus.SELECT);
-    this.multiDr?.multiSelect(this.selectedElList);
-  }
-  getHighlightEl() {
-    return this.highlightedEl;
-  }
-  setHighlightEl(el) {
-    this.highlightedEl = el;
-  }
-  highlight(id) {
-    let el;
-    try {
-      el = this.getTargetElement(id);
-    } catch (error) {
-      this.clearHighlight();
-      console.warn("getTargetElement error:", error);
-      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();
-  }
-  /**
-   * 用于在切换选择模式时清除上一次的状态
-   * @param selectType 需要清理的选择模式
-   */
-  clearSelectStatus(selectType) {
-    if (selectType === SelectStatus.MULTI_SELECT) {
-      this.multiDr?.clearSelectStatus();
-      this.selectedElList = [];
-    } else {
-      this.dr?.clearSelectStatus();
-    }
-  }
-  /**
-   * 找到鼠标下方的容器，通过添加className对容器进行标记
-   * @param event 鼠标事件
-   * @param excludeElList 计算鼠标点所在容器时要排除的元素列表
-   */
-  async addContainerHighlightClassName(event, excludeElList) {
-    const doc = this.getRenderDocument();
-    if (!doc) return;
-    const els = this.getElementsFromPoint(event);
-    for (const el of els) {
-      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
-        addClassName(el, doc, this.containerHighlightClassName);
-        break;
-      }
-    }
-  }
-  /**
-   * 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
-   * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
-   * @param event 鼠标事件
-   * @param excludeElList 计算鼠标所在容器时要排除的元素列表
-   * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
-   */
-  delayedMarkContainer(event, excludeElList = []) {
-    if (this.canAddToContainer()) {
-      return globalThis.setTimeout(() => {
-        this.addContainerHighlightClassName(event, excludeElList);
-      }, this.containerHighlightDuration);
-    }
-    return void 0;
-  }
-  getDragStatus() {
-    return this.dr?.getDragStatus();
-  }
-  updateMoveableOptions() {
-    this.dr?.updateMoveable();
-    this.multiDr?.updateMoveable();
-  }
-  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.container.removeEventListener("dblclick", this.dblclickHandler);
-    this.selectedEl = null;
-    this.selectedElList = [];
-    this.dr?.destroy();
-    this.multiDr?.destroy();
-    this.highlightLayer?.destroy();
-    this.dr = null;
-    this.multiDr = null;
-    this.highlightLayer = null;
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  createDr(config) {
-    const createDrHelper = () => new DragResizeHelper({
-      container: config.container,
-      updateDragEl: config.updateDragEl
-    });
-    const dr = new StageDragResize({
-      container: config.container,
-      disabledDragStart: config.disabledDragStart,
-      moveableOptions: config.moveableOptions && this.changeCallback(config.moveableOptions, false),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this)
-    });
-    dr.on("update", (data) => {
-      setTimeout(() => this.emit("update", data));
-    }).on("sort", (data) => {
-      setTimeout(() => this.emit("sort", data));
-    }).on(AbleActionEventType.SELECT_PARENT, () => {
-      this.emit("select-parent");
-    }).on(AbleActionEventType.REMOVE, () => {
-      const drTarget = this.dr?.getTarget();
-      if (!drTarget) return;
-      const data = {
-        data: [{ el: drTarget }]
-      };
-      this.emit("remove", data);
-    }).on(AbleActionEventType.RERENDER, () => {
-      this.emit("rerender");
-    }).on("drag-start", (e) => {
-      this.emit("drag-start", e);
-    });
-    return dr;
-  }
-  createMultiDr(config) {
-    const createDrHelper = () => new DragResizeHelper({
-      container: config.container,
-      updateDragEl: config.updateDragEl
-    });
-    const multiDr = new StageMultiDragResize({
-      container: config.container,
-      moveableOptions: config.moveableOptions && this.changeCallback(config.moveableOptions, true),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this)
-    });
-    multiDr?.on("update", (data) => {
-      this.emit("multi-update", data);
-    }).on("change-to-select", (id, e) => {
-      if (this.isMultiSelectStatus) return;
-      this.emit("change-to-select", id, e);
-    });
-    return multiDr;
-  }
-  changeCallback(options, isMulti) {
-    if (typeof options === "function") {
-      return () => {
-        if (typeof options === "function") {
-          const cfg = {
-            targetEl: this.selectedEl,
-            targetElId: getIdFromEl()(this.selectedEl),
-            targetEls: this.selectedElList,
-            targetElIds: this.selectedElList?.map((item) => getIdFromEl()(item) || ""),
-            isMulti,
-            document: this.getRenderDocument()
-          };
-          return options(cfg);
-        }
-        return options;
-      };
-    }
-    return options;
-  }
-  /**
-   * 在执行多选逻辑前，先准备好多选选中元素
-   * @param el 新选中的元素
-   * @returns 多选选中的元素列表
-   */
-  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.setSelectedEl(null);
-    }
-    const existIndex = this.selectedElList.findIndex((selectedDom) => getIdFromEl()(selectedDom) === getIdFromEl()(el));
-    if (existIndex !== -1) {
-      if (this.selectedElList.length > 1) {
-        this.selectedElList.splice(existIndex, 1);
-      }
-    } else {
-      this.selectedElList.push(el);
-    }
-  }
-  /**
-   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
-   */
-  canAddToContainer() {
-    return this.containerHighlightType === ContainerHighlightType.DEFAULT || this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown;
-  }
-  /**
-   * 结束对container的标记状态
-   * @returns 标记的容器元素，没有标记的容器时返回null
-   */
-  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);
-    this.container.addEventListener("dblclick", this.dblclickHandler);
-  }
-  /**
-   * 初始化键盘事件监听
-   */
-  initKeyEvent() {
-    const { isMac } = new Env();
-    const ctrl = isMac ? "meta" : "ctrl";
-    KeyController.global.keydown(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      if (!this.disabledMultiSelect) {
-        this.isMultiSelectStatus = true;
-      }
-    });
-    KeyController.global.on("blur", () => {
-      if (!this.disabledMultiSelect) {
-        this.isMultiSelectStatus = false;
-      }
-      this.isAltKeydown = false;
-    });
-    KeyController.global.keyup(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      if (!this.disabledMultiSelect) {
-        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;
-    });
-  }
-  /**
-   * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
-   */
-  mouseDownHandler = (event) => {
-    const handler = async () => {
-      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);
-    };
-    handler();
-  };
-  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;
-  }
-  /**
-   * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
-   */
-  mouseUpHandler = (event) => {
-    getDocument().removeEventListener("mouseup", this.mouseUpHandler);
-    this.container.addEventListener("mousemove", this.mouseMoveHandler);
-    if (this.isMultiSelectStatus) {
-      this.emit("multi-select", this.selectedElList, event);
-    } else {
-      this.emit("select", this.selectedEl, event);
-    }
-  };
-  mouseLeaveHandler = (event) => {
-    setTimeout(() => this.clearHighlight(), throttleTime);
-    this.emit("mouseleave", event);
-  };
-  mouseWheelHandler = () => {
-    this.clearHighlight();
-  };
-  dblclickHandler = (event) => {
-    this.emit("dblclick", event);
-  };
-}
-
-const guidesClass = "tmagic-stage-guides";
-class Rule extends EventEmitter {
-  hGuides;
-  vGuides;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
-  container;
-  containerResizeObserver;
-  isShowGuides = true;
-  guidesOptions;
-  constructor(container, options) {
-    super();
-    if (options?.disabledRule) {
-      return;
-    }
-    this.guidesOptions = options?.guidesOptions || {};
-    this.container = container;
-    this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
-    this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
-    this.containerResizeObserver = new ResizeObserver(() => {
-      this.vGuides?.resize();
-      this.hGuides?.resize();
-    });
-    this.containerResizeObserver.observe(this.container);
-  }
-  /**
-   * 是否显示辅助线
-   * @param isShowGuides 是否显示
-   */
-  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([[], []]);
-  }
-  /**
-   * 是否显示标尺
-   * @param show 是否显示
-   */
-  showRule(show = true) {
-    if (show) {
-      this.destroyGuides();
-      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
-      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.destroyGuides();
-    this.hGuides?.off("changeGuides", this.hGuidesChangeGuidesHandler);
-    this.vGuides?.off("changeGuides", this.vGuidesChangeGuidesHandler);
-    this.containerResizeObserver?.disconnect();
-    this.removeAllListeners();
-  }
-  destroyGuides() {
-    this.hGuides?.destroy();
-    this.vGuides?.destroy();
-    this.container?.querySelectorAll(`.${guidesClass}`).forEach((el) => {
-      el.remove();
-    });
-    this.hGuides = void 0;
-    this.vGuides = void 0;
-    this.container = void 0;
-  }
-  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 = []) => {
-    if (!this.container) {
-      return;
-    }
-    const guides = new Guides(this.container, {
-      type,
-      defaultGuides,
-      displayDragPos: true,
-      className: guidesClass,
-      backgroundColor: "#fff",
-      lineColor: "#000",
-      textColor: "#000",
-      style: this.getGuidesStyle(type),
-      showGuides: this.isShowGuides,
-      ...this.guidesOptions
-    });
-    const changEventHandler = {
-      [GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
-      [GuidesType.VERTICAL]: this.vGuidesChangeGuidesHandler
-    }[type];
-    if (changEventHandler) {
-      guides.on("changeGuides", changEventHandler);
-    }
-    return guides;
-  };
-  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(options) {
-    const wrapper = createWrapper();
-    super(wrapper, options);
-    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`;
-    }
-  }
-  /**
-   * 初始化视窗和蒙层监听，监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
-   * @description 初始化视窗和蒙层监听
-   * @param page 页面Dom节点
-   */
-  observe(page) {
-    if (!page) return;
-    this.page = page;
-    this.initObserverIntersection();
-    this.initObserverWrapper();
-  }
-  /**
-   * 处理页面大小变更，同步页面和mask大小
-   * @param entries ResizeObserverEntry，获取页面最新大小
-   */
-  pageResize(entries) {
-    const [entry] = entries;
-    const { clientHeight, clientWidth } = entry.target;
-    this.setHeight(clientHeight);
-    this.setWidth(clientWidth);
-    this.scroll();
-  }
-  /**
-   * 监听一个组件是否在画布可视区域内
-   * @param el 被选中的组件，可能是左侧目录树中选中的
-   */
-  observerIntersection(el) {
-    this.intersectionObserver?.observe(el);
-  }
-  /**
-   * 挂载Dom节点
-   * @param el 将蒙层挂载到该Dom节点上
-   */
-  mount(el) {
-    if (!this.content) throw new Error("content 不存在");
-    el.appendChild(this.wrapper);
-  }
-  setLayout(el) {
-    this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
-  }
-  scrollIntoView(el) {
-    if (!this.page || el.getBoundingClientRect().left >= this.page.scrollWidth) return;
-    const scrollParent = getScrollParent(el);
-    if (scrollParent && scrollParent !== this.pageScrollParent) {
-      this.scrollIntoView(scrollParent);
-      return;
-    }
-    el.scrollIntoView();
-    if (!this.pageScrollParent) return;
-    this.scrollLeft = this.pageScrollParent.scrollLeft;
-    this.scrollTop = this.pageScrollParent.scrollTop;
-    this.scroll();
-  }
-  /**
-   * 销毁实例
-   */
-  destroy() {
-    super.destroy();
-    this.content?.remove();
-    this.page = null;
-    this.pageScrollParent = null;
-    this.wrapperResizeObserver?.disconnect();
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  /**
-   * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
-   */
-  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
-        }
-      );
-    }
-  }
-  /**
-   * 监听mask的容器大小变化
-   */
-  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;
-        if (this.mode === Mode.FIXED) {
-          this.content.style.width = `${this.wrapperWidth}px`;
-          this.content.style.height = `${this.wrapperHeight}px`;
-        }
-        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);
-  }
-  /**
-   * 设置蒙层高度
-   * @param height 高度
-   */
-  setHeight(height) {
-    this.height = height;
-    this.setMaxScrollTop();
-    if (this.mode !== Mode.FIXED) {
-      this.content.style.height = `${height}px`;
-    }
-  }
-  /**
-   * 设置蒙层宽度
-   * @param width 宽度
-   */
-  setWidth(width) {
-    this.width = width;
-    this.setMaxScrollLeft();
-    if (this.mode !== Mode.FIXED) {
-      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 未初始化");
-    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 {
-  /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
-  contentWindow = null;
-  runtime = null;
-  iframe;
-  nativeContainer;
-  runtimeUrl;
-  zoom = DEFAULT_ZOOM;
-  renderType;
-  customizedRender;
-  constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }) {
-    super();
-    this.renderType = renderType;
-    this.runtimeUrl = runtimeUrl || "";
-    this.customizedRender = customizedRender;
-    this.setZoom(zoom);
-    if (this.renderType === RenderType.IFRAME) {
-      this.createIframe();
-    } else if (this.renderType === RenderType.NATIVE) {
-      this.createNativeContainer();
-    }
-  }
-  getMagicApi = () => ({
-    id: guid(),
-    onPageElUpdate: (el) => {
-      this.emit("page-el-update", el);
-    },
-    onRuntimeReady: (runtime) => {
-      if (this.runtime) {
-        return;
-      }
-      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(ids) {
-    const runtime = await this.getRuntime();
-    for (const id of ids) {
-      await runtime?.select?.(id);
-      this.flagSelectedEl(this.getTargetElement(id));
-    }
-  }
-  setZoom(zoom = DEFAULT_ZOOM) {
-    this.zoom = zoom;
-  }
-  /**
-   * 挂载Dom节点
-   * @param el 将页面挂载到该Dom节点上
-   */
-  async mount(el) {
-    if (this.iframe) {
-      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-        let html = await fetch(this.runtimeUrl).then((res) => res.text());
-        const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
-        html = html.replace("<head>", `<head>
-<base href="${base}">`);
-        this.iframe.srcdoc = html;
-      }
-      el.appendChild(this.iframe);
-      this.postTmagicRuntimeReady();
-    } else if (this.nativeContainer) {
-      el.appendChild(this.nativeContainer);
-    }
-  }
-  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;
-  }
-  /**
-   * 通过坐标获得坐标下所有HTML元素数组
-   * @param point 坐标
-   * @returns 坐标下方所有HTML元素数组，会包含父元素直至html，元素层叠时返回顺序是从上到下
-   */
-  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(id) {
-    return getElById()(this.getDocument(), id);
-  }
-  postTmagicRuntimeReady() {
-    this.contentWindow = this.iframe?.contentWindow;
-    this.contentWindow.magic = this.getMagicApi();
-    this.contentWindow.postMessage(
-      {
-        tmagicRuntimeReady: true
-      },
-      "*"
-    );
-  }
-  reloadIframe(url) {
-    if (this.renderType !== RenderType.IFRAME) return;
-    const el = this.iframe?.parentElement;
-    this.destroyIframe();
-    this.runtimeUrl = url;
-    this.createIframe();
-    this.mount(el);
-    this.runtime = null;
-  }
-  destroyIframe() {
-    this.iframe?.removeEventListener("load", this.iframeLoadHandler);
-    this.contentWindow = null;
-    this.iframe?.remove();
-    this.iframe = void 0;
-  }
-  /**
-   * 销毁实例
-   */
-  destroy() {
-    this.destroyIframe();
-    globalThis.runtime = void 0;
-    this.removeAllListeners();
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  createIframe() {
-    this.iframe = globalThis.document.createElement("iframe");
-    this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
-    this.iframe.style.cssText = `
-      border: 0;
-      width: 100%;
-      height: 100%;
-    `;
-    this.iframe.addEventListener("load", this.iframeLoadHandler);
-    return this.iframe;
-  }
-  async createNativeContainer() {
-    this.contentWindow = globalThis;
-    this.nativeContainer = globalThis.document.createElement("div");
-    this.contentWindow.magic = this.getMagicApi();
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (el) {
-        this.nativeContainer.appendChild(el);
-      }
-    }
-  }
-  /**
-   * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
-   * @param el 被选中的元素
-   */
-  flagSelectedEl(el) {
-    const doc = this.getDocument();
-    if (doc) {
-      removeSelectedClassName(doc);
-      el && addSelectedClassName(el, doc);
-    }
-  }
-  iframeLoadHandler = () => {
-    const handler = 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);
-    };
-    handler();
-  };
-}
-
-class StageCore extends EventEmitter$1 {
-  container;
-  renderer = null;
-  mask = null;
-  actionManager = null;
-  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,
-      renderType: config.renderType,
-      customizedRender: async () => {
-        if (this?.customizedRender) {
-          return await this.customizedRender(this);
-        }
-        return null;
-      }
-    });
-    this.mask = new StageMask({
-      guidesOptions: config.guidesOptions,
-      disabledRule: config.disabledRule
-    });
-    this.actionManager = new ActionManager(this.getActionManagerConfig(config));
-    this.initRenderEvent();
-    this.initActionEvent();
-    this.initMaskEvent();
-  }
-  /**
-   * 单选选中元素
-   * @param id 选中的id
-   */
-  async select(id, event) {
-    const el = this.renderer?.getTargetElement(id) || null;
-    if (el === this.actionManager?.getSelectedEl()) return;
-    await this.renderer?.select([id]);
-    if (el) {
-      this.mask?.setLayout(el);
-    }
-    this.actionManager?.select(el, event);
-    if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
-      this.mask?.observerIntersection(el);
-    }
-  }
-  /**
-   * 多选选中多个元素
-   * @param ids 选中元素的id列表
-   */
-  async multiSelect(ids) {
-    const els = ids.map((id) => this.renderer?.getTargetElement(id)).filter((el) => Boolean(el));
-    if (els.length === 0) return;
-    const lastEl = els[els.length - 1];
-    const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
-    await this.renderer?.select(ids);
-    lastEl && this.mask?.setLayout(lastEl);
-    this.actionManager?.multiSelect(ids);
-    if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
-      this.mask?.observerIntersection(lastEl);
-    }
-  }
-  /**
-   * 高亮选中元素
-   * @param el 要高亮的元素
-   */
-  highlight(id) {
-    this.actionManager?.highlight(id);
-  }
-  clearHighlight() {
-    this.actionManager?.clearHighlight();
-  }
-  /**
-   * 更新组件
-   * @param 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);
-      }
-    });
-  }
-  /**
-   * 往画布增加一个组件
-   * @param data 组件信息数据
-   */
-  async add(data) {
-    return await this.renderer?.add(data);
-  }
-  /**
-   * 从画布删除一个组件
-   * @param data 组件信息数据
-   */
-  async remove(data) {
-    return await this.renderer?.remove(data);
-  }
-  setZoom(zoom = DEFAULT_ZOOM) {
-    this.renderer?.setZoom(zoom);
-  }
-  /**
-   * 挂载Dom节点
-   * @param el 将stage挂载到该Dom节点上
-   */
-  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();
-  }
-  /**
-   * @deprecated 废弃接口，建议用delayedMarkContainer代替
-   */
-  getAddContainerHighlightClassNameTimeout(event, excludeElList = []) {
-    return this.delayedMarkContainer(event, excludeElList);
-  }
-  /**
-   * 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
-   * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
-   * @param event 鼠标事件
-   * @param excludeElList 计算鼠标所在容器时要排除的元素列表
-   * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
-   */
-  delayedMarkContainer(event, excludeElList = []) {
-    return this.actionManager?.delayedMarkContainer(event, excludeElList);
-  }
-  getMoveableOption(key) {
-    return this.actionManager?.getMoveableOption(key);
-  }
-  getDragStatus() {
-    return this.actionManager?.getDragStatus();
-  }
-  disableMultiSelect() {
-    this.actionManager?.disableMultiSelect();
-  }
-  enableMultiSelect() {
-    this.actionManager?.enableMultiSelect();
-  }
-  reloadIframe(url) {
-    this.renderer?.reloadIframe(url);
-  }
-  /**
-   * 销毁实例
-   */
-  destroy() {
-    const { mask, renderer, actionManager, pageResizeObserver } = this;
-    renderer?.destroy();
-    mask?.destroy();
-    actionManager?.destroy();
-    pageResizeObserver?.disconnect();
-    this.removeAllListeners();
-    this.container = void 0;
-    this.renderer = null;
-    this.mask = null;
-    this.actionManager = null;
-    this.pageResizeObserver = null;
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  /**
-   * 监听页面大小变化
-   */
-  observePageResize(page) {
-    if (this.pageResizeObserver) {
-      this.pageResizeObserver.disconnect();
-    }
-    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,
-      container: this.mask.content,
-      disabledDragStart: config.disabledDragStart,
-      disabledMultiSelect: config.disabledMultiSelect,
-      canSelect: config.canSelect,
-      isContainer: config.isContainer,
-      updateDragEl: config.updateDragEl,
-      getRootContainer: () => this.container,
-      getRenderDocument: () => this.renderer.getDocument(),
-      getTargetElement: (id) => this.renderer.getTargetElement(id),
-      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);
-      this.emit("page-el-update", 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();
-    this.initMouseEvent();
-  }
-  /**
-   * 初始化ActionManager类本身抛出来的事件监听
-   */
-  initActionManagerEvent() {
-    this.actionManager?.on("before-select", (el, event) => {
-      const id = getIdFromEl()(el);
-      id && this.select(id, event);
-    }).on("select", (selectedEl, event) => {
-      this.emit("select", selectedEl, event);
-    }).on("before-multi-select", (els) => {
-      this.multiSelect(els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)));
-    }).on("multi-select", (selectedElList, event) => {
-      this.emit("multi-select", selectedElList, event);
-    }).on("dblclick", (event) => {
-      this.emit("dblclick", event);
-    });
-  }
-  /**
-   * 初始化DragResize类通过ActionManager抛出来的事件监听
-   */
-  initDrEvent() {
-    this.actionManager?.on("update", (data) => {
-      this.emit("update", data);
-    }).on("sort", (data) => {
-      this.emit("sort", data);
-    }).on("select-parent", () => {
-      this.emit("select-parent");
-    }).on("rerender", () => {
-      this.emit("rerender");
-    }).on("remove", (data) => {
-      this.emit("remove", data);
-    });
-  }
-  /**
-   * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
-   */
-  initMulDrEvent() {
-    this.actionManager?.on("change-to-select", (id, e) => {
-      this.select(id);
-      setTimeout(() => {
-        const el = this.renderer?.getTargetElement(id);
-        el && this.emit("select", el, e);
-      });
-    }).on("multi-update", (data) => {
-      this.emit("update", data);
-    });
-  }
-  /**
-   * 初始化Highlight类通过ActionManager抛出来的事件监听
-   */
-  initHighlightEvent() {
-    this.actionManager?.on("highlight", (highlightEl) => {
-      this.emit("highlight", highlightEl);
-    });
-  }
-  /**
-   * 初始化Highlight类通过ActionManager抛出来的事件监听
-   */
-  initMouseEvent() {
-    this.actionManager?.on("mousemove", (event) => {
-      this.emit("mousemove", event);
-    }).on("mouseleave", (event) => {
-      this.emit("mouseleave", event);
-    }).on("drag-start", (e) => {
-      this.emit("drag-start", e);
-    });
-  }
-}
-
-export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, MoveableActionsAble, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };