Edge labels getting overlapped

[NithishG]

Describe the Bug

We have used this library in our application for connecting two edges. Theres's an issue that we have noticed that the edge labels are getting overlapped one over the other as we have lot of nodes connecting each other.

Minimal Example

https://codesandbox.io/s/edge-overlapping-32omg0?file=/src/Flow.js

Steps to Reproduce the Bug or Issue

Go to the code sandbox, we can see the edge labels getting overlapped on each other.

Expected behavior

As a user, we would like the edges not getting overlapped and should be drawn in such a way that both the labels should be displayed properly.

Is there any way we can achieve this by providing or customising the props, that also would be much helpful for us.

Screenshots or Videos

Platform

• OS: macOS, Windows, Linux
• Browser: Chrome, Safari, Firefox

Additional context

No response

[tisoap]

Hey @NithishG ! This isn't an issue that's exclusive to react-flow-smart-edge, this would happen with any edge by default. As proof, I've edited your example to use React Flow's StepEdge instead and was also able to reproduce overlapping labels:
https://codesandbox.io/s/edge-overlapping-counter-example-lbfiq2?file=/src/Flow.js

The built-in smart edges by default will render labels as text roughly in the middle of the drawn line. If you want more control over when, where and how they are rendered, you'll need to use the getSmartEdge custom hook and build your own edge component. There's the smart edge with button example from this repo, and the Edge Label Renderer example from React Flow that should help you get started.

[tisoap]

This issue is related to this feature request: #25

[NithishG]

Hey @tisoap, I agree that it's not an issue exclusive to react-flow-smart-edge but the reason for posting over here is that as this is the custom implementation to connect nodes other than provided by reactflow.

Just to let you know we have a custom edge that uses getSmartEdge to get the svgPathString as you mentioned and we do have control on the edge labels, but the catch over here is they don't know about the other labels residing at the same position.

So, can we do it in a different way where we can redraw the edge paths according to the user's will as per shown in the video

Screen.Recording.2023-05-29.at.1.19.15.PM.mov

[tisoap]

By default, the label rendered does not have knowledge of other labels in the graph. Using the getSmartEdge custom hook exposes the label renderer to you, which would allow for a custom implementation that looks at some global store with every other label position and renders the new one accordingly, for example.

Your video suggestion maps to another feature request for adding draggable points in the Edge, which is also not officially supported by React Flow: #36

[github-actions]

This issue is stale because it has been open for 7 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale.