<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 型を見ると、カスタムエッジに渡されるすべてのプロパティを確認できます。

コンポーネント型