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

package/dist/tmagic-stage.mjs

@@ -1,1715 +0,0 @@
-import EventEmitter$1, { EventEmitter } from 'events';
-import { removeClassName, removeClassNameByClassName, createDiv, injectStyle, isSameDomain, getHost, addClassName } from '@tmagic/utils';
-import KeyController from 'keycon';
-import Moveable from 'moveable';
-import MoveableHelper from 'moveable-helper';
-import { throttle } from 'lodash-es';
-import Guides from '@scena/guides';
-
-const GHOST_EL_ID_PREFIX = "ghost_el_";
-const DRAG_EL_ID_PREFIX = "drag_el_";
-const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
-const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
-const 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 ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-  ContainerHighlightType2["DEFAULT"] = "default";
-  ContainerHighlightType2["ALT"] = "alt";
-  return ContainerHighlightType2;
-})(ContainerHighlightType || {});
-var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-  StageDragStatus2["START"] = "start";
-  StageDragStatus2["ING"] = "ing";
-  StageDragStatus2["END"] = "end";
-  return StageDragStatus2;
-})(StageDragStatus || {});
-
-const getParents = (el, relative) => {
-  let cur = el.parentElement;
-  const parents = [];
-  while (cur && cur !== relative) {
-    parents.push(cur);
-    cur = cur.parentElement;
-  }
-  return parents;
-};
-const getOffset = (el) => {
-  const { offsetParent } = el;
-  const left = el.offsetLeft;
-  const top = el.offsetTop;
-  if (offsetParent) {
-    const parentOffset = getOffset(offsetParent);
-    return {
-      left: left + parentOffset.left,
-      top: top + parentOffset.top
-    };
-  }
-  return {
-    left,
-    top
-  };
-};
-const getTargetElStyle = (el) => {
-  const offset = getOffset(el);
-  const { transform } = getComputedStyle(el);
-  return `
-    position: absolute;
-    transform: ${transform};
-    left: ${offset.left}px;
-    top: ${offset.top}px;
-    width: ${el.clientWidth}px;
-    height: ${el.clientHeight}px;
-    z-index: ${ZIndex.DRAG_EL};
-  `;
-};
-const getAbsolutePosition = (el, { top, left }) => {
-  const { offsetParent } = el;
-  if (offsetParent) {
-    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;
-    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
-  };
-};
-
-class StageDragResize extends EventEmitter {
-  core;
-  mask;
-  container;
-  target;
-  dragEl;
-  moveable;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
-  elementGuidelines = [];
-  mode = Mode.ABSOLUTE;
-  moveableOptions = {};
-  dragStatus = StageDragStatus.END;
-  ghostEl;
-  moveableHelper;
-  isContainerHighlight = false;
-  constructor(config) {
-    super();
-    this.core = config.core;
-    this.container = config.container;
-    this.mask = config.mask;
-    KeyController.global.keydown("alt", (e) => {
-      e.inputEvent.preventDefault();
-      this.isContainerHighlight = true;
-    });
-    KeyController.global.keyup("alt", (e) => {
-      e.inputEvent.preventDefault();
-      const doc = this.core.renderer.contentWindow?.document;
-      if (doc && this.canContainerHighlight()) {
-        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
-      }
-      this.isContainerHighlight = false;
-    });
-  }
-  select(el, event) {
-    const oldTarget = this.target;
-    this.target = el;
-    if (!this.dragEl) {
-      this.dragEl = globalThis.document.createElement("div");
-      this.container.append(this.dragEl);
-    }
-    if (!this.moveable || this.target !== oldTarget) {
-      this.init(el);
-      this.moveableHelper = MoveableHelper.create({
-        useBeforeRender: true,
-        useRender: false,
-        createAuto: true
-      });
-      this.initMoveable();
-    } else {
-      this.updateMoveable();
-    }
-    if (event) {
-      this.moveable?.dragStart(event);
-    }
-  }
-  updateMoveable(el = this.target) {
-    if (!this.moveable)
-      throw new Error("\u672A\u521D\u59CB\u5316moveable");
-    if (!el)
-      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
-    this.target = el;
-    this.init(el);
-    Object.entries(this.moveableOptions).forEach(([key, value]) => {
-      this.moveable[key] = value;
-    });
-    this.moveable.updateTarget();
-  }
-  setGuidelines(type, guidelines) {
-    if (type === GuidesType.HORIZONTAL) {
-      this.horizontalGuidelines = guidelines;
-      this.moveableOptions.horizontalGuidelines = guidelines;
-    } else if (type === GuidesType.VERTICAL) {
-      this.verticalGuidelines = guidelines;
-      this.moveableOptions.verticalGuidelines = guidelines;
-    }
-    if (this.moveable) {
-      this.updateMoveable();
-    }
-  }
-  clearGuides() {
-    this.horizontalGuidelines = [];
-    this.verticalGuidelines = [];
-    this.moveableOptions.horizontalGuidelines = [];
-    this.moveableOptions.verticalGuidelines = [];
-    this.updateMoveable();
-  }
-  clearSelectStatus() {
-    if (!this.moveable)
-      return;
-    this.destroyDragEl();
-    this.dragEl = void 0;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
-  }
-  destroyDragEl() {
-    this.dragEl?.remove();
-  }
-  destroy() {
-    this.moveable?.destroy();
-    this.destroyGhostEl();
-    this.destroyDragEl();
-    this.dragStatus = StageDragStatus.END;
-    this.removeAllListeners();
-  }
-  init(el) {
-    if (/(auto|scroll)/.test(el.style.overflow)) {
-      el.style.overflow = "hidden";
-    }
-    this.mode = getMode(el);
-    this.destroyGhostEl();
-    if (!this.dragEl) {
-      return;
-    }
-    this.dragEl.style.cssText = getTargetElStyle(el);
-    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
-    if (typeof this.core.config.updateDragEl === "function") {
-      this.core.config.updateDragEl(this.dragEl, el);
-    }
-    this.moveableOptions = this.getOptions({
-      target: this.dragEl
-    });
-  }
-  setElementGuidelines(nodes) {
-    this.elementGuidelines.forEach((node) => {
-      node.remove();
-    });
-    this.elementGuidelines = [];
-    if (this.mode === Mode.ABSOLUTE) {
-      this.container.append(this.createGuidelineElements(nodes));
-    }
-  }
-  createGuidelineElements(nodes) {
-    const frame = globalThis.document.createDocumentFragment();
-    for (const node of nodes) {
-      const { width, height } = node.getBoundingClientRect();
-      if (node === this.target)
-        continue;
-      const { left, top } = getOffset(node);
-      const elementGuideline = globalThis.document.createElement("div");
-      elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
-      this.elementGuidelines.push(elementGuideline);
-      frame.append(elementGuideline);
-    }
-    return frame;
-  }
-  initMoveable() {
-    this.moveable?.destroy();
-    this.moveable = new Moveable(this.container, {
-      ...this.moveableOptions
-    });
-    this.bindResizeEvent();
-    this.bindDragEvent();
-    this.bindRotateEvent();
-    this.bindScaleEvent();
-  }
-  bindResizeEvent() {
-    if (!this.moveable)
-      throw new Error("moveable \u672A\u521D\u59CB\u5316");
-    const frame = {
-      left: 0,
-      top: 0
-    };
-    this.moveable.on("resizeStart", (e) => {
-      if (!this.target)
-        return;
-      this.dragStatus = StageDragStatus.START;
-      this.moveableHelper?.onResizeStart(e);
-      frame.top = this.target.offsetTop;
-      frame.left = this.target.offsetLeft;
-    }).on("resize", (e) => {
-      const { width, height, drag } = e;
-      if (!this.moveable || !this.target || !this.dragEl)
-        return;
-      const { beforeTranslate } = drag;
-      this.dragStatus = StageDragStatus.ING;
-      if (this.mode === Mode.SORTABLE) {
-        this.target.style.top = "0px";
-        this.dragEl.style.width = `${width}px`;
-        this.dragEl.style.height = `${height}px`;
-      } else {
-        this.moveableHelper?.onResize(e);
-        this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
-        this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
-      }
-      this.target.style.width = `${width}px`;
-      this.target.style.height = `${height}px`;
-    }).on("resizeEnd", () => {
-      this.dragStatus = StageDragStatus.END;
-      this.update(true);
-    });
-  }
-  bindDragEvent() {
-    if (!this.moveable)
-      throw new Error("moveable \u672A\u521D\u59CB\u5316");
-    const frame = {
-      left: 0,
-      top: 0
-    };
-    let timeout;
-    const { contentWindow } = this.core.renderer;
-    const doc = contentWindow?.document;
-    this.moveable.on("dragStart", (e) => {
-      if (!this.target)
-        throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
-      this.dragStatus = StageDragStatus.START;
-      this.moveableHelper?.onDragStart(e);
-      if (this.mode === Mode.SORTABLE) {
-        this.ghostEl = this.generateGhostEl(this.target);
-      }
-      frame.top = this.target.offsetTop;
-      frame.left = this.target.offsetLeft;
-    }).on("drag", (e) => {
-      if (!this.target || !this.dragEl)
-        return;
-      if (timeout) {
-        globalThis.clearTimeout(timeout);
-        timeout = void 0;
-      }
-      if (this.canContainerHighlight()) {
-        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
-      }
-      this.dragStatus = StageDragStatus.ING;
-      if (this.ghostEl) {
-        this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
-        return;
-      }
-      this.moveableHelper?.onDrag(e);
-      this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
-      this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
-    }).on("dragEnd", () => {
-      if (timeout) {
-        globalThis.clearTimeout(timeout);
-        timeout = void 0;
-      }
-      let parentEl = null;
-      if (doc && this.canContainerHighlight()) {
-        parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
-      }
-      if (this.dragStatus === StageDragStatus.ING) {
-        if (parentEl) {
-          this.update(false, parentEl);
-        } else {
-          switch (this.mode) {
-            case Mode.SORTABLE:
-              this.sort();
-              break;
-            default:
-              this.update();
-          }
-        }
-      }
-      this.dragStatus = StageDragStatus.END;
-      this.destroyGhostEl();
-    });
-  }
-  bindRotateEvent() {
-    if (!this.moveable)
-      throw new Error("moveable \u672A\u521D\u59CB\u5316");
-    this.moveable.on("rotateStart", (e) => {
-      this.dragStatus = StageDragStatus.START;
-      this.moveableHelper?.onRotateStart(e);
-    }).on("rotate", (e) => {
-      if (!this.target || !this.dragEl)
-        return;
-      this.dragStatus = StageDragStatus.ING;
-      this.moveableHelper?.onRotate(e);
-      const frame = this.moveableHelper?.getFrame(e.target);
-      this.target.style.transform = frame?.toCSSObject().transform || "";
-    }).on("rotateEnd", (e) => {
-      this.dragStatus = StageDragStatus.END;
-      const frame = this.moveableHelper?.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.moveableHelper?.onScaleStart(e);
-    }).on("scale", (e) => {
-      if (!this.target || !this.dragEl)
-        return;
-      this.dragStatus = StageDragStatus.ING;
-      this.moveableHelper?.onScale(e);
-      const frame = this.moveableHelper?.getFrame(e.target);
-      this.target.style.transform = frame?.toCSSObject().transform || "";
-    }).on("scaleEnd", (e) => {
-      this.dragStatus = StageDragStatus.END;
-      const frame = this.moveableHelper?.getFrame(e.target);
-      this.emit("update", {
-        data: [
-          {
-            el: this.target,
-            style: {
-              transform: frame?.get("transform")
-            }
-          }
-        ]
-      });
-    });
-  }
-  sort() {
-    if (!this.target || !this.ghostEl)
-      throw new Error("\u672A\u77E5\u9519\u8BEF");
-    const { top } = this.ghostEl.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 { contentWindow } = this.core.renderer;
-    const doc = contentWindow?.document;
-    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);
-    if (parentEl && this.mode === Mode.ABSOLUTE && this.dragEl) {
-      const [translateX, translateY] = this.moveableHelper?.getFrame(this.dragEl).properties.transform.translate.value;
-      const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-      left = calcValueByFontsize(doc, this.dragEl.offsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
-      top = calcValueByFontsize(doc, this.dragEl.offsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
-    }
-    this.emit("update", {
-      data: [
-        {
-          el: this.target,
-          style: isResize ? { left, top, width, height } : { left, top }
-        }
-      ],
-      parentEl
-    });
-  }
-  generateGhostEl(el) {
-    if (this.ghostEl) {
-      this.destroyGhostEl();
-    }
-    const ghostEl = el.cloneNode(true);
-    this.setGhostElChildrenId(ghostEl);
-    const { top, left } = getAbsolutePosition(el, getOffset(el));
-    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = ".5";
-    ghostEl.style.position = "absolute";
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    el.after(ghostEl);
-    return ghostEl;
-  }
-  setGhostElChildrenId(el) {
-    for (const child of Array.from(el.children)) {
-      if (child.id) {
-        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
-      }
-      if (child.children.length) {
-        this.setGhostElChildrenId(child);
-      }
-    }
-  }
-  destroyGhostEl() {
-    this.ghostEl?.remove();
-    this.ghostEl = void 0;
-  }
-  getOptions(options = {}) {
-    if (!this.target)
-      return {};
-    const isAbsolute = this.mode === Mode.ABSOLUTE;
-    const isFixed = this.mode === Mode.FIXED;
-    const isSortable = this.mode === Mode.SORTABLE;
-    let { moveableOptions = {} } = this.core.config;
-    if (typeof moveableOptions === "function") {
-      moveableOptions = moveableOptions(this.core);
-    }
-    const elementGuidelines = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
-    this.setElementGuidelines(elementGuidelines);
-    if (moveableOptions.elementGuidelines) {
-      delete moveableOptions.elementGuidelines;
-    }
-    return {
-      origin: false,
-      rootContainer: this.core.container,
-      zoom: 1,
-      dragArea: false,
-      draggable: true,
-      resizable: true,
-      scalable: false,
-      rotatable: false,
-      snappable: isAbsolute || isFixed,
-      snapGap: isAbsolute || isFixed,
-      snapThreshold: 5,
-      snapDigit: 0,
-      throttleDrag: 0,
-      isDisplaySnapDigit: isAbsolute,
-      snapDirections: {
-        top: isAbsolute,
-        right: isAbsolute,
-        bottom: isAbsolute,
-        left: isAbsolute,
-        center: isAbsolute,
-        middle: isAbsolute
-      },
-      elementSnapDirections: {
-        top: isAbsolute,
-        right: isAbsolute,
-        bottom: isAbsolute,
-        left: isAbsolute
-      },
-      isDisplayInnerSnapDigit: true,
-      horizontalGuidelines: this.horizontalGuidelines,
-      verticalGuidelines: this.verticalGuidelines,
-      elementGuidelines: this.elementGuidelines,
-      bounds: {
-        top: 0,
-        left: -1,
-        right: this.container.clientWidth - 1,
-        bottom: isSortable ? void 0 : this.container.clientHeight,
-        ...moveableOptions.bounds || {}
-      },
-      ...options,
-      ...moveableOptions
-    };
-  }
-  canContainerHighlight() {
-    return this.core.containerHighlightType === ContainerHighlightType.DEFAULT || this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight;
-  }
-}
-
-class TargetCalibrate extends EventEmitter {
-  parent;
-  mask;
-  dr;
-  core;
-  operationEl;
-  constructor(config) {
-    super();
-    this.parent = config.parent;
-    this.mask = config.mask;
-    this.dr = config.dr;
-    this.core = config.core;
-    this.operationEl = globalThis.document.createElement("div");
-    this.parent.append(this.operationEl);
-  }
-  update(el, prefix) {
-    const { left, top } = this.getOffset(el);
-    const { transform } = getComputedStyle(el);
-    this.operationEl.style.cssText = `
-      position: absolute;
-      transform: ${transform};
-      left: ${left}px;
-      top: ${top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.HIGHLIGHT_EL};
-    `;
-    this.operationEl.id = `${prefix}${el.id}`;
-    if (typeof this.core.config.updateDragEl === "function") {
-      this.core.config.updateDragEl(this.operationEl, el);
-    }
-    return this.operationEl;
-  }
-  destroy() {
-    this.operationEl?.remove();
-  }
-  getOffset(el) {
-    const { offsetParent } = el;
-    const left = el.offsetLeft;
-    const top = el.offsetTop;
-    if (offsetParent) {
-      const parentOffset = this.getOffset(offsetParent);
-      return {
-        left: left + parentOffset.left,
-        top: top + parentOffset.top
-      };
-    }
-    if (this.dr.mode === Mode.FIXED) {
-      if (getMode(el) === Mode.FIXED) {
-        return {
-          left,
-          top
-        };
-      }
-      return {
-        left: left - this.mask.scrollLeft,
-        top: top - this.mask.scrollTop
-      };
-    }
-    if (getMode(el) === Mode.FIXED) {
-      return {
-        left: left + this.mask.scrollLeft,
-        top: top + this.mask.scrollTop
-      };
-    }
-    return {
-      left,
-      top
-    };
-  }
-}
-
-class StageHighlight extends EventEmitter {
-  core;
-  container;
-  target;
-  moveable;
-  calibrationTarget;
-  constructor(config) {
-    super();
-    this.core = config.core;
-    this.container = config.container;
-    this.calibrationTarget = new TargetCalibrate({
-      parent: this.core.mask.content,
-      mask: this.core.mask,
-      dr: this.core.dr,
-      core: this.core
-    });
-  }
-  highlight(el) {
-    if (!el || el === this.target)
-      return;
-    this.target = el;
-    this.moveable?.destroy();
-    this.moveable = new Moveable(this.container, {
-      target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
-      origin: false,
-      rootContainer: this.core.container,
-      zoom: 2
-    });
-  }
-  clearHighlight() {
-    if (!this.moveable)
-      return;
-    this.target = void 0;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
-  }
-  destroy() {
-    this.moveable?.destroy();
-    this.calibrationTarget.destroy();
-  }
-}
-
-class Rule extends EventEmitter$1 {
-  hGuides;
-  vGuides;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
-  container;
-  containerResizeObserver;
-  constructor(container) {
-    super();
-    this.container = container;
-    this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
-    this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
-    this.hGuides.on("changeGuides", this.hGuidesChangeGuidesHandler);
-    this.vGuides.on("changeGuides", this.vGuidesChangeGuidesHandler);
-    this.containerResizeObserver = new ResizeObserver(() => {
-      this.vGuides.resize();
-      this.hGuides.resize();
-    });
-    this.containerResizeObserver.observe(this.container);
-  }
-  showGuides(show = true) {
-    this.hGuides.setState({
-      showGuides: show
-    });
-    this.vGuides.setState({
-      showGuides: show
-    });
-  }
-  setGuides([hLines, vLines]) {
-    this.horizontalGuidelines = hLines;
-    this.verticalGuidelines = vLines;
-    this.hGuides.setState({
-      defaultGuides: hLines
-    });
-    this.vGuides.setState({
-      defaultGuides: vLines
-    });
-    this.emit("changeGuides", {
-      type: GuidesType.HORIZONTAL,
-      guides: hLines
-    });
-    this.emit("changeGuides", {
-      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)
-  });
-  hGuidesChangeGuidesHandler = (e) => {
-    this.horizontalGuidelines = e.guides;
-    this.emit("changeGuides", {
-      type: GuidesType.HORIZONTAL,
-      guides: this.horizontalGuidelines
-    });
-  };
-  vGuidesChangeGuidesHandler = (e) => {
-    this.verticalGuidelines = e.guides;
-    this.emit("changeGuides", {
-      type: GuidesType.VERTICAL,
-      guides: this.verticalGuidelines
-    });
-  };
-}
-
-const wrapperClassName = "editor-mask-wrapper";
-const throttleTime = 100;
-const hideScrollbar = () => {
-  injectStyle(globalThis.document, `.${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;
-  core;
-  page = null;
-  pageScrollParent = null;
-  scrollTop = 0;
-  scrollLeft = 0;
-  width = 0;
-  height = 0;
-  wrapperHeight = 0;
-  wrapperWidth = 0;
-  maxScrollTop = 0;
-  maxScrollLeft = 0;
-  intersectionObserver = null;
-  isMultiSelectStatus = false;
-  mode = Mode.ABSOLUTE;
-  pageResizeObserver = null;
-  wrapperResizeObserver = null;
-  highlightHandler = throttle((event) => {
-    this.emit("highlight", event);
-  }, throttleTime);
-  constructor(config) {
-    const wrapper = createWrapper();
-    super(wrapper);
-    this.wrapper = wrapper;
-    this.core = config.core;
-    this.content.addEventListener("mousedown", this.mouseDownHandler);
-    this.wrapper.appendChild(this.content);
-    this.content.addEventListener("wheel", this.mouseWheelHandler);
-    this.content.addEventListener("mousemove", this.highlightHandler);
-    this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
-    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-    const ctrl = isMac ? "meta" : "ctrl";
-    KeyController.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;
-    });
-  }
-  setMode(mode) {
-    this.mode = mode;
-    this.scroll();
-    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.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
-    this.pageResizeObserver?.disconnect();
-    this.wrapperResizeObserver?.disconnect();
-    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
-        }
-      );
-    }
-    if (typeof ResizeObserver !== "undefined") {
-      this.pageResizeObserver = new ResizeObserver((entries) => {
-        const [entry] = entries;
-        const { clientHeight, clientWidth } = entry.target;
-        this.setHeight(clientHeight);
-        this.setWidth(clientWidth);
-        this.scroll();
-        if (this.core.dr.moveable) {
-          this.core.dr.updateMoveable();
-        }
-      });
-      this.pageResizeObserver.observe(page);
-      this.wrapperResizeObserver = new ResizeObserver((entries) => {
-        const [entry] = entries;
-        const { clientHeight, clientWidth } = entry.target;
-        this.wrapperHeight = clientHeight;
-        this.wrapperWidth = clientWidth;
-        this.setMaxScrollLeft();
-        this.setMaxScrollTop();
-      });
-      this.wrapperResizeObserver.observe(this.wrapper);
-    }
-  }
-  mount(el) {
-    if (!this.content)
-      throw new Error("content \u4E0D\u5B58\u5728");
-    el.appendChild(this.wrapper);
-  }
-  setLayout(el) {
-    this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
-  }
-  scrollIntoView(el) {
-    el.scrollIntoView();
-    if (!this.pageScrollParent)
-      return;
-    this.scrollLeft = this.pageScrollParent.scrollLeft;
-    this.scrollTop = this.pageScrollParent.scrollTop;
-    this.scroll();
-  }
-  destroy() {
-    this.content?.remove();
-    this.page = null;
-    this.pageScrollParent = null;
-    this.pageResizeObserver?.disconnect();
-    this.wrapperResizeObserver?.disconnect();
-    this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
-    super.destroy();
-  }
-  scroll() {
-    this.fixScrollValue();
-    let { scrollLeft, scrollTop } = this;
-    if (this.pageScrollParent) {
-      this.pageScrollParent.scrollTo({
-        top: scrollTop,
-        left: scrollLeft
-      });
-    }
-    if (this.mode === Mode.FIXED) {
-      scrollLeft = 0;
-      scrollTop = 0;
-    }
-    this.scrollRule(scrollTop);
-    this.scrollTo(scrollLeft, scrollTop);
-  }
-  scrollTo(scrollLeft, scrollTop) {
-    this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
-  }
-  setHeight(height) {
-    this.height = height;
-    this.setMaxScrollTop();
-    this.content.style.height = `${height}px`;
-  }
-  setWidth(width) {
-    this.width = width;
-    this.setMaxScrollLeft();
-    this.content.style.width = `${width}px`;
-  }
-  setMaxScrollLeft() {
-    this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
-  }
-  setMaxScrollTop() {
-    this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
-  }
-  fixScrollValue() {
-    if (this.scrollTop < 0)
-      this.scrollTop = 0;
-    if (this.scrollLeft < 0)
-      this.scrollLeft = 0;
-    if (this.maxScrollTop < this.scrollTop)
-      this.scrollTop = this.maxScrollTop;
-    if (this.maxScrollLeft < this.scrollLeft)
-      this.scrollLeft = this.maxScrollLeft;
-  }
-  mouseDownHandler = (event) => {
-    this.emit("clearHighlight");
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
-      return;
-    if (!this.isMultiSelectStatus && event.target.className.indexOf("moveable-area") !== -1) {
-      return;
-    }
-    if (event.target.className.indexOf("moveable-control") !== -1) {
-      return;
-    }
-    this.content.removeEventListener("mousemove", this.highlightHandler);
-    if (this.isMultiSelectStatus) {
-      this.emit("beforeMultiSelect", event);
-    } else {
-      this.emit("beforeSelect", event);
-    }
-    globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-  };
-  mouseUpHandler = () => {
-    globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-    this.content.addEventListener("mousemove", this.highlightHandler);
-    if (!this.isMultiSelectStatus) {
-      this.emit("select");
-    }
-  };
-  mouseWheelHandler = (event) => {
-    this.emit("clearHighlight");
-    if (!this.page)
-      throw new Error("page \u672A\u521D\u59CB\u5316");
-    const { deltaY, deltaX } = event;
-    if (this.page.clientHeight < this.wrapperHeight && deltaY)
-      return;
-    if (this.page.clientWidth < this.wrapperWidth && deltaX)
-      return;
-    if (this.maxScrollTop > 0) {
-      this.scrollTop = this.scrollTop + deltaY;
-    }
-    if (this.maxScrollLeft > 0) {
-      this.scrollLeft = this.scrollLeft + deltaX;
-    }
-    this.scroll();
-    this.emit("scroll", event);
-  };
-  mouseLeaveHandler = () => {
-    setTimeout(() => this.emit("clearHighlight"), throttleTime);
-  };
-}
-
-class StageMultiDragResize extends EventEmitter {
-  core;
-  mask;
-  container;
-  targetList = [];
-  dragElList = [];
-  moveableForMulti;
-  dragStatus = StageDragStatus.END;
-  multiMoveableHelper;
-  constructor(config) {
-    super();
-    this.core = config.core;
-    this.container = config.container;
-    this.mask = config.mask;
-  }
-  multiSelect(els) {
-    this.targetList = els;
-    this.core.dr.destroyDragEl();
-    this.destroyDragElList();
-    this.dragElList = els.map((elItem) => {
-      const dragElDiv = globalThis.document.createElement("div");
-      this.container.append(dragElDiv);
-      dragElDiv.style.cssText = getTargetElStyle(elItem);
-      dragElDiv.id = `${DRAG_EL_ID_PREFIX}${elItem.id}`;
-      if (typeof this.core.config.updateDragEl === "function") {
-        this.core.config.updateDragEl(dragElDiv, elItem);
-      }
-      return dragElDiv;
-    });
-    this.moveableForMulti?.destroy();
-    this.multiMoveableHelper?.clear();
-    this.moveableForMulti = new Moveable(
-      this.container,
-      this.getOptions({
-        target: this.dragElList
-      })
-    );
-    this.multiMoveableHelper = MoveableHelper.create({
-      useBeforeRender: true,
-      useRender: false,
-      createAuto: true
-    });
-    const frames = [];
-    const setFrames = (events) => {
-      events.forEach((ev) => {
-        const matchEventTarget = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
-        );
-        if (!matchEventTarget)
-          return;
-        frames.push({
-          left: matchEventTarget.offsetLeft,
-          top: matchEventTarget.offsetTop,
-          id: matchEventTarget.id
-        });
-      });
-    };
-    this.moveableForMulti.on("resizeGroupStart", (params) => {
-      const { events } = params;
-      this.multiMoveableHelper?.onResizeGroupStart(params);
-      setFrames(events);
-      this.dragStatus = StageDragStatus.START;
-    }).on("resizeGroup", (params) => {
-      const { events } = params;
-      events.forEach((ev) => {
-        const { width, height, beforeTranslate } = ev.drag;
-        const frameSnapShot = frames.find(
-          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
-        );
-        if (!frameSnapShot)
-          return;
-        const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
-        );
-        if (!targeEl)
-          return;
-        const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
-        if (!isParentIncluded) {
-          targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0]}px`;
-          targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
-        }
-        targeEl.style.width = `${width}px`;
-        targeEl.style.height = `${height}px`;
-      });
-      this.multiMoveableHelper?.onResizeGroup(params);
-      this.dragStatus = StageDragStatus.ING;
-    }).on("resizeGroupEnd", () => {
-      this.update(true);
-      this.dragStatus = StageDragStatus.END;
-    }).on("dragGroupStart", (params) => {
-      const { events } = params;
-      this.multiMoveableHelper?.onDragGroupStart(params);
-      setFrames(events);
-      this.dragStatus = StageDragStatus.START;
-    }).on("dragGroup", (params) => {
-      const { events } = params;
-      events.forEach((ev) => {
-        const frameSnapShot = frames.find(
-          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
-        );
-        if (!frameSnapShot)
-          return;
-        const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
-        );
-        if (!targeEl)
-          return;
-        const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
-        if (!isParentIncluded) {
-          targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0]}px`;
-          targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1]}px`;
-        }
-      });
-      this.multiMoveableHelper?.onDragGroup(params);
-      this.dragStatus = StageDragStatus.ING;
-    }).on("dragGroupEnd", () => {
-      this.update();
-      this.dragStatus = StageDragStatus.END;
-    }).on("clickGroup", (params) => {
-      const { inputTarget, targets } = params;
-      if (!this.mask.isMultiSelectStatus && targets.length > 1 && targets.includes(inputTarget)) {
-        this.emit("select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""));
-      }
-    });
-  }
-  canSelect(el, stop) {
-    if (el.className.includes(PAGE_CLASS)) {
-      this.core.highlightedDom = void 0;
-      this.core.highlightLayer.clearHighlight();
-      stop();
-      return false;
-    }
-    const currentTargetMode = getMode(el);
-    let selectedDomMode = "";
-    if (this.core.selectedDom?.className.includes(PAGE_CLASS)) {
-      return true;
-    }
-    if (this.targetList.length === 0 && this.core.selectedDom) {
-      selectedDomMode = getMode(this.core.selectedDom);
-    } else if (this.targetList.length > 0) {
-      selectedDomMode = getMode(this.targetList[0]);
-    }
-    if (currentTargetMode !== selectedDomMode) {
-      return false;
-    }
-    return true;
-  }
-  clearSelectStatus() {
-    if (!this.moveableForMulti)
-      return;
-    this.destroyDragElList();
-    this.moveableForMulti.target = null;
-    this.moveableForMulti.updateTarget();
-    this.targetList = [];
-  }
-  destroy() {
-    this.moveableForMulti?.destroy();
-    this.destroyDragElList();
-  }
-  destroyDragElList() {
-    this.dragElList.forEach((dragElItem) => dragElItem?.remove());
-  }
-  update(isResize = false) {
-    if (this.targetList.length === 0)
-      return;
-    const { contentWindow } = this.core.renderer;
-    const doc = contentWindow?.document;
-    if (!doc)
-      return;
-    this.emit("update", {
-      data: this.targetList.map((targetItem) => {
-        const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
-        const left = calcValueByFontsize(doc, offset.left);
-        const top = calcValueByFontsize(doc, offset.top);
-        const width = calcValueByFontsize(doc, targetItem.clientWidth);
-        const height = calcValueByFontsize(doc, targetItem.clientHeight);
-        return {
-          el: targetItem,
-          style: isResize ? { left, top, width, height } : { left, top }
-        };
-      }),
-      parentEl: null
-    });
-  }
-  getOptions(options = {}) {
-    let { multiMoveableOptions = {} } = this.core.config;
-    if (typeof multiMoveableOptions === "function") {
-      multiMoveableOptions = multiMoveableOptions(this.core);
-    }
-    return {
-      defaultGroupRotate: 0,
-      defaultGroupOrigin: "50% 50%",
-      draggable: true,
-      resizable: true,
-      throttleDrag: 0,
-      startDragRotate: 0,
-      throttleDragRotate: 0,
-      zoom: 1,
-      origin: true,
-      padding: { left: 0, top: 0, right: 0, bottom: 0 },
-      snappable: true,
-      bounds: {
-        top: 0,
-        left: -1,
-        right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
-        ...multiMoveableOptions.bounds || {}
-      },
-      ...options,
-      ...multiMoveableOptions
-    };
-  }
-}
-
-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 {
-  contentWindow = null;
-  runtime = null;
-  iframe;
-  runtimeUrl;
-  core;
-  render;
-  constructor({ core }) {
-    super();
-    this.core = core;
-    this.runtimeUrl = core.config.runtimeUrl || "";
-    this.render = core.config.render;
-    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 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);
-    });
-  };
-  destroy() {
-    this.iframe?.removeEventListener("load", this.loadHandler);
-    this.contentWindow = null;
-    this.iframe?.remove();
-    this.iframe = void 0;
-    this.removeAllListeners();
-  }
-  loadHandler = async () => {
-    if (!this.contentWindow?.magic) {
-      this.postTmagicRuntimeReady();
-    }
-    if (!this.contentWindow)
-      return;
-    if (this.render) {
-      const el = await this.render(this.core);
-      if (el) {
-        this.contentWindow.document?.body?.appendChild(el);
-      }
-    }
-    this.emit("onload");
-    injectStyle(this.contentWindow.document, style);
-  };
-  postTmagicRuntimeReady() {
-    this.contentWindow = this.iframe?.contentWindow;
-    this.contentWindow.magic = this.getMagicApi();
-    this.contentWindow.postMessage(
-      {
-        tmagicRuntimeReady: true
-      },
-      "*"
-    );
-  }
-}
-
-class StageCore extends EventEmitter {
-  container;
-  selectedDom;
-  selectedDomList = [];
-  highlightedDom;
-  renderer;
-  mask;
-  dr;
-  multiDr;
-  highlightLayer;
-  config;
-  zoom = DEFAULT_ZOOM;
-  containerHighlightClassName;
-  containerHighlightDuration;
-  containerHighlightType;
-  isContainer;
-  canSelect;
-  constructor(config) {
-    super();
-    this.config = config;
-    this.setZoom(config.zoom);
-    this.canSelect = config.canSelect || ((el) => !!el.id);
-    this.isContainer = config.isContainer;
-    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
-    this.containerHighlightDuration = config.containerHighlightDuration || 800;
-    this.containerHighlightType = config.containerHighlightType;
-    this.renderer = new StageRender({ core: this });
-    this.mask = new StageMask({ core: this });
-    this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
-    this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
-    this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
-    this.renderer.on("runtime-ready", (runtime) => {
-      this.emit("runtime-ready", runtime);
-    });
-    this.renderer.on("page-el-update", (el) => {
-      this.mask?.observe(el);
-    });
-    this.mask.on("beforeSelect", async (event) => {
-      this.clearSelectStatus("multiSelect");
-      const el = await this.getElementFromPoint(event);
-      if (!el)
-        return;
-      this.select(el, event);
-    }).on("select", () => {
-      this.emit("select", this.selectedDom);
-    }).on("changeGuides", (data) => {
-      this.dr.setGuidelines(data.type, data.guides);
-      this.emit("changeGuides", data);
-    }).on("highlight", async (event) => {
-      const el = await this.getElementFromPoint(event);
-      if (!el)
-        return;
-      if (this.multiDr.dragStatus === StageDragStatus.ING)
-        return;
-      await this.highlight(el);
-      if (this.highlightedDom === this.selectedDom) {
-        this.highlightLayer.clearHighlight();
-        return;
-      }
-      this.emit("highlight", this.highlightedDom);
-    }).on("clearHighlight", async () => {
-      this.highlightLayer.clearHighlight();
-    }).on("beforeMultiSelect", async (event) => {
-      const el = await this.getElementFromPoint(event);
-      if (!el)
-        return;
-      if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
-        this.selectedDomList.push(this.selectedDom);
-        this.selectedDom = void 0;
-      }
-      const existIndex = this.selectedDomList.findIndex((selectedDom) => selectedDom.id === el.id);
-      if (existIndex !== -1) {
-        this.selectedDomList.splice(existIndex, 1);
-      } else {
-        this.selectedDomList.push(el);
-      }
-      this.multiSelect(this.selectedDomList);
-    });
-    this.dr.on("update", (data) => {
-      setTimeout(() => this.emit("update", data));
-    }).on("sort", (data) => {
-      setTimeout(() => this.emit("sort", data));
-    });
-    this.multiDr.on("update", (data) => {
-      setTimeout(() => this.emit("update", data));
-    }).on("select", async (id) => {
-      const el = await this.getTargetElement(id);
-      this.select(el);
-      setTimeout(() => this.emit("select", el));
-    });
-  }
-  getElementsFromPoint(event) {
-    const { renderer, zoom } = this;
-    const doc = renderer.contentWindow?.document;
-    let x = event.clientX;
-    let y = event.clientY;
-    if (renderer.iframe) {
-      const rect = renderer.iframe.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
-    }
-    return doc?.elementsFromPoint(x / zoom, y / zoom);
-  }
-  async getElementFromPoint(event) {
-    const els = this.getElementsFromPoint(event);
-    let stopped = false;
-    const stop = () => stopped = true;
-    for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
-        if (stopped)
-          break;
-        return el;
-      }
-    }
-  }
-  async isElCanSelect(el, event, stop) {
-    const canSelectByProp = await this.canSelect(el, event, stop);
-    if (!canSelectByProp)
-      return false;
-    if (this.mask.isMultiSelectStatus) {
-      return this.multiDr.canSelect(el, stop);
-    }
-    return true;
-  }
-  async select(idOrEl, event) {
-    this.clearSelectStatus("multiSelect");
-    const el = await this.getTargetElement(idOrEl);
-    if (el === this.selectedDom)
-      return;
-    const runtime = await this.renderer.getRuntime();
-    await runtime?.select?.(el.id);
-    if (runtime?.beforeSelect) {
-      await runtime.beforeSelect(el);
-    }
-    this.mask.setLayout(el);
-    this.dr.select(el, event);
-    if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
-      this.mask.intersectionObserver?.observe(el);
-    }
-    this.selectedDom = el;
-    if (this.renderer.contentWindow) {
-      removeSelectedClassName(this.renderer.contentWindow.document);
-      if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
-      }
-    }
-  }
-  async multiSelect(idOrElList) {
-    this.clearSelectStatus("select");
-    const elList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
-    this.multiDr.multiSelect(elList);
-    this.emit("multiSelect", elList);
-  }
-  update(data) {
-    const { config } = data;
-    return this.renderer?.getRuntime().then((runtime) => {
-      runtime?.update?.(data);
-      setTimeout(() => {
-        const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
-        if (el && el.id === this.selectedDom?.id) {
-          this.selectedDom = el;
-          this.mask.setLayout(el);
-          this.dr.updateMoveable(el);
-        }
-      }, 0);
-    });
-  }
-  async highlight(idOrEl) {
-    let el;
-    try {
-      el = await this.getTargetElement(idOrEl);
-    } catch (error) {
-      this.highlightLayer.clearHighlight();
-      return;
-    }
-    if (el === this.highlightedDom || !el)
-      return;
-    this.highlightLayer.highlight(el);
-    this.highlightedDom = el;
-  }
-  sortNode(data) {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
-  }
-  add(data) {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
-  }
-  remove(data) {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
-  }
-  setZoom(zoom = DEFAULT_ZOOM) {
-    this.zoom = zoom;
-  }
-  clearSelectStatus(selectType) {
-    if (selectType === "multiSelect") {
-      this.multiDr.clearSelectStatus();
-      this.selectedDomList = [];
-    } else {
-      this.dr.clearSelectStatus();
-    }
-  }
-  async mount(el) {
-    this.container = el;
-    const { mask, renderer } = this;
-    await renderer.mount(el);
-    mask.mount(el);
-    this.emit("mounted");
-  }
-  clearGuides() {
-    this.mask.clearGuides();
-    this.dr.clearGuides();
-  }
-  async addContainerHighlightClassName(event, exclude) {
-    const els = this.getElementsFromPoint(event);
-    const { renderer } = this;
-    const doc = renderer.contentWindow?.document;
-    if (!doc)
-      return;
-    for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !exclude.includes(el)) {
-        addClassName(el, doc, this.containerHighlightClassName);
-        break;
-      }
-    }
-  }
-  getAddContainerHighlightClassNameTimeout(event, exclude = []) {
-    return globalThis.setTimeout(() => {
-      this.addContainerHighlightClassName(event, exclude);
-    }, this.containerHighlightDuration);
-  }
-  destroy() {
-    const { mask, renderer, dr, highlightLayer } = this;
-    renderer.destroy();
-    mask.destroy();
-    dr.destroy();
-    highlightLayer.destroy();
-    this.removeAllListeners();
-    this.container = void 0;
-  }
-  async getTargetElement(idOrEl) {
-    if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-      const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
-      if (!el)
-        throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
-      return el;
-    }
-    return idOrEl;
-  }
-}
-
-export { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName, up };
-//# sourceMappingURL=tmagic-stage.mjs.map