Fix node hover when mouse moves from an edge

[Gelio]

When the mouse enters a node while hovering over an edge previously, the node hover event is not emitted.

Here are the screenshots of this unintended behavior. I have marked the mouse position with a black dot.

This PR fixes that issue. It has been also mentioned in #3907, which this PR also fixes.

[Tooa]

hoveredEdgesCound -> hoveredEdgesCount

[Gelio]

Good catch, thanks 👍 I have fixed the typo

[micahstubbs]

@yotamberk could you tag this one as network when you have a moment?

[micahstubbs]

@Gelio thanks for the sending this PR with the fix!

Curious, could you provide a new example that we can use to verify the fix, or point us to an existing example that shows the bug behavior (and would also show the fix)?

https://github.com/almende/vis/tree/master/examples/network

said another way, could you provide steps to test this PR?

[Gelio]

@micahstubbs Sure thing

events/interactionEvents.html

1. Open the console
2. Set the filter to hoverNode (so there are no unnecessary logs)
3. Hover over an edge
4. Move the mouse towards a node (while hovering an edge)
5. Enter the node, still hovering an edge

The hoverNode event will not be emitted. It is emitted when the mouse enters the node from empty canvas space, not from an edge

[micahstubbs]

hi @Gelio, thanks for the steps to test.

I'm not able to reproduce the bug behavior at events/interactionEvents.html

here's a gif of my repro session:

I'm don't see the extra hoverNode event when I try these steps on vis.js before this PR locally either 🤔

Is there something that I'm missing?

[Gelio]

@micahstubbs It is not the extra hoverNode event. It is the lack of it 😄 Notice that there is no hoverNode event when you enter the node while following the edge

[micahstubbs]

@Gelio acknowledged 👌

I notice this desired behavior even before I apply the changes in this PR. this makes me wonder if it is already fixed somehow 🤔

[Gelio]

@micahstubbs Hmm 🤔 Just to be on the same page - you noticed that there is a hoverNode event emitted when moving the mouse from the edge to the node?

The gif shows a different behavior 🙁 The hoverNode event is missing

I have built the latest master branch and the bug is still there - no hoverNode event is emitted when entering the node while following the edge:

What branch did you test it on and noticed the possible bugfix 🙂?

[micahstubbs]

@Gelio thanks for patiently explaining - I think I was confused before and perhaps understand now 💡

does this sound correct to you?

1. the desired behavior is to emit a hoverNode event anytime a node is hovered over. (this means if the node is entered from the background or from an edge)

2. the bug behavior is that when a node is hovered over after the cursor was hovering an edge, the expected hoverNode event is missing.

if 1) and 2) are correct, then I do see the bug on latest master.

[Gelio]

@micahstubbs No problem 😄 I am glad I can help

Yup, that sounds just about right. Both 1 & 2 are correct.

I have a custom popup (as a regular HTML component overlayed on the canvas) and it is shown upon hoverNode event. When the user hovers a node having been previously hovering an edge, the popup does not appear because of the lack of the hoverNode event. That is why I thought of it as a bug. Would you agree 🙂?

[micahstubbs]

ok, now that I understand the bug, let's take another look at the fix 😄

[micahstubbs]

ok, after I remove the linter/code style changes, this is the substantive change that remains:

[micahstubbs]

here's another look at the clean diff https://github.com/visjs-community/visjs-network/pull/29/files

[micahstubbs]

✅ looks good to me. I'm able to see the desired behavior after applying the changes in this PR.
when I hover over an edge, and then hover over a node, the hoverNode event is emitted. nice work @Gelio 👍

http://127.0.0.1:8080/examples/network/events/interactionEvents.html

[Gelio]

@micahstubbs Awesome! Thank you for testing my work so thoroughly 👍

[micahstubbs]

I've merged this in the community standalone network module project, and published a patch version with the fix up to npm 🎉

visjs-community/visjs-network#29
https://www.npmjs.com/package/visjs-network

[mojoaxel]

💌 Thanks @Gelio for your contribution!
This pull-request has been merge into visjs/vis-network#22