Coloring's picture
feat: add Flow component
176823e
# Flow
基于 [reactflow](https://reactflow.dev/) 实现的 Flow 组件。
- 支持通过 schema 自定义渲染节点
- 支持自定义节点的渲染组件,并与 Python 事件交互
## 如何使用
### 定义 schema 节点 (重要)
详见:<tab-link tab="define_schema">Define Schema</tab-link>
### 基本使用
<demo name="basic" code-position="bottom"></demo>
### 组件配置项
<demo name="component_options" code-position="bottom"></demo>
### 自定义节点类型(高阶用法,需要了解前端知识)
<demo name="custom_node_type" code-position="bottom"></demo>
## API 及参数列表
### value
接口定义:
```python
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 定义如下**
```python
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 定义如下**
```python
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 为:<br/> - id:当前触发节点 id。<br/> - node:当前触发节点类型。 <br/> - attr:当前触发节点属性。<br/> - index:当前触发节点属性索引,当节点属性为 list 时有值。<br/> - value:自定义传入的值。 |