fix(manipulation): use interaction to handle drag (#175)

Formelly manipulation system reimplemented dragging instead of using
interaction to handle it. This resulted to interaction options being
ignored during edge editing and adding. Forwarding the events to
interaction handler solves these issues.

Closes #174.

lib/network/Network.js

@@ -125,7 +125,7 @@ export function Network(container, data, options) {
  this.physics = new PhysicsEngine(this.body); // physics engine, does all the simulations
  this.layoutEngine = new LayoutEngine(this.body); // layout engine for inital layout and hierarchical layout
  this.clustering = new ClusterEngine(this.body); // clustering api
- this.manipulation = new ManipulationSystem(this.body, this.canvas, this.selectionHandler); // data manipulation system
+ this.manipulation = new ManipulationSystem(this.body, this.canvas, this.selectionHandler, this.interactionHandler); // data manipulation system
 
  this.nodesHandler = new NodesHandler(this.body, this.images, this.groups, this.layoutEngine); // Handle adding, deleting and updating of nodes as well as global options
  this.edgesHandler = new EdgesHandler(this.body, this.images, this.groups); // Handle adding, deleting and updating of edges as well as global options

lib/network/modules/ManipulationSystem.js

@@ -15,10 +15,11 @@ class ManipulationSystem {
  * @param {Canvas} canvas
  * @param {SelectionHandler} selectionHandler
  */
- constructor(body, canvas, selectionHandler) {
+ constructor(body, canvas, selectionHandler, interactionHandler) {
  this.body = body;
  this.canvas = canvas;
  this.selectionHandler = selectionHandler;
+ this.interactionHandler = interactionHandler;
 
  this.editMode = false;
  this.manipulationDiv = undefined;
@@ -944,10 +945,7 @@ class ManipulationSystem {
  this.selectedControlNode.y = pos.y;
  }
  else {
- // if the drag was not started properly because the click started outside the network div, start it now.
- let diffX = pointer.x - this.lastTouch.x;
- let diffY = pointer.y - this.lastTouch.y;
- this.body.view.translation = {x:this.lastTouch.translation.x + diffX, y:this.lastTouch.translation.y + diffY};
+ this.interactionHandler.onDrag(event);
  }
  this.body.emitter.emit('_redraw');
  }
@@ -1090,9 +1088,7 @@ class ManipulationSystem {
  this.body.emitter.emit('_redraw');
  }
  else {
- let diffX = pointer.x - this.lastTouch.x;
- let diffY = pointer.y - this.lastTouch.y;
- this.body.view.translation = {x:this.lastTouch.translation.x + diffX, y:this.lastTouch.translation.y + diffY};
+ this.interactionHandler.onDrag(event);
  }
 
  }