diff --git a/dist/vis.css b/dist/vis.css index 0b7a13ed..dcda79cb 100644 --- a/dist/vis.css +++ b/dist/vis.css @@ -803,4 +803,151 @@ div.network-tooltip { border: 1px solid; 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; } \ No newline at end of file diff --git a/dist/vis.js b/dist/vis.js index ade3c861..c21b12b7 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -29728,7 +29728,7 @@ return /******/ (function(modules) { // webpackBootstrap this.requiresTimeout = true; this.previousStates = {}; this.freezeCache = {}; - this.renderTimer == undefined; + this.renderTimer = undefined; this.stabilized = false; this.stabilizationIterations = 0; @@ -29803,18 +29803,16 @@ return /******/ (function(modules) { // webpackBootstrap _prototypeProperties(PhysicsEngine, null, { setOptions: { 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, @@ -36697,15 +36695,15 @@ return /******/ (function(modules) { // webpackBootstrap this.network = network; this.possibleOptions = { - nodesHandler: { - borderWidth: 1, - borderWidthSelected: 2, + nodes: { + borderWidth: [1, 0, 10, 1], + borderWidthSelected: [2, 0, 10, 1], color: { border: "color", background: "color", highlight: { border: "color", - background: "#D2E5FF" + background: "color" }, hover: { 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"], size: [25, 0, 200, 1] }, - edgesHandler: { + 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] }, @@ -36865,7 +36863,7 @@ return /******/ (function(modules) { // webpackBootstrap damping: [0.09, 0, 1, 0.01] }, hierarchicalRepulsion: { - centralGravity: 0.2, + centralGravity: [0.2, 0, 10, 0.05], springLength: [100, 0, 500, 5], springConstant: [0.01, 0, 5, 0.005], nodeDistance: [120, 0, 500, 5], @@ -36896,6 +36894,11 @@ return /******/ (function(modules) { // webpackBootstrap value: function setOptions(options) { if (options !== undefined) { 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) { var config = undefined; @@ -36928,35 +36931,36 @@ return /******/ (function(modules) { // webpackBootstrap */ value: function _create(config) { this._clean(); - + var counter = 0; for (var option in this.possibleOptions) { if (this.possibleOptions.hasOwnProperty(option)) { if (config === true || config.indexOf(option) !== -1) { var optionObj = this.possibleOptions[option]; + + if (counter > 0) { + this._makeBreak(); + } // a header for the category this._makeHeader(option); // 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, configurable: true @@ -36966,52 +36970,220 @@ return /******/ (function(modules) { // webpackBootstrap writable: 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: { 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, configurable: true }, _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, configurable: true }, _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, configurable: true }, _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, configurable: true }, _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, configurable: true }, _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, configurable: true diff --git a/dist/vis.min.css b/dist/vis.min.css index 693909ff..de5bfa35 100644 --- a/dist/vis.min.css +++ b/dist/vis.min.css @@ -1 +1 @@ -div.network-manipulation-closeDiv,div.network-manipulationUI,div.network-navigation{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-khtml-user-select:none}div.network-manipulation-closeDiv,div.network-manipulationUI{background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis.timeline.root{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right,.vis.timeline .vispanel.top{border:1px #bfbfbf}.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.top{border-left-style:solid;border-right-style:solid}.vis.timeline .background{overflow:hidden}.vis.timeline .vispanel>.content{position:relative}.vis.timeline .vispanel .shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis.timeline .vispanel .shadow.top{top:-1px;left:0}.vis.timeline .vispanel .shadow.bottom{bottom:-1px;left:0}.vis.timeline .labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset .vlabel{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .labelset .vlabel:last-child{border-bottom:none}.vis.timeline .labelset .vlabel .inner{display:inline-block;padding:5px}.vis.timeline .labelset .vlabel .inner.hidden{padding:0}.vis.timeline .itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis.timeline .itemset .background,.vis.timeline .itemset .foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis.timeline .axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis.timeline .foreground .group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .foreground .group:last-child{border-bottom:none}.vis.timeline .item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;overflow:hidden}.vis.timeline .item.selected{border-color:#FFC200;background-color:#FFF785;z-index:2}.vis.timeline .editable .item.selected{cursor:move}.vis.timeline .item.point.selected{background-color:#FFF785}.vis.timeline .item.box{text-align:center;border-style:solid;border-radius:2px}.vis.timeline .item.point{background:0 0}.vis.timeline .item.dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis.timeline .item.range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis.timeline .item.background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis.timeline .item.range .content{position:relative;display:inline-block;max-width:100%}.vis.timeline .item.background .content{position:absolute;display:inline-block;max-width:100%;margin:5px}.vis.timeline .item.line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis.timeline .item .content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis.timeline .item .delete{background:url(img/timeline/delete.png)top center no-repeat;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis.timeline .item.range .drag-left{position:absolute;width:24px;height:100%;top:0;left:-4px;cursor:w-resize}.vis.timeline .item.range .drag-right{position:absolute;width:24px;height:100%;top:0;right:-4px;cursor:e-resize}.vis.timeline .timeaxis{position:relative;overflow:hidden}.vis.timeline .timeaxis.foreground{top:0;left:0;width:100%}.vis.timeline .timeaxis.background{position:absolute;top:0;left:0;width:100%;height:100%}.vis.timeline .timeaxis .text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis.timeline .timeaxis .text.measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis.timeline .timeaxis .grid.vertical{position:absolute;border-left:1px solid}.vis.timeline .timeaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .timeaxis .grid.major{border-color:#bfbfbf}.vis.timeline .currenttime{background-color:#FF7F6E;width:2px;z-index:1}.vis.timeline .customtime{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis.timeline .vispanel.background.horizontal .grid.horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis.timeline .vispanel.background.horizontal .grid.minor{border-color:#e5e5e5}.vis.timeline .vispanel.background.horizontal .grid.major{border-color:#bfbfbf}.vis.timeline .dataaxis .yAxis.major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis.timeline .dataaxis .yAxis.major.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis.timeline .dataaxis .yAxis.minor.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis.timeline .dataaxis .yAxis.title.measure{padding:0;margin:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title.left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis.timeline .dataaxis .yAxis.title.right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis.timeline .legend{background-color:rgba(247,252,255,.65);padding:5px;border-color:#b3b3b3;border-style:solid;border-width:1px;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis.timeline .legendText{white-space:nowrap;display:inline-block}.vis.timeline .graphGroup0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis.timeline .graphGroup1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis.timeline .graphGroup2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis.timeline .graphGroup3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis.timeline .graphGroup4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis.timeline .graphGroup5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis.timeline .graphGroup6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis.timeline .graphGroup7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis.timeline .graphGroup8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis.timeline .graphGroup9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis.timeline .fill{fill-opacity:.1;stroke:none}.vis.timeline .bar{fill-opacity:.5;stroke-width:1px}.vis.timeline .point{stroke-width:2px;fill-opacity:1}.vis.timeline .legendBackground{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis.timeline .outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis.timeline .iconFill{fill-opacity:.3;stroke:none}div.network-manipulationDiv{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);position:absolute;left:0;top:0;width:100%;height:30px}div.network-manipulation-editMode{position:absolute;left:0;top:15px;height:30px}div.network-manipulation-closeDiv{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-image:url(img/network/cross.png);user-select:none}div.network-manipulation-closeDiv:hover{opacity:.6}div.network-manipulationUI{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;height:24px;margin:0 0 0 10px;vertical-align:middle;padding:0 8px;user-select:none}div.network-manipulationUI:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.network-manipulationUI:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.network-manipulationUI.back{background-image:url(img/network/backIcon.png)}div.network-manipulationUI.none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.network-manipulationUI.none:active{box-shadow:1px 1px 8px transparent}div.network-manipulationUI.none{padding:0}div.network-manipulationUI.notification{margin:2px;font-weight:700}div.network-manipulationUI.add{background-image:url(img/network/addNodeIcon.png)}div.network-manipulationUI.edit{background-image:url(img/network/editIcon.png)}div.network-manipulationUI.edit.editmode{background-color:#fcfcfc;border-style:solid;border-width:1px;border-color:#ccc}div.network-manipulationUI.connect{background-image:url(img/network/connectIcon.png)}div.network-manipulationUI.delete{background-image:url(img/network/deleteIcon.png)}div.network-manipulationLabel{margin:0 0 0 23px;line-height:25px}div.network-seperatorLine{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.network-navigation_wrapper{position:absolute;left:0;top:0;width:100%;height:100%}div.network-navigation{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;user-select:none}div.network-navigation:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.network-navigation:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.network-navigation.up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.network-navigation.down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.network-navigation.left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.network-navigation.right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.network-navigation.zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.network-navigation.zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.network-navigation.zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid;box-shadow:3px 3px 10px rgba(128,128,128,.5)} \ No newline at end of file +div.network-manipulation-closeDiv,div.network-manipulationUI,div.network-navigation{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-khtml-user-select:none}div.network-manipulation-closeDiv,div.network-manipulationUI{background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis.timeline.root{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right,.vis.timeline .vispanel.top{border:1px #bfbfbf}.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.top{border-left-style:solid;border-right-style:solid}.vis.timeline .background{overflow:hidden}.vis.timeline .vispanel>.content{position:relative}.vis.timeline .vispanel .shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis.timeline .vispanel .shadow.top{top:-1px;left:0}.vis.timeline .vispanel .shadow.bottom{bottom:-1px;left:0}.vis.timeline .labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset .vlabel{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .labelset .vlabel:last-child{border-bottom:none}.vis.timeline .labelset .vlabel .inner{display:inline-block;padding:5px}.vis.timeline .labelset .vlabel .inner.hidden{padding:0}.vis.timeline .itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis.timeline .itemset .background,.vis.timeline .itemset .foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis.timeline .axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis.timeline .foreground .group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .foreground .group:last-child{border-bottom:none}.vis.timeline .item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;overflow:hidden}.vis.timeline .item.selected{border-color:#FFC200;background-color:#FFF785;z-index:2}.vis.timeline .editable .item.selected{cursor:move}.vis.timeline .item.point.selected{background-color:#FFF785}.vis.timeline .item.box{text-align:center;border-style:solid;border-radius:2px}.vis.timeline .item.point{background:0 0}.vis.timeline .item.dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis.timeline .item.range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis.timeline .item.background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis.timeline .item.range .content{position:relative;display:inline-block;max-width:100%}.vis.timeline .item.background .content{position:absolute;display:inline-block;max-width:100%;margin:5px}.vis.timeline .item.line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis.timeline .item .content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis.timeline .item .delete{background:url(img/timeline/delete.png)top center no-repeat;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis.timeline .item.range .drag-left{position:absolute;width:24px;height:100%;top:0;left:-4px;cursor:w-resize}.vis.timeline .item.range .drag-right{position:absolute;width:24px;height:100%;top:0;right:-4px;cursor:e-resize}.vis.timeline .timeaxis{position:relative;overflow:hidden}.vis.timeline .timeaxis.foreground{top:0;left:0;width:100%}.vis.timeline .timeaxis.background{position:absolute;top:0;left:0;width:100%;height:100%}.vis.timeline .timeaxis .text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis.timeline .timeaxis .text.measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis.timeline .timeaxis .grid.vertical{position:absolute;border-left:1px solid}.vis.timeline .timeaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .timeaxis .grid.major{border-color:#bfbfbf}.vis.timeline .currenttime{background-color:#FF7F6E;width:2px;z-index:1}.vis.timeline .customtime{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis.timeline .vispanel.background.horizontal .grid.horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis.timeline .vispanel.background.horizontal .grid.minor{border-color:#e5e5e5}.vis.timeline .vispanel.background.horizontal .grid.major{border-color:#bfbfbf}.vis.timeline .dataaxis .yAxis.major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis.timeline .dataaxis .yAxis.major.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis.timeline .dataaxis .yAxis.minor.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis.timeline .dataaxis .yAxis.title.measure{padding:0;margin:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title.left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis.timeline .dataaxis .yAxis.title.right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis.timeline .legend{background-color:rgba(247,252,255,.65);padding:5px;border-color:#b3b3b3;border-style:solid;border-width:1px;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis.timeline .legendText{white-space:nowrap;display:inline-block}.vis.timeline .graphGroup0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis.timeline .graphGroup1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis.timeline .graphGroup2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis.timeline .graphGroup3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis.timeline .graphGroup4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis.timeline .graphGroup5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis.timeline .graphGroup6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis.timeline .graphGroup7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis.timeline .graphGroup8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis.timeline .graphGroup9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis.timeline .fill{fill-opacity:.1;stroke:none}.vis.timeline .bar{fill-opacity:.5;stroke-width:1px}.vis.timeline .point{stroke-width:2px;fill-opacity:1}.vis.timeline .legendBackground{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis.timeline .outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis.timeline .iconFill{fill-opacity:.3;stroke:none}div.network-manipulationDiv{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);position:absolute;left:0;top:0;width:100%;height:30px}div.network-manipulation-editMode{position:absolute;left:0;top:15px;height:30px}div.network-manipulation-closeDiv{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-image:url(img/network/cross.png);user-select:none}div.network-manipulation-closeDiv:hover{opacity:.6}div.network-manipulationUI{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;height:24px;margin:0 0 0 10px;vertical-align:middle;padding:0 8px;user-select:none}div.network-manipulationUI:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.network-manipulationUI:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.network-manipulationUI.back{background-image:url(img/network/backIcon.png)}div.network-manipulationUI.none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.network-manipulationUI.none:active{box-shadow:1px 1px 8px transparent}div.network-manipulationUI.none{padding:0}div.network-manipulationUI.notification{margin:2px;font-weight:700}div.network-manipulationUI.add{background-image:url(img/network/addNodeIcon.png)}div.network-manipulationUI.edit{background-image:url(img/network/editIcon.png)}div.network-manipulationUI.edit.editmode{background-color:#fcfcfc;border-style:solid;border-width:1px;border-color:#ccc}div.network-manipulationUI.connect{background-image:url(img/network/connectIcon.png)}div.network-manipulationUI.delete{background-image:url(img/network/deleteIcon.png)}div.network-manipulationLabel{margin:0 0 0 23px;line-height:25px}div.network-seperatorLine{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.network-navigation_wrapper{position:absolute;left:0;top:0;width:100%;height:100%}div.network-navigation{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;user-select:none}div.network-navigation:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.network-navigation:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.network-navigation.up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.network-navigation.down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.network-navigation.left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.network-navigation.right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.network-navigation.zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.network-navigation.zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.network-navigation.zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid;box-shadow:3px 3px 10px rgba(128,128,128,.5)}div.vis-network-configuration{position:relative;display:inline-flex;font-size:12px}div.vis-network-configuration.header{font-size:16px;font-weight:700}div.vis-network-configuration.label{width:120px}input.vis-network-configuration.rangeinput{width:30px}input.vis-network-configuration.range{-webkit-appearance:none;border:1px solid #fff;width:300px}input.vis-network-configuration.range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;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;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3876c2', endColorstr='#385380', GradientType=0);box-shadow:#111927 0 0 3px 0;margin-top:-7px}input.vis-network-configuration.range:focus{outline:0}input.vis-network-configuration.range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0)}input.vis-network-configuration.range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-network-configuration.range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-network-configuration.range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-network-configuration.range::-ms-track{width:300px;height:5x;background:0 0;border-color:transparent;border-width:6px 0;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} \ No newline at end of file diff --git a/examples/network/01_basic_usage.html b/examples/network/01_basic_usage.html index 42a1a316..987cc01e 100644 --- a/examples/network/01_basic_usage.html +++ b/examples/network/01_basic_usage.html @@ -45,8 +45,9 @@ edges: edges }; var options = { - configure:true - }//{physics:{stabilization:false}}; + configure: true, + physics:{solver:'BarnesHut'} + } var network = new vis.Network(container, data, options); diff --git a/gulpfile.js b/gulpfile.js index 176b868e..75f910d5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -101,7 +101,8 @@ gulp.task('bundle-css', ['clean'], function () { './lib/network/css/network-manipulation.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) diff --git a/lib/network/css/configuration.css b/lib/network/css/configuration.css deleted file mode 100644 index 5841ec31..00000000 --- a/lib/network/css/configuration.css +++ /dev/null @@ -1,11 +0,0 @@ - -vis-network-configuration { -} - - -vis-network-configuration.header{ -} - -vis-network-configuration.label{ -} - diff --git a/lib/network/css/network-configuration.css b/lib/network/css/network-configuration.css new file mode 100644 index 00000000..1e25c9bf --- /dev/null +++ b/lib/network/css/network-configuration.css @@ -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; +} \ No newline at end of file diff --git a/lib/network/modules/ConfigurationSystem.js b/lib/network/modules/ConfigurationSystem.js index 5e4c8e94..a9c736c8 100644 --- a/lib/network/modules/ConfigurationSystem.js +++ b/lib/network/modules/ConfigurationSystem.js @@ -11,15 +11,15 @@ class ConfigurationSystem { this.network = network; this.possibleOptions = { - nodesHandler: { - borderWidth: 1, - borderWidthSelected: 2, + nodes: { + borderWidth: [1, 0, 10, 1], + borderWidthSelected: [2, 0, 10, 1], color: { border: 'color', background: 'color', highlight: { border: 'color', - background: '#D2E5FF' + background: 'color' }, hover: { border: 'color', @@ -27,15 +27,15 @@ class ConfigurationSystem { } }, fixed: { - x:false, - y:false + x: false, + y: false }, font: { color: 'color', - size: [14,0,100,1], // px - face: ['arial','verdana','tahoma'], + size: [14, 0, 100, 1], // px + face: ['arial', 'verdana', 'tahoma'], background: 'color', - stroke: [0,0,50,1], // px + stroke: [0, 0, 50, 1], // px strokeColor: 'color' }, group: 'string', @@ -43,101 +43,101 @@ class ConfigurationSystem { icon: { face: 'string', //'FontAwesome', code: 'string', //'\uf007', - size: [50,0,200,1], //50, - color:'color' //'#aa00ff' + size: [50, 0, 200, 1], //50, + color: 'color' //'#aa00ff' }, image: 'string', // --> URL physics: true, scaling: { - min: [10,0,200,1], - max: [30,0,200,1], + 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] + 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: { - 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', - highlight:'color', + color: 'color', + highlight: 'color', hover: 'color', inherit: { enabled: true, - source: ['from','to'], // from / to + source: ['from', 'to'], // from / to useGradients: false }, - opacity:[1,0,1,0.05] + opacity: [1, 0, 1, 0.05] }, - dashes:{ + dashes: { 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: { color: 'color', - size: [14,0,100,1], // px - face: ['arial','verdana','tahoma'], + size: [14, 0, 100, 1], // px + face: ['arial', 'verdana', 'tahoma'], background: 'color', - stroke: [0,0,50,1], // px + stroke: [0, 0, 50, 1], // px strokeColor: 'color', - align:['horizontal','top','middle','bottom'] + align: ['horizontal', 'top', 'middle', 'bottom'] }, hidden: false, - hoverWidth: [1.5,0,10,0.1], + hoverWidth: [1.5, 0, 10, 0.1], physics: true, scaling: { - min: [10,0,200,1], - max: [30,0,200,1], + 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] + 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: { enabled: 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: { - 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: { - dragNodes:true, + dragNodes: true, dragView: true, zoomView: true, hoverEnabled: false, showNavigationIcons: false, tooltip: { - delay: [300,0,1000,25], + delay: [300, 0, 1000, 25], fontColor: 'color', - fontSize: [14,0,40,1], // px - fontFace: ['arial','verdana','tahoma'], + fontSize: [14, 0, 40, 1], // px + fontFace: ['arial', 'verdana', 'tahoma'], color: { border: 'color', background: 'color' @@ -145,15 +145,15 @@ class ConfigurationSystem { }, keyboard: { 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 } }, - manipulation:{ + manipulation: { enabled: false, initiallyVisible: false, - locale: ['en','nl'], - functionality:{ + locale: ['en', 'nl'], + functionality: { addNode: true, addEdge: true, editNode: true, @@ -164,33 +164,33 @@ class ConfigurationSystem { }, physics: { 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: { - 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: { - 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, selectConnectedEdges: true }, @@ -208,6 +208,12 @@ class ConfigurationSystem { setOptions(options) { if (options !== undefined) { 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) { let config; @@ -240,75 +246,215 @@ class ConfigurationSystem { */ _create(config) { this._clean(); - + let counter = 0; for (let option in this.possibleOptions) { if (this.possibleOptions.hasOwnProperty(option)) { if (config === true || config.indexOf(option) !== -1) { let optionObj = this.possibleOptions[option]; + + if (counter > 0) { + this._makeBreak(); + } // a header for the category this._makeHeader(option); // 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() { } + _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) { - 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) } } diff --git a/lib/network/modules/PhysicsEngine.js b/lib/network/modules/PhysicsEngine.js index 3a270cad..6725e73a 100644 --- a/lib/network/modules/PhysicsEngine.js +++ b/lib/network/modules/PhysicsEngine.js @@ -22,7 +22,7 @@ class PhysicsEngine { this.requiresTimeout = true; this.previousStates = {}; this.freezeCache = {}; - this.renderTimer == undefined; + this.renderTimer = undefined; this.stabilized = false; this.stabilizationIterations = 0; @@ -87,19 +87,17 @@ class PhysicsEngine { } 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(); } }