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

React Flow_reactflow

作者：寸_铁 | 2024-07-22 09:59:48

赞

踩

reactflow
  1. // 创建项目
  2. npm create vite@latest my-react-flow-app -- --template react
  3. // 安装插件
  4. npm install reactflow
  5. npm install antd
  6. // 运行项目
  7. npm run dev

https://reactflow.dev/

1、App.jsx

  1. import { useCallback, useState } from 'react';
  2. import ReactFlow,
  3. {
  4.   addEdge,
  5.   ReactFlowProvider,
  6.   MiniMap,
  7.   Controls,
  8.   useNodesState,
  9.   useEdgesState,
  10.   useReactFlow,
  11.   MarkerType,
  12.   Panel,
  13.   ConnectionMode
  14. } from 'reactflow';
  15. import 'reactflow/dist/style.css';
  16. import './index.css';
  17.  
  18. import UpdateNode from './components/nodeContent';
  19. import UpdateEdge from './components/edgeContent';
  20. import ResizableNodeSelected from './components/ResizableNodeSelected';
  21. import {nodes as initialNodes1,edges as initialEdges1} from './components/data';
  22.  
  23. const nodeTypes = {
  24.   ResizableNodeSelected,
  25. };
  26.  
  27. const rfStyle = {
  28.   backgroundColor: '#B8CEFF',
  29. };
  30.  
  31. const initialNodes = [
  32.   {
  33.     id: '1',
  34.     type: 'ResizableNodeSelected',
  35.     position: { x: 100, y: 100 },
  36.     data: { label: '1' },
  37.     style: {
  38.       background: "#F3A011",
  39.       color: "white",
  40.       border: '1px solid orange',
  41.       borderRadius: '100%',
  42.       width: 80,
  43.       height: 80,
  44.     },
  45.   },
  46.   {
  47.     id: '2',
  48.     type: 'ResizableNodeSelected',
  49.     position: { x: 200, y: 300 },
  50.     data: { label: '2' },
  51.     style: {
  52.       background: "#F3A011",
  53.       color: "white",
  54.       border: '1px solid orange',
  55.       borderRadius: '100%',
  56.       width: 80,
  57.       height: 80,
  58.     },
  59.   },
  60.   {
  61.     id: '3',
  62.     type: 'ResizableNodeSelected',
  63.     position: { x: 100, y: 500 },
  64.     data: { label: '3' },
  65.     style: {
  66.       background: "#F3A011",
  67.       color: "white",
  68.       border: '1px solid orange',
  69.       borderRadius: '100%',
  70.       width: 80,
  71.       height: 80,
  72.     },
  73.   },
  74. ];
  75. const initialEdges = [
  76.   {
  77.     id: 'e1-2',
  78.     source: '1',
  79.     target: '2',
  80.     style: { stroke: "#116F97" },
  81.     label: "连接1-2",
  82.     sourceHandle: 'c',
  83.     targetHandle: 'a',
  84.   },
  85.   {
  86.     id: "e2-3",
  87.     source: "2",
  88.     target: "3",
  89.     // labelStyle: { fill: "#116F97", fontWeight: 100 }, // 连接线名称样式
  90.     style: { stroke: "#116F97" }, // 连接线颜色
  91.     label: "连接2-3",
  92.     sourceHandle: 'c',
  93.     targetHandle: 'a',
  94.   },
  95. ];
  96.  
  97. const flowKey = 'flow_test';
  98. const localNodes = JSON.parse(localStorage.getItem(flowKey)).nodes;
  99. const localEdges = JSON.parse(localStorage.getItem(flowKey)).edges;
  100. let nodeId = 1;
  101.  
  102. function App1() {
  103.   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes1);
  104.   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges1);
  105.   const [nodeInfo, setNodeInfo] = useState({});
  106.   const [edgeInfo, setEdgeInfo] = useState({});
  107.   const [nodeShow, setNodeShow] = useState(true);
  108.   const onConnect = useCallback(
  109.     (connection) => setEdges((eds) => addEdge(connection, eds)),
  110.     [setEdges]
  111.   );
  112.  
  113.   // 保存
  114.   const [rfInstance, setRfInstance] = useState({});
  115.   const onSave = useCallback(() => {
  116.     if (rfInstance) {
  117.       const flow = rfInstance.toObject();
  118.       localStorage.setItem(flowKey, JSON.stringify(flow));
  119.       console.log(JSON.stringify(flow));
  120.     }
  121.   }, [rfInstance]
  122.   );
  123.  
  124.   // 恢复
  125.   const { setViewport } = useReactFlow();
  126.   const onRestore = useCallback(() => {
  127.     const restoreFlow = async () => {
  128.       const flow = JSON.parse(localStorage.getItem(flowKey));
  129.       if (flow) {
  130.         const { x = 0, y = 0, zoom = 0 } = flow.viewport;
  131.         setNodes(flow.nodes || []);
  132.         setEdges(flow.edges || []);
  133.         setViewport({ x, y, zoom });
  134.       }
  135.     };
  136.     restoreFlow();
  137.   }, [setNodes, setViewport]
  138.   );
  139.  
  140.   // 清空
  141.   const onDelete = useCallback(() => {
  142.     const restoreFlow = async () => {
  143.       setNodes([] || []);
  144.       setEdges([] || []);
  145.     };
  146.     restoreFlow();
  147.   }, [setNodes]
  148.   );
  149.  
  150.   // 点击节点
  151.   const onNodeClick = (e, node) => {
  152.     setNodeInfo({
  153.       ...node.data,
  154.       id: node.id,
  155.       nodeBg: node.style && node.style.background ? node.style.background : '#ffffff',
  156.     });
  157.     setNodeShow(true);
  158.   };
  159.  
  160.   // 点击节点连接线
  161.   const onEdgeClick = (e, edge) => {
  162.     setEdgeInfo(edges.find((item) => edge.id === item.id));
  163.     setNodeShow(false);
  164.   };
  165.  
  166.  
  167.   // 新增节点
  168.   const reactFlowInstance = useReactFlow();
  169.   const onAdd = useCallback(() => {
  170.     const id = `${++nodeId}`;
  171.     const newNode = {
  172.       id,
  173.       type: 'ResizableNodeSelected',
  174.       position: {
  175.         x: 100,
  176.         y: 300,
  177.         // x: Math.random() * 200,
  178.         // y: Math.random() * 200,
  179.       },
  180.       data: {
  181.         label: `Node ${id}`,
  182.       },
  183.       style: {
  184.         background: "#F3A011",
  185.         color: "white",
  186.         border: '1px solid orange',
  187.         borderRadius: '100%',
  188.         width: 80,
  189.         height: 80,
  190.  
  191.       },
  192.     };
  193.     reactFlowInstance.addNodes(newNode);
  194.   }, []);
  195.  
  196.   // 改变节点内容
  197.   const changeNode = (val) => {
  198.     setNodes((nds) =>
  199.       nds.map((item) => {
  200.         if (item.id === val.id) {
  201.           item.data = val;
  202.           item.hidden = val.isHidden;
  203.           item.style = { background: val.nodeBg, width: 80, height: 80, borderRadius: '100%', color: "white", fontSize: 2 };
  204.         }
  205.         return item;
  206.       }),
  207.     );
  208.   };
  209.  
  210.   // 改变连接线内容
  211.   const changeEdge = (val) => {
  212.     setEdges((nds) =>
  213.       nds.map((item) => {
  214.         if (item.id === val.id) {
  215.           item.label = val.label;
  216.           item.type = val.type;
  217.           item.hidden = val.isHidden;
  218.           item.style = { stroke: val.color };
  219.         }
  220.         return item;
  221.       }),
  222.     );
  223.   };
  224.  
  225.   // 默认edge样式
  226.   const defaultEdgeOptions = {
  227.     style: {
  228.       strokeWidth: 1,
  229.       stroke: '#116F97'
  230.     },
  231.     type: 'default',
  232.     markerEnd: {
  233.       type: MarkerType.ArrowClosed,
  234.       color: '#116F97'
  235.     } // 连接线尾部的箭头
  236.   }
  237.  
  238.   return (
  239.     <div style={{ width: '100vw', height: '100vh' }}>
  240.  
  241.       <ReactFlow
  242.         nodes={nodes} // 节点
  243.         edges={edges} // 连接线
  244.         onNodesChange={onNodesChange} // 节点拖拽等改变
  245.         onEdgesChange={onEdgesChange} // 连接线拖拽等改变
  246.         onNodeClick={onNodeClick} // 点击节点
  247.         onEdgeClick={onEdgeClick} // 点击连接线
  248.         onConnect={onConnect} // 节点直接连接
  249.         nodeTypes={nodeTypes} // 节点类型
  250.         // edgeTypes={edgeTypes}
  251.         fitView // 渲染节点数据
  252.         style={rfStyle} // 背景色
  253.         defaultEdgeOptions={defaultEdgeOptions} // 默认连接线样式
  254.         onInit={setRfInstance} // 初始化保存的数据
  255.         connectionMode={ConnectionMode.Loose}
  256.       />
  257.       {nodeShow ? (
  258.         <UpdateNode info={nodeInfo} onChange={changeNode} />
  259.       ) : (
  260.           <UpdateEdge info={edgeInfo} onChange={changeEdge} />
  261.         )}
  262.       <Panel position='top-left'>
  263.         <button onClick={onAdd}>add node</button>
  264.         <button onClick={onSave}>save</button>
  265.         <button onClick={onRestore}>restore</button>
  266.         <button onClick={onDelete}>delete</button>
  267.       </Panel>
  268.       <MiniMap />
  269.       <Controls />
  270.     </div>
  271.   );
  272. }
  273.  
  274. export default function () {
  275.   return (
  276.     <ReactFlowProvider>
  277.       <App1 />
  278.  
  279.     </ReactFlowProvider>
  280.   );
  281. }

 2、index.css

  1. :root {
  2.   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  3.   /* line-height: 2; */
  4.   font-weight: 400;
  5.  
  6.   /* color-scheme: light dark; */
  7.   color: rgba(255, 255, 255, 0.87);
  8.   background-color: #242424;
  9.  
  10.   font-synthesis: none;
  11.   text-rendering: optimizeLegibility;
  12.   -webkit-font-smoothing: antialiased;
  13.   -moz-osx-font-smoothing: grayscale;
  14.   /* -webkit-text-size-adjust: 100%; */
  15. }
  16.  
  17. a {
  18.   font-weight: 500;
  19.   color: #646cff;
  20.   text-decoration: inherit;
  21. }
  22. a:hover {
  23.   color: #535bf2;
  24. }
  25.  
  26. body {
  27.   margin: 0;
  28.   display: flex;
  29.   place-items: center;
  30.   min-width: 320px;
  31.   min-height: 100vh;
  32. }
  33.  
  34. h1 {
  35.   font-size: 3.2em;
  36.   line-height: 1.1;
  37. }
  38.  
  39. button {
  40.   border-radius: 8px;
  41.   border: 1px solid transparent;
  42.   padding: 0.6em 1.2em;
  43.   font-size: 1em;
  44.   font-weight: 500;
  45.   font-family: inherit;
  46.   background-color: #1a1a1a;
  47.   cursor: pointer;
  48.   transition: border-color 0.25s;
  49. }
  50. button:hover {
  51.   border-color: #646cff;
  52. }
  53. button:focus,
  54. button:focus-visible {
  55.   outline: 4px auto -webkit-focus-ring-color;
  56. }
  57.  
  58. @media (prefers-color-scheme: light) {
  59.   :root {
  60.     color: #213547;
  61.     background-color: #ffffff;
  62.   }
  63.   a:hover {
  64.     color: #116F97;
  65.   }
  66.   button {
  67.     background-color: #f9f9f9;
  68.   }
  69. }
  70.  
  71. /* edge颜色 */
  72. .react-flow__handle{
  73.   color: #116F97;
  74.   background-color: #116F97;
  75.   border:0;
  76.   border-radius: 100%;
  77.   min-width: 1px;
  78.   min-height: 1px;
  79. }
  80. .react-flow__edge-textbg{
  81.   fill:#3a94BB;
  82. }
  83. .react-flow__handle.connectionindicator{
  84.   width: 1;
  85.   height: 1;
  86. }
  87. .react-flow__node{
  88.   width: 50;
  89.   height: 50;
  90. }
  91.  
  92.  
  93. /* 4个连接点样式 */
  94. .simple-floatingedges {
  95.   flex-direction: column;
  96.   display: flex;
  97.   flex-grow: 1;
  98.   height: 100%;
  99. }
  100. .simple-floatingedges .react-flow__handle {
  101.   width: 8px;
  102.   height: 8px;
  103.   background-color: #bbb;
  104. }
  105. .simple-floatingedges .react-flow__handle-top {
  106.   top: -5px;
  107. }
  108. .simple-floatingedges .react-flow__handle-bottom {
  109.   bottom: -5px;
  110. }
  111. .simple-floatingedges .react-flow__handle-left {
  112.   left: -5px;
  113. }
  114. .simple-floatingedges .react-flow__handle-right {
  115.   right: -5px;
  116. }
  117. .simple-floatingedges .react-flow__node-custom {
  118.   background: #fff;
  119.   border: 1px solid #1a192b;
  120.   border-radius: 3px;
  121.   color: #222;
  122.   font-size: 12px;
  123.   padding: 10px;
  124.   text-align: center;
  125.   width: 150px;
  126. }
  127.  
  128. /* node与wdge编辑样式 */
  129. .dndflow {
  130.   display: flex;
  131.   flex-direction: column;
  132.   flex-grow: 1;
  133.   height: 70vh;
  134. }
  135. .react-flow__attribution {
  136.   display: none;
  137. }
  138. .dndflow aside {
  139.   padding: 15px 10px;
  140.   font-size: 12px;
  141.   background: #fcfcfc;
  142.   border-right: 1px solid #eee;
  143. }
  144. .dndflow aside .description {
  145.   margin-bottom: 10px;
  146. }
  147. .dndflow .dndnode {
  148.   display: flex;
  149.   align-items: center;
  150.   justify-content: center;
  151.   height: 20px;
  152.   margin-bottom: 10px;
  153.   padding: 4px;
  154.   border: 1px solid #1a192b;
  155.   border-radius: 2px;
  156.   cursor: grab;
  157. }
  158. .dndflow .dndnode.input {
  159.   border-color: #0041d0;
  160. }
  161. .dndflow .dndnode.output {
  162.   border-color: #ff0072;
  163. }
  164. .dndflow .reactflow-wrapper {
  165.   flex-grow: 1;
  166.   height: 100%;
  167. }
  168. .dndflow .selectall {
  169.   margin-top: 10px;
  170. }
  171. @media screen and (min-width: 768px) {
  172.   .dndflow {
  173.     flex-direction: row;
  174.   }
  175.  
  176.   .dndflow aside {
  177.     width: 20%;
  178.     max-width: 250px;
  179.   }
  180. }
  181. .my_handle {
  182.   z-index: 99;
  183. }
  184. .nodeContent {
  185.   position: relative;
  186.   color: #222;
  187.   font-size: 12px;
  188.   line-height: 10px;
  189.   text-align: center;
  190.   background-color: #fff;
  191.   border: 1px solid #1a192b;
  192.   border-radius: 3px;
  193. }
  194. .nodeStyle {
  195.   width: 110px;
  196.   height: 30px;
  197.   line-height: 10px;
  198. }
  199. .updatenode__controls {
  200.   position: absolute;
  201.   top: 10px;
  202.   right: 10px;
  203.   z-index: 4;
  204.   padding: 16px;
  205.   font-size: 12px;
  206.   background-color: #fff;
  207. }
  208. .updatenode__controls label {
  209.   display: block;
  210. }
  211. .updatenode__bglabel {
  212.   margin-top: 10px;
  213. }
  214. .updatenode__checkboxwrapper {
  215.   display: flex;
  216.   align-items: center;
  217.   margin-top: 10px;
  218. }
  219.  
  220.

3、nodeContent.tsx

  1. import React, { useState, useEffect } from 'react';
  2. import { Input, Switch } from 'antd';
  3.  
  4. export type nodeProps = {
  5.   info: any;
  6.   onChange: (val: any) => void;
  7. };
  8.  
  9. export default ({ info, onChange }: nodeProps) => {
  10.   const [nodeInfo, setNodeInfo] = useState<any>({});
  11.  
  12.   useEffect(() => {
  13.     if (info.id) {
  14.       if (!info.isHidden) {
  15.         info.isHidden = false;
  16.       }
  17.       setNodeInfo(info);
  18.     }
  19.   }, [info.id]);
  20.  
  21.   // 改变名称
  22.   const setNodeName = (value: string) => {
  23.     setNodeInfo({
  24.       ...nodeInfo,
  25.       label: value,
  26.     });
  27.     onChange({
  28.       ...nodeInfo,
  29.       label: value,
  30.     });
  31.   };
  32.  
  33.   // 改变背景色
  34.   const setNodeBg = (value: string) => {
  35.     setNodeInfo({
  36.       ...nodeInfo,
  37.       nodeBg: value,
  38.     });
  39.     onChange({
  40.       ...nodeInfo,
  41.       nodeBg: value,
  42.     });
  43.   };
  44.  
  45.   // 是否隐藏
  46.   const setNodeHidden = (value: boolean) => {
  47.     setNodeInfo({
  48.       ...nodeInfo,
  49.       isHidden: value,
  50.     });
  51.     onChange({
  52.       ...nodeInfo,
  53.       isHidden: value,
  54.     });
  55.   };
  56.  
  57.   return nodeInfo.id ? (
  58.     <div className="updatenode__controls">
  59.       <label>名称：</label>
  60.       <Input
  61.         placeholder=""
  62.         value={nodeInfo.label}
  63.         onChange={(evt) => setNodeName(evt.target.value)}
  64.       />
  65.       <label className="updatenode__bglabel">背景色：</label>
  66.       <Input type="color" value={nodeInfo.nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
  67.       <div className="updatenode__checkboxwrapper">
  68.         <label>是否隐藏：</label>
  69.         {/* <Switch checked={nodeInfo.isHidden} onChange={setNodeHidden} /> */}
  70.         <input type='checkbox' checked={nodeInfo.isHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
  71.       </div>
  72.     </div>
  73.   ) : (
  74.       <></>
  75.     );
  76. };

4、edgeContent.tsx

  1. import React, { useState, useEffect } from 'react';
  2. import { Input, Select, Switch } from 'antd';
  3.  
  4. const { Option } = Select;
  5.  
  6. export type edgeProps = {
  7.   info: any;
  8.   onChange: (val: any) => void;
  9. };
  10.  
  11. export default ({ info, onChange }: edgeProps) => {
  12.   const [edgeInfo, setEdgeInfo] = useState<any>({});
  13.   const edgeTypes = [
  14.     { label: '曲线', value: 'default' },
  15.     { label: '直线', value: 'straight' },
  16.     { label: '直角线', value: 'step' },
  17.     { label: '圆滑直角线', value: 'smoothstep' },
  18.   ];
  19.  
  20.   useEffect(() => {
  21.     if (info.id) {
  22.       if (info.style) {
  23.         info.color = info.style.stroke;
  24.       }
  25.       if (!info.isHidden) {
  26.         info.isHidden = false;
  27.       }
  28.       setEdgeInfo(info);
  29.     }
  30.   }, [info.id]);
  31.  
  32.   // 改变名称
  33.   const setNodeName = (value: string) => {
  34.     setEdgeInfo({
  35.       ...edgeInfo,
  36.       label: value,
  37.     });
  38.     onChange({
  39.       ...edgeInfo,
  40.       label: value,
  41.     });
  42.   };
  43.  
  44.   // 改变颜色
  45.   const setNodeBg = (value: string) => {
  46.     setEdgeInfo({
  47.       ...edgeInfo,
  48.       color: value,
  49.     });
  50.     onChange({
  51.       ...edgeInfo,
  52.       color: value,
  53.     });
  54.   };
  55.  
  56.   // 改变类型
  57.   const changeEdgeType = (value: string) => {
  58.     setEdgeInfo({
  59.       ...edgeInfo,
  60.       type: value,
  61.     });
  62.     onChange({
  63.       ...edgeInfo,
  64.       type: value,
  65.     });
  66.   };
  67.  
  68.   // 是否隐藏
  69.   const setEdgeHidden = (value: boolean) => {
  70.     setEdgeInfo({
  71.       ...edgeInfo,
  72.       isHidden: value,
  73.     });
  74.     onChange({
  75.       ...edgeInfo,
  76.       isHidden: value,
  77.     });
  78.   };
  79.  
  80.   return edgeInfo.id ? (
  81.     <div className="updatenode__controls">
  82.       <label>连接线名称：</label>
  83.       <Input
  84.         placeholder=""
  85.         value={edgeInfo.label}
  86.         onChange={(evt) => setNodeName(evt.target.value)}
  87.       />
  88.       <label className="updatenode__bglabel">连接线颜色：</label>
  89.       <Input type="color" value={edgeInfo.color} onChange={(evt) => setNodeBg(evt.target.value)} />
  90.       <div className="updatenode__checkboxwrapper">
  91.         <label>连接线类型：</label>
  92.         <Select defaultValue="曲线 " value={edgeInfo.type} onChange={changeEdgeType}>
  93.           {edgeTypes.map((item) => (
  94.             <Option value={item.value} key={item.value}>
  95.               {item.label}
  96.             </Option>
  97.           ))}
  98.         </Select>
  99.       </div>
  100.       <div className="updatenode__checkboxwrapper">
  101.         <label>是否隐藏：</label>
  102.         <Switch checked={edgeInfo.isHidden} onChange={setEdgeHidden} />
  103.       </div>
  104.     </div>
  105.   ) : (
  106.       <></>
  107.     );
  108. };

5、ResizableNodeSelected.tsx

  1. import { memo } from 'react';
  2. import { Handle, Position, NodeResizer } from 'reactflow';
  3.  
  4. const ResizableNodeSelected = ({ data, selected }) => {
  5.   return (
  6.     <>
  7.       <NodeResizer color="#F3A011" isVisible={selected} minWidth={80} minHeight={80} />
  8.       <div
  9.         style={{
  10.           // width: 60,
  11.           // height: 60,
  12.           padding: 10,
  13.           // display: "flex",
  14.           // justifyContent: "center",
  15.           // alignItems: "center",
  16.           // fontSize: 2
  17.         }}
  18.       >
  19.         {data.label}
  20.       </div>
  21.       <Handle style={{ opacity: 0 }} type="source" position={Position.Top} id='a' />
  22.       <Handle style={{ opacity: 0 }} type="source" position={Position.Right} id='b' />
  23.       <Handle style={{ opacity: 0 }} type="source" position={Position.Bottom} id='c' />
  24.       <Handle style={{ opacity: 0 }} type="source" position={Position.Left} id='d' />
  25.     </>
  26.   );
  27. };
  28.  
  29. export default memo(ResizableNodeSelected);

6、data.js

  1. export const nodes = [
  2.     { "width": 80, "height": 80, "id": "13", "type": "ResizableNodeSelected", "position": { "x": 181.99158953145331, "y": 472.7199877834713 }, "data": { "label": "服务实例JVM堆大小", "id": "13", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 2 }, "selected": false, "positionAbsolute": { "x": 181.99158953145331, "y": 472.7199877834713 }, "dragging": false, "hidden": false },
  3.     { "width": 80, "height": 80, "id": "12", "type": "ResizableNodeSelected", "position": { "x": 458.51664737488375, "y": 497.7400344424826 }, "data": { "label": "服务实例JVM线程数", "id": "12", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 2 }, "selected": false, "positionAbsolute": { "x": 458.51664737488375, "y": 497.7400344424826 }, "dragging": false, "hidden": false },
  4.     { "width": 80, "height": 80, "id": "11", "type": "ResizableNodeSelected", "position": { "x": 456.86503312460417, "y": 278.4940093032253 }, "data": { "label": "应用服务平均响应时长", "id": "11", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 2 }, "selected": false, "positionAbsolute": { "x": 456.86503312460417, "y": 278.4940093032253 }, "dragging": false, "hidden": false },
  5.     { "width": 80, "height": 80, "id": "10", "type": "ResizableNodeSelected", "position": { "x": 188.70901987307826, "y": 316.5335073980088 }, "data": { "label": "存储I/O负载", "id": "10", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 2 }, "selected": false, "positionAbsolute": { "x": 188.70901987307826, "y": 316.5335073980088 }, "dragging": false, "hidden": false },
  6.     { "width": 80, "height": 80, "id": "9", "type": "ResizableNodeSelected", "position": { "x": 86.9908194969212, "y": 56.769326529302944 }, "data": { "label": "服务端点平均响应时长", "id": "9", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 2 }, "selected": false, "positionAbsolute": { "x": 86.9908194969212, "y": 56.769326529302944 }, "dragging": false, "hidden": false },
  7.     { "width": 80, "height": 80, "id": "8", "type": "ResizableNodeSelected", "position": { "x": 461.40008223448365, "y": 92.49854876752454 }, "data": { "label": "服务实例", "id": "8", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 2 }, "selected": false, "positionAbsolute": { "x": 461.40008223448365, "y": 92.49854876752454 }, "dragging": false, "hidden": false },
  8.     { "width": 80, "height": 80, "id": "7", "type": "ResizableNodeSelected", "position": { "x": -87.30759005365732, "y": 133.76253323256137 }, "data": { "label": "端点链路（动态模型）平均响应时长", "id": "7", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 4 }, "selected": false, "dragging": false, "hidden": false, "positionAbsolute": { "x": -87.30759005365732, "y": 133.76253323256137 } },
  9.     { "width": 80, "height": 80, "id": "6", "type": "ResizableNodeSelected", "position": { "x": -11.910201399135396, "y": 485.8445794117532 }, "data": { "label": "主机I/O负载", "id": "6", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 4 }, "selected": false, "dragging": false, "hidden": false, "positionAbsolute": { "x": -11.910201399135396, "y": 485.8445794117532 }, "resizing": false },
  10.     { "width": 80, "height": 80, "id": "5", "type": "ResizableNodeSelected", "position": { "x": -10, "y": 280.5 }, "data": { "label": "Mysql实例慢查询", "id": "5", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 4 }, "selected": false, "dragging": false, "hidden": false, "positionAbsolute": { "x": -10, "y": 280.5 } },
  11.     { "width": 80, "height": 80, "id": "4", "type": "ResizableNodeSelected", "position": { "x": -282.5, "y": 453 }, "data": { "label": "主机内存使用率", "id": "4", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 4 }, "selected": false, "dragging": false, "hidden": false, "positionAbsolute": { "x": -282.5, "y": 453 } },
  12.     { "width": 80, "height": 80, "id": "3", "type": "ResizableNodeSelected", "position": { "x": -275, "y": 283 }, "data": { "label": "主机CPU使用率", "id": "3", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 4 }, "selected": false, "positionAbsolute": { "x": -275, "y": 283 }, "dragging": false, "hidden": false },
  13.     { "width": 80, "height": 80, "id": "2", "type": "ResizableNodeSelected", "position": { "x": -271, "y": 133.5 }, "data": { "label": "消息中间件堆积数", "id": "2", "nodeBg": "#F3A011", "isHidden": false }, "style": { "background": "#F3A011", "width": 80, "height": 80, "borderRadius": "100%", "color": "white", "fontSize": 4 }, "selected": false, "dragging": false, "hidden": false, "positionAbsolute": { "x": -271, "y": 133.5 } }
  14. ];
  15.  
  16. export const edges = [
  17.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "4", "sourceHandle": "a", "target": "5", "targetHandle": "d", "id": "reactflow__edge-4a-5d", "selected": false, "hidden": true },
  18.     { "style": { "stroke": "#116F97" }, "type": "straight", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "4", "sourceHandle": "b", "target": "5", "targetHandle": "c", "id": "reactflow__edge-4b-5c", "selected": false, "hidden": true },
  19.     { "style": { "stroke": "#116F97" }, "type": "default", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "5", "sourceHandle": "d", "target": "4", "targetHandle": "a", "id": "reactflow__edge-5d-4a", "selected": false, "hidden": true },
  20.     { "style": { "stroke": "#116F97" }, "type": "default", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "2", "sourceHandle": "b", "target": "7", "targetHandle": "d", "id": "reactflow__edge-2b-7d", "selected": false, "label": "模型间接关系", "hidden": false },
  21.     { "style": { "stroke": "#116F97" }, "type": "default", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "5", "sourceHandle": "d", "target": "3", "targetHandle": "b", "id": "reactflow__edge-5d-3b", "selected": false, "label": "模型直接关系", "hidden": false },
  22.     { "style": { "stroke": "#116F97" }, "type": "default", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "6", "sourceHandle": "a", "target": "5", "targetHandle": "c", "id": "reactflow__edge-6a-5c", "selected": false, "label": "模型直接关系", "hidden": false },
  23.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "5", "sourceHandle": "a", "target": "7", "targetHandle": "c", "id": "reactflow__edge-5a-7c", "selected": false, "label": "模型直接关系", "hidden": false },
  24.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "4", "sourceHandle": "a", "target": "5", "targetHandle": "c", "id": "reactflow__edge-4a-5c", "selected": false, "label": "模型直接关系", "hidden": false },
  25.     { "style": { "stroke": "#116F97" }, "type": "step", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "5", "sourceHandle": "b", "target": "7", "targetHandle": "b", "id": "reactflow__edge-5b-7b", "selected": false, "label": "模型直接关系", "hidden": false },
  26.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "7", "sourceHandle": "b", "target": "9", "targetHandle": "d", "id": "reactflow__edge-7b-9d", "selected": false, "hidden": false },
  27.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "10", "sourceHandle": "d", "target": "5", "targetHandle": "b", "id": "reactflow__edge-10d-5b", "selected": false, "label": "模型直接关系", "hidden": false },
  28.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "8", "sourceHandle": "c", "target": "11", "targetHandle": "a", "id": "reactflow__edge-8c-11a", "selected": false, "label": "模型直接关系", "hidden": false },
  29.     { "style": { "stroke": "#116F97" }, "type": "straight", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "12", "sourceHandle": "a", "target": "11", "targetHandle": "c", "id": "reactflow__edge-12a-11c", "selected": false, "label": "模型直接关系", "hidden": false },
  30.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "13", "sourceHandle": "b", "target": "11", "targetHandle": "d", "id": "reactflow__edge-13b-11d", "selected": false, "label": "模型直接关系", "hidden": false },
  31.     { "style": { "stroke": "#116F97" }, "type": "smoothstep", "markerEnd": { "type": "arrowclosed", "color": "#116F97" }, "source": "9", "sourceHandle": "b", "target": "11", "targetHandle": "d", "id": "reactflow__edge-9b-11d", "selected": false, "label": "模型直接关系", "hidden": false }
  32. ]
  33.  
  34. // "viewport": { "x": 654.5507940552135, "y": -54.945769269730704, "zoom": 1.6908994642667994 } }

7、package.json

  1. {
  2.   "name": "my-react-flow-app",
  3.   "private": true,
  4.   "version": "0.0.0",
  5.   "type": "module",
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "vite build",
  9.     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  10.     "preview": "vite preview"
  11.   },
  12.   "dependencies": {
  13.     "antd": "^5.7.1",
  14.     "react": "^18.2.0",
  15.     "react-dom": "^18.2.0",
  16.     "reactflow": "^11.7.4"
  17.   },
  18.   "devDependencies": {
  19.     "@types/react": "^18.2.14",
  20.     "@types/react-dom": "^18.2.6",
  21.     "@vitejs/plugin-react": "^4.0.1",
  22.     "eslint": "^8.44.0",
  23.     "eslint-plugin-react": "^7.32.2",
  24.     "eslint-plugin-react-hooks": "^4.6.0",
  25.     "eslint-plugin-react-refresh": "^0.4.1",
  26.     "vite": "^4.4.0"
  27.   }
  28. }

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

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

  

闽ICP备14008679号