added documentation

HISTORY.md

@@ -13,9 +13,10 @@ http://visjs.org
 - Added fade in of labels (on nodes) near the fontDrawThreshold.
 - Added nodes option to zoomExtent to zoom in on specific set of nodes.
 - Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized.
-- Added setFreezeSimulation method.
-- Added clusterByZoom option and increaseClusterLevel and decreaseClusterLevel methods.
+- Added freezeSimulation method.
+- Added clusterByZoom option.
 - Fixed bug when redrawing was not right on zoomed-out browsers.
+- Added opacity to edges. Opacity is only used for the unselected state.
 
 
 ### DataSet/DataView

dist/vis.js

@@ -23037,7 +23037,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this.setOptions(options);
 
     // other vars
-    this.freezeSimulation = false;// freeze the simulation
+    this.freezeSimulationEnabled = false;// freeze the simulation
     this.cachedFunctions = {};
     this.startedStabilization = false;
     this.stabilized = false;
@@ -25055,7 +25055,7 @@ return /******/ (function(modules) { // webpackBootstrap
    * @private
    */
   Network.prototype._physicsTick = function() {
-    if (!this.freezeSimulation) {
+    if (!this.freezeSimulationEnabled) {
       if (this.moving == true) {
         var mainMovingStatus = false;
         var supportMovingStatus = false;
@@ -25195,13 +25195,13 @@ return /******/ (function(modules) { // webpackBootstrap
   /**
    *  Freeze the _animationStep
    */
-  Network.prototype.setFreezeSimulation = function(freeze) {
+  Network.prototype.freezeSimulation = function(freeze) {
     if (freeze == true) {
-      this.freezeSimulation = true;
+      this.freezeSimulationEnabled = true;
       this.moving = false;
     }
     else {
-      this.freezeSimulation = false;
+      this.freezeSimulationEnabled = false;
       this.moving = true;
       this.start();
     }
@@ -33378,7 +33378,7 @@ return /******/ (function(modules) { // webpackBootstrap
     delete this.sectors['support']['nodes']['targetNode'];
     delete this.sectors['support']['nodes']['targetViaNode'];
     this.controlNodesActive = false;
-    this.freezeSimulation = false;
+    this.freezeSimulationEnabled = false;
   };
 
   /**
@@ -33447,7 +33447,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this._restoreOverloadedFunctions();
 
     // resume calculation
-    this.freezeSimulation = false;
+    this.freezeSimulationEnabled = false;
 
     // reset global variables
     this.blockConnectingEdgeSelection = false;
@@ -33617,7 +33617,7 @@ return /******/ (function(modules) { // webpackBootstrap
     // clear the toolbar
     this._clearManipulatorBar();
     this._unselectAll(true);
-    this.freezeSimulation = true;
+    this.freezeSimulationEnabled = true;
 
     if (this.boundFunction) {
       this.off('select', this.boundFunction);
@@ -33748,7 +33748,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
     if (this.selectedControlNode !== null) {
       this.selectedControlNode.select();
-      this.freezeSimulation = true;
+      this.freezeSimulationEnabled = true;
     }
     this._redraw();
   };
@@ -33792,7 +33792,7 @@ return /******/ (function(modules) { // webpackBootstrap
     else {
       this.edgeBeingEdited._restoreControlNodes();
     }
-    this.freezeSimulation = false;
+    this.freezeSimulationEnabled = false;
     this._redraw();
   };
 

docs/network.html

@@ -959,6 +959,38 @@ mySize = minSize + diff * scale;
         <td>14</td>
         <td>Font size in pixels for label in the node.</td>
     </tr>
+    <tr>
+        <td>scaleFontWithValue</td>
+        <td>Boolean</td>
+        <td>false</td>
+        <td>When using values, you can let the font scale with the size of the nodes if you enable the this option.</td>
+    </tr>
+    <tr>
+        <td>fontSizeMin</td>
+        <td>Number</td>
+        <td>14</td>
+        <td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the minimum value of the fontSize.</td>
+    </tr>
+    <tr>
+        <td></td>fontSizeMax</td>
+        <td>Number</td>
+        <td>30</td>
+        <td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the maximum value of the fontSize.</td>
+    </tr>
+    <tr>
+        <td>fontSizeMaxVisible</td>
+        <td>Number</td>
+        <td>30</td>
+        <td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. If you have a wide distribution of values and have a large max fontSize,
+            the text will become huge if you zoom in on it. This option limits the percieved fontSize to avoid this. If you set it to 20, no label will be larger than fontsize 20 (at scale = 1) regardless of the scale.</td>
+    </tr>
+    <tr>
+        <td>fontDrawThreshold</td>
+        <td>Number</td>
+        <td>3</td>
+        <td>When zooming out, the text becomes smaller. This option sets the minimum size of the label before not being drawn. Just like the fontSizeMaxVisible option, this is the relative fontSize (fontSize * scale).
+        You can combine this with the min and max values to have the labels of influential nodes show earlier when zooming in.</td>
+    </tr>
     <tr>
         <td class="greenField">fontFill</td>
         <td>String</td>
@@ -1229,7 +1261,12 @@ var options = {
       <td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge. 
 	  If <code>horizontal</code> it will align the label absolute horizontial.</td>
   </tr>
-
+    <tr>
+        <td class="greenField">opacity</td>
+        <td>Number</td>
+        <td>1.0</td>
+        <td>Possible values: <code>[0 .. 1]</code>. This opacity value is added on top of the color information. This only happens for the unselected state.</td>
+    </tr>
   <tr>
    <td class="greenField">style</td>
       <td>string</td>
@@ -1759,7 +1796,8 @@ var options = {
                     radius: 1},
       maxNodeSizeIncrements: 600,
       activeAreaBoxSize: 100,
-      clusterLevelDifference: 2
+      clusterLevelDifference: 2,
+      clusterByZoom: true
     }
 }
 // OR to just load the module with default values:
@@ -1902,6 +1940,12 @@ var options = {
       If the highest level of your network at any given time is 3, nodes that have not clustered or
       have clustered only once will join their neighbour with the lowest cluster level.</td>
   </tr>
+    <tr>
+        <td>clusterByZoom</td>
+        <td>Boolean</td>
+        <td>true</td>
+        <td>You can toggle the clustering by zoom level using this option.</td>
+    </tr>
 </table>
 
 <h3 id="Navigation_controls">Navigation controls</h3>
@@ -2246,6 +2290,13 @@ var options = {
     <td>Returns a bounding box for the node including label in the format: {top:Number,left:Number,right:Number,bottom:Number}. These values are in canvas space.
     </td>
   </tr>
+    <tr>
+        <td>getConnectedNodes(nodeId)</td>
+        <td>Array</td>
+        <td>Returns an array with nodeIds of nodes that are connected to this node. Network keeps track of the connected nodes so this function allows you
+            to quickly get them without iterating over all edges manually. This is a lot faster for cases with many edges.
+        </td>
+    </tr>
     <tr>
     <td>getSelection()</td>
     <td>Array of ids</td>
@@ -2272,6 +2323,13 @@ var options = {
             easeInQuint, easeOutQuint, easeInOutQuint </code> <br /><br />
     </td>
   </tr>
+    <tr>
+        <td>freezeSimulation(Boolean)</td>
+        <td>none</td>
+        <td>Calling freezeSimulation(true) immmediately stops the simulation and triggerst the stabilized event. This does not mean that the network
+            is physically stabilized but the nodes are not moving anymore. To continue the simulation call freezeSimulation(false).
+        </td>
+    </tr>
   <tr>
     <td>releaseNode()</td>
     <td>none</td>

examples/network/29_neighbourhood_highlight.html

@@ -10027,7 +10027,12 @@ function redrawAll() {
             radiusMin: 10,
             radiusMax: 30,
             fontSize: 12,
-            fontFace: "Tahoma"
+            fontFace: "Tahoma",
+            scaleFontWithValue:true,
+            fontSizeMin:8,
+            fontSizeMax:20,
+            fontThreshold:12,
+            fontSizeMaxVisible:20
         },
         edges: {
             width: 0.15,
@@ -10047,7 +10052,7 @@ function redrawAll() {
     };
 
     network = new vis.Network(container, data, options);
-//    network.on("click",onClick);
+    network.on("click",onClick);
 }
 
 
@@ -10071,8 +10076,6 @@ function onClick(selectedItems) {
         }
     }
     else {
-        var allEdges = edges.get();
-
         // we clear the level of separation in all nodes.
         clearLevelOfSeperation(allNodes);
 
@@ -10083,7 +10086,7 @@ function onClick(selectedItems) {
         // any data can be added to a node, this is just stored in the nodeObject.
         storeLevelOfSeperation(connectedNodes,0, allNodes);
         for (var i = 1; i < degrees + 1; i++) {
-            appendConnectedNodes(connectedNodes, allEdges);
+            appendConnectedNodes(connectedNodes);
             storeLevelOfSeperation(connectedNodes, i, allNodes);
         }
         for (nodeId in allNodes) {
@@ -10153,7 +10156,7 @@ function clearLevelOfSeperation(allNodes) {
  *
  *
  */
-function appendConnectedNodes(sourceNodes, allEdges) {
+function appendConnectedNodes(sourceNodes) {
     var tempSourceNodes = [];
     // first we make a copy of the nodes so we do not extend the array we loop over.
     for (var i = 0; i < sourceNodes.length; i++) {
@@ -10165,7 +10168,8 @@ function appendConnectedNodes(sourceNodes, allEdges) {
         if (sourceNodes.indexOf(nodeId) == -1) {
             sourceNodes.push(nodeId);
         }
-        addUnique(getConnectedNodes(nodeId, allEdges),sourceNodes);
+        var connectedNodes = network.getConnectedNodes(nodeId);
+        addUnique(connectedNodes,sourceNodes);
     }
     tempSourceNodes = null;
 }
@@ -10183,27 +10187,6 @@ function addUnique(fromArray, toArray) {
     }
 }
 
-/**
- * Get a list of nodes that are connected to the supplied nodeId with edges.
- * @param nodeId
- * @returns {Array}
- */
-function getConnectedNodes(nodeId, allEdges) {
-    var edgesArray = allEdges;
-    var connectedNodes = [];
-
-    for (var i = 0; i < edgesArray.length; i++) {
-        var edge = edgesArray[i];
-        if (edge.to == nodeId) {
-            connectedNodes.push(edge.from);
-        }
-        else if (edge.from == nodeId) {
-            connectedNodes.push(edge.to)
-        }
-    }
-    return connectedNodes;
-}
-
 redrawAll()
 
 </script>

lib/network/Network.js

@@ -292,7 +292,7 @@ function Network (container, data, options) {
   this.setOptions(options);
 
   // other vars
-  this.freezeSimulation = false;// freeze the simulation
+  this.freezeSimulationEnabled = false;// freeze the simulation
   this.cachedFunctions = {};
   this.startedStabilization = false;
   this.stabilized = false;
@@ -2310,7 +2310,7 @@ Network.prototype._revertPhysicsTick = function() {
  * @private
  */
 Network.prototype._physicsTick = function() {
-  if (!this.freezeSimulation) {
+  if (!this.freezeSimulationEnabled) {
     if (this.moving == true) {
       var mainMovingStatus = false;
       var supportMovingStatus = false;
@@ -2450,13 +2450,13 @@ Network.prototype._handleNavigation = function() {
 /**
  *  Freeze the _animationStep
  */
-Network.prototype.setFreezeSimulation = function(freeze) {
+Network.prototype.freezeSimulation = function(freeze) {
   if (freeze == true) {
-    this.freezeSimulation = true;
+    this.freezeSimulationEnabled = true;
     this.moving = false;
   }
   else {
-    this.freezeSimulation = false;
+    this.freezeSimulationEnabled = false;
     this.moving = true;
     this.start();
   }

lib/network/mixins/ManipulationMixin.js

@@ -15,7 +15,7 @@ exports._clearManipulatorBar = function() {
   delete this.sectors['support']['nodes']['targetNode'];
   delete this.sectors['support']['nodes']['targetViaNode'];
   this.controlNodesActive = false;
-  this.freezeSimulation = false;
+  this.freezeSimulationEnabled = false;
 };
 
 /**
@@ -84,7 +84,7 @@ exports._createManipulatorBar = function() {
   this._restoreOverloadedFunctions();
 
   // resume calculation
-  this.freezeSimulation = false;
+  this.freezeSimulationEnabled = false;
 
   // reset global variables
   this.blockConnectingEdgeSelection = false;
@@ -254,7 +254,7 @@ exports._createAddEdgeToolbar = function() {
   // clear the toolbar
   this._clearManipulatorBar();
   this._unselectAll(true);
-  this.freezeSimulation = true;
+  this.freezeSimulationEnabled = true;
 
   if (this.boundFunction) {
     this.off('select', this.boundFunction);
@@ -385,7 +385,7 @@ exports._selectControlNode = function(pointer) {
   this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
   if (this.selectedControlNode !== null) {
     this.selectedControlNode.select();
-    this.freezeSimulation = true;
+    this.freezeSimulationEnabled = true;
   }
   this._redraw();
 };
@@ -429,7 +429,7 @@ exports._releaseControlNode = function(pointer) {
   else {
     this.edgeBeingEdited._restoreControlNodes();
   }
-  this.freezeSimulation = false;
+  this.freezeSimulationEnabled = false;
   this._redraw();
 };