- Renamed storePosition to storePositions. Added deprication message and old name still works.

- Worked around hammer.js bug with multiple release listeners.
- Improved cleaning up after manipulation toolbar.
- Added getPositions() method to get the position of all nodes.
- Added getCenterCoordinates() method to get the x and y position in canvas space of the center of the view.

HISTORY.md

@@ -1,6 +1,15 @@
 # vis.js history
 http://visjs.org
 
+## 2014-10-16, version 3.5.1 SNAPSHOT, not yet released
+
+### Network
+
+- Renamed storePosition to storePositions. Added deprication message and old name still works.
+- Worked around hammer.js bug with multiple release listeners.
+- Improved cleaning up after manipulation toolbar.
+- Added getPositions() method to get the position of all nodes.
+- Added getCenterCoordinates() method to get the x and y position in canvas space of the center of the view.
 
 ## 2014-10-16, version 3.5.0
 

docs/network.html

@@ -648,8 +648,8 @@ var options = {
   <td>Boolean</td>
   <td>false</td>
   <td>
-    With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
-    to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
+    With the advent of the storePositions() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
+    to speed up the initialization of the network by using storePositions() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
     an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions.
   </td>
 </tr>
@@ -2139,6 +2139,12 @@ var options: {
             Zooming in is > 1.0, zooming out is < 0. Scale cannot be smaller or equal to 0.
         </td>
     </tr>
+    <tr>
+        <td>getCenterCoordinates()</td>
+        <td>Number</td>
+        <td>Returns the x and y coodinates of the center of the screen (in canvas space).
+        </td>
+    </tr>
     <tr>
     <td>getSelection()</td>
     <td>Array of ids</td>
@@ -2171,13 +2177,6 @@ var options: {
     <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>
-    <td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
-      You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
-    </td>
-  </tr>
   <tr>
     <td>DOMtoCanvas(pos)</td>
     <td>object</td>
@@ -2285,7 +2284,19 @@ var options: {
       containing a new size for the visualization. Size can be provided in pixels
       or in percentages.</td>
   </tr>
-
+    <tr>
+        <td>getPositions()</td>
+        <td>none</td>
+        <td>This will return an object of all nodes' positions. Data can be accessed with object[nodeId].x and .y.
+        </td>
+    </tr>
+    <tr>
+        <td>storePositions()</td>
+        <td>none</td>
+        <td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
+            You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
+        </td>
+    </tr>
   <tr>
     <td>zoomExtent([options])</td>
     <td>none</td>
@@ -2439,7 +2450,7 @@ network.off('select', onSelect);
     </tr>
   <tr>
     <td>stabilized</td>
-    <td>Fired every time the network has been stabilized. This event can be used to trigger the .storePosition() function after stabilization. Fired with an object having the following properties:</td>
+    <td>Fired every time the network has been stabilized. This event can be used to trigger the .storePositions() function after stabilization. Fired with an object having the following properties:</td>
     <td>
       <ul>
         <li><code>iterations</code>: number of iterations used to stabilize</li>
@@ -2455,7 +2466,7 @@ network.off('select', onSelect);
   </tr>
   <tr>
     <td>zoom</td>
-    <td>Fired when the network has zoomed.  This event can be used to trigger the .storePosition() function after stabilization.</td>
+    <td>Fired when the network has zoomed.  This event can be used to trigger the .storePositions() function after stabilization.</td>
     <td>
       <ul>
         <li><code>direction: </code> "+" or "-" </li>

examples/network/ex.html

@@ -1,184 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Network | Random nodes</title>
-
-  <style type="text/css">
-    body {
-      font: 10pt sans;
-    }
-    #mynetwork {
-        width: 600px;
-        height: 600px;
-      border: 1px solid lightgray;
-    }
-  </style>
-
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-
-  <script type="text/javascript">
-      var nodes = null;
-      var edges = null;
-      var network = null;
-
-      function draw() {
-      nodes = new vis.DataSet([{
-          id: '1001',
-          value: '1'
-      }, {
-          id: '1009',
-          value: '2'
-      }, {
-          id: '1061',
-          value: '3'
-      }, {
-          id: '1226',
-          value: '4'
-      }]);
-      edges = new vis.DataSet([{
-          id: '1001_1061',
-          from: '1001',
-          to: '1061',
-          value: '1'
-      }, {
-          id: '1001_1226',
-          from: '1001',
-          to: '1226',
-          value: '1'
-      }, {
-          id: '1009_1061',
-          from: '1009',
-          to: '1061',
-          value: '2'
-      }, {
-          id: '1009_1226',
-          from: '1009',
-          to: '1226',
-          value: '1'
-      }, {
-          id: '1061_1226',
-          from: '1061',
-          to: '1226',
-          value: '1'
-      }]);
-      var container = document.getElementById('mynetwork');
-      var data = {
-          nodes: nodes,
-          edges: edges
-      };
-      var nodeNormalColor = { // For 'normal' nodes
-          background: '#92bbc7',
-          border: '#5d93a6',
-          borderWidth: 2,
-          highlight: {
-              background: '#5d93a6',
-              border: '#537286'
-          }
-      };
-      var nodeBlurColor = { // For 'blurred' nodes
-          background: '#f0f0f0',
-          border: '#f0f0f0'
-      };
-
-      var edgeNormalColor = {
-          color: '#5d93a6',
-          highlight: '#28132b'
-      };
-      var edgeBlurColor = {
-          color: '#f0f0f0',
-          highlight: '#f0f0f0'
-      };
-
-      var options = {
-          nodes: {
-              shape: 'dot',
-              color: nodeNormalColor
-          },
-          edges: {
-              inheritColor: false,
-              color: edgeNormalColor,
-              widthSelectionMultiplier: 1
-          },
-          physics: {
-              'barnesHut': {
-                  centralGravity: 0.5,
-                  springLength: 150,
-                  springConstant: 0.03,
-                  damping: 0.2
-              }
-          }
-      };
-      network = new vis.Network(container, data, options);
-
-      // add event listeners
-      network.on('select', function (params) {
-          console.log(params.edges);
-
-          var nodesData = {};
-          var edgesData = {};
-          var nodeResetQuery = [];
-          var edgeResetQuery = [];
-
-          var allEdges = edges.get();
-          var allNodes = nodes.get();
-          for (var i = 0; i < allNodes.length; i++) {
-              nodesData[allNodes[i].id] = {id:allNodes[i].id, color: nodeBlurColor};
-              nodeResetQuery.push({id:allNodes[i].id, color: nodeNormalColor});
-
-          }
-          for (var i = 0; i < allEdges.length; i++) {
-              edgesData[allEdges[i].id] = {id:allEdges[i].id, color: edgeBlurColor};
-              edgeResetQuery.push({id:allEdges[i].id, color: edgeNormalColor});
-          }
-
-          // deselect
-          if (params.nodes.length == 0 && params.edges.length == 0) {
-             nodes.update(nodeResetQuery);
-             edges.update(edgeResetQuery);
-             return;
-          }
-
-          // paint nodes and edges.
-          for (var i = 0; i < params.nodes.length; i++) {
-              nodesData[params.nodes[i]].color = nodeNormalColor;
-          }
-          for (var i = 0; i < params.edges.length; i++) {
-              edgesData[params.edges[i]].color = edgeNormalColor;
-              var selEdge = edges.get(params.edges[i]);
-              nodesData[selEdge.to].color = nodeNormalColor;
-              nodesData[selEdge.from].color = nodeNormalColor;
-          }
-
-          var nodeUpdateQuery = [];
-          var edgeUpdateQuery = [];
-          for (var nodeId in nodesData) {
-              if (nodesData.hasOwnProperty(nodeId)) {
-                  nodeUpdateQuery.push(nodesData[nodeId]);
-              }
-          }
-          for (var edgeId in edgesData) {
-              if (edgesData.hasOwnProperty(edgeId)) {
-                  edgeUpdateQuery.push(edgesData[edgeId]);
-              }
-          }
-
-          nodes.update(nodeUpdateQuery);
-          edges.update(edgeUpdateQuery);
-//          nodes.update(nodeResetQuery);
-//          edges.update(edgeResetQuery);
-//          nodes.update(nodeUpdateQuery);
-//          edges.update(edgeUpdateQuery);
-          });}
-
-
-  </script>
-</head>
-
-<body onload="draw();">
-<br>
-<div id="mynetwork"></div>
-
-<p id="selection"></p>
-</body>
-</html>

lib/network/Network.js

@@ -450,10 +450,10 @@ Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableSt
     zoomLevel *= factor;
   }
   else {
-    var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
-    var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
+    var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
+    var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
 
-    var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
+    var xZoomLevel = this.frame.canvas.clientWidth  / xDistance;
     var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
 
     zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
@@ -2254,6 +2254,14 @@ Network.prototype._initializeMixinLoaders = function () {
  * Load the XY positions of the nodes into the dataset.
  */
 Network.prototype.storePosition = function() {
+  console.log("storePosition is depricated: use .storePositions() from now on.")
+  storePositions();
+};
+
+/**
+ * Load the XY positions of the nodes into the dataset.
+ */
+Network.prototype.storePositions = function() {
   var dataArray = [];
   for (var nodeId in this.nodes) {
     if (this.nodes.hasOwnProperty(nodeId)) {
@@ -2268,6 +2276,21 @@ Network.prototype.storePosition = function() {
   this.nodesData.update(dataArray);
 };
 
+/**
+ * Load the XY positions of the nodes into the dataset.
+ */
+Network.prototype.getPositions = function() {
+  var dataArray = {};
+  for (var nodeId in this.nodes) {
+    if (this.nodes.hasOwnProperty(nodeId)) {
+      var node = this.nodes[nodeId];
+      dataArray[nodeId] = {x:Math.round(node.x),y:Math.round(node.y)};
+    }
+  }
+  return dataArray;
+};
+
+
 
 /**
  * Center a node in view.
@@ -2476,5 +2499,13 @@ Network.prototype.getScale = function () {
 };
 
 
+/**
+ * Returns the scale
+ * @returns {Number}
+ */
+Network.prototype.getCenterCoordinates = function () {
+  return this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
+};
+
 
 module.exports = Network;

lib/network/mixins/ManipulationMixin.js

@@ -11,6 +11,11 @@ exports._clearManipulatorBar = function() {
   while (this.manipulationDiv.hasChildNodes()) {
     this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
   }
+
+  this._manipulationReleaseOverload = function () {};
+  delete this.sectors['support']['nodes']['targetNode'];
+  delete this.sectors['support']['nodes']['targetViaNode'];
+  this.controlNodesActive = false;
 };
 
 /**
@@ -219,11 +224,11 @@ exports._createAddEdgeToolbar = function() {
 
   // temporarily overload functions
   this.cachedFunctions["_handleTouch"] = this._handleTouch;
-  this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+  this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
   this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
   this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
   this._handleTouch = this._handleConnect;
-  this._handleOnRelease = function () {};
+  this._manipulationReleaseOverload = function () {};
   this._handleDragStart = function () {};
   this._handleDragEnd = this._finishConnect;
 
@@ -263,7 +268,7 @@ exports._createEditEdgeToolbar = function() {
 
   // temporarily overload functions
   this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-  this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+  this.cachedFunctions["_manipulationReleaseOverload"]  = this._manipulationReleaseOverload;
   this.cachedFunctions["_handleTap"]        = this._handleTap;
   this.cachedFunctions["_handleDragStart"]  = this._handleDragStart;
   this.cachedFunctions["_handleOnDrag"]     = this._handleOnDrag;
@@ -271,7 +276,7 @@ exports._createEditEdgeToolbar = function() {
   this._handleTap       = function () {};
   this._handleOnDrag    = this._controlNodeDrag;
   this._handleDragStart = function () {}
-  this._handleOnRelease = this._releaseControlNode;
+  this._manipulationReleaseOverload = this._releaseControlNode;
 
   // redraw to show the unselect
   this._redraw();

lib/network/mixins/NavigationMixin.js

@@ -10,6 +10,8 @@ exports._cleanNavigation = function() {
     this.navigationHammers.existing = [];
   }
 
+  this._navigationReleaseOverload = function () {};
+
   // clean up previous navigation items
   var wrapper = document.getElementById('network-navigation_wrapper');
   if (wrapper && wrapper.parentNode) {
@@ -47,9 +49,7 @@ exports._loadNavigationElements = function() {
     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._navigationReleaseOverload = this._stopMovement;
 
   this.navigationHammers.existing = this.navigationHammers.new;
 };
@@ -61,12 +61,8 @@ exports._loadNavigationElements = function() {
  * @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 > 200) {
-    this._zoomExtentLastTime = new Date();
-    this.zoomExtent({duration:800});
-    event.stopPropagation();
-  }
+  this.zoomExtent({duration:800});
+  event.stopPropagation();
 };
 
 /**

lib/network/mixins/SelectionMixin.js

@@ -545,15 +545,18 @@ exports._handleOnHold = function(pointer) {
 
 
 /**
- * handle the onRelease event. These functions are here for the navigation controls module.
+ * handle the onRelease event. These functions are here for the navigation controls module
+ * and data manipulation module.
  *
   * @private
  */
 exports._handleOnRelease = function(pointer) {
-
+  this._manipulationReleaseOverload(pointer);
+  this._navigationReleaseOverload(pointer);
 };
 
-
+exports._manipulationReleaseOverload = function (pointer) {};
+exports._navigationReleaseOverload = function (pointer) {};
 
 /**
  *