React Flow Chart: Connect link when drop anywhere on node

user_8733427 0
Viewed 1560

I have been using npm package react-flow-chart, I can now create links between nodes using drag and drop.

The issue is: I have to drop the link exactly on the port In my case, I will always have a single input port on every node, Is it possible to connect the link, even if I drop link anywhere on the target node, (not exactly on the port)

enter image description here

Look at the image, Is it possible if I drop the link from source node anywhere on the target node and still I can connect the link. Let's say the input portId will be static, For Instance take portId = "in"

react-chartjs reactjs javascript
1 Answers

Found a solution myself,

onLinkCancel event, I get the drop location of link I can check whether this position falls inside any node, using node positions, their height and width !!

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