@tmagic/editor 1.4.6 → 1.4.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.6",
+  "version": "1.4.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -22,6 +22,10 @@
     },
     "./*": "./*"
   },
+  "files": [
+    "dist",
+    "types"
+  ],
   "license": "Apache-2.0",
   "engines": {
     "node": ">=18"
@@ -50,8 +54,8 @@
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "@tmagic/dep": "1.4.6",
-    "@tmagic/table": "1.4.6"
+    "@tmagic/dep": "1.4.8",
+    "@tmagic/table": "1.4.8"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -65,19 +69,19 @@
     "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.2.11",
-    "vue-tsc": "^2.0.16"
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.19"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/form": "1.4.6",
-    "@tmagic/schema": "1.4.6",
-    "@tmagic/design": "1.4.6",
-    "@tmagic/core": "1.4.6",
-    "@tmagic/utils": "1.4.6",
-    "@tmagic/stage": "1.4.6"
+    "@tmagic/core": "1.4.8",
+    "@tmagic/design": "1.4.8",
+    "@tmagic/form": "1.4.8",
+    "@tmagic/stage": "1.4.8",
+    "@tmagic/schema": "1.4.8",
+    "@tmagic/utils": "1.4.8"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/types/editorProps.d.ts

@@ -1,5 +1,4 @@
 import type { EventOption } from '@tmagic/core';
-import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, { ContainerHighlightType, type CustomizeMoveableOptionsCallbackConfig, type GuidesOptions, type MoveableOptions, RenderType, type UpdateDragEl } from '@tmagic/stage';
@@ -60,12 +59,6 @@ export interface EditorProps {
     };
     /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
     disabledDragStart?: boolean;
-    /** 自定义依赖收集器，复制组件时会将关联组件一并复制 */
-    collectorOptions?: CustomTargetOptions;
-    /** 自定义依赖收集器，复制组件时会将关联代码块一并复制 */
-    collectorOptionsForCode?: CustomTargetOptions;
-    /** 自定义依赖收集器，复制组件时会将关联数据源一并复制 */
-    collectorOptionsForDataSource?: CustomTargetOptions;
     /** 标尺配置 */
     guidesOptions?: Partial<GuidesOptions>;
     /** 禁止多选 */

package/types/layouts/PropsPanel.vue.d.ts

@@ -5,9 +5,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
 }>, {
     configForm: import("vue").Ref<import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-        size: {
-            type: import("vue").PropType<"default" | "small" | "large">;
-        };
         popperClass: {
             type: import("vue").PropType<string>;
         };
@@ -15,6 +12,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<string>;
             default: string;
         };
+        size: {
+            type: import("vue").PropType<"default" | "small" | "large">;
+        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -83,9 +83,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         "field-input": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
     }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-        size: {
-            type: import("vue").PropType<"default" | "small" | "large">;
-        };
         popperClass: {
             type: import("vue").PropType<string>;
         };
@@ -93,6 +90,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<string>;
             default: string;
         };
+        size: {
+            type: import("vue").PropType<"default" | "small" | "large">;
+        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -168,9 +168,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
-        size: {
-            type: import("vue").PropType<"default" | "small" | "large">;
-        };
         popperClass: {
             type: import("vue").PropType<string>;
         };
@@ -178,6 +175,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<string>;
             default: string;
         };
+        size: {
+            type: import("vue").PropType<"default" | "small" | "large">;
+        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;

package/types/layouts/sidebar/layer/use-click.d.ts

@@ -60,5 +60,5 @@ export declare const useClick: (services: Services | undefined, isCtrlKeyDown: R
     }> | undefined>;
     nodeClickHandler: (event: MouseEvent, data: TreeNodeData) => void;
     nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData): void;
-    highlightHandler: import("lodash-es").DebouncedFunc<(event: MouseEvent, data: TreeNodeData) => void>;
+    highlightHandler: (event: MouseEvent, data: TreeNodeData) => void;
 };

package/types/services/codeBlock.d.ts

@@ -1,4 +1,5 @@
 import type { Writable } from 'type-fest';
+import { type TargetOptions } from '@tmagic/dep';
 import type { ColumnConfig } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
 import type { AsyncHookPlugin } from '../type';
@@ -114,7 +115,7 @@ declare class CodeBlock extends BaseService {
      * @param config 组件节点配置
      * @returns
      */
-    copyWithRelated(config: MNode | MNode[]): void;
+    copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void;
     /**
      * 粘贴代码块
      * @returns

package/types/services/dataSource.d.ts

@@ -1,5 +1,6 @@
 import { Writable } from 'type-fest';
 import type { EventOption } from '@tmagic/core';
+import { type TargetOptions } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema, MNode } from '@tmagic/schema';
 import type { DatasourceTypeOption, SyncHookPlugin } from '../type';
@@ -55,7 +56,7 @@ declare class DataSource extends BaseService {
      * @param config 组件节点配置
      * @returns
      */
-    copyWithRelated(config: MNode | MNode[]): void;
+    copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void;
     /**
      * 粘贴数据源
      * @returns

package/types/services/dep.d.ts

@@ -1,6 +1,11 @@
-import { DepTargetType, type Target } from '@tmagic/dep';
+import { type DepExtendedData, DepTargetType, type Target } from '@tmagic/dep';
 import type { Id, MNode } from '@tmagic/schema';
 import BaseService from './BaseService';
+export interface DepEvents {
+    'add-target': [target: Target];
+    'remove-target': [id: string | number];
+    collected: [nodes: MNode[], deep: boolean];
+}
 declare class Dep extends BaseService {
     private watcher;
     removeTargets(type?: string): void;
@@ -12,11 +17,16 @@ declare class Dep extends BaseService {
     addTarget(target: Target): void;
     removeTarget(id: Id, type?: string): void;
     clearTargets(): void;
-    collect(nodes: MNode[], deep?: boolean, type?: DepTargetType): void;
+    collect(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType): void;
+    collectIdle(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType): void;
+    collectNode(node: MNode, target: Target, depExtendedData?: DepExtendedData, deep?: boolean): void;
     clear(nodes?: MNode[]): void;
     clearByType(type: DepTargetType, nodes?: MNode[]): void;
     hasTarget(id: Id, type?: string): boolean;
     hasSpecifiedTypeTarget(type?: string): boolean;
+    on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    once<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param): boolean;
 }
 export type DepService = Dep;
 declare const _default: Dep;

package/types/services/editor.d.ts

@@ -1,8 +1,23 @@
 import { Writable } from 'type-fest';
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+import { type TargetOptions } from '@tmagic/dep';
+import type { Id, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import BaseService from '../services/BaseService';
 import type { AddMNode, AsyncHookPlugin, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '../type';
 import { LayerOffset, Layout } from '../type';
+export interface EditorEvents {
+    'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
+    select: [node: MNode | null];
+    add: [nodes: MNode[]];
+    remove: [nodes: MNode[]];
+    update: [nodes: MNode[]];
+    'move-layer': [offset: number | LayerOffset];
+    'drag-to': [data: {
+        targetIndex: number;
+        configs: MNode | MNode[];
+        targetParent: MContainer;
+    }];
+    'history-change': [data: MPage | MPageFragment];
+}
 declare const canUsePluginMethods: {
     async: readonly ["getLayout", "highlight", "select", "multiSelect", "doAdd", "add", "doRemove", "remove", "doUpdate", "update", "sort", "copy", "paste", "doPaste", "doAlignCenter", "alignCenter", "moveLayer", "moveToContainer", "dragTo", "undo", "redo", "move"];
     sync: never[];
@@ -109,13 +124,13 @@ declare class Editor extends BaseService {
      * @param config 组件节点配置
      * @returns
      */
-    copyWithRelated(config: MNode | MNode[]): void;
+    copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void;
     /**
      * 从localStorage中获取节点，然后添加到当前容器中
      * @param position 粘贴的坐标
      * @returns 添加后的组件节点配置
      */
-    paste(position?: PastePosition): Promise<MNode | MNode[] | void>;
+    paste(position?: PastePosition, collectorOptions?: TargetOptions): Promise<MNode | MNode[] | void>;
     doPaste(config: MNode[], position?: PastePosition): Promise<MNode[]>;
     doAlignCenter(config: MNode): Promise<MNode>;
     /**
@@ -135,7 +150,7 @@ declare class Editor extends BaseService {
      * @param targetId 容器ID
      */
     moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined>;
-    dragTo(config: MNode, targetParent: MContainer, targetIndex: number): Promise<void>;
+    dragTo(config: MNode | MNode[], targetParent: MContainer, targetIndex: number): Promise<void>;
     /**
      * 撤销当前操作
      * @returns 上一次数据
@@ -151,6 +166,9 @@ declare class Editor extends BaseService {
     destroy(): void;
     resetModifiedNodeId(): void;
     usePlugin(options: AsyncHookPlugin<AsyncMethodName, Editor>): void;
+    on<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    once<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, ...args: Param): boolean;
     private addModifiedNodeId;
     private pushHistoryState;
     private changeHistoryState;

package/types/services/props.d.ts

@@ -1,7 +1,8 @@
 import { Writable } from 'type-fest';
+import { type TargetOptions } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
-import type { AsyncHookPlugin, SyncHookPlugin } from '../type';
+import type { AsyncHookPlugin, PropsFormConfigFunction, PropsFormValueFunction, SyncHookPlugin } from '../type';
 import BaseService from './BaseService';
 declare const canUsePluginMethods: {
     async: readonly ["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue", "fillConfig", "getDefaultPropsValue"];
@@ -12,22 +13,22 @@ type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 declare class Props extends BaseService {
     private state;
     constructor();
-    setPropsConfigs(configs: Record<string, FormConfig>): void;
+    setPropsConfigs(configs: Record<string, FormConfig | PropsFormConfigFunction>): void;
     fillConfig(config: FormConfig, labelWidth?: string): Promise<FormConfig>;
-    setPropsConfig(type: string, config: FormConfig): Promise<void>;
+    setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction): Promise<void>;
     /**
      * 获取指点类型的组件属性表单配置
      * @param type 组件类型
      * @returns 组件属性表单配置
      */
     getPropsConfig(type: string): Promise<FormConfig>;
-    setPropsValues(values: Record<string, Partial<MNode>>): void;
+    setPropsValues(values: Record<string, Partial<MNode> | PropsFormValueFunction>): void;
     /**
      * 为指点类型组件设置组件初始值
      * @param type 组件类型
      * @param value 组件初始值
      */
-    setPropsValue(type: string, value: Partial<MNode>): Promise<void>;
+    setPropsValue(type: string, value: Partial<MNode> | PropsFormValueFunction): Promise<void>;
     /**
      * 获取指定类型的组件初始值
      * @param type 组件类型
@@ -66,7 +67,7 @@ declare class Props extends BaseService {
      * @param originConfigs 原组件配置
      * @param targetConfigs 待替换的组件配置
      */
-    replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]): void;
+    replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[], collectorOptions: TargetOptions): void;
     /**
      * 清除setNewItemId前后映射关系
      */

package/types/type.d.ts

@@ -617,3 +617,9 @@ export interface EventBus extends EventEmitter {
     on<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, listener: (...args: Param) => void): this;
     emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
 }
+export type PropsFormConfigFunction = (data: {
+    editorService: EditorService;
+}) => FormConfig;
+export type PropsFormValueFunction = (data: {
+    editorService: EditorService;
+}) => Partial<MNode>;

package/types/utils/editor.d.ts

@@ -56,3 +56,4 @@ export interface NodeItem {
     [key: string]: any;
 }
 export declare const traverseNode: <T extends NodeItem = NodeItem>(node: T, cb: (node: T, parents: T[]) => void, parents?: T[]) => void;
+export declare const moveItemsInContainer: (sourceIndices: number[], parent: MContainer, targetIndex: number) => void;

package/types/utils/idle-task.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+export interface IdleTaskEvents {
+    finish: [];
+}
+export declare class IdleTask<T = any> extends EventEmitter {
+    private taskList;
+    private taskHandle;
+    enqueueTask(taskHandler: (data: T) => void, taskData: T): void;
+    on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    once<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(eventName: Name, ...args: Param): boolean;
+    private runTaskQueue;
+}

package/types/utils/operator.d.ts

@@ -6,14 +6,14 @@ import type { AddMNode, PastePosition } from '../type';
  * @param config 待粘贴的元素配置(复制时保存的那份配置)
  * @returns
  */
-export declare const beforePaste: (position: PastePosition, config: MNode[]) => MNode[];
+export declare const beforePaste: (position: PastePosition, config: MNode[], doc?: Document) => MNode[];
 /**
  * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
  * @param position PastePosition 粘贴时相对于画布的坐标
  * @param id 元素id
  * @returns PastePosition 转换后的坐标
  */
-export declare const getPositionInContainer: (position: PastePosition | undefined, id: Id) => {
+export declare const getPositionInContainer: (position: PastePosition | undefined, id: Id, doc?: Document) => {
     left: number;
     top: number;
 };

package/src/Editor.vue

@@ -1,211 +0,0 @@
-<template>
-  <Framework :disabled-page-fragment="disabledPageFragment">
-    <template #header>
-      <slot name="header"></slot>
-    </template>
-
-    <template #nav>
-      <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
-    </template>
-
-    <template #content-before>
-      <slot name="content-before"></slot>
-    </template>
-
-    <template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
-
-    <template #sidebar>
-      <slot name="sidebar" :editorService="editorService">
-        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
-          <template #layer-panel-header>
-            <slot name="layer-panel-header"></slot>
-          </template>
-
-          <template #layer-node-content="{ data }">
-            <slot name="layer-node-content" :data="data"></slot>
-          </template>
-
-          <template #layer-node-label="{ data }">
-            <slot name="layer-node-label" :data="data"></slot>
-          </template>
-
-          <template #layer-node-tool="{ data }">
-            <slot name="layer-node-tool" :data="data"></slot>
-          </template>
-
-          <template #component-list-panel-header>
-            <slot name="component-list-panel-header"></slot>
-          </template>
-
-          <template #component-list-item="{ component }">
-            <slot name="component-list-item" :component="component"></slot>
-          </template>
-
-          <template #code-block-panel-header>
-            <slot name="code-block-panel-header"></slot>
-          </template>
-
-          <template #code-block-panel-tool="{ id, data }">
-            <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
-          </template>
-
-          <template #code-block-panel-search>
-            <slot name="code-block-panel-search"></slot>
-          </template>
-
-          <template #data-source-panel-tool="{ data }">
-            <slot name="data-source-panel-tool" :data="data"></slot>
-          </template>
-
-          <template #data-source-panel-search>
-            <slot name="data-source-panel-search"></slot>
-          </template>
-        </Sidebar>
-      </slot>
-    </template>
-
-    <template #workspace>
-      <slot name="workspace" :editorService="editorService">
-        <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>
-      </slot>
-    </template>
-
-    <template #props-panel>
-      <slot name="props-panel">
-        <PropsPanel
-          :extend-state="extendFormState"
-          :disabled-show-src="disabledShowSrc"
-          @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
-          @form-error="(e: any) => $emit('props-form-error', e)"
-          @submit-error="(e: any) => $emit('props-submit-error', e)"
-        >
-          <template #props-panel-header>
-            <slot name="props-panel-header"></slot>
-          </template>
-        </PropsPanel>
-      </slot>
-    </template>
-
-    <template #empty><slot name="empty" :editorService="editorService"></slot></template>
-
-    <template #content-after>
-      <slot name="content-after"></slot>
-    </template>
-
-    <template #footer>
-      <slot name="footer"></slot>
-    </template>
-
-    <template #page-bar><slot name="page-bar"></slot></template>
-    <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
-    <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
-  </Framework>
-</template>
-
-<script lang="ts" setup>
-import { EventEmitter } from 'events';
-
-import { provide } from 'vue';
-
-import type { MApp } from '@tmagic/schema';
-
-import Framework from './layouts/Framework.vue';
-import TMagicNavMenu from './layouts/NavMenu.vue';
-import PropsPanel from './layouts/PropsPanel.vue';
-import Sidebar from './layouts/sidebar/Sidebar.vue';
-import Workspace from './layouts/workspace/Workspace.vue';
-import codeBlockService from './services/codeBlock';
-import componentListService from './services/componentList';
-import dataSourceService from './services/dataSource';
-import depService from './services/dep';
-import editorService, { type EditorService } from './services/editor';
-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';
-import { defaultEditorProps, EditorProps } from './editorProps';
-import { initServiceEvents, initServiceState } from './initService';
-import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
-
-defineSlots<
-  FrameworkSlots &
-    WorkspaceSlots &
-    SidebarSlots &
-    PropsPanelSlots & {
-      workspace(props: { editorService: EditorService }): any;
-      'workspace-content'(props: { editorService: EditorService }): any;
-    }
->();
-
-defineOptions({
-  name: 'MEditor',
-});
-
-const emit = defineEmits<{
-  'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
-  'update:modelValue': [value: MApp | null];
-  'props-form-error': [e: any];
-  'props-submit-error': [e: any];
-}>();
-
-const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
-
-const services: Services = {
-  componentListService,
-  eventsService,
-  historyService,
-  propsService,
-  editorService,
-  uiService,
-  storageService,
-  codeBlockService,
-  depService,
-  dataSourceService,
-  keybindingService,
-  stageOverlayService,
-};
-
-initServiceEvents(props, emit, services);
-initServiceState(props, services);
-keybindingService.register(keybindingConfig);
-keybindingService.registerEl('global');
-
-const stageOptions = {
-  runtimeUrl: props.runtimeUrl,
-  autoScrollIntoView: props.autoScrollIntoView,
-  render: props.render,
-  moveableOptions: props.moveableOptions,
-  canSelect: props.canSelect,
-  updateDragEl: props.updateDragEl,
-  isContainer: props.isContainer,
-  containerHighlightClassName: props.containerHighlightClassName,
-  containerHighlightDuration: props.containerHighlightDuration,
-  containerHighlightType: props.containerHighlightType,
-  disabledDragStart: props.disabledDragStart,
-  renderType: props.renderType,
-  guidesOptions: props.guidesOptions,
-  disabledMultiSelect: props.disabledMultiSelect,
-};
-
-stageOverlayService.set('stageOptions', stageOptions);
-
-provide('services', services);
-
-provide('codeOptions', props.codeOptions);
-provide('stageOptions', stageOptions);
-
-provide<EventBus>('eventBus', new EventEmitter());
-
-defineExpose(services);
-</script>