优化模块加载，解决循环依赖

src/comps/group-layer/GroupLayer.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import GroupLayerController from "./GroupLayerController";
 import {AbstractDefinition} from "../../framework/core/AbstractDefinition";
-import DesignerLoaderFactory from "../../designer/loader/DesignerLoaderFactory";
-import {DesignerMode, ILayerItem} from "../../designer/DesignerType";
+import {ILayerItem} from "../../designer/DesignerType";
 import layerManager from "../../designer/manager/LayerManager.ts";
+import editorDesignerLoader from "../../designer/loader/EditorDesignerLoader.ts";
 
 export interface GroupLayerStyleProps {
     children?: React.ReactNode;
@@ -24,7 +24,7 @@ export default class GroupLayer extends React.PureComponent<GroupLayerStyleProps
     componentDidMount(): void {
         const {layer} = this.props;
         const {elemConfigs, compController} = layerManager;
-        const groupDefinition: AbstractDefinition = DesignerLoaderFactory.getLoader(DesignerMode.EDIT).definitionMap['group'];
+        const groupDefinition: AbstractDefinition = editorDesignerLoader.definitionMap['group'];
         let config;
         if (layer.id! in compController!) {
             //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据

src/designer/Designer.tsx

@@ -1,6 +1,7 @@
-import DesignerLoaderFactory from "./loader/DesignerLoaderFactory";
+import editorDesignerLoader from "./loader/EditorDesignerLoader.ts";
 import {useEffect} from 'react';
 import './style/DesignerGlobalStyle.less';
+import '../designer/resource/font/FontGlobal.css';
 import DesignerLeft from "./left/DesignerLeft";
 import DesignerRight from "./right/DesignerRight";
 import DesignerFooter from "./footer/DesignerFooter";
@@ -11,8 +12,7 @@ import DesignerCanvas from "./canvas/DesignerCanvas";
 import {observer} from "mobx-react";
 import Loading from "../json-schema/ui/loading/Loading";
 import FrameLayout from "../json-schema/ui/frame-layout/FrameLayout";
-import {DesignerMode, SaveType} from "./DesignerType.ts";
-import '../designer/resource/font/FontGlobal.css';
+import {SaveType} from "./DesignerType.ts";
 import designerManager from "./manager/DesignerManager.ts";
 
 
@@ -87,7 +87,7 @@ const Designer = (props: DesignerProps) => {
     const {id, type} = props;
     useEffect(() => {
         //加载设计器
-        DesignerLoaderFactory.getLoader(DesignerMode.EDIT).load(id, type);
+        editorDesignerLoader.load(id, type);
         //绑定事件到dom元素
         bindEventToDom();
         return () => unbindEventToDom();//卸载dom元素上的事件

src/designer/blueprint/node/core/impl/layer/BPLayerNodeController.ts

@@ -6,8 +6,8 @@ import layerManager from "../../../../../manager/LayerManager.ts";
 import React from "react";
 import {ActionInfo} from "../../../../../../framework/core/AbstractDefinition";
 import BPExecutor from "../../../../core/BPExecutor";
-import DesignerLoaderFactory from "../../../../../../designer/loader/DesignerLoaderFactory";
-import {DesignerMode} from "../../../../../DesignerType.ts";
+import viewDesignerLoader from "../../../../../loader/ViewDesignerLoader.ts";
+import editorDesignerLoader from "../../../../../loader/EditorDesignerLoader.ts";
 
 export interface LayerNodeConfig extends NodeProps {
 
@@ -31,7 +31,9 @@ export default class BPLayerNodeController extends AbstractBPNodeController<Laye
             if (!compInstance)
                 return;
             const {type} = layerConfigs[nodeId];
-            const {definitionMap} = DesignerLoaderFactory.getLoader(DesignerMode.VIEW);
+            const {definitionMap} = viewDesignerLoader;
+            if (!definitionMap)
+                return;
             const actionList = definitionMap[type!].getActionList();
             //2.获取当前组件可执行的动作列表
             const action = actionList.find((action: ActionInfo) => action.id === apId);
@@ -53,7 +55,7 @@ export default class BPLayerNodeController extends AbstractBPNodeController<Laye
     getNodeInfo(nodeId: string): NodeInfoType | null {
         const {layerConfigs} = layerManager;
         const compLayout = layerConfigs[nodeId];
-        const {definitionMap} = DesignerLoaderFactory.getLoader(DesignerMode.EDIT);
+        const {definitionMap} = editorDesignerLoader;
         const output = definitionMap[compLayout.type!].getEventList().map((item) => {
             return {
                 id: nodeId + ':' + item.id + ':' + AnchorPointType.OUTPUT,

src/designer/left/compoent-lib/ComponentListStore.ts

@@ -1,7 +1,6 @@
 import {action, makeObservable, observable} from "mobx";
-import DesignerLoaderFactory from "../../loader/DesignerLoaderFactory";
 import {BaseInfoType} from "../../../framework/core/AbstractDefinition";
-import {DesignerMode} from "../../DesignerType.ts";
+import editorDesignerLoader from "../../loader/EditorDesignerLoader.ts";
 
 class ComponentListStore {
     constructor() {
@@ -35,7 +34,7 @@ class ComponentListStore {
 
     doInit = () => {
         const comps: Array<BaseInfoType> = [];
-        const {definitionMap} = DesignerLoaderFactory.getLoader(DesignerMode.EDIT);
+        const {definitionMap} = editorDesignerLoader;
         if (definitionMap) {
             Object.keys(definitionMap).forEach(key => {
                 const baseInfo = definitionMap[key].getBaseInfo();

src/designer/left/compoent-lib/list/CompList.tsx

@@ -2,9 +2,8 @@ import {Component} from 'react';
 import './CompList.less';
 import {observer} from "mobx-react";
 import eventOperateStore from "../../../operate-provider/EventOperateStore";
-import {DesignerMode, ILayerItem} from "../../../DesignerType";
+import {ILayerItem} from "../../../DesignerType";
 import Input from "../../../../json-schema/ui/input/Input";
-import DesignerLoaderFactory from "../../../loader/DesignerLoaderFactory";
 import IdGenerate from "../../../../utils/IdGenerate";
 import editorDesignerLoader from "../../../loader/EditorDesignerLoader";
 import componentListStore from "../ComponentListStore";
@@ -117,7 +116,7 @@ class CompList extends Component {
         for (let i = 0; i < compInfoArr.length; i++) {
             const compInfo: BaseInfoType = compInfoArr[i];
             const {compName, compKey} = compInfo;
-            const definition: AbstractDefinition = DesignerLoaderFactory.getLoader(DesignerMode.EDIT).definitionMap[compKey];
+            const definition: AbstractDefinition = editorDesignerLoader.definitionMap[compKey];
             const chartImg = definition.getChartImg();
             chartDom.push(
                 <div key={i + ''} className={'list-item droppable-element'} draggable={true}

src/designer/loader/DesignerLoaderFactory.ts

@@ -1,9 +1,10 @@
 import {AbstractDesignerLoader} from "./AbstractDesignerLoader";
 import {DesignerMode} from "../DesignerType";
-import editorDesignerLoader from "./EditorDesignerLoader";
-import viewDesignerLoader from "./ViewDesignerLoader";
 
-const loaderMap = new Map<DesignerMode, AbstractDesignerLoader>();
+const editorDesignerLoader = import('./EditorDesignerLoader').then(module => module.default);
+const viewDesignerLoader = import('./ViewDesignerLoader').then(module => module.default);
+
+const loaderMap = new Map<DesignerMode, Promise<AbstractDesignerLoader>>();
 loaderMap.set(DesignerMode.EDIT, editorDesignerLoader);
 loaderMap.set(DesignerMode.VIEW, viewDesignerLoader);
 
@@ -13,7 +14,7 @@ export default class DesignerLoaderFactory {
      * @param mode 当前模式 --> DesignerMode 存在编辑模式、预览模式两种。默认加载编辑模式
      * @returns 设计器加载器实例对象
      */
-    public static getLoader(mode?: DesignerMode): AbstractDesignerLoader {
+    public static async getLoader(mode?: DesignerMode): Promise<AbstractDesignerLoader> {
         if (mode && loaderMap.has(mode))
             return loaderMap.get(mode)!;
         else

src/designer/loader/EditorDesignerLoader.ts

@@ -1,8 +1,8 @@
-import {AbstractDesignerLoader} from "./AbstractDesignerLoader";
+import designerManager from "../manager/DesignerManager.ts";
 import operatorMap from "../../framework/operate";
 import {DesignerMode, SaveType} from "../DesignerType";
 import {globalMessage} from "../../framework/message/GlobalMessage.tsx";
-import designerManager from "../manager/DesignerManager.ts";
+import {AbstractDesignerLoader} from "./AbstractDesignerLoader";
 
 class EditorDesignerLoader extends AbstractDesignerLoader {
 

src/designer/loader/ViewDesignerLoader.ts

@@ -1,9 +1,9 @@
+import designerManager from "../manager/DesignerManager.ts";
 import {AbstractDesignerLoader} from "./AbstractDesignerLoader";
 import {DesignerMode, SaveType} from "../DesignerType";
 import operatorMap from "../../framework/operate";
 import {AbstractOperator} from "../../framework/operate/AbstractOperator";
 import {globalMessage} from "../../framework/message/GlobalMessage.tsx";
-import designerManager from "../manager/DesignerManager.ts";
 
 
 /**

src/designer/manager/LayerManager.ts

@@ -2,7 +2,6 @@ import {action, makeObservable, observable, runInAction, toJS} from "mobx";
 import {isEqual} from "lodash";
 import {ILayerItem, LayerManagerDataType, ThemeItemType,} from "../DesignerType.ts";
 import AbstractDesignerController from "../../framework/core/AbstractDesignerController.ts";
-import historyRecordOperateProxy from "../operate-provider/undo-redo/HistoryRecordOperateProxy.ts";
 import ObjectUtil from "../../utils/ObjectUtil.ts";
 import AbstractManager from "./core/AbstractManager.ts";
 
@@ -23,7 +22,6 @@ class LayerManager extends AbstractManager<LayerManagerDataType> {
             delItem: action,
             updateLayer: action,
             flashGlobalTheme: action,
-            copyItem: action,
             delLayout: action,
         });
     }
@@ -123,9 +121,6 @@ class LayerManager extends AbstractManager<LayerManagerDataType> {
         });
     };
 
-
-    copyItem = (ids: string[]) => historyRecordOperateProxy.doCopy(ids);
-
     /**
      * 获取store数据
      */

src/designer/operate-provider/hot-key/HotKeyImpl.ts

@@ -45,8 +45,7 @@ export const doCopy = () => {
     const {targetIds, setTargetIds} = eventOperateStore;
     if (!targetIds || targetIds.length === 0) return;
 
-    const {copyItem} = layerManager;
-    const newIds = copyItem(targetIds);
+    const newIds = historyRecordOperateProxy.doCopy(targetIds);
     //延迟10毫秒，等待dom元素渲染完毕后再获取。
     const tempTimer = setTimeout(() => {
         setTargetIds(newIds);

src/designer/right/ConfigContent.tsx

@@ -7,11 +7,10 @@ import AbstractDesignerController from "../../framework/core/AbstractDesignerCon
 import ObjectUtil from "../../utils/ObjectUtil";
 import historyRecordOperateProxy from "../operate-provider/undo-redo/HistoryRecordOperateProxy";
 import Loading from "../../json-schema/ui/loading/Loading";
-import DesignerLoaderFactory from "../loader/DesignerLoaderFactory";
 import AbstractController from "../../framework/core/AbstractController";
-import {DesignerMode} from "../DesignerType.ts";
 import {Close} from "@icon-park/react";
 import layerManager from "../manager/LayerManager.ts";
+import editorDesignerLoader from "../loader/EditorDesignerLoader.ts";
 
 export interface ConfigType<T extends AbstractController = AbstractDesignerController> {
     controller: T;
@@ -40,7 +39,7 @@ const ConfigContent = () => {
     const buildConfigContent = () => {
         const {compController} = layerManager;
         const {activeMenu, activeElem} = rightStore;
-        const abstractConfigObj: AbstractDefinition = DesignerLoaderFactory.getLoader(DesignerMode.EDIT).definitionMap[activeElem.type + '']
+        const abstractConfigObj: AbstractDefinition = editorDesignerLoader.definitionMap[activeElem.type + '']
         if (!abstractConfigObj) return;
         const configMapping = abstractConfigObj.getMenuToConfigContentMap();
         const ConfigComp: React.ComponentType<ConfigType> = configMapping![activeMenu];

src/designer/view/DesignerView.tsx

@@ -1,11 +1,11 @@
-import DesignerLoaderFactory from "../loader/DesignerLoaderFactory";
+import viewDesignerLoader from "../loader/ViewDesignerLoader.ts";
 import {lazy, Suspense, useEffect} from 'react';
 import './DesignerView.less';
 import layerManager from "../manager/LayerManager.ts";
 import {observer} from "mobx-react";
 import Loading from "../../json-schema/ui/loading/Loading";
 import layerBuilder from "../left/layer-list/LayerBuilder";
-import {DesignerMode, SaveType} from "../DesignerType.ts";
+import {SaveType} from "../DesignerType.ts";
 import canvasManager from "../header/items/canvas/CanvasManager.ts";
 import designerManager from "../manager/DesignerManager.ts";
 import '../../designer/resource/font/FontGlobal.css';
@@ -24,7 +24,7 @@ const DesignerView = observer((props: DesignerViewProps) => {
     const {id, type} = props;
 
     useEffect(() => {
-        DesignerLoaderFactory.getLoader(DesignerMode.VIEW).load(id, type);
+        viewDesignerLoader.load(id, type);
     }, []);
 
     const {layerConfigs} = layerManager!;

src/framework/core/ComponentContainer.tsx

@@ -1,13 +1,12 @@
 import {memo, Suspense, useEffect, useRef} from "react";
-import runtimeConfigStore from "../../designer/store/RuntimeStore.ts";
 import Loading from "../../json-schema/ui/loading/Loading";
 import URLUtil from "../../utils/URLUtil";
 import {DesignerMode, ILayerItem} from "../../designer/DesignerType";
-import layerManager from "../../designer/manager/LayerManager.ts";
-import {AbstractDefinition} from "./AbstractDefinition";
 import DesignerLoaderFactory from "../../designer/loader/DesignerLoaderFactory";
 import AbstractDesignerController from "./AbstractDesignerController";
 import BPExecutor from "../../designer/blueprint/core/BPExecutor.ts";
+import runtimeConfigStore from "../../designer/store/RuntimeStore.ts";
+import layerManager from "../../designer/manager/LayerManager.ts";
 
 export interface ComponentContainerProps {
     layer: ILayerItem;
@@ -23,49 +22,51 @@ const ComponentContainer = memo((props: ComponentContainerProps) => {
     useEffect(() => {
         //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
         const {elemConfigs, compController} = layerManager;
-        const componentDefine: AbstractDefinition = DesignerLoaderFactory.getLoader(mode).definitionMap[layer!.type!];
-        if (componentDefine) {
-            const Controller = componentDefine.getController();
-            if (Controller) {
-                let config;
-                if (layer.id! in compController!) {
-                    //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
-                    config = compController![layer.id!].getConfig();
-                } else if (layer.id! in elemConfigs!) {
-                    config = elemConfigs![layer.id!];
-                } else {
-                    config = componentDefine.getInitConfig();
-                    config.base.id = layer.id!;
-                }
-                const {mode} = URLUtil.parseUrlParams();
-                const controller = new Controller()! as AbstractDesignerController;
-                /**
-                 * 此处注意，执行顺序尤为重要！！！
-                 * 第一步：动态代理绑定在前，
-                 * 第二步：赋值controller在后，
-                 * 第三步：最后才是执行create方法。
-                 * 否则导致蓝图事件执行时，获取controller实例为undefined
-                 */
-                //todo 此处逻辑应该使用设计模式优化，而非写死
-                if (mode as DesignerMode === DesignerMode.VIEW) {
-                    //view模式下使用动态代理对象，执行蓝图事件
-                    registerProxy(layer.id!, controller);
-                }
-                compController[layer.id + ''] = controller;
-                controller.create(ref.current!, config).then(() => {
-                    //在组件完全渲染完毕后进行数据的加载和事件的注册
+        DesignerLoaderFactory.getLoader(mode).then((loader) => {
+            const componentDefine = loader.definitionMap[layer.type!];
+            if (componentDefine) {
+                const Controller = componentDefine.getController();
+                if (Controller) {
+                    let config;
+                    if (layer.id! in compController!) {
+                        //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
+                        config = compController![layer.id!].getConfig();
+                    } else if (layer.id! in elemConfigs!) {
+                        config = elemConfigs![layer.id!];
+                    } else {
+                        config = componentDefine.getInitConfig();
+                        config.base.id = layer.id!;
+                    }
+                    const {mode} = URLUtil.parseUrlParams();
+                    const controller = new Controller()! as AbstractDesignerController;
+                    /**
+                     * 此处注意，执行顺序尤为重要！！！
+                     * 第一步：动态代理绑定在前，
+                     * 第二步：赋值controller在后，
+                     * 第三步：最后才是执行create方法。
+                     * 否则导致蓝图事件执行时，获取controller实例为undefined
+                     */
+                    //todo 此处逻辑应该使用设计模式优化，而非写死
                     if (mode as DesignerMode === DesignerMode.VIEW) {
-                        controller.registerEvent();
-                        controller.loadComponentData();
+                        //view模式下使用动态代理对象，执行蓝图事件
+                        registerProxy(layer.id!, controller);
                     }
-                    //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
-                    controller.updateFilter(controller.getConfig()?.filter);
-                    //渲染后删除elemConfigs中的映射关系（需要观察是否会造成其他问题）
-                    delete elemConfigs![layer.id!];
-                });
+                    compController[layer.id + ''] = controller;
+                    controller.create(ref.current!, config).then(() => {
+                        //在组件完全渲染完毕后进行数据的加载和事件的注册
+                        if (mode as DesignerMode === DesignerMode.VIEW) {
+                            controller.registerEvent();
+                            controller.loadComponentData();
+                        }
+                        //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
+                        controller.updateFilter(controller.getConfig()?.filter);
+                        //渲染后删除elemConfigs中的映射关系（需要观察是否会造成其他问题）
+                        delete elemConfigs![layer.id!];
+                    });
 
+                }
             }
-        }
+        })
     }, []);
 
     return (