Edges example with custom edges not working

[mahamzafar979]

Hi,

I tried replicating the edges example from below link into my project.
https://vueflow.dev/examples/edges/
After replicating, CustomEdges were not working properly as shown in below image.

and on console I am getting this error:
Error: attribute d: Unexpected end of attribute. Expected number, "M".
On debugging I noticed that getBezierPath function is returning a string instead of an array that I think is causing the issue.
I am looking into custom edges as I want to show multiline text as edges label.
Can someone help me with that?

Thanks.

[bcakmakoglu]

What version are you using? The change of getBezierPath occured in 1.0.0 (see here)

The examples always use the version that is shown in the header (currently 1.2.0 is the latest version and the one used on the page). So if you want to replicate the code, you would do best to use that version :)

[mahamzafar979]

I am using 1.2.0 version for vue-flow/core and 1.1.0 for additional components

[bcakmakoglu]

Can you provide a reproduction?
Seems to work fine for me. Here's a working sandbox: https://codesandbox.io/s/serverless-hooks-ji3e21?file=/src/components/CustomEdge2.vue:924-925

[mahamzafar979]

Hi,
While trying to reproduce the issue I found out that the issue was with the nuxt3 version I was using. On changing the version example is working now.

[mahamzafar979]

I have one more question:
By default, labels are placed at the center of an edge but as I am assigning dynamic x & y coordinates to nodes. Hence, if the labels are placed in the middle then it's difficult to determine which link the label belongs to or if they are placed close together. Please refer to the screenshot below

So is there a way to place the labels closer to the target node on the link?

[bcakmakoglu]

Sorry I didn't see your last message.

So clarify your question: Of course you can put it closer to the nodes.
The utilities like getBezierPath or getSmoothStepPath will return an array like [path, labelX, labelY] you can use these values to create a custom edge and a label. X and Y are the center values, so if you need it closer into some direction just add or subtract some amount to move the label into your desired direction.

Check the edges example again to see how it works and play around with it a bit :)

Note: There have been some recent updates, like using a div based edge label, which you can find in the example as well.

If you have more questions, let me know :)