边缘

¥Edges

与自定义节点一样，React Flow 中自定义边的部分只是 React 组件：这意味着你可以沿着边缘渲染任何你想要的内容！本指南向你展示如何使用一些附加控件实现自定义边缘。有关自定义边可用 props 的全面参考，请参阅自定义边属性文档。

¥Like custom nodes, parts of a custom edge in React Flow are just React components: that means you can render anything you want along an edge! This guide shows you how to implement a custom edge with some additional controls. For a comprehensive reference of props available for custom edges, see the Custom Edge Props documentation.

基本自定义边

¥A basic custom edge

如果边不渲染两个连接节点之间的路径，那么它对我们来说没什么用。这些路径始终基于 SVG，通常使用 <BaseEdge /> 组件渲染。为了计算要渲染的实际 SVG 路径，React Flow 附带了一些方便的实用函数：

¥An edge isn’t much use to us if it doesn’t render a path between two connected nodes. These paths are always SVG-based and are typically rendered using the <BaseEdge /> component. To calculate the actual SVG path to render, React Flow comes with some handy utility functions:

要启动我们的自定义边缘，我们只需在源和目标之间渲染一条直线路径即可。

¥To kick start our custom edge, we’ll just render a straight path between the source and target.


import { BaseEdge, getStraightPath } from '@xyflow/react';
 
export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY }) {
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
 
  return (
    <>
      <BaseEdge id={id} path={edgePath} />
    </>
  );
}

传递给自定义边缘组件的所有属性都可以在 EdgeProps 类型下的 API 参考中找到。

¥All the props passed to your custom edge component can be found in the API reference under the EdgeProps type.

这为我们提供了一条直边，其行为与默认 "straight" 边缘类型相同。要使用它，我们还需要更新 <ReactFlow /> 组件上的 edgeTypes prop。

¥This gives us a straight edge that behaves the same as the default "straight" edge type. To use it, we also need to update the edgeTypes prop on the <ReactFlow /> component.

在组件外部定义 edgeTypes 对象或使用 React 的 useMemo 钩子来防止不必要的重新渲染非常重要。如果你忘记执行此操作，React Flow 将在控制台中显示警告。

¥It’s important to define the edgeTypes object outside of the component or to use React’s useMemo hook to prevent unnecessary re-renders. React Flow will show a warning in the console if you forget to do this.


import ReactFlow from '@xyflow/react'
import CustomEdge from './CustomEdge'
 
 
const edgeTypes = {
  'custom-edge': CustomEdge
}
 
export function Flow() {
  return <ReactFlow edgeTypes={edgeTypes} ... />
}

定义 edgeTypes 对象后，我们可以通过将边的 type 字段设置为 "custom-edge" 来使用新的自定义边。

¥After defining the edgeTypes object, we can use our new custom edge by setting the type field of an edge to "custom-edge".


import { useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  useNodesState,
  useEdgesState,
} from '@xyflow/react';
import CustomEdge from './CustomEdge';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
  { id: 'b', position: { x: 0, y: 100 }, data: { label: 'Node B' } },
];
 
const initialEdges = [
  { id: 'a->b', type: 'custom-edge', source: 'a', target: 'b' },
];
 
const edgeTypes = {
  'custom-edge': CustomEdge,
};
 
function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback(
    (connection) => {
      const edge = { ...connection, type: 'custom-edge' };
      setEdges((eds) => addEdge(edge, eds));
    },
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      edgeTypes={edgeTypes}
      fitView
    />
  );
}
 
export default Flow;

制作自定义 SVG 边缘路径

¥Making Custom SVG Edge Paths

如前所述，如果你想在 React Flow 中创建自定义边，则必须使用上面讨论的四个路径创建函数之一（例如 getBezierPath）。但是，如果你想制作其他路径形状，如正弦边或其他边类型，那么你必须自己制作边路径。

¥As discussed previously, if you want to make a custom edge in React Flow, you have to use either of the four path creation functions discussed above (e.g getBezierPath). However if you want to make some other path shape like a Sinusoidal edge or some other edge type then you will have to make the edge path yourself.

我们从 getBezierPath 等函数获得的边缘路径只是一个路径字符串，我们将其传递到 <BaseEdge /> 组件的 path prop 中。它包含绘制该路径所需的必要信息，例如它应该从哪里开始、应该在哪里弯曲、应该在哪里结束等。两个点 (x1, y1) 到 (x2, y2) 之间的简单直线路径字符串如下所示：

¥The edge path we get from functions like getBezierPath is just a path string which we pass into the path prop of the <BaseEdge /> component. It contains the necessary information needed in order to draw that path, like where it should start from, where it should curve, where it should end, etc. A simple straight path string between two points (x1, y1) to (x2, y2) would look like:


M x1 y1 L x2 y2

SVG 路径是命令（如 M、L、Q 等）及其值的连接列表。下面列出了其中一些命令及其支持的值。

¥An SVG path is a concatenated list of commands like M, L, Q, etc, along with their values. Some of these commands are listed below, along with their supported values.

M x1 y1 是“移动到”命令，它将当前点移动到 x1、y1 坐标。

¥M x1 y1 is the Move To command which moves the current point to the x1, y1 coordinate.
L x1 y1 是 Line To 命令，它从当前点到 x1、y1 坐标绘制一条线。

¥L x1 y1 is the Line To command which draws a line from the current point to x1, y1 coordinate.
Q x1 y1 x2 y2 是二次贝塞尔曲线命令，它从当前点到 x2、y2 坐标绘制一条贝塞尔曲线。x1、y1 是曲线的控制点，决定了曲线的曲度。

¥Q x1 y1 x2 y2 is the Quadratic Bezier Curve command which draws a bezier curve from the current point to the x2, y2 coordinate. x1, y1 is the control point of the curve which determines the curviness of the curve.

每当我们想要为自定义边开始一条路径时，我们都会使用 M 命令将当前点移动到 sourceX, sourceY，我们在自定义边缘组件中将其作为 props 获取。然后根据我们想要的形状，我们将使用其他命令，如 L（制作线条）、Q（制作曲线），最后在 targetX, targetY 结束我们的路径，我们在自定义边缘组件中将其作为 props 获得。

¥Whenever we want to start a path for our custom edge, we use the M command to move our current point to sourceX, sourceY which we get as props in the custom edge component. Then based on the shape we want, we will use other commands like L(to make lines), Q(to make curves) and then finally end our path at targetX, targetY which we get as props in the custom edge component.

如果你想了解有关 SVG 路径的更多信息，你可以查看 SVG 路径编辑器。你可以在那里粘贴任何 SVG 路径并通过直观的 UI 分析单个路径命令。

¥If you want to learn more about SVG paths, you can check out SVG-Path-Editor . You can paste any SVG path there and analyze individual path commands via an intuitive UI.

这是一个包含两种自定义边缘路径的示例，即阶梯边缘和正弦边缘。你应该先查看 Step 边缘，以使用自定义 SVG 路径，因为它很简单，然后查看如何制作正弦边缘。完成此示例后，你将具备为自定义边缘创建自定义 SVG 路径所需的知识。

¥Here is an example with two types of custom edge paths, a Step edge and a Sinusoidal edge. You should look at the Step edge first to get your hands dirty with custom SVG paths since it’s simple, and then look at how the Sinusoidal edge is made. After going through this example, you will have the necessary knowledge to make custom SVG paths for your custom edges.


import { ReactFlow } from '@xyflow/react';
import StepEdge from './StepEdge';
import SineEdge from './SineEdge';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
  { id: 'b', position: { x: 200, y: 100 }, data: { label: 'Node B' } },
  { id: 'c', position: { x: 0, y: 200 }, data: { label: 'Node C' } },
  { id: 'd', position: { x: 200, y: 300 }, data: { label: 'Node D' } },
];
 
const initialEdges = [
  { id: 'a->b', type: 'step', source: 'a', target: 'b' },
  { id: 'c->d', type: 'sine', source: 'c', target: 'd' },
];
 
const edgeTypes = {
  step: StepEdge,
  sine: SineEdge,
};
 
function Flow() {
  return (
    <ReactFlow
      defaultNodes={initialNodes}
      defaultEdges={initialEdges}
      edgeTypes={edgeTypes}
      fitView
    />
  );
}
 
export default Flow;