title: How to increase the edge drop zone using React Flow
body: <p>I am using react-flow to create a node graph. There are little dots that appear above and below each node to create new edges. The selection and drop zones for these edges are so pixel accurate that it makes it hard for users to link items. Is there any way to increase the connection zone? I want users to be able to drag an edge to anywhere on the node and it will link the two together.</p>
  <pre><code>import ReactFlow, { removeElements, addEdge, isNode, Background, Elements, BackgroundVariant, FlowElement, Node, Edge, Connection, OnLoadParams } from 'react-flow-renderer';
  
  const onNodeDragStop = (_: MouseEvent, node: Node) =&gt; console.log('drag stop', node);
  const onElementClick = (_: MouseEvent, element: FlowElement) =&gt; console.log('click', element);
  
  const initialElements: Elements = [
      { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
      { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
      { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
      { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
      { id: 'e1-2', source: '1', target: '2', animated: true },
  ];
  
  const BasicFlow = () =&gt;
  {
      const [rfInstance, setRfInstance] = useState&lt;OnLoadParams | null&gt;(null);
      const [elements, setElements] = useState&lt;Elements&gt;(initialElements);
      const onElementsRemove = (elementsToRemove: Elements) =&gt; setElements((els) =&gt; removeElements(elementsToRemove, els));
      const onConnect = (params: Edge | Connection) =&gt; setElements((els) =&gt; addEdge(params, els));
      const onLoad = (reactFlowInstance: OnLoadParams) =&gt; setRfInstance(reactFlowInstance);
  
      return (
          &lt;ReactFlow
              elements={elements}
              onLoad={onLoad}
              onElementClick={onElementClick}
              onElementsRemove={onElementsRemove}
              onConnect={onConnect}
              onNodeDragStop={onNodeDragStop}
          &gt;
              &lt;Background variant={BackgroundVariant.Lines} /&gt;
          &lt;/ReactFlow&gt;
      );
  };
  
  export default BasicFlow;```
  </code></pre>