<BaseEdge />

<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`	`字串`
#`style`	`React.CSSProperties`
#`interactionWidth`	`數字` 使用者可以互動的邊緣周圍不可見區域的寬度。這對於讓邊緣更容易點擊或懸停很有用。
#`path`	`字串` 定義邊緣的 SVG 路徑字串。對於簡單的線條，它應該看起來像 'M 0 0 L 100 100'。可以使用 getSimpleBezierEdge 等工具函式為您產生此字串。
#`markerStart`	`字串` 要在邊緣起點使用的 SVG 標記的 ID。這應該在單獨的 SVG 文件或元素的 <defs> 元素中定義。
#`markerEnd`	`字串` 要在邊緣終點使用的 SVG 標記的 ID。這應該在單獨的 SVG 文件或元素的 <defs> 元素中定義。
#`label`	`字串 \| React.ReactNode` 要沿邊緣呈現的標籤或自訂元素。這通常是文字標籤或一些自訂控制項。
#`labelX`	`數字`
#`labelY`	`數字`
#`labelStyle`	`React.CSSProperties`
#`labelShowBg`	`布林值`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[數字, 數字]`
#`labelBgBorderRadius`	`數字`

注意事項

如果您想將邊緣標記與<BaseEdge />元件一起使用，您可以將傳遞到自訂邊緣的 markerStart 或 markerEnd 屬性傳遞到 <BaseEdge /> 元件。您可以檢視 EdgeProps 類型，查看傳遞到自訂邊緣的所有屬性。

組件類型