リファレンス

ReactFlowInstance

GitHubのソース

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
(id: string, nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>), options?: { replace: boolean }) => void
#updateNodeData
(id: string, dataUpdate: Partial<NodeType['data']> | ((edge: NodeType) => 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']> | ((edge: EdgeType) => Partial<EdgeType['data']>), options?: { replace: boolean }) => void
#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; }
フローのキャンバス内の位置を画面のピクセル位置に変換します。