light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/common-component/filter-config/FilterConfig.tsx

@@ -0,0 +1,175 @@
+/*
+ * 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 './FilterConfig.less';
+import {useRef} from "react";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController.ts";
+import {IFilterConfigType} from "light-chaser-types/types/FilterTypes.ts";
+import {Control} from "light-chaser-ui/lib/types.ts";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+
+const defaultConfig: IFilterConfigType = {
+    enable: false,
+    blur: 0,
+    brightness: 1,
+    contrast: 1,
+    opacity: 1,
+    saturate: 1,
+    hueRotate: 0
+}
+
+export interface FilterConfigProps {
+    controller?: AbstractDesignerController;
+    config?: IFilterConfigType;
+    onChange?: (config: IFilterConfigType) => void;
+}
+
+export default function FilterConfig(props: FilterConfigProps) {
+    const {controller, config: propConfig, onChange} = props;
+    
+    // Determine initial config
+    let initialConfig = defaultConfig;
+    if (controller) {
+        initialConfig = controller.getConfig()?.filter as IFilterConfigType || defaultConfig;
+    } else if (propConfig) {
+        initialConfig = propConfig;
+    }
+    
+    const configRef = useRef(initialConfig);
+
+    // Update ref if propConfig changes (and we are in controlled mode without controller)
+    if (!controller && propConfig && propConfig !== configRef.current) {
+        // Note: Direct assignment in render is generally discouraged but can work for sync updates 
+        // if we want the GUI to reflect external changes. 
+        // Ideally LCGUI should handle value updates via schema.
+        // For now, let's trust the schema values.
+        configRef.current = propConfig;
+    }
+
+
+    const schema: Control = {
+        type: 'grid',
+        config: {
+            columns: 2,
+            gridGap: '20px'
+        },
+        children: [
+            {
+                type: 'switch',
+                label: '开启',
+                key: 'enable',
+                value: configRef.current?.enable
+            },
+            {
+                type: 'slider',
+                label: '模糊',
+                key: 'blur',
+                value: configRef.current?.blur,
+                config: {
+                    containerStyle: {
+                        gridColumn: '1/3'
+                    },
+                    min: 0,
+                    max: 100,
+                    step: 0.01
+                }
+            },
+            {
+                type: 'slider',
+                label: '亮度',
+                key: 'brightness',
+                value: configRef.current?.brightness,
+                config: {
+                    containerStyle: {
+                        gridColumn: '1/3'
+                    },
+                    min: 0,
+                    max: 2,
+                    step: 0.01
+                }
+            },
+            {
+                type: 'slider',
+                label: '对比度',
+                key: 'contrast',
+                value: configRef.current?.contrast,
+                config: {
+                    containerStyle: {
+                        gridColumn: '1/3'
+                    },
+                    min: 0,
+                    max: 2,
+                    step: 0.01
+                }
+            },
+            {
+                type: 'slider',
+                label: '透明度',
+                key: 'opacity',
+                value: configRef.current?.opacity,
+                config: {
+                    containerStyle: {
+                        gridColumn: '1/3'
+                    },
+                    step: 0.01,
+                    max: 1,
+                    min: 0
+                }
+            },
+            {
+                type: 'slider',
+                label: '饱和度',
+                key: 'saturate',
+                value: configRef.current?.saturate,
+                config: {
+                    containerStyle: {
+                        gridColumn: '1/3'
+                    },
+                    min: 0,
+                    max: 2,
+                    step: 0.01
+                }
+            },
+            {
+                type: 'slider',
+                label: '色调',
+                key: 'hueRotate',
+                value: configRef.current?.hueRotate,
+                config: {
+                    containerStyle: {
+                        gridColumn: '1/3'
+                    },
+                    min: 0,
+                    max: 360,
+                }
+            },
+        ]
+    }
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        configRef.current = ObjectUtil.merge(configRef.current, dataFragment);
+        
+        if (controller) {
+            controller.updateFilter(configRef.current);
+        } else if (onChange) {
+            onChange(configRef.current);
+        }
+    }
+
+    return (
+        <div className={'filter-config'}>
+            <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+        </div>
+    );
+
+}

package/light-chaser-app/src/comps/common-component/floating-modal/FloatingModal.less

@@ -0,0 +1,116 @@
+@main-bg: #1E1E2F;
+@container-bg: #2C2C3E;
+@primary-highlight: #4FB8FF;
+@success-color: #3CED92;
+@warning-color: #FF6E6E;
+@text-secondary: #A0A0B2;
+@text-primary: #FFFFFF;
+@border-color: #3A3A4E;
+@shadow-soft: 0 5px 8px rgba(0, 0, 0, 0.5);
+
+.lc-floating-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 2000;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &.visible {
+    opacity: 1;
+  }
+}
+
+.lc-floating-modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 2001; // Above mask
+}
+
+.lc-floating-modal {
+  position: absolute;
+  background-color: @main-bg;
+  border-radius: 8px;
+  box-shadow: @shadow-soft;
+  border: 1px solid @border-color;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: auto;
+
+  &.visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .lc-floating-header {
+    height: 48px;
+    background-color: @container-bg;
+    border-bottom: 1px solid @border-color;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: move;
+    user-select: none;
+    flex-shrink: 0;
+
+    .lc-floating-title {
+      color: @text-primary;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px;
+      font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
+    }
+
+    .lc-floating-close {
+      color: @text-secondary;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      transition: all 0.2s ease;
+      border-radius: 4px;
+
+      &:hover {
+        color: @text-primary;
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+
+  .lc-floating-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background-color: #292939;
+    color: @text-secondary;
+    font-size: 14px;
+    line-height: 20px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #3A3A4E;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+}

package/light-chaser-app/src/comps/common-component/floating-modal/FloatingModal.tsx

@@ -0,0 +1,166 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+import {Close} from '@icon-park/react';
+import './FloatingModal.less';
+
+export interface FloatingModalProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    open: boolean;
+    onClose: () => void;
+    mask?: boolean;
+    initialPosition?: { x: number; y: number };
+    width?: number | string;
+    height?: number | string;
+}
+
+const FloatingModal: React.FC<FloatingModalProps> = ({
+                                                         title,
+                                                         children,
+                                                         open,
+                                                         onClose,
+                                                         mask = false,
+                                                         initialPosition,
+                                                         width = 320,
+                                                         height = 'auto'
+                                                     }) => {
+    // Control DOM mounting
+    const [mounted, setMounted] = useState(open);
+    // Control animation class
+    const [visible, setVisible] = useState(false);
+
+    // Refs for drag logic
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const dragRef = useRef({
+        isDragging: false,
+        startX: 0,
+        startY: 0,
+        initialX: 0,
+        initialY: 0,
+        currentX: 0,
+        currentY: 0
+    });
+
+    // Animation control
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            // Double RAF to ensure browser paint before adding class
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setVisible(true);
+                });
+            });
+        } else {
+            setVisible(false);
+            const timer = setTimeout(() => {
+                setMounted(false);
+            }, 200); // Match CSS transition duration
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+
+    // Initialize position on mount
+    useEffect(() => {
+        if (mounted && wrapperRef.current) {
+            const {currentX, currentY} = dragRef.current;
+            // Only set initial position if not already moved (or reset if needed)
+            // For persistence across re-opens without unmount, we keep currentX/Y
+            // If component unmounts and remounts, state is lost, which is expected.
+            // But here we might want to center it if initialPosition is not provided.
+
+            if (currentX === 0 && currentY === 0) {
+                let x = 0;
+                let y = 0;
+                if (initialPosition) {
+                    x = initialPosition.x;
+                    y = initialPosition.y;
+                } else {
+                    // Default center calculation could be done here if needed, 
+                    // but usually fixed positioning + transform is easier relative to top-left 0,0
+                    // Let's assume (0,0) is top-left of viewport.
+                    // If no initial pos, center it.
+                    x = (window.innerWidth - (typeof width === 'number' ? width : 320)) / 2;
+                    y = 100; // Default top offset
+                }
+                dragRef.current.currentX = x;
+                dragRef.current.currentY = y;
+            }
+
+            wrapperRef.current.style.transform = `translate(${dragRef.current.currentX}px, ${dragRef.current.currentY}px)`;
+        }
+    }, [mounted, initialPosition, width]);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        if (!wrapperRef.current) return;
+
+        dragRef.current.isDragging = true;
+        dragRef.current.startX = e.clientX;
+        dragRef.current.startY = e.clientY;
+        dragRef.current.initialX = dragRef.current.currentX;
+        dragRef.current.initialY = dragRef.current.currentY;
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+        if (!dragRef.current.isDragging || !wrapperRef.current) return;
+
+        const deltaX = e.clientX - dragRef.current.startX;
+        const deltaY = e.clientY - dragRef.current.startY;
+
+        const newX = dragRef.current.initialX + deltaX;
+        const newY = dragRef.current.initialY + deltaY;
+
+        dragRef.current.currentX = newX;
+        dragRef.current.currentY = newY;
+
+        wrapperRef.current.style.transform = `translate(${newX}px, ${newY}px)`;
+    };
+
+    const handleMouseUp = () => {
+        dragRef.current.isDragging = false;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, []);
+
+    if (!mounted) return null;
+
+    return createPortal(
+        <>
+            {mask && (
+                <div
+                    className={`lc-floating-modal-mask ${visible ? 'visible' : ''}`}
+                    onClick={onClose}
+                />
+            )}
+            <div ref={wrapperRef}
+                className="lc-floating-modal-wrapper">
+                <div className={`lc-floating-modal ${visible ? 'visible' : ''}`}
+                    style={{ width, height }}>
+                    <div className="lc-floating-header" onMouseDown={handleMouseDown}>
+                        <div className="lc-floating-title">{title}</div>
+                        <div className="lc-floating-close" onClick={onClose}>
+                            <Close theme="outline" size="16" fill="#A0A0B2" strokeWidth={3}/>
+                        </div>
+                    </div>
+                    <div className="lc-floating-body">
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </>,
+        document.body
+    );
+};
+
+export default FloatingModal;

package/light-chaser-app/src/comps/common-component/schema-fragment/SchemaFragment.ts

@@ -0,0 +1,137 @@
+/*
+ * 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 {Control} from "light-chaser-ui/lib/types.ts";
+import {Label} from "@antv/g2plot/src/types/label.ts";
+
+/**
+ * 字体设置
+ * @param config
+ */
+export const fontSetSchema = (config: { fontSize: number, fontWeight: number, fontFamily: string }): Control[] => {
+    return [
+        {
+            key: 'fontSize',
+            type: 'number-input',
+            label: '字号',
+            value: config?.fontSize || 12,
+        },
+        {
+            key: 'fontWeight',
+            type: 'number-input',
+            label: '粗细',
+            value: config?.fontWeight || 400,
+            config: {
+                min: 100,
+                max: 900,
+                step: 100,
+            }
+        },
+        {
+            key: 'fontFamily',
+            type: 'select',
+            label: '字体',
+            value: config?.fontFamily || 'Arial',
+            config: {
+                options: window.LC_ENV.fonts,
+            }
+        }
+    ]
+}
+
+/**
+ * css字体设置
+ * @param config
+ */
+export const cssFontSetSchema = (config: { color: string, fontSize: number, fontWeight: number, fontFamily: string }): Control[] => {
+    return [
+        {
+            key: 'color',
+            type: 'color-picker',
+            label: '颜色',
+            value: config?.color || '#fff',
+            config: {
+                showText: true
+            }
+        },
+        ...fontSetSchema(config)
+    ]
+}
+
+/**
+ * g2plot字体设置
+ * @param config
+ */
+export const g2plotFontSetSchema = (config: { fill: string, fontSize: number, fontWeight: number, fontFamily: string }): Control[] => {
+    return [
+        {
+            key: 'fill',
+            type: 'color-picker',
+            label: '颜色',
+            value: config?.fill || '#fff',
+            config: {
+                showText: true
+            }
+        },
+        ...fontSetSchema(config)
+    ]
+}
+
+/**
+ * g2plot系列图表数据点文本设置
+ * @param label
+ */
+export const g2plotLabelSetSchema = (label?: Label): Control => {
+    return {
+        label: '文本',
+        type: 'sub-accordion',
+        children: [
+            {
+                type: 'grid',
+                key: 'label',
+                children: [
+                    {
+                        key: 'position',
+                        type: 'select',
+                        label: '位置',
+                        value: (label as any)?.position || 'top',
+                        config: {
+                            options: [
+                                {value: 'top', label: '顶部'},
+                                {value: 'bottom', label: '底部'},
+                                {value: 'middle', label: '中间'},
+                                {value: 'left', label: '左侧'},
+                                {value: 'right', label: '右侧'},
+                            ]
+                        }
+                    },
+                    {
+                        key: 'offsetY',
+                        type: 'number-input',
+                        label: 'Y偏移',
+                        value: (label as any)?.offsetY || 0,
+                    },
+                    {
+                        key: 'offsetX',
+                        type: 'number-input',
+                        label: 'X偏移',
+                        value: (label as any)?.offsetX || 0,
+                    },
+                    {
+                        key: 'style',
+                        children: g2plotFontSetSchema((label as any)?.style),
+                    }
+                ]
+            }
+        ]
+    }
+}
+

package/light-chaser-app/src/comps/common-component/theme-config/ThemeConfig.tsx

@@ -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 {Component} from 'react';
+import ThemeEditor from "./theme-editor/ThemeEditor";
+import ThemeList from "./theme-list/ThemeList";
+import rightStore from "../../../designer/right/RightStore";
+import {Button} from "light-chaser-ui/lib/main";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController.ts";
+import {Modal} from "antd";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+
+class ThemeConfig extends Component<{ controller: AbstractDesignerController }> {
+    state = {
+        editTheme: false,
+    }
+
+    openThemeEditor = () => this.setState({editTheme: true});
+
+    closeEditor = () => this.setState({editTheme: false});
+
+    themeChange = (theme: IThemeItem) => {
+        if (!theme) return;
+        const {activeElem: {id}} = rightStore;
+        const {controllers} = window.LC_ENV.currentManager.layerManager;
+        const instance = controllers[id + ''];
+        instance && instance.updateTheme(theme);
+    }
+
+    render() {
+        return (
+            <>
+                <div className={'lc-theme-config'} style={{padding: 10}}>
+                    <div className={'lc-theme-custom'}>
+                        <Button onClick={this.openThemeEditor}>+ 自定义主题</Button>
+                    </div>
+                    <br/>
+                    <ThemeList onSelected={this.themeChange}/>
+                </div>
+                <Modal title={'编辑主题'} open={this.state.editTheme} onCancel={this.closeEditor} width={890}
+                       footer={null}>
+                    <ThemeEditor/>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default ThemeConfig;