light-chaser-pro 1.0.0

package/light-chaser-app/src/framework/convert/AbstractConvert.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+abstract class AbstractConvert<P = any> {
+    /**
+     * 获取转换器唯一标识
+     */
+    abstract getKey(): string;
+
+    /**
+     * 正向转换
+     * @param data
+     */
+    abstract convert(data: P): void;
+
+    /**
+     * 反向转换
+     * @param data
+     */
+    abstract convertBack(data: P): Promise<void>
+}
+
+export default AbstractConvert;

package/light-chaser-app/src/framework/core/AbstractController.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+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 组件配置
+     * @param others 组件配置
+     */
+    public abstract create(container: HTMLElement, config: C, ...others: unknown[]): 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/light-chaser-app/src/framework/core/AbstractDefinition.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {MenuInfo} from "../../designer/right/MenuType";
+import AbstractController from "./AbstractController";
+import {ICategorize} from "../../designer/left/compoent-lib/ComponentCategorize.ts";
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+
+
+/**
+ * 自动扫描抽象组件定义核心类。
+ * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
+ * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
+ *
+ * 泛型说明：
+ * C: 组件控制器类，用于指定当前组件定义对应的控制器类
+ * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
+ */
+export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
+
+    /**
+     * 返回组件基础信息，用于在组件列表中展示
+     */
+    abstract getBaseInfo(): BaseInfoType ;
+
+    /**
+     * 返回组件的初始配置，用于在画布渲染组件时的初始化组件数据
+     */
+    abstract getInitConfig(): P;
+
+    /**
+     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
+     * 后续将通过该控制器的实例对象来控制组件的生命周期
+     */
+    abstract getController(): ClazzTemplate<C> | null;
+
+    /**
+     * 返回组件图片缩略图，在组件列表中展示时使用。图片尺寸越小越好
+     */
+    abstract getChartImg(): string | null;
+
+    /**
+     * 返回右侧配置菜单列表，双击组件时需要展示该菜单列表
+     */
+    abstract getMenuList(): Array<MenuInfo>;
+
+    /**
+     * 返回右侧菜单与对应配置内容组件的映射关系
+     */
+    abstract getMenuToConfigContentMap(): MenuToConfigMappingType;
+
+
+
+    /**
+     * 自定义组件主分类，如需要创建一个设计器没有提供的主分类，则实现该方法
+     */
+    getCategorize(): ICategorize | null {
+        return null;
+    }
+
+    /**
+     * 自定义组件子分类,如需要创建一个设计器没有提供的子分类，则实现该方法
+     */
+    getSubCategorize(): ICategorize | null {
+        return null;
+    }
+}
+

package/light-chaser-app/src/framework/core/AbstractDesignerController.ts

@@ -0,0 +1,129 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractController from "./AbstractController";
+import BPExecutor from "../../designer/blueprint/core/BPExecutor.ts";
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+import {IFilterConfigType} from "light-chaser-types/types/FilterTypes.ts";
+import ComponentDataUpdater from "./tools/ComponentDataUpdater.ts";
+
+/**
+ * AbstractDesignerController继承自AbstractController，在泛型的定义和约束上和AbstractController完全保持一致。
+ * 此外，AbstractDesignerController扩展了一些自定义组件所需的特有方法，如：修改组件数据、注册蓝图事件等
+ */
+abstract class AbstractDesignerController<I = any, C = any> extends AbstractController<I, C> {
+    //上一次数据连接状态 true：成功 false：失败
+    protected lastReqState: boolean = true;
+    //异常提示信息dom元素
+    private errMsgDom: HTMLElement | null = null;
+    //蓝图事件触发器
+    public bpExecutor: BPExecutor | null = null;
+    //组件统一数据更新器
+    public componentDataUpdater: ComponentDataUpdater | null = null;
+    //循环渲染索引
+    public index?: number;
+
+    public async create(container: HTMLElement, config: C, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        this.index = index;
+        this.config = config;
+        this.container = container;
+        this.bpExecutor = bpExecutor;
+    }
+
+    /**
+     * 更新组件数据,且必须触发组件的重新渲染
+     * @param data
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public changeData(data: any): void {
+    }
+
+    /**
+     * 用于注册组件事件，在组件接入蓝图事件系统时使用
+     */
+    public registerEvent(): void {
+    }
+
+    /**
+     * 加载组件数据，用于在预览（展示）模式下渲染完组件后根据当前组件的数据配置自动加载并更新组件数组。
+     * 注：若自定义组件有自己的数据加载方式，则需要覆写此方法
+     */
+    public loadComponentData(): void {
+        import("./tools/ComponentDataUpdater.ts").then(module => {
+            const ComponentDataUpdater = module.default;
+            this.componentDataUpdater = new ComponentDataUpdater(
+                (data: any) => {
+                    if (!this.lastReqState) {
+                        this.lastReqState = true;
+                        this.errMsgDom?.remove();
+                        this.errMsgDom = null;
+                    }
+                    this.changeData(data);
+                },
+                () => {
+                    this.lastReqState = false;
+                    const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+                    const hide = layerConfigs[(this.config as any)?.base?.id];
+                    //请求失败，在原有容器的基础上添加异常提示信息的dom元素（此处直接操作dom元素，不适用react的api进行组件的反复挂载和卸载）
+                    if (!this.errMsgDom && !hide) {
+                        this.errMsgDom = document.createElement("div");
+                        this.errMsgDom.classList.add("view-error-message");
+                        this.errMsgDom.innerText = "数据加载失败...";
+                        this.container!.appendChild(this.errMsgDom);
+                    }
+                });
+            this.componentDataUpdater.run((this.config as ComponentBaseProps).data!);
+        })
+    }
+
+    /**
+     * 更新本组件的主题样式方法，用于在全局切换主题时使用
+     * @param newTheme 新主题
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public updateTheme(newTheme: IThemeItem): 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';
+        }
+    }
+
+    /**
+     * 设置组件的显示状态，默认直接使用css属性控制组件显示。
+     * 接入组件的过程中，建议自行实现该方法以达到更好的性能表现。建议的做法是显示时重新渲染组件. 隐藏时卸载整个组件即dom元素。可以节省内存开销
+     * @param visible
+     */
+    public setVisible(visible: boolean): void {
+        if (this.container) {
+            if (visible)
+                this.container.style.visibility = "visible";
+            else
+                this.container.style.visibility = "hidden";
+        }
+    }
+
+
+    destroy() {
+        this.componentDataUpdater?.destroy();
+        super.destroy();
+    }
+}
+
+export default AbstractDesignerController;

package/light-chaser-app/src/framework/core/AbstractDesignerDefinition.ts

@@ -0,0 +1,136 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {AbstractDefinition} from "./AbstractDefinition.ts";
+import AbstractController from "./AbstractController.ts";
+import AbstractDesignerController from "./AbstractDesignerController.ts";
+import {MenuInfo} from "../../designer/right/MenuType.ts";
+import {ColorFilter, Data, Optimize, SettingOne, Theme} from "@icon-park/react";
+import {lazy} from "react";
+import {MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+
+export interface ActionInfo {
+    name: string;
+    id: string;
+    handler: (controller: AbstractDesignerController, params?: any) => void;
+}
+
+
+const AnimationConfig = lazy(() => import("../../comps/common-component/animation-config/AnimationConfig.tsx"));
+const ThemeConfig = lazy(() => import("../../comps/common-component/theme-config/ThemeConfig.tsx"));
+const BaseInfo = lazy(() => import("../../comps/common-component/base-info/BaseInfo.tsx"));
+const DataConfig = lazy(() => import("../../comps/common-component/data-config/DataConfig.tsx"));
+const FilterConfig = lazy(() => import("../../comps/common-component/filter-config/FilterConfig.tsx"));
+
+
+export default abstract class AbstractDesignerDefinition<C extends AbstractController = AbstractDesignerController, P = any> extends AbstractDefinition<C, P> {
+
+    getMenuList(): Array<MenuInfo> {
+        return [
+            {
+                icon: SettingOne,
+                name: '基础',
+                key: 'base',
+            },
+            {
+                icon: Optimize,
+                name: '样式',
+                key: 'style',
+            },
+            {
+                icon: Data,
+                name: '数据',
+                key: 'data',
+            },
+            {
+                icon: ColorFilter,
+                name: '滤镜',
+                key: 'filter',
+            },
+            {
+                icon: Theme,
+                name: '主题',
+                key: 'theme',
+            }
+        ];
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            data: DataConfig,
+            animation: AnimationConfig,
+            theme: ThemeConfig,
+            filter: FilterConfig
+        };
+    }
+
+    /**
+     * 返回当前组件能触发的事件列表, 在蓝图图层节点中使用
+     */
+    getEventList(): EventInfo[] {
+        return [
+            {
+                id: "loaded",
+                name: "组件加载完成时",
+            }
+        ];
+    }
+
+    /**
+     * 返回当前组件能接受的动作列表，在蓝图图层节点中使用。可据此实现对组件的操作
+     */
+    getActionList(): ActionInfo[] {
+        return [
+            {
+                name: "显示",
+                id: "show",
+                handler: (controller: AbstractDesignerController) => {
+                    controller.setVisible(true);
+                }
+            },
+            {
+                name: "隐藏",
+                id: "hide",
+                handler: (controller: AbstractDesignerController) => {
+                    controller.setVisible(false);
+                }
+            },
+            {
+                name: "更新组件样式",
+                id: "updateConfig",
+                handler: (controller: AbstractDesignerController, params?: object) => {
+                    controller.update(params);
+                }
+            },
+            {
+                name: "更新组件数据",
+                id: "updateData",
+                handler: (controller: AbstractDesignerController, params?: object) => {
+                    controller.changeData(params);
+                }
+            },
+            {
+                name: "切换状态",
+                id: "toggleStatus",
+                handler: (controller: AbstractDesignerController, statusId?: string) => {
+                    if (!statusId)
+                        return;
+                    const status = controller.config.status[statusId];
+                    if (!status)
+                        return;
+                    controller.update(status.config);
+                }
+            }
+        ];
+    }
+}

package/light-chaser-app/src/framework/core/AbstractScaleObserver.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+export default abstract class AbstractScaleObserver {
+
+    abstract doScale(xScale: number, yScale: number): void;
+}

package/light-chaser-app/src/framework/core/ComponentContainer.tsx

@@ -0,0 +1,130 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {memo, Suspense, useEffect, useRef} from "react";
+import runtimeConfigStore from "../../designer/store/RuntimeStore.ts";
+import {AbstractDefinition} from "./AbstractDefinition";
+import AbstractDesignerController from "./AbstractDesignerController";
+import DesignerManager from "../../designer/manager/DesignerManager.ts";
+import {DesignerMode} from "light-chaser-types/types/DesignerTypes.ts";
+import {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+import Loading from "light-chaser-ui/lib/loading/Loading.tsx";
+import DesignerLoader from "../../designer/loader/DesignerLoader.ts";
+import {cloneDeep} from "lodash";
+import DataUtil from "../../util/DataUtil.ts";
+
+export interface ComponentContainerProps {
+    index?: number; //组件索引(用于循环容器子组件渲染标识，非循环容器渲染时不用传递）
+    layer: ILayerItem;
+    triggerSource?: string; //渲染源，可能来自编辑模式，预览模式，或大屏引用组件
+    designerManager: DesignerManager;
+}
+
+const ComponentContainer = memo((props: ComponentContainerProps) => {
+    const {layer, triggerSource, designerManager, index} = props;
+    const layerManager = designerManager.layerManager!;
+    const ref = useRef(null);
+    const {auxiliaryBorder} = runtimeConfigStore;
+    const enableEvent = window.LC_ENV.mode !== DesignerMode.EDIT || layerManager.enableEvent;
+    const editDisplay = !(window.LC_ENV.mode === DesignerMode.EDIT && layer.hide);
+
+    useEffect(() => {
+        //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
+        const {elemConfigs, controllers} = layerManager;
+        const componentDefine: AbstractDefinition = DesignerLoader.definitionMap[layer!.type!];
+        if (componentDefine) {
+            const Controller = componentDefine.getController();
+            if (Controller) {
+                let config;
+                if (layer.id! in controllers!) {
+                    //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
+                    config = controllers![layer.id!].getConfig();
+                } else if (layer.id! in elemConfigs!) {
+                    config = elemConfigs![layer.id!];
+                } else {
+                    config = componentDefine.getInitConfig();
+                    config.base.id = layer.id!;
+                }
+                const controller = new Controller()! as AbstractDesignerController;
+                /**
+                 * 此处注意，执行顺序尤为重要！！！
+                 * 第一步：动态代理绑定在前，
+                 * 第二步：赋值controller在后，
+                 * 第三步：最后才是执行create方法。
+                 * 否则导致蓝图事件执行时，获取controller实例为undefined
+                 */
+                controllers[layer.id + ''] = controller;
+                if (index != null) {
+                    controllers[`${layer.id}_${index}`] = controller;
+                    config = cloneDeep(config)
+                }
+
+                //TODO 编辑模式下兼容静态数据（后续要删除）
+                if (window.LC_ENV.mode === DesignerMode.EDIT && config?.data?.staticData)
+                    config.data.value = DataUtil.getStaticData(config.data?.staticData);
+
+                controller.create(ref.current!, config, designerManager.bpExecutor!, index).then(() => {
+                    //根据图层hide控制初始时图层显示和隐藏
+                    controller.setVisible(!layer.hide);
+                    //在组件完全渲染完毕后进行数据的加载和事件的注册
+                    if (window.LC_ENV.mode !== DesignerMode.EDIT) {
+                        //非编辑模式下使用动态代理对象，执行蓝图事件
+                        registerProxy(layer.id!, controller);
+                        controller.registerEvent();
+                        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: `translate(${layer.x!}px, ${layer.y!}px) rotate(${layer.rotate ?? 0}deg)`,
+                    visibility: editDisplay ? undefined : 'hidden',
+                    position: 'absolute',
+                    border: auxiliaryBorder ? '1px solid #65eafc' : 'none'
+                }} className={`lc-comp-item${triggerSource || ''}`}>
+                <div ref={ref} style={{
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: enableEvent ? 'auto' : 'none',
+                    position: 'relative'
+                }}/>
+            </div>
+        </Suspense>
+    )
+});
+
+
+export default ComponentContainer;
+
+const registerProxy = (compId: string, controller: AbstractDesignerController) => {
+    controller.changeData = new Proxy(controller.changeData, {
+        apply(target, thisArg, argus) {
+            controller.bpExecutor?.triggerComponentEvent(compId, "dataChange", argus[0], controller.index);
+            return target.apply(thisArg, argus as any);
+        }
+    });
+}

package/light-chaser-app/src/framework/core/ScaleAction.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractScaleObserver from "./AbstractScaleObserver.ts";
+
+export default class ScaleAction {
+
+    public static xScale: number = 1;
+    public static yScale: number = 1;
+
+    public static observers: AbstractScaleObserver[] = [];
+
+    public static doScale(xScale: number, yScale: number) {
+        ScaleAction.xScale = xScale;
+        ScaleAction.yScale = yScale;
+        ScaleAction.observers.forEach(observer => observer.doScale(xScale, yScale));
+    }
+
+    public static add(observer: AbstractScaleObserver) {
+        ScaleAction.observers.push(observer);
+        if (ScaleAction.xScale !== 1 || ScaleAction.yScale !== 1) {
+            observer.doScale(ScaleAction.xScale, ScaleAction.yScale);
+        }
+    }
+}