使用react-flow制作流程图

信钢销售部杨微微 發表於 2023-5-25 11:25:00

1.react-flow
 react-flow是一个用于构建基于节点的应用程序的库。这些可以是简单的静态图或复杂的基于节点的编辑器。同时react-flow支持自定义节点类型和边线类型，并且它附带一些组件，可以查看缩略图的Mini Map和悬浮控制器Controls.
<h4>2、react-flow 的安装</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">　　npm install react-flow-renderer # npm
　　yarn add react-flow-renderer # Yarn
</pre>
</div>
<h5>3.react-flow基本使用　　</h5>
　　1、每个节点固定格式里面添加内容
　　代码
　　　　　　index.tsx
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';

import { nodes as initialNodes, edges as initialEdges } from './initial-elements';

const OverviewFlow = () => {
const = useNodesState(initialNodes);
const = useEdgesState(initialEdges);
const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

return (
<ReactFlow
 nodes={nodes} // 节点
 edges={edges} // 连接线
 onNodesChange={onNodesChange} // 节点拖拽等改变
 onEdgesChange={onEdgesChange} // 连接线拖拽等改变
 onConnect={onConnect} // 节点直接连接
 fitView // 渲染节点数据
 attributionPosition="top-right" // react-flow的位置,类似水印,可以通过css隐藏
>
 // 背景图可以配置颜色方格宽度
 <Background color="#aaa" gap={16} />
</ReactFlow>
);
};

export default OverviewFlow;</pre>
</div>
initial-elements.ts节点与连接线数据
<div class="cnblogs_code">
<pre>import { MarkerType } from 'react-flow-renderer';

export const nodes = [
{
id: '1', // id必须
type: 'input', // 类型: input开始default默认output结束区别在于连接点不一样
data: { // 额外的数据
 label: ( // 节点名称
 <>
 Welcome to React Flow!
 </>
 ),
 // value: 5, .... // 可以将其他数据放入
 },
position: { x: 250, y: 0 }, // 节点位置
},
{
id: '2',
data: {
 label: (
 <>
 This is a default node
 </>
 ),
},
position: { x: 100, y: 100 },
},
{
id: '3',
data: {
 label: (
 <>
 This one has a custom style
 </>
 ),
},
position: { x: 400, y: 100 },
style: {
 background: '#D6D5E6',
 color: '#333',
 border: '1px solid #222138',
 width: 180,
},
},
{
id: '4',
position: { x: 250, y: 200 },
data: {
 label: 'Another default node',
},
},
{
id: '5',
data: {
 label: 'Node id: 5',
},
position: { x: 250, y: 325 },
},
{
id: '6',
type: 'output',
data: {
 label: (
 <>
 An output node
 </>
 ),
},
position: { x: 100, y: 480 },
},
{
id: '7',
type: 'output',
data: { label: 'Another output node' },
position: { x: 400, y: 450 },
},
];

export const edges = [
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{
id: 'e3-4', // id必须
source: '3', // 连接线起始节点id
target: '4', // 连接线结束节点id
animated: true, // 连接线是否有动画
label: 'animated edge', // 连接线名称
},
{
id: 'e4-5',
source: '4',
target: '5',
label: 'edge with arrow head',
markerEnd: { // 连接线尾部的箭头
 type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-6',
source: '5',
target: '6',
type: 'smoothstep', // 连接线类型 default straight step smoothstep
label: 'smooth step edge',
},
{
id: 'e5-7',
source: '5',
target: '7',
type: 'step',
style: { stroke: '#f6ab6c' }, // 连接线颜色
label: 'a step edge',
animated: true,
labelStyle: { fill: '#f6ab6c', fontWeight: 700 }, // 连接线名称样式
},
];</pre>
</div>
　　效果图<img src="https://img2023.cnblogs.com/blog/2749674/202305/2749674-20230525105241407-1750363191.png">
 
2、自定义每个节点中的内容和样式以及连接点
　　这个是静态的展示流程图想拖动节点加上1里面的 onNodesChange... 的参数即可
index.tsx
<div class="cnblogs_code">
<pre>import React, {useEffect} from 'react';

import ReactFlow, {
useNodesState,
useEdgesState,
} from 'react-flow-renderer';

import {nodes as initialNodes, edges as initialEdges} from './initial-elements';
import CustomNode from './ResizableNode'; //自定义的渲染每个节点的代码

const nodeTypes = {
custom: CustomNode, //自定义的内容
};
const OverviewFlow = ({resizeFlag}: any) => {
const = useNodesState(initialNodes);
const = useEdgesState(initialEdges);

useEffect(() => {
 setNodes([]);
 setTimeout(() => {
 setNodes(initialNodes);
 }, 50);
}, );

if (!nodes?.length) {
 return null;
}

return (
 <ReactFlow
 nodes={nodes} // 节点
 edges={edges} // 连接线
 panOnDrag={false}
 zoomOnDoubleClick={false}
 zoomOnPinch={false}
 zoomOnScroll={false}
 panOnScroll={false}
 fitView // 渲染节点数据
 nodeTypes={nodeTypes}
 attributionPosition="top-left" // react-flow的位置,类似水印,可以通过css隐藏 =》 .react-flow__attribution.left {display: none};</pre>
<pre> >
 {/* <Background color="#aaa" gap={16} /> */}
 </ReactFlow>
 );
};

export default OverviewFlow;</pre>
</div>
 initial-elements.ts
<div class="cnblogs_code">
<pre>import {MarkerType, Position} from 'react-flow-renderer';

const styles = {
color: '#333',
border: '1px solid #4E8FF0',
borderRadius: '5px',
background: 'white',

}; //因为数据太多删除了几个不过格式都是这样写
export const nodes = [
{
 id: '0',
 type: 'custom',//有input，output，default三种，input只有一个输出，output只有一个输入，default输入输出各有一个或者自定义的
 data: {
 label: '',
 },
 position: {x: -20, y: 40}, // 节点位置
 style: {
 width: 1550,
 height: 500,
 border: '1px solid #91caff',
 borderRadius: '15px',
 color: '#4585F2',
 background: '#E2E6F3',
 zIndex: -2,
 },
},
{
 id: '1', // id必须
 type: 'custom', // 类型: input开始default默认output结束区别在于连接点不一样
 data: { // 额外的数据
 label:
 '任务1',
 // value: 1 // .... // 可以将其他数据放入
 },
 position: {x: 200, y: 70}, // 节点位置
 style: {
 width: 200,
 height: 150,
 ...styles,
 },
},
{
 id: '2',
 type: 'custom',
 data: {
 label: '任务2',
 },
 position: {x: 450, y: 70},
 style: {
 width: 200,
 height: 150,
 },
},
{
 id: '3',
 type: 'custom',

 data: {
 label: (
 '任务3'
 ),
 },
 position: {x: 700, y: 70},
 style: {
 width: 200,
 height: 150,
 ...styles,
 },
}
];

export const edges = [
{
 id: '1-2',
 source: '1',
 target: '2',
 markerEnd: { // 连接线尾部的箭头
 type: MarkerType.ArrowClosed,
 color: '#4E8FF0',
 },
 style: {stroke: '#4E8FF0'}, // 连接线颜色
 labelStyle: {fill: '#4E8FF0', fontWeight: 700}, // 连接线名称样式
 },
{
 id: '2-3', // id必须
 source: '2', // 连接线起始节点id
 target: '3', // 连接线结束节点id
 markerEnd: { // 连接线尾部的箭头
 type: MarkerType.ArrowClosed,
 color: '#4E8FF0',
 },
 style: {stroke: '#4E8FF0'}, // 连接线颜色
 labelStyle: {fill: '#4E8FF0', fontWeight: 700}, // 连接线名称样式
 },
{
 id: '3-4',
 source: '3',
 target: '4',
 style: {stroke: '#4E8FF0'}, // 连接线颜色
 labelStyle: {fill: '#4E8FF0', fontWeight: 700}, // 连接线名称样式
 markerEnd: { // 连接线尾部的箭头
 type: MarkerType.ArrowClosed,
 color: '#4E8FF0',
 },
}
];</pre>
</div>
 
<pre>ResizableNode.tsx</pre>
<div class="cnblogs_code">
<pre>import React, {memo} from 'react';
import {Handle, Position} from 'react-flow-renderer';
import className from './home.module.scss';
import newTask from '@/static/newTask.png';
import Operator from '@/static/OperatorConfig.png';
import DeployTask from '@/static/DeploymentTask.png';
import TaskReview from '@/static/TaskReview.png';
import TaskLaunch from '@/static/TaskLaunch.png';
import {Button} from 'antd';

const datadevelopment = [
{
 id: '0',
},
{
 src: newTask,
 id: '1',
 button: '快速开始',
 url: '',
 width: '50px',
 height: '50px',
},
{
 src: Operator,
 id: '11',
 button: '配置说明',
 link: '',
 width: '45px',
 height: '45px',
},
{
 src: DeployTask,
 id: '3',
 title: '任务基本信息',
 width: '55px',
 height: '55px',
},

];

export default memo(({data, id, isConnectable}: any) => {

// console.log(1, data);
const position = (sum: any) => {
 switch (sum) {
 case '6':
 return Position.Right;
 case '9':
 return Position.Top;
 default:
 return Position.Left;
 }
};

const pageButton = (item: any) => {
 if (item.link) {
 return (
 <Button
 target='_blank'
 type='link'
 htmlType='button'
 href={item.link}
 > {item.button}
 </Button>
 );
 } else {
 return (
 <Button
 style={{
 background: 'linear-gradient(90deg,#2468E8,#2C61E4,#4148D0,#5127B8)',
 border: 'none',
 }}
 onClick={e => {
 e.stopPropagation();
 window.location.hash = item.url;
 }}
 type='primary'
 > {item.button}
 </Button>
 );
 }
};

return (
 <div className={className.ResicabelNode}>
 <Handle
 style={{visibility: 'hidden'}}
 type="target"
 position={position(id)}
 isConnectable={isConnectable}
 />
 {
 datadevelopment.filter((item: any) => {
 return item.id === id;
 }).map((item: any) => {
 return (
 +item.id < 12
 ? <div
 key={item.id}
 className={className.nodeContent}
 style={data.style}
 >
 {item.src ? <img style={{width: item.width, height: item.height}} src={item.src} /> : null}
 <div className={className.nodeRightbox}>
 {data.label}
 {item.button
 ? pageButton(item)
 : {item.title}}
 </div>
 </div>
 : <div
 key={item.id}
 className={className.dataDistribution}
 style={data.style}
 >
 {
 item.order
 ? 
 {item.order}
 : null
 }
 {data.label}
 {
 item.button ? pageButton(item) : null
 }
 </div>
 );
 })
 }
 <Handle
 style={{visibility: 'hidden'}}
 type='source'
 position={id === '11'
 || id === '5' ? Position.Bottom : Position.Right}
 id='a'
 className='my_handle'
 isConnectable={isConnectable}
 />
 </div>
 );
});</pre>
</div>
 
 效果图
<img src="https://img2023.cnblogs.com/blog/2749674/202305/2749674-20230525110902651-227436945.png">
 
 收集的一些关于 react-flow 参数讲解链接以及官网地址
　　https://www.5axxw.com/wiki/content/obkffc
 　　https://reactflow.dev/
  
来源：https://www.cnblogs.com/qing1224/p/17430652.html

頁: [1]

琼殿技术论坛's Archiver

使用react-flow制作流程图