export type ComponentType = 'singleLineChart' | 'doubleLineChart' | 'singleBarChart' | 'doubleBarChart' | 'horizontalBarChart' | 'pieChart' | 'halfPieChart' | 'funnelChart' | 'wordCloudChart' | 'gaugeChart' | 'radarChart' | 'scatterChart' | 'mapChart' | 'cityMapChart' | 'calendarChart' | 'treeChart' | 'sankeyChart' | 'text' | 'button' | 'input' | 'select' | 'switch' | 'progress' | 'tag' | 'badge' | 'avatar' | 'card' | 'table' | 'scrollRankList' | 'carouselList' | 'borderBox1' | 'borderBox2' | 'borderBox3' | 'decoration1' | 'decoration2' | 'fullscreenButton' | 'customImageBorder' | 'image' | 'carousel' | 'icon' | 'container' | 'layoutTwoColumn' | 'layoutThreeColumn' | 'layoutHeader' | 'layoutSidebar' | 'threeEarth' | 'threeParticles' | 'threeCube' | 'threeDNA' | 'threeWave' | 'threeTorus' | 'threeGalaxy' | 'threeTunnel' | 'threeMatrix' | 'threePlasma' | 'gradientText' | 'flipCountdown' | 'futuristicTitle';
export type ComponentCategory = 'chart' | 'component' | 'widget' | 'image' | 'icon' | '3d' | 'recent' | 'favorite';
export interface ComponentStyle {
    x: number;
    y: number;
    width: number;
    height: number;
    backgroundColor?: string;
    color?: string;
    fontSize?: number;
    borderRadius?: number;
    borderWidth?: number;
    borderColor?: string;
    opacity?: number;
    zIndex?: number;
}
export interface ChartAxisConfig {
    show?: boolean;
    type?: 'value' | 'category' | 'time' | 'log';
    name?: string;
    nameLocation?: 'start' | 'middle' | 'end';
    nameTextStyle?: {
        color?: string;
        fontSize?: number;
        fontWeight?: string;
    };
    nameGap?: number;
    position?: 'top' | 'bottom' | 'left' | 'right';
    axisLine?: {
        show?: boolean;
        lineStyle?: {
            color?: string;
            width?: number;
            type?: 'solid' | 'dashed' | 'dotted';
        };
    };
    axisTick?: {
        show?: boolean;
        lineStyle?: {
            color?: string;
            width?: number;
        };
    };
    axisLabel?: {
        show?: boolean;
        color?: string;
        fontSize?: number;
        fontWeight?: string;
        rotate?: number;
        margin?: number;
    };
    splitLine?: {
        show?: boolean;
        lineStyle?: {
            color?: string;
            width?: number;
            type?: 'solid' | 'dashed' | 'dotted';
            opacity?: number;
        };
    };
    splitArea?: {
        show?: boolean;
        areaStyle?: {
            color?: string[];
            opacity?: number;
        };
    };
}
export interface ChartSymbolConfig {
    show?: boolean;
    type?: 'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 'none';
    size?: number;
    color?: string;
    borderColor?: string;
    borderWidth?: number;
    opacity?: number;
}
export interface ChartLegendConfig {
    show?: boolean;
    orient?: 'horizontal' | 'vertical';
    position?: 'top' | 'bottom' | 'left' | 'right';
    align?: 'left' | 'center' | 'right';
    left?: string;
    top?: string;
    textStyle?: {
        color?: string;
        fontSize?: number;
        fontWeight?: string;
    };
}
export interface DataSourceConfig {
    type: 'mock' | 'api';
    apiConfig?: {
        url?: string;
        method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
        headers?: Record<string, string>;
        params?: Record<string, any>;
        body?: Record<string, any>;
        dataPath?: string;
        refreshInterval?: number;
    };
}
export interface ComponentProps {
    content?: string;
    subContent?: string;
    fontSize?: number;
    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
    color?: string;
    textAlign?: 'left' | 'center' | 'right' | 'justify';
    textDecoration?: 'none' | 'underline' | 'overline' | 'line-through';
    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
    fontStyle?: 'normal' | 'italic' | 'oblique';
    letterSpacing?: number;
    lineHeight?: number;
    textShadow?: boolean;
    shadowColor?: string;
    shadowBlur?: number;
    shadowOffsetX?: number;
    shadowOffsetY?: number;
    opacity?: number;
    backgroundColor?: string;
    borderRadius?: number;
    borderWidth?: number;
    borderColor?: string;
    padding?: number;
    buttonType?: 'primary' | 'default' | 'dashed' | 'link';
    disabled?: boolean;
    loading?: boolean;
    block?: boolean;
    danger?: boolean;
    placeholder?: string;
    allowClear?: boolean;
    showCount?: boolean;
    maxLength?: number;
    inputType?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
    tagColor?: string;
    closable?: boolean;
    icon?: string;
    src?: string;
    alt?: string;
    chartType?: 'line' | 'bar' | 'pie';
    chartData?: unknown;
    chartOption?: unknown;
    xAxisConfig?: ChartAxisConfig;
    yAxisConfig?: ChartAxisConfig;
    symbolConfig?: ChartSymbolConfig;
    iconType?: string;
    borderStyle?: number;
    glowColor?: string;
    cornerSize?: number;
    animationDuration?: number;
    buttonSize?: number;
    iconSize?: number;
    buttonColor?: string;
    hoverColor?: string;
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
    customIcon?: string;
    showText?: boolean;
    customBorderImage?: string;
    borderImageSlice?: number;
    borderImageWidth?: number;
    borderImageRepeat?: 'stretch' | 'repeat' | 'round' | 'space';
    borderImageOutset?: number;
    borderImageOpacity?: number;
    borderImageMode?: 'border' | 'background' | 'frame';
    titleColor?: string;
    percent?: number;
    tableColumns?: Array<{
        title: string;
        dataIndex: string;
        key: string;
    }>;
    tableData?: Array<Record<string, any>>;
    chartTitle?: string;
    dataSource?: DataSourceConfig;
    xAxisData?: string[];
    seriesData?: Array<{
        name: string;
        data: any[];
        symbolConfig?: ChartSymbolConfig;
    }>;
    pieData?: Array<{
        name: string;
        value: number;
    }>;
    funnelData?: Array<{
        name: string;
        value: number;
    }>;
    wordCloudData?: Array<{
        name: string;
        value: number;
    }>;
    singleData?: number;
    legend?: ChartLegendConfig;
    selectOptions?: Array<{
        label: string;
        value: string;
    }>;
    checked?: boolean;
    radarConfig?: {
        shape?: 'polygon' | 'circle';
        radius?: number;
        indicator?: Array<{
            name: string;
            max: number;
        }>;
        axisLine?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
                width?: number;
            };
        };
        splitLine?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
                width?: number;
            };
        };
        splitArea?: {
            show?: boolean;
            areaStyle?: {
                color?: string[];
            };
        };
        axisName?: {
            color?: string;
            fontSize?: number;
            fontWeight?: string;
        };
    };
    radarSeriesConfig?: {
        areaStyle?: {
            show?: boolean;
            opacity?: number;
        };
        lineStyle?: {
            width?: number;
        };
        symbol?: string;
        symbolSize?: number;
    };
    pieConfig?: {
        radius?: [string, string];
        center?: [string, string];
        roseType?: false | 'radius' | 'area';
        borderRadius?: number;
        borderWidth?: number;
        borderColor?: string;
        label?: {
            show?: boolean;
            position?: 'outside' | 'inside' | 'center';
            color?: string;
            fontSize?: number;
            formatter?: string;
        };
        labelLine?: {
            show?: boolean;
            length?: number;
            length2?: number;
            lineStyle?: {
                color?: string;
                width?: number;
            };
        };
        itemStyle?: {
            shadowBlur?: number;
            shadowColor?: string;
        };
    };
    mapRegion?: string;
    mapData?: Array<{
        name: string;
        value: number;
    }>;
    provinceName?: string;
    showCityData?: boolean;
    mapType?: 'province' | 'city';
    selectedProvince?: string;
    showBuiltinData?: boolean;
    colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'orange';
    calendarYear?: number;
    calendarData?: Array<[string, number]>;
    calendarColors?: string[];
    calendarCellSize?: number;
    calendarLang?: 'zh' | 'en';
    calendarMonthLabel?: {
        show?: boolean;
        color?: string;
        fontSize?: number;
    };
    calendarDayLabel?: {
        show?: boolean;
        color?: string;
        fontSize?: number;
        firstDay?: number;
    };
    calendarYearLabel?: {
        show?: boolean;
        color?: string;
        fontSize?: number;
    };
    rankListData?: Array<{
        name: string;
        value: number;
    }>;
    rankListConfig?: {
        rowHeight?: number;
        barHeight?: number;
        barColor?: string;
        barBgColor?: string;
        textColor?: string;
        valueColor?: string;
        fontSize?: number;
        showIndex?: boolean;
        indexColor?: string;
        scrollSpeed?: number;
        showBar?: boolean;
    };
    carouselListData?: Array<Record<string, any>>;
    carouselListConfig?: {
        columns?: Array<{
            title: string;
            key: string;
            width?: number;
        }>;
        rowHeight?: number;
        headerHeight?: number;
        headerBgColor?: string;
        headerTextColor?: string;
        rowBgColor?: string;
        rowAltBgColor?: string;
        textColor?: string;
        fontSize?: number;
        scrollSpeed?: number;
        showHeader?: boolean;
        pageSize?: number;
    };
    carouselImages?: string[];
    carouselConfig?: {
        autoplay?: boolean;
        interval?: number;
        showDots?: boolean;
        showArrows?: boolean;
        effect?: 'slide' | 'fade';
    };
    wordCloudConfig?: {
        shape?: 'circle' | 'rect' | 'diamond' | 'triangle';
        colorScheme?: 'default' | 'blue' | 'green' | 'warm' | 'cool' | 'rainbow';
        minFontSize?: number;
        maxFontSize?: number;
        fontFamily?: string;
        fontWeight?: 'normal' | 'bold';
        rotation?: boolean;
        rotationRange?: [number, number];
        gridSize?: number;
    };
    treeData?: any;
    treeConfig?: {
        orient?: 'LR' | 'TB' | 'RL' | 'BT';
        top?: string | number;
        left?: string | number;
        bottom?: string | number;
        right?: string | number;
        symbolSize?: number;
        expandAndCollapse?: boolean;
        animationDuration?: number;
        animationDurationUpdate?: number;
        initialTreeDepth?: number;
        label?: {
            show?: boolean;
            position?: 'left' | 'right' | 'top' | 'bottom' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom';
            verticalAlign?: 'top' | 'middle' | 'bottom';
            align?: 'left' | 'center' | 'right';
            fontSize?: number;
            color?: string;
            fontWeight?: 'normal' | 'bold';
            backgroundColor?: string;
            borderColor?: string;
            borderWidth?: number;
            borderRadius?: number;
            padding?: number | [number, number] | [number, number, number, number];
        };
        leaves?: {
            label?: {
                show?: boolean;
                position?: 'left' | 'right' | 'top' | 'bottom' | 'inside';
                verticalAlign?: 'top' | 'middle' | 'bottom';
                align?: 'left' | 'center' | 'right';
                fontSize?: number;
                color?: string;
                fontWeight?: 'normal' | 'bold';
            };
        };
        itemStyle?: {
            color?: string;
            borderColor?: string;
            borderWidth?: number;
        };
        lineStyle?: {
            color?: string;
            width?: number;
            curveness?: number;
        };
        emphasis?: {
            itemStyle?: {
                color?: string;
                borderColor?: string;
                borderWidth?: number;
            };
            lineStyle?: {
                color?: string;
                width?: number;
            };
        };
    };
    sankeyData?: {
        nodes?: Array<{
            name: string;
            value?: number;
        }>;
        links?: Array<{
            source: string | number;
            target: string | number;
            value: number;
        }>;
    };
    sankeyConfig?: {
        orient?: 'horizontal' | 'vertical';
        nodeWidth?: number;
        nodeGap?: number;
        layoutIterations?: number;
        nodeAlign?: 'justify' | 'left' | 'right' | 'center';
        draggable?: boolean;
        focusNodeAdjacency?: boolean | 'inEdges' | 'outEdges' | 'allEdges';
        levels?: Array<{
            depth?: number;
            itemStyle?: {
                color?: string;
                borderColor?: string;
                borderWidth?: number;
            };
            lineStyle?: {
                color?: string;
                opacity?: number;
            };
            label?: {
                color?: string;
                fontSize?: number;
            };
        }>;
        label?: {
            show?: boolean;
            position?: 'inside' | 'outside' | 'left' | 'right' | 'top' | 'bottom';
            color?: string;
            fontSize?: number;
            fontWeight?: 'normal' | 'bold';
            formatter?: string;
        };
        itemStyle?: {
            color?: string;
            borderColor?: string;
            borderWidth?: number;
            borderRadius?: number;
            opacity?: number;
        };
        lineStyle?: {
            color?: string;
            opacity?: number;
            curveness?: number;
        };
        emphasis?: {
            itemStyle?: {
                color?: string;
                borderColor?: string;
                borderWidth?: number;
            };
            lineStyle?: {
                opacity?: number;
            };
            label?: {
                color?: string;
                fontSize?: number;
            };
        };
    };
    layoutConfig?: {
        direction?: 'horizontal' | 'vertical';
        gap?: number;
        cells?: Array<{
            flex?: number;
            width?: string;
            height?: string;
            backgroundColor?: string;
            layoutMode?: 'fill' | 'free';
        }>;
    };
    gradientType?: 'linear' | 'radial';
    gradientAngle?: number;
    gradientColors?: string[];
    textStroke?: boolean;
    strokeColor?: string;
    strokeWidth?: number;
    countdownMode?: 'target' | 'duration';
    targetDate?: string;
    countdownDuration?: number;
    showDays?: boolean;
    showHours?: boolean;
    showMinutes?: boolean;
    showSeconds?: boolean;
    cardWidth?: number;
    cardHeight?: number;
    cardColorType?: 'solid' | 'gradient';
    cardSolidColor?: string;
    cardGradientStart?: string;
    cardGradientEnd?: string;
    textColor?: string;
    labelColor?: string;
    showLabels?: boolean;
    separator?: string;
}
export interface ComponentItem {
    id: string;
    type: ComponentType;
    name: string;
    props: ComponentProps;
    style: ComponentStyle;
    visible: boolean;
    locked: boolean;
    parentId?: string;
    cellIndex?: number;
    groupId?: string;
    isGroup?: boolean;
}
export interface SnapLine {
    type: 'v' | 'h';
    position: number;
}
export interface CanvasConfig {
    width: number;
    height: number;
    backgroundColor: string;
    name: string;
    backgroundType?: 'color' | 'image';
    backgroundImage?: string;
    backgroundImageMode?: 'tile' | 'stretch' | 'cover' | 'contain' | 'center';
    backgroundImageOpacity?: number;
    chartTheme?: {
        type: 'preset' | 'custom';
        presetName?: string;
        customColors?: string[];
    };
}
export interface EditorState {
    components: ComponentItem[];
    selectedId: string | null;
    selectedIds: string[];
    scale: number;
    snapLines: SnapLine[];
    canvasConfig: CanvasConfig;
    zenMode?: boolean;
    showComponentPanel?: boolean;
    showLayerPanel?: boolean;
    showPropertyPanel?: boolean;
}
export type EditorAction = {
    type: 'SYNC_STATE';
    payload: EditorState;
} | {
    type: 'ADD_COMPONENT';
    payload: ComponentItem;
} | {
    type: 'UPDATE_COMPONENT';
    payload: {
        id: string;
        updates: Partial<ComponentItem>;
    };
} | {
    type: 'DELETE_COMPONENT';
    payload: string;
} | {
    type: 'DELETE_COMPONENTS';
    payload: string[];
} | {
    type: 'SELECT_COMPONENT';
    payload: string | null;
} | {
    type: 'SELECT_COMPONENTS';
    payload: string[];
} | {
    type: 'MOVE_COMPONENT';
    payload: {
        id: string;
        x: number;
        y: number;
    };
} | {
    type: 'REORDER_LAYERS';
    payload: ComponentItem[];
} | {
    type: 'TOGGLE_VISIBILITY';
    payload: string;
} | {
    type: 'TOGGLE_LOCK';
    payload: string;
} | {
    type: 'SET_SCALE';
    payload: number;
} | {
    type: 'SET_SNAP_LINES';
    payload: SnapLine[];
} | {
    type: 'SET_CANVAS_CONFIG';
    payload: Partial<CanvasConfig>;
} | {
    type: 'GROUP_COMPONENTS';
    payload: string[];
} | {
    type: 'UNGROUP_COMPONENTS';
    payload: string;
} | {
    type: 'TOGGLE_ZEN_MODE';
    payload: boolean;
} | {
    type: 'TOGGLE_PANEL';
    payload: 'component' | 'layer' | 'property';
} | {
    type: 'IMPORT_PROJECT';
    payload: {
        canvasConfig: CanvasConfig;
        components: ComponentItem[];
    };
};
export interface DragItem {
    type: 'NEW_COMPONENT' | 'CANVAS_COMPONENT';
    componentType?: ComponentType;
    id?: string;
}
export interface ComponentConfig {
    type: ComponentType;
    name: string;
    icon: React.ReactNode;
    category: ComponentCategory;
    defaultProps: ComponentProps;
    defaultStyle: Partial<ComponentStyle>;
}
