Spaces:
Running
Running
File size: 7,175 Bytes
176823e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
# 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：自定义传入的值。 |
|