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

【问题标题】：How to increase the edge drop zone using React Flow如何使用 React Flow 增加边缘下降区域
【发布时间】：2021-07-30 00:15:09
【问题描述】：

我正在使用 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;```

【问题讨论】：

这方面有什么更新吗？

标签： reactjs drag-and-drop nodes react-tsx

【解决方案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，但我发现这是完成它的方式。

【讨论】：

【解决方案2】：

在添加 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)}
  />

【讨论】：