light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/text-scroller/TextScrollerDefinition.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 textScrollerImg from './text-scroller.png';
+import {TextScrollerController} from "./TextScrollerController.ts";
+import {TextScrollerComponentProps} from "./TextScrollerComponent.tsx";
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+import {lazy} from "react";
+
+const TextScrollerConfig = lazy(() => import("./TextScrollerConfig.tsx").then((module) => ({default: module.TextScrollerConfig})));
+
+export default class TextScrollerDefinition extends AbstractDesignerDefinition<TextScrollerController, TextScrollerComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "文字弹幕",
+            compKey: "TextScroller",
+            categorize: "info",
+            subCategorize: "text",
+            width: 320,
+            height: 26,
+        };
+    }
+
+    getChartImg(): string | null {
+        return textScrollerImg;
+    }
+
+    getController(): ClazzTemplate<TextScrollerController> | null {
+        return TextScrollerController;
+    }
+
+    getInitConfig(): TextScrollerComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '文字弹幕',
+                type: 'TextScroller',
+            },
+            style: {
+                speed: 0.1,
+                fontSize: 16,
+                fontWeight: 500,
+                color: '#fff',
+                fontFamily: 'Arial',
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+            data: {
+                sourceType: 'static',
+                value: '文字弹幕'
+            }
+        };
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        const menuMapping = super.getMenuToConfigContentMap();
+        menuMapping['style'] = TextScrollerConfig;
+        return menuMapping;
+    }
+
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "click",
+                name: "点击时",
+            }
+        ]);
+    }
+}

package/light-chaser-app/src/comps/loop-container/LoopContainer.less

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.loop-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 10px;
+
+  .loop-item {
+    flex-shrink: 0;
+  }
+}

package/light-chaser-app/src/comps/loop-container/LoopContainer.tsx

@@ -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 {CSSProperties, ForwardedRef, forwardRef, useImperativeHandle, useRef, useState} from "react";
+import './LoopContainer.less';
+import {LoopContainerProps} from "./LoopContainerController.ts";
+import CanvasRender from "../../designer/left/layer-list/CanvasRender.ts";
+
+export interface ILoopContainerStyle {
+    overflow?: string;
+    flexDirection?: string;
+    flexWrap?: string;
+    gap?: number;
+}
+
+export interface LoopContainerInstance {
+    updateConfig: (newConfig: LoopContainerProps) => void;
+    updateVisible: (visible: boolean) => void;
+    setEventHandler: (eventMap: Record<string, (...args: any[]) => any>) => void;
+}
+
+const LoopContainer = forwardRef((props: LoopContainerProps, ref: ForwardedRef<LoopContainerInstance>) => {
+    const {manager, ...cfg} = props;
+    const loopContainerRef = useRef<HTMLDivElement | null>(null);
+    const [visible, setVisible] = useState(true);
+    const [config, setConfig] = useState<LoopContainerProps>({...cfg ?? {}});
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({...newConfig}),
+        updateVisible: (visible) => setVisible(visible),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+    }));
+
+    const eventHandlerMap = useRef<Record<string, (...args: any[]) => any>>({});
+
+    const onClick = () => {
+        if ('click' in eventHandlerMap.current)
+            eventHandlerMap.current['click']();
+    }
+
+    const {width = 0, height = 0} = manager?.canvasManager?.canvasConfig ?? {};
+    const {value = []} = config?.data ?? {};
+    return (
+        <>
+            {
+                visible && <div className={'loop-container'} ref={loopContainerRef} onClick={onClick}
+                                style={{...config.style as CSSProperties}}>
+                    {
+                        value.map((_: any, index: any) => {
+                            return <div key={index} style={{width, height}} className="loop-item">
+                                {CanvasRender.buildCanvasComponents(manager!, '-loop', index)}
+                            </div>
+                        })
+                    }
+                </div>
+            }
+        </>
+    )
+})
+
+export default LoopContainer;

package/light-chaser-app/src/comps/loop-container/LoopContainerConfig.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+import LoopContainerController, {LoopContainerProps} from "./LoopContainerController.ts";
+import {ConfigType} from "../../designer/right/ConfigContent.tsx";
+
+const LoopContainerConfig: React.FC<ConfigType<LoopContainerController>> = ({controller}) => {
+
+    const config = controller.getConfig()?.style ?? {};
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        controller.update(dataFragment as LoopContainerProps);
+    }
+
+    const schema: Control = {
+        key: 'style',
+        type: 'grid',
+        children: [
+            {
+                key: 'flexDirection',
+                type: 'select',
+                label: '布局方式',
+                value: config?.flexDirection,
+                config: {
+                    options: [
+                        {value: 'row', label: '横向'},
+                        {value: 'column', label: '纵向'},
+                    ]
+                }
+            },
+            {
+                key: 'flexWrap',
+                type: 'select',
+                label: '是否换行',
+                value: config?.flexWrap,
+                config: {
+                    options: [
+                        {value: 'nowrap', label: '固定一行'},
+                        {value: 'wrap', label: '溢出换行'},
+                    ]
+                }
+            },
+            {
+                key: 'gap',
+                type: 'number-input',
+                label: '间距',
+                value: config?.gap ?? 0,
+                config: {
+                    min: 0
+                }
+            },
+            {
+                key: 'overflow',
+                type: 'select',
+                label: '溢出范围',
+                value: config?.overflow,
+                config: {
+                    options: [
+                        {label: '隐藏', value: 'hidden'},
+                        {label: '滚动', value: 'auto'},
+                    ]
+                }
+            }
+        ]
+    }
+
+    return (
+        <div style={{padding: 10}}><LCGUI schema={schema} onFieldChange={onFieldChange}/></div>
+    )
+}
+
+export default LoopContainerConfig;

package/light-chaser-app/src/comps/loop-container/LoopContainerController.ts

@@ -0,0 +1,115 @@
+/*
+ * 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 LoopContainer, {ILoopContainerStyle, LoopContainerInstance} from "./LoopContainer.tsx";
+import AbstractDesignerController from "../../framework/core/AbstractDesignerController";
+import {ComponentInfoType} from "light-chaser-types/types/ComponentTypes.ts";
+import {DesignerMode, DesignerScene, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import {IFilterConfigType} from "light-chaser-types/types/FilterTypes.ts";
+import BPExecutor from "../../designer/blueprint/core/BPExecutor.ts";
+import {DataConfigType} from "light-chaser-types/types/DataSourceTypes.ts";
+import {UpdateOptions} from "../../framework/core/AbstractController.ts";
+import ObjectUtil from "light-chaser-util/lib/ObjectUtil.ts";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import DesignerManager from "../../designer/manager/DesignerManager.ts";
+import DataUtil from "../../util/DataUtil.ts";
+
+export interface LoopContainerProps {
+    base: ComponentInfoType;
+    filter?: IFilterConfigType;
+    style?: ILoopContainerStyle;
+    data?: DataConfigType;
+    managerData?: IDesignerManager;
+    manager?: DesignerManager;
+}
+
+export default class LoopContainerController extends AbstractDesignerController<LoopContainerInstance, LoopContainerProps> {
+
+    public manager: DesignerManager = new DesignerManager(DesignerScene.LOOP_CONTAINER);
+    //循环容器是否已经完整初始化完毕（此属性帮助循环容器在首次渲染时正确的获取初始化配置）
+    private initialized = false;
+
+    async create(container: HTMLElement, config: LoopContainerProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        if (!config.managerData)
+            return;
+        this.manager.init(config.managerData, window.LC_ENV.mode);
+        this.manager.id = config.base.id;
+        this.manager.name = config.base.name;
+        this.instance = await ComponentUtil.createAndRender<LoopContainerInstance>(container, LoopContainer, {...config, manager: this.manager});
+        this.registerEvent();
+        if (this.config?.data?.value)
+            this.changeData(this.config?.data?.value)
+        if (window.LC_ENV.mode !== DesignerMode.EDIT)
+            bpExecutor.triggerComponentEvent(config.base.id, "loaded", config);
+        this.initialized = true;
+    }
+
+    public getConfig(): LoopContainerProps | null {
+        if (this.initialized)
+            this.config!.managerData = this.manager?.getData();
+        return this.config;
+    }
+
+    update(config: LoopContainerProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender) {
+            //更新组件数据
+            this.instance?.updateConfig(this.config!);
+        }
+    }
+
+    public setVisible(visible: boolean) {
+        this.instance?.updateVisible(visible);
+    }
+
+    changeData(data: any) {
+        if (!Array.isArray(data)) {
+            console.warn('循环容器的数据源必须是数组: ', data);
+            return;
+        }
+        if (this.config?.data)
+            this.config.data.value = data;
+        this.update(this.config!);
+        const timer = setTimeout(() => {
+            if (this.manager) {
+                const {controllers} = this.manager.layerManager;
+                const keys = Object.keys(controllers);
+                data.forEach((item, index) => {
+                    keys.filter((key) => key.endsWith(`_${index}`)).forEach((key) => {
+                        const controller = controllers[key];
+                        if (controller?.config?.data) {
+                            if (controller.config.data.staticData)
+                                controller.config.data.staticData['value'] = item;
+                            else
+                                controller.config.data['staticData'] = {value: item}
+                        }
+                        const itemVal = DataUtil.getStaticData(controller.config.data?.staticData);
+                        controller && controller.changeData(itemVal);
+                    })
+                })
+            }
+            clearTimeout(timer);
+        }, 10)
+
+    }
+
+    registerEvent() {
+        if (this.instance) {
+            const nodeId = this.config?.base?.id ?? '';
+            const executor = this.bpExecutor;
+            this.instance.setEventHandler({
+                click: () => executor?.triggerComponentEvent(nodeId!, "click", this.config)
+            })
+        }
+    }
+}

package/light-chaser-app/src/comps/loop-container/LoopContainerDefinition.ts

@@ -0,0 +1,127 @@
+/*
+ * 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 LoopContainerController, {LoopContainerProps} from "./LoopContainerController.ts";
+import AbstractController from "../../framework/core/AbstractController.ts";
+import {Data, Optimize, SettingOne} from "@icon-park/react";
+import React from "react";
+import {BaseInfoType, MenuInfo, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import AbstractDesignerDefinition, {ActionInfo} from "../../framework/core/AbstractDesignerDefinition.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+import AbstractDesignerController from "../../framework/core/AbstractDesignerController.ts";
+
+const BaseInfo = React.lazy(() => import("../common-component/base-info/BaseInfo"));
+const DataConfig = React.lazy(() => import("../common-component/data-config/DataConfig.tsx"));
+const LoopContainerConfig = React.lazy(() => import("./LoopContainerConfig.tsx"));
+
+export default class LoopContainerDefinition extends AbstractDesignerDefinition<LoopContainerController, LoopContainerProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "循环容器",
+            compKey: "LoopContainer",
+        };
+    }
+
+    getChartImg(): string | null {
+        return null;
+    }
+
+    getController(): ClazzTemplate<LoopContainerController> | null {
+        return LoopContainerController;
+    }
+
+    getInitConfig(): LoopContainerProps {
+        return {
+            base: {
+                id: "",
+                name: '循环容器',
+                type: 'LoopContainer',
+            },
+            style: {
+                overflow: 'scroll',
+                flexDirection: 'column',
+                flexWrap: 'nowrap',
+                gap: 10
+            },
+            data: {
+                sourceType: 'static',
+                value: [],
+            },
+            managerData: {}
+        };
+    }
+
+    getMenuList(): Array<MenuInfo> {
+        return [
+            {
+                icon: SettingOne,
+                key: 'base',
+                name: '基础',
+            },
+            {
+                icon: Optimize,
+                key: 'style',
+                name: '样式',
+            },
+            {
+                icon: Data,
+                name: '数据',
+                key: 'data',
+            },
+        ];
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: LoopContainerConfig,
+            data: DataConfig
+        };
+    }
+
+    getEventList(): EventInfo[] {
+        return [
+            ...super.getEventList(),
+            {
+                id: "click",
+                name: "点击时",
+            }
+        ];
+    }
+
+    getActionList(): ActionInfo[] {
+        return [
+            {
+                name: "显示",
+                id: "show",
+                handler: (controller: AbstractController) => {
+                    (controller as LoopContainerController).setVisible(true);
+                }
+            },
+            {
+                name: "隐藏",
+                id: "hide",
+                handler: (controller: AbstractController) => {
+                    (controller as LoopContainerController).setVisible(false);
+                }
+            },
+            {
+                name: "更新组件数据",
+                id: "updateData",
+                handler: (controller: AbstractDesignerController, params?: object) => {
+                    controller.changeData(params);
+                }
+            },
+        ];
+    }
+
+}

package/light-chaser-app/src/comps/map/AMapComponent.less

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+.a-map {
+  width: 100%;
+  height: 100%;
+
+  .amap-logo, .amap-copyright {
+    display: none !important;
+  }
+
+  .no-key-message {
+    height: 100%;
+    color: #939393;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/light-chaser-app/src/comps/map/AMapComponent.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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, {ForwardedRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import "@amap/amap-jsapi-types";
+import "./AMapComponent.less";
+import AMapScaleObserver from "./AMapScaleObserver.ts";
+import mapLoader from "./MapLoader.ts";
+import {ComponentInfoType} from "light-chaser-types/types/ComponentTypes.ts";
+import {IFilterConfigType} from "light-chaser-types/types/FilterTypes.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {SafeEvalUtil} from "light-chaser-util/lib/SafeEvalUtil.ts";
+
+export interface AMapComponentStyle {
+    key?: string;
+    securityJsCode?: string;
+    customCode?: string;
+}
+
+export interface AMapComponentProps {
+    base?: ComponentInfoType;
+    style?: AMapComponentStyle;
+    filter?: IFilterConfigType;
+}
+
+export interface AMapComponentRef {
+    updateConfig: (newConfig: AMapComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+}
+
+const AMapComponent = React.forwardRef((props: AMapComponentProps, ref: ForwardedRef<AMapComponentRef>) => {
+    const [config, setConfig] = useState<AMapComponentProps>({...props});
+    const mapContainerRef = useRef<HTMLDivElement>(null);
+    const mapRef = useRef<AMap.Map>();
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({...newConfig}),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        map: mapRef
+    }));
+
+    useEffect(() => {
+        new AMapScaleObserver(mapContainerRef.current!)
+    }, []);
+
+    useEffect(() => {
+        const {key, securityJsCode} = config.style!;
+        mapLoader.load(key!, securityJsCode!).then((AMap) => {
+            if (!AMap) return;
+            const code = config.style?.customCode;
+            const fun = SafeEvalUtil.run(code);
+            if (typeof fun === 'function') {
+                mapRef.current = fun(mapContainerRef.current!, AMap, eventHandlerMap);
+            } else {
+                globalMessage.messageApi?.error('自定义代码错误,请检查');
+            }
+        })
+    }, [config]);
+
+    return (
+        <div className={'a-map'} ref={mapContainerRef}>
+            {(config.style?.key && config.style?.securityJsCode) ? undefined :
+                <div className={'no-key-message'} style={{display: 'flex', alignItems: 'center'}}>请配置Key和密钥</div>}
+        </div>
+    );
+});
+
+export default AMapComponent;