边标签

🌐 Edge Labels

自定义边（custom edges）的一个较常见的用途是在边的路径上渲染某些控件或信息。在 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 a custom edge label and unlike the edge path, edge labels can be any React component!

添加边标签

🌐 Adding an edge label

要渲染自定义边标签，我们必须将其封装在 <EdgeLabelRenderer /> 组件中。这允许我们在边存在的 SVG 环境之外渲染标签。边标签渲染器是一个门户，所有边标签都渲染到单个容器中。

🌐 To render a custom edge label we must wrap it in the <EdgeLabelRenderer /> component. This allows us to render the labels outside of the SVG world where the edges life. 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 { deleteElements } = useReactFlow();
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
 
  return (
    <>
      <BaseEdge id={id} path={edgePath} />
      <EdgeLabelRenderer>
        <button onClick={() => deleteElements({ edges: [{ 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 { deleteElements } = 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={() => deleteElements({ edges: [{ id }] })}
        >
    ...
  );
}

为了确保我们的边标签是可交互的，而不仅仅是用于展示，给标签的样式添加pointer-events: all非常重要。这将确保标签是可点击的。

就像在自定义节点中的交互控件一样，我们需要记住将 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.