如何使用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>;
}

我认为这有点老生常谈，但这就是我找到的完成它的方式。

Answer 2

根据列奥纳多的建议添加宽度和高度，我添加了一个类，这也适用于我。背景，边框等是可选的可能性，根据您的需要。

我不得不添加！重要的，因为它不会覆盖默认设置。

.node-custom-handle {

  width: 15px!important;
  height: 15px!important;

  background: whitesmoke!important;
  border: 1px solid black!important;
  border-radius: 4px!important;
}

<Handle
    type="target"
    position="top"
    id="t"
    className="node-custom-handle"
    onConnect={(params) => console.log("handle onConnect", params)}
  />