Why the connection line looks like this?

[tpoxa]

Hey. I noticed that the connection line looks different when I drag it from left to right than the right to left using a horizontal layout.
Can it be easily changed?

Screenshot is taken from here https://vueflow.dev/examples/horizontal.html

Thanks. It's a really great project.

[bcakmakoglu]

Currently I'm not at home so I can't really check what's going on, I'll check it out tomorrow 😄
Thank you for reporting though!

[tpoxa]

I don't quite understand your first question, could you elaborate on that further? What exactly is causing you trouble?

Just don't like how the connection like looks when it's being dragged from target to source. The screenshot displays one of the examples published online. You just need to grab the line from Node 5 and drag it to Node 3. The line curves inside like avoiding being connected. It looks weird to me.

[bcakmakoglu]

I know what it looks like but as I said, you can implement your own custom connection line that flips the direction based on what direction your pulling it.
Right now that's just the behavior of the default connection line.

[bcakmakoglu]

You might want to try this snippet if you have trouble getting the directions of your connection line right:

const path = computed(() =>
  getBezierPath({
    ...props,
    targetPosition: props.targetX < props.sourceX ? ('right' as Position) : ('left' as Position),
  }),
)

That should give you the alignment you're asking for if I'm not wrong :)

[bcakmakoglu]

@tpoxa btw, with the next minor release 1.14.0 the connection line will automatically draw to the opposite position, which should probably give you the result you were looking for to begin with 😄
Let me know if that's better for you after you've upgraded

[tpoxa]

Hey @bcakmakoglu I like your latest updates. The connection line now looks the same great when I drag it from the source as when I drag it from the target. Also, the overall process of connecting edges now is more pleasant. Thanks!