<BaseEdge />

<BaseEdge /> 组件在所有边上内部使用。它可以在自定义边中使用，并为你处理隐藏的辅助边和边的标签。

🌐 The <BaseEdge /> component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.


import { BaseEdge } from '@xyflow/react';
 
export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
 
  const { label, labelStyle, markerStart, markerEnd, interactionWidth } = props;
 
  return (
    <BaseEdge
      path={edgePath}
      label={label}
      labelStyle={labelStyle}
      markerEnd={markerEnd}
      markerStart={markerStart}
      interactionWidth={interactionWidth}
    />
  );
}

属性

🌐 Props

Name	Type	Default
`path`	`string` The SVG path string that defines the edge. This should look something like `'M 0 0 L 100 100'` for a simple line. The utility functions like `getSimpleBezierEdge` can be used to generate this string for you.
`markerStart`	`string` The id of the SVG marker to use at the start of the edge. This should be defined in a `<defs>` element in a separate SVG document or element. Use the format “url(#markerId)” where markerId is the id of your marker definition.
`markerEnd`	`string` The id of the SVG marker to use at the end of the edge. This should be defined in a `<defs>` element in a separate SVG document or element. Use the format “url(#markerId)” where markerId is the id of your marker definition.
`label`	`ReactNode` The label or custom element to render along the edge. This is commonly a text label or some custom controls.
`labelStyle`	`CSSProperties` Custom styles to apply to the label.
`labelShowBg`	`boolean`
`labelBgStyle`	`CSSProperties`
`labelBgPadding`	`[number, number]`
`labelBgBorderRadius`	`number`
`interactionWidth`	`number` The width of the invisible area around the edge that the user can interact with. This is useful for making the edge easier to click or hover over.	`20`
`labelX`	`number` The x position of edge label
`labelY`	`number` The y position of edge label
`...props`	`Omit<SVGAttributes<SVGPathElement>, "d" \| "path" \| "markerStart" \| "markerEnd">`

注释

🌐 Notes

如果你想在 <BaseEdge /> 组件中使用边缘标记，你可以将 markerStart 或 markerEnd 属性传递给你的自定义边缘，再传递给 <BaseEdge /> 组件。你可以通过查看 EdgeProps 类型来查看传递给自定义边缘的所有属性。