Bezier connection line not generating correct when connecting diagonally about react-flow HOT 3 CLOSED

Hey @natsu-k

that's some crazy nodes :) Thanks for the feedback. We will check that.

from react-flow.

Thanks for getting back to me @moklick

I just threw that together super quickly to demonstrate what I noticed occurring. I've been really inspired by this library. I've been using it and your example on custom nodes along with a background API to create a version of this that lets you build your node graph within the react app itself and then save it back to json. Things like being able to change text and colour of the nodes, and toggle the 4 handles between "off, source, and target".

I was looking a bit closer at the code behind the bezier curve tonight to see why the output was generating like so.

https://github.com/wbkd/react-flow/blob/39b6106f6f0b08fbe9eaa17a0f62de5c27509f8a/src/components/Edges/BezierEdge.tsx#L28-L33

I noticed the condition:

else if (leftAndRight.includes(sourcePosition) || leftAndRight.includes(targetPosition))

So if either the source or target position (but not both, as that is caught in the previous if statement) are left or right, then generate a bezier curve with both of the centre control points placed at the same location ${sourceX},${targetY}. This would only generate a correct looking curve for half of the possible configurations.

So it looks like you might be able to resolve it by adding in an extra condition and adjusting the original on Line 31:

    } else if (!(leftAndRight.includes(sourcePosition)) && leftAndRight.includes(targetPosition)) {
      dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
    } else if (leftAndRight.includes(sourcePosition) && !(leftAndRight.includes(targetPosition))) {
      dAttr = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
    }

There might be a better way of writing this code, but I just wanted to contribute what I have figured out so far.

from react-flow.

Thanks for your input! We just released a v3.0.0 (because we had a breaking change regarding custom nodes). The nodes now should be connected correctly: https://react-flow.netlify.app/horizontal

from react-flow.