light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/digital-flipper/DigitalFlipperConfig.tsx

@@ -0,0 +1,197 @@
+/*
+ * 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 {DigitalFlipperController} from "./DigitalFlipperController";
+import {ConfigType} from "../../../designer/right/ConfigContent";
+import {AlignBottomTwo, AlignHorizontalCenterTwo, AlignLeftTwo, AlignRightTwo, AlignTopTwo, AlignVerticalCenterTwo} from "@icon-park/react";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+
+export const DigitalFlipperConfig: React.FC<ConfigType<DigitalFlipperController>> = ({controller}) => {
+
+    const config = controller.getConfig();
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment, id, data} = fieldChangeData;
+        if (id === 'color') {
+            if ((data as string).includes("gradient")) {
+                //渐变色
+                controller.update({
+                    style: {
+                        color: data as string,
+                        backgroundImage: data as string,
+                        backgroundClip: 'text',
+                        WebkitBackgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent',
+                    }
+                })
+            } else {
+                //单色
+                controller.update({
+                    style: {
+                        color: data as string,
+                        backgroundImage: 'initial',
+                        backgroundClip: 'initial',
+                        WebkitBackgroundClip: 'initial',
+                        WebkitTextFillColor: 'initial',
+                    }
+                });
+            }
+        } else
+            controller.update(dataFragment);
+    }
+
+    const schema: Control = {
+        type: 'grid',
+        key: 'style',
+        children: [
+            {
+                key: 'prefix',
+                type: 'input',
+                label: '前缀',
+                value: config?.style?.prefix,
+            },
+            {
+                key: 'suffix',
+                type: 'input',
+                label: '后缀',
+                value: config?.style?.suffix,
+            },
+            {
+                key: 'decimalPlaces',
+                type: 'number-input',
+                label: '小数位',
+                value: config?.style?.decimalPlaces,
+            },
+            {
+                key: 'separator',
+                type: 'input',
+                label: '分隔符',
+                value: config?.style?.separator,
+            },
+            {
+                key: 'duration',
+                type: 'number-input',
+                label: '动画时长',
+                value: config?.style?.duration,
+                config: {min: 0, step: 0.1}
+            },
+            {
+                key: 'fontSize',
+                type: 'number-input',
+                label: '字号',
+                value: config?.style?.fontSize,
+                config: {min: 0},
+            },
+            {
+                key: 'fontWeight',
+                type: 'number-input',
+                label: '粗细',
+                value: config?.style?.fontWeight,
+                config: {min: 0, max: 900, step: 100},
+            },
+            {
+                id: 'color',
+                key: 'color',
+                type: 'color-picker',
+                label: '颜色',
+                value: config?.style?.color,
+                config: {
+                    showText: true,
+                    modes: ['single', 'linear', 'radial']
+                }
+            },
+            {
+                key: 'type',
+                type: 'select',
+                label: '类型',
+                tip: '注：渐变色仅在跳动效果下生效',
+                value: config?.style?.type,
+                config: {
+                    options: [
+                        {label: '滑动', value: 'slide'},
+                        {label: '跳动', value: 'caper'},
+                    ]
+                }
+            },
+            {
+                key: 'fontFamily',
+                type: 'select',
+                label: '字体',
+                value: config?.style?.fontFamily,
+                config: {
+                    options: window.LC_ENV.fonts,
+                }
+            },
+            {
+                label: "水平对齐",
+                type: 'group-button',
+                key: 'justifyContent',
+                value: config?.style?.justifyContent,
+                config: {
+                    items: [
+                        {
+                            value: 'flex-start',
+                            content: <AlignLeftTwo theme="filled" size="16"
+                                                   strokeWidth={2}
+                                                   strokeLinecap="square"/>
+                        },
+                        {
+                            value: 'center',
+                            content: <AlignHorizontalCenterTwo theme="filled" size="16"
+                                                               strokeWidth={2} strokeLinecap="square"/>
+                        },
+                        {
+                            value: 'flex-end',
+                            content: <AlignRightTwo theme="filled" size="16"
+                                                    strokeWidth={2}
+                                                    strokeLinecap="square"/>
+                        }
+                    ]
+                }
+            },
+            {
+                label: "垂直对齐",
+                type: 'group-button',
+                key: 'alignItems',
+                value: config?.style?.alignItems,
+                config: {
+                    items: [
+                        {
+                            value: 'flex-start',
+                            content: <AlignTopTwo theme="filled" size="16"
+                                                  strokeWidth={2}
+                                                  strokeLinecap="square"/>
+                        },
+                        {
+                            value: 'center',
+                            content: <AlignVerticalCenterTwo theme="filled" size="16"
+                                                             strokeWidth={2} strokeLinecap="square"/>
+                        },
+                        {
+                            value: 'flex-end',
+                            content: <AlignBottomTwo theme="filled" size="16"
+                                                     strokeWidth={2}
+                                                     strokeLinecap="square"/>
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+
+
+    return (
+        <div style={{padding: 10}}><LCGUI schema={schema} onFieldChange={onFieldChange}/></div>
+    )
+}
+

package/light-chaser-app/src/comps/lc/digital-flipper/DigitalFlipperController.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.
+ */
+
+import {UpdateOptions} from "../../../framework/core/AbstractController";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import BPExecutor from "../../../designer/blueprint/core/BPExecutor";
+import DigitalFlipperComponent, {DigitalFlipperComponentProps, DigitalFlipperComponentRef} from "./DigitalFlipperComponent";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+
+const recreate = ['prefix', 'suffix', 'decimalPlaces', 'separator', 'duration', 'type']
+
+export class DigitalFlipperController extends AbstractDesignerController<DigitalFlipperComponentRef, DigitalFlipperComponentProps> {
+
+    async create(container: HTMLElement, config: DigitalFlipperComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        this.instance = await ComponentUtil.createAndRender<DigitalFlipperComponentRef>(container, DigitalFlipperComponent, config);
+    }
+
+    destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): DigitalFlipperComponentProps | null {
+        return this.config;
+    }
+
+
+    changeData(data: number) {
+        if (this.config?.data)
+            this.config.data.value = data;
+        this.instance?.changeData(data);
+    }
+
+    update(config: DigitalFlipperComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!, recreate.some(item => config.style && item in config.style));
+    }
+
+    updateTheme(newTheme: IThemeItem) {
+        if (!newTheme) return;
+        const styleConfig = this.config?.style ?? {};
+        const {colors: {main}} = newTheme;
+        //图形
+        if (styleConfig?.color)
+            styleConfig.color = main;
+        //重新渲染
+        this.update({style: styleConfig}, {reRender: true});
+    }
+
+    registerEvent() {
+        const nodeId = this.config?.base?.id ?? '';
+        const executor = this.bpExecutor;
+        this.instance?.setEventHandler({
+            click: () => executor?.triggerComponentEvent(nodeId!, "click", this.config),
+        })
+    }
+
+
+    setVisible(visible: boolean) {
+        this.instance?.changeVisible(visible);
+    }
+}

package/light-chaser-app/src/comps/lc/digital-flipper/DigitalFlipperDefinition.ts

@@ -0,0 +1,99 @@
+/*
+ * 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 digitalFlipperImg from './digital-flipper.png';
+import {DigitalFlipperController} from "./DigitalFlipperController";
+import {DigitalFlipperComponentProps} from "./DigitalFlipperComponent";
+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 DigitalFlipperConfig = lazy(() => import("./DigitalFlipperConfig").then((module) => ({default: module.DigitalFlipperConfig})));
+
+export default class DigitalFlipperDefinition extends AbstractDesignerDefinition<DigitalFlipperController, DigitalFlipperComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "数字翻牌器",
+            compKey: "DigitalFlipper",
+            categorize: "info",
+            width: 200,
+            height: 50,
+        };
+    }
+
+    getChartImg(): string | null {
+        return digitalFlipperImg;
+    }
+
+    getController(): ClazzTemplate<DigitalFlipperController> | null {
+        return DigitalFlipperController;
+    }
+
+    getInitConfig(): DigitalFlipperComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '数字翻牌器',
+                type: 'DigitalFlipper',
+            },
+            style: {
+                fontSize: 20,
+                fontWeight: 500,
+                fontFamily: 'Microsoft YaHei',
+                color: '#ffffff',
+                type: 'caper',
+                justifyContent: 'center',
+                alignItems: 'center',
+                prefix: '',
+                suffix: '',
+                decimalPlaces: 0,
+                separator: ',',
+                duration: 1,
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+            data: {
+                sourceType: 'static',
+                value: 123456789
+            }
+        };
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        const menuMapping = super.getMenuToConfigContentMap();
+        menuMapping['style'] = DigitalFlipperConfig;
+        return menuMapping;
+    }
+
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "click",
+                name: "点击时",
+            },
+            {
+                id: "dataChange",
+                name: "数据变化时"
+            }
+        ]);
+    }
+}

package/light-chaser-app/src/comps/lc/flv-player/FlvPlayerComponent.tsx

@@ -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 React, {ForwardedRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import FlvJs from "flv.js";
+import {ComponentInfoType} from "light-chaser-types/types/ComponentTypes.ts";
+import {IFilterConfigType} from "light-chaser-types/types/FilterTypes.ts";
+
+export interface FlvPlayerComponentStyle {
+    url?: string;
+}
+
+export interface FlvPlayerComponentProps {
+    base?: ComponentInfoType;
+    style?: FlvPlayerComponentStyle;
+    filter?: IFilterConfigType;
+}
+
+export interface FlvPlayerComponentRef {
+    updateConfig: (newConfig: FlvPlayerComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    destroy: () => void;
+    changeVisible: (visible: boolean) => void;
+}
+
+const FlvPlayerComponent = React.forwardRef((props: FlvPlayerComponentProps, ref: ForwardedRef<FlvPlayerComponentRef>) => {
+    const [config, setConfig] = useState<FlvPlayerComponentProps>({...props});
+    const [visible, setVisible] = useState(true);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+    const playerRef = useRef<FlvJs.Player | null>(null);
+    const {url} = config.style!;
+
+    const destroy = () => {
+        if (playerRef.current) {
+            playerRef.current.pause();
+            playerRef.current.unload();
+            playerRef.current.detachMediaElement();
+            playerRef.current.destroy();
+            playerRef.current = null;
+        }
+    }
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({...newConfig}),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        destroy: () => destroy(),
+        changeVisible: (visible: boolean) => setVisible(visible)
+    }));
+
+    useEffect(() => {
+        if (FlvJs.isSupported()) {
+            const player = FlvJs.createPlayer({
+                type: 'flv',
+                url: url,
+            });
+            player.attachMediaElement(videoRef.current!);
+            player.load();
+            player.play();
+            playerRef.current = player;
+        }
+        return () => destroy();
+    }, [url]);
+
+    const onClick = () => {
+        if ('click' in eventHandlerMap.current) {
+            eventHandlerMap.current['click']();
+        }
+    }
+
+    if (!visible)
+        return null;
+
+    return (
+        <video style={{height: '100%', width: '100%'}} ref={videoRef} controls onClick={onClick}/>
+    );
+});
+
+export default FlvPlayerComponent;

package/light-chaser-app/src/comps/lc/flv-player/FlvPlayerConfig.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 {FlvPlayerController} from "./FlvPlayerController.ts";
+import {ConfigType} from "../../../designer/right/ConfigContent";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+
+export const FlvPlayerConfig: React.FC<ConfigType<FlvPlayerController>> = ({controller}) => {
+
+    const config = controller.getConfig()?.style;
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        controller.update(dataFragment);
+    }
+
+    const schema: Control = {
+        type: 'grid',
+        key: 'style',
+        children: [
+            {
+                type: 'input',
+                label: '视频流地址',
+                key: 'url',
+                value: config?.url,
+            }
+        ]
+    }
+
+    return (
+        <div style={{padding: 10}}><LCGUI schema={schema} onFieldChange={onFieldChange}/></div>
+    )
+}
+

package/light-chaser-app/src/comps/lc/flv-player/FlvPlayerController.ts

@@ -0,0 +1,56 @@
+/*
+ * 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 {UpdateOptions} from "../../../framework/core/AbstractController";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController";
+import FlvPlayerComponent, {FlvPlayerComponentProps, FlvPlayerComponentRef} from "./FlvPlayerComponent.tsx";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import BPExecutor from "../../../designer/blueprint/core/BPExecutor";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+
+export class FlvPlayerController extends AbstractDesignerController<FlvPlayerComponentRef, FlvPlayerComponentProps> {
+
+    async create(container: HTMLElement, config: FlvPlayerComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        this.instance = await ComponentUtil.createAndRender<FlvPlayerComponentRef>(container, FlvPlayerComponent, config);
+    }
+
+    destroy(): void {
+        this.instance?.destroy();
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): FlvPlayerComponentProps | null {
+        return this.config;
+    }
+
+    update(config: FlvPlayerComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!);
+    }
+
+    registerEvent() {
+        const nodeId = this.config?.base?.id ?? '';
+        const executor = this.bpExecutor;
+        this.instance?.setEventHandler({
+            click: () => executor?.triggerComponentEvent(nodeId!, "click", this.config),
+        })
+    }
+
+
+    setVisible(visible: boolean) {
+        this.instance?.changeVisible(visible);
+    }
+}

package/light-chaser-app/src/comps/lc/flv-player/FlvPlayerDefinition.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 {MenuInfo} from "../../../designer/right/MenuType";
+import FlvPlayerImg from './flv-player.png';
+import {FlvPlayerController} from "./FlvPlayerController.ts";
+import {FlvPlayerComponentProps} from "./FlvPlayerComponent.tsx";
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+import {lazy} from "react";
+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";
+
+const BaseInfo = lazy(() => import("../../common-component/base-info/BaseInfo"));
+const AnimationConfig = lazy(() => import("../../common-component/animation-config/AnimationConfig.tsx"));
+const FilterConfig = lazy(() => import("../../common-component/filter-config/FilterConfig.tsx"));
+const FlvPlayerConfig = lazy(() => import("./FlvPlayerConfig.tsx").then((module) => ({default: module.FlvPlayerConfig})));
+
+export default class FlvPlayerDefinition extends AbstractDesignerDefinition<FlvPlayerController, FlvPlayerComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "FLV视频流",
+            compKey: "FlvPlayer",
+            categorize: "media",
+        };
+    }
+
+    getChartImg(): string | null {
+        return FlvPlayerImg;
+    }
+
+    getController(): ClazzTemplate<FlvPlayerController> | null {
+        return FlvPlayerController;
+    }
+
+    getInitConfig(): FlvPlayerComponentProps {
+        return {
+            base: {
+                id: "",
+                name: 'FLV视频流',
+                type: 'FlvPlayer',
+            },
+            style: {
+                url: ''
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+        };
+    }
+
+    getMenuList(): Array<MenuInfo> {
+        return super.getMenuList().filter((item: MenuInfo) => (item.key !== 'theme' && item.key !== 'data' && item.key !== 'mapping'));
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: FlvPlayerConfig,
+            animation: AnimationConfig,
+            filter: FilterConfig
+        };
+    }
+
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "click",
+                name: "点击时",
+            }
+        ]);
+    }
+}