<BaseEdge />

The <BaseEdge /> 组件在内部用于所有边缘。它可以用于自定义边缘，并为你处理不可见的辅助边缘和边缘标签。

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

属性

名称	类型
#`id`	`string`
#`style`	`React.CSSProperties`
#`interactionWidth`	`number` 边缘周围不可见区域的宽度，用户可以在该区域与边缘进行交互。这对于使边缘更易于点击或悬停很有用。
#`path`	`string` 定义边缘的 SVG 路径字符串。这应该类似于 'M 0 0 L 100 100'，用于简单的线。 getSimpleBezierEdge 等实用程序函数可以用于为你生成此字符串。
#`markerStart`	`string` 要在边缘起点使用的 SVG 标记的 ID。这应该在单独的 SVG 文档或元素中的 <defs> 元素中定义。
#`markerEnd`	`string` 要在边缘终点使用的 SVG 标记的 ID。这应该在单独的 SVG 文档或元素中的 <defs> 元素中定义。
#`label`	`string \| React.ReactNode` 要沿着边缘渲染的标签或自定义元素。这通常是文本标签或一些自定义控件。
#`labelX`	`number`
#`labelY`	`number`
#`labelStyle`	`React.CSSProperties`
#`labelShowBg`	`boolean`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[number, number]`
#`labelBgBorderRadius`	`number`

备注

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

组件类型