React 流程图：在节点上的任意位置放置时连接 link

Question

我一直在使用 npm 包 react-flow-chart，我现在可以使用拖放在节点之间创建 links。

问题是：我必须将 link 准确地放在端口上在我的例子中，我总是在每个节点上都有一个输入端口，是否可以连接 link，即使我将 link 放在目标节点上的任何位置，（不完全在港口）

看图，如果我将 link 从源节点放在目标节点上的任何位置，我仍然可以连接 link 是否有可能？假设输入 portId 是静态的，例如取 portId = "in"

Answer 1

自己找到了解决方案，

onLinkCancel 事件，我得到 link 的放置位置我可以检查这个位置是否落在任何节点内，使用节点位置，它们的高度和宽度!!

onLinkCancel: ({linkId, toPosition, fromNodeId, fromPortId}) => chartObj => { 
    for (let node of <nodes array>) {
        if (toPosition.x >= node.position.x && node.size && toPosition.x <= (node.position.x + node.size.width) && toPosition.y >= node.position.y && toPosition.y <= (node.position.y + node.size.height) ) { 
targetNodeId = node.id; 
        } 
    } 
}

React 流程图：在节点上的任意位置放置时连接 link

React Flow Chart: Connect link when drop anywhere on node

javascript

reactjs

react-chartjs