@tmagic/editor 1.5.0-beta.2 → 1.5.0-beta.4

package/dist/tmagic-editor.js

@@ -1012,11 +1012,14 @@ const getMiddleTop = (node, parentNode, stage) => {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+  let wrapperHeightDeal = parentHeight;
+  if (stage.mask && stage.renderer) {
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+    const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+    if (isPage(parentNode)) {
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    }
   }
   return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
@@ -1131,7 +1134,7 @@ const fixNodePosition = (config, parent, stage) => {
   return {
     ...config.style || {},
     top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+    left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
   };
 };
 const serializeConfig = (config) => serialize(config, {
@@ -1940,7 +1943,7 @@ class Editor extends BaseService {
       historyService.resetState();
     }
     if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+      this.get("stage")?.renderer?.runtime?.getApp?.()?.page?.emit(
         "editor:select",
         {
           node,
@@ -2294,7 +2297,7 @@ class Editor extends BaseService {
   }
   async doPaste(config, position = {}) {
     propsService.clearRelateId();
-    const doc = this.get("stage")?.renderer.contentWindow?.document;
+    const doc = this.get("stage")?.renderer?.contentWindow?.document;
     const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
@@ -2308,7 +2311,7 @@ class Editor extends BaseService {
     }
     if (!node.style) return config;
     const stage = this.get("stage");
-    const doc = stage?.renderer.contentWindow?.document;
+    const doc = stage?.renderer?.contentWindow?.document;
     if (doc) {
       const el = getElById()(doc, node.id);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
@@ -3881,7 +3884,7 @@ const useStage = (stageOptions) => {
       }
     }
   );
-  stage.mask.setGuides([
+  stage.mask?.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
   ]);
@@ -3937,6 +3940,9 @@ const useStage = (stageOptions) => {
       globalThis.localStorage.removeItem(storageKey);
     }
   });
+  onBeforeUnmount(() => {
+    stage.destroy();
+  });
   return stage;
 };
 
@@ -9184,8 +9190,8 @@ const usePasteMenu = (menu) => ({
       const stage = services?.editorService?.get("stage");
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-      const initialTop = calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
+      const initialLeft = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+      const initialTop = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {
       services?.editorService?.paste();
@@ -9968,7 +9974,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         globalThis.clearTimeout(timeout);
         timeout = void 0;
       }
-      const doc = stage.value?.renderer.getDocument();
+      const doc = stage.value?.renderer?.getDocument();
       if (doc && stageOptions?.containerHighlightClassName) {
         removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
       }
@@ -10594,7 +10600,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         if (!stage2) return;
         nextTick(() => unWatch());
         stage2.on("select", (el, event) => {
-          const els = stage2.renderer.getElementsFromPoint(event) || [];
+          const els = stage2.renderer?.getElementsFromPoint(event) || [];
           const ids = els.map((el2) => getIdFromEl()(el2)).filter((id) => Boolean(id));
           buttonVisible.value = ids.length > 3;
           filterTextChangeHandler(ids);
@@ -10693,7 +10699,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     watch(stage, (stage2) => {
       if (stage2) {
         stage2.on("dblclick", async (event) => {
-          const el = await stage2.actionManager.getElementFromPoint(event);
+          const el = await stage2.actionManager?.getElementFromPoint(event) || null;
           services?.stageOverlayService.openOverlay(el);
         });
       } else {
@@ -10708,7 +10714,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         subStage.mount(stageOverlay2);
         const { mask, renderer } = subStage;
         const { contentWindow } = renderer;
-        mask.showRule(false);
+        mask?.showRule(false);
         services?.stageOverlayService.updateOverlay();
         contentWindow?.magic.onRuntimeReady({});
       }
@@ -11021,7 +11027,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const config = parseDSL(`(${data})`);
       if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
       e.preventDefault();
-      const doc = stage?.renderer.contentWindow?.document;
+      const doc = stage?.renderer?.contentWindow?.document;
       const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
       let parent = page.value;
       const parentId = getIdFromEl()(parentEl);
@@ -11964,6 +11970,10 @@ class StageOverlay extends BaseService {
     const subStage = this.get("stage");
     const wrapDiv = this.get("wrapDiv");
     subStage?.destroy();
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
     wrapDiv.remove();
     this.set("stage", null);
     this.set("sourceEl", null);
@@ -11989,7 +11999,7 @@ class StageOverlay extends BaseService {
       autoScrollIntoView: false,
       render: async (stage) => {
         this.copyDocumentElement();
-        const rootEls = stage.renderer.getDocument()?.body.children;
+        const rootEls = stage.renderer?.getDocument()?.body.children;
         if (rootEls) {
           Array.from(rootEls).forEach((element) => {
             if (["SCRIPT", "STYLE"].includes(element.tagName)) {
@@ -12018,8 +12028,8 @@ class StageOverlay extends BaseService {
   copyDocumentElement() {
     const subStage = this.get("stage");
     const stage = editorService.get("stage");
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    const doc = subStage?.renderer?.getDocument();
+    const documentElement = stage?.renderer?.getDocument()?.documentElement;
     if (doc && documentElement) {
       doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
     }
@@ -12037,12 +12047,13 @@ class StageOverlay extends BaseService {
       height: ${sourceEl?.scrollHeight}px;
       background-color: #fff;
     `;
-    Array.from(wrapDiv.children).forEach((element) => {
-      element.remove();
-    });
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
     wrapDiv.appendChild(contentEl);
     setTimeout(() => {
-      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+      subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
       const id = getIdFromEl()(contentEl);
@@ -12282,7 +12293,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   const getApp = () => {
     const stage = editorService.get("stage");
-    return stage?.renderer.runtime?.getApp?.();
+    return stage?.renderer?.runtime?.getApp?.();
   };
   const updateDataSourceSchema = () => {
     const root = editorService.get("root");

package/dist/tmagic-editor.umd.cjs

@@ -1016,11 +1016,14 @@
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
-    const { scrollTop = 0, wrapperHeight } = stage.mask;
-    const wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-    const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-    if (utils.isPage(parentNode)) {
-      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    let wrapperHeightDeal = parentHeight;
+    if (stage.mask && stage.renderer) {
+      const { scrollTop = 0, wrapperHeight } = stage.mask;
+      wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+      const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+      if (utils.isPage(parentNode)) {
+        return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+      }
     }
     return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
   };
@@ -1135,7 +1138,7 @@
     return {
       ...config.style || {},
       top: getMiddleTop(config, parent, stage),
-      left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+      left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
     };
   };
   const serializeConfig = (config) => serialize(config, {
@@ -1944,7 +1947,7 @@
         historyService.resetState();
       }
       if (node?.id) {
-        this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+        this.get("stage")?.renderer?.runtime?.getApp?.()?.page?.emit(
           "editor:select",
           {
             node,
@@ -2298,7 +2301,7 @@
     }
     async doPaste(config, position = {}) {
       propsService.clearRelateId();
-      const doc = this.get("stage")?.renderer.contentWindow?.document;
+      const doc = this.get("stage")?.renderer?.contentWindow?.document;
       const pasteConfigs = beforePaste(position, lodashEs.cloneDeep(config), doc);
       return pasteConfigs;
     }
@@ -2312,7 +2315,7 @@
       }
       if (!node.style) return config;
       const stage = this.get("stage");
-      const doc = stage?.renderer.contentWindow?.document;
+      const doc = stage?.renderer?.contentWindow?.document;
       if (doc) {
         const el = utils.getElById()(doc, node.id);
         const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
@@ -3885,7 +3888,7 @@
         }
       }
     );
-    stage.mask.setGuides([
+    stage.mask?.setGuides([
       getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
       getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
     ]);
@@ -3941,6 +3944,9 @@
         globalThis.localStorage.removeItem(storageKey);
       }
     });
+    vue.onBeforeUnmount(() => {
+      stage.destroy();
+    });
     return stage;
   };
 
@@ -9188,8 +9194,8 @@
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
         const parentRect = stage?.container?.getBoundingClientRect();
-        const initialLeft = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-        const initialTop = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
+        const initialLeft = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+        const initialTop = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
         services?.editorService?.paste({ left: initialLeft, top: initialTop });
       } else {
         services?.editorService?.paste();
@@ -9972,7 +9978,7 @@
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        const doc = stage.value?.renderer.getDocument();
+        const doc = stage.value?.renderer?.getDocument();
         if (doc && stageOptions?.containerHighlightClassName) {
           utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
         }
@@ -10598,7 +10604,7 @@
           if (!stage2) return;
           vue.nextTick(() => unWatch());
           stage2.on("select", (el, event) => {
-            const els = stage2.renderer.getElementsFromPoint(event) || [];
+            const els = stage2.renderer?.getElementsFromPoint(event) || [];
             const ids = els.map((el2) => utils.getIdFromEl()(el2)).filter((id) => Boolean(id));
             buttonVisible.value = ids.length > 3;
             filterTextChangeHandler(ids);
@@ -10697,7 +10703,7 @@
       vue.watch(stage, (stage2) => {
         if (stage2) {
           stage2.on("dblclick", async (event) => {
-            const el = await stage2.actionManager.getElementFromPoint(event);
+            const el = await stage2.actionManager?.getElementFromPoint(event) || null;
             services?.stageOverlayService.openOverlay(el);
           });
         } else {
@@ -10712,7 +10718,7 @@
           subStage.mount(stageOverlay2);
           const { mask, renderer } = subStage;
           const { contentWindow } = renderer;
-          mask.showRule(false);
+          mask?.showRule(false);
           services?.stageOverlayService.updateOverlay();
           contentWindow?.magic.onRuntimeReady({});
         }
@@ -11025,7 +11031,7 @@
         const config = parseDSL(`(${data})`);
         if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
         e.preventDefault();
-        const doc = stage?.renderer.contentWindow?.document;
+        const doc = stage?.renderer?.contentWindow?.document;
         const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
         let parent = page.value;
         const parentId = utils.getIdFromEl()(parentEl);
@@ -11968,6 +11974,10 @@
       const subStage = this.get("stage");
       const wrapDiv = this.get("wrapDiv");
       subStage?.destroy();
+      for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+        const child = wrapDiv.children[i];
+        child.remove();
+      }
       wrapDiv.remove();
       this.set("stage", null);
       this.set("sourceEl", null);
@@ -11993,7 +12003,7 @@
         autoScrollIntoView: false,
         render: async (stage) => {
           this.copyDocumentElement();
-          const rootEls = stage.renderer.getDocument()?.body.children;
+          const rootEls = stage.renderer?.getDocument()?.body.children;
           if (rootEls) {
             Array.from(rootEls).forEach((element) => {
               if (["SCRIPT", "STYLE"].includes(element.tagName)) {
@@ -12022,8 +12032,8 @@
     copyDocumentElement() {
       const subStage = this.get("stage");
       const stage = editorService.get("stage");
-      const doc = subStage?.renderer.getDocument();
-      const documentElement = stage?.renderer.getDocument()?.documentElement;
+      const doc = subStage?.renderer?.getDocument();
+      const documentElement = stage?.renderer?.getDocument()?.documentElement;
       if (doc && documentElement) {
         doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
       }
@@ -12041,12 +12051,13 @@
       height: ${sourceEl?.scrollHeight}px;
       background-color: #fff;
     `;
-      Array.from(wrapDiv.children).forEach((element) => {
-        element.remove();
-      });
+      for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+        const child = wrapDiv.children[i];
+        child.remove();
+      }
       wrapDiv.appendChild(contentEl);
       setTimeout(() => {
-        subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+        subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
       });
       if (await stageOptions?.canSelect?.(contentEl)) {
         const id = utils.getIdFromEl()(contentEl);
@@ -12286,7 +12297,7 @@
     };
     const getApp = () => {
       const stage = editorService.get("stage");
-      return stage?.renderer.runtime?.getApp?.();
+      return stage?.renderer?.runtime?.getApp?.();
     };
     const updateDataSourceSchema = () => {
       const root = editorService.get("root");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.2",
+  "version": "1.5.0-beta.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -55,8 +55,8 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/dep": "1.5.0-beta.2",
-    "@tmagic/table": "1.5.0-beta.2"
+    "@tmagic/dep": "1.5.0-beta.4",
+    "@tmagic/table": "1.5.0-beta.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -77,12 +77,12 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.4.35",
-    "@tmagic/form": "1.5.0-beta.2",
-    "@tmagic/schema": "1.5.0-beta.2",
-    "@tmagic/design": "1.5.0-beta.2",
-    "@tmagic/stage": "1.5.0-beta.2",
-    "@tmagic/core": "1.5.0-beta.2",
-    "@tmagic/utils": "1.5.0-beta.2"
+    "@tmagic/design": "1.5.0-beta.4",
+    "@tmagic/core": "1.5.0-beta.4",
+    "@tmagic/schema": "1.5.0-beta.4",
+    "@tmagic/stage": "1.5.0-beta.4",
+    "@tmagic/utils": "1.5.0-beta.4",
+    "@tmagic/form": "1.5.0-beta.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/hooks/use-stage.ts

@@ -1,4 +1,4 @@
-import { computed, watch } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -62,7 +62,7 @@ export const useStage = (stageOptions: StageOptions) => {
     },
   );
 
-  stage.mask.setGuides([
+  stage.mask?.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);
@@ -131,5 +131,9 @@ export const useStage = (stageOptions: StageOptions) => {
     }
   });
 
+  onBeforeUnmount(() => {
+    stage.destroy();
+  });
+
   return stage;
 };

package/src/initService.ts

@@ -242,7 +242,7 @@ export const initServiceEvents = (
 
   const getApp = () => {
     const stage = editorService.get('stage');
-    return stage?.renderer.runtime?.getApp?.();
+    return stage?.renderer?.runtime?.getApp?.();
   };
 
   const updateDataSourceSchema = () => {

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -111,7 +111,7 @@ const dragendHandler = () => {
     globalThis.clearTimeout(timeout);
     timeout = undefined;
   }
-  const doc = stage.value?.renderer.getDocument();
+  const doc = stage.value?.renderer?.getDocument();
   if (doc && stageOptions?.containerHighlightClassName) {
     removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
   }

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -61,7 +61,7 @@ const unWatch = watch(
     nextTick(() => unWatch());
 
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
-      const els = stage.renderer.getElementsFromPoint(event) || [];
+      const els = stage.renderer?.getElementsFromPoint(event) || [];
       const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
 
       buttonVisible.value = ids.length > 3;

package/src/layouts/workspace/viewer/Stage.vue

@@ -196,7 +196,7 @@ const dropHandler = async (e: DragEvent) => {
 
   e.preventDefault();
 
-  const doc = stage?.renderer.contentWindow?.document;
+  const doc = stage?.renderer?.contentWindow?.document;
   const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
 
   let parent: MContainer | undefined | null = page.value;
@@ -209,7 +209,7 @@ const dropHandler = async (e: DragEvent) => {
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();
-    const { scrollTop, scrollLeft } = stage.mask;
+    const { scrollTop, scrollLeft } = stage.mask!;
     const { style = {} } = config.data;
 
     let top = 0;

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -34,7 +34,7 @@ const style = computed(() => ({
 watch(stage, (stage) => {
   if (stage) {
     stage.on('dblclick', async (event: MouseEvent) => {
-      const el = await stage.actionManager.getElementFromPoint(event);
+      const el = (await stage.actionManager?.getElementFromPoint(event)) || null;
       services?.stageOverlayService.openOverlay(el);
     });
   } else {
@@ -53,8 +53,8 @@ watch(stageOverlay, (stageOverlay) => {
 
     const { mask, renderer } = subStage;
 
-    const { contentWindow } = renderer;
-    mask.showRule(false);
+    const { contentWindow } = renderer!;
+    mask?.showRule(false);
 
     services?.stageOverlayService.updateOverlay();
 

package/src/services/editor.ts

@@ -267,7 +267,7 @@ class Editor extends BaseService {
 
     if (node?.id) {
       this.get('stage')
-        ?.renderer.runtime?.getApp?.()
+        ?.renderer?.runtime?.getApp?.()
         ?.page?.emit(
           'editor:select',
           {
@@ -737,7 +737,7 @@ class Editor extends BaseService {
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
     propsService.clearRelateId();
-    const doc = this.get('stage')?.renderer.contentWindow?.document;
+    const doc = this.get('stage')?.renderer?.contentWindow?.document;
     const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
@@ -756,7 +756,7 @@ class Editor extends BaseService {
     if (!node.style) return config;
 
     const stage = this.get('stage');
-    const doc = stage?.renderer.contentWindow?.document;
+    const doc = stage?.renderer?.contentWindow?.document;
 
     if (doc) {
       const el = getElById()(doc, node.id);

package/src/services/stageOverlay.ts

@@ -64,6 +64,12 @@ class StageOverlay extends BaseService {
     const subStage = this.get('stage');
     const wrapDiv = this.get('wrapDiv');
     subStage?.destroy();
+
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
+
     wrapDiv.remove();
 
     this.set('stage', null);
@@ -97,7 +103,7 @@ class StageOverlay extends BaseService {
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 
-        const rootEls = stage.renderer.getDocument()?.body.children;
+        const rootEls = stage.renderer?.getDocument()?.body.children;
         if (rootEls) {
           Array.from(rootEls).forEach((element) => {
             if (['SCRIPT', 'STYLE'].includes(element.tagName)) {
@@ -135,8 +141,8 @@ class StageOverlay extends BaseService {
     const subStage = this.get('stage');
     const stage = editorService.get('stage');
 
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    const doc = subStage?.renderer?.getDocument();
+    const documentElement = stage?.renderer?.getDocument()?.documentElement;
 
     if (doc && documentElement) {
       doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
@@ -160,13 +166,15 @@ class StageOverlay extends BaseService {
       background-color: #fff;
     `;
 
-    Array.from(wrapDiv.children).forEach((element) => {
-      element.remove();
-    });
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
+
     wrapDiv.appendChild(contentEl);
 
     setTimeout(() => {
-      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+      subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {

package/src/utils/content-menu.ts

@@ -47,10 +47,10 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
       const initialLeft =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
         services.uiService.get('zoom');
       const initialTop =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
         services.uiService.get('zoom');
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {

package/src/utils/editor.ts

@@ -109,12 +109,16 @@ const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) =
   }
 
   const { height: parentHeight } = parentNode.style;
-  // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+
+  let wrapperHeightDeal = parentHeight;
+  if (stage.mask && stage.renderer) {
+    // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
+    const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
+    if (isPage(parentNode)) {
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    }
   }
 
   // 如果容器的元素高度大于当前视口高度的2倍, 添加的元素居中位置也会看不见, 所以要取最小值计算
@@ -263,7 +267,7 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
   return {
     ...(config.style || {}),
     top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
+    left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document),
   };
 };