- added locked to focusOnNode

HISTORY.md

@@ -8,6 +8,7 @@ http://visjs.org
 
 - Changed timings for zoomExtent animation.
 - Fixed possible cause of freezing graph when animating.
+- Added locked to focusOnNode and releaseNode().
 
 
 ## 2014-10-11, version 3.4.1

docs/network.html

@@ -2158,6 +2158,7 @@ var options: {
         The options that can be defined are:<br />
         <b><code>scale:Number</code></b><br /> - to zoom to that scale,<br />
         <b><code>offset:{x:Number, y:Number}</code></b><br /> - to offset the position from the center of the canvas (in DOM units),<br />
+        <b><code>locked: boolean</code></b><br /> - if true, the view remains locked on this node until either another focusOnNode, moveTo, releaseNode or drag is done <br />
         <b><code>animation: Object || Boolean</code></b><br /> - to define the specifics of the animation. True is animated with default settings, false is not animated.<br />
         <br />
         The animation object can consist of:<br />
@@ -2168,6 +2169,12 @@ var options: {
             easeInQuint, easeOutQuint, easeInOutQuint </code> <br /><br />
     </td>
   </tr>
+  <tr>
+    <td>releaseNode()</td>
+    <td>none</td>
+    <td>When locked on to a node, this function releases it again. If the view is not locked onto a node due to the focusOnNode locked option, nothing happens.
+    </td>
+  </tr>
   <tr>
     <td>storePosition()</td>
     <td>none</td>

examples/network/02_random_nodes.html

@@ -76,7 +76,7 @@
         nodes: nodes,
         edges: edges
       };
-      var options = {edges:{widthSelectionMultiplier:1}};
+      var options = {stabilize:false};
       network = new vis.Network(container, data, options);
 
       // add event listeners
@@ -86,10 +86,12 @@
       });
       network.on('stabilized', function (params) {
           document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
+          doFocus = false;
       });
 
-    }
 
+      network.focusOnNode(0,{animation:false, locked: true});
+    }
   </script>
 </head>
 

lib/network/Network.js

@@ -228,6 +228,8 @@ function Network (container, data, options) {
   this.targetScale = 0;
   this.sourceTranslation = 0;
   this.targetTranslation = 0;
+  this.lockedOnNodeId = null;
+  this.lockedOnNodeOffset = null;
 
   // Node variables
   var network = this;
@@ -896,6 +898,8 @@ Network.prototype._handleOnDrag = function(event) {
     return;
   }
 
+  this.releaseNode();
+
   var pointer = this._getPointer(event.gesture.center);
 
   var me = this;
@@ -2273,6 +2277,7 @@ Network.prototype.focusOnNode = function (nodeId, options) {
     }
     var nodePosition = {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
     options.position = nodePosition;
+    options.lockedOnNode = nodeId;
 
     this.moveTo(options)
   }
@@ -2324,6 +2329,13 @@ Network.prototype.animateView = function (options) {
     return;
   }
 
+  // release if something focussed on the node
+  this.releaseNode();
+  if (options.locked == true) {
+    this.lockedOnNodeId = options.lockedOnNode;
+    this.lockedOnNodeOffset = options.offset;
+  }
+
   // forcefully complete the old animation if it was still running
   if (this.easingTime != 0) {
     this._transitionRedraw(1); // by setting easingtime to 1, we finish the animation.
@@ -2348,9 +2360,15 @@ Network.prototype.animateView = function (options) {
 
   // if the time is set to 0, don't do an animation
   if (options.animation.duration == 0) {
-    this._setScale(this.targetScale);
-    this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
-    this._redraw();
+    if (this.lockedOnNodeId != null) {
+      this._classicRedraw = this._redraw;
+      this._redraw = this._lockedRedraw;
+    }
+    else {
+      this._setScale(this.targetScale);
+      this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
+      this._redraw();
+    }
   }
   else {
     this.animationSpeed = 1 / (this.renderRefreshRate * options.animation.duration * 0.001) || 1 / this.renderRefreshRate;
@@ -2364,6 +2382,31 @@ Network.prototype.animateView = function (options) {
 };
 
 
+Network.prototype._lockedRedraw = function () {
+  var nodePosition = {x: this.nodes[this.lockedOnNodeId].x, y: this.nodes[this.lockedOnNodeId].y};
+  var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
+  var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
+    x: viewCenter.x - nodePosition.x,
+    y: viewCenter.y - nodePosition.y
+  };
+  var sourceTranslation = this._getTranslation();
+  var targetTranslation = {
+    x: sourceTranslation.x + distanceFromCenter.x * this.scale + this.lockedOnNodeOffset.x,
+    y: sourceTranslation.y + distanceFromCenter.y * this.scale + this.lockedOnNodeOffset.y
+  };
+
+  this._setTranslation(targetTranslation.x,targetTranslation.y);
+  this._classicRedraw();
+}
+
+Network.prototype.releaseNode = function () {
+  if (this.lockedOnNodeId != null) {
+    this._redraw = this._classicRedraw;
+    this.lockedOnNodeId = null;
+    this.lockedOnNodeOffset = null;
+  }
+}
+
 /**
  *
  * @param easingTime
@@ -2383,10 +2426,16 @@ Network.prototype._transitionRedraw = function (easingTime) {
 
   this._classicRedraw();
   this.moving = true;
+
   // cleanup
   if (this.easingTime >= 1.0) {
     this.easingTime = 0;
-    this._redraw = this._classicRedraw;
+    if (this.lockedOnNodeId != null) {
+      this._redraw = this._lockedRedraw;
+    }
+    else {
+      this._redraw = this._classicRedraw;
+    }
     this.emit("animationFinished");
   }
 };