@tmagic/editor 1.3.11 → 1.3.12

package/dist/tmagic-editor.umd.cjs

@@ -1855,6 +1855,197 @@
   }
   const depService = new Dep();
 
+  class Props extends BaseService {
+    state = vue.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(utils.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 lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+    }
+    setPropsValues(values) {
+      Object.keys(values).forEach((type) => {
+        this.setPropsValue(utils.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(
+          lodashEs.cloneDeep({
+            type,
+            ...defaultValue
+          })
+        )
+      ]);
+      return {
+        id,
+        ...defaultPropsValue,
+        ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
+      };
+    }
+    async createId(type) {
+      return `${type}_${utils.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(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.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 = utils.getValueByKeyPath(fullKey, config);
+          const relateTargetId = relateIdMap[relateOriginId];
+          if (!relateTargetId)
+            return;
+          utils.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;
@@ -2109,197 +2300,6 @@
   }
   const storageService = new WebStorage();
 
-  class Props extends BaseService {
-    state = vue.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(utils.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 lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
-    }
-    setPropsValues(values) {
-      Object.keys(values).forEach((type) => {
-        this.setPropsValue(utils.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(
-          lodashEs.cloneDeep({
-            type,
-            ...defaultValue
-          })
-        )
-      ]);
-      return {
-        id,
-        ...defaultPropsValue,
-        ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
-      };
-    }
-    async createId(type) {
-      return `${type}_${utils.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(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.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 = utils.getValueByKeyPath(fullKey, config);
-          const relateTargetId = relateIdMap[relateOriginId];
-          if (!relateTargetId)
-            return;
-          utils.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 = vue.reactive({
       root: null,
@@ -2935,14 +2935,14 @@
      * @param targetId 容器ID
      */
     async moveToContainer(config, targetId) {
-      const root = lodashEs.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: lodashEs.cloneDeep(root) });
         const layout = await this.getLayout(target);
         const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config, (objValue, srcValue) => {
           if (Array.isArray(srcValue)) {
@@ -2953,7 +2953,7 @@
         target.items.push(newConfig);
         await stage.select(targetId);
         const targetParent = this.getParentById(target.id);
-        await stage.update({ config: lodashEs.cloneDeep(target), parentId: targetParent?.id, root });
+        await stage.update({ config: lodashEs.cloneDeep(target), parentId: targetParent?.id, root: lodashEs.cloneDeep(root) });
         await this.select(newConfig);
         stage.select(newConfig.id);
         this.addModifiedNodeId(target.id);
@@ -5370,7 +5370,7 @@
 
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorLayout"
+      name: "MEditorSplitView"
     },
     __name: "SplitView",
     props: {
@@ -8473,8 +8473,8 @@
           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) {
           utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
         }
         clientX = 0;
@@ -9282,7 +9282,9 @@
       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();
@@ -9577,152 +9579,71 @@
     }
   });
 
-  const useStageOverlay = () => {
-    const services = vue.inject("services");
-    const stageOptions = vue.inject("stageOptions");
-    const wrapWidth = vue.ref(0);
-    const wrapHeight = vue.ref(0);
-    const stageOverlayVisible = vue.ref(false);
-    const stageOverlay = vue.ref();
-    const stage = vue.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 vue.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);
-    };
-    vue.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__ */ vue.defineComponent({
     __name: "StageOverlay",
     setup(__props) {
-      const { stageOverlayVisible, stageOverlay, closeOverlay } = useStageOverlay();
+      const services = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
+      const stageOverlay = vue.ref();
+      const stageOverlayVisible = vue.computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
+      const wrapWidth = vue.computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
+      const wrapHeight = vue.computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
+      const stage = vue.computed(() => services?.editorService.get("stage"));
+      const style = vue.computed(() => ({
+        width: `${wrapWidth.value}px`,
+        height: `${wrapHeight.value}px`
+      }));
+      vue.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();
+        }
+      });
+      vue.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 vue.unref(stageOverlayVisible) ? (vue.openBlock(), vue.createElementBlock("div", {
+        return stageOverlayVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "m-editor-stage-overlay",
-          onClick: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => vue.unref(closeOverlay) && vue.unref(closeOverlay)(...args))
+          onClick: closeOverlayHandler
         }, [
           vue.createVNode(vue.unref(design.TMagicIcon), {
             class: "m-editor-stage-overlay-close",
             size: 20,
-            onClick: vue.unref(closeOverlay)
+            onClick: closeOverlayHandler
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(iconsVue.CloseBold))
             ]),
             _: 1
-          }, 8, ["onClick"]),
+          }),
           vue.createElementVNode("div", {
             ref_key: "stageOverlay",
             ref: stageOverlay,
             class: "m-editor-stage-overlay-container",
+            style: vue.normalizeStyle(style.value),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
             }, ["stop"]))
-          }, null, 512)
+          }, null, 4)
         ])) : vue.createCommentVNode("", true);
       };
     }
@@ -9909,7 +9830,8 @@
     __name: "Stage",
     props: {
       stageContentMenu: {},
-      customContentMenu: { type: Function }
+      disabledStageOverlay: { type: Boolean, default: false },
+      customContentMenu: {}
     },
     setup(__props) {
       let stage = null;
@@ -10070,7 +9992,7 @@
           onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
         }, {
           content: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$6),
+            !_ctx.disabledStageOverlay ? (vue.openBlock(), vue.createBlock(_sfc_main$6, { key: 0 })) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$4, {
                 ref_key: "menu",
@@ -10152,7 +10074,8 @@
     __name: "Workspace",
     props: {
       stageContentMenu: {},
-      customContentMenu: { type: Function }
+      disabledStageOverlay: { type: Boolean, default: false },
+      customContentMenu: {}
     },
     setup(__props) {
       const services = vue.inject("services");
@@ -10163,9 +10086,10 @@
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
             page.value ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
+            }, null, 8, ["disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content")
         ]);
@@ -10624,7 +10548,152 @@
   }
   const keybindingService = new Keybinding();
 
+  class StageOverlay extends BaseService {
+    state = vue.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);
+    }
+    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);
+    }
+    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");
+          const sourceEl = this.get("sourceEl");
+          wrapDiv.style.cssText = `
+            width: ${sourceEl?.scrollWidth}px;
+            height: ${sourceEl?.scrollHeight}px;
+            background-color: #fff;
+          `;
+          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 wrapDiv = this.get("wrapDiv");
+      const subStage = this.get("stage");
+      const stageOptions = this.get("stageOptions");
+      if (!contentEl)
+        return;
+      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 = () => {
+      this.render();
+      this.updateOverlay();
+    };
+    addHandler = () => {
+      this.render();
+      this.updateOverlay();
+    };
+    removeHandler = () => {
+      this.render();
+      this.updateOverlay();
+    };
+  }
+  const stageOverlayService = new StageOverlay();
+
   const defaultEditorProps = {
+    renderType: StageCore.RenderType.IFRAME,
+    disabledMultiSelect: false,
+    disabledPageFragment: false,
+    disabledStageOverlay: false,
+    containerHighlightClassName: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME,
+    containerHighlightDuration: 800,
+    containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
     componentGroupList: () => [],
     datasourceList: () => [],
     menu: () => ({ left: [], right: [] }),
@@ -10637,13 +10706,7 @@
     datasourceConfigs: () => ({}),
     canSelect: (el) => Boolean(el.id),
     isContainer: (el) => el.classList.contains("magic-ui-container"),
-    containerHighlightClassName: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME,
-    containerHighlightDuration: 800,
-    containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
-    codeOptions: () => ({}),
-    renderType: StageCore.RenderType.IFRAME,
-    disabledMultiSelect: false,
-    disabledPageFragment: false
+    codeOptions: () => ({})
   };
 
   const initServiceState = (props, {
@@ -10990,7 +11053,6 @@
       menu: {},
       layerContentMenu: {},
       stageContentMenu: {},
-      render: { type: Function },
       runtimeUrl: {},
       renderType: {},
       autoScrollIntoView: { type: Boolean },
@@ -11002,21 +11064,23 @@
       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 }) {
@@ -11033,33 +11097,33 @@
         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);
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
-      vue.provide(
-        "stageOptions",
-        vue.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
-        })
-      );
+      vue.provide("stageOptions", stageOptions);
       __expose(services);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
@@ -11121,6 +11185,7 @@
           workspace: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "workspace", { editorService: vue.unref(editorService) }, () => [
               vue.createVNode(_sfc_main$1, {
+                "disabled-stage-overlay": _ctx.disabledStageOverlay,
                 "stage-content-menu": _ctx.stageContentMenu,
                 "custom-content-menu": _ctx.customContentMenu
               }, {
@@ -11131,7 +11196,7 @@
                   vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: vue.unref(editorService) })
                 ]),
                 _: 3
-              }, 8, ["stage-content-menu", "custom-content-menu"])
+              }, 8, ["disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])
             ])
           ]),
           "props-panel": vue.withCtx(() => [
@@ -11286,6 +11351,7 @@
   exports.setChildrenLayout = setChildrenLayout;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
+  exports.stageOverlayService = stageOverlayService;
   exports.storageService = storageService;
   exports.styleTabConfig = styleTabConfig;
   exports.traverseNode = traverseNode;