reactflow流程图

2023-03-16 本文已影响0人小灰灰_a

背景

作为前端开发，详细各位同学一定遇到过流程图的开发需求，那大家都用什么呢？目前市面上用的较多的有 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 结构方案

文档内容还是挺多的，这次就先介绍到这里吧，后期有需要再更新~~~~

reactflow流程图

背景

reactflow简介

内置组件

猜你喜欢

热点阅读