自定义边

¥Custom Edges

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

¥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;

添加边标签

¥Adding an edge label

自定义边缘的一个更常见用途是沿边缘的路径渲染一些控件或信息。在 React Flow 中，我们称之为边缘标签，与边缘路径不同，边缘标签可以是任何 React 组件！

¥One of the more common uses for custom edges is rendering some controls or info along an edge’s path. In React Flow we call that an edge label and unlike the edge path, edge labels can be any React component!

要渲染自定义边缘标签，我们必须将其封装在 <EdgeLabelRenderer /> 组件中。出于性能原因，这是必要的：边标签渲染器是单个容器的门户，所有边标签都渲染到该容器中。

¥To render a custom edge label we must wrap it in the <EdgeLabelRenderer /> component. This is necessary for performance reasons: the edge label renderer is a portal to a single container that all edge labels are rendered into.

让我们在自定义边上添加一个按钮，该按钮可用于删除它所附加的边：

¥Let’s add a button to our custom edge that can be used to delete the edge it’s attached to:


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))}
        >
          delete
        </button>
      </EdgeLabelRenderer>
    </>
  );
}

如果我们现在尝试使用这个边缘，我们会看到按钮被渲染在流的中心（它可能隐藏在 “节点 A” 后面）。由于边缘标签门户，我们需要做一些额外的工作来自己定位按钮。

¥If we try to use this edge now, we’ll see that the button is rendered in the centre of the flow (it might be hidden behind “Node A”). Because of the edge label portal, we’ll need to do some extra work to position the button ourselves.

幸运的是，我们已经看到的路径实用程序可以帮助我们做到这一点！除了要渲染的 SVG 路径外，这些函数还返回路径中点的 x 和 y 坐标。然后我们可以使用这些坐标将我们的自定义边缘标签转换为正确的位置！

¥Fortunately, the path utils we’ve already seen can help us with this! Along with the SVG path to render, these functions also return the x and y coordinates of the path’s midpoint. We can then use these coordinates to translate our custom edge label’s into the right position!


export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY }) {
  const { setEdges } = useReactFlow();
  const [edgePath, labelX, labelY] = getStraightPath({ ... });
 
  return (
    ...
        <button
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            pointerEvents: 'all',
          }}
          className="nodrag nopan"
          onClick={() => {
            setEdges((es) => es.filter((e) => e.id !== id));
          }}
        >
    ...
  );
}

要确保我们的边缘标签具有交互性而不仅仅是为了演示，将 pointer-events: all 添加到标签样式中非常重要。这将确保标签可点击。

¥To make sure our edge labels are interactive and not just for presentation, it is important to add pointer-events: all to the label’s style. This will ensure that the label is clickable.

就像自定义节点中的交互式控件一样，我们需要记住将 nodrag 和 nopan 类添加到标签以阻止鼠标事件控制画布。

¥And just like with interactive controls in custom nodes, we need to remember to add the nodrag and nopan classes to the label to stop mouse events from controlling the canvas.

以下是我们更新的自定义边缘的交互式示例。单击删除按钮将从流程中移除该边缘。创建新边将使用自定义节点。

¥Here’s an interactive example with our updated custom edge. Clicking the delete button will remove that edge from the flow. Creating a new edge will use the custom node.


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' } },
  { id: 'c', position: { x: 0, y: 200 }, data: { label: 'Node C' } },
];
 
const initialEdges = [
  { id: 'a->b', type: 'custom-edge', source: 'a', target: 'b' },
  { id: 'b->c', type: 'custom-edge', source: 'b', target: 'c' },
];
 
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;