ReactFlowInstance

ReactFlowInstance 提供了一組方法來查詢和操作您的流程的內部狀態。您可以使用 useReactFlow hook 或將監聽器附加到 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` 將一個或多個節點新增到您現有的節點陣列中。呼叫此函式將觸發受控流程中的 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` 將一個或多個邊新增到您現有的邊陣列中。呼叫此函式將觸發受控流程中的 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[]` 取得屬於特定節點的 handle 的所有連線。類型參數可以是 'source' 或 'target'。
#`getNodesBounds`	`(nodes: (NodeType \| InternalNode \| string)[]) => Rect` 返回指定節點或節點 ID 的邊界。

交集

名稱	類型
#`getIntersectingNodes`	`(node: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, partially?: boolean, nodes?: Node<T>[]) => Node<T>[]` 尋找目前與給定節點或矩形相交的所有節點。可以將 partially 參數設置為 true，以包含僅部分相交的節點。
#`isNodeIntersecting`	`(node: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, area: Rect, partially?: 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` 將視窗縮放到指定的縮放級別。傳入持續時間會將視窗動畫化到新的縮放級別。
#`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` 將視窗調整為適合指定矩形的底層實用函式。透過傳入持續時間，視窗會從目前位置動畫化到新的位置。可以使用 padding 選項在邊界周圍新增空間。
#`screenToFlowPosition`	`(position: { x: number; y: number; }) => { x: number; y: number; }` 透過此函式，您可以將螢幕像素位置轉換為 flow 位置。它對於實作從側邊欄拖放很有用。
#`flowToScreenPosition`	`(position: { x: number; y: number; }) => { x: number; y: number; }` 將 flow 畫布內的位置轉換為螢幕像素位置。

類型 getTransformForBounds()