aldehyde 0.2.493 → 0.2.495

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts

@@ -1,64 +1,64 @@
-export interface UpdateOptions {
-    reRender: boolean;
-}
-
-/**
- * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
- * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
- * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
- * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
- * @param C 组件配置类型，即组件的完整属性类型
- */
-abstract class AbstractController<I = any, C = any> {
-
-    /**
-     * 组件实例引用
-     * @protected
-     */
-    protected instance: I | null = null;
-    /**
-     * 组件配置(包括组件数据)
-     * @protected
-     */
-    public config: C | null = null;
-    /**
-     * 组件所处容器的dom元素
-     * @protected
-     */
-    public container: HTMLElement | null = null;
-
-    /******************生命周期******************/
-
-    /**
-     * 创建组件并将组件挂载到指定的容器中
-     * @param container 容器
-     * @param config 组件配置
-     */
-    public abstract create(container: HTMLElement, config: C): Promise<void>;
-
-    /**
-     * 更新组件配置，并触发组件重新渲染
-     * @param config 组件属性（参数）
-     * @param upOp 操作类型
-     */
-    public abstract update(config: C, upOp?: UpdateOptions): void;
-
-    /**
-     * 销毁组件
-     */
-    public destroy(): void {
-        this.instance = null;
-        this.config = null;
-        this.container = null;
-    }
-
-
-    /******************普通方法******************/
-    /**
-     * 获取组件配置数据
-     */
-    public abstract getConfig(): C | null;
-
-}
-
-export default AbstractController;
+export interface UpdateOptions {
+    reRender: boolean;
+}
+
+/**
+ * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
+ * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
+ * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
+ * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
+ * @param C 组件配置类型，即组件的完整属性类型
+ */
+abstract class AbstractController<I = any, C = any> {
+
+    /**
+     * 组件实例引用
+     * @protected
+     */
+    protected instance: I | null = null;
+    /**
+     * 组件配置(包括组件数据)
+     * @protected
+     */
+    public config: C | null = null;
+    /**
+     * 组件所处容器的dom元素
+     * @protected
+     */
+    public container: HTMLElement | null = null;
+
+    /******************生命周期******************/
+
+    /**
+     * 创建组件并将组件挂载到指定的容器中
+     * @param container 容器
+     * @param config 组件配置
+     */
+    public abstract create(container: HTMLElement, config: C): Promise<void>;
+
+    /**
+     * 更新组件配置，并触发组件重新渲染
+     * @param config 组件属性（参数）
+     * @param upOp 操作类型
+     */
+    public abstract update(config: C, upOp?: UpdateOptions): void;
+
+    /**
+     * 销毁组件
+     */
+    public destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.container = null;
+    }
+
+
+    /******************普通方法******************/
+    /**
+     * 获取组件配置数据
+     */
+    public abstract getConfig(): C | null;
+
+}
+
+export default AbstractController;

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts

@@ -1,77 +1,77 @@
-import AbstractController from "./abstract-controller";
-import React, { ComponentType } from "react";
-import ComponentController from "./component-controller";
-
-export type ClazzTemplate<C> = new () => C | null;
-
-export interface ActionInfo {
-    name: string;
-    id: string;
-    handler: (controller: ComponentController, params?: any) => void;
-}
-
-export interface ICategorize {
-    key: string;
-    name: string;
-    icon?: ComponentType;
-    parentKey?: string;
-    iconType?: string;
-}
-
-/**
- * 组件基础信息
- */
-export interface BaseInfoType {
-    /**
-     * 组件显示名称
-     */
-    compName: string;
-    /**
-     * 组件标识
-     */
-    compKey: string;
-    /**
-     * 主分类
-     */
-    categorize?: string;
-    /**
-     * 子分类
-     */
-    subCategorize?: string;
-    /**
-     * 版本
-     */
-    version?: string;
-    /**
-     * 初始宽度
-     */
-    width?: number;
-    /**
-     * 初始高度
-     */
-    height?: number;
-}
-
-/**
- * 自动扫描抽象组件定义核心类。
- * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
- * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
- *
- * 泛型说明：
- * C: 组件控制器类，用于指定当前组件定义对应的控制器类
- * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
- */
-export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
-
-    /**
-     * 返回组件基础信息，用于在组件列表中展示
-     */
-    abstract getBaseInfo(): BaseInfoType;
-
-    /**
-     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
-     * 后续将通过该控制器的实例对象来控制组件的生命周期
-     */
-    abstract getController(): ClazzTemplate<C> | null;
-}
-
+import AbstractController from "./abstract-controller";
+import React, { ComponentType } from "react";
+import ComponentController from "./component-controller";
+
+export type ClazzTemplate<C> = new () => C | null;
+
+export interface ActionInfo {
+    name: string;
+    id: string;
+    handler: (controller: ComponentController, params?: any) => void;
+}
+
+export interface ICategorize {
+    key: string;
+    name: string;
+    icon?: ComponentType;
+    parentKey?: string;
+    iconType?: string;
+}
+
+/**
+ * 组件基础信息
+ */
+export interface BaseInfoType {
+    /**
+     * 组件显示名称
+     */
+    compName: string;
+    /**
+     * 组件标识
+     */
+    compKey: string;
+    /**
+     * 主分类
+     */
+    categorize?: string;
+    /**
+     * 子分类
+     */
+    subCategorize?: string;
+    /**
+     * 版本
+     */
+    version?: string;
+    /**
+     * 初始宽度
+     */
+    width?: number;
+    /**
+     * 初始高度
+     */
+    height?: number;
+}
+
+/**
+ * 自动扫描抽象组件定义核心类。
+ * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
+ * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
+ *
+ * 泛型说明：
+ * C: 组件控制器类，用于指定当前组件定义对应的控制器类
+ * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
+ */
+export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
+
+    /**
+     * 返回组件基础信息，用于在组件列表中展示
+     */
+    abstract getBaseInfo(): BaseInfoType;
+
+    /**
+     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
+     * 后续将通过该控制器的实例对象来控制组件的生命周期
+     */
+    abstract getController(): ClazzTemplate<C> | null;
+}
+

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts

@@ -1,37 +1,37 @@
-import { AbstractDefinition } from "./abstract-definition";
-import { compsConfig } from "./assets";
-import ComponentDefinition from "./component-definition";
-import GroupDefinition from "./group-layer/definition";
-
-class AbstractDesignerLoader {
-
-    //自定义组件信息映射
-    public definitionMap: Record<string, AbstractDefinition> = {};
-
-    /**
-     * 加载设计器
-     */
-    public load(): void {
-        //扫描组件
-        this.scanComponents();
-    }
-
-    /**
-     * 组件挂载
-     */
-    protected scanComponents(): void {
-        Object.keys(compsConfig || {}).forEach((key) => {
-            const definition: AbstractDefinition = new ComponentDefinition({ componentType: key, componentNode: compsConfig[key].componentNode });
-            const compKey = definition.getBaseInfo()?.compKey;
-            if (compKey) {
-                this.definitionMap[compKey] = definition;
-            }
-        });
-        // 编组组件信息挂载
-        this.definitionMap["group"] = new GroupDefinition();
-    }
-
-}
-
-const abstractDesignerLoader = new AbstractDesignerLoader();
+import { AbstractDefinition } from "./abstract-definition";
+import { compsConfig } from "./assets";
+import ComponentDefinition from "./component-definition";
+import GroupDefinition from "./group-layer/definition";
+
+class AbstractDesignerLoader {
+
+    //自定义组件信息映射
+    public definitionMap: Record<string, AbstractDefinition> = {};
+
+    /**
+     * 加载设计器
+     */
+    public load(): void {
+        //扫描组件
+        this.scanComponents();
+    }
+
+    /**
+     * 组件挂载
+     */
+    protected scanComponents(): void {
+        Object.keys(compsConfig || {}).forEach((key) => {
+            const definition: AbstractDefinition = new ComponentDefinition({ componentType: key, componentNode: compsConfig[key].componentNode });
+            const compKey = definition.getBaseInfo()?.compKey;
+            if (compKey) {
+                this.definitionMap[compKey] = definition;
+            }
+        });
+        // 编组组件信息挂载
+        this.definitionMap["group"] = new GroupDefinition();
+    }
+
+}
+
+const abstractDesignerLoader = new AbstractDesignerLoader();
 export default abstractDesignerLoader;

package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx

@@ -1,92 +1,92 @@
-import React, { memo, Suspense, useEffect, useRef, useState, useContext } from "react";
-import Loading from "./loading";
-import { ILayerItem, LayerManagerDataType } from "../interface";
-import ComponentController from "./component-controller";
-import abstractDesignerLoader from "./abstract-designer-loader";
-import { useNavigate } from "react-router-dom";
-import { ControllerContext } from "../index";
-
-const registerProxy = (compId: string, controller: ComponentController) => {
-    controller.changeData = new Proxy(controller.changeData, {
-        apply(target, thisArg, argus) {
-            return target.apply(thisArg, argus as any);
-        }
-    });
-}
-
-export interface ComponentContainerProps {
-    layer: ILayerItem;
-    layerManager: LayerManagerDataType;
-}
-
-const ComponentContainer = memo((props: ComponentContainerProps) => {
-    const { layer, layerManager } = props;
-    const ref = useRef(null);
-    const [compController, setCompController] = useState<{ [key: string]: ComponentController }>({});
-    const navigate = useNavigate();
-    const { setControllers, setSearchParams } = useContext(ControllerContext);
-
-    useEffect(() => {
-        //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
-        const { elemConfigs } = layerManager;
-        const componentDefine = abstractDesignerLoader.definitionMap[layer.type];
-        const Controller = componentDefine?.getController() as any;
-        if (Controller) {
-            let config;
-            if (layer.id! in compController!) {
-                //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
-                config = compController![layer.id!].getConfig();
-            } else if (layer.id! in elemConfigs!) {
-                config = elemConfigs![layer.id!];
-            }
-            /**
-             * 此处注意，执行顺序尤为重要！！！
-             * 第一步：动态代理绑定在前，
-             * 第二步：赋值controller在后，
-             * 第三步：最后才是执行create方法。
-             */
-            //todo 此处逻辑应该使用设计模式优化，而非写死
-            registerProxy(layer.id!, Controller);
-            setCompController(val => ({ ...val, [layer.id]: Controller }));
-            Controller.create(ref.current!, { ...config, navigate, setSearchParams }).then(() => {
-                //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
-                Controller.updateFilter(Controller.getConfig()?.filter);
-                //存储Controller，用于后续操作(初始化更新数据)
-                setControllers(val => ({ ...val, [layer.id]: Controller }));
-            });
-        }
-        return () => {
-            Controller.destroy();
-            setControllers(val => ({ ...val, [layer.id]: null }));
-        }
-    }, []);
-
-    return (
-        <Suspense fallback={<Loading />}>
-            <div
-                id={layer.id}
-                data-type={layer.type}
-                data-lock={layer.lock}
-                data-hide={layer.hide}
-                key={layer.id + ''}
-                style={{
-                    width: layer.width,
-                    height: layer.height,
-                    transform: layer.transform || `translate(${layer.x!}px, ${layer.y!}px)`,
-                    position: 'absolute',
-                    visibility: layer.hide ? "hidden" : "visible",
-                    border: 'none'
-                }} className={"lc-comp-item"}>
-                <div ref={ref} style={{
-                    width: '100%',
-                    height: '100%',
-                    pointerEvents: 'auto',
-                    position: 'relative'
-                }} />
-            </div>
-        </Suspense>
-    )
-});
-
-
+import React, { memo, Suspense, useEffect, useRef, useState, useContext } from "react";
+import Loading from "./loading";
+import { ILayerItem, LayerManagerDataType } from "../interface";
+import ComponentController from "./component-controller";
+import abstractDesignerLoader from "./abstract-designer-loader";
+import { useNavigate } from "react-router-dom";
+import { ControllerContext } from "../index";
+
+const registerProxy = (compId: string, controller: ComponentController) => {
+    controller.changeData = new Proxy(controller.changeData, {
+        apply(target, thisArg, argus) {
+            return target.apply(thisArg, argus as any);
+        }
+    });
+}
+
+export interface ComponentContainerProps {
+    layer: ILayerItem;
+    layerManager: LayerManagerDataType;
+}
+
+const ComponentContainer = memo((props: ComponentContainerProps) => {
+    const { layer, layerManager } = props;
+    const ref = useRef(null);
+    const [compController, setCompController] = useState<{ [key: string]: ComponentController }>({});
+    const navigate = useNavigate();
+    const { setControllers, setSearchParams } = useContext(ControllerContext);
+
+    useEffect(() => {
+        //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
+        const { elemConfigs } = layerManager;
+        const componentDefine = abstractDesignerLoader.definitionMap[layer.type];
+        const Controller = componentDefine?.getController() as any;
+        if (Controller) {
+            let config;
+            if (layer.id! in compController!) {
+                //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
+                config = compController![layer.id!].getConfig();
+            } else if (layer.id! in elemConfigs!) {
+                config = elemConfigs![layer.id!];
+            }
+            /**
+             * 此处注意，执行顺序尤为重要！！！
+             * 第一步：动态代理绑定在前，
+             * 第二步：赋值controller在后，
+             * 第三步：最后才是执行create方法。
+             */
+            //todo 此处逻辑应该使用设计模式优化，而非写死
+            registerProxy(layer.id!, Controller);
+            setCompController(val => ({ ...val, [layer.id]: Controller }));
+            Controller.create(ref.current!, { ...config, navigate, setSearchParams }).then(() => {
+                //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
+                Controller.updateFilter(Controller.getConfig()?.filter);
+                //存储Controller，用于后续操作(初始化更新数据)
+                setControllers(val => ({ ...val, [layer.id]: Controller }));
+            });
+        }
+        return () => {
+            Controller.destroy();
+            setControllers(val => ({ ...val, [layer.id]: null }));
+        }
+    }, []);
+
+    return (
+        <Suspense fallback={<Loading />}>
+            <div
+                id={layer.id}
+                data-type={layer.type}
+                data-lock={layer.lock}
+                data-hide={layer.hide}
+                key={layer.id + ''}
+                style={{
+                    width: layer.width,
+                    height: layer.height,
+                    transform: layer.transform || `translate(${layer.x!}px, ${layer.y!}px)`,
+                    position: 'absolute',
+                    visibility: layer.hide ? "hidden" : "visible",
+                    border: 'none'
+                }} className={"lc-comp-item"}>
+                <div ref={ref} style={{
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    position: 'relative'
+                }} />
+            </div>
+        </Suspense>
+    )
+});
+
+
 export default ComponentContainer;

package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css

@@ -1,27 +1,27 @@
-@font-face {
-    font-family: "DingTalk JinBuTi";
-    src: url('./DingTalk-JinBuTi.woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "DouyinSansBold";
-    src: url('./DouyinSansBold.woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "优设标题黑";
-    src: url('./YouSheBiaoTiHei.woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "庞门正道标题体免费版";
-    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
-    font-weight: normal;
-    font-style: normal;
+@font-face {
+    font-family: "DingTalk JinBuTi";
+    src: url('./DingTalk-JinBuTi.woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "DouyinSansBold";
+    src: url('./DouyinSansBold.woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "优设标题黑";
+    src: url('./YouSheBiaoTiHei.woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "庞门正道标题体免费版";
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
+    font-weight: normal;
+    font-style: normal;
 }

package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts

@@ -1,37 +1,37 @@
-import { ComponentInfoType } from "../../interface";
-import GroupLayer from "./index";
-import AbstractDesignerController from "../abstract-controller";
-
-export interface GroupLayerProps {
-    base: ComponentInfoType;
-}
-
-export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
-
-    constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
-        super();
-        this.container = container;
-        this.config = config;
-        this.instance = instance;
-    }
-
-    async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
-    }
-
-    public getConfig(): GroupLayerProps | null {
-        return this.config;
-    }
-
-    public update(): void {
-    }
-
-    public show(): void {
-        this.instance?.setState({ load: true })
-    }
-
-    public hide(): void {
-        this.instance?.setState({ load: false })
-    }
-
-
+import { ComponentInfoType } from "../../interface";
+import GroupLayer from "./index";
+import AbstractDesignerController from "../abstract-controller";
+
+export interface GroupLayerProps {
+    base: ComponentInfoType;
+}
+
+export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
+
+    constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
+        super();
+        this.container = container;
+        this.config = config;
+        this.instance = instance;
+    }
+
+    async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
+    }
+
+    public getConfig(): GroupLayerProps | null {
+        return this.config;
+    }
+
+    public update(): void {
+    }
+
+    public show(): void {
+        this.instance?.setState({ load: true })
+    }
+
+    public hide(): void {
+        this.instance?.setState({ load: false })
+    }
+
+
 }