Avoid Overlap of Connectors

[Ryan Dunn]

The default functionality when there are two connections in either direction between two nodes is the following:

We would prefer it to look like the following:

We are using the syncfusion diagam for a state diagram and this will be much clearer to our users. How can this be accomplished?

Thanks,

Ryan

[Gowtham Gunashekar]

Hi Ryan, 

 

We suggest you to use port to achieve you requirement, we have added a sample link to demonstrate how to use port to render connector at separate position. 

 

Sample link: https://stackblitz.com/edit/angular-nbokej-zztw5m?file=app.component.ts 

 

Regards,    

Gowtham   

[Ryan Dunn]

This doesn't quit solve our problem we are using the diagram as an editor so users need to be able to draw the connections and there can be an arbitrary number of connections between nodes.

Thanks

Ryan

[Gowtham Gunashekar]

Hi Ryan,    

 

Currently we don’t  support to avoid connector overlapping in our diagram control. We have logged “Automatic port creation” as a feature. We does not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.    

 

 You can track the feature status from the below link 

 

 Link:  https://www.syncfusion.com/feedback/23253/automatic-port-creation 

 

We are closing this incident now. You can also communicate with us regarding the open features any time using the “Contact” option. 

 

Regards, 

Gowtham 

  

[Vaseegaran Chinnathambi]

Hi Ryan,

We’re pleased to inform you that the “Automatic Port Creation” feature has now been implemented and is now available in the latest version of our diagram control(v30.1.41). This enhancement helps address connector overlapping scenarios by enabling automatic port generation.

Please refer to the UG documentation for more information about the usability feature.

Documentation: Ports interaction in Angular Diagram component | Syncfusion®

Regards,

Vaseegaran