节点碰撞

此示例演示了如何自动解决节点重叠。当节点放置得太近或重叠时，算法会检测这些碰撞并将节点移开，以保持视觉清晰度。

🌐 This example demonstrates how to automatically resolve node overlaps. When nodes are placed too close together or overlap, the algorithm detects these collisions and moves the nodes apart to maintain visual clarity.

想深入了解碰撞检测算法，请查看我们的关于节点碰撞的博客文章。

🌐 For a deep dive into collision detection algorithms check out our blog post on node collisions .

我们还创建了一个基准来比较不同方法的性能，你可以在试玩场中看到它们的实际效果。

🌐 We also created a benchmark to compare the performance of different approaches and you can see them in action in the playground .


import { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  MiniMap,
  Controls,
  Background,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
import { initialEdges, initialNodes } from './nodes-and-edges';
import { resolveCollisions } from './resolve-collisions';
 
function ExampleFlow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
 
  const onNodeDragStop = useCallback(() => {
    setNodes((nds) =>
      resolveCollisions(nds, {
        maxIterations: Infinity,
        overlapThreshold: 0.5,
        margin: 15,
      }),
    );
  }, [setNodes]);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onNodeDragStop={onNodeDragStop}
      minZoom={0}
      fitView
    >
      <Background />
      <MiniMap />
      <Controls />
    </ReactFlow>
  );
}
 
export default ExampleFlow;