How to add mid points in the react flow library?

Question

I use the reactflow library to build diagrams and I need to implement editing connection lines. For example, you click on a line and drag it somewhere and the path (svg) of the line changes appropriately.

On GitHub the exact same question exists but it is closed and I cannot understand whether the problem is solved or not. Maybe you know how to add these midpoints or it is not supported? I'll appreciate any help.

I read the documentation and did not find an answer.

Answer 1

@Christian, I've created a very limited version of the feature. You can only move the horizontal part of the edge up and down. Vertical parts are not movable.

Link on the Github with the Edge implementation. https://github.com/MaxKoldun/reactflow-midpoints-example/blob/main/CustomEdge.js