- Fix for introduced bug on zoomExtent navigation button.

- Added animation to zoomExtent navigation button.
- Improved cleaning of Hammer.js bindings.

HISTORY.md

@@ -4,7 +4,11 @@ http://visjs.org
 
 ## not yet released, version 3.4.1
 
+### Network
 
+- Fix for introduced bug on zoomExtent navigation button.
+- Added animation to zoomExtent navigation button.
+- Improved cleaning of Hammer.js bindings.
 
 ## 2014-09-10, version 3.4.0
 

lib/network/Network.js

@@ -218,6 +218,7 @@ function Network (container, data, options) {
 
   this.hoverObj = {nodes:{},edges:{}};
   this.controlNodesActive = false;
+  this.navigationHammers = {existing:[], new: []};
 
   // animation properties
   this.animationSpeed = 1/this.renderRefreshRate;
@@ -255,6 +256,7 @@ function Network (container, data, options) {
   // load the selection system. (mandatory, required by Network)
   this._loadHierarchySystem();
 
+
   /*
    * Easing Functions - inspired from http://gizma.com/easing/
    * only considering the t value for the range [0, 1] => [0, 1]
@@ -478,7 +480,6 @@ Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableSt
   }
 
   var range = this._getRange();
-  var scale = this._getScale();
   var zoomLevel;
 
   if (initialZoom == true) {
@@ -2441,7 +2442,6 @@ Network.prototype._transitionRedraw = function (easingTime) {
 
   this._classicRedraw();
   this.moving = true;
-
   // cleanup
   if (this.easingTime >= 1.0) {
     this.easingTime = 0;

lib/network/mixins/MixinLoader.js

@@ -179,7 +179,6 @@ exports._loadManipulationSystem = function () {
  */
 exports._loadNavigationControls = function () {
   this._loadMixin(NavigationMixin);
-
   // the clean function removes the button divs, this is done to remove the bindings.
   this._cleanNavigation();
   if (this.constants.navigation.enabled == true) {

lib/network/mixins/NavigationMixin.js

@@ -2,12 +2,19 @@ var util = require('../../util');
 var Hammer = require('../../module/hammer');
 
 exports._cleanNavigation = function() {
+  // clean hammer bindings
+  if (this.navigationHammers.existing.length != 0) {
+    for (var i = 0; i < this.navigationHammers.existing.length; i++) {
+      this.navigationHammers.existing[i].dispose();
+    }
+    this.navigationHammers.existing = [];
+  }
+
   // clean up previous navigation items
   var wrapper = document.getElementById('network-navigation_wrapper');
   if (wrapper && wrapper.parentNode) {
     wrapper.parentNode.removeChild(wrapper);
   }
-  document.onmouseup = null;
 };
 
 /**
@@ -23,23 +30,43 @@ exports._loadNavigationElements = function() {
 
   this.navigationDivs = {};
   var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
-  var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
+  var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
 
   this.navigationDivs['wrapper'] = document.createElement('div');
   this.navigationDivs['wrapper'].id = 'network-navigation_wrapper';
   this.frame.appendChild(this.navigationDivs['wrapper']);
 
-  var me = this;
   for (var i = 0; i < navigationDivs.length; i++) {
     this.navigationDivs[navigationDivs[i]] = document.createElement('div');
     this.navigationDivs[navigationDivs[i]].id = 'network-navigation_' + navigationDivs[i];
     this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
     this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+
     var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
-    hammer.on('touch', me[navigationDivActions[i]].bind(me));
+    hammer.on('touch', this[navigationDivActions[i]].bind(this));
+    this.navigationHammers.new.push(hammer);
+  }
+
+  var hammerDoc = Hammer(document, {prevent_default: false});
+  hammerDoc.on('release', this._stopMovement.bind(this));
+  this.navigationHammers.new.push(hammerDoc);
+
+  this.navigationHammers.existing = this.navigationHammers.new;
+};
+
+
+/**
+ * this stops all movement induced by the navigation buttons
+ *
+ * @private
+ */
+exports._zoomExtent = function(event) {
+  // FIXME: this is a workaround because the binding of Hammer on Document makes this fire twice
+  if (this._zoomExtentLastTime === undefined || new Date() - this._zoomExtentLastTime > 50) {
+    this._zoomExtentLastTime = new Date();
+    this.zoomExtent({duration:800});
+    event.stopPropagation();
   }
-  var hammer = Hammer(document, {prevent_default: false});
-  hammer.on('release', me._stopMovement.bind(me));
 };
 
 /**