参考类型

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
(有效载荷: Node<T>[] | Node<T>) => void
将一个或多个节点添加到现有的节点数组中。调用此函数将在受控流中触发 onNodesChange 处理程序。
#setNodes
(有效载荷: Node<T>[] | ((节点: Node<T>[]) => Node<T>[])) => void
通过用新数组覆盖它或通过传入一个函数来更新现有数组来将节点数组设置为其他内容。如果使用函数,请确保返回一个新数组,而不是更改现有数组。调用此函数将在受控流中触发 onNodesChange 处理程序。
#getEdge
(id: string) => Edge<U> | undefined
#getEdges
() => Edge<U>[]
#addEdges
(有效载荷: Edge<U>[] | Edge<U>) => void
将一个或多个边添加到现有的边数组中。调用此函数将在受控流中触发 onEdgesChange 处理程序。
#setEdges
(有效载荷: Edge<U>[] | ((: Edge<U>[]) => Edge<U>[])) => void
通过用新数组覆盖它或通过传入一个函数来更新现有数组来将边数组设置为其他内容。如果使用函数,请确保返回一个新数组,而不是更改现有数组。调用此函数将在受控流中触发 onEdgesChange 处理程序。
#toObject
() => ReactFlowJsonObject<T, U>
此函数返回当前 React Flow 图的 JSON 表示形式。
#deleteElements
DeleteElements
#updateNode
(id: string, nodeUpdate: Partial<NodeType> | ((节点: NodeType) => Partial<NodeType>), 选项?: { 替换: boolean }) => void
#updateNodeData
(id: string, dataUpdate: Partial<NodeType['数据']> | ((: NodeType) => Partial<NodeType['数据']>), 选项?: { 替换: boolean }) => void
#updateEdge
(id: string, edgeUpdate: Partial<EdgeType> | ((节点: EdgeType) => Partial<EdgeType>), 选项?: { 替换: boolean }) => void
#updateEdgeData
(id: string, dataUpdate: Partial<EdgeType['数据']> | ((: EdgeType) => Partial<EdgeType['数据']>), 选项?: { 替换: boolean }) => void
#getHandleConnections
({ 类型, nodeId, id }: { 类型: HandleType, nodeId: string, id?: string | null }) => HandleConnection[]
获取属于特定节点的句柄的所有连接。类型参数可以是 'source' 或 'target'。
#getNodesBounds
(节点: (NodeType | InternalNode | string)[]) => Rect
返回给定节点或节点 ID 的边界。

交叉点

#getIntersectingNodes
(节点: (Partial<Node<T>> & { id: Node["id"] }) | Rect, 部分?: boolean, 节点?: Node<T>[]) => Node<T>[]
找到所有当前与给定节点或矩形相交的节点。partially 参数可以设置为 true 以包含仅部分相交的节点。
#isNodeIntersecting
(节点: (Partial<Node<T>> & { id: Node["id"] }) | Rect, 区域: Rect, 部分?: boolean) => boolean
确定给定节点或矩形是否与另一个矩形相交。partially 参数可以设置为 true 以便即使节点仅部分相交也返回 true。

视窗字段

#viewportInitialized
boolean
React Flow 需要将视窗挂载到 DOM 并初始化其缩放和平移行为。此属性告诉您何时
#zoomIn
(选项?: { 持续时间: 数字; }) => void
#zoomOut
(选项?: { 持续时间: 数字; }) => void
#zoomTo
(缩放级别: 数字, 选项?: { 持续时间: 数字; }) => void
将视窗缩放至给定缩放级别。传入持续时间将使视窗动画到新的缩放级别。
#getZoom
() => 数字
获取视窗的当前缩放级别。
#setViewport
(视窗: Viewport, 选项?: { 持续时间: 数字; }) => void
#getViewport
() => Viewport
#fitView
(fitViewOptions?: FitViewOptions) => boolean
#setCenter
(x: 数字, y: 数字, 选项?: { 持续时间: 数字, 缩放: 数字; }) => void
将视窗居中在给定位置。传入持续时间将使视窗动画到新位置。
#fitBounds
(边界: Rect, 选项?: { 持续时间: 数字, 填充: 数字; }) => void
一个低级实用函数,用于将视窗调整到给定矩形。通过传入持续时间,视窗将从其当前位置动画到新位置。padding 选项可用于在边界周围添加空间。
#screenToFlowPosition
(位置: { x: 数字; y: 数字; }) => { x: 数字; y: 数字; }
使用此函数,您可以将屏幕像素位置转换为流位置。例如,它在实现从侧边栏拖放时很有用。
#flowToScreenPosition
(位置: { x: 数字; y: 数字; }) => { x: 数字; y: 数字; }
将流画布中的位置转换为屏幕像素位置。