devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react-flow基础使用及dagre库的使用_react flow

作者：代码探险家 | 2024-07-22 09:44:56

赞

踩

react flow

前言

最近项目中需要用到拓扑图的展示，最开始选用的是antv的拓扑图组件。antv组件虽然此很方便，但是在布局的时候总是会有莫名其妙的bug，然后自己也想法去解决（看前辈经验、官方issue），最后还是不能解决。于是更换了组件库，也就是我们今天的主角：react-flow。

react-flow简介

React Flow 是一个基于 React 的用于构建可视化流程图和图形编辑器的库。它提供了一个灵活的、可扩展的组件集合，使开发者可以轻松地创建交互式的流程图和图形编辑器应用。

react-flow特点

  1. 可视化流程图: React Flow 提供了一个易于使用的组件集合，用于创建流程图和图形编辑器。您可以使用这些组件来构建节点、边缘和连接线，以及定义它们之间的关系。
  2. 拖放支持: React Flow 支持节点和边缘的拖放操作，使用户可以方便地调整它们的位置和连接关系。您可以自定义节点和边缘的外观和行为，以适应您的应用需求。
  3. 布局算法: React Flow 内置了多种布局算法（部分收费），例如树形布局、网格布局和自由布局，可以帮助您自动排列和布局图形元素。这些算法可以根据图形的结构和属性自动调整节点的位置，使图形看起来更整齐和美观。
  4. 交互性: React Flow 提供了丰富的交互功能，包括缩放、平移、选择、多选、编辑和删除等。您可以根据需要启用或禁用这些交互功能，以创建符合用户需求的可交互图形编辑器。
  5. 事件处理: React Flow 提供了事件处理机制，允许您监听和响应图形元素的各种事件，例如节点的拖动、边缘的创建和删除等。您可以根据这些事件来实现自定义的业务逻辑和交互行为。
  6. 可定制性: React Flow 具有高度可定制性，您可以通过自定义组件、样式和配置选项来调整其外观和行为。这使得您可以根据自己的设计和需求来创建独特的图形编辑器应用。

react-flow例子

安装

tyarn add react-flow-renderer

使用

  1. import React, { useCallback } from "react";
  2. import ReactFlow, { useNodesState, useEdgesState, updateEdge } from "reactflow";
  3.  
  4. import { TrialCmdWrapper } from "@/pages/trial/style";
  5. import { FlowContent } from "./style";
  6.  
  7. import "reactflow/dist/style.css";
  8. import { useMemo } from "react";
  9. import CuFlowNode from "@/components/Home/resTopo/topo/node";
  10.  
  11. const initialNodes = [
  12. 	{
  13. 		id: "root",
  14. 		type: "input",
  15. 		data: { label: "全局节点" },
  16. 		position: { x: 0, y: 0 }
  17. 	},
  18. 	{
  19. 		id: "horizontal-2",
  20. 		sourcePosition: "right",
  21. 		targetPosition: "left",
  22. 		data: { label: "A Node" },
  23. 		position: { x: 250, y: 0 }
  24. 	},
  25. 	{
  26. 		id: "horizontal-3",
  27. 		sourcePosition: "right",
  28. 		targetPosition: "left",
  29. 		data: { label: "Node 3" },
  30. 		position: { x: 250, y: 160 }
  31. 	},
  32. 	{
  33. 		id: "horizontal-4",
  34. 		sourcePosition: "right",
  35. 		targetPosition: "left",
  36. 		data: { label: "Node 4" },
  37. 		position: { x: 500, y: 0 }
  38. 	},
  39. 	{
  40. 		id: "horizontal-5",
  41. 		sourcePosition: "top",
  42. 		targetPosition: "bottom",
  43. 		data: { label: "Node 5" },
  44. 		position: { x: 500, y: 100 }
  45. 	},
  46. 	{
  47. 		id: "horizontal-6",
  48. 		sourcePosition: "bottom",
  49. 		targetPosition: "top",
  50. 		data: { label: "Node 6" },
  51. 		position: { x: 500, y: 230 }
  52. 	},
  53. 	{
  54. 		id: "horizontal-7",
  55. 		sourcePosition: "right",
  56. 		targetPosition: "left",
  57. 		data: { label: "Node 7" },
  58. 		position: { x: 750, y: 50 }
  59. 	},
  60. 	{
  61. 		id: "horizontal-8",
  62. 		sourcePosition: "right",
  63. 		targetPosition: "left",
  64. 		data: { label: "Node 8" },
  65. 		position: { x: 750, y: 300 }
  66. 	}
  67. ];
  68.  
  69. const initialEdges = [
  70. 	{
  71. 		id: "horizontal-e1-2",
  72. 		source: "root",
  73. 		type: "smoothstep",
  74. 		target: "horizontal-2",
  75. 		animated: true
  76. 	},
  77. 	{
  78. 		id: "horizontal-e1-3",
  79. 		source: "root",
  80. 		type: "smoothstep",
  81. 		target: "horizontal-3",
  82. 		animated: true
  83. 	},
  84. 	{
  85. 		id: "horizontal-e1-4",
  86. 		source: "horizontal-2",
  87. 		type: "smoothstep",
  88. 		target: "horizontal-4",
  89. 		label: "edge label"
  90. 	},
  91. 	{
  92. 		id: "horizontal-e3-5",
  93. 		source: "horizontal-3",
  94. 		type: "smoothstep",
  95. 		target: "horizontal-5",
  96. 		animated: true
  97. 	},
  98. 	{
  99. 		id: "horizontal-e3-6",
  100. 		source: "horizontal-3",
  101. 		type: "smoothstep",
  102. 		target: "horizontal-6",
  103. 		animated: true
  104. 	},
  105. 	{
  106. 		id: "horizontal-e5-7",
  107. 		source: "horizontal-5",
  108. 		type: "smoothstep",
  109. 		target: "horizontal-7",
  110. 		animated: true
  111. 	},
  112. 	{
  113. 		id: "horizontal-e6-8",
  114. 		source: "horizontal-6",
  115. 		type: "smoothstep",
  116. 		target: "horizontal-8",
  117. 		animated: true
  118. 	}
  119. ];
  120.  
  121. export default function TrialFlowContent({ width, height }) {
  122. 	// 图操作
  123. 	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  124. 	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  125. 	const onEdgeUpdate = useCallback((oldEdge, newConnection) => setEdges(els => updateEdge(oldEdge, newConnection, els)), []);
  126. 	// const onConnect = useCallback(params => setEdges(els => addEdge(params, els)), []);
  127. 	const nodeTypes = useMemo(() => ({ textUpdater: CuFlowNode }), []);
  128. 	const onConnect = () => {
  129. 		// 禁止手动连线
  130. 		return;
  131. 	};
  132.  
  133. 	return (
  134. 		<TrialCmdWrapper
  135. 			height={height}
  136. 			width={width}
  137. 			style={{
  138. 				padding: 0,
  139. 				float: "left",
  140. 				marginLeft: "15px"
  141. 			}}>
  142. 			<FlowContent>
  143. 				<ReactFlow
  144. 					nodeTypes={nodeTypes}
  145. 					nodes={nodes}
  146. 					edges={edges}
  147. 					onNodesChange={onNodesChange}
  148. 					onEdgesChange={onEdgesChange}
  149. 					onConnect={onConnect}
  150. 					onEdgeUpdate={onEdgeUpdate}></ReactFlow>
  151. 			</FlowContent>
  152. 		</TrialCmdWrapper>
  153. 	);
  154. }

 效果

dagre布局库使用

安装

tyarn add dagre

使用

组件外新增代码
  1. // dagre 数据
  2. const dagreGraph = new dagre.graphlib.Graph();
  3. dagreGraph.setDefaultEdgeLabel(() => ({}));
  4.  
  5. const nodeWidth = 172;
  6. const nodeHeight = 36;
  7.  
  8. const getLayoutedElements = (nodes, edges, direction = "TB") => {
  9. 	const isHorizontal = direction === "LR";
  10. 	dagreGraph.setGraph({ rankdir: direction });
  11.  
  12. 	nodes.forEach(node => {
  13. 		dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
  14. 	});
  15.  
  16. 	edges.forEach(edge => {
  17. 		dagreGraph.setEdge(edge.source, edge.target);
  18. 	});
  19.  
  20. 	dagre.layout(dagreGraph);
  21.  
  22. 	nodes.forEach(node => {
  23. 		const nodeWithPosition = dagreGraph.node(node.id);
  24. 		node.targetPosition = isHorizontal ? "left" : "top";
  25. 		node.sourcePosition = isHorizontal ? "right" : "bottom";
  26.  
  27. 		// We are shifting the dagre node position (anchor=center center) to the top left
  28. 		// so it matches the React Flow node anchor point (top left).
  29. 		node.position = {
  30. 			x: nodeWithPosition.x - nodeWidth / 2,
  31. 			y: nodeWithPosition.y - nodeHeight / 2
  32. 		};
  33.  
  34. 		return node;
  35. 	});
  36.  
  37. 	return { nodes, edges };
  38. };
 组件内部新增方法

  1. const setTreeTopoData = (nodes, edges, direction = "TB") => {
  2. 		const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges, direction);
  3. 		setNodes([...layoutedNodes]);
  4. 		setEdges([...layoutedEdges]);
  5. 	};

使用方法
  1. useEffect(() => {
  2. 		setTreeTopoData(nodes, edges);
  3. 	}, []);
 最终代码

  1. import React, { useCallback } from "react";
  2. import ReactFlow, { useNodesState, useEdgesState, updateEdge } from "reactflow";
  3.  
  4. import { TrialCmdWrapper } from "@/pages/trial/style";
  5. import { FlowContent } from "./style";
  6.  
  7. import "reactflow/dist/style.css";
  8. import { useRef } from "react";
  9. import { useEffect } from "react";
  10. import { useMemo } from "react";
  11. import CuFlowNode from "@/components/Home/resTopo/topo/node";
  12. import dagre from "dagre";
  13.  
  14. const initialNodes = [
  15. 	{
  16. 		id: "root",
  17. 		type: "input",
  18. 		data: { label: "全局节点" },
  19. 		position: { x: 0, y: 0 }
  20. 	},
  21. 	{
  22. 		id: "horizontal-2",
  23. 		sourcePosition: "right",
  24. 		targetPosition: "left",
  25. 		data: { label: "A Node" },
  26. 		position: { x: 250, y: 0 }
  27. 	},
  28. 	{
  29. 		id: "horizontal-3",
  30. 		sourcePosition: "right",
  31. 		targetPosition: "left",
  32. 		data: { label: "Node 3" },
  33. 		position: { x: 250, y: 160 }
  34. 	},
  35. 	{
  36. 		id: "horizontal-4",
  37. 		sourcePosition: "right",
  38. 		targetPosition: "left",
  39. 		data: { label: "Node 4" },
  40. 		position: { x: 500, y: 0 }
  41. 	},
  42. 	{
  43. 		id: "horizontal-5",
  44. 		sourcePosition: "top",
  45. 		targetPosition: "bottom",
  46. 		data: { label: "Node 5" },
  47. 		position: { x: 500, y: 100 }
  48. 	},
  49. 	{
  50. 		id: "horizontal-6",
  51. 		sourcePosition: "bottom",
  52. 		targetPosition: "top",
  53. 		data: { label: "Node 6" },
  54. 		position: { x: 500, y: 230 }
  55. 	},
  56. 	{
  57. 		id: "horizontal-7",
  58. 		sourcePosition: "right",
  59. 		targetPosition: "left",
  60. 		data: { label: "Node 7" },
  61. 		position: { x: 750, y: 50 }
  62. 	},
  63. 	{
  64. 		id: "horizontal-8",
  65. 		sourcePosition: "right",
  66. 		targetPosition: "left",
  67. 		data: { label: "Node 8" },
  68. 		position: { x: 750, y: 300 }
  69. 	}
  70. ];
  71.  
  72. const initialEdges = [
  73. 	{
  74. 		id: "horizontal-e1-2",
  75. 		source: "root",
  76. 		type: "smoothstep",
  77. 		target: "horizontal-2",
  78. 		animated: true
  79. 	},
  80. 	{
  81. 		id: "horizontal-e1-3",
  82. 		source: "root",
  83. 		type: "smoothstep",
  84. 		target: "horizontal-3",
  85. 		animated: true
  86. 	},
  87. 	{
  88. 		id: "horizontal-e1-4",
  89. 		source: "horizontal-2",
  90. 		type: "smoothstep",
  91. 		target: "horizontal-4",
  92. 		label: "edge label"
  93. 	},
  94. 	{
  95. 		id: "horizontal-e3-5",
  96. 		source: "horizontal-3",
  97. 		type: "smoothstep",
  98. 		target: "horizontal-5",
  99. 		animated: true
  100. 	},
  101. 	{
  102. 		id: "horizontal-e3-6",
  103. 		source: "horizontal-3",
  104. 		type: "smoothstep",
  105. 		target: "horizontal-6",
  106. 		animated: true
  107. 	},
  108. 	{
  109. 		id: "horizontal-e5-7",
  110. 		source: "horizontal-5",
  111. 		type: "smoothstep",
  112. 		target: "horizontal-7",
  113. 		animated: true
  114. 	},
  115. 	{
  116. 		id: "horizontal-e6-8",
  117. 		source: "horizontal-6",
  118. 		type: "smoothstep",
  119. 		target: "horizontal-8",
  120. 		animated: true
  121. 	}
  122. ];
  123.  
  124. // dagre 数据
  125. const dagreGraph = new dagre.graphlib.Graph();
  126. dagreGraph.setDefaultEdgeLabel(() => ({}));
  127.  
  128. const nodeWidth = 172;
  129. const nodeHeight = 36;
  130.  
  131. const getLayoutedElements = (nodes, edges, direction = "TB") => {
  132. 	const isHorizontal = direction === "LR";
  133. 	dagreGraph.setGraph({ rankdir: direction });
  134.  
  135. 	nodes.forEach(node => {
  136. 		dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
  137. 	});
  138.  
  139. 	edges.forEach(edge => {
  140. 		dagreGraph.setEdge(edge.source, edge.target);
  141. 	});
  142.  
  143. 	dagre.layout(dagreGraph);
  144.  
  145. 	nodes.forEach(node => {
  146. 		const nodeWithPosition = dagreGraph.node(node.id);
  147. 		node.targetPosition = isHorizontal ? "left" : "top";
  148. 		node.sourcePosition = isHorizontal ? "right" : "bottom";
  149.  
  150. 		// We are shifting the dagre node position (anchor=center center) to the top left
  151. 		// so it matches the React Flow node anchor point (top left).
  152. 		node.position = {
  153. 			x: nodeWithPosition.x - nodeWidth / 2,
  154. 			y: nodeWithPosition.y - nodeHeight / 2
  155. 		};
  156.  
  157. 		return node;
  158. 	});
  159.  
  160. 	return { nodes, edges };
  161. };
  162.  
  163. export default function TrialFlowContent({ width, height }) {
  164. 	// 拖拽相关
  165. 	const dropDomRef = useRef(null);
  166.  
  167. 	const setTreeTopoData = (nodes, edges, direction = "TB") => {
  168. 		const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges, direction);
  169. 		setNodes([...layoutedNodes]);
  170. 		setEdges([...layoutedEdges]);
  171. 	};
  172.  
  173. 	// 图操作
  174. 	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  175. 	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  176. 	const onEdgeUpdate = useCallback((oldEdge, newConnection) => setEdges(els => updateEdge(oldEdge, newConnection, els)), []);
  177. 	// const onConnect = useCallback(params => setEdges(els => addEdge(params, els)), []);
  178. 	const nodeTypes = useMemo(() => ({ textUpdater: CuFlowNode }), []);
  179. 	const onConnect = () => {
  180. 		// 禁止手动连线
  181. 		return;
  182. 	};
  183.  
  184. 	useEffect(() => {
  185. 		setTreeTopoData(nodes, edges);
  186. 	}, []);
  187.  
  188. 	return (
  189. 		<TrialCmdWrapper
  190. 			height={height}
  191. 			width={width}
  192. 			style={{
  193. 				padding: 0,
  194. 				float: "left",
  195. 				marginLeft: "15px"
  196. 			}}>
  197. 			<FlowContent ref={dropDomRef}>
  198. 				<ReactFlow
  199. 					nodeTypes={nodeTypes}
  200. 					nodes={nodes}
  201. 					edges={edges}
  202. 					onNodesChange={onNodesChange}
  203. 					onEdgesChange={onEdgesChange}
  204. 					onConnect={onConnect}
  205. 					onEdgeUpdate={onEdgeUpdate}></ReactFlow>
  206. 			</FlowContent>
  207. 		</TrialCmdWrapper>
  208. 	);
  209. }
展示效果

通过dagre,实现了自动树形布局的功能

原文地址

react-flow基础使用及dagre库的使用-小何博客前言最近项目中需要用到拓扑图的展示，最开始选用的是antv的拓扑图组件。antv组件虽然此很方便，但是在布局的时候总是会有莫名其妙的bug，然后自己也想法去解决（看前辈经验、官方issue），最后还是不能解决。于…https://ligo100.cn/qianduanjishu/531.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/864498
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号