From 176742b33f85655dbf4a4fdbfc5a97ac18a8acf1 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 20 May 2015 10:10:05 +0200 Subject: [PATCH] Implemented configurator for Graph2d. Fixed Configurator displaying nothing when `filter: true`. --- lib/network/Network.js | 12 ++++----- .../components => shared}/ColorPicker.js | 6 ++--- ...ConfigurationSystem.js => Configurator.js} | 26 ++++++++++--------- lib/timeline/Core.js | 7 +++-- lib/timeline/Graph2d.js | 24 +++++++++++------ lib/timeline/Timeline.js | 8 +++--- .../{graph2dOptions.js => optionsGraph2d.js} | 0 .../{options.js => optionsTimeline.js} | 0 8 files changed, 46 insertions(+), 37 deletions(-) rename lib/{network/modules/components => shared}/ColorPicker.js (99%) rename lib/shared/{ConfigurationSystem.js => Configurator.js} (97%) rename lib/timeline/{graph2dOptions.js => optionsGraph2d.js} (100%) rename lib/timeline/{options.js => optionsTimeline.js} (100%) diff --git a/lib/network/Network.js b/lib/network/Network.js index 00f5f28c..fdc83e17 100644 --- a/lib/network/Network.js +++ b/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 diff --git a/lib/network/modules/components/ColorPicker.js b/lib/shared/ColorPicker.js similarity index 99% rename from lib/network/modules/components/ColorPicker.js rename to lib/shared/ColorPicker.js index 16e36f5c..a46b7088 100644 --- a/lib/network/modules/components/ColorPicker.js +++ b/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) { diff --git a/lib/shared/ConfigurationSystem.js b/lib/shared/Configurator.js similarity index 97% rename from lib/shared/ConfigurationSystem.js rename to lib/shared/Configurator.js index c91e33c0..3862ff0d 100644 --- a/lib/shared/ConfigurationSystem.js +++ b/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; \ No newline at end of file +export default Configurator; \ No newline at end of file diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 64ff983e..ae4cc452 100644 --- a/lib/timeline/Core.js +++ b/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 diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js index 32ee27a1..0ab6ab28 100644 --- a/lib/timeline/Graph2d.js +++ b/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 diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index a8e56307..6ddc1876 100644 --- a/lib/timeline/Timeline.js +++ b/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) { diff --git a/lib/timeline/graph2dOptions.js b/lib/timeline/optionsGraph2d.js similarity index 100% rename from lib/timeline/graph2dOptions.js rename to lib/timeline/optionsGraph2d.js diff --git a/lib/timeline/options.js b/lib/timeline/optionsTimeline.js similarity index 100% rename from lib/timeline/options.js rename to lib/timeline/optionsTimeline.js