Let's say that we have created two nodes and they are connected by their assigned targetOption and sourceOption anchors - for the sourceOption having anchor: 'BottomCenter' and targetOption having anchor: 'TopCenter'. This would be the result.
However, is there a way that the anchors will be updated relative to the nearest possible position of the two nodes?
The targetOption and sourceOption anchors are fixed as to what they are declared earlier. If I drag them beside each other, the connectors don't look really well. Take a look here.
It would be great if the sourceOption becomes anchor: Right and targetOption becomes anchor:Left, since they are both beside each other.
jsPlumb allows to set dynamic anchors. You can provide an array of anchors to the anchor property when you make your connection. See below code for your use case :
anchor: ["Top", "Bottom", "Left", "Right"]
Please refer to official documentation for more options.