[Network] Mouse events not working

[rafaelsaback]

Hi all,

I wanted to use mouseDown and mouseUp events in the Network module's canvas, but apparently those events are being caught by Hammer.js.

I noticed that by removing the flag preventDefault: 'mouse' the events occur normally. But I guess there's a real reason for it to be set the way it's.

In the documentation, I didn't see anything about mousedown and mouseup events, so I assume they are simply not implemented for this module.

I've seen that another PR has implemented this in the Timeline module. I tried to implement those events for the network module as well, but no success so far. You can see what I've done here in this personal PR.

Any help/feedback is highly appreciated.

[jgorene]

Hello,
To find out a little more, do you have an example of how to use it or in which case it could be useful?
Just to see how I could use this event in the canvas of the Network module...
Thank you very much

[rafaelsaback]

Hi @jgorene,

I want to implement an area selection functionality inside the network canvas, in that way by clicking and moving the mouse I'd be able to select multiple nodes. For that, I need to listen to mousedown, mousemove and mouseup events. The mousemove event is working, but mousedown and mouseup are not.

To emulate the issue with mousedown, I have created a basic JSFiddle using the original Vis library. At the end of the JavaScript window, you'll see that I define 2 events, one for onpointerdown, which works, and one for onmousedown, that does not work. You can comment/uncomment the events to test them.

I also created a 2nd JSFiddle that uses my modified version of Vis library, where I tried to implement the mousedown event.

Thanks!

[softwareCobbler]

You want to be able to click and drag a rectangle, and upon mouseup select nodes and edges within the rectangle? Like on a Windows desktop or within file explorer? I envision the user would be required to press ctrl or something in order to override canvas dragging?
I think this would be a cool feature.

[jgorene]

Of course, I also think that this would be an interesting feature 😉
However, I'm just wondering if it's worth adding this feature given the work that needs to be done to manage all the impacts on the module as it was designed, it seems to me in any case.

That being said, I tried to see what we could already do with the existing features...
Take a look at these 2 examples to illustrate what we can already do with some existing network interaction options and the difficulties we may encounter, not to mention some unwanted (or not) "side effects" that should not be ignored.

Note that it's just a demo and probably it's possible to improve that (thanks in advance)

working example 1 (It's working pretty well 😁)
https://output.jsbin.com/nuxixim

working example 2 (It sounds more complicated... 😖)
https://output.jsbin.com/yibevop

[rafaelsaback]

@softwareCobbler, exactly! The idea was to use CTRL + left click to start the selection mode and when the left button is released, the nodes and edges within the area would be selected.

@jgorene, thank you for the examples! I guess I can emulate the behaviour I want by checking for CTRL + click, the only difference would be that the selection would be finished when a second click is performed, instead of the button release.

Out of curiosity, what would you say about using onpointerdown/onpointerup events? Unlike mousedown/mouseup, these events work.

[jgorene]

@rafaelsaback Great, fine ;)
However, it does not seem so easy to implement this feature, but why not ?

Otherwise yes, the "onpointerdown / onpointerinterup" works well as far as I could test it on the jsbin but these events as named can be interpreted with some confusion seems to me (very personal opinion anyway;)
Ok, to follow then...

[softwareCobbler]

I found that mouse events are being consumed by Hammer and calling them different things. Notably, the onTouch event consumes the mousedown event, so if you want that functionality, put some code into InteractionHandler::onTouch. Hammer calls the mouseup event through its own onRelease event. Not certain if these are 1:1 comparisons but for my purposes they don't yet have any hidden mutations or other gotchas.

Actually I'm not certain what Hammer calls them but this is what Vis.js's interface with Hammer calls these events.

If you're interested I have a proof of concept of the with a ctrl+mousedown draggable selection box on the canvas - shouldn't be too much of a stretch to make a bit more robust and then on mouseup (or in Hammer-speak, onRelease) figure out what nodes and edges are within the box's bounds.
If you're interested it's at: softwareCobbler/vis/selectionBox

[mojoaxel]

@jgorene I noticed that you are active in answering questions. Thanks! 👏
I just added you as a maintainer of this project. Feel free to add labels and continue to help improving this project!

[jgorene]

@mojoaxel As much as possible and according to my means, with pleasure of course... Thank you ! 😍 !

[jgorene]

I wanted to test new feature in PR #4242 by @softwareCobbler and seems to work like a charm (:clap:)
In any case, I didn't encounter any bugs after a few tests (manuals) and easy to use...

Just in case, a codepen with "selection box" implemented... with a stroke-width property in addition, would be perfect 😉 !

In the end, this opens up interesting opportunities for interaction indeed!