docs, bugfixes

dist/vis.js

@@ -25980,16 +25980,16 @@ return /******/ (function(modules) { // webpackBootstrap
           // __any__ is a wildcard. Any value is accepted and will be further analysed by reference.
           if (Validator.getType(options[option]) === 'object') {
             util.copyAndExtendArray(path, option);
-            Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions.__any__.__type__, path, true);
+            Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions.__any__.__type__, path);
           }
         } else {
           // Since all options in the reference are objects, we can check whether they are supposed to be object to look for the __type__ field.
           if (referenceOptions[option].__type__ !== undefined) {
             util.copyAndExtendArray(path, option);
             // if this should be an object, we check if the correct type has been supplied to account for shorthand options.
-            Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path, true);
+            Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path);
           } else {
-            Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path, false);
+            Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path);
           }
         }
       }
@@ -25998,15 +25998,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        *
-       * @param {String} option     | the option property
-       * @param {Object} options    | The supplied options object
-       * @param {Object} referenceOptions    | The reference options containing all options and their allowed formats
-       * @param {String} referenceOption     | Usually this is the same as option, except when handling an __any__ tag.
-       * @param {String} refOptionType       | This is the type object from the reference options
-       * @param path
-       * @param recursive
-       */
-      value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path, recursive) {
+       * @param {String}  option     | the option property
+       * @param {Object}  options    | The supplied options object
+       * @param {Object}  referenceOptions    | The reference options containing all options and their allowed formats
+       * @param {String}  referenceOption     | Usually this is the same as option, except when handling an __any__ tag.
+       * @param {String}  refOptionType       | This is the type object from the reference options
+       * @param {Array}   path      | where in the object is the option
+       */
+      value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
         var optionType = Validator.getType(options[option]);
         var refOptionType = refOptionObj[optionType];
         if (refOptionType !== undefined) {
@@ -26015,10 +26014,10 @@ return /******/ (function(modules) { // webpackBootstrap
             if (refOptionType.indexOf(options[option]) === -1) {
               console.log('%cInvalid option detected in "' + option + '".' + ' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
               errorFound = true;
-            } else if (recursive === true && optionType === 'object') {
+            } else if (optionType === 'object') {
               Validator.parse(options[option], referenceOptions[referenceOption], path);
             }
-          } else if (recursive === true && optionType === 'object') {
+          } else if (optionType === 'object') {
             Validator.parse(options[option], referenceOptions[referenceOption], path);
           }
         } else {
@@ -26212,7 +26211,7 @@ return /******/ (function(modules) { // webpackBootstrap
       __type__: { object: object }
     },
     clustering: {},
-    configuration: {
+    configure: {
       filter: { boolean: boolean, string: ['nodes', 'edges', 'layout', 'physics', 'manipulation', 'interaction', 'selection', 'rendering'], array: array },
       container: { dom: dom },
       __type__: { object: object, string: string, array: array, boolean: boolean }

docs/css/newdocs.css

@@ -94,6 +94,10 @@ pre.code {
     border:0px;
 }
 
+pre.top {
+    margin-left:20px;
+}
+
 tr.hidden {
     max-height:0;
     /*max-height: 0;*/
@@ -185,5 +189,9 @@ td.methodName {
 }
 
 pre.options {
-    max-width:500px;
+    max-width:600px;
+}
+
+pre.hidden {
+    display:none;
 }

docs/js/toggleTable.js

@@ -53,5 +53,32 @@ function toggleTable(tableId, parent, clickedRow) {
       spans[i].className = wasOpen === true ? 'right-caret' : 'caret';
     }
   }
+}
+
+function toggleTab(showTabId, showPreId, hideTabId, hidePreId) {
+  if (hideTabId !== undefined) {
+    document.getElementById(hideTabId).className = '';
+    document.getElementById(hidePreId).className = document.getElementById(hidePreId).className.replace(' hidden','');
+    document.getElementById(hidePreId).className += ' hidden';
+  }
+
+  document.getElementById('hiddenTab').className = '';
+  document.getElementById(showTabId).className = 'active';
+  document.getElementById(showPreId).className = document.getElementById(showPreId).className.replace(' hidden','');
+}
+
+
+function hideOptions(hideTabId1, hidePreId1, hideTabId2, hidePreId2) {
+  document.getElementById('hiddenTab').className = 'active';
+
+  document.getElementById(hideTabId1).className = '';
+  document.getElementById(hidePreId1).className = document.getElementById(hidePreId1).className.replace(' hidden','');
+  document.getElementById(hidePreId1).className += ' hidden';
+
+  if (hideTabId2 !== undefined) {
+    document.getElementById(hideTabId2).className = '';
+    document.getElementById(hidePreId2).className = document.getElementById(hidePreId2).className.replace(' hidden','');
+    document.getElementById(hidePreId2).className += ' hidden';
+  }
 
 }

docs/network/canvas.html

@@ -14,6 +14,7 @@
     <link href="../css/newdocs.css" rel="stylesheet">
 
     <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../js/toggleTable.js"></script>
     <script type="text/javascript" src="../js/googleAnalytics.js"></script>
     <script type="text/javascript" src="../js/prettify/prettify.js"></script>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -81,7 +82,13 @@
     <h3>Options</h3>
 
     <p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
-<pre class="prettyprint lang-js options">
+    <p>Click on the options shown to show how these options are supposed to be used.</p>
+    <ul class="nav nav-tabs">
+        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
+        <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
+    </ul>
+    <br>
+<pre class="prettyprint lang-js options hidden" id="fullOptions">
 var options = {
   canvas:{
     width:'100%',  // other format: '400px'

docs/network/configure.html

@@ -24,6 +24,7 @@
 
     <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
     <script type="text/javascript" src="../js/googleAnalytics.js"></script>
+    <script type="text/javascript" src="../js/toggleTable.js"></script>
     <script type="text/javascript" src="../js/prettify/prettify.js"></script>
 
     <script src="../js/smooth-scroll.min.js"></script>
@@ -85,8 +86,14 @@
     <p>Handles the HTML part of the canvas.</p>
 
     <h3>Options</h3>
-    <p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
-<pre class="prettyprint lang-js options">
+    <p>The options for the canvas have to be contained in an object titled 'configure'.</p>
+    <p>Click on the options shown to show how these options are supposed to be used.</p>
+    <ul class="nav nav-tabs">
+        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
+        <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
+    </ul>
+    <br>
+<pre class="prettyprint lang-js options hidden" id="fullOptions">
 var options = {
   configure:{
     filter: 'nodes, physics', // or ['nodes','physics'] or true

docs/network/edges.html

@@ -1,19 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <script>(function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        i[r] = i[r] || function () {
-                    (i[r].q = i[r].q || []).push(arguments)
-                }, i[r].l = 1 * new Date();
-        a = s.createElement(o), m = s.getElementsByTagName(o)[0];
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-    ga('create', 'UA-61231638-1', 'auto');
-    ga('send', 'pageview');</script>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -26,6 +13,10 @@
     <link href="../css/bootstrap.css" rel="stylesheet">
     <link href="../css/newdocs.css" rel="stylesheet">
 
+    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
+    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
+    <script type="text/javascript" src="../js/prettify/prettify.js"></script>
+
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -47,7 +38,7 @@
 </head>
 <!-- NAVBAR
 ================================================== -->
-<body>
+<body onload="prettyPrint();">
 
 <div class="navbar-wrapper">
     <div class="container">
@@ -96,7 +87,112 @@
 
     <h3>Options</h3>
 
-    <p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
+    <p>The options for the canvas have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
+    in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
+    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
+    <ul class="nav nav-tabs">
+        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
+        <li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
+        <li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
+    </ul>
+    <br>
+<pre class="prettyprint lang-js options top hidden" id="fullOptions">
+// these are all options in full.
+var options = {
+  edges:{
+    arrows: {
+      to:     {enabled: false, scaleFactor:1},
+      middle: {enabled: false, scaleFactor:1},
+      from:   {enabled: false, scaleFactor:1}
+    },
+    color: {
+      color:'#848484',
+      highlight:'#848484',
+      hover: '#848484',
+      inherit: 'from',
+      opacity:1.0
+    },
+    dashes:{
+      enabled: false,
+      pattern:[5,5]
+    },
+    font: {
+      color: '#343434',
+      size: 14, // px
+      face: 'arial',
+      background: 'none',
+      stroke: 1, // px
+      strokeColor: '#ffffff',
+      align:'horizontal'
+    },
+    hidden: false,
+    hoverWidth: 1.5,
+    label: undefined,
+    length: undefined,
+    physics: true,
+    scaling:{
+      min: 1,
+      max: 15,
+      label: {
+        enabled: true,
+        min: 14,
+        max: 30,
+        maxVisible: 30,
+        drawThreshold: 3
+      },
+      customScalingFunction: function (min,max,total,value) {
+        if (max === min) {
+          return 0.5;
+        }
+        else {
+          var scale = 1 / (max - min);
+          return Math.max(0,(value - min)*scale);
+        }
+      }
+    },
+    selectionWidth: 1,
+    selfReferenceSize:20,
+    shadow:{
+      enabled: false,
+      size:10,
+      x:5,
+      y:5
+    },
+    smooth: {
+      enabled: true,
+      dynamic: true,
+      type: "continuous",
+      roundness: 0.5
+    },
+    title:undefined,
+    width: 1,
+    value: undefined
+  }
+}
+
+network.setOptions(options);
+</pre>
+
+<pre class="prettyprint lang-js options top hidden" id="shortOptions">
+// here all options that have shorthand notations are shown.
+var options = {
+  edges:{
+    arrows: 'to, from',
+    color: 'red',
+    dashes: true,
+    font: '12px arial #ff0000',
+    scaling:{
+      label: true,
+    },
+    shadow: true,
+    smooth: true,
+  }
+}
+
+network.setOptions(options);
+</pre>
+
+    <p>These options can also be set per individual edge.</p>
     <table class="moduleTable" id="optionTable">
         <tr class="header">
             <td class="name">name</td>
@@ -311,6 +407,13 @@ var options: {
                 can taylor the logic in the function as long as it returns a <code>Number</code>.
             </td>
         </tr>
+
+        <tr>
+            <td>id</td>
+            <td class="mid">String</td>
+            <td class="mid"><code>undefined</code></td>
+            <td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.</td>
+        </tr>
         <tr>
             <td>label</td>
             <td class="mid">String</td>

docs/network/groups.html

@@ -1,19 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <script>(function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        i[r] = i[r] || function () {
-                    (i[r].q = i[r].q || []).push(arguments)
-                }, i[r].l = 1 * new Date();
-        a = s.createElement(o), m = s.getElementsByTagName(o)[0];
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-    ga('create', 'UA-61231638-1', 'auto');
-    ga('send', 'pageview');</script>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -26,6 +13,10 @@
     <link href="../css/bootstrap.css" rel="stylesheet">
     <link href="../css/newdocs.css" rel="stylesheet">
 
+    <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../js/toggleTable.js"></script>
+    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
+    <script type="text/javascript" src="../js/prettify/prettify.js"></script>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -45,7 +36,7 @@
 </head>
 <!-- NAVBAR
 ================================================== -->
-<body>
+<body onload="prettyPrint();">
 
 <div class="navbar-wrapper">
     <div class="container">
@@ -90,11 +81,30 @@
 <div class="container full">
     <h1>Network - groups</h1>
 
-    <p>Handles the HTML part of the canvas.</p>
+    <p>Handles the group styling.</p>
 
     <h3>Options</h3>
 
-    <p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
+    <p>The options for the canvas have to be contained in an object titled 'groups'.</p>
+    <p>Click on the options shown to show how these options are supposed to be used.</p>
+    <ul class="nav nav-tabs">
+        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
+        <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
+    </ul>
+    <br>
+<pre class="prettyprint lang-js options hidden" id="fullOptions">
+var options = {
+  groups:{
+    useDefaultGroups: true,
+    myGroupId:{
+      /*node options*/
+    }
+  }
+}
+
+network.setOptions(options);
+</pre>
+    <p>All of the individual options are explained here:</p>
     <table class="moduleTable">
         <tr class="header">
             <td class="name">name</td>
@@ -120,7 +130,7 @@
                 All options described in the <a href="./nodes.html">nodes module</a> that make sense can be used here
                 (you're not going to set the same id or x,y position for a group of nodes).
                 Example:
-<pre class="code">
+<pre class="prettyprint lang-js options">
 var nodes = [
     {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
 ]

docs/network/nodes.html

@@ -299,6 +299,12 @@
             <td class="mid"><code>'#2B7CE9'</code></td>
             <td>The color of the icon.</td>
         </tr>
+        <tr>
+            <td>id</td>
+            <td class="mid">String</td>
+            <td class="mid"><code>undefined</code></td>
+            <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
+        </tr>
         <tr>
             <td>image</td>
             <td class="mid">String</td>

examples/network/01_basic_usage.html

@@ -44,8 +44,9 @@
     edges: edges
   };
   var options = {
-    nodes:{title:undefined},edges:{hoverWidth:function(a) {return a;}},
-    configuration:{container:container}
+    configure:true,
+//    physics:{barnesHut:{gravitationslPull:34}, solver:'banana'},
+    groups:{'bla':{color:{backsground:'red'}, borderWidth:5}}
   }
   var network = new vis.Network(container, data, options);
 //    network.setOptions({nodes:{color:'red'}})

lib/network/modules/Validator.js

@@ -56,7 +56,7 @@ class Validator {
       // __any__ is a wildcard. Any value is accepted and will be further analysed by reference.
       if (Validator.getType(options[option]) === 'object') {
         util.copyAndExtendArray(path, option);
-        Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions['__any__'].__type__, path, true);
+        Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions['__any__'].__type__, path);
       }
     }
     else {
@@ -64,25 +64,24 @@ class Validator {
       if (referenceOptions[option].__type__ !== undefined) {
         util.copyAndExtendArray(path, option);
         // if this should be an object, we check if the correct type has been supplied to account for shorthand options.
-        Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path, true);
+        Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path);
       }
       else {
-        Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path, false);
+        Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path);
       }
     }
   }
 
   /**
    *
-   * @param {String} option     | the option property
-   * @param {Object} options    | The supplied options object
-   * @param {Object} referenceOptions    | The reference options containing all options and their allowed formats
-   * @param {String} referenceOption     | Usually this is the same as option, except when handling an __any__ tag.
-   * @param {String} refOptionType       | This is the type object from the reference options
-   * @param path
-   * @param recursive
+   * @param {String}  option     | the option property
+   * @param {Object}  options    | The supplied options object
+   * @param {Object}  referenceOptions    | The reference options containing all options and their allowed formats
+   * @param {String}  referenceOption     | Usually this is the same as option, except when handling an __any__ tag.
+   * @param {String}  refOptionType       | This is the type object from the reference options
+   * @param {Array}   path      | where in the object is the option
    */
-  static checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path, recursive) {
+  static checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
     let optionType = Validator.getType(options[option]);
     let refOptionType = refOptionObj[optionType];
     if (refOptionType !== undefined) {
@@ -93,11 +92,11 @@ class Validator {
             ' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
           errorFound = true;
         }
-        else if (recursive === true && optionType === 'object') {
+        else if (optionType === 'object') {
           Validator.parse(options[option], referenceOptions[referenceOption], path);
         }
       }
-      else if (recursive === true && optionType === 'object') {
+      else if (optionType === 'object') {
         Validator.parse(options[option], referenceOptions[referenceOption], path);
       }
     }

lib/network/modules/components/AllOptions.js

@@ -27,7 +27,7 @@ let allOptions = {
     __type__: {object}
   },
   clustering: {},
-  configuration: {
+  configure: {
     filter: {boolean,string:['nodes','edges','layout','physics','manipulation','interaction','selection','rendering'],array},
     container: {dom},
     __type__: {object,string,array,boolean}