Connectors annotations over each other

[Gabo EE]

Hello is there any setting to restrict annotation overlaping with other nodes/connectors annotations? 

Attachment: chrome_Qri3EFpk47_31f7cb1e.zip

[Aravind Ravi]

Hi Gabo,

Yes, it is possible to avoid overlapping of annotations with other node or connector annotations by using annotations ‘offset’ property. The offset property of annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. Please find below code snippet for how to set annotations offset 

 

public connectors: ConnectorModel[] = [ 

    { 

      id: 'connector1', sourceID: 'node1', targetID: 'node2', annotations: [{ content: 'NewPort', offset: 0.2}] 

    }, 

    { 

      id: 'connector2',  sourceID: 'node1', targetID: 'node3', annotations: [{ content: 'NewPort2', offset: 0.5}] 

    } 

  ] 

 

For more information about annotation’s offset property. Please refer to below help documentation link 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/diagram/labels/#offset 

 

Regards 

Aravind Ravi 

[Gabo EE]

This won't resolve my problem, because I have a lot of diagrams genereated programmatically, so I need this offsets to be set automaticaly. 

Is there any option, so ejs can set offsets automaticaly?

[Gowtham Gunashekar]

Hi Gabo, 

 

we don't have support to automatically align the overlapping annotations. By using the annotation’s offset property only, you can avoid the overlapping of annotations. Automatic alignment of the overlapping annotation is not a valid scenario. 

 

Regards, 

Gowtham G 

[Gabo EE]

Can you add this as feature request?

[Aravind Ravi]

Hi Gabo,

Automatic alignment of overlapping annotations feature will impact the performance of the control heavily, so we don't have any plans to include this feature in our control. 

 

Regards 

Aravind Ravi 

[Mohammed Danish]

Hi Aravind,

Can we any how find all the overlapping objects in the diagram??

Thankss,

Danish Merchant

[Aravind Ravi]

Hi Danish, 

 

We do not have support to find the overlapping objects in the diagram. However, we have support to avoid the overlapping of connectors with diagram. By using the LineRouting constraints we can able to avoid the overlapping of nodes with connectors in the diagram. We have already prepared a sample in our live demos for line routing. Please find the sample in below link 

 

Sample: https://ej2.syncfusion.com/angular/demos/#/material/diagram/line-routing 

 

Regards 

Aravind Ravi