Flow

基于 reactflow 实现的 Flow 组件。

支持通过 schema 自定义渲染节点
支持自定义节点的渲染组件，并与 Python 事件交互

如何使用

定义 schema 节点 (重要)

详见：Define Schema

基本使用

组件配置项

自定义节点类型（高阶用法，需要了解前端知识）

API 及参数列表

value

接口定义：

class NodePosition(GradioModel):
    x: Optional[int] = 0
    y: Optional[int] = 0


class Node(GradioModel):
    id: Optional[str] = None
    name: str
    title: Optional[str] = None
    position: Optional[Union[NodePosition, dict]] = None
    data: Optional[dict] = None

class EdgePort(GradioModel):
    attr: Optional[str] = None
    attrItemIndex: Optional[int] = None
    handleIndex: Optional[int] = None

class Edge(GradioModel):
    id: Optional[str] = None
    source: str
    target: str
    sourcePort: Optional[Union[EdgePort, dict]] = None
    targetPort: Optional[Union[EdgePort, dict]] = None


class FlowData(GradioModel):
    nodes: Optional[List[Union[Node, dict]]] = []
    edges: Optional[List[Union[Edge, dict]]] = []

props

属性	类型	默认值	描述
height	int \| str	600	Flow 组件高度。
sync_on_data_change	bool	None	是否仅在数据更改时同步 Python 值（例如：节点属性、节点计数、边缘计数、连接端口等，不包括节点位置）。如果您想要更好的页面性能而不是完整数据同步，则应将其设置为 True。
schema	FlowSchemaDict \| dict	None	定义 Flow 组件的 nodes 与 edges。
show_sidebar	bool	True	是否展示侧 Flow 组件侧边栏。
show_minimap	bool	True	是否展示侧 Flow 组件小地图。
show_controls	bool	True	是否展示侧Flow 组件控制栏。
background_props	BackgroundPropsDict \| dict CustomComponentDict 定义见下方	None	修改 Flow组件背景，详见 BackgroundPropsDict 类型。
min_zoom	int	0.1	Flow 组件最小缩放倍率。
max_zoom	int	2	Flow 组件最大缩放倍率。
custom_components	dict[str, CustomComponentDict] CustomComponentDict 定义见下方	None	支持用户自定义节点类型，并通过 js 控制渲染样式与触发 python 事件。

BackgroundPropsDict 定义如下

class BackgroundPropsDict(TypedDict):
    color: Optional[str]
    className: Optional[str]
    # The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
    gap: Optional[Union[int, Tuple[int, int]]]
    # The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
    size: Optional[int]
    offset: Optional[int]
    lineWidth: Optional[int]
    variant: Optional[Literal['dots', 'lines', 'cross']]

CustomComponentDict 定义如下

class CustomComponentDict(TypedDict):
    props: Optional[List[str]]
    template: Optional[str]
    js: Optional[str]

event listeners

事件	描述
`mgr.Flow.change(fn, ···)`	当 value 更新时触发，如果 sync_on_data_change 值为 True 时，此时 flow 的实际数据可能并不是实时的，建议监听 data_change 事件。
`mgr.Flow.data_change(fn, ···)`	当在数据更改时触发（例如：节点属性、节点计数、边缘计数、连接端口等，不包括节点位置）
`mgr.Flow.custom(fn, ···)`	自定义标签触发事件时触发，EventData 为： - id：当前触发节点 id。 - node：当前触发节点类型。 - attr：当前触发节点属性。 - index：当前触发节点属性索引，当节点属性为 list 时有值。 - value：自定义传入的值。