コンポーネント

<Background />

Backgroundコンポーネントを使用すると、ノードベースのUIで一般的なさまざまな種類の背景を簡単にレンダリングできます。 lines、dots、crossの3つのバリアントがあります。

BaseEdgeコンポーネントは、すべてのエッジに内部的に使用されます。カスタムエッジ内で使用でき、非表示のヘルパーエッジとエッジラベルを処理します。

ControlButtonコンポーネントは、Controlsコンポーネント用のカスタム/追加ボタンをレンダリングするために使用されます。

Controlsコンポーネントは、ズームイン、ズームアウト、ビューのフィット、およびビューポートのロックのための便利なボタンを含む小さなパネルをレンダリングします。

エッジはSVGベースです。より複雑なラベルをレンダリングする場合は、EdgeLabelRendererコンポーネントを使用して、divベースのレンダラーにアクセスできます。このコンポーネントは、エッジの上に配置されたdivでラベルをレンダリングするポータルです。

Edge Labelコンポーネントは、エッジにラベルを追加するために使用できます。

Handleコンポーネントは、カスタムノードで接続ポイントを定義するために使用されます。

MiniMapコンポーネントは、フローの概要をレンダリングします。各ノードをSVG要素としてレンダリングし、現在のビューポートがフローの残りの部分に対してどこにあるかを視覚化します。

NodeResizerコンポーネントを使用して、ノードにサイズ変更機能を追加できます。すべての方向にサイズ変更するために、ノードの周りにドラッグ可能なコントロールをレンダリングします。

独自のサイズ変更UIを作成するには、NodeResizeControlコンポーネントを使用できます。ここで、子要素（アイコンなど）を渡すことができます。

NodeToolbarコンポーネントは、ノードの側面にツールバーを表示したり、たとえばツールチップを表示したりするために使用できます。

Panelコンポーネントは、ビューポートの上にコンテンツを配置するのに役立ちます。MiniMapおよびControlsコンポーネントによって内部的に使用されます。