Released v3.5.0

docs/graph2d.html

@@ -853,17 +853,7 @@ Graph2d.clear({options: true}); // clear options only
 </p>
 
 <p>
-  Here an example on how to listen for a <code>rangeChanged</code> event.
-</p>
-
-<pre class="prettyprint lang-js">
-Graph2d.on('select', function (properties) {
-  alert('selected items: ' + properties.nodes);
-});
-</pre>
-
-<p>
-  A listener can be removed via the function <code>off</code>:
+  Here an example on how to listen for a <code>rangeChanged</code> event.  A listener can be removed via the function <code>off</code>:
 </p>
 
 <pre class="prettyprint lang-js">

docs/network.html

@@ -280,17 +280,13 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>allowedToMoveX</td>
   <td>Boolean</td>
   <td>no</td>
-  <td>If allowedToMoveX is false, then the node will not move from its supplied position.
-    If an X position has been supplied, it is fixed in the X-direction.
-    If no X value has been supplied, this argument will not do anything.</td>
+  <td>If allowedToMoveX is false, then the node will not move in the X direction from its position.</td>
 </tr>
 <tr>
   <td>allowedToMoveY</td>
   <td>Boolean</td>
   <td>no</td>
-  <td>If allowedToMoveY is false, then the node will not move from its supplied position.
-    If an Y position has been supplied, it is fixed in the Y-direction.
-    If no Y value has been supplied, this argument will not do anything.</td>
+  <td>If allowedToMoveY is false, then the node will not move in the Y direction from its position.</td>
 </tr>
 
 <tr>
@@ -344,7 +340,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>number</td>
   <td>no</td>
   <td>Horizontal position in pixels.
-    The horizontal position of the node will be fixed.
+    The horizontal position of the node will be fixed unless combined with the allowedToMoveX:true option.
     The vertical position y may remain undefined.</td>
 </tr>
 <tr>
@@ -352,7 +348,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>number</td>
   <td>no</td>
   <td>Vertical position in pixels.
-    The vertical position of the node will be fixed.
+    The vertical position of the node will be fixed unless combined with the allowedToMoveY:true option.
     The horizontal position x may remain undefined.</td>
 </tr>
 </table>
@@ -2423,6 +2419,24 @@ network.off('select', onSelect);
       </ul>
     </td>
   </tr>
+    <tr>
+        <td>dragStart</td>
+        <td>Fired when a node is being dragged.</td>
+        <td>
+            <ul>
+                <li><code>nodeIds</code>: Array of ids of the nodes that are being dragged</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>dragEnd</td>
+        <td>Fired when the dragging of a node(s) has ended.</td>
+        <td>
+            <ul>
+                <li><code>nodeIds</code>: Array of ids of the nodes that were being dragged</li>
+            </ul>
+        </td>
+    </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>

examples/network/02_random_nodes.html

@@ -30,7 +30,7 @@
       // randomly create some nodes and edges
       var nodeCount = document.getElementById('nodeCount').value;
       for (var i = 0; i < nodeCount; i++) {
-        nodes.push({
+          nodes.push({
           id: i,
           label: String(i)
         });
@@ -69,26 +69,25 @@
           connectionCount[to]++;
         }
       }
-
       // create a network
       var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
       };
-      var options = {};
+      var options = {stabilization:false};
       network = new vis.Network(container, data, options);
 
       // add event listeners
       network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-          console.log(params)
       });
       network.on('stabilized', function (params) {
           document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
-          doFocus = false;
       });
     }
+
+
   </script>
 </head>
 

examples/network/ex.html

@@ -0,0 +1,184 @@
+<!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>

examples/timeline/03_performance.html

@@ -52,8 +52,8 @@
   var container = document.getElementById('visualization');
   var options = {
     editable: true,
-    start: now.clone().add('days', -3),
-    end: now.clone().add('days', 11),
+    start: now.clone().add(-3, 'days'),
+    end: now.clone().add(11, 'days'),
     zoomMin: 1000 * 60 * 60 * 24,          // a day
     zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
     //maxHeight: 300,

examples/timeline/05_groups.html

@@ -45,7 +45,7 @@
   // create a dataset with items
   var items = new vis.DataSet();
   for (var i = 0; i < itemCount; i++) {
-    var start = now.clone().add('hours', Math.random() * 200);
+    var start = now.clone().add(Math.random() * 200, 'hours');
     var group = Math.floor(Math.random() * groupCount);
     items.add({
       id: i,

index.html

@@ -74,7 +74,7 @@ bower install vis
 <h3>download</h3>
 
 <a href="download/vis.zip">Click here to download vis.js</a>
-(version <span class="version">3.4.2</span>)
+(version <span class="version">3.5.0</span>)
 
 
 <h2 id="example">Example</h2>