Skip to content

Commit

Permalink
Merge pull request #1591 from alibaba/xflow
Browse files Browse the repository at this point in the history 
Xflow
  • Loading branch information
@lhbxs
lhbxs authored Dec 16, 2024
2 parents ca45064 + 709f02b commit 8ccb867
Show file tree
Hide file tree
Showing 47 changed files with 842 additions and 501 deletions.
42 changes: 40 additions & 2 deletions docs/xflow/FlowProvider.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,50 @@
---
order: 3
title: '多实例画布'
title: '<FlowProvider/>'
mobile: false
group:
title: 最佳展示
order: 4
---

# 基础交互
## 基础交互

`<FlowProvider/>` 组件是一个 Context Provider，使得在 `<XFlow/>` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 和 `useEdges()` 钩子依赖于这个组件才能工作。

<code src="./demo/flow-provider/index.tsx"></code>

## useFlow

`useFlow()` 钩子返回 XFlow 实例，包含了一些实用的内部方法。

- setNodes：设置节点
- addNodes：添加一个或多个节点
- setEdges：设置边
- addEdges：添加一个或多个边
- getNodes：获取节点数据
- getEdges：获取边数据
- toObject：将画布数据转换为对象返回
- zoomIn：放大画布
- zoomOut：缩小画布
- zoomTo：缩放画布
- getZoom：获取缩放比例
- setViewport：设置视口
- getViewport：获取视口
- fitView：适应画布
- setCenter：设置画布中心
- fitBounds：适应边界
- screenToFlowPosition：将屏幕坐标转换为画布坐标
- flowToScreenPosition：将画布坐标转换为屏幕坐标

## useNodes

`useFlow` 的 `getNodes` 是瞬时值。想要监听节点状态，请使用 `useNodes` 钩子来返回实时 nodes 状态。

## useEdges

`useFlow` 的 `getEdges` 是瞬时值。想要监听节点状态，请使用 `useEdges` 钩子来返回实时 edges 状态。

## 注意

- 如果你正在使用路由器并且希望流程的状态在不同路由之间保持持久，那么将 `<FlowProvider/>` 组件放置在路由器外部是至关重要的。
- 如果在同一页面上有多个 `<XFlow/>`，则需要为每个 `<XFlow/>` 使用单独的 `<FlowProvider/>`
44 changes: 24 additions & 20 deletions docs/xflow/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@ title: API

## XFlow

| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ------------------------------------ | ----------------------------------------------------------- | ------ |
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
| |
| 属性 | 描述 | 类型 | 默认值 |
| ----------------- | ------------------------------------------ | ----------------------------------------------------------- | ------ |
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
| configPanelWidth | 统一设置配置面板宽度 | `number` | 400 |
| hideLineInsertBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |

### TNodeGroup

Expand All @@ -31,17 +32,20 @@ title: API

单个节点配置

| 属性 | 描述 | 类型 | 默认值 |
| ------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| title | 节点名称 | `string` | |
| type | 节点类型 | `string` | |
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget` | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| 属性 | 描述 | 类型 | 默认值 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| title | 节点名称 | `string` | |
| type | 节点类型 | `string` | |
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| iconSvg | 节点的图标配置Svg格式 | `SVGSVGElement` | |
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget` | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodeConfigPanelWidth | 单独设置节点配置面板宽度 | `string` | 400 |

## TNodeSelector

Expand Down
32 changes: 16 additions & 16 deletions docs/xflow/demo/flow-provider/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import * as React from "react";

import XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';
import { edges as initialEdges } from './edges';
Expand All @@ -7,18 +7,18 @@ import settings from './setting';

const App = () => {
return (
<FlowProvider>
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes: initialNodes, edges: initialEdges }}
settings={settings}
nodeSelector={{
showSearch: true,
}}
/>
</div>
<Sidebar />
</FlowProvider>
<FlowProvider>
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes: initialNodes, edges: initialEdges }}
settings={settings as any[]}
nodeSelector={{
showSearch: true,
}}
/>
</div>
<Sidebar />
</FlowProvider>
);
};

Expand All @@ -30,9 +30,9 @@ function Sidebar() {
return (
<aside>
{nodes?.map(node => (
<div key={node.id}>
Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
{node.position.y.toFixed(2)}
<div key={node?.id}>
Node {node?.id} - x: {node?.position?.x?.toFixed(2)}, y:{' '}
{node?.position?.y?.toFixed(2)}
</div>
))}
</aside>
Expand Down
4 changes: 2 additions & 2 deletions docs/xflow/demo/layout/TB/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ export default () => {
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes, edges }}
settings={settings}
settings={settings as any}
nodeSelector={{
showSearch: true,
}}
layout="TB"
layout="LR"
/>
</div>
);
Expand Down
Loading

0 comments on commit 8ccb867

Please sign in to comment.