From 36f49d3b6dca91b44f12158d3e1442e8d627c83d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Vy=C4=8D=C3=ADtal?= Date: Thu, 24 Oct 2019 09:40:37 +0200 Subject: [PATCH] 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 | 2 +- lib/network/modules/ManipulationSystem.js | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/lib/network/Network.js b/lib/network/Network.js index 02978d5f1b..36c42b5a81 100644 --- a/lib/network/Network.js +++ b/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 diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index 82b1dc632e..607170477e 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/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); } }