@tmagic/editor 1.3.11 → 1.3.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.11",
+  "version": "1.3.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.11",
-    "@tmagic/dep": "1.3.11",
-    "@tmagic/design": "1.3.11",
-    "@tmagic/form": "1.3.11",
-    "@tmagic/schema": "1.3.11",
-    "@tmagic/stage": "1.3.11",
-    "@tmagic/table": "1.3.11",
-    "@tmagic/utils": "1.3.11",
+    "@tmagic/core": "1.3.13",
+    "@tmagic/dep": "1.3.13",
+    "@tmagic/design": "1.3.13",
+    "@tmagic/form": "1.3.13",
+    "@tmagic/schema": "1.3.13",
+    "@tmagic/stage": "1.3.13",
+    "@tmagic/table": "1.3.13",
+    "@tmagic/utils": "1.3.13",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.11",
-    "@tmagic/form": "1.3.11",
+    "@tmagic/design": "1.3.13",
+    "@tmagic/form": "1.3.13",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/Editor.vue

@@ -58,7 +58,11 @@
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <Workspace :stage-content-menu="stageContentMenu" :custom-content-menu="customContentMenu">
+        <Workspace
+          :disabled-stage-overlay="disabledStageOverlay"
+          :stage-content-menu="stageContentMenu"
+          :custom-content-menu="customContentMenu"
+        >
           <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
         </Workspace>
@@ -97,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { provide, reactive } from 'vue';
+import { provide } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
 
@@ -115,6 +119,7 @@ import eventsService from './services/events';
 import historyService from './services/history';
 import keybindingService from './services/keybinding';
 import propsService from './services/props';
+import stageOverlayService from './services/stageOverlay';
 import storageService from './services/storage';
 import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
@@ -157,6 +162,7 @@ const services: Services = {
   depService,
   dataSourceService,
   keybindingService,
+  stageOverlayService,
 };
 
 initServiceEvents(props, emit, services);
@@ -164,28 +170,29 @@ 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);
 
 defineExpose(services);
 </script>

package/src/components/SplitView.vue

@@ -27,7 +27,7 @@ import { OnDrag } from 'gesto';
 import Resizer from './Resizer.vue';
 
 defineOptions({
-  name: 'MEditorLayout',
+  name: 'MEditorSplitView',
 });
 
 const emit = defineEmits(['update:left', 'change', 'update:right']);

package/src/editorProps.ts

@@ -37,8 +37,6 @@ export interface EditorProps {
   layerContentMenu?: (MenuButton | MenuComponent)[];
   /** 画布右键菜单 */
   stageContentMenu?: (MenuButton | MenuComponent)[];
-  /** 中间工作区域中画布渲染的内容 */
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 中间工作区域中画布通过iframe渲染时的页面url */
   runtimeUrl?: string;
   /** 是用iframe渲染还是直接渲染 */
@@ -60,16 +58,18 @@ export interface EditorProps {
   moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   /** 编辑器初始化时默认选中的组件ID */
   defaultSelected?: Id;
-  canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
-  isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+  /** 拖入画布中容器时，识别到容器后给容器根dom加上的class */
   containerHighlightClassName?: string;
+  /** 拖入画布中容器时，悬停识别容器的时间 */
   containerHighlightDuration?: number;
+  /** 拖入画布中容器时，识别容器的操作类型 */
   containerHighlightType?: ContainerHighlightType;
+  /** 画布大小 */
   stageRect?: StageRect;
+  /** monaco editor 的配置 */
   codeOptions?: { [key: string]: any };
-  updateDragEl?: UpdateDragEl;
+  /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
   disabledDragStart?: boolean;
-  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
   collectorOptions?: CustomTargetOptions;
   /** 标尺配置 */
@@ -78,10 +78,29 @@ export interface EditorProps {
   disabledMultiSelect?: boolean;
   /** 禁用页面片 */
   disabledPageFragment?: boolean;
+  /** 禁用双击在浮层中单独编辑选中组件 */
+  disabledStageOverlay?: boolean;
+  /** 中间工作区域中画布渲染的内容 */
+  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
+  updateDragEl?: UpdateDragEl;
+  /** 用于设置画布上的dom是否可以被选中 */
+  canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+  /** 用于设置画布上的dom是否可以被拖入其中 */
+  isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+  /** 用于自定义组件树与画布的右键菜单 */
   customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }
 
 export 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: [] }),
@@ -94,11 +113,5 @@ export const defaultEditorProps = {
   datasourceConfigs: () => ({}),
   canSelect: (el: HTMLElement) => Boolean(el.id),
   isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
-  containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
-  containerHighlightDuration: 800,
-  containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
-  renderType: RenderType.IFRAME,
-  disabledMultiSelect: false,
-  disabledPageFragment: false,
 };

package/src/fields/UISelect.vue

@@ -106,16 +106,19 @@ const deleteHandler = () => {
 const selectNode = async (id: Id) => {
   await services?.editorService.select(id);
   services?.editorService.get('stage')?.select(id);
+  services?.stageOverlayService.get('stage')?.select(id);
 };
 
 const highlight = throttle((id: 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();
 };
 </script>
 

package/src/hooks/use-stage.ts

@@ -33,7 +33,9 @@ export const useStage = (stageOptions: 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);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
       if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
         document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));

package/src/index.ts

@@ -54,6 +54,7 @@ export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as dataSourceService } from './services/dataSource';
+export { default as stageOverlayService } from './services/stageOverlay';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -108,8 +108,8 @@ const dragendHandler = () => {
     globalThis.clearTimeout(timeout);
     timeout = undefined;
   }
-  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;

package/src/layouts/sidebar/layer/use-click.ts

@@ -26,6 +26,7 @@ export const useClick = (
     } else {
       await services?.editorService.select(data);
       services?.editorService.get('stage')?.select(data.id);
+      services?.stageOverlayService.get('stage')?.select(data.id);
     }
   };
 
@@ -50,6 +51,7 @@ export const useClick = (
 
     await services?.editorService.multiSelect(newNodes);
     services?.editorService.get('stage')?.multiSelect(newNodes);
+    services?.stageOverlayService.get('stage')?.multiSelect(newNodes);
   };
 
   const throttleTime = 300;
@@ -62,6 +64,7 @@ export const useClick = (
   const highlight = (data: TreeNodeData) => {
     services?.editorService?.highlight(data);
     services?.editorService?.get('stage')?.highlight(data.id);
+    services?.stageOverlayService?.get('stage')?.highlight(data.id);
   };
 
   const nodeClickHandler = (event: MouseEvent, data: TreeNodeData) => {

package/src/layouts/workspace/Workspace.vue

@@ -5,6 +5,7 @@
     <slot name="stage">
       <MagicStage
         v-if="page"
+        :disabled-stage-overlay="disabledStageOverlay"
         :stage-content-menu="stageContentMenu"
         :custom-content-menu="customContentMenu"
       ></MagicStage>
@@ -28,10 +29,16 @@ defineOptions({
   name: 'MEditorWorkspace',
 });
 
-defineProps<{
-  stageContentMenu: (MenuButton | MenuComponent)[];
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-}>();
+withDefaults(
+  defineProps<{
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean;
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    disabledStageOverlay: false,
+  },
+);
 
 const services = inject<Services>('services');
 

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

@@ -26,7 +26,7 @@
     <NodeListMenu></NodeListMenu>
 
     <template #content>
-      <StageOverlay></StageOverlay>
+      <StageOverlay v-if="!disabledStageOverlay"></StageOverlay>
 
       <Teleport to="body">
         <ViewerMenu
@@ -61,10 +61,16 @@ defineOptions({
   name: 'MEditorStage',
 });
 
-defineProps<{
-  stageContentMenu: (MenuButton | MenuComponent)[];
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-}>();
+withDefaults(
+  defineProps<{
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean;
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    disabledStageOverlay: false,
+  },
+);
 
 let stage: StageCore | null = null;
 let runtime: Runtime | null = null;

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

@@ -1,16 +1,66 @@
 <template>
-  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlay">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="20" @click="closeOverlay"><CloseBold /></TMagicIcon>
-    <div ref="stageOverlay" class="m-editor-stage-overlay-container" @click.stop></div>
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="20" @click="closeOverlayHandler"><CloseBold /></TMagicIcon>
+    <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue';
 import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
-import { useStageOverlay } from '@editor/hooks/use-stage-overlay';
+import type { Services, StageOptions } from '@editor/type';
 
-const { stageOverlayVisible, stageOverlay, closeOverlay } = useStageOverlay();
+const services = inject<Services>('services');
+
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stageOverlay = ref<HTMLDivElement>();
+
+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, (stage) => {
+  if (stage) {
+    stage.on('dblclick', async (event: MouseEvent) => {
+      const el = await stage.actionManager.getElementFromPoint(event);
+      services?.stageOverlayService.openOverlay(el);
+    });
+  } else {
+    services?.stageOverlayService.closeOverlay();
+  }
+});
+
+watch(stageOverlay, (stageOverlay) => {
+  if (!services) return;
+
+  const subStage = services.stageOverlayService.createStage(stageOptions);
+  services?.stageOverlayService.set('stage', subStage);
+
+  if (stageOverlay && subStage) {
+    subStage.mount(stageOverlay);
+
+    const { mask, renderer } = subStage;
+
+    const { contentWindow } = renderer;
+    mask.showRule(false);
+
+    services?.stageOverlayService.updateOverlay();
+
+    contentWindow?.magic.onRuntimeReady({});
+  }
+});
+
+const closeOverlayHandler = () => {
+  services?.stageOverlayService.closeOverlay();
+};
 </script>

package/src/services/editor.ts

@@ -24,6 +24,8 @@ import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } fr
 import { NodeType } from '@tmagic/schema';
 import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
+import BaseService from '@editor/services//BaseService';
+import propsService from '@editor/services//props';
 import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
@@ -44,9 +46,6 @@ import {
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
-import BaseService from './BaseService';
-import propsService from './props';
-
 class Editor extends BaseService {
   public state: StoreState = reactive({
     root: null,
@@ -810,7 +809,7 @@ class Editor extends BaseService {
    * @param targetId 容器ID
    */
   public async moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined> {
-    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) as MContainer;
 
@@ -819,7 +818,7 @@ class Editor extends BaseService {
       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);
 
@@ -835,7 +834,7 @@ class Editor extends BaseService {
       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);
@@ -893,6 +892,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(parent.id);
 
     this.pushHistoryState();
+
+    this.emit('drag-to', { index, targetIndex, config, parent, targetParent });
   }
 
   /**

package/src/services/stageOverlay.ts

@@ -0,0 +1,204 @@
+import { reactive } from 'vue';
+
+import StageCore from '@tmagic/stage';
+
+import { useStage } from '@editor/hooks/use-stage';
+import BaseService from '@editor/services//BaseService';
+import editorService from '@editor/services//editor';
+import type { StageOptions, StageOverlayState } from '@editor/type';
+
+class StageOverlay extends BaseService {
+  private state: StageOverlayState = 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');
+  }
+
+  public get<K extends keyof StageOverlayState>(name: K): StageOverlayState[K] {
+    return this.state[name];
+  }
+
+  public set<K extends keyof StageOverlayState, T extends StageOverlayState[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public openOverlay(el: HTMLElement | undefined | null) {
+    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);
+  }
+
+  public 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);
+  }
+
+  public updateOverlay() {
+    const sourceEl = this.get('sourceEl');
+
+    if (!sourceEl) return;
+
+    const { scrollWidth, scrollHeight } = sourceEl;
+
+    this.set('wrapWidth', scrollWidth);
+    this.set('wrapHeight', scrollHeight);
+  }
+
+  public createStage(stageOptions: StageOptions = {}) {
+    return useStage({
+      ...stageOptions,
+      runtimeUrl: '',
+      autoScrollIntoView: false,
+      render: async (stage: StageCore) => {
+        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;
+      },
+    });
+  }
+
+  private createContentEl() {
+    const sourceEl = this.get('sourceEl');
+    if (!sourceEl) return;
+
+    const contentEl = sourceEl.cloneNode(true) as HTMLElement;
+    this.set('contentEl', contentEl);
+
+    contentEl.style.position = 'static';
+    contentEl.style.overflow = 'visible';
+  }
+
+  private 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);
+    }
+  }
+
+  private 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);
+    }
+  }
+
+  private updateHandler = () => {
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+
+      this.updateSelectStatus();
+    });
+  };
+
+  private addHandler = () => {
+    this.render();
+    this.updateOverlay();
+
+    this.updateSelectStatus();
+  };
+
+  private removeHandler = () => {
+    this.render();
+    this.updateOverlay();
+
+    this.updateSelectStatus();
+  };
+
+  private 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);
+    }
+  }
+}
+
+export type StageOverlayService = StageOverlay;
+
+export default new StageOverlay();