本文来源：支付宝体验科技公众号
ProFlow 官网地址直达：https://pro-flow.antdigital.dev/
在当前数字科技的业务中存在很多图展示、编辑的相关业务，大家设计方案不统一实现也不尽统一，最终导致设计与研发资源的浪费、产品体验参差不齐。为此我们设计和研发了 ProFlow，提供更现代化的 UI 组件设计以及 React 友好的 API 以及完善的基本功能，如无极缩放，自动布局，多线重叠的展示优化等。
ProFlow 能做什么？
图展示场景 - FlowView
如果您需要展示复杂的节点逻辑，建议您使用 FlowView 组件，它内置了完善的展示逻辑，包括节点与线的主副级别选中、自动布局等能力，能够呈现出像下面这样的效果。
图编辑场景 - FlowEditor
如果您更注重交互和编辑，不想自己维护一套数据流，建议您使用 FlowEditor 组件。它内置了完善的增删改、撤销重做的逻辑，可以开箱即用，能够呈现出像下面这样的效果。
快速上手（FlowView）
安装依赖
ProFlow 在 npm 上发布为 @ant-design/pro-flow ，推荐使用 pnpm 安装。
pnpm i @ant-design/pro-flow -S
引入pro-flow
引入 FlowView 组件，即可在页面上获得一块带有小地图能力的的画布。
import { FlowView } from '@ant-design/pro-flow'; import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return { container: { width: '100%', height: '400px', }, }; }); function App() { const { styles } = useStyles(); return ( <div className={styles.container}> <FlowView nodes={[]} edges={[]} /> </div> ); } export default App;
效果如图：
注意：组件必须包裹在具有宽度和高度的元素中。
添加节点和边缘数据
现在我们加入一些 nodes 和 edges 的数据。在这一步，我们无需关注nodes在画布中的坐标，ProFlow内置了dagre布局算法，我们只需描述节点之间的关系，即可获得自动布局后的效果，轻松实现流程图的美观展示。
export const nodes = [ { id: 'a1', data: { title: 'XXX_API_a1', logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', description: 'XXX_XXX_XXX_API', }, }, { id: 'a2', data: { title: 'XXX_API_a2', logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', description: 'XXX_XXX_XXX_API', }, }, { id: 'a3', data: { title: 'XXX_API_a3', logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', description: 'XXX_XXX_XXX_API', }, }, ]; export const edges = [ { id: 'a1-a2', source: 'a1', target: 'a2', }, { id: 'a1-a3', source: 'a1', target: 'a3', type: 'radius', }, ];
并在FlowView中引入它们：
import { FlowView } from '@ant-design/pro-flow'; import { edges, nodes } from './data'; function App() { const { styles } = useStyles(); return ( <div className={styles.container}> <FlowView nodes={nodes} edges={edges} /> </div> ); } export default App;
效果如图：
添加交互性
我们需要一些方法来监听用户与画布的交互，比如选中节点、选中边缘以及取消选中。
onNodeClick- 点击节点回调onEdgeClick- 点击边缘回调onPaneClick- 点击画布回调
ProFlow对node和edge提供可消费的SelectType。可以通过给 node 或 edge 变更不同的 SelectType 来快速实现不同程度的选中。
这里可以使用
FlowView提供的useFlowViewer来更轻松的变更SelectType。
import { FlowPanel, FlowView, FlowViewProvider, SelectType, useFlowViewer, } from '@ant-design/pro-flow'; import { useState } from 'react'; import { edges, nodes } from './data'; function App() { const { selectNode, selectEdges, selectNodes } = useFlowViewer(); const [node, setNode] = useState(null); const { styles } = useStyles(); return ( <div className={styles.container}> <FlowView onNodeClick={(e, node) => { setNode(node); selectNodes(['a1', 'a2', 'a3'], SelectType.SUB_SELECT); selectNode(node.id, SelectType.SELECT); selectEdges(['a1-a2', 'a1-a3'], SelectType.SUB_SELECT); }} onPaneClick={() => { setNode(null); selectNodes(['a1', 'a2', 'a3'], SelectType.DEFAULT); selectEdges(['a1-a2', 'a1-a3'], SelectType.DEFAULT); }} nodes={nodes} edges={edges} > <FlowPanel> <div className="panel-title"> {node ? `当前选中的是：${node.id}` : `当前没有选中节点`} </div> </FlowPanel> </FlowView> </div> ); } function ProApp() { return ( <FlowViewProvider> <App /> </FlowViewProvider> ); } export default ProApp;
效果如下：
进阶使用（FlowEditor）
如果您的需求涉及到了节点、边缘的增删改，需要对画布进行编辑，有着更复杂的画布交互需求，可以直接使用FlowEditor组件。
FlowEditor 提供了一套开箱即用的功能。包括拖拽周围节点、缩放和平移、选择多个节点和边、添加删除节点边缘、快捷键、剪切板、撤销重做等能力。使得对画布的编辑操作变得更加流畅、直观。通过FlowEditor，您可以轻松处理节点和边缘的增删改操作，满足了更复杂的画布交互需求。
实现自定义节点
首先我们需要创建一个自定义节点。在ProFlow中节点是一个 React 组件，这意味着它可以渲染您喜欢的任何内容。
import { Handle, Position } from '@ant-design/pro-flow'; // 自定义节点 const StringRender: FC = (node: any) => { const { handles, id } = node; return ( <div className={'stringNode'}> <Handle id={typeof handles?.source === 'string' ? handles?.source : id} type={'target'} position={Position.Left} /> {node.data.title} <Handle id={typeof handles?.source === 'string' ? handles?.source : id} type={'source'} position={Position.Right} /> </div> ); };
在这段代码中，我们创建了一个名为StringRender的组件，组件内展示一段文字，在左右两边各有一个Handle（连接桩）。
添加节点类型
您可以将新的节点类型添加到props中传递给 FlowView 或 FlowEditor。
在组件外部定义或缓存nodeTypes非常重要。 否则 React 会在每次渲染时创建一个新的对象，这会导致性能问题和错误。
// 注册自定义节点类型 const nodeTypes = { StringNode: StringRender }; function App() { const { styles } = useStyles(); return ( <div className={styles.container}> <FlowEditor nodeTypes={nodeTypes} /> </div> ); }
通过 useFlowEditor 数据驱动
// 注册自定义节点类型 const nodeTypes = { StringNode: StringRender }; const App = () => { const editor = useFlowEditor(); const { styles } = useStyles(); useEffect(() => { editor.addNode({ id: 'a1', type: 'StringNode', position: { x: 0, y: 100 }, data: { title: 'String Node', }, }); }, [editor]); return ( <div className={styles.container}> <FlowEditor nodeTypes={nodeTypes} /> </div> ); }; // 使用useFlowEditor，需包裹一层FlowEditorProvider. const ProApp = () => { return ( <FlowEditorProvider> <App /> </FlowEditorProvider> ); };
FlowEditor内置了节点的拖拽、复制、粘贴、撤销、重做等能力，于是便可以获得如下效果：
案例展示
多 Handle 连接
PipeLine Flow
拖拽插入节点
开源地址 & 联系我们
- ProFlow 官网：https://pro-flow.antdigital.dev
- Github：https://github.com/ant-design/pro-flow
接下去的一段时间，我们会继续根据用户反馈持续优化产品体验，修复和完善产品功能。如果你在使用中碰到了问题，欢迎来给我们提需求和缺陷，欢迎扫码加入群聊。
