Added dragStart event for adding edges. (#3141)

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 = '<h2>oncontext (right click) event:</h2>' + 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 = '<h2>dragStart event:</h2>' + 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 = '<h2>dragEnd event:</h2>' + 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 = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);

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 -------------------------------------//