Added new events for Control Node D&D #3771
Conversation
| network.on("controlNodeDragEnd", function (params) { | ||
| params.event = "[original event]"; | ||
| document.getElementById('eventSpan').innerHTML = '<h2>control node drag end event:</h2>' + JSON.stringify(params, null, 4); | ||
| console.log('controlNodeDragEnd Event:', params); |
There was a problem hiding this comment.
when I visit the events/interactionEvents.html example to test this, and I drag a node then release it, I don't see the controlNodeDragEnd Event: logged out.
@vasa93 curious, could you tell me what I am missing? what do we need to test the functionality in this PR?
There was a problem hiding this comment.
here are the testing steps I tried in list and gif form:
- visit example http://127.0.0.1:8080/examples/network/events/interactionEvents.html
- open browser console
- drag a node
- look for
controlNodeDragEnd Event:in the browser console
|
Actually, control node is node that is dragged when you are trying to connect two nodes with an edge. It's special node, and for this node I have introduced new events so we could know when user is dragging that particular node and when user ends dragging it. So, you could try that, and if my help is needed after that, I can...help. :) |
|
awesome, thanks for teaching me what a control node is @vasa93 😄 I've give this a try:
|
|
ok, I see it now, looks good to me ✅ thanks for sharing the steps to test this one @vasa93 http://127.0.0.1:8080/examples/network/events/interactionEvents.html
|
|
I've merged this in the community standalone network module project, and published a minor version with this enhancement up to npm 🎉 visjs-community/visjs-network#34 |
|
💌 Thanks @vasa93 for your contribution! |
|
It's been my pleasure. Vis is great library, and I'm glad you appreciate my contribution. |
mojoaxel
added
Network
visjs APPLIED
We need notification on control node dragging and drag end for Vis Network. We need this so we can introduce some constraints for connecting nodes, and we need to do that proactively by changing cursor to 'not-allowed' when connecting is not allowed.
To solve this we introduced two new events 'controlNodeDragging' and 'controlNodeDragEnd', that notify us about control node state. These events are generated inside _dragControlNode and _finishConnect functions respectively. With this implemented, we can now change cursor over control node by checking constraints at the moment when event occurs. This looks as in attached image.