@ -1,6 +1,6 @@
var util = require ( '../../util' ) ; var util = require ( '../../util' ) ;
import ColorPicker from './components/ColorPicker'
import ColorPicker from './components/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 .
@ -11,203 +11,29 @@ import ColorPicker from './components/ColorPicker'
* *
* The options are matched with their counterparts in each of the modules and the values used in the configuration are * The options are matched with their counterparts in each of the modules and the values used in the configuration are
* *
* @ param parentModule | the location where parentModule . setOptions ( ) can be called
* @ param defaultContainer | the default container of the module
* @ param configureOptions | the fully configured and predefined options set found in allOptions . js
* @ param pixelRatio | canvas pixel ratio
* / * /
class ConfigurationSystem { class ConfigurationSystem {
constructor ( network ) {
this . network = network ;
constructor ( parentModule , defaultContainer , configureOptions , pixelRatio = 1 ) {
this . parent = parentModule ;
this . changedOptions = [ ] ; this . changedOptions = [ ] ;
this . container = defaultContainer ;
this . possibleOptions = {
nodes : {
borderWidth : [ 1 , 0 , 10 , 1 ] ,
borderWidthSelected : [ 2 , 0 , 10 , 1 ] ,
color : {
border : [ 'color' , '#2B7CE9' ] ,
background : [ 'color' , '#97C2FC' ] ,
highlight : {
border : [ 'color' , '#2B7CE9' ] ,
background : [ 'color' , '#D2E5FF' ]
} ,
hover : {
border : [ 'color' , '#2B7CE9' ] ,
background : [ 'color' , '#D2E5FF' ]
}
} ,
fixed : {
x : false ,
y : false
} ,
font : {
color : [ 'color' , '#343434' ] ,
size : [ 14 , 0 , 100 , 1 ] , // px
face : [ 'arial' , 'verdana' , 'tahoma' ] ,
background : [ 'color' , 'none' ] ,
stroke : [ 0 , 0 , 50 , 1 ] , // px
strokeColor : [ 'color' , '#ffffff' ]
} ,
//group: 'string',
hidden : false ,
//icon: {
// face: 'string', //'FontAwesome',
// code: 'string', //'\uf007',
// size: [50, 0, 200, 1], //50,
// color: ['color','#2B7CE9'] //'#aa00ff'
//},
//image: 'string', // --> URL
physics : true ,
scaling : {
min : [ 10 , 0 , 200 , 1 ] ,
max : [ 30 , 0 , 200 , 1 ] ,
label : {
enabled : true ,
min : [ 14 , 0 , 200 , 1 ] ,
max : [ 30 , 0 , 200 , 1 ] ,
maxVisible : [ 30 , 0 , 200 , 1 ] ,
drawThreshold : [ 3 , 0 , 20 , 1 ]
}
} ,
shadow : {
enabled : false ,
size : [ 10 , 0 , 20 , 1 ] ,
x : [ 5 , - 30 , 30 , 1 ] ,
y : [ 5 , - 30 , 30 , 1 ]
} ,
shape : [ 'ellipse' , 'box' , 'circle' , 'database' , 'diamond' , 'dot' , 'square' , 'star' , 'text' , 'triangle' , 'triangleDown' ] ,
size : [ 25 , 0 , 200 , 1 ]
} ,
edges : {
arrows : {
to : { enabled : false , scaleFactor : [ 1 , 0 , 3 , 0.05 ] } , // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
middle : { enabled : false , scaleFactor : [ 1 , 0 , 3 , 0.05 ] } ,
from : { enabled : false , scaleFactor : [ 1 , 0 , 3 , 0.05 ] }
} ,
color : {
color : [ 'color' , '#848484' ] ,
highlight : [ 'color' , '#848484' ] ,
hover : [ 'color' , '#848484' ] ,
inherit : [ 'from' , 'to' , 'both' , true , false ] ,
opacity : [ 1 , 0 , 1 , 0.05 ]
} ,
dashes : false ,
font : {
color : [ 'color' , '#343434' ] ,
size : [ 14 , 0 , 100 , 1 ] , // px
face : [ 'arial' , 'verdana' , 'tahoma' ] ,
background : [ 'color' , 'none' ] ,
stroke : [ 1 , 0 , 50 , 1 ] , // px
strokeColor : [ 'color' , '#ffffff' ] ,
align : [ 'horizontal' , 'top' , 'middle' , 'bottom' ]
} ,
hidden : false ,
hoverWidth : [ 2 , 0 , 5 , 0.1 ] ,
physics : true ,
scaling : {
min : [ 1 , 0 , 100 , 1 ] ,
max : [ 15 , 0 , 100 , 1 ] ,
label : {
enabled : true ,
min : [ 14 , 0 , 200 , 1 ] ,
max : [ 30 , 0 , 200 , 1 ] ,
maxVisible : [ 30 , 0 , 200 , 1 ] ,
drawThreshold : [ 3 , 0 , 20 , 1 ]
}
} ,
selectionWidth : [ 1.5 , 0 , 5 , 0.1 ] ,
selfReferenceSize : [ 20 , 0 , 200 , 1 ] ,
shadow : {
enabled : false ,
size : [ 10 , 0 , 20 , 1 ] ,
x : [ 5 , - 30 , 30 , 1 ] ,
y : [ 5 , - 30 , 30 , 1 ]
} ,
smooth : {
enabled : true ,
dynamic : true ,
type : [ 'continuous' , 'discrete' , 'diagonalCross' , 'straightCross' , 'horizontal' , 'vertical' , 'curvedCW' , 'curvedCCW' ] ,
roundness : [ 0.5 , 0 , 1 , 0.05 ]
} ,
width : [ 1 , 0 , 30 , 1 ]
} ,
layout : {
randomSeed : [ 0 , 0 , 500 , 1 ] ,
hierarchical : {
enabled : false ,
levelSeparation : [ 150 , 20 , 500 , 5 ] ,
direction : [ 'UD' , 'DU' , 'LR' , 'RL' ] , // UD, DU, LR, RL
sortMethod : [ 'hubsize' , 'directed' ] // hubsize, directed
}
} ,
interaction : {
dragNodes : true ,
dragView : true ,
zoomView : true ,
hoverEnabled : false ,
navigationButtons : false ,
tooltipDelay : [ 300 , 0 , 1000 , 25 ] ,
keyboard : {
enabled : false ,
speed : { x : [ 10 , 0 , 40 , 1 ] , y : [ 10 , 0 , 40 , 1 ] , zoom : [ 0.02 , 0 , 0.1 , 0.005 ] } ,
bindToWindow : true
}
} ,
manipulation : {
enabled : false ,
initiallyActive : false ,
locale : [ 'en' , 'nl' ]
} ,
physics : {
barnesHut : {
//theta: [0.5, 0.1, 1, 0.05],
gravitationalConstant : [ - 2000 , - 30000 , 0 , 50 ] ,
centralGravity : [ 0.3 , 0 , 10 , 0.05 ] ,
springLength : [ 95 , 0 , 500 , 5 ] ,
springConstant : [ 0.04 , 0 , 5 , 0.005 ] ,
damping : [ 0.09 , 0 , 1 , 0.01 ]
} ,
repulsion : {
centralGravity : [ 0.2 , 0 , 10 , 0.05 ] ,
springLength : [ 200 , 0 , 500 , 5 ] ,
springConstant : [ 0.05 , 0 , 5 , 0.005 ] ,
nodeDistance : [ 100 , 0 , 500 , 5 ] ,
damping : [ 0.09 , 0 , 1 , 0.01 ]
} ,
hierarchicalRepulsion : {
centralGravity : [ 0.2 , 0 , 10 , 0.05 ] ,
springLength : [ 100 , 0 , 500 , 5 ] ,
springConstant : [ 0.01 , 0 , 5 , 0.005 ] ,
nodeDistance : [ 120 , 0 , 500 , 5 ] ,
damping : [ 0.09 , 0 , 1 , 0.01 ]
} ,
maxVelocity : [ 50 , 0 , 150 , 1 ] ,
minVelocity : [ 0.1 , 0.01 , 0.5 , 0.01 ] ,
solver : [ 'barnesHut' , 'repulsion' , 'hierarchicalRepulsion' ] ,
timestep : [ 0.5 , 0 , 1 , 0.05 ]
} ,
selection : {
selectable : true ,
selectConnectedEdges : true
} ,
rendering : {
hideEdgesOnDrag : false ,
hideNodesOnDrag : false
}
} ;
this . actualOptions = {
nodes : { } ,
edges : { } ,
layout : { } ,
interaction : { } ,
manipulation : { } ,
physics : { } ,
selection : { } ,
rendering : { } ,
configure : false ,
configureContainer : undefined
} ;
this . options = { } ;
this . defaultOptions = {
enabled : false ,
filter : true ,
container : undefined
}
util . extend ( this . options , this . defaultOptions ) ;
this . configureOptions = configureOptions ;
this . moduleOptions = { } ;
this . domElements = [ ] ; this . domElements = [ ] ;
this . colorPicker = new ColorPicker ( this . network . canvas . pixelRatio ) ;
this . colorPicker = new ColorPicker ( pixelRatio ) ;
this . wrapper ; this . wrapper ;
} }
@ -220,45 +46,42 @@ class ConfigurationSystem {
* / * /
setOptions ( options ) { setOptions ( options ) {
if ( options !== undefined ) { if ( options !== undefined ) {
util . extend ( this . actualOptions , options ) ;
}
this . _clean ( ) ;
if ( this . actualOptions . configure !== undefined && this . actualOptions . configure !== false ) {
util . deepExtend ( this . actualOptions . nodes , this . network . nodesHandler . options , true ) ;
util . deepExtend ( this . actualOptions . edges , this . network . edgesHandler . options , true ) ;
util . deepExtend ( this . actualOptions . layout , this . network . layoutEngine . options , true ) ;
util . deepExtend ( this . actualOptions . interaction , this . network . interactionHandler . options , true ) ;
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 . rendering , this . network . renderer . selection , true ) ;
this . container = this . network . body . container ;
let config = true ;
if ( typeof this . actualOptions . configure === 'string' ) {
config = this . actualOptions . configure ;
let enabled = true ;
if ( typeof options === 'string' ) {
this . options . filter = options ;
} }
else if ( this . actualOptions . configure instanceof Array ) {
config = this . actualOptions . configure . join ( ) ;
else if ( options instanceof Array ) {
this . options . filter = options . join ( ) ;
} }
else if ( typeof this . actualOptions . configure === 'object' ) {
if ( this . actualOptions . configure . container !== undefined ) {
this . container = this . actualOptions . configure . container ;
else if ( typeof options === 'object' ) {
if ( options . container !== undefined ) {
this . options . container = options . container ;
} }
if ( this . actualOptions . configure . filter !== undefined ) {
config = this . actualOptions . configure . filter ;
if ( options . filter !== undefined ) {
this . options . filter = options . filter ;
}
if ( options . enabled !== undefined ) {
enabled = options . enabled ;
} }
} }
else if ( typeof this . actualOptions . configure === 'boolean' ) {
config = this . actualOptions . configure ;
else if ( typeof options === 'boolean' ) {
this . options . filter = true ;
enabled = options ;
} }
this . options . enabled = enabled ;
}
this . _clean ( ) ;
}
if ( config !== false ) {
this . _create ( config ) ;
setModuleOptions ( moduleOptions ) {
this . moduleOptions = moduleOptions ;
if ( this . options . enabled === true ) {
this . _clean ( ) ;
if ( this . options . container !== undefined ) {
this . container = this . options . container ;
} }
this . _create ( this . options . filter ) ;
} }
} }
@ -272,10 +95,10 @@ class ConfigurationSystem {
this . changedOptions = [ ] ; this . changedOptions = [ ] ;
let counter = 0 ; let counter = 0 ;
for ( let option in this . possibl eOptions) {
if ( this . possibl eOptions. hasOwnProperty ( option ) ) {
for ( let option in this . configur eOptions) {
if ( this . configur eOptions. hasOwnProperty ( option ) ) {
if ( config === true || config . indexOf ( option ) !== - 1 ) { if ( config === true || config . indexOf ( option ) !== - 1 ) {
let optionObj = this . possibl eOptions[ option ] ;
let optionObj = this . configur eOptions[ option ] ;
// linebreak between categories
// linebreak between categories
if ( counter > 0 ) { if ( counter > 0 ) {
@ -322,6 +145,7 @@ class ConfigurationSystem {
} }
} }
/ * * / * *
* delete all DOM elements * delete all DOM elements
* @ private * @ private
@ -338,6 +162,7 @@ class ConfigurationSystem {
this . domElements = [ ] ; this . domElements = [ ] ;
} }
/ * * / * *
* get the value from the actualOptions if it exists * get the value from the actualOptions if it exists
* @ param { array } path | where to look for the actual option * @ param { array } path | where to look for the actual option
@ -345,7 +170,7 @@ class ConfigurationSystem {
* @ private * @ private
* / * /
_getValue ( path ) { _getValue ( path ) {
let base = this . actual Options;
let base = this . module Options;
for ( let i = 0 ; i < path . length ; i ++ ) { for ( let i = 0 ; i < path . length ; i ++ ) {
if ( base [ path [ i ] ] !== undefined ) { if ( base [ path [ i ] ] !== undefined ) {
base = base [ path [ i ] ] ; base = base [ path [ i ] ] ;
@ -359,22 +184,6 @@ class ConfigurationSystem {
} }
/ * *
* Copy the path and add a step . It needs to copy because the path will keep stacking otherwise .
* @ param path
* @ param newValue
* @ returns { Array }
* @ private
* /
_addToPath ( path , newValue ) {
let newPath = [ ] ;
for ( let i = 0 ; i < path . length ; i ++ ) {
newPath . push ( path [ i ] ) ;
}
newPath . push ( newValue ) ;
return newPath ;
}
/ * * / * *
* all option elements are wrapped in an item * all option elements are wrapped in an item
* @ param path * @ param path
@ -390,6 +199,7 @@ class ConfigurationSystem {
this . domElements . push ( item ) ; this . domElements . push ( item ) ;
} }
/ * * / * *
* header for major subjects * header for major subjects
* @ param name * @ param name
@ -402,6 +212,7 @@ class ConfigurationSystem {
this . _makeItem ( [ ] , div ) ; this . _makeItem ( [ ] , div ) ;
} }
/ * * / * *
* make a label , if it is an object label , it gets different styling . * make a label , if it is an object label , it gets different styling .
* @ param name * @ param name
@ -616,7 +427,7 @@ class ConfigurationSystem {
// collapse the physics options that are not enabled
// collapse the physics options that are not enabled
let draw = true ; let draw = true ;
if ( path . indexOf ( 'physics' ) !== - 1 ) { if ( path . indexOf ( 'physics' ) !== - 1 ) {
if ( this . actual Options. physics . solver !== subObj ) {
if ( this . module Options. physics . solver !== subObj ) {
draw = false ; draw = false ;
} }
} }
@ -683,7 +494,7 @@ class ConfigurationSystem {
* / * /
_update ( value , path ) { _update ( value , path ) {
let options = this . _constructOptions ( value , path ) ; let options = this . _constructOptions ( value , path ) ;
this . network . setOptions ( options ) ;
this . parent . setOptions ( options ) ;
} }
_constructOptions ( value , path , optionsObj = { } ) { _constructOptions ( value , path , optionsObj = { } ) {
@ -704,7 +515,6 @@ class ConfigurationSystem {
pointer [ path [ i ] ] = value ; pointer [ path [ i ] ] = value ;
} }
} }
console . log ( optionsObj )
return optionsObj ; return optionsObj ;
} }
Alex de Mulder
9 years ago