jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

basic outline for system settings exists

flowchartTest
Alex de Mulder 9 years ago
parent
81ea2b1f4a
commit
681f48eefe
9 changed files with 807 additions and 206 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +147
    -0
      dist/vis.css
  2. +227
    -55
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +3
    -2
      examples/network/01_basic_usage.html
  5. +2
    -1
      gulpfile.js
  6. +0
    -11
      lib/network/css/configuration.css
  7. +147
    -0
      lib/network/css/network-configuration.css
  8. +269
    -123
      lib/network/modules/ConfigurationSystem.js
  9. +11
    -13
      lib/network/modules/PhysicsEngine.js

+ 147
- 0
dist/vis.css View File

@ -803,4 +803,151 @@ div.network-tooltip {
border: 1px solid; border: 1px solid;
box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5); box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
}
div.vis-network-configuration {
position:relative;
display:inline-flex;
font-size:12px;
}
div.vis-network-configuration.header{
font-size:16px;
font-weight: bold;
}
div.vis-network-configuration.label{
width:120px;
}
input.vis-network-configuration.rangeinput{
width:30px;
}
input.vis-network-configuration.range{
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
input.vis-network-configuration.range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #14334b;
height: 17px;
width: 17px;
border-radius: 50%;
background: #3876c2; /* Old browsers */
background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3876c2 0%,#385380 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
box-shadow: #111927 0px 0px 3px 0px;
margin-top: -7px;
}
input.vis-network-configuration.range:focus {
outline: none;
}
input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #9d9d9d 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}
input.vis-network-configuration.range::-moz-range-track {
width: 300px;
height: 10px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
/*hide the outline behind the border*/
input.vis-network-configuration.range:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input.vis-network-configuration.range::-ms-track {
width: 300px;
height: 5x;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input.vis-network-configuration.range::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
input.vis-network-configuration.range:focus::-ms-fill-lower {
background: #888;
}
input.vis-network-configuration.range:focus::-ms-fill-upper {
background: #ccc;
} }

+ 227
- 55
dist/vis.js View File

@ -29728,7 +29728,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.requiresTimeout = true; this.requiresTimeout = true;
this.previousStates = {}; this.previousStates = {};
this.freezeCache = {}; this.freezeCache = {};
this.renderTimer == undefined;
this.renderTimer = undefined;
this.stabilized = false; this.stabilized = false;
this.stabilizationIterations = 0; this.stabilizationIterations = 0;
@ -29803,18 +29803,16 @@ return /******/ (function(modules) { // webpackBootstrap
_prototypeProperties(PhysicsEngine, null, { _prototypeProperties(PhysicsEngine, null, {
setOptions: { setOptions: {
value: function setOptions(options) { value: function setOptions(options) {
if (options !== undefined) {
if (options === false) {
this.physicsEnabled = false;
this.stopSimulation();
} else {
this.physicsEnabled = true;
if (options !== undefined) {
util.selectiveNotDeepExtend(["stabilization"], this.options, options);
util.mergeOptions(this.options, options, "stabilization");
}
this.init();
if (options === false) {
this.physicsEnabled = false;
this.stopSimulation();
} else {
this.physicsEnabled = true;
if (options !== undefined) {
util.selectiveNotDeepExtend(["stabilization"], this.options, options);
util.mergeOptions(this.options, options, "stabilization");
} }
this.init();
} }
}, },
writable: true, writable: true,
@ -36697,15 +36695,15 @@ return /******/ (function(modules) { // webpackBootstrap
this.network = network; this.network = network;
this.possibleOptions = { this.possibleOptions = {
nodesHandler: {
borderWidth: 1,
borderWidthSelected: 2,
nodes: {
borderWidth: [1, 0, 10, 1],
borderWidthSelected: [2, 0, 10, 1],
color: { color: {
border: "color", border: "color",
background: "color", background: "color",
highlight: { highlight: {
border: "color", border: "color",
background: "#D2E5FF"
background: "color"
}, },
hover: { hover: {
border: "color", border: "color",
@ -36748,7 +36746,7 @@ return /******/ (function(modules) { // webpackBootstrap
shape: ["ellipse", "box", "circle", "circularImage", "database", "diamond", "dot", "icon", "image", "square", "star", "text", "triangle", "triangleDown"], shape: ["ellipse", "box", "circle", "circularImage", "database", "diamond", "dot", "icon", "image", "square", "star", "text", "triangle", "triangleDown"],
size: [25, 0, 200, 1] size: [25, 0, 200, 1]
}, },
edgesHandler: {
edges: {
arrows: { arrows: {
to: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1} 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] }, middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05] },
@ -36865,7 +36863,7 @@ return /******/ (function(modules) { // webpackBootstrap
damping: [0.09, 0, 1, 0.01] damping: [0.09, 0, 1, 0.01]
}, },
hierarchicalRepulsion: { hierarchicalRepulsion: {
centralGravity: 0.2,
centralGravity: [0.2, 0, 10, 0.05],
springLength: [100, 0, 500, 5], springLength: [100, 0, 500, 5],
springConstant: [0.01, 0, 5, 0.005], springConstant: [0.01, 0, 5, 0.005],
nodeDistance: [120, 0, 500, 5], nodeDistance: [120, 0, 500, 5],
@ -36896,6 +36894,11 @@ return /******/ (function(modules) { // webpackBootstrap
value: function setOptions(options) { value: function setOptions(options) {
if (options !== undefined) { if (options !== undefined) {
util.deepExtend(this.actualOptions, options); util.deepExtend(this.actualOptions, options);
if (options.configurationContainer !== undefined) {
this.container = options.configurationContainer;
} else {
this.container = this.network.body.container;
}
if (options.configure !== undefined && options.configure !== false) { if (options.configure !== undefined && options.configure !== false) {
var config = undefined; var config = undefined;
@ -36928,35 +36931,36 @@ return /******/ (function(modules) { // webpackBootstrap
*/ */
value: function _create(config) { value: function _create(config) {
this._clean(); this._clean();
var counter = 0;
for (var option in this.possibleOptions) { for (var option in this.possibleOptions) {
if (this.possibleOptions.hasOwnProperty(option)) { if (this.possibleOptions.hasOwnProperty(option)) {
if (config === true || config.indexOf(option) !== -1) { if (config === true || config.indexOf(option) !== -1) {
var optionObj = this.possibleOptions[option]; var optionObj = this.possibleOptions[option];
if (counter > 0) {
this._makeBreak();
}
// a header for the category // a header for the category
this._makeHeader(option); this._makeHeader(option);
// get the suboptions // get the suboptions
for (var subOption in optionObj) {
if (optionObj.hasOwnProperty(subOption)) {
this._makeLabel(subOption);
var subOptionObj = optionObj[subOption];
if (subOptionObj instanceof Array) {
this._handleArray(option, subOption, subOptionObj);
} else if (subOptionObj instanceof Object) {
this._handleObject(option, subOption, subOptionObj);
} else if (typeof subOptionObj === "string") {
this._handleString(option, subOption, subOptionObj);
} else if (typeof subOptionObj === "boolean") {
this._handleBoolean(option, subOption, subOptionObj);
} else {
console.error("dont know how to handle", subOptionObj);
}
}
}
var _path = [option];
this._handleObject(optionObj, _path);
} }
counter++;
} }
} }
this._push();
},
writable: true,
configurable: true
},
_push: {
value: function _push() {
for (var i = 0; i < this.domElements.length; i++) {
this.container.appendChild(this.domElements[i]);
}
}, },
writable: true, writable: true,
configurable: true configurable: true
@ -36966,52 +36970,220 @@ return /******/ (function(modules) { // webpackBootstrap
writable: true, writable: true,
configurable: true configurable: true
}, },
_getValue: {
value: function _getValue(path) {
var base = this.actualOptions;
for (var i = 0; i < path.length; i++) {
if (base[path[i]] !== undefined) {
base = base[path[i]];
} else {
base = undefined;
break;
}
}
return base;
},
writable: true,
configurable: true
},
_addToPath: {
value: function _addToPath(path, newValue) {
var newPath = [];
for (var i = 0; i < path.length; i++) {
newPath.push(path[i]);
}
newPath.push(newValue);
return newPath;
},
writable: true,
configurable: true
},
_makeHeader: { _makeHeader: {
value: function _makeHeader(name) { value: function _makeHeader(name) {
console.log("header", name);
//let div = document.createElement('div');
//div.className = 'vis-network-configuration header';
//div.innerHTML = name;
//this.domElements.push(div);
var div = document.createElement("div");
div.className = "vis-network-configuration header";
div.innerHTML = name;
this.domElements.push(div);
this._makeBreak();
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_makeLabel: { _makeLabel: {
value: function _makeLabel(name) {
console.log("label", name);
//let div = document.createElement('div');
//div.className = 'vis-network-configuration label';
//div.innerHTML = name;
//this.domElements.push(div);
value: function _makeLabel(name, path) {
var div = document.createElement("div");
div.className = "vis-network-configuration label";
div.innerHTML = name;
div.style.left = (path.length - 1) * 10 + "px";
this.domElements.push(div);
},
writable: true,
configurable: true
},
_makeDropdown: {
value: function _makeDropdown(arr, value) {
var select = document.createElement("select");
select.className = "vis-network-configuration select";
var selectedValue = 0;
if (value !== undefined) {
if (arr.indexOf(value) !== -1) {
selectedValue = arr.indexOf(value);
}
}
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("option");
option.value = arr[i];
if (i == selectedValue) {
option.selected = "selected";
}
option.innerHTML = arr[i];
select.appendChild(option);
}
select.onchange = function () {
me._update(this.value, path);
};
this.domElements.push(select);
this._makeBreak();
},
writable: true,
configurable: true
},
_makeRange: {
value: function _makeRange(arr, value, path) {
var defaultValue = arr[0];
var min = arr[1];
var max = arr[2];
var step = arr[3];
var range = document.createElement("input");
range.type = "range";
range.className = "vis-network-configuration range";
range.value = defaultValue;
range.min = min;
range.max = max;
range.step = step;
if (value !== undefined) {
range.value = value;
if (value * 0.1 < min) {
range.min = value / 10;
}
if (value * 10 > max && max !== 1) {
range.max = value * 10;
}
}
var input = document.createElement("input");
input.className = "vis-network-configuration rangeinput";
input.value = range.value;
var me = this;
range.onchange = function () {
input.value = this.value;me._update(this.value, path);
};
range.oninput = function () {
input.value = this.value;
};
this.domElements.push(range);
this.domElements.push(input);
this._makeBreak();
},
writable: true,
configurable: true
},
_makeCheckbox: {
value: function _makeCheckbox(defaultValue, value, path) {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = defaultValue;
if (value !== undefined) {
checkbox.checked = value;
}
var me = this;
checkbox.onchange = function () {
me._update(this.value, path);
};
this.domElements.push(checkbox);
},
writable: true,
configurable: true
},
_makeBreak: {
value: function _makeBreak() {
this.domElements.push(document.createElement("br"));
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_handleObject: { _handleObject: {
value: function _handleObject(category, subcategory, obj) {
console.log("obj", obj);
value: function _handleObject(obj) {
var path = arguments[1] === undefined ? [] : arguments[1];
for (var subObj in obj) {
if (obj.hasOwnProperty(subObj)) {
var item = obj[subObj];
var value = this._getValue(path);
var newPath = this._addToPath(path, subObj);
if (item instanceof Array) {
this._handleArray(subObj, item, value, newPath);
} else if (typeof item === "string") {
this._handleString(subObj, item, value, newPath);
} else if (typeof item === "boolean") {
this._handleBoolean(subObj, item, value, newPath);
} else if (item instanceof Object) {
this._makeLabel(subObj, newPath);
this._makeBreak();
this._handleObject(item, newPath);
} else {
console.error("dont know how to handle", item, subObj, newPath);
}
}
}
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_handleArray: { _handleArray: {
value: function _handleArray(category, subcategory, arr) {
console.log("arr", arr);
value: function _handleArray(optionName, arr, value, path) {
this._makeLabel(optionName, path);
if (typeof arr[0] === "string") {
this._makeDropdown(arr, value, path);
} else if (typeof arr[0] === "number") {
this._makeRange(arr, value, path);
}
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_handleString: { _handleString: {
value: function _handleString(category, subcategory, string) {
console.log("string", string);
value: function _handleString(optionName, string, value, path) {
if (string !== "color") {
this._makeLabel(optionName, path);
} else {
this._makeLabel(optionName, path);
//console.log("string", string, value, path);
}
this._makeLabel(string, []);
this._makeBreak();
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_handleBoolean: { _handleBoolean: {
value: function _handleBoolean(category, subcategory, boolean) {
console.log("boolean", boolean);
value: function _handleBoolean(optionName, boolean, value, path) {
this._makeLabel(optionName, path);
this._makeCheckbox(boolean, value, path);
this._makeBreak();
},
writable: true,
configurable: true
},
_update: {
value: function _update(value, path) {
console.log("updated", value, path);
}, },
writable: true, writable: true,
configurable: true configurable: true

+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 3
- 2
examples/network/01_basic_usage.html View File

@ -45,8 +45,9 @@
edges: edges edges: edges
}; };
var options = { var options = {
configure:true
}//{physics:{stabilization:false}};
configure: true,
physics:{solver:'BarnesHut'}
}
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
</script> </script>

+ 2
- 1
gulpfile.js View File

@ -101,7 +101,8 @@ gulp.task('bundle-css', ['clean'], function () {
'./lib/network/css/network-manipulation.css', './lib/network/css/network-manipulation.css',
'./lib/network/css/network-navigation.css', './lib/network/css/network-navigation.css',
'./lib/network/css/network-tooltip.css'
'./lib/network/css/network-tooltip.css',
'./lib/network/css/network-configuration.css'
]; ];
return gulp.src(files) return gulp.src(files)

+ 0
- 11
lib/network/css/configuration.css View File

@ -1,11 +0,0 @@
vis-network-configuration {
}
vis-network-configuration.header{
}
vis-network-configuration.label{
}

+ 147
- 0
lib/network/css/network-configuration.css View File

@ -0,0 +1,147 @@
div.vis-network-configuration {
position:relative;
display:inline-flex;
font-size:12px;
}
div.vis-network-configuration.header{
font-size:16px;
font-weight: bold;
}
div.vis-network-configuration.label{
width:120px;
}
input.vis-network-configuration.rangeinput{
width:30px;
}
input.vis-network-configuration.range{
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
input.vis-network-configuration.range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #14334b;
height: 17px;
width: 17px;
border-radius: 50%;
background: #3876c2; /* Old browsers */
background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3876c2 0%,#385380 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
box-shadow: #111927 0px 0px 3px 0px;
margin-top: -7px;
}
input.vis-network-configuration.range:focus {
outline: none;
}
input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #9d9d9d 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}
input.vis-network-configuration.range::-moz-range-track {
width: 300px;
height: 10px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
/*hide the outline behind the border*/
input.vis-network-configuration.range:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input.vis-network-configuration.range::-ms-track {
width: 300px;
height: 5x;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input.vis-network-configuration.range::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
input.vis-network-configuration.range:focus::-ms-fill-lower {
background: #888;
}
input.vis-network-configuration.range:focus::-ms-fill-upper {
background: #ccc;
}

+ 269
- 123
lib/network/modules/ConfigurationSystem.js View File

@ -11,15 +11,15 @@ class ConfigurationSystem {
this.network = network; this.network = network;
this.possibleOptions = { this.possibleOptions = {
nodesHandler: {
borderWidth: 1,
borderWidthSelected: 2,
nodes: {
borderWidth: [1, 0, 10, 1],
borderWidthSelected: [2, 0, 10, 1],
color: { color: {
border: 'color', border: 'color',
background: 'color', background: 'color',
highlight: { highlight: {
border: 'color', border: 'color',
background: '#D2E5FF'
background: 'color'
}, },
hover: { hover: {
border: 'color', border: 'color',
@ -27,15 +27,15 @@ class ConfigurationSystem {
} }
}, },
fixed: { fixed: {
x:false,
y:false
x: false,
y: false
}, },
font: { font: {
color: 'color', color: 'color',
size: [14,0,100,1], // px
face: ['arial','verdana','tahoma'],
size: [14, 0, 100, 1], // px
face: ['arial', 'verdana', 'tahoma'],
background: 'color', background: 'color',
stroke: [0,0,50,1], // px
stroke: [0, 0, 50, 1], // px
strokeColor: 'color' strokeColor: 'color'
}, },
group: 'string', group: 'string',
@ -43,101 +43,101 @@ class ConfigurationSystem {
icon: { icon: {
face: 'string', //'FontAwesome', face: 'string', //'FontAwesome',
code: 'string', //'\uf007', code: 'string', //'\uf007',
size: [50,0,200,1], //50,
color:'color' //'#aa00ff'
size: [50, 0, 200, 1], //50,
color: 'color' //'#aa00ff'
}, },
image: 'string', // --> URL image: 'string', // --> URL
physics: true, physics: true,
scaling: { scaling: {
min: [10,0,200,1],
max: [30,0,200,1],
min: [10, 0, 200, 1],
max: [30, 0, 200, 1],
label: { label: {
enabled: true, enabled: true,
min: [14,0,200,1],
max: [30,0,200,1],
maxVisible: [30,0,200,1],
drawThreshold: [3,0,20,1]
min: [14, 0, 200, 1],
max: [30, 0, 200, 1],
maxVisible: [30, 0, 200, 1],
drawThreshold: [3, 0, 20, 1]
} }
}, },
shape: ['ellipse','box','circle','circularImage','database','diamond','dot','icon','image','square','star','text','triangle','triangleDown'],
size: [25,0,200,1]
shape: ['ellipse', 'box', 'circle', 'circularImage', 'database', 'diamond', 'dot', 'icon', 'image', 'square', 'star', 'text', 'triangle', 'triangleDown'],
size: [25, 0, 200, 1]
}, },
edgesHandler: {
edges: {
arrows: { 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]}
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:'color',
highlight:'color',
color: 'color',
highlight: 'color',
hover: 'color', hover: 'color',
inherit: { inherit: {
enabled: true, enabled: true,
source: ['from','to'], // from / to
source: ['from', 'to'], // from / to
useGradients: false useGradients: false
}, },
opacity:[1,0,1,0.05]
opacity: [1, 0, 1, 0.05]
}, },
dashes:{
dashes: {
enabled: false, enabled: false,
length: [5,0,50,1],
gap: [5,0,50,1],
altLength: [5,0,50,1]
length: [5, 0, 50, 1],
gap: [5, 0, 50, 1],
altLength: [5, 0, 50, 1]
}, },
font: { font: {
color: 'color', color: 'color',
size: [14,0,100,1], // px
face: ['arial','verdana','tahoma'],
size: [14, 0, 100, 1], // px
face: ['arial', 'verdana', 'tahoma'],
background: 'color', background: 'color',
stroke: [0,0,50,1], // px
stroke: [0, 0, 50, 1], // px
strokeColor: 'color', strokeColor: 'color',
align:['horizontal','top','middle','bottom']
align: ['horizontal', 'top', 'middle', 'bottom']
}, },
hidden: false, hidden: false,
hoverWidth: [1.5,0,10,0.1],
hoverWidth: [1.5, 0, 10, 0.1],
physics: true, physics: true,
scaling: { scaling: {
min: [10,0,200,1],
max: [30,0,200,1],
min: [10, 0, 200, 1],
max: [30, 0, 200, 1],
label: { label: {
enabled: true, enabled: true,
min: [14,0,200,1],
max: [30,0,200,1],
maxVisible: [30,0,200,1],
drawThreshold: [3,0,20,1]
min: [14, 0, 200, 1],
max: [30, 0, 200, 1],
maxVisible: [30, 0, 200, 1],
drawThreshold: [3, 0, 20, 1]
} }
}, },
selfReferenceSize:[20,0,200,1],
selfReferenceSize: [20, 0, 200, 1],
smooth: { smooth: {
enabled: true, enabled: true,
dynamic: true, dynamic: true,
type: ["continuous",'discrete','diagonalCross','straightCross','horizontal','vertical','curvedCW','curvedCCW'],
roundness: [0.5,0,1,0.05]
type: ["continuous", 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
roundness: [0.5, 0, 1, 0.05]
}, },
width: [1,0,30,1],
widthSelectionMultiplier: [2,0,5,0.1]
width: [1, 0, 30, 1],
widthSelectionMultiplier: [2, 0, 5, 0.1]
}, },
layout:{
randomSeed: [0,0,500,1],
layout: {
randomSeed: [0, 0, 500, 1],
hierarchical: { hierarchical: {
enabled:false,
levelSeparation: [150,20,500,5],
direction: ["UD",'DU','LR','RL'], // UD, DU, LR, RL
sortMethod: ["hubsize",'directed'] // hubsize, directed
enabled: false,
levelSeparation: [150, 20, 500, 5],
direction: ["UD", 'DU', 'LR', 'RL'], // UD, DU, LR, RL
sortMethod: ["hubsize", 'directed'] // hubsize, directed
} }
}, },
interaction: { interaction: {
dragNodes:true,
dragNodes: true,
dragView: true, dragView: true,
zoomView: true, zoomView: true,
hoverEnabled: false, hoverEnabled: false,
showNavigationIcons: false, showNavigationIcons: false,
tooltip: { tooltip: {
delay: [300,0,1000,25],
delay: [300, 0, 1000, 25],
fontColor: 'color', fontColor: 'color',
fontSize: [14,0,40,1], // px
fontFace: ['arial','verdana','tahoma'],
fontSize: [14, 0, 40, 1], // px
fontFace: ['arial', 'verdana', 'tahoma'],
color: { color: {
border: 'color', border: 'color',
background: 'color' background: 'color'
@ -145,15 +145,15 @@ class ConfigurationSystem {
}, },
keyboard: { keyboard: {
enabled: false, enabled: false,
speed: {x: [10,0,40,1], y: [10,0,40,1], zoom: [0.02,0,0.1,0.005]},
speed: {x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005]},
bindToWindow: true bindToWindow: true
} }
}, },
manipulation:{
manipulation: {
enabled: false, enabled: false,
initiallyVisible: false, initiallyVisible: false,
locale: ['en','nl'],
functionality:{
locale: ['en', 'nl'],
functionality: {
addNode: true, addNode: true,
addEdge: true, addEdge: true,
editNode: true, editNode: true,
@ -164,33 +164,33 @@ class ConfigurationSystem {
}, },
physics: { physics: {
barnesHut: { barnesHut: {
theta: [0.5,0.1,1,0.05],
gravitationalConstant: [-2000,-300000,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]
theta: [0.5, 0.1, 1, 0.05],
gravitationalConstant: [-2000, -300000, 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: { 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]
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: { hierarchicalRepulsion: {
centralGravity: 0.2,
springLength: [100,0,500,5],
springConstant: [0.01,0,5,0.005],
nodeDistance: [120,0,500,5],
damping: [0.09,0,1,0.01]
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]
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:{
selection: {
select: true, select: true,
selectConnectedEdges: true selectConnectedEdges: true
}, },
@ -208,6 +208,12 @@ class ConfigurationSystem {
setOptions(options) { setOptions(options) {
if (options !== undefined) { if (options !== undefined) {
util.deepExtend(this.actualOptions, options); util.deepExtend(this.actualOptions, options);
if (options.configurationContainer !== undefined) {
this.container = options.configurationContainer;
}
else {
this.container = this.network.body.container;
}
if (options.configure !== undefined && options.configure !== false) { if (options.configure !== undefined && options.configure !== false) {
let config; let config;
@ -240,75 +246,215 @@ class ConfigurationSystem {
*/ */
_create(config) { _create(config) {
this._clean(); this._clean();
let counter = 0;
for (let option in this.possibleOptions) { for (let option in this.possibleOptions) {
if (this.possibleOptions.hasOwnProperty(option)) { if (this.possibleOptions.hasOwnProperty(option)) {
if (config === true || config.indexOf(option) !== -1) { if (config === true || config.indexOf(option) !== -1) {
let optionObj = this.possibleOptions[option]; let optionObj = this.possibleOptions[option];
if (counter > 0) {
this._makeBreak();
}
// a header for the category // a header for the category
this._makeHeader(option); this._makeHeader(option);
// get the suboptions // get the suboptions
for (let subOption in optionObj) {
if (optionObj.hasOwnProperty(subOption)) {
this._makeLabel(subOption);
let subOptionObj = optionObj[subOption];
if (subOptionObj instanceof Array) {
this._handleArray(option, subOption, subOptionObj);
}
else if (subOptionObj instanceof Object) {
this._handleObject(option, subOption, subOptionObj);
}
else if (typeof subOptionObj === 'string') {
this._handleString(option, subOption, subOptionObj);
}
else if (typeof subOptionObj === 'boolean') {
this._handleBoolean(option, subOption, subOptionObj);
}
else {
console.error("dont know how to handle", subOptionObj);
}
}
}
let path = [option];
this._handleObject(optionObj, path);
} }
counter++;
} }
} }
this._push();
}
_push() {
for (var i = 0; i < this.domElements.length; i++) {
this.container.appendChild(this.domElements[i]);
}
} }
_clean() { _clean() {
} }
_getValue(path) {
let base = this.actualOptions;
for (let i = 0; i < path.length; i++) {
if (base[path[i]] !== undefined) {
base = base[path[i]];
}
else {
base = undefined;
break;
}
}
return base;
}
_addToPath(path, newValue) {
let newPath = [];
for (let i = 0; i < path.length; i++) {
newPath.push(path[i]);
}
newPath.push(newValue);
return newPath;
}
_makeHeader(name) { _makeHeader(name) {
console.log("header",name);
//let div = document.createElement('div');
//div.className = 'vis-network-configuration header';
//div.innerHTML = name;
//this.domElements.push(div);
let div = document.createElement('div');
div.className = 'vis-network-configuration header';
div.innerHTML = name;
this.domElements.push(div);
this._makeBreak();
}
_makeLabel(name, path) {
let div = document.createElement('div');
div.className = 'vis-network-configuration label';
div.innerHTML = name;
div.style.left = ((path.length - 1) * 10) + 'px';
this.domElements.push(div);
}
_makeDropdown(arr, value) {
let select = document.createElement('select');
select.className = 'vis-network-configuration select';
let selectedValue = 0;
if (value !== undefined) {
if (arr.indexOf(value) !== -1) {
selectedValue = arr.indexOf(value);
}
}
for (let i = 0; i < arr.length; i++) {
let option = document.createElement("option");
option.value = arr[i];
if (i == selectedValue) {
option.selected = 'selected';
}
option.innerHTML = arr[i];
select.appendChild(option);
}
select.onchange = function () {me._update(this.value, path);}
this.domElements.push(select);
this._makeBreak();
}
_makeRange(arr, value, path) {
let defaultValue = arr[0];
let min = arr[1];
let max = arr[2];
let step = arr[3];
let range = document.createElement('input');
range.type = 'range';
range.className = 'vis-network-configuration range'
range.value = defaultValue;
range.min = min;
range.max = max;
range.step = step;
if (value !== undefined) {
range.value = value;
if (value * 0.1 < min) {
range.min = value / 10;
}
if (value * 10 > max && max !== 1) {
range.max = value * 10;
}
}
let input = document.createElement("input");
input.className = 'vis-network-configuration rangeinput'
input.value = range.value;
var me = this;
range.onchange = function () {input.value = this.value; me._update(this.value, path);}
range.oninput = function () {input.value = this.value;}
this.domElements.push(range);
this.domElements.push(input);
this._makeBreak();
} }
_makeLabel(name) {
console.log("label",name);
//let div = document.createElement('div');
//div.className = 'vis-network-configuration label';
//div.innerHTML = name;
//this.domElements.push(div);
_makeCheckbox(defaultValue, value, path) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.checked = defaultValue;
if (value !== undefined) {
checkbox.checked = value;
}
let me = this;
checkbox.onchange = function() {me._update(this.value, path)}
this.domElements.push(checkbox);
} }
_handleObject(category, subcategory, obj) {
console.log("obj",obj);
_makeBreak() {
this.domElements.push(document.createElement("br"));
} }
_handleArray(category, subcategory, arr) {
console.log("arr",arr);
_handleObject(obj, path = []) {
for (let subObj in obj) {
if (obj.hasOwnProperty(subObj)) {
let item = obj[subObj];
let value = this._getValue(path);
let newPath = this._addToPath(path, subObj);
if (item instanceof Array) {
this._handleArray(subObj, item, value, newPath);
}
else if (typeof item === 'string') {
this._handleString(subObj, item, value, newPath);
}
else if (typeof item === 'boolean') {
this._handleBoolean(subObj, item, value, newPath);
}
else if (item instanceof Object) {
this._makeLabel(subObj, newPath);
this._makeBreak();
this._handleObject(item, newPath);
}
else {
console.error("dont know how to handle", item, subObj, newPath);
}
}
}
}
_handleArray(optionName, arr, value, path) {
this._makeLabel(optionName, path);
if (typeof arr[0] === 'string') {
this._makeDropdown(arr, value, path);
}
else if (typeof arr[0] === 'number') {
this._makeRange(arr, value, path);
}
}
_handleString(optionName, string, value, path) {
if (string !== 'color') {
this._makeLabel(optionName, path);
}
else {
this._makeLabel(optionName, path);
//console.log("string", string, value, path);
}
this._makeLabel(string, []);
this._makeBreak();
} }
_handleString(category, subcategory, string) {
console.log("string",string);
_handleBoolean(optionName, boolean, value, path) {
this._makeLabel(optionName, path);
this._makeCheckbox(boolean, value, path);
this._makeBreak();
} }
_handleBoolean(category, subcategory, boolean) {
console.log("boolean",boolean);
_update(value, path) {
console.log("updated", value, path)
} }
} }

+ 11
- 13
lib/network/modules/PhysicsEngine.js View File

@ -22,7 +22,7 @@ class PhysicsEngine {
this.requiresTimeout = true; this.requiresTimeout = true;
this.previousStates = {}; this.previousStates = {};
this.freezeCache = {}; this.freezeCache = {};
this.renderTimer == undefined;
this.renderTimer = undefined;
this.stabilized = false; this.stabilized = false;
this.stabilizationIterations = 0; this.stabilizationIterations = 0;
@ -87,19 +87,17 @@ class PhysicsEngine {
} }
setOptions(options) { setOptions(options) {
if (options !== undefined) {
if (options === false) {
this.physicsEnabled = false;
this.stopSimulation();
}
else {
this.physicsEnabled = true;
if (options !== undefined) {
util.selectiveNotDeepExtend(['stabilization'], this.options, options);
util.mergeOptions(this.options, options, 'stabilization')
}
this.init();
if (options === false) {
this.physicsEnabled = false;
this.stopSimulation();
}
else {
this.physicsEnabled = true;
if (options !== undefined) {
util.selectiveNotDeepExtend(['stabilization'], this.options, options);
util.mergeOptions(this.options, options, 'stabilization')
} }
this.init();
} }
} }

Write Preview
Loading…
Cancel
Save