添加交互性

添加导入

¥Add imports

为了管理变更，我们将使用 useState 和 React Flow 中的两个辅助函数：applyNodeChanges 和 applyEdgeChanges。因此，让我们导入以下函数：

¥To manage changes, we’ll be using useState with two helper functions from React Flow: applyNodeChanges and applyEdgeChanges. So let’s import these functions:

import { useState, useCallback } from 'react';
import { ReactFlow, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';

定义节点和边缘

¥Define nodes and edges

我们需要定义初始节点和边。这些将是我们流程的起点。

¥We need to define initial nodes and edges. These will be the starting point for our flow.

const initialNodes = [
  {
    id: 'n1',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
];
 
const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
  },
];

初始化状态

¥Initialize state

在我们的组件中，我们将调用 useState 钩子来管理节点和边的状态：

¥In our component, we’ll call the useState hook to manage the state of our nodes and edges:

export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

添加事件处理程序

¥Add event handlers

我们需要创建两个事件处理程序：onNodesChange 和 onEdgesChange。当发生变化（例如拖动或删除元素）时，它们将用于更新节点和边的状态。请继续将这些处理程序添加到你的组件中：

¥We need to create two event handlers: onNodesChange and onEdgesChange. They will be used to update the state of our nodes and edges when changes occur, such as dragging or deleting an element. Go ahead and add these handlers to your component:

const onNodesChange = useCallback(
  (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
  [],
);
const onEdgesChange = useCallback(
  (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
  [],
);

将它们传递给 ReactFlow

¥Pass them to ReactFlow

现在我们可以将节点、边和事件处理程序传递给 <ReactFlow /> 组件：

¥Now we can pass our nodes, edges, and event handlers to the <ReactFlow /> component:

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  fitView
>
  <Background />
  <Controls />
</ReactFlow>

交互式流程

¥Interactive flow

就是这样！现在你有了一个基本的交互式流程 🎉

¥And that’s it! You now have a basic interactive flow 🎉

当你拖动或选择一个节点时，会触发 onNodesChange 处理程序。applyNodeChanges 函数随后使用这些更改事件来更新节点的当前状态。以下是它们是如何组合在一起的。尝试点击并拖动节点来移动它，并实时观察 UI 更新。

¥When you drag or select a node, the onNodesChange handler is triggered. The applyNodeChanges function then uses these change events to update the current state of your nodes. Here’s how it all comes together. Try clicking and dragging a node to move it around and watch the UI update in real time.

创建 onConnect 处理程序

¥Create onConnect handler

每当两个节点之间建立新连接时，都会调用 onConnect 处理程序。我们可以使用 addEdge 实用函数创建新边并更新边数组。

¥The onConnect handler is called whenever a new connection is made between two nodes. We can use the addEdge utility function to create a new edge and update the edge Array.

const onConnect = useCallback(
  (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
  [],
);

传递给 ReactFlow

¥Pass it to ReactFlow

现在我们可以将 onConnect 处理程序传递给 <ReactFlow /> 组件：

¥Now we can pass the onConnect handler to the <ReactFlow /> component:

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  fitView
>
  <Background />
  <Controls />
</ReactFlow>

可连接流程

¥Connectable flow

尝试通过将一个句柄拖到另一个句柄来连接两个节点。onConnect 处理程序将被触发，新的边将添加到流中。🥳

¥Try to connect the two nodes by dragging from on handle to another one. The onConnect handler will be triggered, and the new edge will be added to the flow. 🥳