added a pretty amazing option checker to network :)

docs/css/newdocs.css

@@ -80,6 +80,7 @@ td.properties {
 }
 
 p {
+    min-width:400px;
     max-width:1000px;
 }
 

examples/network/01_basic_usage.html

@@ -44,10 +44,9 @@
     edges: edges
   };
   var options = {
-    manipulation: true,
-    groups:{'bla':{color:{background:'red'}, borderWidth:5}}
-
-//      physics:{stabilization:true}
+    manipulation: 'hello',
+    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/Network.js

@@ -24,6 +24,8 @@ import  SelectionHandler    from "./modules/SelectionHandler";
 import  LayoutEngine        from "./modules/LayoutEngine";
 import  ManipulationSystem  from "./modules/ManipulationSystem";
 import  ConfigurationSystem from "./modules/ConfigurationSystem";
+import  Validator           from "./modules/Validator";
+import  {printStyle}        from "./modules/Validator";
 
 /**
  * @constructor Network
@@ -132,6 +134,13 @@ Emitter(Network.prototype);
  */
 Network.prototype.setOptions = function (options) {
   if (options !== undefined) {
+
+    let errorFound = Validator.validate(options);
+    if (errorFound === true) {
+      options = {};
+      console.log('%cErrors have been found in the supplied options object. None of the options will be used.', printStyle);
+    }
+
     // the hierarchical system can adapt the edges and the physics to it's own options because not all combinations work with the hierarichical system.
     options = this.layoutEngine.setOptions(options.layout, options);
 

lib/network/modules/ConfigurationSystem.js

@@ -195,7 +195,7 @@ class ConfigurationSystem {
         select: true,
         selectConnectedEdges: true
       },
-      renderer: {
+      rendering: {
         hideEdgesOnDrag: false,
         hideNodesOnDrag: false
       }
@@ -209,7 +209,7 @@ class ConfigurationSystem {
       manipulation:{},
       physics:{},
       selection:{},
-      renderer:{},
+      rendering:{},
       configure: false,
       configureContainer: undefined
     };
@@ -241,7 +241,7 @@ class ConfigurationSystem {
       util.deepExtend(this.actualOptions.manipulation, this.network.manipulation.options, true);
       util.deepExtend(this.actualOptions.physics, this.network.physics.options, true);
       util.deepExtend(this.actualOptions.selection, this.network.selectionHandler.selection, true);
-      util.deepExtend(this.actualOptions.renderer, this.network.renderer.selection, true);
+      util.deepExtend(this.actualOptions.rendering, this.network.renderer.selection, true);
 
 
       this.container = this.network.body.container;
@@ -608,7 +608,7 @@ class ConfigurationSystem {
     for (let subObj in obj) {
       if (obj.hasOwnProperty(subObj)) {
         let item = obj[subObj];
-        let newPath = this._addToPath(path, subObj);
+        let newPath = util.copyAndExtendArray(path, subObj);
         let value = this._getValue(newPath);
 
         if (item instanceof Array) {
@@ -632,7 +632,7 @@ class ConfigurationSystem {
           if (draw === true) {
             // initially collapse options with an disabled enabled option.
             if (item.enabled !== undefined) {
-              let enabledPath = this._addToPath(newPath, 'enabled');
+              let enabledPath =  util.copyAndExtendArray(newPath, 'enabled');
               let enabledValue = this._getValue(enabledPath);
               if (enabledValue === true) {
                 let label = this._makeLabel(subObj, newPath, true);

lib/network/modules/Validator.js

@@ -0,0 +1,256 @@
+var util = require('../../util');
+
+
+import allOptions from './components/AllOptions.js'
+let errorFound = false;
+let printStyle = 'background: #FFeeee; color: #dd0000';
+/**
+ *  Used to validate options.
+ */
+class Validator {
+  constructor() {
+  }
+
+  /**
+   * Main function to be called
+   * @param options
+   * @param subObject
+   * @returns {boolean}
+   */
+  static validate(options, subObject) {
+    errorFound = false;
+    let usedOptions = allOptions;
+    if (subObject !== undefined) {
+      usedOptions = allOptions[subObject];
+    }
+    Validator.parse(options, usedOptions, []);
+    return errorFound;
+  }
+
+
+  /**
+   * Will traverse an object recursively and check every value
+   * @param options
+   * @param referenceOptions
+   * @param path
+   */
+  static parse(options, referenceOptions, path) {
+    for (let option in options) {
+      if (options.hasOwnProperty(option)) {
+        Validator.check(option, options, referenceOptions, path);
+      }
+    }
+  }
+
+
+  /**
+   * Check every value. If the value is an object, call the parse function on that object.
+   * @param option
+   * @param options
+   * @param referenceOptions
+   * @param path
+   */
+  static check(option, options, referenceOptions, path) {
+    if (referenceOptions[option] === undefined && referenceOptions.__any__ === undefined) {
+      Validator.getSuggestion(option, referenceOptions, path);
+    }
+    else if (referenceOptions[option] === undefined && referenceOptions.__any__ !== undefined) {
+      // __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);
+      }
+    }
+    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);
+      }
+      else {
+        Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path, false);
+      }
+    }
+  }
+
+  /**
+   *
+   * @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
+   */
+  static checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path, recursive) {
+    let optionType = Validator.getType(options[option]);
+    let refOptionType = refOptionObj[optionType];
+    if (refOptionType !== undefined) {
+      // if the type is correct, we check if it is supposed to be one of a few select values
+      if (Validator.getType(refOptionType) === 'array') {
+        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) {
+          Validator.parse(options[option], referenceOptions[referenceOption], path);
+        }
+      }
+      else if (recursive === true) {
+        Validator.parse(options[option], referenceOptions[referenceOption], path);
+      }
+    }
+    else {
+      // type of the field is incorrect
+      console.log('%cInvalid type received for "' + option + '". Expected: ' + Validator.print(Object.keys(referenceOptions[referenceOption].__type__)) + '. Received [' + optionType + '] "' + options[option] + '"' + Validator.printLocation(path, option), printStyle);
+      errorFound = true;
+    }
+  }
+
+
+  static getType(object) {
+    var type = typeof object;
+
+    if (type === 'object') {
+      if (object === null) {
+        return 'null';
+      }
+      if (object instanceof Boolean) {
+        return 'boolean';
+      }
+      if (object instanceof Number) {
+        return 'number';
+      }
+      if (object instanceof String) {
+        return 'string';
+      }
+      if (Array.isArray(object)) {
+        return 'array';
+      }
+      if (object instanceof Date) {
+        return 'date';
+      }
+      if (object.nodeType !== undefined) {
+        return 'dom'
+      }
+      return 'object';
+    }
+    else if (type === 'number') {
+      return 'number';
+    }
+    else if (type === 'boolean') {
+      return 'boolean';
+    }
+    else if (type === 'string') {
+      return 'string';
+    }
+    else if (type === undefined) {
+      return 'undefined';
+    }
+    return type;
+  }
+
+  static getSuggestion(option, options, path) {
+    let closestMatch = '';
+    let min = 1e9;
+    let threshold = 10;
+    for (let op in options) {
+      let distance = Validator.levenshteinDistance(option, op);
+      if (min > distance && distance < threshold) {
+        closestMatch = op;
+        min = distance;
+
+      }
+    }
+
+    if (min < threshold) {
+      console.log('%cUnknown option detected: "' + option + '". Did you mean "' + closestMatch + '"?' + Validator.printLocation(path, option), printStyle);
+    }
+    else {
+      console.log('%cUnknown option detected: "' + option + '". Did you mean one of these: ' + Validator.print(Object.keys(options)) + Validator.printLocation(path, option), printStyle);
+    }
+
+    errorFound = true;
+    return closestMatch;
+  }
+
+  static printLocation(path, option) {
+    let str = '\n\nProblem value found at: \noptions = {\n';
+    for (let i = 0; i < path.length; i++) {
+      for (let j = 0; j < i + 1; j++) {
+        str += '  ';
+      }
+      str += path[i] + ': {\n'
+    }
+    for (let j = 0; j < path.length + 1; j++) {
+      str += '  ';
+    }
+    str += option + '\n';
+    for (let i = 0; i < path.length + 1; i++) {
+      for (let j = 0; j < path.length - i; j++) {
+        str += '  ';
+      }
+      str += '}\n'
+    }
+    return str + '\n\n';
+  }
+
+  static print(options) {
+    return JSON.stringify(options).replace(/(\")|(\[)|(\])|(,"__type__")/g, "").replace(/(\,)/g, ', ')
+  }
+
+
+  // Compute the edit distance between the two given strings
+  // http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
+  /*
+   Copyright (c) 2011 Andrei Mackenzie
+
+   Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+   The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+   */
+  static levenshteinDistance(a, b) {
+    if (a.length === 0) return b.length;
+    if (b.length === 0) return a.length;
+
+    var matrix = [];
+
+    // increment along the first column of each row
+    var i;
+    for (i = 0; i <= b.length; i++) {
+      matrix[i] = [i];
+    }
+
+    // increment each column in the first row
+    var j;
+    for (j = 0; j <= a.length; j++) {
+      matrix[0][j] = j;
+    }
+
+    // Fill in the rest of the matrix
+    for (i = 1; i <= b.length; i++) {
+      for (j = 1; j <= a.length; j++) {
+        if (b.charAt(i - 1) == a.charAt(j - 1)) {
+          matrix[i][j] = matrix[i - 1][j - 1];
+        } else {
+          matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
+            Math.min(matrix[i][j - 1] + 1, // insertion
+              matrix[i - 1][j] + 1)); // deletion
+        }
+      }
+    }
+
+    return matrix[b.length][a.length];
+  }
+
+;
+}
+
+
+export default Validator;
+export {printStyle}

lib/network/modules/components/AllOptions.js

@@ -0,0 +1,288 @@
+/**
+ * __any__
+ * __type__
+ */
+let string = 'string';
+let boolean = 'boolean';
+let number = 'number';
+let array = 'array';
+let object = 'object';
+let dom = 'dom';
+let fn = 'function';
+let undef = 'undefined';
+
+
+let allOptions = {
+  canvas: {
+    width: {string},
+    height: {string},
+    __type__: {object}
+  },
+  rendering: {
+    hideEdgesOnDrag: {boolean},
+    hideNodesOnDrag: {boolean},
+    __type__: {object}
+  },
+  clustering: {},
+  configuration: {
+    filter: {boolean,string:['nodes','edges','layout','physics','manipulation','interaction','selection','rendering'],array},
+    container: {dom},
+    __type__: {object,string,array,boolean}
+  },
+  edges: {
+    arrows: {
+      to: {enabled: {boolean}, scaleFactor: {number}, __type__: {object}},
+      middle: {enabled: {boolean}, scaleFactor: {number}, __type__: {object}},
+      from: {enabled: {boolean}, scaleFactor: {number}, __type__: {object}},
+      __type__: {string:['from','to','middle'],object}
+    },
+    color: {
+      color: {string},
+      highlight: {string},
+      hover: {string},
+      inherit: {string:['from','to','both'],boolean},
+      opacity: {number},
+      __type__: {object}
+    },
+    dashes: {
+      enabled: {boolean},
+      pattern: {array},
+      __type__: {boolean,object}
+    },
+    font: {
+      color: {string},
+      size: {number}, // px
+      face: {string},
+      background: {string},
+      stroke: {number}, // px
+      strokeColor: {string},
+      align: {string:['horizontal','top','middle','bottom']},
+      __type__: {object}
+    },
+    hidden: {boolean},
+    hoverWidth: {fn,number},
+    label: {string,undef},
+    length: {number,undef},
+    physics: {boolean},
+    scaling: {
+      min: {number},
+      max: {number},
+      label: {
+        enabled: {boolean},
+        min: {number},
+        max: {number},
+        maxVisible: {number},
+        drawThreshold: {number},
+        __type__: {object,boolean}
+      },
+      customScalingFunction: {fn},
+      __type__: {object}
+    },
+    selectionWidth: {fn,number},
+    selfReferenceSize: {number},
+    shadow: {
+      enabled: {boolean},
+      size: {number},
+      x: {number},
+      y: {number},
+      __type__: {object,boolean}
+    },
+    smooth: {
+      enabled: {boolean},
+      dynamic: {boolean},
+      type: {string},
+      roundness: {number},
+      __type__: {object,boolean}
+    },
+    title: {string, undef},
+    width: {number},
+    value: {number, undef},
+    __type__: {object}
+  },
+  groups: {
+    useDefaultGroups: {boolean},
+    __any__: ['__ref__','nodes'],
+    __type__: {object}
+  },
+  interaction: {
+    dragNodes: {boolean},
+    dragView: {boolean},
+    zoomView: {boolean},
+    hoverEnabled: {boolean},
+    navigationButtons: {boolean},
+    tooltipDelay: {number},
+    keyboard: {
+      enabled: {boolean},
+      speed: {x: {number}, y: {number}, zoom: {number}, __type__: {object}},
+      bindToWindow: {boolean},
+      __type__: {object,boolean}
+    },
+    __type__: {object}
+  },
+  layout: {
+    randomSeed: undefined,
+    hierarchical: {
+      enabled: {boolean},
+      levelSeparation: {number},
+      direction: {string:['UD','DU','LR','RL']},   // UD, DU, LR, RL
+      sortMethod: {string:['hubsize','directed']}, // hubsize, directed
+      __type__: {object,boolean}
+    },
+    __type__: {object}
+  },
+  manipulation: {
+    enabled: {boolean},
+    initiallyActive: {boolean},
+    locale: {string},
+    locales: {object},
+    functionality: {
+      addNode: {boolean},
+      addEdge: {boolean},
+      editNode: {boolean},
+      editEdge: {boolean},
+      deleteNode: {boolean},
+      deleteEdge: {boolean},
+      __type__: {object}
+    },
+    handlerFunctions: {
+      addNode: {fn,undef},
+      addEdge: {fn,undef},
+      editNode: {fn,undef},
+      editEdge: {fn,undef},
+      deleteNode: {fn,undef},
+      deleteEdge: {fn,undef},
+      __type__: {object}
+    },
+    controlNodeStyle: ['__ref__','nodes'],
+    __type__: {object,boolean}
+  },
+  nodes: {
+    borderWidth: {number},
+    borderWidthSelected: {number,undef},
+    brokenImage: {string,undef},
+    color: {
+      border: {string},
+      background: {string},
+      highlight: {
+        border: {string},
+        background: {string},
+        __type__: {object,string}
+      },
+      hover: {
+        border: {string},
+        background: {string},
+        __type__: {object,string}
+      },
+      __type__: {object,string}
+    },
+    fixed: {
+      x: {boolean},
+      y: {boolean},
+      __type__: {object,boolean}
+    },
+    font: {
+      color: {string},
+      size: {number}, // px
+      face: {string},
+      background: {string},
+      stroke: {number}, // px
+      strokeColor: {string},
+      __type__: {object}
+    },
+    group: {string,number,undef},
+    hidden: {boolean},
+    icon: {
+      face: {string},
+      code: {string},  //'\uf007',
+      size: {number},  //50,
+      color: {string},
+      __type__: {object}
+    },
+    id: {string, number},
+    image: {string,undef}, // --> URL
+    label: {string,undef},
+    level: {number,undef},
+    mass: {number},
+    physics: {boolean},
+    scaling: {
+      min: {number},
+      max: {number},
+      label: {
+        enabled: {boolean},
+        min: {number},
+        max: {number},
+        maxVisible: {number},
+        drawThreshold: {number},
+        __type__: {object, boolean}
+      },
+      customScalingFunction: {fn},
+      __type__: {object}
+    },
+    shadow: {
+      enabled: {boolean},
+      size: {number},
+      x: {number},
+      y: {number},
+      __type__: {object,boolean}
+    },
+    shape: {string:['ellipse', 'circle', 'database', 'box', 'text','image', 'circularImage','diamond', 'dot', 'star', 'triangle','triangleDown', 'square','icon']},
+    size: {number},
+    title: {string,undef},
+    value: {number,undef},
+    x: {number},
+    y: {number},
+    __type__: {object}
+  },
+  physics: {
+    barnesHut: {
+      gravitationalConstant: {number},
+      centralGravity: {number},
+      springLength: {number},
+      springConstant: {number},
+      damping: {number},
+      __type__: {object}
+    },
+    repulsion: {
+      centralGravity: {number},
+      springLength: {number},
+      springConstant: {number},
+      nodeDistance: {number},
+      damping: {number},
+      __type__: {object}
+    },
+    hierarchicalRepulsion: {
+      centralGravity: {number},
+      springLength: {number},
+      springConstant: {number},
+      nodeDistance: {number},
+      damping: {number},
+      __type__: {object}
+    },
+    maxVelocity: {number},
+    minVelocity: {number},    // px/s
+    solver: {string:['barnesHut','repulsion','hierarchicalRepulsion']},
+    stabilization: {
+      enabled: {boolean},
+      iterations: {number},   // maximum number of iteration to stabilize
+      updateInterval: {number},
+      onlyDynamicEdges: {boolean},
+      fit: {boolean},
+      __type__: {object,boolean}
+    },
+    timestep: {number},
+    __type__: {object,boolean}
+  },
+  selection: {
+    select: {boolean},
+    selectConnectedEdges: {boolean},
+    __type__: {object}
+  },
+  view: {},
+  __type__: {object}
+};
+
+
+allOptions.groups.__any__ = allOptions.nodes;
+allOptions.manipulation.controlNodeStyle = allOptions.nodes;
+
+export default allOptions;

lib/network/modules/components/Edge.js

@@ -70,6 +70,7 @@ class Edge {
     if (options.from !== undefined) {this.fromId = options.from;}
     if (options.to !== undefined)   {this.toId = options.to;}
     if (options.title !== undefined) {this.title = options.title;}
+    if (options.value !== undefined)  {options.value = parseInt(options.value);}
 
 
     // A node is connected when it has a from and to node that both exist in the network.body.nodes.

lib/network/modules/components/Node.js

@@ -16,6 +16,9 @@ import Star          from './nodes/shapes/Star'
 import Text          from './nodes/shapes/Text'
 import Triangle      from './nodes/shapes/Triangle'
 import TriangleDown  from './nodes/shapes/TriangleDown'
+import  Validator    from "../Validator";
+import  {printStyle} from "../Validator";
+
 
 /**
  * @class Node
@@ -116,9 +119,10 @@ class Node {
       throw "Node must have an id";
     }
 
-    if (options.x !== undefined)     {this.x = options.x; this.predefinedPosition = true;}
-    if (options.y !== undefined)     {this.y = options.y; this.predefinedPosition = true;}
+    if (options.x !== undefined)     {this.x = parseInt(options.x); this.predefinedPosition = true;}
+    if (options.y !== undefined)     {this.y = parseInt(options.y); this.predefinedPosition = true;}
     if (options.size !== undefined)  {this.baseSize = options.size;}
+    if (options.value !== undefined)  {options.value = parseInt(options.value);}
 
     // this transforms all shorthands into fully defined options
     Node.parseOptions(this.options,options);

lib/util.js

@@ -489,7 +489,7 @@ exports.getType = function(object) {
   var type = typeof object;
 
   if (type == 'object') {
-    if (object == null) {
+    if (object === null) {
       return 'null';
     }
     if (object instanceof Boolean) {
@@ -518,10 +518,31 @@ exports.getType = function(object) {
   else if (type == 'string') {
     return 'String';
   }
+  else if (type === undefined) {
+    return 'undefined';
+  }
+
 
   return type;
 };
 
+
+/**
+ * Used to extend an array and copy it. This is used to propagate paths recursively.
+ *
+ * @param arr
+ * @param newValue
+ * @returns {Array}
+ */
+exports.copyAndExtendArray = function(arr,newValue) {
+  let newArr = [];
+  for (let i = 0; i < arr.length; i++) {
+    newArr.push(arr[i]);
+  }
+  newArr.push(newValue);
+  return newArr;
+}
+
 /**
  * Retrieve the absolute left value of a DOM element
  * @param {Element} elem        A dom element, for example a div