基于react+typescript开发，react生态下的work-flow组件，提供不限制根节点的MultipleFlow组件。
npm i react-flow-compoent
yarn add react-flow-component
import { MultipleFlow } from 'react-flow-component'
<MultipleFlow rectConfig={{ width: 100, height:30 }} flowNodes={flowNodes}></MultipleFlow>
<MultipleFlow rectConfig={{
activeBgColor: "red",
bgColor: "green",
corner: 50,
width: 100,
height: 100,
autoY: 200
}} flowNodes={selectedKeys}></MultipleFlow>
示例具体代码见：https://github.com/Benzic/react-flow-component/blob/master/example/src/index.tsx
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| flowNodes | flow节点 | nodeType[] | - |
| flowLines | flow线条 | lineType[] | - |
| rectConfig | flow节点统一配置项 | rectConfig | - |
| lineCofig | flow连线配置项 | lineCofig | - |
| onDBClick | 节点为可编辑事件双击会触发 | (val)=>void | - |
| onChange | 节点的位置、删除、线条等改变触发 | (val：nodeType[])=>void | - |
| onConnect | 节点连接触发 | ({FNode:nodeType, ENode:nodeType})=>void | - |
| onChangePosition | 画布位移触发 | ({translateX:number, translateY:number})=>void | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 节点宽度 | number | 100 |
| height | 节点高度 | number | 30 |
| xCorrecting | X方向移动校正位置 | number | 10 |
| yCorrecting | Y方向移动校正位置 | number | 5 |
| activeBgColor | 节点激活背景颜色 | string | #40a9ff |
| bgColor | 节点背景颜色 | string | #ffffff |
| bgImg | 节点背景图片 | CanvasImageSource | - |
| shadowBlur | 节点阴影范围 | number | - |
| shadowColor | 节点阴影颜色 | string | rgba(0, 0, 0, 0.3) |
| corner | 节点圆角(如果是正方形圆角为大于长宽一半则绘制节点为圆形) | number | 0 |
| textMargin | 文本位置偏移 | number[] | [] |
| textAlign | 节点字体水平位置 | center | left | right | center |
| fontSize | 节点显示文本的字体大小 | string | 12px |
| txtColor | 节点的字体颜色 | string | #000000 |
| tool | 节点上的按钮 | toolType | - |
| textEllipsis | 文本省略 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| levelLimit | 开启线条链接层级限制 | boolean | false |
| move | 是否允许线拖动 | boolean | false |
| width | 线条宽度 | number | 2 |
| label | 线条label | labelType | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| x | flow节点初始X坐标 | number | 必传 |
| y | flow节点初始Y坐标 | number | 必传 |
| key | flow节点key值(必须为唯一值) | string|number | 必传 |
| toNodes | flow节点连接的子节点key集合 | string[]|number[] | - |
| fromNodes | flow节点连接的父节点key集合 | string[]|number[] | - |
| active | flow节点是否激活 | boolean | false |
| name | flow节点显示文本 | string | - |
| bgImg | 节点背景图片 | CanvasImageSource | - |
| corner | 节点圆角(如果是正方形圆角为大于长宽一半则绘制节点为圆形) | number | 0 |
| level | flow节点层级 用于判断连接关系高level可以链接低level节点 | string | number |
| tool | flow节点按钮 | toolType | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| x | 初始X坐标 | number | - |
| y | 初始Y坐标 | number | - |
| width | tool宽 | number | - |
| height | too高 | number | - |
| active | 是否激活 | boolean | false |
| title | 显示文本 | string | - |
| bgImg | 背景图片 | CanvasImageSource | - |
| corner | 圆角(如果是正方形圆角为大于长宽一半则绘制节点为圆形) | number | 0 |
| bgColor | tool背景颜色 | string | - |
| activeBgColor | tool高亮背景颜色 | string | - |
| shadowBlur | 阴影范围 | number | - |
| shadowColor | 阴影颜色 | string | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | tool宽 | number | - |
| height | too高 | number | - |
| active | 是否激活 | boolean | false |
| title | 显示文本 | string | - |
| txtColor | 节点的字体颜色 | string | - |
| fontSize | 节点显示文本的字体大小 | string | 12px |
| aTextColor | 高亮节点的字体颜色 | string | - |
| textMargin | 文本位置偏移 | number[] | [] |
| textAlign | 节点字体水平位置 | center | left | right | center |
| bgImg | 背景图片 | CanvasImageSource | - |
| corner | 圆角(如果是正方形圆角为大于长宽一半则绘制节点为圆形) | number | 0 |
| bgColor | tool背景颜色 | string | - |
| shadowBlur | 阴影范围 | number | - |
| shadowColor | 阴影颜色 | string | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 网格颜色 | string | #dddddd |
| space | 网格范围外多余空间 | number | 100 |
| width | 网格线粗 | number | 0.5 |
| type | 网格样式 | point|line | point |
| stepX | X方向距离 | number | - |
| stepY | Y方向距离 | number | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 点击类型 | point|line |tool | - |
| node | 点击对象 | rectType | lineType |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| x | 初始X坐标 | number | 必传 |
| y | 初始Y坐标 | number | 必传 |
| toNodes | 连接的子节点key集合 | string[]|number[] | - |
| fromNodes | 连接的父节点key集合 | string[]|number[] | - |
| data | 额外参数 | object | - |
| turnPoints | 转折点集合 | {x:number, y:number}[] | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 节点key | number | string |
| point | 节点信息 | nodeType | - |
希望有什么bug和意见都可以告诉我，谢谢。