Browse Source

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

flowchartTest
jos 9 years ago
parent
commit
176742b33f
8 changed files with 46 additions and 37 deletions
  1. +6
    -6
      lib/network/Network.js
  2. +3
    -3
      lib/shared/ColorPicker.js
  3. +14
    -12
      lib/shared/Configurator.js
  4. +3
    -4
      lib/timeline/Core.js
  5. +16
    -8
      lib/timeline/Graph2d.js
  6. +4
    -4
      lib/timeline/Timeline.js
  7. +0
    -0
      lib/timeline/optionsGraph2d.js
  8. +0
    -0
      lib/timeline/optionsTimeline.js

+ 6
- 6
lib/network/Network.js View File

@ -24,7 +24,7 @@ import InteractionHandler from './modules/InteractionHandler';
import SelectionHandler from "./modules/SelectionHandler"; import SelectionHandler from "./modules/SelectionHandler";
import LayoutEngine from "./modules/LayoutEngine"; import LayoutEngine from "./modules/LayoutEngine";
import ManipulationSystem from "./modules/ManipulationSystem"; import ManipulationSystem from "./modules/ManipulationSystem";
import ConfigurationSystem from "./../shared/ConfigurationSystem";
import Configurator from "./../shared/Configurator";
import Validator from "./../shared/Validator"; import Validator from "./../shared/Validator";
import {printStyle} from "./../shared/Validator"; import {printStyle} from "./../shared/Validator";
import {allOptions, configureOptions} from './options.js'; import {allOptions, configureOptions} from './options.js';
@ -123,7 +123,7 @@ function Network(container, data, options) {
this.canvas._create(); this.canvas._create();
// setup configuration system // 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 // apply options
this.setOptions(options); this.setOptions(options);
@ -173,10 +173,10 @@ Network.prototype.setOptions = function (options) {
//this.view.setOptions(options.view); //this.view.setOptions(options.view);
//this.clustering.setOptions(options.clustering); //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 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:{}}; let networkOptions = {nodes:{},edges:{},layout:{},interaction:{},manipulation:{},physics:{},global:{}};
util.deepExtend(networkOptions.nodes, this.nodesHandler.options); util.deepExtend(networkOptions.nodes, this.nodesHandler.options);
util.deepExtend(networkOptions.edges, this.edgesHandler.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.canvas.options);
util.deepExtend(networkOptions.global, this.options); util.deepExtend(networkOptions.global, this.options);
this.configurationSystem.setModuleOptions(networkOptions);
this.configurator.setModuleOptions(networkOptions);
} }
// handle network global options // handle network global options
@ -355,7 +355,7 @@ Network.prototype.destroy = function () {
delete this.manipulation; delete this.manipulation;
delete this.nodesHandler; delete this.nodesHandler;
delete this.edgesHandler; delete this.edgesHandler;
delete this.configurationSystem;
delete this.configurator;
delete this.images; delete this.images;
// delete emitter bindings // delete emitter bindings

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

@ -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 { class ColorPicker {
constructor(pixelRatio = 1) { constructor(pixelRatio = 1) {

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

@ -1,6 +1,6 @@
var util = require('../util'); 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. * 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 configureOptions | the fully configured and predefined options set found in allOptions.js
* @param pixelRatio | canvas pixel ratio * @param pixelRatio | canvas pixel ratio
*/ */
class ConfigurationSystem {
class Configurator {
constructor(parentModule, defaultContainer, configureOptions, pixelRatio = 1) { constructor(parentModule, defaultContainer, configureOptions, pixelRatio = 1) {
this.parent = parentModule; this.parent = parentModule;
this.changedOptions = []; this.changedOptions = [];
@ -35,7 +35,7 @@ class ConfigurationSystem {
this.moduleOptions = {}; this.moduleOptions = {};
this.domElements = []; this.domElements = [];
this.colorPicker = new ColorPicker(pixelRatio); this.colorPicker = new ColorPicker(pixelRatio);
this.wrapper;
this.wrapper = undefined;
} }
@ -92,25 +92,24 @@ class ConfigurationSystem {
/** /**
* Create all DOM elements * Create all DOM elements
* @param {Boolean | String} config
* @private * @private
*/ */
_create() { _create() {
this._clean(); this._clean();
this.changedOptions = []; this.changedOptions = [];
let config = this.options.filter;
let filter = this.options.filter;
let counter = 0; let counter = 0;
let show = false; let show = false;
for (let option in this.configureOptions) { for (let option in this.configureOptions) {
if (this.configureOptions.hasOwnProperty(option)) { if (this.configureOptions.hasOwnProperty(option)) {
this.allowCreation = false; this.allowCreation = false;
show = 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]); 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; show = true;
} }
@ -450,13 +449,16 @@ class ConfigurationSystem {
*/ */
_handleObject(obj, path = []) { _handleObject(obj, path = []) {
let show = false; let show = false;
let config = this.options.filter;
let filter = this.options.filter;
let visibleInSet = false; let visibleInSet = false;
for (let subObj in obj) { for (let subObj in obj) {
if (obj.hasOwnProperty(subObj)) { if (obj.hasOwnProperty(subObj)) {
show = false; 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) { if (show !== false) {
@ -583,4 +585,4 @@ class ConfigurationSystem {
} }
export default ConfigurationSystem;
export default Configurator;

+ 3
- 4
lib/timeline/Core.js View File

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

+ 16
- 8
lib/timeline/Graph2d.js View File

@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime');
var CustomTime = require('./component/CustomTime'); var CustomTime = require('./component/CustomTime');
var LineGraph = require('./component/LineGraph'); var LineGraph = require('./component/LineGraph');
var ConfigurationSystem = require('../shared/ConfigurationSystem');
var Configurator = require('../shared/Configurator');
var Validator = require('../shared/Validator').default; var Validator = require('../shared/Validator').default;
var printStyle = require('../shared/Validator').printStyle; 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 * Create a timeline visualization
@ -105,13 +105,11 @@ function Graph2d (container, items, groups, options) {
me.emit('contextmenu', me.getEventProperties(event)) me.emit('contextmenu', me.getEventProperties(event))
}; };
// setup configuration system
this.configurator = new Configurator(this, container, configureOptions);
// apply options // apply options
if (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); this.setOptions(options);
} }
@ -132,6 +130,16 @@ function Graph2d (container, items, groups, options) {
// Extend the functionality from Core // Extend the functionality from Core
Graph2d.prototype = new 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 * Set items
* @param {vis.DataSet | Array | null} items * @param {vis.DataSet | Array | null} items

+ 4
- 4
lib/timeline/Timeline.js View File

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

lib/timeline/graph2dOptions.js → lib/timeline/optionsGraph2d.js View File


lib/timeline/options.js → lib/timeline/optionsTimeline.js View File


Loading…
Cancel
Save