背景

作為前端開(kāi)發(fā)，詳細(xì)各位同學(xué)一定遇到過(guò) 流程圖 的開(kāi)發(fā)需求，那大家都用什么呢？目前市面上用的較多的有 antv/v6 , jsPlumb , gojs 等，今天給大家介紹另外一款好用的工具 reactflow。

reactflow簡(jiǎn)介

React Flow是一個(gè)用于構(gòu)建基于節(jié)點(diǎn)的應(yīng)用程序的庫(kù)。這些可以是任何東西，從簡(jiǎn)單的靜態(tài)圖到數(shù)據(jù)可視化，再到復(fù)雜的可視化編輯器。您可以實(shí)現(xiàn)自定義節(jié)點(diǎn)類型和邊，并且它附帶了一些組件，如開(kāi)箱即用的極小圖和視口控件。

• React Flow已經(jīng)提供了許多您想要的開(kāi)箱即用的功能。拖動(dòng)節(jié)點(diǎn)、縮放和平移、選擇多個(gè)節(jié)點(diǎn)和邊以及添加/刪除邊都是內(nèi)置的。
• React Flow支持自定義節(jié)點(diǎn)類型和邊類型。自定義節(jié)點(diǎn)只是React組件，所以您可以實(shí)現(xiàn)任何需要的東西，不用過(guò)分糾結(jié)在內(nèi)置的節(jié)點(diǎn)類型中。通過(guò)自定義邊，可以向節(jié)點(diǎn)邊添加標(biāo)簽、控件和自定義邏輯。
• React Flow只渲染已更改的節(jié)點(diǎn)，并確保只顯示視口中的節(jié)點(diǎn)。

內(nèi)置組件

• ＜Background/＞插件實(shí)現(xiàn)了一些基本的可定制背景模式。
• ＜MiniMap/＞插件在屏幕角落顯示圖形的小版本。
• <Controls/>插件添加控件以縮放、居中和鎖定視口。
• <Panel/>插件可以輕松地將內(nèi)容定位在視口頂部。
• ＜NodeToolbar/＞插件允許您渲染附加到節(jié)點(diǎn)的工具欄。
• ＜NodeResizer/＞插件可以很容易地為節(jié)點(diǎn)添加調(diào)整大小的功能。

課本兒的東西就大概介紹到這里，下面就讓我們自己動(dòng)手親自嗦一把，準(zhǔn)備好，開(kāi)始發(fā)車了～

• 首先我們先初始化一個(gè)項(xiàng)目 推薦使用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

現(xiàn)在我們搞一個(gè)模板，官方案例

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>
  );
}

好了，到現(xiàn)在我們就完成了基本的建設(shè)，但是這個(gè)案例優(yōu)點(diǎn)太簡(jiǎn)陋，我們實(shí)際的需求一定不是這樣的，所以我們就用到了自定義節(jié)點(diǎn)/邊，官方有很多案例，大家可以參考；

• 自定義節(jié)點(diǎn) Custom Node
• 自定義邊 Custom Edges

下面再介紹幾個(gè)實(shí)用的 ReactFlow Instance
注意，想要在custom node等組件中使用這些實(shí)例，需要添加 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 數(shù)據(jù)是從后端獲取，拖動(dòng)時(shí)候更新nodes就需要使用 applyNodeChanges
• node數(shù)據(jù)更新為 tree 結(jié)構(gòu) 方案

文檔內(nèi)容還是挺多的，這次就先介紹到這里吧，后期有需要再更新~~~~