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

如何解决如何使用 React Flow 增加边缘下降区

我正在使用 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 },{ id: '3',data: { label: 'Node 3' },position: { x: 400,{ id: '4',data: { label: 'Node 4' },y: 200 },{ 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;```

解决方法

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

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

我认为它有点老套，但这是我找到的方法。

,

根据添加 Leonardo 建议的宽度和高度，我添加了一个类，这对我也有效。根据您的需要，背景、边框等是可选的。

我必须添加 !important，否则它不会覆盖默认设置。

.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)}
  />