背景
作为前端开发，详细各位同学一定遇到过 流程图 的开发需求，那大家都用什么呢？目前市面上用的较多的有 antv/v6 , jsPlumb , gojs 等，今天给大家介绍另外一款好用的工具 reactflow。
reactflow简介
React Flow是一个用于构建基于节点的应用程序的库。这些可以是任何东西，从简单的静态图到数据可视化，再到复杂的可视化编辑器。您可以实现自定义节点类型和边，并且它附带了一些组件，如开箱即用的极小图和视口控件。
- React Flow已经提供了许多您想要的开箱即用的功能。拖动节点、缩放和平移、选择多个节点和边以及添加/删除边都是内置的。
- React Flow支持自定义节点类型和边类型。自定义节点只是
React组件，所以您可以实现任何需要的东西，不用过分纠结在内置的节点类型中。通过自定义边，可以向节点边添加标签、控件和自定义逻辑。 - React Flow只渲染已更改的节点，并确保只显示视口中的节点。
内置组件
- ＜Background/＞插件实现了一些基本的可定制背景模式。
- ＜MiniMap/＞插件在屏幕角落显示图形的小版本。
- <Controls/>插件添加控件以缩放、居中和锁定视口。
- <Panel/>插件可以轻松地将内容定位在视口顶部。
- ＜NodeToolbar/＞插件允许您渲染附加到节点的工具栏。
- ＜NodeResizer/＞插件可以很容易地为节点添加调整大小的功能。
课本儿的东西就大概介绍到这里，下面就让我们自己动手亲自嗦一把，准备好，开始发车了～
- 首先我们先初始化一个项目
推荐使用vite
npm create vite@latest reactflow-app
使用webpack 可能需要添加如下配置依赖
const rewireBabelLoader = require('craco-babel-loader')
plugins: [
{
plugin: rewireBabelLoader,
options: {
includes: [/node_modules[\\\/]@?reactflow/],
},
},
]
安装依赖
npm install reactflow
现在我们搞一个模板，官方案例
import React, { useCallback } from 'react';
import ReactFlow, {
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';
const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
export default function App() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<div style={{ width: '100vw', height: '100vh' }}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<Controls />
<MiniMap />
<Background variant="dots" gap={12} size={1} />
</ReactFlow>
</div>
);
}
好了，到现在我们就完成了基本的建设，但是这个案例优点太简陋，我们实际的需求一定不是这样的，所以我们就用到了自定义节点/边，官方有很多案例，大家可以参考；
下面再介绍几个实用的 ReactFlow Instance
注意，想要在custom node等组件中使用这些实例，需要添加 ReactFlowProvider包裹
// index.tsx
<ReactFlowProvider>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
></ReactFlow>
</ReactFlowProvider>
// custemNode.tsx
import { useReactFlow, getOutgoers, } from 'reactflow'
const customNode:FC<any> = (props) => {
const { getNode, getNodes, getEdges } = useReactFlow()
}
常用的Graph方法 Graph Util Functions
- graph 数据是从后端获取，拖动时候更新nodes就需要使用 applyNodeChanges
- node数据更新为 tree 结构 方案
文档内容还是挺多的，这次就先介绍到这里吧，后期有需要再更新~~~~
网友评论