@tmagic/editor 1.3.11 → 1.3.13

package/dist/tmagic-editor.js

@@ -13,7 +13,7 @@ import Gesto from 'gesto';
 import Moveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, RenderType } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
@@ -1850,6 +1850,197 @@ class Dep extends BaseService {
 }
 const depService = new Dep();
 
+class Props extends BaseService {
+  state = reactive({
+    propsConfigMap: {},
+    propsValueMap: {},
+    relateIdMap: {}
+  });
+  constructor() {
+    super([
+      { name: "setPropsConfig", isAsync: true },
+      { name: "getPropsConfig", isAsync: true },
+      { name: "setPropsValue", isAsync: true },
+      { name: "getPropsValue", isAsync: true },
+      { name: "createId", isAsync: false },
+      { name: "setNewItemId", isAsync: true },
+      { name: "fillConfig", isAsync: true },
+      { name: "getDefaultPropsValue", isAsync: true }
+    ]);
+  }
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit("props-configs-change");
+  }
+  async fillConfig(config) {
+    return fillConfig(config);
+  }
+  /**
+   * 为指定类型组件设置组件属性表单配置
+   * @param type 组件类型
+   * @param config 组件属性表单配置
+   */
+  async setPropsConfig(type, config) {
+    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+  }
+  /**
+   * 获取指点类型的组件属性表单配置
+   * @param type 组件类型
+   * @returns 组件属性表单配置
+   */
+  async getPropsConfig(type) {
+    if (type === "area") {
+      return await this.getPropsConfig("button");
+    }
+    return cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+  }
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  async setPropsValue(type, value) {
+    this.state.propsValueMap[type] = value;
+  }
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
+    if (type === "area") {
+      const value = await this.getPropsValue("button");
+      value.className = "action-area";
+      value.text = "";
+      if (value.style) {
+        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+      }
+      return value;
+    }
+    const [id, defaultPropsValue, data] = await Promise.all([
+      this.createId(type),
+      this.getDefaultPropsValue(type),
+      this.setNewItemId(
+        cloneDeep({
+          type,
+          ...defaultValue
+        })
+      )
+    ]);
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+    };
+  }
+  async createId(type) {
+    return `${type}_${guid()}`;
+  }
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
+   * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  async setNewItemId(config, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = await this.createId(config.type || "component");
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        await this.setNewItemId(item);
+      }
+    }
+    return config;
+  }
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  async getDefaultPropsValue(type) {
+    return ["page", "container"].includes(type) ? {
+      type,
+      layout: "absolute",
+      style: {},
+      name: type,
+      items: []
+    } : {
+      type,
+      style: {},
+      name: type
+    };
+  }
+  resetState() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
+  }
+  /**
+   * 替换关联ID
+   * @param originConfigs 原组件配置
+   * @param targetConfigs 待替换的组件配置
+   */
+  replaceRelateId(originConfigs, targetConfigs) {
+    const relateIdMap = this.getRelateIdMap();
+    if (Object.keys(relateIdMap).length === 0)
+      return;
+    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
+    if (!target)
+      return;
+    originConfigs.forEach((config) => {
+      const newId = relateIdMap[config.id];
+      const targetConfig = targetConfigs.find((targetConfig2) => targetConfig2.id === newId);
+      if (!targetConfig)
+        return;
+      target.deps[config.id]?.keys?.forEach((fullKey) => {
+        const relateOriginId = getValueByKeyPath(fullKey, config);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId)
+          return;
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
+      });
+    });
+  }
+  /**
+   * 清除setNewItemId前后映射关系
+   */
+  clearRelateId() {
+    this.state.relateIdMap = {};
+  }
+  destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  /**
+   * 获取setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @returns 新旧ID映射
+   */
+  getRelateIdMap() {
+    return this.state.relateIdMap;
+  }
+  /**
+   * 记录setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @param newId 分配的新ID
+   */
+  setRelateId(oldId, newId) {
+    this.state.relateIdMap[oldId] = newId;
+  }
+}
+const propsService = new Props();
+
 class UndoRedo {
   elementList;
   listCursor;
@@ -2104,197 +2295,6 @@ class WebStorage extends BaseService {
 }
 const storageService = new WebStorage();
 
-class Props extends BaseService {
-  state = reactive({
-    propsConfigMap: {},
-    propsValueMap: {},
-    relateIdMap: {}
-  });
-  constructor() {
-    super([
-      { name: "setPropsConfig", isAsync: true },
-      { name: "getPropsConfig", isAsync: true },
-      { name: "setPropsValue", isAsync: true },
-      { name: "getPropsValue", isAsync: true },
-      { name: "createId", isAsync: false },
-      { name: "setNewItemId", isAsync: true },
-      { name: "fillConfig", isAsync: true },
-      { name: "getDefaultPropsValue", isAsync: true }
-    ]);
-  }
-  setPropsConfigs(configs) {
-    Object.keys(configs).forEach((type) => {
-      this.setPropsConfig(toLine(type), configs[type]);
-    });
-    this.emit("props-configs-change");
-  }
-  async fillConfig(config) {
-    return fillConfig(config);
-  }
-  /**
-   * 为指定类型组件设置组件属性表单配置
-   * @param type 组件类型
-   * @param config 组件属性表单配置
-   */
-  async setPropsConfig(type, config) {
-    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
-  }
-  /**
-   * 获取指点类型的组件属性表单配置
-   * @param type 组件类型
-   * @returns 组件属性表单配置
-   */
-  async getPropsConfig(type) {
-    if (type === "area") {
-      return await this.getPropsConfig("button");
-    }
-    return cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
-  }
-  setPropsValues(values) {
-    Object.keys(values).forEach((type) => {
-      this.setPropsValue(toLine(type), values[type]);
-    });
-  }
-  /**
-   * 为指点类型组件设置组件初始值
-   * @param type 组件类型
-   * @param value 组件初始值
-   */
-  async setPropsValue(type, value) {
-    this.state.propsValueMap[type] = value;
-  }
-  /**
-   * 获取指定类型的组件初始值
-   * @param type 组件类型
-   * @returns 组件初始值
-   */
-  async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
-    if (type === "area") {
-      const value = await this.getPropsValue("button");
-      value.className = "action-area";
-      value.text = "";
-      if (value.style) {
-        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
-      }
-      return value;
-    }
-    const [id, defaultPropsValue, data] = await Promise.all([
-      this.createId(type),
-      this.getDefaultPropsValue(type),
-      this.setNewItemId(
-        cloneDeep({
-          type,
-          ...defaultValue
-        })
-      )
-    ]);
-    return {
-      id,
-      ...defaultPropsValue,
-      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
-    };
-  }
-  async createId(type) {
-    return `${type}_${guid()}`;
-  }
-  /**
-   * 将组件与组件的子元素配置中的id都设置成一个新的ID
-   * 如果没有相同ID并且force为false则保持不变
-   * @param {Object} config 组件配置
-   * @param {Boolean} force 是否强制设置新的ID
-   */
-  /* eslint no-param-reassign: ["error", { "props": false }] */
-  async setNewItemId(config, force = true) {
-    if (force || editorService.getNodeById(config.id)) {
-      const newId = await this.createId(config.type || "component");
-      this.setRelateId(config.id, newId);
-      config.id = newId;
-    }
-    if (config.items && Array.isArray(config.items)) {
-      for (const item of config.items) {
-        await this.setNewItemId(item);
-      }
-    }
-    return config;
-  }
-  /**
-   * 获取默认属性配置
-   * @param type 组件类型
-   * @returns Object
-   */
-  async getDefaultPropsValue(type) {
-    return ["page", "container"].includes(type) ? {
-      type,
-      layout: "absolute",
-      style: {},
-      name: type,
-      items: []
-    } : {
-      type,
-      style: {},
-      name: type
-    };
-  }
-  resetState() {
-    this.state.propsConfigMap = {};
-    this.state.propsValueMap = {};
-  }
-  /**
-   * 替换关联ID
-   * @param originConfigs 原组件配置
-   * @param targetConfigs 待替换的组件配置
-   */
-  replaceRelateId(originConfigs, targetConfigs) {
-    const relateIdMap = this.getRelateIdMap();
-    if (Object.keys(relateIdMap).length === 0)
-      return;
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target)
-      return;
-    originConfigs.forEach((config) => {
-      const newId = relateIdMap[config.id];
-      const targetConfig = targetConfigs.find((targetConfig2) => targetConfig2.id === newId);
-      if (!targetConfig)
-        return;
-      target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = getValueByKeyPath(fullKey, config);
-        const relateTargetId = relateIdMap[relateOriginId];
-        if (!relateTargetId)
-          return;
-        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
-      });
-    });
-  }
-  /**
-   * 清除setNewItemId前后映射关系
-   */
-  clearRelateId() {
-    this.state.relateIdMap = {};
-  }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-  /**
-   * 获取setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @returns 新旧ID映射
-   */
-  getRelateIdMap() {
-    return this.state.relateIdMap;
-  }
-  /**
-   * 记录setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @param newId 分配的新ID
-   */
-  setRelateId(oldId, newId) {
-    this.state.relateIdMap[oldId] = newId;
-  }
-}
-const propsService = new Props();
-
 class Editor extends BaseService {
   state = reactive({
     root: null,
@@ -2930,14 +2930,14 @@ class Editor extends BaseService {
    * @param targetId 容器ID
    */
   async moveToContainer(config, targetId) {
-    const root = cloneDeep(this.get("root"));
+    const root = this.get("root");
     const { node, parent } = this.getNodeInfo(config.id, false);
     const target = this.getNodeById(targetId, false);
     const stage = this.get("stage");
     if (root && node && parent && stage) {
       const index = getNodeIndex(node.id, parent);
       parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, parentId: parent.id, root });
+      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
       const layout = await this.getLayout(target);
       const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
@@ -2948,7 +2948,7 @@ class Editor extends BaseService {
       target.items.push(newConfig);
       await stage.select(targetId);
       const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
       await this.select(newConfig);
       stage.select(newConfig.id);
       this.addModifiedNodeId(target.id);
@@ -2993,6 +2993,7 @@ class Editor extends BaseService {
     this.addModifiedNodeId(config.id);
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
   }
   /**
    * 撤销当前操作
@@ -5218,14 +5219,17 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const selectNode = async (id) => {
       await services?.editorService.select(id);
       services?.editorService.get("stage")?.select(id);
+      services?.stageOverlayService.get("stage")?.select(id);
     };
     const highlight = throttle((id) => {
       services?.editorService.highlight(id);
       services?.editorService.get("stage")?.highlight(id);
+      services?.stageOverlayService.get("stage")?.highlight(id);
     }, 150);
     const unhightlight = () => {
       services?.editorService.set("highlightNode", null);
       services?.editorService.get("stage")?.clearHighlight();
+      services?.stageOverlayService.get("stage")?.clearHighlight();
     };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
@@ -5365,7 +5369,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorLayout"
+    name: "MEditorSplitView"
   },
   __name: "SplitView",
   props: {
@@ -7893,6 +7897,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     } else {
       await services?.editorService.select(data);
       services?.editorService.get("stage")?.select(data.id);
+      services?.stageOverlayService.get("stage")?.select(data.id);
     }
   };
   const multiSelect = async (data) => {
@@ -7911,6 +7916,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     }
     await services?.editorService.multiSelect(newNodes);
     services?.editorService.get("stage")?.multiSelect(newNodes);
+    services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
   };
   const throttleTime = 300;
   const highlightHandler = throttle((event, data) => {
@@ -7919,6 +7925,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
   const highlight = (data) => {
     services?.editorService?.highlight(data);
     services?.editorService?.get("stage")?.highlight(data.id);
+    services?.stageOverlayService?.get("stage")?.highlight(data.id);
   };
   const nodeClickHandler = (event, data) => {
     if (!nodeStatusMap?.value)
@@ -8468,8 +8475,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         globalThis.clearTimeout(timeout);
         timeout = void 0;
       }
-      const doc = stage.value?.renderer.contentWindow?.document;
-      if (doc && stageOptions) {
+      const doc = stage.value?.renderer.getDocument();
+      if (doc && stageOptions?.containerHighlightClassName) {
         removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
       }
       clientX = 0;
@@ -9277,7 +9284,9 @@ const useStage = (stageOptions) => {
     disabledDragStart: stageOptions.disabledDragStart,
     renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {
-      const elCanSelect = stageOptions.canSelect(el);
+      if (!stageOptions.canSelect)
+        return true;
+      const elCanSelect = stageOptions.canSelect?.(el);
       if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
         document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
         return stop();
@@ -9572,152 +9581,71 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useStageOverlay = () => {
-  const services = inject("services");
-  const stageOptions = inject("stageOptions");
-  const wrapWidth = ref(0);
-  const wrapHeight = ref(0);
-  const stageOverlayVisible = ref(false);
-  const stageOverlay = ref();
-  const stage = computed(() => services?.editorService.get("stage"));
-  let subStage = null;
-  const div = document.createElement("div");
-  let selectEl = null;
-  const render = () => {
-    if (!selectEl)
-      return;
-    const content = selectEl.cloneNode(true);
-    content.style.position = "static";
-    Array.from(div.children).forEach((element) => {
-      element.remove();
-    });
-    div.appendChild(content);
-    subStage?.renderer.contentWindow?.magic.onPageElUpdate(div);
-    subStage?.select(content);
-  };
-  const copyDocumentElement = () => {
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage.value?.renderer.getDocument()?.documentElement;
-    if (doc && documentElement) {
-      doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
-    }
-  };
-  const updateOverlay = () => {
-    if (!selectEl)
-      return;
-    const { scrollWidth, scrollHeight } = selectEl;
-    stageOverlay.value.style.width = `${scrollWidth}px`;
-    stageOverlay.value.style.height = `${scrollHeight}px`;
-    wrapWidth.value = scrollWidth;
-    wrapHeight.value = scrollHeight;
-  };
-  const updateHandler = () => {
-    render();
-    updateOverlay();
-  };
-  const addHandler = () => {
-    render();
-    updateOverlay();
-  };
-  const removeHandler = () => {
-    render();
-    updateOverlay();
-  };
-  const openOverlay = async (el) => {
-    selectEl = el;
-    stageOverlayVisible.value = true;
-    if (!stageOverlay.value) {
-      await nextTick();
-    }
-    if (!stageOptions) {
-      return;
-    }
-    subStage = useStage({
-      ...stageOptions,
-      runtimeUrl: "",
-      autoScrollIntoView: false,
-      render(stage2) {
-        copyDocumentElement();
-        const rootEl = stage2.renderer.getDocument()?.getElementById("app");
-        if (rootEl) {
-          rootEl.remove();
-        }
-        div.style.cssText = `
-          width: ${el.scrollWidth}px;
-          height: ${el.scrollHeight}px;
-          background-color: #fff;
-        `;
-        render();
-        return div;
-      }
-    });
-    subStage.mount(stageOverlay.value);
-    const { mask, renderer } = subStage;
-    const { contentWindow } = renderer;
-    mask.showRule(false);
-    updateOverlay();
-    contentWindow?.magic.onRuntimeReady({});
-    services?.editorService.on("update", updateHandler);
-    services?.editorService.on("add", addHandler);
-    services?.editorService.on("remove", removeHandler);
-  };
-  const closeOverlay = () => {
-    stageOverlayVisible.value = false;
-    subStage?.destroy();
-    subStage = null;
-    services?.editorService.off("update", updateHandler);
-    services?.editorService.off("add", addHandler);
-    services?.editorService.off("remove", removeHandler);
-  };
-  watch(stage, (stage2) => {
-    if (stage2) {
-      stage2.on("dblclick", async (event) => {
-        const el = await stage2.actionManager.getElementFromPoint(event);
-        if (el) {
-          openOverlay(el);
-        }
-      });
-    } else if (subStage) {
-      closeOverlay();
-    }
-  });
-  return {
-    wrapWidth,
-    wrapHeight,
-    stageOverlayVisible,
-    stageOverlay,
-    closeOverlay
-  };
-};
-
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "StageOverlay",
   setup(__props) {
-    const { stageOverlayVisible, stageOverlay, closeOverlay } = useStageOverlay();
+    const services = inject("services");
+    const stageOptions = inject("stageOptions");
+    const stageOverlay = ref();
+    const stageOverlayVisible = computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
+    const wrapWidth = computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
+    const wrapHeight = computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
+    const stage = computed(() => services?.editorService.get("stage"));
+    const style = computed(() => ({
+      width: `${wrapWidth.value}px`,
+      height: `${wrapHeight.value}px`
+    }));
+    watch(stage, (stage2) => {
+      if (stage2) {
+        stage2.on("dblclick", async (event) => {
+          const el = await stage2.actionManager.getElementFromPoint(event);
+          services?.stageOverlayService.openOverlay(el);
+        });
+      } else {
+        services?.stageOverlayService.closeOverlay();
+      }
+    });
+    watch(stageOverlay, (stageOverlay2) => {
+      if (!services)
+        return;
+      const subStage = services.stageOverlayService.createStage(stageOptions);
+      services?.stageOverlayService.set("stage", subStage);
+      if (stageOverlay2 && subStage) {
+        subStage.mount(stageOverlay2);
+        const { mask, renderer } = subStage;
+        const { contentWindow } = renderer;
+        mask.showRule(false);
+        services?.stageOverlayService.updateOverlay();
+        contentWindow?.magic.onRuntimeReady({});
+      }
+    });
+    const closeOverlayHandler = () => {
+      services?.stageOverlayService.closeOverlay();
+    };
     return (_ctx, _cache) => {
-      return unref(stageOverlayVisible) ? (openBlock(), createElementBlock("div", {
+      return stageOverlayVisible.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "m-editor-stage-overlay",
-        onClick: _cache[1] || (_cache[1] = //@ts-ignore
-        (...args) => unref(closeOverlay) && unref(closeOverlay)(...args))
+        onClick: closeOverlayHandler
       }, [
         createVNode(unref(TMagicIcon), {
           class: "m-editor-stage-overlay-close",
           size: 20,
-          onClick: unref(closeOverlay)
+          onClick: closeOverlayHandler
         }, {
           default: withCtx(() => [
             createVNode(unref(CloseBold))
           ]),
           _: 1
-        }, 8, ["onClick"]),
+        }),
         createElementVNode("div", {
           ref_key: "stageOverlay",
           ref: stageOverlay,
           class: "m-editor-stage-overlay-container",
+          style: normalizeStyle(style.value),
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["stop"]))
-        }, null, 512)
+        }, null, 4)
       ])) : createCommentVNode("", true);
     };
   }
@@ -9904,7 +9832,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Stage",
   props: {
     stageContentMenu: {},
-    customContentMenu: { type: Function }
+    disabledStageOverlay: { type: Boolean, default: false },
+    customContentMenu: {}
   },
   setup(__props) {
     let stage = null;
@@ -10065,7 +9994,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
       }, {
         content: withCtx(() => [
-          createVNode(_sfc_main$6),
+          !_ctx.disabledStageOverlay ? (openBlock(), createBlock(_sfc_main$6, { key: 0 })) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             createVNode(_sfc_main$4, {
               ref_key: "menu",
@@ -10147,7 +10076,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Workspace",
   props: {
     stageContentMenu: {},
-    customContentMenu: { type: Function }
+    disabledStageOverlay: { type: Boolean, default: false },
+    customContentMenu: {}
   },
   setup(__props) {
     const services = inject("services");
@@ -10158,9 +10088,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "stage", {}, () => [
           page.value ? (openBlock(), createBlock(_sfc_main$3, {
             key: 0,
+            "disabled-stage-overlay": _ctx.disabledStageOverlay,
             "stage-content-menu": _ctx.stageContentMenu,
             "custom-content-menu": _ctx.customContentMenu
-          }, null, 8, ["stage-content-menu", "custom-content-menu"])) : createCommentVNode("", true)
+          }, null, 8, ["disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content")
       ]);
@@ -10619,7 +10550,170 @@ class Keybinding extends BaseService {
 }
 const keybindingService = new Keybinding();
 
+class StageOverlay extends BaseService {
+  state = reactive({
+    wrapDiv: document.createElement("div"),
+    sourceEl: null,
+    contentEl: null,
+    stage: null,
+    stageOptions: null,
+    wrapWidth: 0,
+    wrapHeight: 0,
+    stageOverlayVisible: false
+  });
+  constructor() {
+    super([
+      { name: "openOverlay", isAsync: false },
+      { name: "closeOverlay", isAsync: false },
+      { name: "updateOverlay", isAsync: false },
+      { name: "createStage", isAsync: false }
+    ]);
+    this.get("wrapDiv").classList.add("tmagic-editor-sub-stage-wrap");
+  }
+  get(name) {
+    return this.state[name];
+  }
+  set(name, value) {
+    this.state[name] = value;
+  }
+  openOverlay(el) {
+    const stageOptions = this.get("stageOptions");
+    if (!el || !stageOptions)
+      return;
+    this.set("sourceEl", el);
+    this.createContentEl();
+    this.set("stageOverlayVisible", true);
+    editorService.on("update", this.updateHandler);
+    editorService.on("add", this.addHandler);
+    editorService.on("remove", this.removeHandler);
+    editorService.on("drag-to", this.updateHandler);
+    editorService.on("move-layer", this.updateHandler);
+  }
+  closeOverlay() {
+    this.set("stageOverlayVisible", false);
+    const subStage = this.get("stage");
+    const wrapDiv = this.get("wrapDiv");
+    subStage?.destroy();
+    wrapDiv.remove();
+    this.set("stage", null);
+    this.set("sourceEl", null);
+    this.set("contentEl", null);
+    editorService.off("update", this.updateHandler);
+    editorService.off("add", this.addHandler);
+    editorService.off("remove", this.removeHandler);
+    editorService.off("drag-to", this.updateHandler);
+    editorService.off("move-layer", this.updateHandler);
+  }
+  updateOverlay() {
+    const sourceEl = this.get("sourceEl");
+    if (!sourceEl)
+      return;
+    const { scrollWidth, scrollHeight } = sourceEl;
+    this.set("wrapWidth", scrollWidth);
+    this.set("wrapHeight", scrollHeight);
+  }
+  createStage(stageOptions = {}) {
+    return useStage({
+      ...stageOptions,
+      runtimeUrl: "",
+      autoScrollIntoView: false,
+      render: async (stage) => {
+        this.copyDocumentElement();
+        const rootEls = stage.renderer.getDocument()?.body.children;
+        if (rootEls) {
+          Array.from(rootEls).forEach((element) => {
+            if (["SCRIPT", "STYLE"].includes(element.tagName)) {
+              return;
+            }
+            element.remove();
+          });
+        }
+        const wrapDiv = this.get("wrapDiv");
+        await this.render();
+        return wrapDiv;
+      }
+    });
+  }
+  createContentEl() {
+    const sourceEl = this.get("sourceEl");
+    if (!sourceEl)
+      return;
+    const contentEl = sourceEl.cloneNode(true);
+    this.set("contentEl", contentEl);
+    contentEl.style.position = "static";
+    contentEl.style.overflow = "visible";
+  }
+  copyDocumentElement() {
+    const subStage = this.get("stage");
+    const stage = editorService.get("stage");
+    const doc = subStage?.renderer.getDocument();
+    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    if (doc && documentElement) {
+      doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
+    }
+  }
+  async render() {
+    this.createContentEl();
+    const contentEl = this.get("contentEl");
+    const sourceEl = this.get("sourceEl");
+    const wrapDiv = this.get("wrapDiv");
+    const subStage = this.get("stage");
+    const stageOptions = this.get("stageOptions");
+    if (!contentEl)
+      return;
+    wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
+    Array.from(wrapDiv.children).forEach((element) => {
+      element.remove();
+    });
+    wrapDiv.appendChild(contentEl);
+    setTimeout(() => {
+      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+    });
+    if (await stageOptions?.canSelect?.(contentEl)) {
+      subStage?.select(contentEl);
+    }
+  }
+  updateHandler = () => {
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+      this.updateSelectStatus();
+    });
+  };
+  addHandler = () => {
+    this.render();
+    this.updateOverlay();
+    this.updateSelectStatus();
+  };
+  removeHandler = () => {
+    this.render();
+    this.updateOverlay();
+    this.updateSelectStatus();
+  };
+  updateSelectStatus() {
+    const subStage = this.get("stage");
+    const nodes = editorService.get("nodes");
+    if (nodes.length > 1) {
+      subStage?.multiSelect(nodes.map((n) => n.id));
+    } else {
+      subStage?.select(nodes[0].id);
+    }
+  }
+}
+const stageOverlayService = new StageOverlay();
+
 const defaultEditorProps = {
+  renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
+  disabledPageFragment: false,
+  disabledStageOverlay: false,
+  containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
+  containerHighlightDuration: 800,
+  containerHighlightType: ContainerHighlightType.DEFAULT,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),
@@ -10632,13 +10726,7 @@ const defaultEditorProps = {
   datasourceConfigs: () => ({}),
   canSelect: (el) => Boolean(el.id),
   isContainer: (el) => el.classList.contains("magic-ui-container"),
-  containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
-  containerHighlightDuration: 800,
-  containerHighlightType: ContainerHighlightType.DEFAULT,
-  codeOptions: () => ({}),
-  renderType: RenderType.IFRAME,
-  disabledMultiSelect: false,
-  disabledPageFragment: false
+  codeOptions: () => ({})
 };
 
 const initServiceState = (props, {
@@ -10985,7 +11073,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     menu: {},
     layerContentMenu: {},
     stageContentMenu: {},
-    render: { type: Function },
     runtimeUrl: {},
     renderType: {},
     autoScrollIntoView: { type: Boolean },
@@ -10997,21 +11084,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     datasourceEventMethodList: {},
     moveableOptions: { type: Function },
     defaultSelected: {},
-    canSelect: { type: Function },
-    isContainer: { type: Function },
     containerHighlightClassName: {},
     containerHighlightDuration: {},
     containerHighlightType: {},
     stageRect: {},
     codeOptions: {},
-    updateDragEl: { type: Function },
     disabledDragStart: { type: Boolean },
-    extendFormState: { type: Function },
     collectorOptions: {},
     guidesOptions: {},
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },
-    customContentMenu: { type: Function }
+    disabledStageOverlay: { type: Boolean },
+    render: { type: Function },
+    updateDragEl: { type: Function },
+    canSelect: { type: Function },
+    isContainer: { type: Function },
+    customContentMenu: { type: Function },
+    extendFormState: { type: Function }
   }, defaultEditorProps),
   emits: ["props-panel-mounted", "update:modelValue", "props-form-error", "props-submit-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -11028,33 +11117,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       codeBlockService,
       depService,
       dataSourceService,
-      keybindingService
+      keybindingService,
+      stageOverlayService
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
     keybindingService.register(keybindingConfig);
     keybindingService.registerEl("global");
+    const stageOptions = {
+      runtimeUrl: props.runtimeUrl,
+      autoScrollIntoView: props.autoScrollIntoView,
+      render: props.render,
+      moveableOptions: props.moveableOptions,
+      canSelect: props.canSelect,
+      updateDragEl: props.updateDragEl,
+      isContainer: props.isContainer,
+      containerHighlightClassName: props.containerHighlightClassName,
+      containerHighlightDuration: props.containerHighlightDuration,
+      containerHighlightType: props.containerHighlightType,
+      disabledDragStart: props.disabledDragStart,
+      renderType: props.renderType,
+      guidesOptions: props.guidesOptions,
+      disabledMultiSelect: props.disabledMultiSelect
+    };
+    stageOverlayService.set("stageOptions", stageOptions);
     provide("services", services);
     provide("codeOptions", props.codeOptions);
-    provide(
-      "stageOptions",
-      reactive({
-        runtimeUrl: props.runtimeUrl,
-        autoScrollIntoView: props.autoScrollIntoView,
-        render: props.render,
-        moveableOptions: props.moveableOptions,
-        canSelect: props.canSelect,
-        updateDragEl: props.updateDragEl,
-        isContainer: props.isContainer,
-        containerHighlightClassName: props.containerHighlightClassName,
-        containerHighlightDuration: props.containerHighlightDuration,
-        containerHighlightType: props.containerHighlightType,
-        disabledDragStart: props.disabledDragStart,
-        renderType: props.renderType,
-        guidesOptions: props.guidesOptions,
-        disabledMultiSelect: props.disabledMultiSelect
-      })
-    );
+    provide("stageOptions", stageOptions);
     __expose(services);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
@@ -11116,6 +11205,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         workspace: withCtx(() => [
           renderSlot(_ctx.$slots, "workspace", { editorService: unref(editorService) }, () => [
             createVNode(_sfc_main$1, {
+              "disabled-stage-overlay": _ctx.disabledStageOverlay,
               "stage-content-menu": _ctx.stageContentMenu,
               "custom-content-menu": _ctx.customContentMenu
             }, {
@@ -11126,7 +11216,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "workspace-content", { editorService: unref(editorService) })
               ]),
               _: 3
-            }, 8, ["stage-content-menu", "custom-content-menu"])
+            }, 8, ["disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])
           ])
         ]),
         "props-panel": withCtx(() => [
@@ -11197,4 +11287,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$m as CodeBlockList, _sfc_main$l as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$N as CodeSelectCol, ColumnLayout, _sfc_main$c as ComponentListPanel, _sfc_main$h as ContentMenu, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$I as DataSourceMethodSelect, _sfc_main$J as DataSourceMethods, _sfc_main$H as DataSourceMocks, _sfc_main$G as DataSourceSelect, DragType, _sfc_main$F as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$O as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$d as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$q as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$m as CodeBlockList, _sfc_main$l as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$N as CodeSelectCol, ColumnLayout, _sfc_main$c as ComponentListPanel, _sfc_main$h as ContentMenu, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$I as DataSourceMethodSelect, _sfc_main$J as DataSourceMethods, _sfc_main$H as DataSourceMocks, _sfc_main$G as DataSourceSelect, DragType, _sfc_main$F as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$O as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$d as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$q as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };