@tmagic/editor 1.5.0-beta.13 → 1.5.0-beta.15

package/src/hooks/use-code-block-edit.ts

@@ -21,7 +21,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     codeConfig.value = {
       name: '',
-      content: `({app, params}) => {\n  // place your code here\n}`,
+      content: `({app, params, flowState}) => {\n  // place your code here\n}`,
       params: [],
     };
 

package/src/hooks/use-data-source-edit.ts

@@ -1,6 +1,7 @@
 import { computed, ref } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
+import type { ContainerChangeEventData } from '@tmagic/form';
 
 import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceService } from '@editor/services/dataSource';
@@ -24,9 +25,9 @@ export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
     editDialog.value.show();
   };
 
-  const submitDataSourceHandler = (value: DataSourceSchema) => {
+  const submitDataSourceHandler = (value: DataSourceSchema, eventData: ContainerChangeEventData) => {
     if (value.id) {
-      dataSourceService?.update(value);
+      dataSourceService?.update(value, { changeRecords: eventData.changeRecords });
     } else {
       dataSourceService?.add(value);
     }

package/src/initService.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
+import { computed, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type {
@@ -17,11 +17,14 @@ import {
   createDataSourceMethodTarget,
   createDataSourceTarget,
   DepTargetType,
+  NODE_CONDS_KEY,
   Target,
 } from '@tmagic/core';
+import { ChangeRecord } from '@tmagic/form';
 import { getNodes, isPage, traverseNode } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
+import { isIncludeDataSource, isValueIncludeDataSource } from './utils/editor';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
 
@@ -219,6 +222,7 @@ export const initServiceEvents = (
     });
 
     if (Array.isArray(value.items)) {
+      depService.clearIdleTasks();
       collectIdle(value.items, true);
     } else {
       depService.clear();
@@ -247,10 +251,25 @@ export const initServiceEvents = (
     }
   };
 
-  const getApp = () => {
-    const stage = editorService.get('stage');
-    return stage?.renderer?.runtime?.getApp?.();
-  };
+  const stage = computed(() => editorService.get('stage'));
+
+  watch(stage, (stage) => {
+    if (!stage) {
+      return;
+    }
+
+    stage.on('rerender', () => {
+      const node = editorService.get('node');
+
+      if (!node) return;
+
+      collectIdle([node], true).then(() => {
+        afterUpdateNodes([node]);
+      });
+    });
+  });
+
+  const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
 
   const updateDataSourceSchema = (nodes: MNode[], deep: boolean) => {
     const root = editorService.get('root');
@@ -266,9 +285,7 @@ export const initServiceEvents = (
       getApp()?.dataSourceManager?.updateSchema(root.dataSources);
     }
 
-    const stage = editorService.get('stage');
-
-    if (!root || !stage) return;
+    if (!root || !stage.value) return;
 
     const allNodes: MNode[] = [];
 
@@ -289,7 +306,7 @@ export const initServiceEvents = (
       Object.keys(dep).forEach((id) => {
         const node = allNodes.find((node) => node.id === id);
         node &&
-          stage.update({
+          stage.value?.update({
             config: cloneDeep(node),
             parentId: editorService.getParentById(node.id)?.id,
             root: cloneDeep(root),
@@ -301,13 +318,8 @@ export const initServiceEvents = (
   const afterUpdateNodes = (nodes: MNode[]) => {
     const root = editorService.get('root');
     if (!root) return;
-    const stage = editorService.get('stage');
-    const app = getApp();
-    if (app?.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-    }
     for (const node of nodes) {
-      stage?.update({
+      stage.value?.update({
         config: cloneDeep(node),
         parentId: editorService.getParentById(node.id)?.id,
         root: cloneDeep(root),
@@ -348,8 +360,18 @@ export const initServiceEvents = (
     }
   };
 
+  const depCollectedHandler = () => {
+    const root = editorService.get('root');
+    if (!root) return;
+    const app = getApp();
+    if (app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+    }
+  };
+
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
+  depService.on('collected', depCollectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -380,10 +402,39 @@ export const initServiceEvents = (
   };
 
   // 节点更新，收集依赖
-  const nodeUpdateHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true).then(() => {
-      afterUpdateNodes(nodes);
+  // 仅当修改到数据源相关的才收集
+  const nodeUpdateHandler = (data: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]) => {
+    const needRecollectNodes: MNode[] = [];
+    const normalNodes: MNode[] = [];
+    data.forEach(({ newNode, oldNode, changeRecords }) => {
+      if (changeRecords?.length) {
+        for (const record of changeRecords) {
+          // NODE_CONDS_KEY为显示条件key
+          if (
+            !record.propPath ||
+            new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) ||
+            new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) ||
+            record.propPath === NODE_CONDS_KEY ||
+            isValueIncludeDataSource(record.value)
+          ) {
+            needRecollectNodes.push(newNode);
+            break;
+          }
+        }
+      } else if (isIncludeDataSource(newNode, oldNode)) {
+        needRecollectNodes.push(newNode);
+      } else {
+        normalNodes.push(newNode);
+      }
     });
+
+    if (needRecollectNodes.length) {
+      collectIdle(needRecollectNodes, true).then(() => {
+        afterUpdateNodes(needRecollectNodes);
+      });
+    } else if (normalNodes.length) {
+      afterUpdateNodes(normalNodes);
+    }
   };
 
   // 节点删除，清除对齐的依赖收集
@@ -425,14 +476,41 @@ export const initServiceEvents = (
     getApp()?.dataSourceManager?.addDataSource(config);
   };
 
-  const dataSourceUpdateHandler = (config: DataSourceSchema) => {
+  const dataSourceUpdateHandler = (config: DataSourceSchema, { changeRecords }: { changeRecords: ChangeRecord[] }) => {
+    let needRecollectDep = false;
+    for (const changeRecord of changeRecords) {
+      if (!changeRecord.propPath) {
+        continue;
+      }
+
+      needRecollectDep =
+        changeRecord.propPath === 'fields' ||
+        changeRecord.propPath === 'methods' ||
+        /fields.(\d)+.name/.test(changeRecord.propPath) ||
+        /fields.(\d)+$/.test(changeRecord.propPath) ||
+        /methods.(\d)+.name/.test(changeRecord.propPath) ||
+        /methods.(\d)+$/.test(changeRecord.propPath);
+
+      if (needRecollectDep) {
+        break;
+      }
+    }
+
     const root = editorService.get('root');
-    removeDataSourceTarget(config.id);
-    initDataSourceDepTarget(config);
+    if (needRecollectDep) {
+      if (Array.isArray(root?.items)) {
+        depService.clearIdleTasks();
 
-    collectIdle(root?.items || [], true).then(() => {
-      updateDataSourceSchema(root?.items || [], true);
-    });
+        removeDataSourceTarget(config.id);
+        initDataSourceDepTarget(config);
+
+        collectIdle(root.items, true).then(() => {
+          updateDataSourceSchema(root?.items || [], true);
+        });
+      }
+    } else if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
   };
 
   const removeDataSourceTarget = (id: string) => {
@@ -459,6 +537,7 @@ export const initServiceEvents = (
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
+    depService.off('collected', depCollectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/layouts/Framework.vue

@@ -11,8 +11,6 @@
     </slot>
 
     <SplitView
-      v-loading="stageLoading"
-      element-loading-text="Runtime 加载中..."
       v-else
       ref="splitView"
       class="m-editor-content"
@@ -102,7 +100,6 @@ const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
-const stageLoading = computed(() => editorService?.get('stageLoading') || false);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';

package/src/layouts/PropsPanel.vue

@@ -43,7 +43,7 @@ import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FormState, FormValue } from '@tmagic/form';
+import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -110,10 +110,10 @@ watchEffect(() => {
   }
 });
 
-const submit = async () => {
+const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const values = await configForm.value?.submitForm();
-    services?.editorService.update(values);
+    services?.editorService.update(values, { changeRecords: eventData.changeRecords });
   } catch (e: any) {
     emit('submit-error', e);
   }

package/src/layouts/page-bar/PageBar.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="m-editor-page-bar-tabs">
-    <PageBarScrollContainer :page-bar-sort-options="pageBarSortOptions" :length="list.length">
+    <PageBarScrollContainer
+      ref="pageBarScrollContainer"
+      :page-bar-sort-options="pageBarSortOptions"
+      :length="list.length"
+    >
       <template #prepend>
         <slot name="page-bar-add-button"><AddButton></AddButton></slot>
 
@@ -13,8 +17,9 @@
       <div
         v-for="item in list"
         class="m-editor-page-bar-item"
+        ref="pageBarItems"
         :key="item.id"
-        :page-id="item.id"
+        :data-page-id="item.id"
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item.id)"
       >
@@ -63,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
@@ -138,4 +143,42 @@ const copy = (node: MPage | MPageFragment) => {
 const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
+
+const pageBarScrollContainer = ref<InstanceType<typeof PageBarScrollContainer>>();
+const pageBarItems = ref<HTMLDivElement[]>();
+watch(page, (page) => {
+  if (
+    !page ||
+    !pageBarScrollContainer.value?.itemsContainerWidth ||
+    !pageBarItems.value ||
+    pageBarItems.value.length < 2
+  ) {
+    return;
+  }
+
+  const firstItem = pageBarItems.value[0];
+  const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+
+  if (page.id === firstItem.dataset.pageId) {
+    pageBarScrollContainer.value.scroll('start');
+  } else if (page.id === lastItem.dataset.pageId) {
+    pageBarScrollContainer.value.scroll('end');
+  } else {
+    const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page.id);
+    if (!pageItem) {
+      return;
+    }
+
+    const pageItemRect = pageItem.getBoundingClientRect();
+    const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
+    const { itemsContainerWidth } = pageBarScrollContainer.value;
+
+    const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
+
+    const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+    if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
+      pageBarScrollContainer.value.scrollTo(left);
+    }
+  }
+});
 </script>

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
     <slot name="prepend"></slot>
-
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
-      <Icon :icon="ArrowLeftBold"></Icon>
+    <div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer">
+      <slot></slot>
     </div>
 
-    <div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
-      <slot></slot>
+    <div
+      v-if="canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon"
+      @click="scroll('left')"
+    >
+      <Icon :icon="ArrowLeftBold"></Icon>
     </div>
 
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+    <div
+      v-if="canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon"
+      @click="scroll('right')"
+    >
       <Icon :icon="ArrowRightBold"></Icon>
     </div>
   </div>
@@ -80,27 +87,34 @@ onBeforeUnmount(() => {
 let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-  if (!itemsContainer.value) return;
+  if (!itemsContainer.value || !canScroll.value) return;
 
   const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
-    translateLeft += 100;
-
-    if (translateLeft > 0) {
-      translateLeft = 0;
-    }
+    scrollTo(translateLeft + 200);
   } else if (type === 'right') {
-    translateLeft -= 100;
-
-    if (-translateLeft > maxScrollLeft) {
-      translateLeft = -maxScrollLeft;
-    }
+    scrollTo(translateLeft - 200);
   } else if (type === 'start') {
-    translateLeft = 0;
+    scrollTo(0);
   } else if (type === 'end') {
-    translateLeft = -maxScrollLeft;
+    scrollTo(-maxScrollLeft);
   }
+};
+
+const scrollTo = (value: number) => {
+  if (!itemsContainer.value || !canScroll.value) return;
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (value >= 0) {
+    value = 0;
+  }
+
+  if (-value > maxScrollLeft) {
+    value = -maxScrollLeft;
+  }
+
+  translateLeft = value;
 
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
@@ -110,11 +124,13 @@ watch(
   (length = 0, preLength = 0) => {
     setTimeout(() => {
       setCanScroll();
-      if (length < preLength) {
-        scroll('start');
-      } else {
-        scroll('end');
-      }
+      nextTick(() => {
+        if (length < preLength || preLength === 0) {
+          scroll('start');
+        } else {
+          scroll('end');
+        }
+      });
       if (length > 1) {
         const el = document.querySelector('.m-editor-page-bar-items') as HTMLElement;
         let beforeDragList: Id[] = [];
@@ -150,4 +166,13 @@ watch(
     immediate: true,
   },
 );
+
+defineExpose({
+  itemsContainerWidth,
+  scroll,
+  scrollTo,
+  getTranslateLeft() {
+    return translateLeft;
+  },
+});
 </script>

package/src/layouts/page-bar/PageList.vue

@@ -18,6 +18,7 @@
             :data="{
               type: 'button',
               text: item.devconfig?.tabName || item.name || item.id,
+              className: item.id === page?.id ? 'active' : '',
               handler: () => switchPage(item.id),
             }"
             :key="index"
@@ -55,7 +56,8 @@ const uiService = services?.uiService;
 const editorService = services?.editorService;
 
 const showPageListButton = computed(() => uiService?.get('showPageListButton'));
-const switchPage = (id: Id) => {
-  editorService?.select(id);
+const page = computed(() => editorService?.get('page'));
+const switchPage = async (id: Id) => {
+  await editorService?.select(id);
 };
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -19,6 +19,7 @@
     </div>
     <div
       class="m-editor-sidebar-content"
+      :class="{ 'm-editor-dep-collecting': collecting }"
       v-for="(config, index) in sideBarItems"
       :key="config.$key ?? index"
       v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
@@ -197,6 +198,8 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 
+const collecting = computed(() => services?.depService.get('collecting'));
+
 const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
 const { height: editorContentHeight } = useEditorContentHeight();
 const columnLeftHeight = ref(0);

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -19,6 +19,9 @@
     </template>
 
     <template #tree-node-tool="{ data }">
+      <TMagicTag v-if="collecting && data.type === 'code'" type="info" size="small" style="margin-right: 5px"
+        >依赖收集中</TMagicTag
+      >
       <TMagicTooltip v-if="data.type === 'code'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -36,7 +39,7 @@ import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import type { Id, MNode } from '@tmagic/core';
 import { DepTargetType } from '@tmagic/core';
-import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import { tMagicMessage, tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -64,6 +67,8 @@ const emit = defineEmits<{
 const services = inject<Services>('services');
 const { codeBlockService, depService, editorService } = services || {};
 
+const collecting = computed(() => depService?.get('collecting'));
+
 // 代码块列表
 const codeList = computed<TreeNodeData[]>(() =>
   Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref, watchEffect } from 'vue';
 
-import { DataSourceSchema } from '@tmagic/core';
+import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import { FormConfig, MFormBox } from '@tmagic/form';
+import { type ContainerChangeEventData, type FormConfig, MFormBox } from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
@@ -46,7 +46,9 @@ const props = defineProps<{
 const boxVisible = defineModel<boolean>('visible', { default: false });
 const width = defineModel<number>('width', { default: 670 });
 
-const emit = defineEmits(['submit']);
+const emit = defineEmits<{
+  submit: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -63,8 +65,8 @@ watchEffect(() => {
   dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
 });
 
-const submitHandler = (values: any) => {
-  emit('submit', values);
+const submitHandler = (values: any, data: ContainerChangeEventData) => {
+  emit('submit', values, data);
 };
 
 const errorHandler = (error: any) => {

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -18,6 +18,9 @@
       </div>
     </template>
     <template #tree-node-tool="{ data }">
+      <TMagicTag v-if="collecting && data.type === 'ds'" type="info" size="small" style="margin-right: 5px"
+        >依赖收集中</TMagicTag
+      >
       <TMagicTooltip v-if="data.type === 'ds'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -34,7 +37,7 @@ import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
-import { tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import { tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -60,6 +63,8 @@ const emit = defineEmits<{
 
 const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
 
+const collecting = computed(() => depService?.get('collecting'));
+
 const editable = computed(() => dataSourceService?.get('editable') ?? true);
 
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);

package/src/layouts/workspace/Workspace.vue

@@ -4,7 +4,8 @@
 
     <slot name="stage">
       <MagicStage
-        v-if="page"
+        v-if="page && (stageOptions?.render || stageOptions?.runtimeUrl)"
+        :stage-options="stageOptions"
         :disabled-stage-overlay="disabledStageOverlay"
         :stage-content-menu="stageContentMenu"
         :custom-content-menu="customContentMenu"
@@ -18,7 +19,7 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@editor/type';
+import type { MenuButton, MenuComponent, Services, StageOptions, WorkspaceSlots } from '@editor/type';
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
@@ -40,6 +41,8 @@ withDefaults(
   },
 );
 
+const stageOptions = inject<StageOptions>('stageOptions');
+
 const services = inject<Services>('services');
 
 const page = computed(() => services?.editorService.get('page'));

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

@@ -3,6 +3,8 @@
     class="m-editor-stage"
     ref="stageWrap"
     tabindex="-1"
+    v-loading="stageLoading"
+    element-loading-text="Runtime 加载中..."
     :width="stageRect?.width"
     :height="stageRect?.height"
     :wrap-width="stageContainerRect?.width"
@@ -62,8 +64,9 @@ defineOptions({
   name: 'MEditorStage',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    stageOptions: StageOptions;
     stageContentMenu: (MenuButton | MenuComponent)[];
     disabledStageOverlay?: boolean;
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
@@ -77,7 +80,8 @@ let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
 const services = inject<Services>('services');
-const stageOptions = inject<StageOptions>('stageOptions');
+
+const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
 const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
 const stageContainer = ref<HTMLDivElement>();
@@ -96,9 +100,9 @@ watchEffect(() => {
   if (stage || !page.value) return;
 
   if (!stageContainer.value) return;
-  if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
+  if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
 
-  stage = useStage(stageOptions);
+  stage = useStage(props.stageOptions);
 
   stage.on('select', () => {
     stageWrap.value?.container?.focus();
@@ -125,6 +129,7 @@ watchEffect(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
+  services?.editorService.set('stage', null);
 });
 
 watch(zoom, (zoom) => {
@@ -212,7 +217,9 @@ const dropHandler = async (e: DragEvent) => {
   e.preventDefault();
 
   const doc = stage?.renderer?.contentWindow?.document;
-  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(
+    `.${props.stageOptions?.containerHighlightClassName}`,
+  );
 
   let parent: MContainer | undefined | null = page.value;
   const parentId = getIdFromEl()(parentEl);