インタラクティビティの追加

ノードとエッジを選択、ドラッグ、削除できるようにしましょう。

変更イベントの処理

まず、いくつかのものをインポートしましょう。React Flowでの変更を管理するために、React FlowからuseStateと2つのヘルパー関数applyEdgeChangesおよびapplyNodeChangesを使用します。

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

ノードとエッジの両方に状態を設定します。

const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);

その直下に、次の2つの関数を追加します。

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

ノードをドラッグまたは選択すると、onNodesChangeハンドラーが呼び出されます。applyNodeChanges関数の助けを借りて、これらの変更を現在のノード状態に適用できます。すべてをまとめると、次のようになります。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

アプリケーションを実行すると、コンポーネントをクリックしてドラッグできるようになり、それらの動きに基づいてUIが更新されます。

接続の処理

最後にもう1つ欠けているものがあります。それは、ノードを手動で接続することです。このためには、onConnectハンドラーを実装し、それを<ReactFlow />コンポーネントにも渡す必要があります。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

ハンドルから別のハンドルにドラッグして、2つのノードを接続してみてください。これで完了です。完全にインタラクティブなフローを構築しました。

今のところはこれで終わりです :) よくできました！次に進む場合は、「カスタムノード」ガイドを確認することをお勧めします。