Reconnecting element's connection line overlapping other elements

I have flow like this. There are 2 diagonal elements that are connected.

I use

modeling.connect(source, target);

but the last element of first row, and the first element of second row, connects in different way. The connection line is behind the other elements, i drew red circles over the connection line.

How can I fix this? it should not overlap any other element.

@philippfromme any help please?

image

Hi @Code_Guru ,

can you share more about your Project? It seems to build upon diagram-js.
In that case, you can extend your renderer to handle Connections (instead of the default) and always draw them on top.
We do the same in bpmn-js, cf. Render sequence flows always on top by nikku · Pull Request #1717 · bpmn-io/bpmn-js · GitHub

i am using bpmn-js… i just customized the look and feel of component

Probably related to Arrow starting point position is fixed to certain width height - #8 by philippfromme.