🐛 [BUG]: If two nodes point to each other the labels of the edges overlapping about vue-flow HOT 5 CLOSED

Alas, this is not a bug but expected to happen since both labels use the same position.
You’ll have to either use different edges with non overlapping paths or offer labels if they overlap.
There’s not a built in solution for this sorry

from vue-flow.

Alas, this is not a bug but expected to happen since both labels use the same position. You’ll have to either use different edges with non overlapping paths or offer labels if they overlap. There’s not a built in solution for this sorry

Understood. Thanks.

from vue-flow.

@mwessendorf Sorry I have to disappoint you about a built-in helper or sth and sorry that my response was a little short; I responded from my phone 😅.

To expand a bit on this - the default edge labels (meaning edge.label) will always be rendered at the center position.
So if two edges follow the same path or a path that would make their centers cross, the labels will, by default, inadvertently overlap. There's really no way around it unless you modify your handles in a way that edges don't overlap/cross.

If you're using a custom edge, you can use the EdgeLabelRenderer to place a label as a div on an edge.
This EdgeLabelRenderer needs you to apply some styles for the label to be centered, like transform.
The transformation is given an X and Y position so that the label gets centered, these positions are (usually) taken from the utils like getBezierPath -> const [path, centerX, centerY] = getBezierPath(params).
But in this case you have the option of just offsetting these center positions by whatever you deem adequate so that the labels do not overlap anymore.

Again, there's no built-in mechanism that would catch this overlap and reposition edges but you can build this sort of logic yourself.

from vue-flow.

You can find an example of how to use the EdgeLabelRenderer here.
Just open up the file CustomEdge.vue and check the template :)

from vue-flow.

@bcakmakoglu Many thanks for explanation. That helps a lot. Will dive in there again and play with the positioning =)

from vue-flow.