Feature Request – Add CSS Class for Connection Hover During Node Drag

[abdallahwishah]

Hello Foblex Team,

First of all, thank you for providing such a powerful flow engine and for the great examples you’ve shared, including “Assign Node to Connection on Drop.”

While working with this example, I noticed that there’s currently no built-in CSS class or state applied to a connection when a draggable node is hovering over it before the drop occurs. It would be extremely helpful for developers if a temporary class or visual state could be added to the connection line during this hover interaction.

This would allow us to easily style or highlight the connection to give users a clear visual cue of where the node will attach, resulting in a smoother UX.

Would it be possible to add such a feature in a future release?

Thank you for considering this improvement!

Best regards,

“f-connection-hover”

[siarheihuzarevich]

Hi 👋

Thank you for the detailed suggestion and for your kind words about f-flow 🙏

What you’re describing is definitely a nice UX improvement, but unfortunately calculating this kind of “real-time hover state” for connections would be very heavy in terms of performance — especially since not every node can attach to every connection. For that reason, it’s unlikely that this exact feature will be added directly to the core library.

That said, you can still achieve a similar effect by combining existing events and CSS classes. For example:
• Use fDragStarted and fDragEnded to detect when a node drag operation begins and ends.
• While dragging, you can listen for hover events on the connections and dynamically add a custom CSS class to highlight them.

This way, you can create the desired visual feedback without putting extra performance load on the engine itself.

Hope this helps! 🚀

And as always — if the library is useful for you, we’d really appreciate a ⭐ on GitHub 🙌