Autoswitch handles for edges

[shsmad]

Hi, I have a question.

I have custom node with 4 source handles (on top, right, bottom and left of node, green color) and same for target handles (red color).

When I connect two nodes by hands, for example left source handle and right target handle everything looks fine. But when I drag node to the opposite side I want that edge automatically changed handles, that it connected to.

Can it be achieved? I can calculate which handles should be used, but I don't understand which event should I listen to, where to listen it, and probably how to tell vue-flow to redraw edge?

[bcakmakoglu]

Mh... I haven't tried this yet, but I would assume

1. You want to listen to onNodeDrag so you can calculate the closest handle when a node's position changes
2. You want to change edge.sourceHandle or edge.targetHandle when there is a new closest handle.

The edge should be redrawn, whenever you change sourceHandle or targetHandle.

[shsmad]

Thanx, I've solved in another way:

1. in my custom Edge I watched props.sourceNode.computedPosition, computed which in/out handles I should use & emit changeHandleRequest event
2. in VueFlow component in edge template I listened to my event, find edge using getEdges.find and change sourceHandle/targetHandle

Had fun with some visual effects/bugs when used props.sourceX instead of props.sourceNode.computedPosition, may be you should clarify in docs than sourceX is related to position of handle, not of node.