临时边缘

在 React Flow 中，几乎所有东西都是围绕节点和边缘的概念构建的。边是节点之间的连接，但如果我们想创建仅连接到一个节点的边怎么办？如果 “edge” 根本没有连接到任何节点怎么办？

¥In React Flow, almost everything is built around the concepts of nodes and edges. Edges are the connections between nodes, but what if we want to create an edge that is only connected to one node? What about an “edge” not connected to any nodes at all?

此示例展示了当用户释放连接线而不建立连接时如何创建 “incomplete” 边。在释放连接线的位置渲染幽灵节点，并将临时边缘添加到流中。利用可编辑边，用户可以重新拾起边并完成连接，此时幽灵节点被删除！

¥This example shows how to create an “incomplete” edge when a user releases a connection line without making a connection. A ghost node is rendered where the connection line was released, and a temporary edge is added to the flow. Making use of editable edges, the user can pick the edge back up and complete the connection at which point the ghost node is removed!

import {
  Background,
  ReactFlow,
  ReactFlowProvider,
  useNodesState,
  useEdgesState,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
 
import { GhostNode, useIncompleteEdge } from './useIncompleteEdge';
 
const nodeTypes = {
  ghost: GhostNode,
};
 
const initialNodes = [
  { id: '0', type: 'input', data: { label: 'A' }, position: { x: 0, y: -100 } },
  { id: '1', type: 'output', data: { label: 'B' }, position: { x: 0, y: 100 } },
];
 
const IncompleteEdge = () => {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
  const handlers = useIncompleteEdge();
 
  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
      {...handlers}
      style={{ backgroundColor: "#F7F9FB" }}
      >
        <Background />
      </ReactFlow>  
  );
};
 
export default () => (
  <ReactFlowProvider>
    <IncompleteEdge />
  </ReactFlowProvider>
);

我们定义了一个 useIncompleteEdge 钩子，它封装了创建和管理 “幽灵节点” 的逻辑。它返回许多旨在传递给 <ReactFlow /> 组件的事件处理程序。

¥We’ve defined a useIncompleteEdge hook that encapsulates the logic for creating and managing a “ghost node”. It returns a number of event handlers intended to be passed to the <ReactFlow /> component.

• 当完成连接时，会调用 onConnect。

  ¥onConnect is called when a complete connection is made.

• 当用户释放连接线时，会调用 onConnectEnd。第二个 connectionState 参数可用于确定连接是否成功以及从哪里开始（如果连接有效，则从哪里结束）。此回调创建一个幽灵节点和一个从 connectionState.fromNode.id 到该幽灵节点的临时边。临时边被标记为 reconnectable，以便用户可以将其取回并完成连接。

  ¥onConnectEnd is called when the user releases a connection line. The second connectionState param can be used to determine if the connection was successful or not and where it started (and ended if the connection is valid). This callback creates a ghost node and a temporary edge from the connectionState.fromNode.id to that ghost node. The temporary edge is marked as reconnectable so that the user can pick it back up and complete the connection.

• 当完成重新连接时，会调用 onReconnect。

  ¥onReconnect is called when a complete reconnection is made.

• 当用户释放重新连接线时，会调用 onReconnectEnd。此回调删除幽灵节点和临时边。调用 onConnectEnd 时可能会添加一个新的节点类型。

  ¥onReconnectEnd is called when the user releases a reconnection line. This callback removes the ghost node and temporary edge. A new one may be added back when onConnectEnd is called.