New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix node hover when mouse moves from an edge #4027

Open
wants to merge 1 commit into
base: develop
from

Conversation

Projects
None yet
4 participants
@Gelio
Copy link

Gelio commented Jul 5, 2018

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.
screenshot from 2018-07-05 17-00-12
screenshot from 2018-07-05 17-00-14

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

@@ -653,7 +653,14 @@ class SelectionHandler {
}

if (object !== undefined) {
hoverChanged = hoverChanged || this.emitHoverEvent(event, pointer, object);
const hoveredEdgesCound = Object.keys(this.hoverObj.edges).length;

This comment has been minimized.

@Tooa

Tooa Jul 14, 2018

Member

hoveredEdgesCound -> hoveredEdgesCount

This comment has been minimized.

@Gelio

Gelio Jul 16, 2018

Author

Good catch, thanks 👍 I have fixed the typo

@Gelio Gelio force-pushed the Juniper:fixNodeHoverFromEdge branch from cebe9b1 to ff99a87 Jul 16, 2018

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 3, 2018

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

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 3, 2018

@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

This comment has been minimized.

Copy link
Author

Gelio commented Sep 4, 2018

@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

@yotamberk yotamberk added the Network label Sep 4, 2018

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 4, 2018

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:
vis-pr-4027-before

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

This comment has been minimized.

Copy link
Author

Gelio commented Sep 4, 2018

@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

This comment has been minimized.

Copy link

micahstubbs commented Sep 4, 2018

@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 🤔

@micahstubbs micahstubbs referenced this pull request Sep 5, 2018

Open

adopt open almende/vis network pull requests #27

8 of 17 tasks complete
@Gelio

This comment has been minimized.

Copy link
Author

Gelio commented Sep 5, 2018

@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:

vis no hovernode

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

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 5, 2018

@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

This comment has been minimized.

Copy link
Author

Gelio commented Sep 5, 2018

@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

This comment has been minimized.

Copy link

micahstubbs commented Sep 5, 2018

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

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 5, 2018

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

screen shot 2018-09-05 at 10 27 13 am

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 5, 2018

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 5, 2018

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
vis-pr-4027-after

@Gelio

This comment has been minimized.

Copy link
Author

Gelio commented Sep 5, 2018

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

@micahstubbs

This comment has been minimized.

Copy link

micahstubbs commented Sep 5, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment