React-flow-component NPM

React-flow-component

基于react+typescript开发，react生态下的work-flow组件，提供不限制根节点的MultipleFlow组件。

安装方法

npm安装

npm i react-flow-compoent

yarn安装

yarn add react-flow-component

引入

import { MultipleFlow } from 'react-flow-component'

<MultipleFlow rectConfig={{ width: 100, height:30 }} flowNodes={flowNodes}></MultipleFlow>

MultipleFlow 双击长按连线单击拖动双击编辑

更改corner 修改样式以下是直接全局统一配置flow节点样式，也可以单独配置flow节点样式

  <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

API

FlowProps配置项

参数	说明	类型	默认值
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	-

Flow节点统一配置项 rectConfig

参数	说明	类型	默认值
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

Flow连线的配置项 lineCofig

参数	说明	类型	默认值
levelLimit	开启线条链接层级限制	boolean	false
move	是否允许线拖动	boolean	false
width	线条宽度	number	2
label	线条label	labelType	-

Flow节点的配置项 nodeType

参数	说明	类型	默认值
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	-

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	-

Flow节点的配置项 labelType

参数	说明	类型	默认值
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	-

Flow节点的配置项 grdCfg

参数	说明	类型	默认值
color	网格颜色	string	#dddddd
space	网格范围外多余空间	number	100
width	网格线粗	number	0.5
type	网格样式	point\|line	point
stepX	X方向距离	number	-
stepY	Y方向距离	number	-

Flow节点的配置项 dbClickType

参数	说明	类型	默认值
type	点击类型	point\|line \|tool	-
node	点击对象	rectType	lineType	-

Flow节点的配置项 lineType

参数	说明	类型	默认值
x	初始X坐标	number	必传
y	初始Y坐标	number	必传
toNodes	连接的子节点key集合	string[]\|number[]	-
fromNodes	连接的父节点key集合	string[]\|number[]	-
data	额外参数	object	-
turnPoints	转折点集合	{x:number, y:number}[]	-