Edge Intersection

This example shows how you can detect an intersection between a dragged node and an edge.

The default interactionWidth of the edges is set to 75 via the defaultEdgeOptions. We set a wider interaction area so that we can easily find the edge and node intersections.


import { createRoot } from 'react-dom/client';
import App from './App';
 
import { ReactFlowProvider } from '@xyflow/react';
 
const container = document.querySelector('#app');
const root = createRoot(container);
 
root.render(
  <ReactFlowProvider>
    <App />
  </ReactFlowProvider>,
);