dynamic handle about xyflow

[kentaurse]

plz check this
https://codesandbox.io/p/sandbox/reactflow-handle-positions-forked-j6lz6k?file=%2Fsrc%2Fcomponents%2FCustomNode.tsx

[peterkogo]

If you are updating your handle positions programmatically you have to use updateNodeInternals

We have to redetermine the exact position of the handle every step of the way (in you case on every frame of the transition) to get the correct positions for the edges.

If you just want to have an animated handle, I would suggest you just transform an inner element with position absolute without actually moving the whole container. This way you still achieve the desired effect but the handle positions don't actually ever move.

[kentaurse]

thank you

[kentaurse]

Could you please help with proximity connection as well?
This works correctly for only one source and target handle.
However, when there are multiple source and target handles, only the first handle works and the rest do not work.

[peterkogo]

The code for the proximity connect simply calculates the closest node and then creates a an edge from the source to target handle. If you have multiple handles you need to actually address specific handle ids because there can be more then one source & target handle. You can also determine the closest handle by accessing the handle bounds. Here is an example that also accesses the handle bounds. https://reactflow.dev/examples/edges/multi-connection-line

[kentaurse]

thank you