コンポーネント
<Background />
Background コンポーネントは、ノードベースの UI で一般的なさまざまな種類の背景をレンダリングするのに便利です。ライン、ドット、クロスの 3 つのバリアントが用意されています。
続きを読む<BaseEdge />
BaseEdgeコンポーネントは、すべてのエッジに内部的に使用されます。カスタムエッジ内で使用でき、非表示のヘルパーエッジとエッジラベルを処理します。
続きを読む<ControlButton />
ControlButtonコンポーネントを使用してボタンをコントロールパネルに追加し、Controlsコンポーネントの子として渡すことができます。
続きを読む<Controls />
Controls コンポーネントは、ズームイン、ズームアウト、ビューの調整、ビューポートのロックを行うための便利なボタンを含む小さなパネルをレンダリングします。
続きを読む<EdgeLabelRenderer />
エッジは SVG ベースです。より複雑なラベルをレンダリングする場合は、EdgeLabelRenderer コンポーネントを使用して div ベースのレンダラーにアクセスできます。このコンポーネントは、エッジの上に配置された div にラベルをレンダリングするポータルです。コンポーネントの使用例は、エッジラベルレンダラーの例で確認できます。
続きを読む<EdgeText />
EdgeTextコンポーネントは、カスタムエッジ内にテキストを表示するためのヘルパーコンポーネントとして使用できます。
続きを読む<Handle />
Handle コンポーネントは、カスタムノードで接続ポイントを定義するために使用されます。
続きを読む<MiniMap />
MiniMap コンポーネントを使用して、フローの概要をレンダリングできます。各ノードを SVG 要素としてレンダリングし、現在のビューポートがフローの残りの部分とどのように関連しているかを視覚化します。
続きを読む<NodeResizer />
NodeResizerコンポーネントを使用して、ノードにサイズ変更機能を追加できます。ノードの周囲にドラッグ可能なコントロールをレンダリングして、すべての方向にサイズ変更できます。
続きを読む<NodeResizeControl />
独自のサイズ変更 UI を作成するには、NodeResizeControl コンポーネントを使用できます。そこでは、子（アイコンなど）を渡すことができます。
続きを読む<NodeToolbar />
NodeToolbarコンポーネントは、カスタムノードの片側にツールバーまたはツールチップをレンダリングできます。このツールバーはビューポートに合わせてスケールされないため、コンテンツは常に表示されます。
続きを読む<Panel />
Panel コンポーネントは、ビューポートの上にコンテンツを配置するのに役立ちます。 MiniMap および Controls コンポーネントで内部的に使用されます。
続きを読む<ViewportPortal />
<ViewportPortalコンポーネントを使用して、ノードとエッジがレンダリングされるフローと同じビューポートにコンポーネントを追加できます。これは、ノードとエッジと同じ座標系に準拠し、ズームとパンにも影響を受ける独自のコンポーネントをレンダリングする場合に役立ちます
続きを読む