一時的なエッジ

React Flowでは、ほぼすべてがノードとエッジの概念に基づいて構築されています。エッジはノード間の接続ですが、ノードに1つしか接続されていないエッジを作成したい場合はどうでしょうか？ノードにまったく接続されていない「エッジ」はどうでしょうか？

この例では、ユーザーが接続線を作成せずに接続を解除したときに、「不完全な」エッジを作成する方法を示します。接続線が解放された場所にゴーストノードがレンダリングされ、一時的なエッジがフローに追加されます。編集可能なエッジを利用することで、ユーザーはエッジを再び拾い上げ、接続を完了することができます。その時点でゴーストノードは削除されます！

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

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

「ゴーストノード」の作成と管理のロジックをカプセル化するuseIncompleteEdgeフックを定義しました。これは、<ReactFlow />コンポーネントに渡すことを目的とした、いくつかのイベントハンドラーを返します。

• onConnectは、完全な接続が確立されたときに呼び出されます。

• onConnectEndは、ユーザーが接続線を解放したときに呼び出されます。2番目のconnectionStateパラメーターを使用して、接続が成功したかどうか、および接続が開始された場所（接続が有効な場合は終了場所）を判断できます。このコールバックは、connectionState.fromNode.idからそのゴーストノードへのゴーストノードと一時的なエッジを作成します。一時的なエッジはreconnectableとしてマークされているため、ユーザーはそれを拾い上げて接続を完了することができます。

• onReconnectは、完全な再接続が確立されたときに呼び出されます。

• onReconnectEndは、ユーザーが再接続線を解放したときに呼び出されます。このコールバックは、ゴーストノードと一時的なエッジを削除します。onConnectEndが呼び出されると、新しいものが追加される可能性があります。