reactjs - 如何使用 React Flow 增加边缘下降区

Question

我正在使用 react-flow 创建节点图。每个节点的上方和下方都会出现一些小点以创建新的边。这些边缘的选择区和拖放区的像素精度非常高，以至于用户很难链接项目。有什么办法可以增加连接区？我希望用户能够将边拖动到节点上的任何位置，并将两者链接在一起。

import ReactFlow, { removeElements, addEdge, isNode, Background, Elements, BackgroundVariant, FlowElement, Node, Edge, Connection, OnLoadParams } from 'react-flow-renderer';

const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => 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 = () =>
{
    const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
    const [elements, setElements] = useState<Elements>(initialElements);
    const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
    const onConnect = (params: Edge | Connection) => setElements((els) => addEdge(params, els));
    const onLoad = (reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance);

    return (
        <ReactFlow
            elements={elements}
            onLoad={onLoad}
            onElementClick={onElementClick}
            onElementsRemove={onElementsRemove}
            onConnect={onConnect}
            onNodeDragStop={onNodeDragStop}
        >
            <Background variant={BackgroundVariant.Lines} />
        </ReactFlow>
    );
};

export default BasicFlow;```

Answer 1

我这样做是通过一个带有自己的句柄的自定义节点:

const NODE_TYPES = {
  yourType: CustomNode,
};

...
<ReactFlow
  nodeTypes={NODE_TYPES}
  ... 
/>

然后，在 CustomNode ，我用了 Handle具有自定义高度和宽度的组件:

import { Handle, Position } from 'react-flow-renderer';

const CustomNode = (...) => {
  ...
  return <Box>
    ...
    <Handle
      type="target"
      position={Position.Left}
      style={{ // Make the handle invisible and increase the touch area
        background: 'transparent',
        zIndex: 999,
        border: 'none',
        width: '20px',
        height: '20px',
      }}
    />
    <CircleIcon
      style={{}} // Fix the position of the icon over here
    />
  </Box>;
}

我认为它有点hacky，但这是我找到的方法来完成它。