接続イベント

React Flowは、接続プロセスの間に、UIまたはフローをさまざまな方法で更新するために使用できるさまざまなイベントを発行します。以下の例では、どのイベントがいつ発生するかを示しています。

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

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

ハンドルからドラッグして作成された**新しい接続**の場合、次のイベントが順に呼び出されます。

• onConnectStartは、マウスイベントと、ソースノード、ソースハンドルID（存在する場合）、ハンドルタイプを含むオブジェクトを使用して呼び出されます。

• onConnectは、接続可能なハンドルで接続が解除された場合にのみ呼び出されます。ソースノードとターゲットノード、および存在する場合はソースハンドルIDとターゲットハンドルIDを含む完全な接続オブジェクトを使用して呼び出されます。

• onConnectEndは、接続が成功したかどうかに関係なく、接続が解除されると呼び出されます。マウスイベントを使用して呼び出されます。

既存のエッジをドラッグしてエッジを**再接続**する場合、次のイベントが順に呼び出されます。

• onReconnectStartは、再接続可能なエッジが選択されると呼び出されます。マウスイベント、再接続されているエッジオブジェクト、および安定したハンドルのタイプを使用して呼び出されます。

• onConnectStartは上記のように呼び出されます。

• onReconnectは、エッジが再接続可能なハンドルで解除されると呼び出されます。古いエッジオブジェクトと新しい接続オブジェクトを使用して呼び出されます。

• onConnectEndは上記のように呼び出されます。

• onReconnectEndは、再接続が成功したかどうかに関係なく、エッジが解除されると呼び出されます。マウスイベント、選択されたエッジ、および安定したハンドルのタイプを使用して呼び出されます。