light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/common-component/base-info/BaseInfo.tsx

@@ -0,0 +1,238 @@
+/*
+ * 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 {Component} from 'react';
+import eventOperateStore from "../../../designer/operate-provider/EventOperateStore";
+import baseInfoStore from "./BaseInfoStore";
+import rightStore from "../../../designer/right/RightStore";
+import layerListStore from "../../../designer/left/layer-list/LayerListStore";
+import LayerUtil from "../../../designer/left/layer-list/util/LayerUtil";
+import {AlignBottomTwo, AlignHorizontalCenterTwo, AlignLeftTwo, AlignRightTwo, AlignTopTwo, AlignVerticalCenterTwo} from "@icon-park/react";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController.ts";
+import {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+import DesignerLoader from "../../../designer/loader/DesignerLoader.ts";
+import {convergenceToInterval} from "../../../util/BoundsValidatorUtil.ts";
+
+/**
+ * lc组件基础信息
+ */
+class BaseInfo extends Component<{ controller: AbstractDesignerController }, ILayerItem & { version?: string }> {
+
+    constructor(props: { controller: AbstractDesignerController }) {
+        super(props);
+        this.init();
+    }
+
+    init = () => {
+        const {activeElem} = rightStore;
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+        const layer: ILayerItem = layerConfigs[activeElem.id!];
+        if (!layer) return;
+        if (layer.type === 'group') {
+            //分组图层
+            const childLayerIds = LayerUtil.findAllChildLayer([layer.id!]).filter((id: string) => layerConfigs[id].type !== 'group');
+            const rect = this.calculateGroupRect(childLayerIds);
+            this.state = {...layer, ...rect};
+        } else {
+            //普通组件
+            const baseInfo = DesignerLoader.definitionMap[layer.type!]?.getBaseInfo();
+            this.state = {...layer, version: baseInfo?.version};
+        }
+    }
+
+    calculateGroupRect = (childLayerIds: string[]) => {
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+        let minX = +Infinity, minY = +Infinity, maxX = -Infinity, maxY = -Infinity;
+        childLayerIds.forEach((layerId: string) => {
+            const {x = 0, y = 0, width = 0, height = 0} = layerConfigs[layerId];
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + width);
+            maxY = Math.max(maxY, y + height);
+        });
+        return {x: minX, y: minY, width: maxX - minX, height: maxY - minY};
+    }
+
+    componentDidMount() {
+        const {setBaseConfigRef} = baseInfoStore;
+        setBaseConfigRef && setBaseConfigRef(this);
+    }
+
+    componentWillUnmount() {
+        const {setBaseConfigRef} = baseInfoStore;
+        setBaseConfigRef && setBaseConfigRef(null);
+    }
+
+    changeName = (value: string) => {
+        const {controller} = this.props;
+        controller.update({base: {name: value}}, {reRender: false});
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager;
+        updateLayer && updateLayer([{id: this.state.id!, name: value as string}]);
+        //如果显示图层,则更新图层名称
+        const {layerInstances} = layerListStore;
+        const layerInstance = layerInstances[this.state.id!];
+        layerInstance && (layerInstance as Component).setState({name: value});
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    handleMap: Record<string, Function> = {
+        "name": this.changeName,
+        "width": (value: number) => eventOperateStore.movableRef?.request("resizable", {
+            offsetWidth: convergenceToInterval(value as number),
+            direction: [1, 1]
+        }, true),
+        "height": (value: number) => eventOperateStore.movableRef?.request("resizable", {
+            offsetHeight: convergenceToInterval(value as number),
+            direction: [1, 1]
+        }, true),
+        "posX": (value: number) => eventOperateStore.movableRef?.request("draggable", {x: convergenceToInterval(value as number)}, true),
+        "posY": (value: number) => eventOperateStore.movableRef?.request("draggable", {y: convergenceToInterval(value as number)}, true),
+        "align": (align: string) => this.handleMap[align](),
+        "left": () => eventOperateStore.movableRef?.request("draggable", {x: 0}, true),
+        "horizontally": () => eventOperateStore.movableRef?.request("draggable", {x: convergenceToInterval(window.LC_ENV.currentManager.canvasManager!.canvasConfig.width! / 2 - this.state.width! / 2)}, true),
+        "right": () => eventOperateStore.movableRef?.request("draggable", {x: convergenceToInterval(window.LC_ENV.currentManager.canvasManager!.canvasConfig.width! - this.state.width!)}, true),
+        "top": () => eventOperateStore.movableRef?.request("draggable", {y: 0}, true),
+        "vertically": () => eventOperateStore.movableRef?.request("draggable", {y: convergenceToInterval(window.LC_ENV.currentManager.canvasManager!.canvasConfig.height! / 2 - this.state.height! / 2)}, true),
+        "bottom": () => eventOperateStore.movableRef?.request("draggable", {y: convergenceToInterval(window.LC_ENV.currentManager.canvasManager!.canvasConfig.height! - this.state.height!)}, true),
+    }
+
+    onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {id: key, data} = fieldChangeData;
+        const {targetIds, setTargetIds} = eventOperateStore;
+        if (!targetIds.includes(this.state.id as string)) {
+            const {type} = this.state;
+            if (type === 'group') {
+                const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+                const childIds = LayerUtil.findAllChildLayer([this.state.id!]).filter((id: string) => layerConfigs[id].type !== 'group');
+                setTargetIds(childIds!);
+            } else {
+                setTargetIds([this.state.id as string]);
+            }
+        }
+        const layerTimer = setTimeout(() => {
+            this.handleMap[key!](data);
+            clearTimeout(layerTimer);
+        }, 1);
+    }
+
+    buildSchema = (): Control => {
+        const {name, width, height, x, y} = this.state;
+        return {
+            type: 'grid',
+            children: [
+                {
+                    id: "name",
+                    key: "name",
+                    label: "名称",
+                    type: "input",
+                    value: name,
+
+                },
+                {
+                    id: "width",
+                    key: "width",
+                    type: "number-input",
+                    label: "宽度",
+                    value: width,
+                    reRender: true,
+                },
+                {
+                    id: "height",
+                    key: "height",
+                    type: "number-input",
+                    label: "高度",
+                    value: height,
+                    reRender: true,
+                },
+                {
+                    id: "posX",
+                    key: "posX",
+                    type: "number-input",
+                    label: "X轴",
+                    reRender: true,
+                    value: x,
+                },
+                {
+                    id: "posY",
+                    key: "posY",
+                    type: "number-input",
+                    label: "Y轴",
+                    reRender: true,
+                    value: y,
+                },
+                {
+                    id: 'align',
+                    label: '对齐',
+                    type: 'group-button',
+                    config: {
+                        items: [
+                            {
+                                value: 'left',
+                                content: <AlignLeftTwo theme="filled"
+                                                       size="14"
+                                                       strokeWidth={2}
+                                                       strokeLinecap="square"/>
+                            },
+                            {
+                                value: 'horizontally',
+                                content: <AlignHorizontalCenterTwo theme="filled"
+                                                                   size="14"
+                                                                   strokeWidth={2}
+                                                                   strokeLinecap="square"/>
+                            },
+                            {
+                                value: 'right',
+                                content: <AlignRightTwo theme="filled"
+                                                        size="14"
+                                                        strokeWidth={2}
+                                                        strokeLinecap="square"/>
+                            },
+                            {
+                                value: 'top',
+                                content: <AlignTopTwo theme="filled"
+                                                      size="14"
+                                                      strokeWidth={2}
+                                                      strokeLinecap="square"/>
+                            },
+                            {
+                                value: 'vertically',
+                                content: <AlignVerticalCenterTwo theme="filled"
+                                                                 size="14"
+                                                                 strokeWidth={2}
+                                                                 strokeLinecap="square"/>
+                            },
+                            {
+                                value: 'bottom',
+                                content: <AlignBottomTwo theme="filled"
+                                                         size="14"
+                                                         strokeWidth={2}
+                                                         strokeLinecap="square"/>
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+
+    render() {
+        const schema = this.buildSchema();
+        return (
+            <div className={'base-info-config'} style={{padding: 10}}>
+                <LCGUI schema={schema} onFieldChange={this.onFieldChange}/>
+            </div>
+        )
+    }
+}
+
+export default BaseInfo;

package/light-chaser-app/src/comps/common-component/base-info/BaseInfoStore.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 React from "react";
+import rightStore from "../../../designer/right/RightStore";
+import {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+
+/**
+ * 这个store不与mobx结合
+ */
+class BaseInfoStore {
+    /**
+     * 基础配置组件的实例引用
+     */
+    baseConfigRef: React.Component | null = null;
+
+    setBaseConfigRef = (ref: React.Component | null) => this.baseConfigRef = ref;
+
+    updateBaseConfig = (data: ILayerItem) => {
+        const {activeElem: {id}} = rightStore;
+        if (id !== data?.id) return;
+        this.baseConfigRef?.setState(data);
+    }
+
+}
+
+const baseInfoStore = new BaseInfoStore();
+export default baseInfoStore;

package/light-chaser-app/src/comps/common-component/config-code/ConfigCode.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 eventOperateStore from "../../../designer/operate-provider/EventOperateStore.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import footerStore from "../../../designer/footer/FooterStore.ts";
+import {useRef} from "react";
+import {Button, Modal} from "antd";
+import MonacoEditor from "light-chaser-ui/lib/code-editor/MonacoEditor.tsx";
+import ObjectUtil from "light-chaser-util/lib/ObjectUtil.ts";
+import {SafeEvalUtil} from "light-chaser-util/lib/SafeEvalUtil.ts";
+
+export default function ConfigCode() {
+    const codeRef = useRef("");
+    const {targetIds} = eventOperateStore;
+    const {layerConfigs, controllers} = window.LC_ENV.currentManager.layerManager;
+    if (targetIds.length !== 1 || layerConfigs[targetIds[0]].type === 'group') {
+        globalMessage.messageApi?.warning('请选择组件后进行操作');
+        return null;
+    }
+    const componentId = targetIds[0];
+    const controller = controllers[componentId];
+    if (!controller)
+        return null;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {base, ...config} = controller.getConfig();
+    codeRef.current = "const config = " + ObjectUtil.objToCodeStr(config);
+
+    const onCancel = () => footerStore.setConfigCodeVisible(false);
+
+    const onChange = (value?: string) => value && (codeRef.current = value)
+
+    const doSave = () => {
+        try {
+            const code = codeRef.current?.trim().replace(/^const config =/, '').trim();
+            controller.update(SafeEvalUtil.run(code))
+            globalMessage.messageApi?.success('配置已更新');
+        } catch (e) {
+            globalMessage.messageApi?.error('代码错误,请检查');
+            console.error(e)
+        }
+    }
+
+    return (
+        <Modal title={'代码编辑'} open={true} width={500} maskClosable={false}
+               onCancel={onCancel} style={{top: 0, right: 0, position: 'absolute'}} mask={false}
+               footer={[
+                   <Button key={'save'} style={{width: 70, height: 30}} onClick={doSave} type="primary">保存</Button>,
+                   <Button key={'cancel'} style={{width: 70, height: 30}} onClick={onCancel}>取消</Button>
+               ]}>
+            <MonacoEditor onChange={onChange} language={'javascript'} value={codeRef.current} quickSuggestions={true} height={700}/>
+        </Modal>
+    )
+}

package/light-chaser-app/src/comps/common-component/data-config/DataConfig.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 AbstractController from "../../../framework/core/AbstractController";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController";
+import {
+    APIConfig,
+    DataConfigType,
+    ICommonApi,
+    IDatabase,
+    IMQTTConfig,
+    IWebSocketConfig
+} from "light-chaser-types/types/DataSourceTypes.ts";
+import DataSourceConfig from "../data-source-config/DataSourceConfig.tsx";
+import componentDataGvParser from "../../../designer/left/global-variable/parse/ComponentDataGvParser.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {useEffect} from "react";
+
+export interface DataConfigProps<T extends AbstractController = AbstractDesignerController> {
+    controller: T;
+}
+
+const DataConfig = (props: DataConfigProps) => {
+    const {controller} = props;
+    const componentConfig = controller?.getConfig();
+    const {data: dataSource} = componentConfig;
+    const onSave = (config: DataConfigType, testResult?: any) => {
+        controller.update({data: config}, {reRender: false});
+        //静态数据保存时候同步更新组件数据
+        if (config.sourceType === 'static')
+            controller.changeData(testResult);
+        //分析全局变量的绑定与解绑
+        if (config.sourceType === 'globalVariable')
+            componentDataGvParser.directBindByCompIdAndGvId(controller.getConfig().base.id, config.globalVariable?.gvId ?? '');
+        else
+            componentDataGvParser.bindConfigToGv(controller);
+        globalMessage.messageApi?.success('配置项已保存');
+    }
+
+    const changeComponentData = (data: any) => {
+        try {
+            controller.changeData(data);
+        } catch (e) {
+            console.log('更新数据失败，组件可能无法识别该数据', e);
+        }
+    }
+
+    const apiRequestBefore = (config: APIConfig) => {
+        return componentDataGvParser.parseApiData(config);
+    }
+
+    const commonApiRequestBefore = (config: ICommonApi) => {
+        return componentDataGvParser.parseCommonApi(config);
+    }
+
+    const databaseRequestBefore = (config: IDatabase) => {
+        return componentDataGvParser.parseDatabase(config);
+    }
+
+    const wsTestBefore = (config: IWebSocketConfig) => {
+        return componentDataGvParser.parseWebSocket(config);
+    }
+
+    const mqttTestBefore = (config: IMQTTConfig) => {
+        return componentDataGvParser.parseMqtt(config);
+    }
+
+    useEffect(() => {
+        /**
+         * 监视配置面板宽度变化，以实时调整代码编辑器的宽度，达到代码编辑器宽度自适应的效果。后续如果有更好的解决方案，请修改此处代码。
+         */
+        const configPanelDom = document.querySelector(".lc-config-panel");
+        if (configPanelDom) {
+            // 创建一个 ResizeObserver 实例
+            const resizeObserver = new ResizeObserver(() => {
+                const dataConfigDom = document.querySelector('.data-config');
+                if (!dataConfigDom)
+                    return;
+                const computedStyle = window.getComputedStyle(dataConfigDom);
+                const contentWidth = dataConfigDom.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
+                const editorContainerDomArr = configPanelDom.getElementsByClassName('monaco-editor-container');
+                if (editorContainerDomArr.length > 0) {
+                    for (let i = 0; i < editorContainerDomArr.length; i++) {
+                        const editorDom = editorContainerDomArr[i] as HTMLElement;
+                        if (editorDom)
+                            editorDom.style.width = contentWidth + 'px';
+                    }
+                }
+            });
+
+            // 开始观察目标元素
+            resizeObserver.observe(configPanelDom);
+
+            return () => {
+                resizeObserver.unobserve(configPanelDom);
+                resizeObserver.disconnect();
+            }
+        }
+    }, []);
+
+    return (
+        <DataSourceConfig data={dataSource} onSave={onSave}
+                          commonApiTestBefore={commonApiRequestBefore}
+                          commonApiTestAfter={changeComponentData}
+                          databaseTestBefore={databaseRequestBefore}
+                          databaseTestAfter={changeComponentData}
+                          apiTestBefore={apiRequestBefore}
+                          apiTestAfter={changeComponentData}
+                          globalVariableTestAfter={changeComponentData}
+                          wsTestBefore={wsTestBefore}
+                          wsTestAfter={changeComponentData}
+                          mqttTestBefore={mqttTestBefore}
+                          mqttTestAfter={changeComponentData}/>
+    );
+}
+
+export default DataConfig;
+
+
+
+
+