节点碰撞

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

¥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 .

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

¥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;