Connectors annotations over each other

Question

Hello is there any setting to restrict annotation overlaping with other nodes/connectors annotations? Attachment: chrome_Qri3EFpk47_31f7cb1e.zip

Aravind Ravi · Answer

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 · Answer

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 · Answer

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 · Answer

Can you add this as feature request?

Aravind Ravi · Answer

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 · Answer

Hi Aravind,Can we any how find all the overlapping objects in the diagram??Thankss,Danish Merchant

Aravind Ravi · Answer

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