Node not counted as hovered while dragging

[AgustinBanchio]

Describe the bug
When I hover over a node, the event onNodeHover gets fired. But when I start dragging the node, the event gets refired with null (as if it was stopped being hovered).
Then, when the dragging ends, it can take a while until the event gets refired to indicate that the node is hovered.

I'm applying a different style to all nodes depending on if they are being hovered (or their surrounding nodes) or not (GIF 1).

When I start dragging, the graph says the node is not being hovered any more (GIF 2).

I want that style to remain while dragging, and to remain after dragging if still hovering.

I tried to keep counting the node as hovered if dragging (ignore hover events while dragging) but when letting go there will be no event indicating when it stops being hovered (GIF 3).

I then tried listening to the onNodeDragEnd event to stop counting the node as hovered, but the new onNodeHover event doesn't come at the same time, so there's a small hiccup where no node gets counted as hovered (GIF 4).

To Reproduce
On any graph with onNodeHover event, drag a node and it won't be considered hovered anymore. When dragging stops, there's a small delay until being considered hovered again as well.

Expected behavior
onNodeHover null is only emitted when the mouse moves out of the node.

Screenshots
[1] - Desired Hover Styling:

[2] - Reacting only to onNodeHover and dragging (no node counted as hovered when dragging):

[3] - Attempting to count node as hovered when dragged (sometimes nodes keep being considered hovered when not hovering anymore):

[4] - Stop counting node as hovered on drag end (there's a small bit of time between dragging ending and node being considered hovered again, see other nodes flashing):

[5] - Events fired (deduplicating drag) with ms timestamp:

Between dragEnd and the hover event (without moving the cursor). You can see that from drag to hover null there's almost no delay but from dragEnd to hover (actual node) there can be like 400-500ms or more of delay (leading to the flashing reaction).

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 110.0.5481.177

Additional context
Is there any config to treat dragged nodes as hovered and only emit the null event when stopping hovering after dragging ends?

[vasturiano]

@AgustinBanchio thanks for your request.

By design this module considers that a node can only be in hover mode or in drag mode, but not both simultaneously. Considering a node as being hover while dragging at the same time has proved problematic. Largely because as you're dragging the node, often it's being pulled in the opposite direction by the graph, which causes it to move in and out of the mouse hovering area. This in turn cause multiple calls to onNodeHover to fire, which is distracting and unstable. To solve this we switch off the hovering while dragging and it's a solution that seems to work better than the alternative.

However, keep in mind that you can still have the best of both worlds, by using onNodeDrag and onNodeDragEnd (which includes the node), you can simply consider the node being dragged to be in hover state with those callbacks.

[AgustinBanchio]

Hi @vasturiano thanks for responding so quickly.

If I consider the node to be in the hover state when dragged, I get problems when dragging stops.
You see, there's a delay of about 500ms in my case when dragging stops to getting the callback from onNodeHover again.

Resulting in quick flashing occurring just when dropping the node.

Sometimes the node gets dropped while not hovering over it and sometimes hovering over it, so I can't just assume that when dragging stops the hovering continues.

Is there any way to get an instant hovering recomputation as soon as dragging ends? (kinda like we get a hover callback as soon as dragging starts)

[vasturiano]

@AgustinBanchio the onNodeDragEnd callback exists for this purpose. It should fire immediately as soon as the end of the dragging interaction is detected.

[AgustinBanchio]

When onNodeDragEnd event happens, how do I know if the cursor is hovering over the node?
Dragging can end either while hovering or not. Getting the onNodeHover callback after drag ends can take up to half a second.