React-flow 工作流案例詳解
上期和大家分享了我最近做的 React-Flow 中文文檔。到今天為止, 核心部分已經(jīng)完全翻譯完成。大家可以直接使用中文文檔快速學(xué)習(xí)和使用 React-Flow 搭建自己的工作流。
圖片
github: https://github.com/MrXujiang/react-flow
文檔地址: http://react-flow.com
接下來我會基于我寫的中文文檔, 帶大家做一個(gè)非常有意思的工作流案例, 方便大家快速上手 React-Flow。
案例展示
圖片
這個(gè)案例主要包含幾個(gè)技術(shù)點(diǎn):
- 如何自定義節(jié)點(diǎn)
- 如何自定義邊
- 如何設(shè)置畫布縮略圖和畫布控件
- 如何實(shí)現(xiàn)嵌套節(jié)點(diǎn)
- 如何設(shè)置畫布樣式
- 如何拖拽框選多個(gè)節(jié)點(diǎn)
掌握了以上幾點(diǎn), 我們可以實(shí)現(xiàn)各種場景的流程圖或者工作流。上圖的案例我已經(jīng)推送到 Github, 大家也可以下載代碼參考學(xué)習(xí)。
自定義節(jié)點(diǎn)
因?yàn)楣俜教峁┑墓?jié)點(diǎn)樣式比較有限,所以我們需要自定義節(jié)點(diǎn)和節(jié)點(diǎn)樣式. 上述我做的案例中有三個(gè)自定義節(jié)點(diǎn):
- 按鈕節(jié)點(diǎn)
- 圖片節(jié)點(diǎn)
- 圖文標(biāo)簽節(jié)點(diǎn)(頂部根節(jié)點(diǎn))
如下圖所示:
圖片
具體的自定義節(jié)點(diǎn)的方式我在中文文檔中也有詳細(xì)介紹和 demo, 這里給大家分享一下實(shí)現(xiàn)方式:
function LogoNode({ data, isConnectable }) {
const { src, text } = data;
return (
<div className="flow-logo">
<Handle
type="source"
position={Position.Bottom}
id="a"
// style={handleStyle}
isConnectable={isConnectable}
/>
<Handle
type="source"
position={Position.Bottom}
id="b"
isConnectable={isConnectable}
/>
<div>
<img src={src} />
<div className="flow-logo-text">{ text }</div>
</div>
</div>
);
}做好之后我們只需要在 app 入口注冊節(jié)點(diǎn)即可:
const nodeTypes = useMemo(() => ({ textUpdater: TextUpdaterNode }), []);
return <ReactFlow nodeTypes={nodeTypes} />;是不是非常簡單? 大家可以按照React-Flow 中文文檔來學(xué)習(xí)更加復(fù)雜的自定義節(jié)點(diǎn)功能。
自定義邊
自定義邊和自定義節(jié)點(diǎn)的方式類似, 我們先來看一下自定義邊的案例:
圖片
大家在網(wǎng)上看到的花里胡哨的思維導(dǎo)圖, 流程圖的連接線, 我們其實(shí)都可以用自定義邊來實(shí)現(xiàn):
import {
BaseEdge,
EdgeLabelRenderer,
getStraightPath,
useReactFlow,
} from '@xyflow/react';
export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY }) {
const { setEdges } = useReactFlow();
const [edgePath] = getStraightPath({
sourceX,
sourceY,
targetX,
targetY,
});
return (
<>
<BaseEdge id={id} path={edgePath} />
<EdgeLabelRenderer>
<button
onClick={() => setEdges((edges) => edges.filter((e) => e.id !== id))}
>
刪除
</button>
</EdgeLabelRenderer>
</>
);
}設(shè)置畫布縮略圖和畫布控件
一般用過figma或者設(shè)計(jì)類軟件的小伙伴可能比較熟悉畫布控件和縮略圖的概念。
它們可以幫助我們更高效的瀏覽圖表和進(jìn)行更便捷的圖表操作。當(dāng)然 react-flow 也提供了開箱即用的插件來實(shí)現(xiàn)。
圖片
話不多說, 接下來我們就來看看具體的實(shí)現(xiàn):
import { ReactFlow, MiniMap } from '@xyflow/react';
const defaultNodes = [
{
id: '1',
type: 'input',
data: { label: 'Dooring用戶' },
position: { x: 250, y: 25 },
style: { backgroundColor: '#6ede87', color: 'white' },
},
{
id: '2',
// you can also pass a React component as a label
data: { label: <div>Dooring零代碼平臺</div> },
position: { x: 100, y: 125 },
style: { backgroundColor: '#ff0072', color: 'white' },
},
{
id: '3',
type: 'output',
data: { label: '發(fā)布頁面' },
position: { x: 250, y: 250 },
style: { backgroundColor: '#6865A5', color: 'white' },
},
];
const defaultEdges = [
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e2-3', source: '2', target: '3', animated: true },
];
const nodeColor = (node) => {
switch (node.type) {
case 'input':
return '#6ede87';
case 'output':
return '#6865A5';
default:
return '#ff0072';
}
};
function Flow() {
return (
<div style={{ width: '100%', height: '60vh' }}>
<ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
<MiniMap nodeColor={nodeColor} nodeStrokeWidth={3} zoomable pannable />
</ReactFlow>
</div>
);
}
export default Flow;通過上述代碼我們就能實(shí)現(xiàn)一個(gè)非常簡單的自定義縮略圖的功能, 如下圖所示:
圖片
如何實(shí)現(xiàn)嵌套節(jié)點(diǎn)
要想實(shí)現(xiàn)起嵌套節(jié)點(diǎn)的效果, 我們只需要調(diào)整節(jié)點(diǎn)結(jié)構(gòu), 即可輕松實(shí)現(xiàn)如下效果:
圖片
如果要將一個(gè)節(jié)點(diǎn)添加為另一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，則需要使用 parentId（在以前的版本中稱為parentNode）選項(xiàng)（您可以在節(jié)點(diǎn)選項(xiàng)部分找到所有選項(xiàng)的列表）。一旦我們這樣做了，子節(jié)點(diǎn)就會相對于其父節(jié)點(diǎn)定位。 { x: 0, y: 0 } 的位置是父級的左上角。
代碼案例如下:
import { useCallback, useState } from 'react';
import {
ReactFlow,
addEdge,
applyEdgeChanges,
applyNodeChanges,
Background,
} from '@xyflow/react';
const initialNodes = [
{
id: 'A',
type: 'group',
data: { label: null },
position: { x: 0, y: 0 },
style: {
width: 170,
height: 140,
},
},
{
id: 'B',
type: 'input',
data: { label: 'Dooring Node' },
position: { x: 10, y: 10 },
parentId: 'A',
extent: 'parent',
},
{
id: 'C',
data: { label: 'React Flow' },
position: { x: 10, y: 90 },
parentId: 'A',
extent: 'parent',
},
];
const initialEdges = [
{ id: 'b-c', source: 'B', target: 'C' }
];
const rfStyle = {
backgroundColor: '#D0C0F7',
};
function Flow() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
const onNodesChange = useCallback(
(changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
[setNodes],
);
const onEdgesChange = useCallback(
(changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
[setEdges],
);
const onConnect = useCallback(
(connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges],
);
return (
<div style={{width: '100%', height: '30vh'}}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
style={rfStyle}
attributionPosition="top-right"
>
<Background />
</ReactFlow>
</div>
);
}
export default Flow;如何拖拽框選多個(gè)節(jié)點(diǎn)
如果我們更喜歡 Figma/sketch/design 工具控件，可以設(shè)置panOnScroll={true}和selectinotallow={true}：
- 平移：空格+拖動鼠標(biāo)、滾動、鼠標(biāo)中鍵或右鍵
- 縮放：俯仰或 cmd + 滾動
- 創(chuàng)建選區(qū)：拖動鼠標(biāo)
這樣就能實(shí)現(xiàn)類似多選框選的效果了:
圖片
代碼如下:
import { useCallback } from 'react';
import {
ReactFlow,
addEdge,
useEdgesState,
useNodesState,
SelectionMode,
} from '@xyflow/react';
const initialNodes = [
{
id: '1',
data: { label: 'Dooring' },
position: { x: 150, y: 0 },
},
{
id: '2',
data: { label: 'Nest-Admin' },
position: { x: 0, y: 150 },
},
{
id: '3',
data: { label: 'Next-Admin' },
position: { x: 300, y: 150 },
},
];
const initialEdges = [
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
];
function Flow() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback(
(connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges],
);
const panOnDrag = [1, 2];
return (
<div style={{width: '100%', height: '30vh'}}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
panOnScroll
selectionOnDrag
panOnDrag={panOnDrag}
selectionMode={SelectionMode.Partial}
fitView
/>
</div>
);
}
export default Flow;文章最開頭的案例的源碼我已經(jīng)上傳 Github 了, 大家感興趣可以學(xué)習(xí)參考一下。完整案例效果圖:
圖片
