To realize the function of dynamic dragging line

[Cat202010804010]

Can you implement the function of dynamic drag line? Similar to the picture below

Clicking anywhere on the line generates a drag node, dragging this node can make the path of the line change dynamically。

[bcakmakoglu]

Yeah you can implement that but there's no example for it at the moment.
As you suggested yourself, you'll just have to add an intermediate node for it that allows for the path to be modified.

[Cat202010804010]

My idea is to get the path of the clicked line, and dynamically set the necessary points above, and the position of the necessary points is the coordinates of the mouse movement from the beginning to the end. Is there any way to get and set the path of the clicked line?

[Cat202010804010]

Now I can use GetPointerPosition method to get the xy position of the mouse dragged, but also to get the instance of the dragged line, is there any way to set the path of the line and redraw this line?

[Cat202010804010]

When I use the BaseEdge component, path is passed dynamically,:path="path", where path is computed, depending on sourceX, sourceY, etc., but when I move nodes, path does not change according to sourceX and sourceY changes, how do I manually pass path and keep it responsive?

[bcakmakoglu]

Use a computed property like const edgePath = computed(() => getBezierPath(props)) and pass it as <BaseEdge :path="edgePath[0] ...>