Drawing lines between nodes from a separate (not common point)

Hello,

We are using SfDiagram for presenting one to many relations (from one main to many other secondary nodes). However, all connectors from the main node overlap in the starting point. Do you have any suggestions how to do this if supported "out of the box", or it has to be done programatically?
What we look for is to be able to draw a line from any side of our rectangular shape, and when from the same side not to overlap, i.e.:

Something like this:                                Instead of this:

                

Thank you,
Biljana

5 Replies 1 reply marked as answer

RA Ranjitha Amirthalingam Syncfusion Team July 22, 2020 07:14 AM UTC

Hi Biljana, 
 
Requirement: Need to avoid connector overlapping while creating multiple connections from and to the node.  
  
We can’t avoid connector overlapping while creating multiple connectors from node. Because whenever we create connection from and to the node, SourcePoint and TargetPoint of the connector will always be at perpendicular axis of node’s center. So, we can achieve this only through Port support (DockPort). Please refer the below link for details. 
 
 
If you don’t want to use dockport, you can create nodeport dynamically by clicking and dragging the mouse over any node 
  
For more information about automatic-port creation, please visit our online help documentation.   
 
 
Regards, 
Ranjitha A. 



BI Biljana September 29, 2020 04:45 PM UTC

Hello,

Thank you. We are using  DockPorts to avoid overlapping.

In our project once the line is drawn between two nodes is not detachable i.e. it can only be deleted.

However, when one of the nodes in the relation is moved around we need the line(s) to dynamically reposition to the closest edge of the node accordingly its position, as it works for NodePorts.

I am not sure if this is possible with DockPort or there is a way to achieve it? 

Thank you,



RA Ranjitha Amirthalingam Syncfusion Team September 30, 2020 02:39 PM UTC

Hi Biljana, 
 
Please find the response as below. 
 
S.No 
Query 
Response 
1 
In our project once the line is drawn between two nodes is not detachable i.e. it can only be deleted. 
We assume that the reported issue is unable to disconnect and reconnect the connector thumbs from the node. Could you please confirm us our assumption is correct. If not , please elaborate the scenario in detail like providing screenshot or video about the issue. 
2 
However, when one of the nodes in the relation is moved around we need the line(s) to dynamically reposition to the closest edge of the node accordingly its position, as it works for NodePorts. 
 
I am not sure if this is possible with DockPort or there is a way to achieve it?  
 
Dockport does not have feasibility to achieve your requirement. It has fixed positions which cannot be repositioned to the edges of the node at runtime. 
 
Could you please elaborate us what is the exact scenario you are trying to achieve?  
This helps us to serve you better.  
 
 
 
 
Regards, 
Ranjitha A. 



BI Biljana September 30, 2020 07:36 PM UTC

Hi,

Q1: Actually, we made the line not detachable intentionally, its not an issue.
Q2: What we need is this. If I have two nodes with a line from right-left sides:



when the green node is dragged down, the connection points need to change automatically:



so that the line now is connected to the green node "from up"
Is there other way to achieve this? Or do you plan to support it with DockPort in future?

Or if not automatically, we were thinking that the user can change the connection point himself, but only to another edge of the same node (anywhere else outside is forbidden)

Thank you,



RA Ranjitha Amirthalingam Syncfusion Team October 1, 2020 02:32 PM UTC

Hi Biljana, 
 
Requirement: Connector should not overlap as well as connector repositioned to the nearest edges of the node while dragging. 
 
As updated earlier , Dockport does not have feasibility to achieve your requirement. Your requirement can be achieved through AutomaticPort support. We have provided video and sample to represent this. Please refer to the video and sample from the following link. 
 
 
 
 
 
Regards, 
Ranjitha A. 


Marked as answer
Loader.
Up arrow icon