From 91c96ba38c3ce093573f6946f6f1e0a8d327dec4 Mon Sep 17 00:00:00 2001
From: CapitanMorgan <msmorga1@gmail.com>
Date: Tue, 25 Oct 2016 15:32:41 -0700
Subject: [PATCH] fixes #2100 and issues with edges when clustering (#2229)

* Should fix issue #2100 and fix another issue we discovered around clusterByConnection leaving phantom edges.
* fixed a wrong variable name
* fixed DataView.test.js assert
* Update Canvas.js
* remove whitespace; remove end of file newline on Canvas.js
* strip end of file newlines
* fixed styling. spacing, semicolons, line length
---
 lib/network/modules/Canvas.js                 |  6 +++++
 lib/network/modules/Clustering.js             | 16 +++++++++--
 .../modules/components/NavigationHandler.js   | 27 +++++++++++++++----
 test/DataView.test.js                         |  3 ++-
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/lib/network/modules/Canvas.js b/lib/network/modules/Canvas.js
index e0f15abb..c378c183 100644
--- a/lib/network/modules/Canvas.js
+++ b/lib/network/modules/Canvas.js
@@ -18,6 +18,7 @@ class Canvas {
     this.resizeFunction = this._onResize.bind(this);
     this.cameraState = {};
     this.initialized = false;
+    this.canvasViewCenter = {};
 
     this.options = {};
     this.defaultOptions = {
@@ -284,6 +285,11 @@ class Canvas {
       this.options.width = width;
       this.options.height = height;
 
+      this.canvasViewCenter = {
+        x: 0.5 * this.frame.clientWidth,
+        y: 0.5 * this.frame.clientHeight
+      };
+
       emitEvent = true;
     }
     else {
diff --git a/lib/network/modules/Clustering.js b/lib/network/modules/Clustering.js
index f67d0da1..3de5198e 100644
--- a/lib/network/modules/Clustering.js
+++ b/lib/network/modules/Clustering.js
@@ -235,7 +235,19 @@ class ClusterEngine {
         }
       }
     }
-
+    var childNodeIDs = Object.keys(childNodesObj).map(function(childNode){
+      return childNodesObj[childNode].id;
+    })
+
+    for (childNode in childNodesObj) {
+      var childNode = childNodesObj[childNode];
+      for (var y=0; y < childNode.edges.length; y++){
+        var childEdge = childNode.edges[y];
+        if (childNodeIDs.indexOf(this._getConnectedId(childEdge,childNode.id)) > -1){
+          childEdgesObj[childEdge.id] = childEdge;
+        }
+      }
+    }
     this._cluster(childNodesObj, childEdgesObj, options, refreshData);
   }
 
@@ -723,7 +735,7 @@ class ClusterEngine {
     let allEdgeIds = this.getClusteredEdges(startEdgeId);
     for (let i = 0; i < allEdgeIds.length; i++) {
       var edge = this.body.edges[allEdgeIds[i]];
-      edge.setOptions(newOptions);      
+      edge.setOptions(newOptions);
     }
     this.body.emitter.emit('_dataChanged');
   }
diff --git a/lib/network/modules/components/NavigationHandler.js b/lib/network/modules/components/NavigationHandler.js
index 2b081a14..14347814 100644
--- a/lib/network/modules/components/NavigationHandler.js
+++ b/lib/network/modules/components/NavigationHandler.js
@@ -150,12 +150,29 @@ class NavigationHandler {
   _moveDown() {this.body.view.translation.y -= this.options.keyboard.speed.y;}
   _moveLeft() {this.body.view.translation.x += this.options.keyboard.speed.x;}
   _moveRight(){this.body.view.translation.x -= this.options.keyboard.speed.x;}
-  _zoomIn()   {
-    this.body.view.scale         *= 1+this.options.keyboard.speed.zoom;
-    this.body.emitter.emit('zoom', {direction: '+', scale: this.body.view.scale});}
+  _zoomIn() {
+    var scaleOld = this.body.view.scale;
+    var scale = this.body.view.scale * (1 + this.options.keyboard.speed.zoom);
+    var translation = this.body.view.translation;
+    var scaleFrac = scale / scaleOld;
+    var tx = (1 - scaleFrac) * this.canvas.canvasViewCenter.x + translation.x * scaleFrac;
+    var ty = (1 - scaleFrac) * this.canvas.canvasViewCenter.y + translation.y * scaleFrac;
+
+    this.body.view.scale = scale;
+    this.body.view.translation = { x: tx, y: ty };
+    this.body.emitter.emit('zoom', { direction: '+', scale: this.body.view.scale });
+  }
   _zoomOut()  {
-    this.body.view.scale         /= 1+this.options.keyboard.speed.zoom;
-    this.body.emitter.emit('zoom', {direction: '-', scale: this.body.view.scale});
+    var scaleOld = this.body.view.scale;
+    var scale = this.body.view.scale / (1 + this.options.keyboard.speed.zoom);
+    var translation = this.body.view.translation;
+    var scaleFrac = scale / scaleOld;
+    var tx = (1 - scaleFrac) * this.canvas.canvasViewCenter.x + translation.x * scaleFrac;
+    var ty = (1 - scaleFrac) * this.canvas.canvasViewCenter.y + translation.y * scaleFrac;
+
+    this.body.view.scale = scale;
+    this.body.view.translation = { x: tx, y: ty };
+    this.body.emitter.emit('zoom', { direction: '-', scale: this.body.view.scale });
   }
 
 
diff --git a/test/DataView.test.js b/test/DataView.test.js
index 4d3c5f97..11d481c3 100644
--- a/test/DataView.test.js
+++ b/test/DataView.test.js
@@ -200,7 +200,8 @@ describe('DataView', function () {
       }]
     ]);
     assert.deepEqual(viewUpdates, [
-      ['update', {items: [2], data: [{id: 2, title: 'Item 2 (changed)'}]}]
+      ['update', {items: [2], data: [{id: 2, title: 'Item 2 (changed)'}],
+      oldData: [{"group": 2, "id": 2, "title": "Item 2"}]}]
     ]);
 
   });