How can I prevent of intersecting items by lines?

[Behnam Norouzi]

Hi,
I need a method to stop intersecting item by the lines.
i would appreciate it if someone help.
Best Regards,
Behnam

[Balasubramanian Manikandan]

We are unable to see the image that you attached in the response. Could you please share a clear image once again for further validation? Referring to the below-attached image, at our end, it appears like this.

[Behnam Norouzi]

my apologize, I shared the image again.

best Regards,
Behnam 

Attachment: diaggram_6f5c1fbf.zip

[Balasubramanian Manikandan]

You can use port to prevent the intersecting of items by connecting the connector to specific point on the node. When a connector is connected between two nodes, its end points are automatically docked to the node’s nearest boundary so we suggest you to use our Port feature to avoid intersection of lines. Refer to the below-documentation.

Documentation

https://ej2.syncfusion.com/angular/documentation/diagram/ports#create-port

[Behnam Norouzi]

My means is that I do not want the line crosses the other object, I would like them to go through beside the object.

[Balasubramanian Manikandan]

We generate a sample by resolving the node overlap through ports. Please refer to the sample below.

Sample

https://stackblitz.com/edit/angular-visutz-gx6jbr?file=src%2Fapp.component.ts,src%2Fapp.component.html

[Behnam Norouzi]

unfortunately, still, lines cross the objects

[Balasubramanian Manikandan]

Apply LineRouting to resolve your issue. This will prevent the connectors from overlapping the nodes. In the provided sample, we enabled the line routing constraints and injected lineRouting module. Please refer to the example code, documentation, and resources below for more information sample.

Code Snippet

   public constraints: DiagramConstraints;

    ngOnInit(): void {

        this.constraints = DiagramConstraints.Default | (DiagramConstraints.Bridging | DiagramConstraints.LineRouting);

    }

Documentation

https://ej2.syncfusion.com/angular/documentation/diagram/connectors#automatic-line-routing

Sample

https://stackblitz.com/edit/angular-visutz-kskt2r?file=src%2Fapp.component.html