臨時邊緣

在 React Flow 中，幾乎所有內容都圍繞著節點和邊緣的概念建構。邊緣是節點之間的連接，但如果我們想建立一個僅連接到一個節點的邊緣呢？或者一個根本沒有連接到任何節點的「邊緣」呢？

這個範例展示了當使用者在沒有建立連接的情況下釋放連接線時，如何建立一個「不完整」的邊緣。一個虛擬節點會在連接線釋放的位置渲染，並且一個臨時邊緣會被新增到流程中。利用可編輯的邊緣，使用者可以重新拿起邊緣並完成連接，此時虛擬節點會被移除！

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

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

我們定義了一個 useIncompleteEdge Hook，它封裝了建立和管理「虛擬節點」的邏輯。它會返回許多旨在傳遞給 <ReactFlow /> 元件的事件處理程式。

• 當建立完整的連接時，會呼叫onConnect。

• 當使用者釋放連接線時，會呼叫 onConnectEnd。第二個 connectionState 參數可用於判斷連接是否成功，以及它的起點（如果連接有效，則還有終點）。此回呼會建立一個虛擬節點和一個從 connectionState.fromNode.id 到該虛擬節點的臨時邊緣。臨時邊緣會被標記為 reconnectable，以便使用者可以重新拿起它並完成連接。

• 當建立完整的重新連接時，會呼叫onReconnect。

• 當使用者釋放重新連接線時，會呼叫onReconnectEnd。此回呼會移除虛擬節點和臨時邊緣。當呼叫 onConnectEnd 時，可能會重新新增一個。