Implemented configurator for Graph2d. Fixed Configurator displaying nothing when `filter: true`.

lib/network/Network.js

@@ -24,7 +24,7 @@ import  InteractionHandler  from './modules/InteractionHandler';
 import  SelectionHandler    from "./modules/SelectionHandler";
 import  LayoutEngine        from "./modules/LayoutEngine";
 import  ManipulationSystem  from "./modules/ManipulationSystem";
-import  ConfigurationSystem from "./../shared/ConfigurationSystem";
+import  Configurator from "./../shared/Configurator";
 import  Validator           from "./../shared/Validator";
 import  {printStyle}        from "./../shared/Validator";
 import  {allOptions, configureOptions} from './options.js';
@@ -123,7 +123,7 @@ function Network(container, data, options) {
   this.canvas._create();
 
   // setup configuration system
-  this.configurationSystem = new ConfigurationSystem(this, this.body.container, configureOptions, this.canvas.pixelRatio);
+  this.configurator = new Configurator(this, this.body.container, configureOptions, this.canvas.pixelRatio);
 
   // apply options
   this.setOptions(options);
@@ -173,10 +173,10 @@ Network.prototype.setOptions = function (options) {
     //this.view.setOptions(options.view);
     //this.clustering.setOptions(options.clustering);
 
-    this.configurationSystem.setOptions(options.configure);
+    this.configurator.setOptions(options.configure);
 
     // if the configuration system is enabled, copy all options and put them into the config system
-    if (this.configurationSystem.options.enabled === true) {
+    if (this.configurator.options.enabled === true) {
       let networkOptions = {nodes:{},edges:{},layout:{},interaction:{},manipulation:{},physics:{},global:{}};
       util.deepExtend(networkOptions.nodes,        this.nodesHandler.options);
       util.deepExtend(networkOptions.edges,        this.edgesHandler.options);
@@ -193,7 +193,7 @@ Network.prototype.setOptions = function (options) {
       util.deepExtend(networkOptions.global,       this.canvas.options);
       util.deepExtend(networkOptions.global,       this.options);
 
-      this.configurationSystem.setModuleOptions(networkOptions);
+      this.configurator.setModuleOptions(networkOptions);
     }
 
     // handle network global options
@@ -355,7 +355,7 @@ Network.prototype.destroy = function () {
   delete this.manipulation;
   delete this.nodesHandler;
   delete this.edgesHandler;
-  delete this.configurationSystem;
+  delete this.configurator;
   delete this.images;
 
   // delete emitter bindings

lib/network/modules/components/ColorPicker.js → lib/shared/ColorPicker.js

@@ -1,6 +1,6 @@
-let Hammer = require('../../../module/hammer');
-let hammerUtil = require('../../../hammerUtil');
-let util = require('../../../util');
+let Hammer = require('../module/hammer');
+let hammerUtil = require('../hammerUtil');
+let util = require('../util');
 
 class ColorPicker {
   constructor(pixelRatio = 1) {

lib/shared/ConfigurationSystem.js → lib/shared/Configurator.js

@@ -1,6 +1,6 @@
 var util = require('../util');
 
-import ColorPicker from './../network/modules/components/ColorPicker'
+import ColorPicker from './ColorPicker'
 
 /**
  * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
@@ -16,7 +16,7 @@ import ColorPicker from './../network/modules/components/ColorPicker'
  * @param configureOptions    | the fully configured and predefined options set found in allOptions.js
  * @param pixelRatio          | canvas pixel ratio
  */
-class ConfigurationSystem {
+class Configurator {
   constructor(parentModule, defaultContainer, configureOptions, pixelRatio = 1) {
     this.parent = parentModule;
     this.changedOptions = [];
@@ -35,7 +35,7 @@ class ConfigurationSystem {
     this.moduleOptions = {};
     this.domElements = [];
     this.colorPicker = new ColorPicker(pixelRatio);
-    this.wrapper;
+    this.wrapper = undefined;
   }
 
 
@@ -92,25 +92,24 @@ class ConfigurationSystem {
 
   /**
    * Create all DOM elements
-   * @param {Boolean | String} config
    * @private
    */
   _create() {
     this._clean();
     this.changedOptions = [];
 
-    let config = this.options.filter;
+    let filter = this.options.filter;
     let counter = 0;
     let show = false;
     for (let option in this.configureOptions) {
       if (this.configureOptions.hasOwnProperty(option)) {
         this.allowCreation = false;
         show = false;
-        if (typeof config === 'function') {
-          show = config(option,[]);
+        if (typeof filter === 'function') {
+          show = filter(option,[]);
           show = show || this._handleObject(this.configureOptions[option], [option]);
         }
-        else if (config === true || config.indexOf(option) !== -1) {
+        else if (filter === true || filter.indexOf(option) !== -1) {
           show = true;
         }
 
@@ -450,13 +449,16 @@ class ConfigurationSystem {
    */
   _handleObject(obj, path = []) {
     let show = false;
-    let config = this.options.filter;
+    let filter = this.options.filter;
     let visibleInSet = false;
     for (let subObj in obj) {
       if (obj.hasOwnProperty(subObj)) {
         show = false;
-        if (typeof config === 'function') {
-          show = config(subObj,path);
+        if (typeof filter === 'function') {
+          show = filter(subObj,path);
+        }
+        else if (filter === true) {
+          show = true;
         }
 
         if (show !== false) {
@@ -583,4 +585,4 @@ class ConfigurationSystem {
 }
 
 
-export default ConfigurationSystem;
+export default Configurator;

lib/timeline/Core.js

@@ -282,16 +282,15 @@ Core.prototype.setOptions = function (options) {
   this.components.forEach(component => component.setOptions(options));
 
   // enable/disable configure
-  if (this.configurationSystem) {
-    this.configurationSystem.setOptions(options.configure);
+  if (this.configurator) {
+    this.configurator.setOptions(options.configure);
 
     // collect the settings of all components, and pass them to the configuration system
     var appliedOptions = util.deepExtend({}, this.options);
     this.components.forEach(function (component) {
       util.deepExtend(appliedOptions, component.options);
     });
-    this.configurationSystem.setModuleOptions({global: appliedOptions});
-    console.log(appliedOptions)
+    this.configurator.setModuleOptions({global: appliedOptions});
   }
 
   // redraw everything

lib/timeline/Graph2d.js

@@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime');
 var CustomTime = require('./component/CustomTime');
 var LineGraph = require('./component/LineGraph');
 
-var ConfigurationSystem = require('../shared/ConfigurationSystem');
+var Configurator = require('../shared/Configurator');
 var Validator = require('../shared/Validator').default;
 var printStyle = require('../shared/Validator').printStyle;
-var allOptions = require('./graph2dOptions').allOptions;
-var configureOptions = require('./graph2dOptions').configureOptions;
+var allOptions = require('./optionsGraph2d').allOptions;
+var configureOptions = require('./optionsGraph2d').configureOptions;
 
 /**
  * Create a timeline visualization
@@ -105,13 +105,11 @@ function Graph2d (container, items, groups, options) {
     me.emit('contextmenu', me.getEventProperties(event))
   };
 
+  // setup configuration system
+  this.configurator = new Configurator(this, container, configureOptions);
+
   // apply options
   if (options) {
-    let errorFound = Validator.validate(options, allOptions);
-    if (errorFound === true) {
-      console.log('%cErrors have been found in the supplied options object.', printStyle);
-    }
-
     this.setOptions(options);
   }
 
@@ -132,6 +130,16 @@ function Graph2d (container, items, groups, options) {
 // Extend the functionality from Core
 Graph2d.prototype = new Core();
 
+Graph2d.prototype.setOptions = function (options) {
+  // validate options
+  let errorFound = Validator.validate(options, allOptions);
+  if (errorFound === true) {
+    console.log('%cErrors have been found in the supplied options object.', printStyle);
+  }
+
+  Core.prototype.setOptions.call(this, options);
+};
+
 /**
  * Set items
  * @param {vis.DataSet | Array | null} items

lib/timeline/Timeline.js

@@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime');
 var CustomTime = require('./component/CustomTime');
 var ItemSet = require('./component/ItemSet');
 
-var ConfigurationSystem = require('../shared/ConfigurationSystem');
+var Configurator = require('../shared/Configurator');
 var Validator = require('../shared/Validator').default;
 var printStyle = require('../shared/Validator').printStyle;
-var allOptions = require('./options').allOptions;
-var configureOptions = require('./options').configureOptions;
+var allOptions = require('./optionsTimeline').allOptions;
+var configureOptions = require('./optionsTimeline').configureOptions;
 
 /**
  * Create a timeline visualization
@@ -118,7 +118,7 @@ function Timeline (container, items, groups, options) {
   };
 
   // setup configuration system
-  this.configurationSystem = new ConfigurationSystem(this, container, configureOptions);
+  this.configurator = new Configurator(this, container, configureOptions);
 
   // apply options
   if (options) {