diff --git a/examples/network/events/interactionEvents.html b/examples/network/events/interactionEvents.html index 538fbfad..682ca085 100644 --- a/examples/network/events/interactionEvents.html +++ b/examples/network/events/interactionEvents.html @@ -48,7 +48,14 @@ nodes: nodes, edges: edges }; - var options = {interaction:{hover:true}}; + + var options = { + interaction:{hover:true}, + manipulation: { + enabled: true + } + }; + var network = new vis.Network(container, data, options); network.on("click", function (params) { @@ -65,8 +72,10 @@ document.getElementById('eventSpan').innerHTML = '

oncontext (right click) event:

' + JSON.stringify(params, null, 4); }); network.on("dragStart", function (params) { + // There's no point in displaying this event on screen, it gets immediately overwritten params.event = "[original event]"; - document.getElementById('eventSpan').innerHTML = '

dragStart event:

' + JSON.stringify(params, null, 4); + console.log('dragStart Event:', params); + console.log('dragStart event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM)); }); network.on("dragging", function (params) { params.event = "[original event]"; @@ -75,6 +84,8 @@ network.on("dragEnd", function (params) { params.event = "[original event]"; document.getElementById('eventSpan').innerHTML = '

dragEnd event:

' + JSON.stringify(params, null, 4); + console.log('dragEnd Event:', params); + console.log('dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM)); }); network.on("zoom", function (params) { document.getElementById('eventSpan').innerHTML = '

zoom event:

' + JSON.stringify(params, null, 4); diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index 36d42621..2a821435 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/lib/network/modules/ManipulationSystem.js @@ -322,8 +322,7 @@ class ManipulationSystem { this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this)); this._temporaryBindUI('onDrag', this._dragControlNode.bind(this)); this._temporaryBindUI('onRelease', this._finishConnect.bind(this)); - - this._temporaryBindUI('onDragStart', () => {}); + this._temporaryBindUI('onDragStart',this._dragStartEdge.bind(this)); this._temporaryBindUI('onHold', () => {}); } @@ -935,6 +934,7 @@ class ManipulationSystem { edge.updateEdgeType(); this.body.emitter.emit('restorePhysics'); } + this.body.emitter.emit('_redraw'); } @@ -1048,9 +1048,18 @@ class ManipulationSystem { } } } + + + // No need to do _generateclickevent('dragEnd') here, the regular dragEnd event fires. this.body.emitter.emit('_redraw'); } + + _dragStartEdge(event) { + let pointer = this.lastTouch; + this.selectionHandler._generateClickEvent('dragStart', event, pointer, undefined, true); + } + // --------------------------------------- END OF ADD EDGE FUNCTIONS -------------------------------------//