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

added color picker

flowchartTest
Alex de Mulder 9 years ago
parent
681f48eefe
commit
9c324697dd
12 changed files with 987 additions and 205 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +128
    -7
      dist/vis.css
  2. +383
    -90
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +2
    -1
      gulpfile.js
  5. +3
    -0
      lib/network/Network.js
  6. +65
    -0
      lib/network/css/network-colorpicker.css
  7. +63
    -7
      lib/network/css/network-configuration.css
  8. +142
    -91
      lib/network/modules/ConfigurationSystem.js
  9. +1
    -1
      lib/network/modules/EdgesHandler.js
  10. +2
    -3
      lib/network/modules/InteractionHandler.js
  11. +4
    -4
      lib/network/modules/NodesHandler.js
  12. +193
    -0
      lib/network/modules/components/colorPicker.js

+ 128
- 7
dist/vis.css View File

@ -804,39 +804,95 @@ div.network-tooltip {
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 { div.vis-network-configuration {
position:relative; position:relative;
display:inline-flex;
display:block;
float:left;
font-size:12px; font-size:12px;
} }
div.vis-network-configuration.entree{
display:block;
width:495px;
height:25px;
vertical-align: middle;
line-height:25px;
}
div.vis-network-configuration.entree.s2{
left:10px;
background-color: #f7f8fa;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.entree.s3{
left:20px;
background-color: #e4e9f0;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.entree.s4{
left:30px;
background-color: #cfd8e6;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.header{ div.vis-network-configuration.header{
font-size:16px;
font-size:18px;
font-weight: bold; font-weight: bold;
} }
div.vis-network-configuration.label{ div.vis-network-configuration.label{
width:120px; width:120px;
height:25px;
line-height: 25px;
} }
div.vis-network-configuration.label.s3{
width:110px;
}
div.vis-network-configuration.label.s4{
width:100px;
}
input.vis-network-configuration.rangeinput{
div.vis-network-configuration.colorBlock{
width:30px; width:30px;
height:19px;
border:1px solid #444444;
border-radius:2px;
padding:0px;
margin:0px;
cursor:pointer;
} }
input.vis-network-configuration.checkbox {
left:-5px;
}
input.vis-network-configuration.rangeinput{
position:relative;
top:-5px;
width:60px;
height:13px;
padding:1px;
margin:0;
pointer-events:none;
}
input.vis-network-configuration.range{ input.vis-network-configuration.range{
/*removes default webkit styles*/ /*removes default webkit styles*/
-webkit-appearance: none; -webkit-appearance: none;
/*fix for FF unable to apply focus style bug */ /*fix for FF unable to apply focus style bug */
border: 1px solid white;
border: 0px solid white;
background-color:rgba(0,0,0,0);
/*required for proper track sizing in FF*/ /*required for proper track sizing in FF*/
width: 300px; width: 300px;
height:20px;
} }
input.vis-network-configuration.range::-webkit-slider-runnable-track { input.vis-network-configuration.range::-webkit-slider-runnable-track {
width: 300px; width: 300px;
@ -868,7 +924,7 @@ input.vis-network-configuration.range::-webkit-slider-thumb {
background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */ background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */ background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
box-shadow: #111927 0px 0px 3px 0px;
box-shadow: #111927 0px 0px 1px 0px;
margin-top: -7px; margin-top: -7px;
} }
input.vis-network-configuration.range:focus { input.vis-network-configuration.range:focus {
@ -950,4 +1006,69 @@ input.vis-network-configuration.range:focus::-ms-fill-lower {
} }
input.vis-network-configuration.range:focus::-ms-fill-upper { input.vis-network-configuration.range:focus::-ms-fill-upper {
background: #ccc; background: #ccc;
}
div.vis-network-colorPicker-frame {
position:relative;
margin-top:40px;
width:310px;
height:310px;
padding: 10px;
border-radius:20px;
background-color:#ffffff;
}
div.vis-network-colorPicker-color {
position:absolute;
width: 289px;
height: 289px;
cursor: pointer;
}
div.vis-network-colorPicker-brightness {
position:absolute;
top:300px;
/*background-color:#00ff00;*/
}
div.vis-network-colorPicker-saturation {
position:absolute;
top:145px;
left:160px;
/*background-color:#ff0000;*/
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
div.vis-network-colorPicker-selector{
position:absolute;
top:137px;
left:137px;
width:15px;
height:15px;
border-radius:15px;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
input.vis-network-configuration.range.colorPicker{
width: 290px;
height:20px;
}
input.vis-network-brightnessRange {
width: 289px !important;
}
input.vis-network-saturationRange {
width: 289px !important;
} }

+ 383
- 90
dist/vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 4.0.0-SNAPSHOT * @version 4.0.0-SNAPSHOT
* @date 2015-03-26
* @date 2015-03-27
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -23478,6 +23478,9 @@ return /******/ (function(modules) { // webpackBootstrap
} }
this.canvas.setSize(); this.canvas.setSize();
// start the physics simulation. Can be safely called multiple times.
this.body.emitter.emit("startSimulation");
} }
}; };
@ -25269,16 +25272,16 @@ return /******/ (function(modules) { // webpackBootstrap
face: "arial", face: "arial",
background: "none", background: "none",
stroke: 0, // px stroke: 0, // px
strokeColor: "white",
strokeColor: "#ffffff",
align: "horizontal" align: "horizontal"
}, },
group: undefined, group: undefined,
hidden: false, hidden: false,
icon: { icon: {
face: undefined, //'FontAwesome',
face: "FontAwesome", //'FontAwesome',
code: undefined, //'\uf007', code: undefined, //'\uf007',
size: undefined, //50,
color: undefined //'#aa00ff'
size: 50, //50,
color: "#2B7CE9" //'#aa00ff'
}, },
image: undefined, // --> URL image: undefined, // --> URL
label: undefined, label: undefined,
@ -27643,7 +27646,7 @@ return /******/ (function(modules) { // webpackBootstrap
face: "arial", face: "arial",
background: "none", background: "none",
stroke: 1, // px stroke: 1, // px
strokeColor: "white",
strokeColor: "#ffffff",
align: "horizontal" align: "horizontal"
}, },
hidden: false, hidden: false,
@ -33065,7 +33068,6 @@ return /******/ (function(modules) { // webpackBootstrap
this.body.functions.getPointer = this.getPointer.bind(this); this.body.functions.getPointer = this.getPointer.bind(this);
this.options = {}; this.options = {};
this.defaultOptions = { this.defaultOptions = {
dragNodes: true, dragNodes: true,
@ -33075,11 +33077,11 @@ return /******/ (function(modules) { // webpackBootstrap
showNavigationIcons: false, showNavigationIcons: false,
tooltip: { tooltip: {
delay: 300, delay: 300,
fontColor: "black",
fontColor: "#000000",
fontSize: 14, // px fontSize: 14, // px
fontFace: "verdana", fontFace: "verdana",
color: { color: {
border: "#666",
border: "#666666",
background: "#FFFFC6" background: "#FFFFC6"
} }
}, },
@ -36676,6 +36678,8 @@ return /******/ (function(modules) { // webpackBootstrap
"use strict"; "use strict";
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
@ -36687,6 +36691,7 @@ return /******/ (function(modules) { // webpackBootstrap
var util = __webpack_require__(1); var util = __webpack_require__(1);
var ColorPicker = _interopRequire(__webpack_require__(106));
var ConfigurationSystem = (function () { var ConfigurationSystem = (function () {
function ConfigurationSystem(network) { function ConfigurationSystem(network) {
@ -36699,15 +36704,15 @@ return /******/ (function(modules) { // webpackBootstrap
borderWidth: [1, 0, 10, 1], borderWidth: [1, 0, 10, 1],
borderWidthSelected: [2, 0, 10, 1], borderWidthSelected: [2, 0, 10, 1],
color: { color: {
border: "color",
background: "color",
border: ["color", "#2B7CE9"],
background: ["color", "#97C2FC"],
highlight: { highlight: {
border: "color",
background: "color"
border: ["color", "#2B7CE9"],
background: ["color", "#D2E5FF"]
}, },
hover: { hover: {
border: "color",
background: "color"
border: ["color", "#2B7CE9"],
background: ["color", "#D2E5FF"]
} }
}, },
fixed: { fixed: {
@ -36715,12 +36720,12 @@ return /******/ (function(modules) { // webpackBootstrap
y: false y: false
}, },
font: { font: {
color: "color",
color: ["color", "#343434"],
size: [14, 0, 100, 1], // px size: [14, 0, 100, 1], // px
face: ["arial", "verdana", "tahoma"], face: ["arial", "verdana", "tahoma"],
background: "color",
background: ["color", "none"],
stroke: [0, 0, 50, 1], // px stroke: [0, 0, 50, 1], // px
strokeColor: "color"
strokeColor: ["color", "#ffffff"]
}, },
group: "string", group: "string",
hidden: false, hidden: false,
@ -36728,7 +36733,7 @@ return /******/ (function(modules) { // webpackBootstrap
face: "string", //'FontAwesome', face: "string", //'FontAwesome',
code: "string", //'\uf007', code: "string", //'\uf007',
size: [50, 0, 200, 1], //50, size: [50, 0, 200, 1], //50,
color: "color" //'#aa00ff'
color: ["color", "#2B7CE9"] //'#aa00ff'
}, },
image: "string", // --> URL image: "string", // --> URL
physics: true, physics: true,
@ -36743,7 +36748,7 @@ return /******/ (function(modules) { // webpackBootstrap
drawThreshold: [3, 0, 20, 1] drawThreshold: [3, 0, 20, 1]
} }
}, },
shape: ["ellipse", "box", "circle", "circularImage", "database", "diamond", "dot", "icon", "image", "square", "star", "text", "triangle", "triangleDown"],
shape: ["ellipse", "box", "circle", "database", "diamond", "dot", "icon", "square", "star", "text", "triangle", "triangleDown"],
size: [25, 0, 200, 1] size: [25, 0, 200, 1]
}, },
edges: { edges: {
@ -36753,9 +36758,9 @@ return /******/ (function(modules) { // webpackBootstrap
from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] } from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }
}, },
color: { color: {
color: "color",
highlight: "color",
hover: "color",
color: ["color", "#848484"],
highlight: ["color", "#848484"],
hover: ["color", "#848484"],
inherit: { inherit: {
enabled: true, enabled: true,
source: ["from", "to"], // from / to source: ["from", "to"], // from / to
@ -36770,12 +36775,12 @@ return /******/ (function(modules) { // webpackBootstrap
altLength: [5, 0, 50, 1] altLength: [5, 0, 50, 1]
}, },
font: { font: {
color: "color",
color: ["color", "#343434"],
size: [14, 0, 100, 1], // px size: [14, 0, 100, 1], // px
face: ["arial", "verdana", "tahoma"], face: ["arial", "verdana", "tahoma"],
background: "color",
background: ["color", "none"],
stroke: [0, 0, 50, 1], // px stroke: [0, 0, 50, 1], // px
strokeColor: "color",
strokeColor: ["color", "#ffffff"],
align: ["horizontal", "top", "middle", "bottom"] align: ["horizontal", "top", "middle", "bottom"]
}, },
hidden: false, hidden: false,
@ -36819,12 +36824,12 @@ return /******/ (function(modules) { // webpackBootstrap
showNavigationIcons: false, showNavigationIcons: false,
tooltip: { tooltip: {
delay: [300, 0, 1000, 25], delay: [300, 0, 1000, 25],
fontColor: "color",
fontColor: ["color", "#000000"],
fontSize: [14, 0, 40, 1], // px fontSize: [14, 0, 40, 1], // px
fontFace: ["arial", "verdana", "tahoma"], fontFace: ["arial", "verdana", "tahoma"],
color: { color: {
border: "color",
background: "color"
border: ["color", "#666666"],
background: ["color", "#FFFFC6"]
} }
}, },
keyboard: { keyboard: {
@ -36849,7 +36854,7 @@ return /******/ (function(modules) { // webpackBootstrap
physics: { physics: {
barnesHut: { barnesHut: {
theta: [0.5, 0.1, 1, 0.05], theta: [0.5, 0.1, 1, 0.05],
gravitationalConstant: [-2000, -300000, 0, 50],
gravitationalConstant: [-2000, -30000, 0, 50],
centralGravity: [0.3, 0, 10, 0.05], centralGravity: [0.3, 0, 10, 0.05],
springLength: [95, 0, 500, 5], springLength: [95, 0, 500, 5],
springConstant: [0.04, 0, 5, 0.005], springConstant: [0.04, 0, 5, 0.005],
@ -36871,7 +36876,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
maxVelocity: [50, 0, 150, 1], maxVelocity: [50, 0, 150, 1],
minVelocity: [0.1, 0.01, 0.5, 0.01], minVelocity: [0.1, 0.01, 0.5, 0.01],
solver: ["BarnesHut", "Repulsion", "HierarchicalRepulsion"],
solver: ["barnesHut", "repulsion", "hierarchicalRepulsion"],
timestep: [0.5, 0, 1, 0.05] timestep: [0.5, 0, 1, 0.05]
}, },
selection: { selection: {
@ -36887,36 +36892,37 @@ return /******/ (function(modules) { // webpackBootstrap
this.actualOptions = {}; this.actualOptions = {};
this.domElements = []; this.domElements = [];
this.colorPicker = new ColorPicker();
} }
_prototypeProperties(ConfigurationSystem, null, { _prototypeProperties(ConfigurationSystem, null, {
setOptions: { setOptions: {
value: function setOptions(options) { value: function setOptions(options) {
if (options !== undefined) { if (options !== undefined) {
this._clean();
util.deepExtend(this.actualOptions, options); util.deepExtend(this.actualOptions, options);
if (options.configurationContainer !== undefined) {
this.container = options.configurationContainer;
if (this.actualOptions.configurationContainer !== undefined) {
this.container = this.actualOptions.configurationContainer;
} else { } else {
this.container = this.network.body.container; this.container = this.network.body.container;
} }
if (options.configure !== undefined && options.configure !== false) {
if (this.actualOptions.configure !== undefined && this.actualOptions.configure !== false) {
var config = undefined; var config = undefined;
if (options.configure instanceof Array) {
config = options.configure.join();
} else if (typeof options.configure === "string") {
config = options.configure;
} else if (typeof options.configure === "boolean") {
config = options.configure;
if (this.actualOptions.configure instanceof Array) {
config = this.actualOptions.configure.join();
} else if (typeof this.actualOptions.configure === "string") {
config = this.actualOptions.configure;
} else if (typeof this.actualOptions.configure === "boolean") {
config = this.actualOptions.configure;
} else { } else {
this._clean(); this._clean();
throw new Error("the option for configure has to be either a string, boolean or an array. Supplied:" + options.configure);
throw new Error("the option for configure has to be either a string, boolean or an array. Supplied:" + this.options.configure);
return; return;
} }
this._create(config); this._create(config);
} else {
this._clean();
} }
} }
}, },
writable: true, writable: true,
@ -36937,21 +36943,23 @@ return /******/ (function(modules) { // webpackBootstrap
if (config === true || config.indexOf(option) !== -1) { if (config === true || config.indexOf(option) !== -1) {
var optionObj = this.possibleOptions[option]; var optionObj = this.possibleOptions[option];
// linebreak between categories
if (counter > 0) { if (counter > 0) {
this._makeBreak();
this._makeEntree([]);
} }
// a header for the category // a header for the category
this._makeHeader(option); this._makeHeader(option);
// get the suboptions // get the suboptions
var _path = [option];
this._handleObject(optionObj, _path);
var path = [option];
this._handleObject(optionObj, path);
} }
counter++; counter++;
} }
} }
this._push(); this._push();
this.colorPicker.generate();
}, },
writable: true, writable: true,
configurable: true configurable: true
@ -36966,7 +36974,12 @@ return /******/ (function(modules) { // webpackBootstrap
configurable: true configurable: true
}, },
_clean: { _clean: {
value: function _clean() {},
value: function _clean() {
for (var i = 0; i < this.domElements.length; i++) {
this.container.removeChild(this.domElements[i]);
}
this.domElements = [];
},
writable: true, writable: true,
configurable: true configurable: true
}, },
@ -36998,30 +37011,49 @@ return /******/ (function(modules) { // webpackBootstrap
writable: true, writable: true,
configurable: true configurable: true
}, },
_makeEntree: {
value: function _makeEntree(path) {
for (var _len = arguments.length, domElements = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
domElements[_key - 1] = arguments[_key];
}
var entree = document.createElement("div");
entree.className = "vis-network-configuration entree s" + path.length;
domElements.forEach(function (element) {
entree.appendChild(element);
});
this.domElements.push(entree);
},
writable: true,
configurable: true
},
_makeHeader: { _makeHeader: {
value: function _makeHeader(name) { value: function _makeHeader(name) {
var div = document.createElement("div"); var div = document.createElement("div");
div.className = "vis-network-configuration header"; div.className = "vis-network-configuration header";
div.innerHTML = name; div.innerHTML = name;
this.domElements.push(div);
this._makeBreak();
this._makeEntree([], div);
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_makeLabel: { _makeLabel: {
value: function _makeLabel(name, path) { value: function _makeLabel(name, path) {
var objectLabel = arguments[2] === undefined ? false : arguments[2];
var div = document.createElement("div"); 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);
div.className = "vis-network-configuration label s" + path.length;
if (objectLabel === true) {
div.innerHTML = "<i><b>" + name + ":</b></i>";
} else {
div.innerHTML = name + ":";
}
return div;
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_makeDropdown: { _makeDropdown: {
value: function _makeDropdown(arr, value) {
value: function _makeDropdown(arr, value, path) {
var select = document.createElement("select"); var select = document.createElement("select");
select.className = "vis-network-configuration select"; select.className = "vis-network-configuration select";
var selectedValue = 0; var selectedValue = 0;
@ -37041,12 +37073,13 @@ return /******/ (function(modules) { // webpackBootstrap
select.appendChild(option); select.appendChild(option);
} }
var me = this;
select.onchange = function () { select.onchange = function () {
me._update(this.value, path); me._update(this.value, path);
}; };
this.domElements.push(select);
this._makeBreak();
var label = this._makeLabel(path[path.length - 1], path);
this._makeEntree(path, label, select);
}, },
writable: true, writable: true,
configurable: true configurable: true
@ -37060,18 +37093,20 @@ return /******/ (function(modules) { // webpackBootstrap
var range = document.createElement("input"); var range = document.createElement("input");
range.type = "range"; range.type = "range";
range.className = "vis-network-configuration range"; range.className = "vis-network-configuration range";
range.value = defaultValue;
range.min = min; range.min = min;
range.max = max; range.max = max;
range.step = step; range.step = step;
if (value !== undefined) { if (value !== undefined) {
range.value = value;
if (value * 0.1 < min) { if (value * 0.1 < min) {
range.min = value / 10; range.min = value / 10;
} }
if (value * 10 > max && max !== 1) { if (value * 10 > max && max !== 1) {
range.max = value * 10; range.max = value * 10;
} }
range.value = value;
} else {
range.value = defaultValue;
} }
var input = document.createElement("input"); var input = document.createElement("input");
input.className = "vis-network-configuration rangeinput"; input.className = "vis-network-configuration rangeinput";
@ -37084,9 +37119,9 @@ return /******/ (function(modules) { // webpackBootstrap
range.oninput = function () { range.oninput = function () {
input.value = this.value; input.value = this.value;
}; };
this.domElements.push(range);
this.domElements.push(input);
this._makeBreak();
var label = this._makeLabel(path[path.length - 1], path);
this._makeEntree(path, label, range, input);
}, },
writable: true, writable: true,
configurable: true configurable: true
@ -37095,6 +37130,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _makeCheckbox(defaultValue, value, path) { value: function _makeCheckbox(defaultValue, value, path) {
var checkbox = document.createElement("input"); var checkbox = document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.className = "vis-network-configuration checkbox";
checkbox.checked = defaultValue; checkbox.checked = defaultValue;
if (value !== undefined) { if (value !== undefined) {
checkbox.checked = value; checkbox.checked = value;
@ -37105,14 +37141,39 @@ return /******/ (function(modules) { // webpackBootstrap
me._update(this.value, path); me._update(this.value, path);
}; };
this.domElements.push(checkbox);
var label = this._makeLabel(path[path.length - 1], path);
this._makeEntree(path, label, checkbox);
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_makeBreak: {
value: function _makeBreak() {
this.domElements.push(document.createElement("br"));
_makeColorField: {
value: function _makeColorField(arr, value, path) {
var _this = this;
var defaultColor = arr[1];
var div = document.createElement("div");
if (defaultColor !== "none") {
div.className = "vis-network-configuration colorBlock";
div.style.backgroundColor = defaultColor;
} else {
div.className = "vis-network-configuration colorBlock none";
}
value = value === undefined ? defaultColor : value;
div.onclick = function () {
_this._showColorPicker(value, div);
};
var label = this._makeLabel(path[path.length - 1], path);
this._makeEntree(path, label, div);
},
writable: true,
configurable: true
},
_showColorPicker: {
value: function _showColorPicker(value, div) {
this.colorPicker.show(div);
}, },
writable: true, writable: true,
configurable: true configurable: true
@ -37123,18 +37184,18 @@ return /******/ (function(modules) { // webpackBootstrap
for (var subObj in obj) { for (var subObj in obj) {
if (obj.hasOwnProperty(subObj)) { if (obj.hasOwnProperty(subObj)) {
var item = obj[subObj]; var item = obj[subObj];
var value = this._getValue(path);
var newPath = this._addToPath(path, subObj); var newPath = this._addToPath(path, subObj);
var value = this._getValue(newPath);
if (item instanceof Array) { if (item instanceof Array) {
this._handleArray(subObj, item, value, newPath); this._handleArray(subObj, item, value, newPath);
} else if (typeof item === "string") { } else if (typeof item === "string") {
this._handleString(subObj, item, value, newPath); this._handleString(subObj, item, value, newPath);
} else if (typeof item === "boolean") { } else if (typeof item === "boolean") {
this._handleBoolean(subObj, item, value, newPath);
this._makeCheckbox(item, value, newPath);
} else if (item instanceof Object) { } else if (item instanceof Object) {
this._makeLabel(subObj, newPath);
this._makeBreak();
var label = this._makeLabel(subObj, newPath, true);
this._makeEntree(newPath, label);
this._handleObject(item, newPath); this._handleObject(item, newPath);
} else { } else {
console.error("dont know how to handle", item, subObj, newPath); console.error("dont know how to handle", item, subObj, newPath);
@ -37147,9 +37208,9 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
_handleArray: { _handleArray: {
value: function _handleArray(optionName, arr, value, path) { value: function _handleArray(optionName, arr, value, path) {
this._makeLabel(optionName, path);
if (typeof arr[0] === "string") {
if (typeof arr[0] === "string" && arr[0] === "color") {
this._makeColorField(arr, value, path);
} else if (typeof arr[0] === "string") {
this._makeDropdown(arr, value, path); this._makeDropdown(arr, value, path);
} else if (typeof arr[0] === "number") { } else if (typeof arr[0] === "number") {
this._makeRange(arr, value, path); this._makeRange(arr, value, path);
@ -37160,40 +37221,272 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
_handleString: { _handleString: {
value: function _handleString(optionName, string, value, path) { value: function _handleString(optionName, string, value, path) {
if (string !== "color") {
this._makeLabel(optionName, path);
if (string === "string") {} else {}
},
writable: true,
configurable: true
},
_update: {
value: function _update(value, path) {
var options = {};
var pointer = options;
for (var i = 0; i < path.length; i++) {
pointer[path[i]] = {};
if (i !== path.length - 1) {
pointer = pointer[path[i]];
} else {
pointer[path[i]] = value;
}
}
this.network.setOptions(options);
},
writable: true,
configurable: true
}
});
return ConfigurationSystem;
})();
module.exports = ConfigurationSystem;
//this._makeLabel(optionName, path);
//console.log('string', string, value, path);
/***/ },
/* 106 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
/**
* Created by Alex on 3/27/2015.
*/
var Hammer = __webpack_require__(19);
var hammerUtil = __webpack_require__(24);
var util = __webpack_require__(1);
var ColorPicker = (function () {
function ColorPicker() {
_classCallCheck(this, ColorPicker);
this.touchTime = 0;
this.pixelRatio = 1;
this.generated = false;
this.color = undefined;
this.create();
}
_prototypeProperties(ColorPicker, null, {
create: {
value: function create() {
var visPrefix = "vis-network-";
this.frame = document.createElement("div");
this.frame.className = visPrefix + "colorPicker-frame";
this.colorPickerDiv = document.createElement("div");
this.colorPickerSelector = document.createElement("div");
this.colorPickerSelector.className = visPrefix + "colorPicker-selector";
this.colorPickerDiv.appendChild(this.colorPickerSelector);
this.colorPickerCanvas = document.createElement("canvas");
this.colorPickerDiv.appendChild(this.colorPickerCanvas);
if (!this.colorPickerCanvas.getContext) {
var noCanvas = document.createElement("DIV");
noCanvas.style.color = "red";
noCanvas.style.fontWeight = "bold";
noCanvas.style.padding = "10px";
noCanvas.innerHTML = "Error: your browser does not support HTML canvas";
this.colorPickerCanvas.appendChild(noCanvas);
} else { } else {
this._makeLabel(optionName, path);
//console.log("string", string, value, path);
var ctx = this.colorPickerCanvas.getContext("2d");
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
} }
this._makeLabel(string, []);
this._makeBreak();
this.colorPickerDiv.className = visPrefix + "colorPicker-color";
this.brightnessDiv = document.createElement("div");
this.brightnessDiv.className = visPrefix + "colorPicker-brightness";
this.saturationDiv = document.createElement("div");
this.saturationDiv.className = visPrefix + "colorPicker-saturation";
this.brightnessRange = document.createElement("input");
this.brightnessRange.type = "range";
this.brightnessRange.min = "0";
this.brightnessRange.max = "100";
this.brightnessRange.value = "100";
this.brightnessRange.className = "vis-network-configuration range colorPicker";
this.saturationRange = document.createElement("input");
this.saturationRange.type = "range";
this.saturationRange.min = "0";
this.saturationRange.max = "100";
this.saturationRange.value = "100";
this.saturationRange.className = "vis-network-configuration range colorPicker";
this.brightnessDiv.appendChild(this.brightnessRange);
this.saturationDiv.appendChild(this.saturationRange);
this.frame.appendChild(this.colorPickerDiv);
this.frame.appendChild(this.saturationDiv);
this.frame.appendChild(this.brightnessDiv);
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_handleBoolean: {
value: function _handleBoolean(optionName, boolean, value, path) {
this._makeLabel(optionName, path);
this._makeCheckbox(boolean, value, path);
this._makeBreak();
show: {
value: function show(container) {
this.container = container;
this.container.appendChild(this.frame);
this.bindHammer();
this.setSize();
}, },
writable: true, writable: true,
configurable: true configurable: true
}, },
_update: {
value: function _update(value, path) {
console.log("updated", value, path);
setColor: {
value: function setColor(color) {},
writable: true,
configurable: true
},
setSize: {
value: function setSize() {
this.colorPickerCanvas.style.width = "100%";
this.colorPickerCanvas.style.height = "100%";
this.colorPickerCanvas.width = this.colorPickerDiv.clientWidth * this.pixelRatio;
this.colorPickerCanvas.height = this.colorPickerDiv.clientHeight * this.pixelRatio;
},
writable: true,
configurable: true
},
generate: {
value: function generate() {
if (this.generated === false) {
var ctx = this.colorPickerCanvas.getContext("2d");
if (this.pixelRation === undefined) {
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
}
ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
// clear the canvas
var w = this.colorPickerCanvas.clientWidth;
var h = this.colorPickerCanvas.clientHeight;
ctx.clearRect(0, 0, w, h);
var x = undefined,
y = undefined,
hue = undefined,
sat = undefined;
var center = { x: w * 0.5, y: h * 0.5 };
var r = 0.49 * w;
var angleConvert = 2 * Math.PI / 360;
var hfac = 1 / 360;
var sfac = 1 / r;
var rgb = undefined;
for (hue = 0; hue < 360; hue++) {
for (sat = 0; sat < r; sat++) {
x = center.x + sat * Math.sin(angleConvert * hue);
y = center.y + sat * Math.cos(angleConvert * hue);
rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1);
ctx.fillStyle = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
ctx.fillRect(x - 0.5, y - 0.5, 2, 2);
}
}
}
this.generated = true;
},
writable: true,
configurable: true
},
bindHammer: {
value: function bindHammer() {
var _this = this;
this.drag = {};
this.pinch = {};
this.hammer = new Hammer(this.colorPickerCanvas);
this.hammer.get("pinch").set({ enable: true });
hammerUtil.onTouch(this.hammer, function (event) {
_this.moveSelector(event);
});
this.hammer.on("tap", function (event) {
_this.moveSelector(event);
});
//this.hammer.on('doubletap', (event) => {this.moveSelector(event)});
//this.hammer.on('press', (event) => {this.moveSelector(event)});
this.hammer.on("panstart", function (event) {
_this.moveSelector(event);
});
this.hammer.on("panmove", function (event) {
_this.moveSelector(event);
});
this.hammer.on("panend", function (event) {
_this.moveSelector(event);
});
//this.hammer.on('pinch', (event) => {this.moveSelector(event)});
},
writable: true,
configurable: true
},
moveSelector: {
value: function moveSelector(event) {
var rect = this.colorPickerDiv.getBoundingClientRect();
var left = event.center.x - rect.left;
var top = event.center.y - rect.top;
var centerY = 0.5 * this.colorPickerDiv.clientHeight;
var centerX = 0.5 * this.colorPickerDiv.clientWidth;
var x = left - centerX;
var y = top - centerY;
var angle = Math.atan(y / x);
if (x < 0) {
angle += Math.PI;
}
var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
var newTop = Math.sin(angle) * radius + centerY;
var newLeft = Math.cos(angle) * radius + centerX;
this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + "px";
this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + "px";
},
writable: true,
configurable: true
},
redraw: {
value: function redraw(roomController) {
if (this.frame === undefined) {
this._create();
}
var pos = roomController.canvasToDOM({ x: 0, y: 0 });
this.frame.style.top = "50px";
this.frame.style.left = pos.x - 350 + "px";
}, },
writable: true, writable: true,
configurable: true configurable: true
} }
}); });
return ConfigurationSystem;
return ColorPicker;
})(); })();
module.exports = ConfigurationSystem;
module.exports = ColorPicker;
//todo make
/***/ } /***/ }
/******/ ]) /******/ ])

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


+ 2
- 1
gulpfile.js View File

@ -102,7 +102,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'
'./lib/network/css/network-configuration.css',
'./lib/network/css/network-colorpicker.css'
]; ];
return gulp.src(files) return gulp.src(files)

+ 3
- 0
lib/network/Network.js View File

@ -172,6 +172,9 @@ Network.prototype.setOptions = function (options) {
} }
this.canvas.setSize(); this.canvas.setSize();
// start the physics simulation. Can be safely called multiple times.
this.body.emitter.emit("startSimulation");
} }
}; };

+ 65
- 0
lib/network/css/network-colorpicker.css View File

@ -0,0 +1,65 @@
div.vis-network-colorPicker-frame {
position:relative;
margin-top:40px;
width:310px;
height:310px;
padding: 10px;
border-radius:20px;
background-color:#ffffff;
}
div.vis-network-colorPicker-color {
position:absolute;
width: 289px;
height: 289px;
cursor: pointer;
}
div.vis-network-colorPicker-brightness {
position:absolute;
top:300px;
/*background-color:#00ff00;*/
}
div.vis-network-colorPicker-saturation {
position:absolute;
top:145px;
left:160px;
/*background-color:#ff0000;*/
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
div.vis-network-colorPicker-selector{
position:absolute;
top:137px;
left:137px;
width:15px;
height:15px;
border-radius:15px;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
input.vis-network-configuration.range.colorPicker{
width: 290px;
height:20px;
}
input.vis-network-brightnessRange {
width: 289px !important;
}
input.vis-network-saturationRange {
width: 289px !important;
}

+ 63
- 7
lib/network/css/network-configuration.css View File

@ -1,36 +1,92 @@
div.vis-network-configuration { div.vis-network-configuration {
position:relative; position:relative;
display:inline-flex;
display:block;
float:left;
font-size:12px; font-size:12px;
} }
div.vis-network-configuration.entree{
display:block;
width:495px;
height:25px;
vertical-align: middle;
line-height:25px;
}
div.vis-network-configuration.entree.s2{
left:10px;
background-color: #f7f8fa;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.entree.s3{
left:20px;
background-color: #e4e9f0;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.entree.s4{
left:30px;
background-color: #cfd8e6;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.header{ div.vis-network-configuration.header{
font-size:16px;
font-size:18px;
font-weight: bold; font-weight: bold;
} }
div.vis-network-configuration.label{ div.vis-network-configuration.label{
width:120px; width:120px;
height:25px;
line-height: 25px;
} }
div.vis-network-configuration.label.s3{
width:110px;
}
div.vis-network-configuration.label.s4{
width:100px;
}
input.vis-network-configuration.rangeinput{
div.vis-network-configuration.colorBlock{
width:30px; width:30px;
height:19px;
border:1px solid #444444;
border-radius:2px;
padding:0px;
margin:0px;
cursor:pointer;
}
input.vis-network-configuration.checkbox {
left:-5px;
} }
input.vis-network-configuration.rangeinput{
position:relative;
top:-5px;
width:60px;
height:13px;
padding:1px;
margin:0;
pointer-events:none;
}
input.vis-network-configuration.range{ input.vis-network-configuration.range{
/*removes default webkit styles*/ /*removes default webkit styles*/
-webkit-appearance: none; -webkit-appearance: none;
/*fix for FF unable to apply focus style bug */ /*fix for FF unable to apply focus style bug */
border: 1px solid white;
border: 0px solid white;
background-color:rgba(0,0,0,0);
/*required for proper track sizing in FF*/ /*required for proper track sizing in FF*/
width: 300px; width: 300px;
height:20px;
} }
input.vis-network-configuration.range::-webkit-slider-runnable-track { input.vis-network-configuration.range::-webkit-slider-runnable-track {
width: 300px; width: 300px;
@ -62,7 +118,7 @@ input.vis-network-configuration.range::-webkit-slider-thumb {
background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */ background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */ background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
box-shadow: #111927 0px 0px 3px 0px;
box-shadow: #111927 0px 0px 1px 0px;
margin-top: -7px; margin-top: -7px;
} }
input.vis-network-configuration.range:focus { input.vis-network-configuration.range:focus {

+ 142
- 91
lib/network/modules/ConfigurationSystem.js View File

@ -5,6 +5,8 @@
var util = require('../../util'); var util = require('../../util');
import ColorPicker from './components/ColorPicker'
class ConfigurationSystem { class ConfigurationSystem {
constructor(network) { constructor(network) {
@ -15,15 +17,15 @@ class ConfigurationSystem {
borderWidth: [1, 0, 10, 1], borderWidth: [1, 0, 10, 1],
borderWidthSelected: [2, 0, 10, 1], borderWidthSelected: [2, 0, 10, 1],
color: { color: {
border: 'color',
background: 'color',
border: ['color','#2B7CE9'],
background: ['color','#97C2FC'],
highlight: { highlight: {
border: 'color',
background: 'color'
border: ['color','#2B7CE9'],
background: ['color','#D2E5FF']
}, },
hover: { hover: {
border: 'color',
background: 'color'
border: ['color','#2B7CE9'],
background: ['color','#D2E5FF']
} }
}, },
fixed: { fixed: {
@ -31,12 +33,12 @@ class ConfigurationSystem {
y: false y: false
}, },
font: { font: {
color: 'color',
color: ['color','#343434'],
size: [14, 0, 100, 1], // px size: [14, 0, 100, 1], // px
face: ['arial', 'verdana', 'tahoma'], face: ['arial', 'verdana', 'tahoma'],
background: 'color',
background: ['color','none'],
stroke: [0, 0, 50, 1], // px stroke: [0, 0, 50, 1], // px
strokeColor: 'color'
strokeColor: ['color','#ffffff']
}, },
group: 'string', group: 'string',
hidden: false, hidden: false,
@ -44,7 +46,7 @@ class ConfigurationSystem {
face: 'string', //'FontAwesome', face: 'string', //'FontAwesome',
code: 'string', //'\uf007', code: 'string', //'\uf007',
size: [50, 0, 200, 1], //50, size: [50, 0, 200, 1], //50,
color: 'color' //'#aa00ff'
color: ['color','#2B7CE9'] //'#aa00ff'
}, },
image: 'string', // --> URL image: 'string', // --> URL
physics: true, physics: true,
@ -59,7 +61,7 @@ class ConfigurationSystem {
drawThreshold: [3, 0, 20, 1] drawThreshold: [3, 0, 20, 1]
} }
}, },
shape: ['ellipse', 'box', 'circle', 'circularImage', 'database', 'diamond', 'dot', 'icon', 'image', 'square', 'star', 'text', 'triangle', 'triangleDown'],
shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'icon', 'square', 'star', 'text', 'triangle', 'triangleDown'],
size: [25, 0, 200, 1] size: [25, 0, 200, 1]
}, },
edges: { edges: {
@ -69,9 +71,9 @@ class ConfigurationSystem {
from: {enabled: false, scaleFactor: [1, 0, 3, 0.05]} from: {enabled: false, scaleFactor: [1, 0, 3, 0.05]}
}, },
color: { color: {
color: 'color',
highlight: 'color',
hover: 'color',
color: ['color','#848484'],
highlight: ['color','#848484'],
hover: ['color','#848484'],
inherit: { inherit: {
enabled: true, enabled: true,
source: ['from', 'to'], // from / to source: ['from', 'to'], // from / to
@ -86,12 +88,12 @@ class ConfigurationSystem {
altLength: [5, 0, 50, 1] altLength: [5, 0, 50, 1]
}, },
font: { font: {
color: 'color',
color: ['color','#343434'],
size: [14, 0, 100, 1], // px size: [14, 0, 100, 1], // px
face: ['arial', 'verdana', 'tahoma'], face: ['arial', 'verdana', 'tahoma'],
background: 'color',
background: ['color','none'],
stroke: [0, 0, 50, 1], // px stroke: [0, 0, 50, 1], // px
strokeColor: 'color',
strokeColor: ['color','#ffffff'],
align: ['horizontal', 'top', 'middle', 'bottom'] align: ['horizontal', 'top', 'middle', 'bottom']
}, },
hidden: false, hidden: false,
@ -112,7 +114,7 @@ class ConfigurationSystem {
smooth: { smooth: {
enabled: true, enabled: true,
dynamic: true, dynamic: true,
type: ["continuous", 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
type: ['continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
roundness: [0.5, 0, 1, 0.05] roundness: [0.5, 0, 1, 0.05]
}, },
width: [1, 0, 30, 1], width: [1, 0, 30, 1],
@ -123,8 +125,8 @@ class ConfigurationSystem {
hierarchical: { hierarchical: {
enabled: false, enabled: false,
levelSeparation: [150, 20, 500, 5], levelSeparation: [150, 20, 500, 5],
direction: ["UD", 'DU', 'LR', 'RL'], // UD, DU, LR, RL
sortMethod: ["hubsize", 'directed'] // hubsize, directed
direction: ['UD', 'DU', 'LR', 'RL'], // UD, DU, LR, RL
sortMethod: ['hubsize', 'directed'] // hubsize, directed
} }
}, },
interaction: { interaction: {
@ -135,12 +137,12 @@ class ConfigurationSystem {
showNavigationIcons: false, showNavigationIcons: false,
tooltip: { tooltip: {
delay: [300, 0, 1000, 25], delay: [300, 0, 1000, 25],
fontColor: 'color',
fontColor: ['color','#000000'],
fontSize: [14, 0, 40, 1], // px fontSize: [14, 0, 40, 1], // px
fontFace: ['arial', 'verdana', 'tahoma'], fontFace: ['arial', 'verdana', 'tahoma'],
color: { color: {
border: 'color',
background: 'color'
border: ['color','#666666'],
background: ['color','#FFFFC6']
} }
}, },
keyboard: { keyboard: {
@ -165,7 +167,7 @@ class ConfigurationSystem {
physics: { physics: {
barnesHut: { barnesHut: {
theta: [0.5, 0.1, 1, 0.05], theta: [0.5, 0.1, 1, 0.05],
gravitationalConstant: [-2000, -300000, 0, 50],
gravitationalConstant: [-2000, -30000, 0, 50],
centralGravity: [0.3, 0, 10, 0.05], centralGravity: [0.3, 0, 10, 0.05],
springLength: [95, 0, 500, 5], springLength: [95, 0, 500, 5],
springConstant: [0.04, 0, 5, 0.005], springConstant: [0.04, 0, 5, 0.005],
@ -187,7 +189,7 @@ class ConfigurationSystem {
}, },
maxVelocity: [50, 0, 150, 1], maxVelocity: [50, 0, 150, 1],
minVelocity: [0.1, 0.01, 0.5, 0.01], minVelocity: [0.1, 0.01, 0.5, 0.01],
solver: ['BarnesHut', 'Repulsion', 'HierarchicalRepulsion'],
solver: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'],
timestep: [0.5, 0, 1, 0.05] timestep: [0.5, 0, 1, 0.05]
}, },
selection: { selection: {
@ -198,44 +200,45 @@ class ConfigurationSystem {
hideEdgesOnDrag: false, hideEdgesOnDrag: false,
hideNodesOnDrag: false hideNodesOnDrag: false
} }
}
};
this.actualOptions = {}; this.actualOptions = {};
this.domElements = []; this.domElements = [];
this.colorPicker = new ColorPicker();
} }
setOptions(options) { setOptions(options) {
if (options !== undefined) { if (options !== undefined) {
this._clean();
util.deepExtend(this.actualOptions, options); util.deepExtend(this.actualOptions, options);
if (options.configurationContainer !== undefined) {
this.container = options.configurationContainer;
if (this.actualOptions.configurationContainer !== undefined) {
this.container = this.actualOptions.configurationContainer;
} }
else { else {
this.container = this.network.body.container; this.container = this.network.body.container;
} }
if (options.configure !== undefined && options.configure !== false) {
if (this.actualOptions.configure !== undefined && this.actualOptions.configure !== false) {
let config; let config;
if (options.configure instanceof Array) {
config = options.configure.join();
if (this.actualOptions.configure instanceof Array) {
config = this.actualOptions.configure.join();
} }
else if (typeof options.configure === 'string') {
config = options.configure;
else if (typeof this.actualOptions.configure === 'string') {
config = this.actualOptions.configure;
} }
else if (typeof options.configure === 'boolean') {
config = options.configure;
else if (typeof this.actualOptions.configure === 'boolean') {
config = this.actualOptions.configure;
} }
else { else {
this._clean(); this._clean();
throw new Error("the option for configure has to be either a string, boolean or an array. Supplied:" + options.configure);
throw new Error('the option for configure has to be either a string, boolean or an array. Supplied:' + this.options.configure);
return; return;
} }
this._create(config); this._create(config);
} }
else {
this._clean();
}
} }
} }
@ -252,8 +255,9 @@ class ConfigurationSystem {
if (config === true || config.indexOf(option) !== -1) { if (config === true || config.indexOf(option) !== -1) {
let optionObj = this.possibleOptions[option]; let optionObj = this.possibleOptions[option];
// linebreak between categories
if (counter > 0) { if (counter > 0) {
this._makeBreak();
this._makeEntree([]);
} }
// a header for the category // a header for the category
this._makeHeader(option); this._makeHeader(option);
@ -265,8 +269,9 @@ class ConfigurationSystem {
counter++; counter++;
} }
} }
this._push(); this._push();
this.colorPicker.generate();
} }
_push() { _push() {
@ -276,7 +281,10 @@ class ConfigurationSystem {
} }
_clean() { _clean() {
for (var i = 0; i < this.domElements.length; i++) {
this.container.removeChild(this.domElements[i]);
}
this.domElements = [];
} }
_getValue(path) { _getValue(path) {
@ -302,23 +310,36 @@ class ConfigurationSystem {
return newPath; return newPath;
} }
_makeEntree(path,...domElements) {
let entree = document.createElement('div');
entree.className = 'vis-network-configuration entree s' + path.length;
domElements.forEach((element) => {
entree.appendChild(element);
});
this.domElements.push(entree);
}
_makeHeader(name) { _makeHeader(name) {
let div = document.createElement('div'); let div = document.createElement('div');
div.className = 'vis-network-configuration header'; div.className = 'vis-network-configuration header';
div.innerHTML = name; div.innerHTML = name;
this.domElements.push(div);
this._makeBreak();
this._makeEntree([],div);
} }
_makeLabel(name, path) {
_makeLabel(name, path, objectLabel = false) {
let div = document.createElement('div'); 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);
div.className = 'vis-network-configuration label s' + path.length;
if (objectLabel === true) {
div.innerHTML = "<i><b>" + name + ":</b></i>";
}
else {
div.innerHTML = name + ':';
}
return div;
} }
_makeDropdown(arr, value) {
_makeDropdown(arr, value, path) {
let select = document.createElement('select'); let select = document.createElement('select');
select.className = 'vis-network-configuration select'; select.className = 'vis-network-configuration select';
let selectedValue = 0; let selectedValue = 0;
@ -329,7 +350,7 @@ class ConfigurationSystem {
} }
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
let option = document.createElement("option");
let option = document.createElement('option');
option.value = arr[i]; option.value = arr[i];
if (i == selectedValue) { if (i == selectedValue) {
option.selected = 'selected'; option.selected = 'selected';
@ -338,10 +359,11 @@ class ConfigurationSystem {
select.appendChild(option); select.appendChild(option);
} }
select.onchange = function () {me._update(this.value, path);}
let me = this;
select.onchange = function () {me._update(this.value, path);};
this.domElements.push(select);
this._makeBreak();
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path, label, select);
} }
_makeRange(arr, value, path) { _makeRange(arr, value, path) {
@ -351,58 +373,83 @@ class ConfigurationSystem {
let step = arr[3]; let step = arr[3];
let range = document.createElement('input'); let range = document.createElement('input');
range.type = 'range'; range.type = 'range';
range.className = 'vis-network-configuration range'
range.value = defaultValue;
range.className = 'vis-network-configuration range';
range.min = min; range.min = min;
range.max = max; range.max = max;
range.step = step; range.step = step;
if (value !== undefined) { if (value !== undefined) {
range.value = value;
if (value * 0.1 < min) { if (value * 0.1 < min) {
range.min = value / 10; range.min = value / 10;
} }
if (value * 10 > max && max !== 1) { if (value * 10 > max && max !== 1) {
range.max = value * 10; range.max = value * 10;
} }
range.value = value;
}
else {
range.value = defaultValue;
} }
let input = document.createElement("input");
input.className = 'vis-network-configuration rangeinput'
let input = document.createElement('input');
input.className = 'vis-network-configuration rangeinput';
input.value = range.value; input.value = range.value;
var me = this; 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();
range.onchange = function () {input.value = this.value; me._update(this.value, path);};
range.oninput = function () {input.value = this.value;};
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path, label, range, input);
} }
_makeCheckbox(defaultValue, value, path) { _makeCheckbox(defaultValue, value, path) {
var checkbox = document.createElement('input'); var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.type = 'checkbox';
checkbox.className = 'vis-network-configuration checkbox';
checkbox.checked = defaultValue; checkbox.checked = defaultValue;
if (value !== undefined) { if (value !== undefined) {
checkbox.checked = value; checkbox.checked = value;
} }
let me = this; let me = this;
checkbox.onchange = function() {me._update(this.value, path)}
checkbox.onchange = function() {me._update(this.value, path)};
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path, label, checkbox);
}
_makeColorField(arr, value, path) {
let defaultColor = arr[1];
let div = document.createElement('div');
this.domElements.push(checkbox);
if (defaultColor !== 'none') {
div.className = 'vis-network-configuration colorBlock';
div.style.backgroundColor = defaultColor;
}
else {
div.className = 'vis-network-configuration colorBlock none';
}
value = value === undefined ? defaultColor : value;
div.onclick = () => {this._showColorPicker(value, div);}
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path,label, div);
} }
_makeBreak() {
this.domElements.push(document.createElement("br"));
_showColorPicker(value, div) {
this.colorPicker.show(div);
} }
_handleObject(obj, path = []) { _handleObject(obj, path = []) {
for (let subObj in obj) { for (let subObj in obj) {
if (obj.hasOwnProperty(subObj)) { if (obj.hasOwnProperty(subObj)) {
let item = obj[subObj]; let item = obj[subObj];
let value = this._getValue(path);
let newPath = this._addToPath(path, subObj); let newPath = this._addToPath(path, subObj);
let value = this._getValue(newPath);
if (item instanceof Array) { if (item instanceof Array) {
this._handleArray(subObj, item, value, newPath); this._handleArray(subObj, item, value, newPath);
} }
@ -410,24 +457,25 @@ class ConfigurationSystem {
this._handleString(subObj, item, value, newPath); this._handleString(subObj, item, value, newPath);
} }
else if (typeof item === 'boolean') { else if (typeof item === 'boolean') {
this._handleBoolean(subObj, item, value, newPath);
this._makeCheckbox(item, value, newPath);
} }
else if (item instanceof Object) { else if (item instanceof Object) {
this._makeLabel(subObj, newPath);
this._makeBreak();
let label = this._makeLabel(subObj, newPath, true);
this._makeEntree(newPath, label);
this._handleObject(item, newPath); this._handleObject(item, newPath);
} }
else { else {
console.error("dont know how to handle", item, subObj, newPath);
console.error('dont know how to handle', item, subObj, newPath);
} }
} }
} }
} }
_handleArray(optionName, arr, value, path) { _handleArray(optionName, arr, value, path) {
this._makeLabel(optionName, path);
if (typeof arr[0] === 'string') {
if (typeof arr[0] === 'string' && arr[0] === 'color') {
this._makeColorField(arr, value, path);
}
else if (typeof arr[0] === 'string') {
this._makeDropdown(arr, value, path); this._makeDropdown(arr, value, path);
} }
else if (typeof arr[0] === 'number') { else if (typeof arr[0] === 'number') {
@ -436,25 +484,28 @@ class ConfigurationSystem {
} }
_handleString(optionName, string, value, path) { _handleString(optionName, string, value, path) {
if (string !== 'color') {
this._makeLabel(optionName, path);
if (string === 'string') {
} }
else { else {
this._makeLabel(optionName, path);
//console.log("string", string, value, path);
//this._makeLabel(optionName, path);
//console.log('string', string, value, path);
} }
this._makeLabel(string, []);
this._makeBreak();
}
_handleBoolean(optionName, boolean, value, path) {
this._makeLabel(optionName, path);
this._makeCheckbox(boolean, value, path);
this._makeBreak();
} }
_update(value, path) { _update(value, path) {
console.log("updated", value, path)
let options = {};
let pointer = options;
for (let i = 0; i < path.length; i++) {
pointer[path[i]] = {};
if (i !== path.length -1) {
pointer = pointer[path[i]];
}
else {
pointer[path[i]] = value;
}
}
this.network.setOptions(options);
} }
} }

+ 1
- 1
lib/network/modules/EdgesHandler.js View File

@ -55,7 +55,7 @@ class EdgesHandler {
face: 'arial', face: 'arial',
background: 'none', background: 'none',
stroke: 1, // px stroke: 1, // px
strokeColor: 'white',
strokeColor: '#ffffff',
align:'horizontal' align:'horizontal'
}, },
hidden: false, hidden: false,

+ 2
- 3
lib/network/modules/InteractionHandler.js View File

@ -38,7 +38,6 @@ class InteractionHandler {
this.body.functions.getPointer = this.getPointer.bind(this); this.body.functions.getPointer = this.getPointer.bind(this);
this.options = {}; this.options = {};
this.defaultOptions = { this.defaultOptions = {
dragNodes:true, dragNodes:true,
@ -48,11 +47,11 @@ class InteractionHandler {
showNavigationIcons: false, showNavigationIcons: false,
tooltip: { tooltip: {
delay: 300, delay: 300,
fontColor: 'black',
fontColor: '#000000',
fontSize: 14, // px fontSize: 14, // px
fontFace: 'verdana', fontFace: 'verdana',
color: { color: {
border: '#666',
border: '#666666',
background: '#FFFFC6' background: '#FFFFC6'
} }
}, },

+ 4
- 4
lib/network/modules/NodesHandler.js View File

@ -51,16 +51,16 @@ class NodesHandler {
face: 'arial', face: 'arial',
background: 'none', background: 'none',
stroke: 0, // px stroke: 0, // px
strokeColor: 'white',
strokeColor: '#ffffff',
align: 'horizontal' align: 'horizontal'
}, },
group: undefined, group: undefined,
hidden: false, hidden: false,
icon: { icon: {
face: undefined, //'FontAwesome',
face: 'FontAwesome', //'FontAwesome',
code: undefined, //'\uf007', code: undefined, //'\uf007',
size: undefined, //50,
color:undefined //'#aa00ff'
size: 50, //50,
color:'#2B7CE9' //'#aa00ff'
}, },
image: undefined, // --> URL image: undefined, // --> URL
label: undefined, label: undefined,

+ 193
- 0
lib/network/modules/components/colorPicker.js View File

@ -0,0 +1,193 @@
/**
* Created by Alex on 3/27/2015.
*/
let Hammer = require('../../../module/hammer');
let hammerUtil = require('../../../hammerUtil');
let util = require('../../../util');
class ColorPicker {
constructor() {
this.touchTime = 0;
this.pixelRatio = 1;
this.generated = false;
this.color = undefined;
this.create();
}
create() {
let visPrefix = 'vis-network-'
this.frame = document.createElement('div');
this.frame.className = visPrefix + 'colorPicker-frame';
this.colorPickerDiv = document.createElement('div');
this.colorPickerSelector = document.createElement('div');
this.colorPickerSelector.className = visPrefix + 'colorPicker-selector';
this.colorPickerDiv.appendChild(this.colorPickerSelector);
this.colorPickerCanvas = document.createElement('canvas');
this.colorPickerDiv.appendChild(this.colorPickerCanvas);
if (!this.colorPickerCanvas.getContext) {
let noCanvas = document.createElement( 'DIV' );
noCanvas.style.color = 'red';
noCanvas.style.fontWeight = 'bold' ;
noCanvas.style.padding = '10px';
noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
this.colorPickerCanvas.appendChild(noCanvas);
}
else {
let ctx = this.colorPickerCanvas.getContext("2d");
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1);
this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
}
this.colorPickerDiv.className = visPrefix + 'colorPicker-color';
this.brightnessDiv = document.createElement('div');
this.brightnessDiv.className = visPrefix + 'colorPicker-brightness';
this.saturationDiv = document.createElement('div');
this.saturationDiv.className = visPrefix + 'colorPicker-saturation';
this.brightnessRange = document.createElement('input');
this.brightnessRange.type = 'range';
this.brightnessRange.min = '0';
this.brightnessRange.max = '100';
this.brightnessRange.value = '100';
this.brightnessRange.className = 'vis-network-configuration range colorPicker';
this.saturationRange = document.createElement('input');
this.saturationRange.type = 'range';
this.saturationRange.min = '0';
this.saturationRange.max = '100';
this.saturationRange.value = '100';
this.saturationRange.className = 'vis-network-configuration range colorPicker';
this.brightnessDiv.appendChild(this.brightnessRange);
this.saturationDiv.appendChild(this.saturationRange);
this.frame.appendChild(this.colorPickerDiv);
this.frame.appendChild(this.saturationDiv);
this.frame.appendChild(this.brightnessDiv);
}
show(container) {
this.container = container;
this.container.appendChild(this.frame);
this.bindHammer();
this.setSize();
}
setColor(color) {
//todo make
}
setSize() {
this.colorPickerCanvas.style.width = '100%';
this.colorPickerCanvas.style.height = '100%';
this.colorPickerCanvas.width = this.colorPickerDiv.clientWidth * this.pixelRatio;
this.colorPickerCanvas.height = this.colorPickerDiv.clientHeight * this.pixelRatio;
}
generate() {
if (this.generated === false) {
let ctx = this.colorPickerCanvas.getContext('2d');
if (this.pixelRation === undefined) {
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1);
}
ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
// clear the canvas
let w = this.colorPickerCanvas.clientWidth;
let h = this.colorPickerCanvas.clientHeight;
ctx.clearRect(0, 0, w, h);
let x, y, hue, sat;
let center = {x: w * 0.5, y: h * 0.5};
let r = 0.49 * w;
let angleConvert = (2 * Math.PI) / 360;
let hfac = 1 / 360;
let sfac = 1 / r;
let rgb;
for (hue = 0; hue < 360; hue++) {
for (sat = 0; sat < r; sat++) {
x = center.x + sat * Math.sin(angleConvert * hue);
y = center.y + sat * Math.cos(angleConvert * hue);
rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1);
ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
ctx.fillRect(x - 0.5, y - 0.5, 2, 2);
}
}
}
this.generated = true;
}
bindHammer() {
this.drag = {};
this.pinch = {};
this.hammer = new Hammer(this.colorPickerCanvas);
this.hammer.get('pinch').set({enable: true});
hammerUtil.onTouch(this.hammer, (event) => {this.moveSelector(event)});
this.hammer.on('tap', (event) => {this.moveSelector(event)});
//this.hammer.on('doubletap', (event) => {this.moveSelector(event)});
//this.hammer.on('press', (event) => {this.moveSelector(event)});
this.hammer.on('panstart', (event) => {this.moveSelector(event)});
this.hammer.on('panmove', (event) => {this.moveSelector(event)});
this.hammer.on('panend', (event) => {this.moveSelector(event)});
//this.hammer.on('pinch', (event) => {this.moveSelector(event)});
}
moveSelector(event) {
let rect = this.colorPickerDiv.getBoundingClientRect();
let left = event.center.x - rect.left;
let top = event.center.y - rect.top;
let centerY = 0.5 * this.colorPickerDiv.clientHeight;
let centerX = 0.5 * this.colorPickerDiv.clientWidth;
let x = left - centerX;
let y = top - centerY;
let angle = Math.atan(y / x);
if (x < 0) {
angle += Math.PI;
}
let radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
let newTop = Math.sin(angle) * radius + centerY;
let newLeft = Math.cos(angle) * radius + centerX;
this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px';
this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px';
}
redraw(roomController) {
if (this.frame === undefined) {
this._create();
}
let pos = roomController.canvasToDOM({x: 0, y: 0});
this.frame.style.top = '50px';
this.frame.style.left = pos.x - 350 + 'px';
}
}
export default ColorPicker;

Write Preview
Loading…
Cancel
Save