型
BackgroundVariant
利便性のために、3 つのバリアントが列挙型としてエクスポートされます。列挙型をインポートして BackgroundVariant.Lines のように使用するか、生の文字列値を直接使用できます。
続きを読むConnection
Connection 型は、2 つのノード間のエッジの基本的な最小限の説明です。 addEdge ユーティリティを使用して、Connection を Edge にアップグレードできます。
続きを読むConnectionLineComponentProps
接続線にカスタムコンポーネントをレンダリングする場合は、ReactFlowコンポーネントに connectionLineComponent プロパティを設定できます。 ConnectionLineComponentProps はカスタムコンポーネントに渡されます。
続きを読むConnectionLineType
ReactFlow コンポーネントで connectionLineType プロパティを設定すると、新しいエッジを作成するときにレンダリングされる接続線のスタイルが決まります。
続きを読むConnectionState
進行中の接続に関するデータ。
続きを読むCoordinateExtent
座標範囲は、座標系内の 2 つの点を表します。1 つは左上隅に、もう 1 つは右下隅にあります。フロー内のノードの境界またはビューポートの境界を表すために使用されます。
続きを読むDefaultEdgeOptions
Edge の多くのプロパティはオプションです。新しいエッジが作成されるときに、指定されていないプロパティは、ReactFlow コンポーネントの defaultEdgeOptions プロパティに渡されたデフォルト値で埋められます。
続きを読むDeleteElements
DeleteElements は、フローからノードとエッジを削除し、削除されたエッジとノードを非同期的に返します。
続きを読むEdge
Connection は 2 つのノード間のエッジの最小限の説明ですが、Edge は、React Flow がレンダリングするために必要なすべての情報を含む完全な説明です。
EdgeChange
onEdgesChange コールバックは、フローの状態を更新するために使用する必要がある EdgeChange オブジェクトの配列を受け取ります。 EdgeChange 型は、フロー内でエッジが変更される可能性のあるさまざまな方法を表す 4 つの異なるオブジェクト型の共用体です。
続きを読むEdgeMarker
エッジには、エッジの開始と終了にオプションでマーカーを付けることができます。 EdgeMarker 型は、これらのマーカーを設定するために使用されます。使用可能なエッジマーカーの種類の詳細については、MarkerType のドキュメントを確認してください。
続きを読むEdgeProps
カスタムエッジを実装する場合、いくつかの基本的な機能を有効にするコンポーネントにラップされます。カスタムエッジコンポーネントは、次のプロパティを受け取ります
続きを読むFitViewOptions
fitView を呼び出すときに、これらのオプションを使用して動作をカスタマイズできます。たとえば、duration オプションを使用して、指定された時間をかけてビューポートをスムーズに変換できます。
続きを読むHandle
ID、位置、種類などの属性を処理します。
続きを読むHandleConnection
HandleConnection 型は、edgeId を含む Connection です。
続きを読むInternalNode
InternalNode は、React Flow がレンダリングのために内部的に使用する追加のプロパティを持つ、基本 Node 型の拡張です。.
続きを読むMarkerType
エッジには、両端にオプションでマーカーを付けることができます。 MarkerType 型は、特定のマーカーを設定するときに使用できるオプションを列挙します。
続きを読むMiniMapNodeProps
Node
Node 型は、React Flow が特定のノードについて知る必要があるすべてのものを表します。これらのプロパティの多くは、React Flow またはユーザーの両方によって操作できますが、幅や高さなどの一部のプロパティは読み取り専用と見なす必要があります。
続きを読むNodeChange
onNodesChange コールバックは、フローの状態を更新するために使用する必要がある NodeChange オブジェクトの配列を受け取ります。 NodeChange 型は、フロー内でノードが変更される可能性のあるさまざまな方法を表す 6 つの異なるオブジェクト型の共用体です。
続きを読むNodeHandle
エッジには、両端にオプションでマーカーを付けることができます。 MarkerType 型は、特定のマーカーを設定するときに使用できるオプションを列挙します。
続きを読むNodeOrigin
ノードの原点は、独自の座標を基準にしてどのように配置されるかを決定します。
続きを読むNodeProps
カスタムノードを実装する場合、選択やドラッグなどの基本的な機能を有効にするコンポーネントにラップされます。カスタムノードは、次のプロパティを受け取ります
続きを読むOnEdgesChange
OnNodesChange
PanOnScrollMode
この列挙型は、ユーザーがスクロールしたときのビューポートのパンニングのさまざまなモードを設定するために使用されます。
続きを読むPanelPosition
この型は、主にフロービューポートの上に要素を配置するために使用されます。たとえば、MiniMap コンポーネントと Controls コンポーネントはどちらも、この型の position プロパティを受け取ります。
続きを読むPosition
PanelPosition はコンテナの隅にコンポーネントを配置するために使用できますが、Position 列挙型は精度が低く、主にエッジとハンドルに関連して使用されます。
続きを読むProOptions
デフォルトでは、フローの隅にプロジェクトへのリンクが記載された小さな属性が表示されます。 Pro のサブスクライバーであるかどうかにかかわらず、誰でもこの属性を削除できますが、削除する前に属性の削除ガイドを簡単に確認することをお勧めします。
続きを読むReactFlowInstance
ReactFlowInstance は、フローの内部状態をクエリおよび操作するための一連のメソッドを提供します。 useReactFlow フックを使用するか、onInit イベントにリスナーをアタッチすることで、インスタンスを取得できます。
続きを読むReactFlowJsonObject
フローの JSON 互換表現。たとえば、これを使用してフローをデータベースに保存し、後でロードし直すことができます。
続きを読むResizeParams
ResizeParams 型は、NodeResizer コンポーネントによって出力されるさまざまなイベントの型指定に使用されます。この型は、追加の direction フィールドで拡張されることもあります。
続きを読むViewport
内部的には、React Flow はページの残りの部分とは独立した座標系を維持します。 Viewport 型は、そのシステム内のフローが現在どこに表示されているか、およびズームインまたはズームアウトの程度を示します。
続きを読むXYPosition
すべての位置は、x 座標と y 座標を持つオブジェクトに格納されます。
続きを読む