light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/loader/ViewDesignerLoader.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 DesignerLoader from "./DesignerLoader.ts";
+import {DesignerMode, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import baseApi from "../../api/engineering/BaseApi.ts";
+import DesignerManager from "../manager/DesignerManager.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+
+export default class ViewDesignerLoader extends DesignerLoader {
+
+    /**
+     * 加载预览模式下的项目数据
+     * @param id 项目id
+     */
+    async getProjectData(id: string): Promise<IDesignerManager | null> {
+        const res = await baseApi.getProjectData(id);
+        const {id: projectId, name, data} = res!;
+        if (data) {
+            data!.id = projectId;
+            data!.name = name;
+        }
+        this.projectInfo = {id: projectId, name: res?.name};
+        return data ?? {};
+    }
+
+
+    /**
+     * 初始化预览模式下运行环境
+     * @param projectId 项目id
+     * @param manager 设计器管理器
+     */
+    initializeRuntimeEnv(projectId: string, manager: DesignerManager) {
+        if (manager) {
+            this.mode = DesignerMode.PREVIEW;
+            //暴露必要的环境到 window
+            window.LC_ENV = {
+                ...window.LC_ENV,
+                projectId,
+                mode: DesignerMode.PREVIEW,
+                controllers: manager.layerManager.controllers,
+                definitions: DesignerLoader.definitionMap,
+                currentManager: manager
+            }
+            this.setLoaded(true);
+        } else {
+            globalMessage?.messageApi?.error("项目不存在");
+        }
+    }
+}

package/light-chaser-app/src/designer/manager/DesignerManager.ts

@@ -0,0 +1,96 @@
+/*
+ * 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 AbstractManager from "./core/AbstractManager.ts";
+import CanvasManager from "../header/items/canvas/CanvasManager.ts";
+import ThemeManager from "../header/items/theme/ThemeManager.ts";
+import BluePrintManager from "../blueprint/manager/BluePrintManager.ts";
+import FilterManager from "./FilterManager.ts";
+import LayerManager from "./LayerManager.ts";
+import BPExecutor from "../blueprint/core/BPExecutor.ts";
+import GlobalVariableManager from "./GlobalVariableManager.ts";
+import GlobalFilterManger from "./GlobalFilterManger.ts";
+import {DesignerMode, DesignerScene, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import {ISelectOption} from "light-chaser-ui/lib/select/Select.tsx";
+
+/**
+ * 整个设计器的所有数据初始化和数据聚合，统一通过该管理器进行分发和处理
+ */
+export default class DesignerManager extends AbstractManager<IDesignerManager> {
+
+    constructor(scene: DesignerScene) {
+        super();
+        this.scene = scene;
+    }
+
+    //项目id
+    public id: string | null = null;
+    //项目名称
+    public name: string | null = null;
+    //场景
+    public scene: DesignerScene | null = null;
+    //画布管理器
+    public canvasManager = new CanvasManager();
+    //图层管理器
+    public layerManager = new LayerManager();
+    //主题管理器
+    public themeManager = new ThemeManager();
+    //蓝图管理器
+    public bluePrintManager = new BluePrintManager();
+    //过滤器管理器
+    public filterManager = new FilterManager();
+    //全局滤镜管理器
+    public globalFilterManger = new GlobalFilterManger();
+    //全局变量管理器
+    public globalVariableManager = new GlobalVariableManager();
+    //蓝图事件执行器
+    public bpExecutor: BPExecutor = new BPExecutor(this);
+    //字体列表
+    public fonts: ISelectOption[] = [];
+    //总计需要创建的组件数量
+    public total: number = 0;
+
+    public destroy = (): void => {
+        this.canvasManager.destroy();
+        this.layerManager.destroy();
+        this.themeManager.destroy();
+        this.bluePrintManager.destroy();
+        this.globalVariableManager.destroy();
+        this.globalFilterManger.destroy();
+    }
+
+    public getData = (): IDesignerManager => {
+        return {
+            canvasManager: this.canvasManager.getData(),
+            themeManager: this.themeManager.getData(),
+            layerManager: this.layerManager.getData(),
+            bluePrintManager: this.bluePrintManager.getData(),
+            filterManager: this.filterManager.getData(),
+            globalVariableManager: this.globalVariableManager.getData(),
+            globalFilterManger: this.globalFilterManger.getData(),
+        };
+    }
+
+    public init(data: IDesignerManager, mode: DesignerMode): void {
+        data.id && (this.id = data.id);
+        data.name && (this.name = data.name);
+        data.canvasManager && this.canvasManager.init(data.canvasManager!);
+        data.themeManager && this.themeManager.init(data.themeManager!);
+        data.layerManager && this.layerManager.init(data.layerManager!);
+        data.filterManager && this.filterManager.init(data.filterManager!);
+        data.globalVariableManager && this.globalVariableManager.init(data.globalVariableManager!);
+        data.globalFilterManger && this.globalFilterManger.init(data.globalFilterManger!);
+        const blueprints = Array.isArray(data?.bluePrintManager)
+            ? data.bluePrintManager.filter(bp => bp !== undefined)
+            : (data.bluePrintManager ? [data.bluePrintManager] : []);
+        this.bluePrintManager.init(blueprints, mode);
+    }
+}

package/light-chaser-app/src/designer/manager/FilterManager.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 {action, makeObservable, observable, toJS} from "mobx";
+import AbstractManager from "./core/AbstractManager.ts";
+import idGenerate from "../../../../light-chaser-util/lib/IdGenerate.ts";
+import {IFilterManager, IFilter} from "light-chaser-types/types/FilterTypes.ts";
+
+
+class FilterManager extends AbstractManager<IFilterManager> {
+    constructor() {
+        super();
+        makeObservable(this, {
+            filters: observable,
+            visible: observable,
+            addFilter: action,
+            delFilter: action,
+            updateFilter: action,
+            setVisibility: action,
+        })
+
+    }
+
+    filters: Record<string, IFilter> = {};
+
+    editFilter: IFilter = {id: '', name: '', func: 'function filter(data){\n\treturn data;\n}'};
+
+    visible: boolean = false;
+
+    setEditFilter = (filter: IFilter) => this.editFilter = filter;
+
+    setVisibility = (visible: boolean) => {
+        this.visible = visible;
+        if (!visible)
+            this.editFilter = {id: '', name: '', func: ''};
+    };
+
+    addFilter = (filter: IFilter) => {
+        filter.id = idGenerate.generateId();
+        this.filters[filter.id] = filter
+    };
+
+    delFilter = (id: string) => delete this.filters[id];
+
+    updateFilter = (filter: IFilter) => this.filters[filter.id] = filter;
+
+
+    public init(data: IFilterManager): void {
+        this.filters = data.filters || {};
+    }
+
+    public getData(): IFilterManager {
+        return {filters: toJS(this.filters)}
+    }
+
+    public destroy(): void {
+        this.filters = {}
+    }
+}
+
+export default FilterManager;

package/light-chaser-app/src/designer/manager/GlobalFilterManger.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 {action, makeObservable, observable, runInAction, toJS} from "mobx";
+import AbstractManager from "./core/AbstractManager.ts";
+import {IFilterConfigType, IGlobalFilterManger} from "light-chaser-types/types/FilterTypes.ts";
+
+const defaultConfig: IFilterConfigType = {
+    enable: false,
+    blur: 0,
+    brightness: 1,
+    contrast: 1,
+    opacity: 1,
+    saturate: 1,
+    hueRotate: 0
+}
+
+export default class GlobalFilterManger extends AbstractManager<IGlobalFilterManger> {
+
+    constructor() {
+        super();
+        makeObservable(this, {
+            config: observable,
+            setConfig: action,
+            updateConfig: action,
+        })
+    }
+
+    public config: IFilterConfigType = defaultConfig;
+
+    public setConfig = (config: IFilterConfigType) => this.config = config;
+
+    public updateConfig = (config: Partial<IFilterConfigType>) => this.config = {...this.config, ...config};
+
+    public init(data: IGlobalFilterManger | undefined): void {
+        runInAction(() => {
+            this.config = data?.config ? {...defaultConfig, ...data.config} : defaultConfig;
+        })
+    }
+
+    public getData(): IGlobalFilterManger {
+        return {config: toJS(this.config)}
+    }
+
+    public destroy(): void {
+        runInAction(() => {
+            this.config = defaultConfig;
+        })
+    }
+
+
+    public getFilterStyle = () => {
+        const filter = this.config;
+        if (!filter?.enable) return {};
+        const {blur = 0, brightness = 1, contrast = 1, opacity = 1, saturate = 1, hueRotate = 0} = filter;
+        return {
+            filter: `blur(${blur}px) brightness(${brightness}) contrast(${contrast}) opacity(${opacity}) saturate(${saturate}) hue-rotate(${hueRotate}deg)`
+        };
+    }
+}
+

package/light-chaser-app/src/designer/manager/GlobalVariableManager.ts

@@ -0,0 +1,148 @@
+/*
+ * 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 {action, makeObservable, observable} from "mobx";
+import AbstractManager from "./core/AbstractManager.ts";
+import {IGlobalVariable, IGlobalVariableManager} from "light-chaser-types/types/GlobalVariableTypes.ts";
+import GlobalVariable from "../left/global-variable/GlobalVariable.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import idGenerate from "light-chaser-util/lib/IdGenerate.ts";
+import DataUtil from "../../util/DataUtil.ts";
+import {cloneDeep} from "lodash";
+
+class GlobalVariableManager extends AbstractManager<IGlobalVariableManager> {
+
+    constructor() {
+        super();
+        makeObservable(this, {
+            editPanelVisible: observable,
+            globalVariableInstance: observable,
+            setEditPanelVisible: action,
+            createOrUpdateGlobalVariable: action,
+            copyGlobalVariable: action,
+            deleteGlobalVariable: action,
+            init: action,
+        })
+    }
+
+    editPanelVisible = false;
+
+    globalVariableInstance: Record<string, GlobalVariable> = {};
+
+    /**
+     * 当前被编辑的全局变量
+     */
+    editGlobalVariable: IGlobalVariable | null = {
+        triggerSource: {
+            sourceType: 'static'
+        }
+    };
+
+    setEditPanelVisible = (visible: boolean) => {
+        this.editPanelVisible = visible;
+        if (!visible)
+            this.setEditGlobalVariable({
+                triggerSource: {
+                    sourceType: 'static'
+                }
+            });
+    };
+
+    /**
+     * 创建或更新全局变量（仅在编辑全局变量时使用）
+     */
+    createOrUpdateGlobalVariable = (): boolean => {
+        if (!this.editGlobalVariable || !this.editGlobalVariable.key) {
+            globalMessage.messageApi?.error("请填写变量名");
+            return false;
+        }
+        const {id, key, value, reRender = false, triggerSource} = this.editGlobalVariable;
+        if (id) {
+            //更新
+            if (Object.values(this.globalVariableInstance).some((item) => {
+                const gv = item.getGlobalVariable();
+                return gv.key === key && id !== gv.id
+            })) {
+                globalMessage.messageApi?.error("全局变量名重复");
+                return false;
+            }
+            this.globalVariableInstance[id].update(this.editGlobalVariable);
+        } else {
+            //创建
+            if (Object.values(this.globalVariableInstance).some((item) => item.getGlobalVariable().key === key)) {
+                globalMessage.messageApi?.error("全局变量名重复");
+                return false;
+            }
+            const newId = idGenerate.generateId();
+            const gvValue = triggerSource?.sourceType === 'static' ? DataUtil.getStaticData(triggerSource?.staticData) : value;
+            this.globalVariableInstance[newId] = new GlobalVariable(newId, key!, gvValue, reRender, [], triggerSource);
+        }
+        if (this.editPanelVisible) {
+            this.setEditPanelVisible(false);
+            this.setEditGlobalVariable(null);
+            globalMessage.messageApi?.success("保存成功");
+        }
+        return true;
+    }
+
+    activeGlobalVariable = (id: string) => {
+        this.editGlobalVariable = this.globalVariableInstance[id].getGlobalVariable();
+    }
+
+    copyGlobalVariable = (id: string) => {
+        const gv = this.globalVariableInstance[id].getGlobalVariable();
+        gv.key = gv.key! + "-副本";
+        if (Object.values(this.globalVariableInstance).some((item) => item.getGlobalVariable().key === gv.key)) {
+            globalMessage.messageApi?.error("全局变量名重复");
+            return;
+        }
+        gv.id = idGenerate.generateId();
+        this.globalVariableInstance[gv.id!] = new GlobalVariable(gv.id!, gv.key!, cloneDeep(gv.value), !!gv.reRender, [], cloneDeep(gv.triggerSource));
+    }
+
+    setEditGlobalVariable = (gv: IGlobalVariable | null) => this.editGlobalVariable = gv;
+
+
+    deleteGlobalVariable = (id: string) => {
+        delete this.globalVariableInstance[id];
+        //删除变量是，同时计算蓝图中那些被使用到的变量节点也要一并删除
+        const {delNode} = window.LC_ENV.currentManager.bluePrintManager;
+        delNode([id]);
+    }
+
+
+    public init = (data: IGlobalVariableManager): void => {
+        if (!data || !data.globalVariables)
+            return;
+        Object.values(data.globalVariables).forEach((item) => {
+            const {id, key, value, bindTarget, reRender = false, triggerSource} = item;
+            this.globalVariableInstance[id!] = new GlobalVariable(id!, key!, value, reRender, bindTarget, triggerSource);
+        })
+    }
+
+    public getData = (): IGlobalVariableManager => {
+        const globalVariables = Object.values(this.globalVariableInstance).reduce((pre: Record<string, IGlobalVariable> = {}, cur) => {
+            const gv = cur.getGlobalVariable();
+            pre[gv.id!] = gv;
+            return pre;
+        }, {});
+        return {globalVariables};
+    }
+
+    public destroy = (): void => {
+        Object.values(this.globalVariableInstance).forEach((item) => item.stop());
+        this.globalVariableInstance = {};
+        this.editGlobalVariable = null;
+        this.editPanelVisible = false;
+    }
+}
+
+export default GlobalVariableManager;

package/light-chaser-app/src/designer/manager/LayerManager.ts

@@ -0,0 +1,170 @@
+/*
+ * 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 {action, makeObservable, observable, runInAction, toJS} from "mobx";
+import {isEqual} from "lodash";
+import AbstractDesignerController from "../../framework/core/AbstractDesignerController.ts";
+import ObjectUtil from "../../../../light-chaser-util/lib/ObjectUtil.ts";
+import AbstractManager from "./core/AbstractManager.ts";
+import {ILayerItem, ILayerManager} from "light-chaser-types/types/LayerTypes.ts";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+
+/**
+ * 设计器核心状态管理类，记录了设计器中的核心数据。包括组件配置，组件布局。 全局设置等。
+ */
+class LayerManager extends AbstractManager<ILayerManager> {
+
+    constructor() {
+        super();
+        makeObservable(this, {
+            layerConfigs: observable.shallow,
+            enableAdsorption: observable,
+            setEnableAdsorption: action,
+            init: action,
+            destroy: action,
+            addItem: action,
+            delItem: action,
+            updateLayer: action,
+            flashGlobalTheme: action,
+            delLayout: action,
+        });
+    }
+
+    /**
+     * 每个图层元素的配置数据
+     */
+    elemConfigs: Record<string, any> | null = {};
+
+    /**
+     * 画布上图层组件id与其实例对象的映射
+     */
+    controllers: Record<string, AbstractDesignerController> = {};
+
+    /**
+     * 布局配置
+     */
+    layerConfigs: Record<string, ILayerItem> = {};
+
+    /**
+     * 图层头指针
+     */
+    layerHeader: string | undefined = undefined;
+
+    /**
+     * 图层尾指针
+     */
+    layerTail: string | undefined = undefined;
+
+    /**
+     * 是否开启图层原有事件
+     */
+    enableEvent: boolean = false;
+
+    /**
+     * 是否开启吸附效果
+     */
+    enableAdsorption: boolean = true;
+
+    setEnableAdsorption = (enable: boolean) => {
+        this.enableAdsorption = enable;
+    }
+
+    setEnableEvent = (enable: boolean) => {
+        this.enableEvent = enable;
+        //重新渲染所有图层
+        this.reRenderLayer();
+    };
+
+    /**
+     * 添加元素
+     */
+    addItem = (layer: ILayerItem) => this.layerConfigs[layer.id + ""] = layer;
+
+    /**
+     * 删除元素
+     */
+    delItem = (ids: string[]) => {
+        for (const id of ids) {
+            const controller = this.controllers[id];
+            if (controller)
+                controller.destroy();
+            delete this.layerConfigs[id];
+            delete this.controllers[id];
+        }
+    };
+
+    /**
+     * 更新布局
+     */
+    updateLayer = (items: ILayerItem[], reRender: boolean = true) => {
+        for (const item of items) {
+            const oldItem = this.layerConfigs[item.id + ""];
+            if (!isEqual(oldItem, item))
+                this.layerConfigs[item.id + ""] = reRender ? {...ObjectUtil.merge(oldItem, item)} : ObjectUtil.merge(oldItem, item);
+        }
+    };
+
+    reRenderLayer = () => runInAction(() => this.layerConfigs = {...this.layerConfigs});
+
+    /**
+     * 直接删除只能删除type = group的图层数据，要同时删除组件布局数据，需要调用delItem
+     * @param ids
+     */
+    delLayout = (ids: string[]) => {
+        for (const id of ids) {
+            if (this.layerConfigs[id] && this.layerConfigs[id].type === "group")
+                delete this.layerConfigs[id];
+        }
+    }
+
+    flashGlobalTheme = (newTheme: IThemeItem) => {
+        this.controllers && Object.keys(this.controllers).forEach((key: string) => {
+            const instance = this.controllers[key];
+            if (instance)
+                instance.updateTheme(newTheme);
+        });
+    };
+
+
+    /**
+     * 获取store数据
+     */
+    getData(): ILayerManager {
+        return {
+            layerHeader: this.layerHeader,
+            layerTail: this.layerTail,
+            layerConfigs: toJS(this.layerConfigs),
+            elemConfigs: Object.keys(this.layerConfigs).reduce((pre, key) => {
+                if (this.controllers[key])
+                    pre[key] = this.controllers[key]?.getConfig();
+                return pre;
+            }, {} as Record<string, any>),
+        };
+    }
+
+    public init(data: ILayerManager): void {
+        this.elemConfigs = data.elemConfigs || this.elemConfigs;
+        this.layerConfigs = data.layerConfigs || this.layerConfigs;
+        this.layerHeader = data.layerHeader || this.layerHeader;
+        this.layerTail = data.layerTail || this.layerTail;
+    }
+
+    public destroy(): void {
+        Object.values(this.controllers).forEach((c) => c.destroy());
+        this.controllers = {};
+        this.elemConfigs = {};
+        this.layerConfigs = {};
+        this.layerHeader = undefined;
+        this.layerTail = undefined;
+    }
+}
+
+export default LayerManager;