@rxflow/base
Version:
BaseFlow - 核心 Flow 组件库
224 lines • 7.31 kB
TypeScript
/**
* @author: yanxianliang
* @date: 2025-07-02 09:30
* @desc: BaseFlow 类型文件定义
*
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
*/
import { Edge, MarkerType, Node, PanelPosition, ReactFlowState, NodeProps, OnEdgesChange, ReactFlowProps } from "@xyflow/react";
import { NodeHandleBounds } from "@xyflow/system";
import React, { ComponentType } from "react";
import { MarkDefinition } from "./components/MarkerDefinitions/types";
import { ScrollbarPluginOptions } from "./plugins/scrollbar/types";
export type NodeTypeComponent<DataType extends Record<string, unknown> = Record<string, unknown>> = ComponentType<NodeProps<Node<DataType>>> & {
measureHandles?: (data: Node<DataType>) => NodeHandleBounds;
defaultSize?: {
width: number | ((node: Node<DataType>, theme: BaseThemeConfig) => number);
height: number | ((data: Node<DataType>, theme: BaseThemeConfig) => number);
};
};
export interface BaseThemeConfig {
/**
* @description 字体大小配置
* @default 14
*/
fontSize?: number;
/**
* @description 字体家族配置
* @default "Arial, helvetica, sans-serif"
*/
fontFamily?: string;
/**
* @description 主题色
* @default "#5F95FF"
*/
primaryColor?: string;
/**
* @description 折叠按钮形状
* @default 'rect'
*/
collapseButtonShape?: 'rect' | 'circle';
/**
* 展开时自动隐藏关联节点数量
*/
autoHideCountWhenExpanded?: boolean;
/**
* @desc 是否显示依赖数量
* @default true
*/
showCount?: boolean;
}
export type LayoutConfig<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
nodeTypes: Record<string, NodeTypeComponent>;
originNodes: NodeType[];
originEdges: EdgeType[];
theme: BaseThemeConfig;
onlyRenderVisibleElements: boolean;
store: ReactFlowState<NodeType, EdgeType>;
state: BaseStateType;
flowProps: IBaseFlowProps<NodeType, EdgeType>;
};
export type LayoutFunction<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (config: LayoutConfig<NodeType, EdgeType>) => ({
nodes: NodeType[];
edges: EdgeType[];
});
export type MindMapLayoutConfig = {
hGap?: number;
vGap?: number;
markerType?: MarkerType;
};
export interface INodeDefinition<DataType extends Record<string, unknown> = Record<string, unknown>> {
type: string;
hideInLegend?: boolean;
hideInSider?: boolean;
group?: string;
order?: number;
label?: string;
icon?: React.ReactNode;
color?: string;
deletable?: boolean;
component: NodeTypeComponent<DataType>;
_component?: NodeTypeComponent<DataType>;
measureHandles?: (data: Node<DataType>) => NodeHandleBounds;
defaultSize?: {
width: number | ((node: Node<DataType>, theme: BaseThemeConfig) => number);
height: number | ((data: Node<DataType>, theme: BaseThemeConfig) => number);
};
[key: string]: any;
}
export interface IBaseFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> extends Omit<ReactFlowProps<NodeType, EdgeType>, 'nodeTypes' | 'width' | 'height'> {
/**
* @description graph 宽度
*/
width?: string | number;
/**
* @description graph 高度
*/
height?: string | number;
/**
* @description 背景颜色
*/
background?: string;
/**
* @description 主题配置
*/
theme?: BaseThemeConfig;
nodeTypes?: Array<INodeDefinition<NodeType['data']>>;
/**
* @description 是否显示控制器
* @default true
*/
showControls?: boolean;
controlsPosition?: PanelPosition;
controlsOrientation?: 'horizontal' | 'vertical';
customControls?: React.ReactNode;
showMiniMap?: boolean;
getMiniMapNodeColor?: (node: Node) => string;
showFullscreen?: boolean;
/**
* @description 是否显示布局优化操作
*/
showForceLayout?: boolean;
showInteractive?: boolean;
showFitView?: boolean;
showZoom?: boolean;
/**
* @description 是否显示图例
* @default false
*/
showLegend?: boolean | {
/**
* 是否显示所有的图例，false时只显示当前显示节点的图例
* @default true
*/
showAll?: boolean;
};
/**
* @description 是否自动居中
* @default false
*/
autoCenter?: boolean;
rootStyle?: React.CSSProperties;
layout?: LayoutFunction<NodeType, EdgeType>;
/**
* @description 是否强制布局
* @default !!layout
*/
forceLayout?: boolean;
markers?: MarkDefinition[];
plugins?: {
scroller?: false | ScrollbarPluginOptions;
};
/**
* @description 是否开启 service worker 模式，当为数字时，检测当前的节点数量，节点数量大于配置阈值时启用 serviceWorker模式，否则直接在 js中执行；当为true时强制使用 service worker 执行计算逻辑。false时默认关闭
* @default false
*/
readOnly?: boolean;
onZoomIn?: () => void;
/** Called in addition the default zoom behavior when the zoom out button is clicked. */
onZoomOut?: () => void;
/**
* Called when the fit view button is clicked. When this is not provided, the viewport will be
* adjusted so that all nodes are visible.
*/
onFitView?: () => void;
/** Called when the interactive (lock) button is clicked. */
onInteractiveChange?: (interactiveStatus: boolean) => void;
/**
* @description nodes 节点变化/初始化渲染回调
*/
onRender?: (nodes: NodeType[], edges: EdgeType[], timing: number) => void;
omitProps?: string[];
/**
* 强制执行 fitView 逻辑，当 nodes 变化时自动触发 forceFitView
*/
forceFitView?: boolean;
loading?: boolean;
}
export type CollapseButtonProps = {
position?: 'left' | 'right';
loading?: boolean;
collapsed?: boolean;
count: number;
onCollapse?: (collapsed: boolean) => void;
direction?: 'vertical' | 'horizontal';
displayCount?: boolean;
autoHideCountWhenExpanded?: boolean;
};
export interface TreeNode {
id: string;
type: string;
collapsed?: boolean;
childCount?: number;
children?: Array<TreeNode>;
}
export interface BaseNodeData {
id: string;
type: string;
}
export type NodeRenderProps = NodeProps & {
data: any;
type: any;
};
export type PopupTriggerEventType = {
onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
onPointerEnter?: (event: React.MouseEvent<HTMLElement>) => void;
onPointerLeave?: (event: React.MouseEvent<HTMLElement>) => void;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
};
export type BaseStateType = {
id: string;
props: Record<string, any>;
onEdgesChangeHandlers: OnEdgesChange<any>[];
isNodeDragging: boolean;
forceRenderTimes: number;
initialNodeIdSet: Set<string>;
nodeTypeMap: Map<string, INodeDefinition>;
smartEdges: Record<string, boolean>;
edgeStore: Record<string, any>;
};
export type ExtractState<S> = S extends {
getState: () => infer T;
} ? T : never;
//# sourceMappingURL=types.d.ts.map