aldehyde 0.2.270 → 0.2.271

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

@@ -0,0 +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;

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

@@ -0,0 +1,77 @@
+import AbstractController from "./abstract-controller";
+import React, { ComponentType } from "react";
+import AbstractDesignerController from "./abstract-designer-controller";
+
+export type ClazzTemplate<C> = new () => C | null;
+
+export interface ActionInfo {
+    name: string;
+    id: string;
+    handler: (controller: AbstractDesignerController, 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-controller.ts

@@ -0,0 +1,63 @@
+import AbstractController from "./abstract-controller";
+import { ComponentBaseProps, IFilterConfigType, ThemeItemType } from "../interface";
+
+/**
+ * AbstractDesignerController继承自AbstractController，在泛型的定义和约束上和AbstractController完全保持一致。
+ * 此外，AbstractDesignerController扩展了一些自定义组件所需的特有方法，如：修改组件数据等
+ */
+abstract class AbstractDesignerController<I = any, C = any> extends AbstractController<I, C> {
+    //轮询请求定时器
+    protected interval: NodeJS.Timeout | null = null;
+    //上一次数据连接状态 true：成功 false：失败
+    protected lastReqState: boolean = true;
+
+    /**
+     * 更新组件数据,且必须触发组件的重新渲染
+     * @param data
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public changeData(data: any): void {
+    }
+
+
+    /**
+     * 加载组件数据，用于在预览（展示）模式下渲染完组件后根据当前组件的数据配置自动加载并更新组件数组。
+     * 注：若自定义组件有自己的数据加载方式，则需要覆写此方法
+     */
+    public loadComponentData(): void {
+        const { data } = this.config as ComponentBaseProps;
+        if (!data) return;
+        const { sourceType } = data!;
+        switch (sourceType) {
+            case "static":
+                //静态数据不做处理，组件首次渲染时默认读取静态数据
+                break;
+            case "api":
+                console.log("请求数据");
+                break;
+        }
+    }
+
+    /**
+     * 更新本组件的主题样式方法，用于在全局切换主题时使用
+     * @param newTheme 新主题
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public updateTheme(newTheme: ThemeItemType): void {
+    }
+
+    public updateFilter(filter: IFilterConfigType): void {
+        if (this.config && (this.config as ComponentBaseProps).filter)
+            (this.config as ComponentBaseProps)!.filter = filter;
+        if (!this.container)
+            return;
+        if (filter?.enable) {
+            this.container.style.filter = `blur(${filter.blur}px) brightness(${filter.brightness}) contrast(${filter.contrast}) opacity(${filter.opacity}) saturate(${filter.saturate}) hue-rotate(${filter.hueRotate}deg)`
+        } else {
+            this.container.style.filter = 'none';
+        }
+    }
+
+}
+
+export default AbstractDesignerController;

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

@@ -0,0 +1,34 @@
+import { AbstractDefinition } from "./abstract-definition";
+import { compsConfig } from "./assets";
+import ComponentDefinition from "./component-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;
+            }
+        })
+    }
+
+}
+
+const abstractDesignerLoader = new AbstractDesignerLoader();
+export default abstractDesignerLoader;

package/src/aldehyde/lowcode-components/lowcode-view/component/assets.ts

@@ -0,0 +1,89 @@
+import { BaseInfoType } from "../interface";
+// 组件
+import BaseTextComponent from "../../base-text";
+import BaseImage from "../../base-image";
+import DateTime from "../../date-time";
+import BaseColorBlock from "../../base-color-block";
+import FourAngleGlowBorder from "../../four-angle-glow-border";
+import BaseLineChart from "../../line-chart";
+import BarChart from "../../bar-chart";
+import ColumnChart from "../../column-chart";
+
+interface ComponentItemConfig {
+    baseInfo: BaseInfoType, // 基础信息
+    componentNode: any, // 组件实例
+}
+
+// 组件配置 key：同compKey
+export const compsConfig: { [key: string]: ComponentItemConfig } = {
+    BaseText: {
+        componentNode: BaseTextComponent,
+        baseInfo: {
+            compName: "基础文本",
+            compKey: "BaseText",
+        },
+    },
+    BaseImage: {
+        componentNode: BaseImage,
+        baseInfo: {
+            compName: "基础图片",
+            compKey: "BaseImage",
+        },
+    },
+    DateTime: {
+        componentNode: DateTime,
+        baseInfo: {
+            compName: "当前时间",
+            compKey: "DateTime",
+        },
+    },
+    BaseColorBlock: {
+        componentNode: BaseColorBlock,
+        baseInfo: {
+            compName: "基础色块",
+            compKey: "BaseColorBlock",
+        }
+    },
+    FourAngleGlowBorder: {
+        componentNode: FourAngleGlowBorder,
+        baseInfo: {
+            compName: "四角辉光边框",
+            compKey: "FourAngleGlowBorder",
+        }
+    },
+    BaseLineChart: {
+        componentNode: BaseLineChart,
+        baseInfo: {
+            compName: "折线图",
+            compKey: "BaseLineChart",
+        }
+    },
+    AreaChart: {
+        componentNode: BaseLineChart,
+        baseInfo: {
+            compName: "面积图",
+            compKey: "AreaChart",
+        },
+    },
+    StepLineChart: {
+        componentNode: BaseLineChart,
+        baseInfo: {
+            compName: "阶梯图",
+            compKey: "StepLineChart",
+        },
+    },
+    ColumnChart: {
+        componentNode: ColumnChart,
+        baseInfo: {
+            compName: "柱状图",
+            compKey: "ColumnChart",
+        },
+    },
+    BarChart: {
+        componentNode: BarChart,
+        baseInfo: {
+            compName: "条形图",
+            compKey: "BarChart",
+        },
+    }
+};

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

@@ -0,0 +1,88 @@
+import React, { memo, Suspense, useEffect, useRef, useState } from "react";
+import Loading from "./loading";
+import { ILayerItem, LayerManagerDataType } from "../interface";
+import AbstractDesignerController from "./abstract-designer-controller";
+import abstractDesignerLoader from "./abstract-designer-loader";
+
+const registerProxy = (compId: string, controller: AbstractDesignerController) => {
+    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]: AbstractDesignerController }>({})
+
+    useEffect(() => {
+        //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
+        const { elemConfigs } = layerManager;
+        const componentDefine = abstractDesignerLoader.definitionMap[layer.type];
+        if (componentDefine) {
+            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).then(() => {
+                    //在组件完全渲染完毕后进行数据的加载和事件的注册
+                    Controller.loadComponentData();
+                    //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
+                    Controller.updateFilter(Controller.getConfig()?.filter);
+                    //渲染后删除elemConfigs中的映射关系（需要观察是否会造成其他问题）
+                    delete elemConfigs![layer.id!];
+                });
+            }
+        }
+    }, []);
+
+    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/component-controller.ts

@@ -0,0 +1,99 @@
+import { ComponentType, ClassType, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { message } from "antd";
+import { UpdateOptions } from "./abstract-controller";
+import AbstractDesignerController from "./abstract-designer-controller";
+
+const merge = (originalData: any, newData: any): any => {
+    if (!originalData && newData)
+        return newData;
+    if (originalData && !newData)
+        return originalData;
+    Object.keys(newData).forEach(key => {
+        const newValue = newData[key];
+        if (originalData.hasOwnProperty(key)) {
+            if (Array.isArray(newValue)) {
+                originalData[key] = newValue;
+            } else if (newValue
+                && typeof newValue === "object"
+                && Object.keys(newValue).length > 0
+                && originalData[key]
+                && typeof originalData[key] === "object"
+                && !!originalData[key]) {
+                merge(originalData[key], newValue);
+            } else {
+                originalData[key] = newValue;
+            }
+        } else {
+            originalData[key] = newValue;
+        }
+    });
+    return originalData;
+}
+
+class ComponentUtil {
+    public static async createAndRender<T, P = any>(container: HTMLElement, Template: ClassType<P, any, any>, props?: any): Promise<T | null> {
+        if (!container)
+            throw new Error("create react node failed, container is null");
+        return new Promise<T | null>((resolve) => {
+            try {
+                createRoot(container).render(createElement(Template, {
+                    ref: (instance: T) => resolve(instance),
+                    ...props,
+                    isDesignMode: false // 组件中传参是否是编辑页
+                }))
+            } catch (e: unknown) {
+                console.error('create react node failed ', e)
+                resolve(null);
+            }
+        });
+    }
+}
+
+
+export class ComponentController extends AbstractDesignerController {
+
+    private componentNode: ComponentType; // 组件实例
+    private componentType: string; // 组件类型
+
+    constructor({ componentType, componentNode }) {
+        super();
+        this.componentType = componentType;
+        this.componentNode = componentNode;
+    }
+
+    async create(container: HTMLElement, config: { [key: string]: any }): Promise<void> {
+        this.config = config;
+        this.container = container;
+        this.instance = await ComponentUtil.createAndRender(container, this.componentNode, config);
+    }
+
+    destroy(): void {
+        this.instance?.destroy?.();
+        this.instance = null;
+        this.config = null;
+    }
+
+    getConfig(): { [key: string]: any } | null {
+        return this.config;
+    }
+
+    update(config: { [key: string]: any }, upOp?: UpdateOptions | undefined): void {
+        this.config = merge(this.config, config);
+        upOp = upOp || { reRender: true };
+        if (upOp.reRender) {
+            this.instance?.updateConfig(this.config!);
+        }
+    }
+
+
+    changeData(data: any) {
+        if (this.componentType === "BaseText" && typeof data !== 'string') {
+            message.warning('数据类型错误, 基础文本仅接受字符串类型的数据: ', data);
+            this.config!.data!.staticData = "";
+            return;
+        }
+        this.config!.data!.staticData = data;
+        this.instance?.updateConfig(this.config!);
+    }
+}

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

@@ -0,0 +1,24 @@
+import { ComponentType } from "react";
+import { BaseInfoType } from "../interface";
+import { ComponentController } from "./component-controller";
+import { compsConfig } from "./assets";
+
+export default class ComponentDefinition {
+
+    private componentType: string; // 组件类型
+    private componentNode: ComponentType; // 组件实例
+
+    constructor({ componentType, componentNode }) {
+        this.componentType = componentType;
+        this.componentNode = componentNode;
+    }
+
+    getBaseInfo(): BaseInfoType {
+        return compsConfig[this.componentType].baseInfo;
+    }
+
+    getController(): any | null {
+        return new ComponentController({ componentNode: this.componentNode, componentType: this.componentType });
+    }
+
+}

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

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

package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx

@@ -0,0 +1,91 @@
+import { createElement, ReactElement } from "react";
+import cloneDeep from "lodash/cloneDeep";
+import ComponentContainer from "./component-container";
+import { ILayerItem, LayerManagerDataType, } from "../interface";
+
+export enum LayerOrder {
+    ASC,
+    DESC,
+}
+
+class LayerBuilder {
+
+    /**
+     * 解析函数
+     */
+    public parser = (layerManager: LayerManagerDataType, order: LayerOrder = LayerOrder.DESC): ILayerItem[] => {
+        const { layerHeader, layerConfigs } = layerManager;
+        const layerMap = cloneDeep(layerConfigs);
+        let sourceLayerArr: ILayerItem[] = [];
+
+        const iterateLayers = (currentLayer: ILayerItem, res: ILayerItem[]): void => {
+            if (currentLayer) {
+                res.push(currentLayer);
+                if (currentLayer.childHeader) {
+                    let childLayer = layerMap[currentLayer.childHeader];
+                    iterateLayers(childLayer, res);
+                }
+                let next = currentLayer.next;
+                while (next) {
+                    const nextLayer = layerMap[next!];
+                    if (nextLayer?.childHeader)
+                        iterateLayers(layerMap[nextLayer.childHeader], res);
+                    nextLayer && res.push(nextLayer);
+                    next = nextLayer?.next;
+                }
+            }
+        }
+
+        iterateLayers(layerMap[layerHeader!], sourceLayerArr);
+
+        if (order === LayerOrder.ASC)
+            sourceLayerArr = sourceLayerArr.reverse();
+
+        // 构建树结构
+        const resData: ILayerItem[] = [];
+        for (const layerItem of sourceLayerArr) {
+            if (!layerItem?.pid) {
+                // 根节点
+                resData.push(layerItem);
+            } else {
+                // 非根节点，将其加入父节点的 children 中
+                const parent = layerMap[layerItem.pid];
+                if (parent) {
+                    parent.children = parent.children || [];
+                    parent.children.push(layerItem);
+                }
+            }
+        }
+        return resData;
+    };
+
+    private order: number = 1;
+
+    /**
+     * 构建设计器主画布组件
+     * @param layerMap
+     */
+    public buildCanvasComponents = (layerManager: LayerManagerDataType): ReactElement[] => {
+        const res: ReactElement[] = [];
+        //渲染顺序，先渲染顶层容器，再逐步渲染底层的子容器
+        this.parser(layerManager, LayerOrder.ASC).forEach((item: ILayerItem) => {
+            res.push(this.buildComponents(layerManager, item));
+        });
+        //重置排序编号
+        this.order = 1;
+        return res;
+    }
+
+    private buildComponents = (layerManager: LayerManagerDataType, layer: ILayerItem): ReactElement => {
+        const { layerConfigs } = layerManager;
+        const targetLayer = layerConfigs[layer.id!];
+        //给每个图层重新设置排序编号,用于在图层移动的过程中提供更好的体验
+        if (targetLayer)
+            targetLayer.order = this.order++;
+        return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
+    }
+
+}
+
+const layerBuilder = new LayerBuilder();
+export default layerBuilder;