重新连接边缘

如果你使用 onReconnect 处理程序 prop，可以通过将边拖动到另一个句柄来重新连接边。当边缘被放到新句柄后，处理程序会被调用。你可以使用 reconnectEdge 辅助函数相应地更新边状态。

¥An edge is reconnectable by dragging it to another handle if you are using the onReconnect handler prop. The handler gets called after the edge gets dropped to a new handle. You can use the reconnectEdge helper function to update your edges state accordingly.


import React, { useCallback } from 'react';
import {
  ReactFlow,
  Background,
  useNodesState,
  useEdgesState,
  Controls,
  reconnectEdge,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
 
const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: {
      label: (
        <>
          Node <strong>A</strong>
        </>
      ),
    },
    position: { x: 250, y: 0 },
  },
  {
    id: '2',
    data: {
      label: (
        <>
          Node <strong>B</strong>
        </>
      ),
    },
    position: { x: 75, y: 0 },
  },
  {
    id: '3',
    data: {
      label: (
        <>
          Node <strong>C</strong>
        </>
      ),
    },
    position: { x: 400, y: 100 },
    style: {
      background: '#D6D5E6',
      color: '#333',
      width: 180,
    },
  },
  {
    id: '4',
    data: {
      label: (
        <>
          Node <strong>D</strong>
        </>
      ),
    },
    position: { x: -75, y: 100 },
  },
  {
    id: '5',
    data: {
      label: (
        <>
          Node <strong>E</strong>
        </>
      ),
    },
    position: { x: 150, y: 100 },
  },
  {
    id: '6',
    data: {
      label: (
        <>
          Node <strong>F</strong>
        </>
      ),
    },
    position: { x: 150, y: 250 },
  },
];
 
const initialEdges = [
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    label: 'This edge can only be updated from source',
    reconnectable: 'source',
  },
  {
    id: 'e2-4',
    source: '2',
    target: '4',
    label: 'This edge can only be updated from target',
    reconnectable: 'target',
  },
  {
    id: 'e5-6',
    source: '5',
    target: '6',
    label: 'This edge can be updated from both sides',
  },
];
 
const EdgeReconnect = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  // gets called after end of edge gets dragged to another source or target
  const onReconnect = useCallback(
    (oldEdge, newConnection) =>
      setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((els) => addEdge(params, els)),
    [],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      snapToGrid
      onReconnect={onReconnect}
      onConnect={onConnect}
      fitView
      attributionPosition="top-right"
      style={{ backgroundColor: "#F7F9FB" }}
      >
        <Controls />
        <Background />
      </ReactFlow>
  );
};
 
export default EdgeReconnect;

几个属性相互作用以确定边缘是否可更新：

¥A couple of properties interact with one another to determine whether an edge is updatable or not:

默认情况下，edgesReconnectable 设置为 true。

¥By default the edgesReconnectable is set to true.
但是，为了使边真正可拖动，还需要定义一个 onReconnect 处理程序。

¥For edges to actually be draggable, though, it is also necessary to define a onReconnect handler.
各个边可以通过设置其 updatable 属性来优化或覆盖 edgesReconnectable 属性。

¥Individual edges can refine or override the edgesReconnectable prop by setting their updatable property.
- true 表示即使 edgesReconnectable，边也是可更新的
  
  ¥true means the edge is updatable even if edgesReconnectable
- "source" 或 "target" 表示无论 edgesReconnectable 属性如何，边缘都只能从源或目标句柄更新。
  
  ¥"source" or "target" means the edge is updatable only from the source or target handle regardless of the edgesReconnectable prop.
- false 表示即使 edgesReconnectable 设置为 true，边也是不可更新的。
  
  ¥false means the edge is not updatable even if edgesReconnectable is set to true.