ReactFlowInstance
ReactFlowInstance
は、フローの内部状態を照会および操作するためのメソッドのコレクションを提供します。useReactFlow
フックを使用するか、onInit
イベントにリスナーをアタッチすることで、インスタンスを取得できます。
export type ReactFlowInstance<T, U> = {
// Nodes and Edges
getNode: (id: string) => Node<T> | undefined;
getNodes: () => Node<T>[];
addNodes: (payload: Node<T>[] | Node<T>) => void;
setNodes: (payload: Node<T>[] | ((nodes: Node<T>[]) => Node<T>[])) => void;
getEdge: (id: string) => Edge<U> | undefined;
getEdges: () => Edge<U>[];
addEdges: (payload: Edge<U>[] | Edge<U>) => void;
setEdges: (payload: Edge<U>[] | ((edges: Edge<U>[]) => Edge<U>[])) => void;
toObject: () => ReactFlowJsonObject<T, U>;
deleteElements: (payload: {
nodes?: (Partial<Node> & { id: Node['id'] })[];
edges?: (Partial<Edge> & { id: Edge['id'] })[];
}) => void;
getNodesBounds: (nodes: (NodeType | InternalNode | string)[]) => Rect;
// Intersections
getIntersectingNodes: (
node: (Partial<Node<T>> & { id: Node['id'] }) | Rect,
partially?: boolean,
nodes?: Node<T>[],
) => Node<T>[];
isNodeIntersecting: (
node: (Partial<Node<T>> & { id: Node['id'] }) | Rect,
area: Rect,
partially?: boolean,
) => boolean;
// Viewport
viewportInitialized: boolean;
zoomIn: (options?: { duration: number }) => void;
zoomOut: (options?: { duration: number }) => void;
zoomTo: (zoomLevel: number, options?: { duration: number }) => void;
getZoom: () => number;
setViewport: (viewport: Viewport, options?: { duration: number }) => void;
getViewport: () => Viewport;
fitView: (fitViewOptions?: FitViewOptions) => boolean;
setCenter: (
x: number,
y: number,
options?: { duration: number; zoom: number },
) => void;
fitBounds: (
bounds: Rect,
options?: { duration: number; padding: number },
) => void;
screenToFlowPosition: (position: { x: number; y: number }) => {
x: number;
y: number;
};
flowToScreenPosition: (position: { x: number; y: number }) => {
x: number;
y: number;
};
updateNode: (
id: string,
nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>),
options?: { replace: boolean },
) => void;
updateNodeData: (
id: string,
dataUpdate:
| Partial<NodeType>['data']
| ((node: Node) => Partial<NodeType>['data']),
options?: { replace: boolean },
) => void;
updateEdge: (
id: string,
edgeUpdate: Partial<EdgeType> | ((node: EdgeType) => Partial<EdgeType>),
options?: { replace: boolean },
) => void;
updateEdgeData: (
id: string,
dataUpdate:
| Partial<EdgeType>['data']
| ((node: Edge) => Partial<EdgeType>['data']),
options?: { replace: boolean },
) => void;
};
フィールド
ノードとエッジ
名前 | 型 |
---|---|
# getNode | (id: string) => Node<T> | undefined |
# getInternalNode | (id: string) => InternalNode<T> | undefined |
# getNodes | () => Node<T>[] |
# addNodes | (payload: Node<T>[] | Node<T>) => void 既存のノード配列に1つまたは複数のノードを追加します。この関数を呼び出すと、制御されたフローでonNodesChangeハンドラーがトリガーされます。 |
# setNodes | (payload: Node<T>[] | ((nodes: Node<T>[]) => Node<T>[])) => void ノード配列を、新しい配列で上書きするか、既存の配列を更新する関数を渡すことで、別のものに設定します。関数を使用する場合は、既存の配列をミューテートするのではなく、新しい配列が返されるようにすることが重要です。この関数を呼び出すと、制御されたフローでonNodesChangeハンドラーがトリガーされます。 |
# getEdge | (id: string) => Edge<U> | undefined |
# getEdges | () => Edge<U>[] |
# addEdges | (payload: Edge<U>[] | Edge<U>) => void 既存のエッジ配列に1つまたは複数のエッジを追加します。この関数を呼び出すと、制御されたフローでonEdgesChangeハンドラーがトリガーされます。 |
# setEdges | (payload: Edge<U>[] | ((edges: Edge<U>[]) => Edge<U>[])) => void エッジ配列を、新しい配列で上書きするか、既存の配列を更新する関数を渡すことで、別のものに設定します。関数を使用する場合は、既存の配列をミューテートするのではなく、新しい配列が返されるようにすることが重要です。この関数を呼び出すと、制御されたフローでonEdgesChangeハンドラーがトリガーされます。 |
# toObject | () => ReactFlowJsonObject<T, U> この関数は、現在のReact FlowグラフのJSON表現を返します。 |
# deleteElements | DeleteElements |
# updateNode | |
# updateNodeData | |
# updateEdge | |
# updateEdgeData | |
# getHandleConnections | ({ type, nodeId, id }: { type: HandleType, nodeId: string, id?: string | null }) => HandleConnection[] 特定のノードに属するハンドルのすべての接続を取得します。 type パラメータは 'source' または 'target' のいずれかになります。 |
# getNodesBounds | (nodes: (NodeType | InternalNode | string)[]) => Rect 指定されたノードまたはノード ID の境界を返します。 |
交差
名前 | 型 |
---|---|
# getIntersectingNodes | (node: (Partial<Node<T>> & { id: Node["id"] }) | Rect, 部分的に?: boolean, nodes?: Node<T>[]) => Node<T>[] 指定されたノードまたは矩形と現在交差しているすべてのノードを検索します。 partially パラメータを true に設定すると、部分的に交差しているノードも含めることができます。 |
# isNodeIntersecting | (node: (Partial<Node<T>> & { id: Node["id"] }) | Rect, area: Rect, 部分的に?: boolean) => boolean 指定されたノードまたは矩形が別の矩形と交差しているかどうかを判断します。 partially パラメータを true に設定すると、ノードが部分的に交差している場合でも true を返します。 |
ビューポートフィールド
名前 | 型 |
---|---|
# viewportInitialized | boolean React Flow はビューポートを DOM にマウントし、ズームとパンの動作を初期化する必要があります。このプロパティは、いつ |
# zoomIn | (options?: { duration: number; }) => void |
# zoomOut | (options?: { duration: number; }) => void |
# zoomTo | (zoomLevel: number, options?: { duration: number; }) => void ビューポートを特定のズームレベルにズームします。duration を渡すと、ビューポートが新しいズームレベルにアニメーション化されます。 |
# getZoom | () => number ビューポートの現在のズームレベルを取得します。 |
# setViewport | (viewport: Viewport, options?: { duration: number; }) => void |
# getViewport | () => Viewport |
# fitView | (fitViewOptions?: FitViewOptions) => boolean |
# setCenter | (x: number, y: number, options?: { duration: number, zoom: number; }) => void ビューポートを特定の場所に中心を合わせます。duration を渡すと、ビューポートが新しい位置にアニメーション化されます。 |
# fitBounds | (bounds: Rect, options?: { duration: number, padding: number; }) => void ビューポートを特定の矩形に合わせるための低レベルのユーティリティ関数です。duration を渡すと、ビューポートは現在の位置から新しい位置にアニメーション化されます。padding オプションを使用して、境界の周りにスペースを追加できます。 |
# screenToFlowPosition | (position: { x: number; y: number; }) => { x: number; y: number; } この関数を使用すると、画面のピクセル位置をフローの位置に変換できます。たとえば、サイドバーからのドラッグアンドドロップの実装に役立ちます。 |
# flowToScreenPosition | (position: { x: number; y: number; }) => { x: number; y: number; } フローのキャンバス内の位置を画面のピクセル位置に変換します。 |