xyflow / web

📖 This monorepo contains the xyflow website and the documentation sites for React Flow and Svelte Flow.
https://xyflow.com
MIT License
43 stars 49 forks source link

Investigate buggy easy-connect example. #442

Closed hayleigh-dot-dev closed 2 weeks ago

hayleigh-dot-dev commented 2 months ago

Reported on discord:

The easy connect example (https://reactflow.dev/examples/nodes/easy-connect) on the react flow site currently has incorrect behavior. Although dropping a connection on to where the handle is, it doesn't snap as expected. When the cursor is over the connection radius of the handle (in this case, it's the center), you can see the connection stop moving for as long as the cursor is within the connection radius, and when outside, although it's moving around properly, it isn't snapping to the handle that it's within, like it should be.

For reference, here's a sandbox I found that shows what the expectation is with this example (https://codesandbox.io/p/sandbox/relaxed-tesla-6s5cnp?file=%2FCustomNode.js%3A27%2C11) taken from this previous thread (unrelated to this issue ⁠Snapping to handle not working…)

The expectation would be to have the connection snap to the handle center. The styles also aren't being applied correctly, but that seems to be because connection is referencing startHandle instead of source or sourceHandle. Biggest issue is the handle snapping here.