diff --git a/dist/vis.css b/dist/vis.css index dcda79cb..0f7bcce9 100644 --- a/dist/vis.css +++ b/dist/vis.css @@ -804,39 +804,95 @@ div.network-tooltip { box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5); } - div.vis-network-configuration { position:relative; - display:inline-flex; + display:block; + float:left; 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{ - font-size:16px; + font-size:18px; font-weight: bold; } div.vis-network-configuration.label{ 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; + 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{ /*removes default webkit styles*/ -webkit-appearance: none; /*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*/ width: 300px; + height:20px; } input.vis-network-configuration.range::-webkit-slider-runnable-track { 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: 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; + box-shadow: #111927 0px 0px 1px 0px; margin-top: -7px; } 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 { 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; + } \ No newline at end of file diff --git a/dist/vis.js b/dist/vis.js index c21b12b7..d3530497 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 4.0.0-SNAPSHOT - * @date 2015-03-26 + * @date 2015-03-27 * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -23478,6 +23478,9 @@ return /******/ (function(modules) { // webpackBootstrap } 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", background: "none", stroke: 0, // px - strokeColor: "white", + strokeColor: "#ffffff", align: "horizontal" }, group: undefined, hidden: false, icon: { - face: undefined, //'FontAwesome', + face: "FontAwesome", //'FontAwesome', code: undefined, //'\uf007', - size: undefined, //50, - color: undefined //'#aa00ff' + size: 50, //50, + color: "#2B7CE9" //'#aa00ff' }, image: undefined, // --> URL label: undefined, @@ -27643,7 +27646,7 @@ return /******/ (function(modules) { // webpackBootstrap face: "arial", background: "none", stroke: 1, // px - strokeColor: "white", + strokeColor: "#ffffff", align: "horizontal" }, hidden: false, @@ -33065,7 +33068,6 @@ return /******/ (function(modules) { // webpackBootstrap this.body.functions.getPointer = this.getPointer.bind(this); - this.options = {}; this.defaultOptions = { dragNodes: true, @@ -33075,11 +33077,11 @@ return /******/ (function(modules) { // webpackBootstrap showNavigationIcons: false, tooltip: { delay: 300, - fontColor: "black", + fontColor: "#000000", fontSize: 14, // px fontFace: "verdana", color: { - border: "#666", + border: "#666666", background: "#FFFFC6" } }, @@ -36676,6 +36678,8 @@ return /******/ (function(modules) { // webpackBootstrap "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 _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 ColorPicker = _interopRequire(__webpack_require__(106)); var ConfigurationSystem = (function () { function ConfigurationSystem(network) { @@ -36699,15 +36704,15 @@ return /******/ (function(modules) { // webpackBootstrap borderWidth: [1, 0, 10, 1], borderWidthSelected: [2, 0, 10, 1], color: { - border: "color", - background: "color", + border: ["color", "#2B7CE9"], + background: ["color", "#97C2FC"], highlight: { - border: "color", - background: "color" + border: ["color", "#2B7CE9"], + background: ["color", "#D2E5FF"] }, hover: { - border: "color", - background: "color" + border: ["color", "#2B7CE9"], + background: ["color", "#D2E5FF"] } }, fixed: { @@ -36715,12 +36720,12 @@ return /******/ (function(modules) { // webpackBootstrap y: false }, font: { - color: "color", + color: ["color", "#343434"], size: [14, 0, 100, 1], // px face: ["arial", "verdana", "tahoma"], - background: "color", + background: ["color", "none"], stroke: [0, 0, 50, 1], // px - strokeColor: "color" + strokeColor: ["color", "#ffffff"] }, group: "string", hidden: false, @@ -36728,7 +36733,7 @@ return /******/ (function(modules) { // webpackBootstrap face: "string", //'FontAwesome', code: "string", //'\uf007', size: [50, 0, 200, 1], //50, - color: "color" //'#aa00ff' + color: ["color", "#2B7CE9"] //'#aa00ff' }, image: "string", // --> URL physics: true, @@ -36743,7 +36748,7 @@ return /******/ (function(modules) { // webpackBootstrap 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] }, edges: { @@ -36753,9 +36758,9 @@ return /******/ (function(modules) { // webpackBootstrap from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] } }, color: { - color: "color", - highlight: "color", - hover: "color", + color: ["color", "#848484"], + highlight: ["color", "#848484"], + hover: ["color", "#848484"], inherit: { enabled: true, source: ["from", "to"], // from / to @@ -36770,12 +36775,12 @@ return /******/ (function(modules) { // webpackBootstrap altLength: [5, 0, 50, 1] }, font: { - color: "color", + color: ["color", "#343434"], size: [14, 0, 100, 1], // px face: ["arial", "verdana", "tahoma"], - background: "color", + background: ["color", "none"], stroke: [0, 0, 50, 1], // px - strokeColor: "color", + strokeColor: ["color", "#ffffff"], align: ["horizontal", "top", "middle", "bottom"] }, hidden: false, @@ -36819,12 +36824,12 @@ return /******/ (function(modules) { // webpackBootstrap showNavigationIcons: false, tooltip: { delay: [300, 0, 1000, 25], - fontColor: "color", + fontColor: ["color", "#000000"], fontSize: [14, 0, 40, 1], // px fontFace: ["arial", "verdana", "tahoma"], color: { - border: "color", - background: "color" + border: ["color", "#666666"], + background: ["color", "#FFFFC6"] } }, keyboard: { @@ -36849,7 +36854,7 @@ return /******/ (function(modules) { // webpackBootstrap physics: { barnesHut: { 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], springLength: [95, 0, 500, 5], springConstant: [0.04, 0, 5, 0.005], @@ -36871,7 +36876,7 @@ return /******/ (function(modules) { // webpackBootstrap }, maxVelocity: [50, 0, 150, 1], minVelocity: [0.1, 0.01, 0.5, 0.01], - solver: ["BarnesHut", "Repulsion", "HierarchicalRepulsion"], + solver: ["barnesHut", "repulsion", "hierarchicalRepulsion"], timestep: [0.5, 0, 1, 0.05] }, selection: { @@ -36887,36 +36892,37 @@ return /******/ (function(modules) { // webpackBootstrap this.actualOptions = {}; this.domElements = []; + this.colorPicker = new ColorPicker(); } _prototypeProperties(ConfigurationSystem, null, { setOptions: { value: function setOptions(options) { if (options !== undefined) { + this._clean(); util.deepExtend(this.actualOptions, options); - if (options.configurationContainer !== undefined) { - this.container = options.configurationContainer; + if (this.actualOptions.configurationContainer !== undefined) { + this.container = this.actualOptions.configurationContainer; } else { 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; - 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 { 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; } this._create(config); - } else { - this._clean(); } + } }, writable: true, @@ -36937,21 +36943,23 @@ return /******/ (function(modules) { // webpackBootstrap if (config === true || config.indexOf(option) !== -1) { var optionObj = this.possibleOptions[option]; + // linebreak between categories if (counter > 0) { - this._makeBreak(); + this._makeEntree([]); } // a header for the category this._makeHeader(option); // get the suboptions - var _path = [option]; - this._handleObject(optionObj, _path); + var path = [option]; + this._handleObject(optionObj, path); } counter++; } } - this._push(); + + this.colorPicker.generate(); }, writable: true, configurable: true @@ -36966,7 +36974,12 @@ return /******/ (function(modules) { // webpackBootstrap configurable: true }, _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, configurable: true }, @@ -36998,30 +37011,49 @@ return /******/ (function(modules) { // webpackBootstrap writable: 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: { value: function _makeHeader(name) { var div = document.createElement("div"); div.className = "vis-network-configuration header"; div.innerHTML = name; - this.domElements.push(div); - this._makeBreak(); + this._makeEntree([], div); }, writable: true, configurable: true }, _makeLabel: { value: function _makeLabel(name, path) { + var objectLabel = arguments[2] === undefined ? false : arguments[2]; 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 = "" + name + ":"; + } else { + div.innerHTML = name + ":"; + } + return div; }, writable: true, configurable: true }, _makeDropdown: { - value: function _makeDropdown(arr, value) { + value: function _makeDropdown(arr, value, path) { var select = document.createElement("select"); select.className = "vis-network-configuration select"; var selectedValue = 0; @@ -37041,12 +37073,13 @@ return /******/ (function(modules) { // webpackBootstrap select.appendChild(option); } + var me = this; select.onchange = function () { 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, configurable: true @@ -37060,18 +37093,20 @@ return /******/ (function(modules) { // webpackBootstrap 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; } + range.value = value; + } else { + range.value = defaultValue; } var input = document.createElement("input"); input.className = "vis-network-configuration rangeinput"; @@ -37084,9 +37119,9 @@ return /******/ (function(modules) { // webpackBootstrap range.oninput = function () { 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, configurable: true @@ -37095,6 +37130,7 @@ return /******/ (function(modules) { // webpackBootstrap value: function _makeCheckbox(defaultValue, value, path) { var checkbox = document.createElement("input"); checkbox.type = "checkbox"; + checkbox.className = "vis-network-configuration checkbox"; checkbox.checked = defaultValue; if (value !== undefined) { checkbox.checked = value; @@ -37105,14 +37141,39 @@ return /******/ (function(modules) { // webpackBootstrap 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, 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, configurable: true @@ -37123,18 +37184,18 @@ return /******/ (function(modules) { // webpackBootstrap for (var subObj in obj) { if (obj.hasOwnProperty(subObj)) { var item = obj[subObj]; - var value = this._getValue(path); - var newPath = this._addToPath(path, subObj); + var value = this._getValue(newPath); + 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); + this._makeCheckbox(item, value, newPath); } 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); } else { console.error("dont know how to handle", item, subObj, newPath); @@ -37147,9 +37208,9 @@ return /******/ (function(modules) { // webpackBootstrap }, _handleArray: { 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); } else if (typeof arr[0] === "number") { this._makeRange(arr, value, path); @@ -37160,40 +37221,272 @@ return /******/ (function(modules) { // webpackBootstrap }, _handleString: { 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 { - 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, 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, 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, configurable: true } }); - return ConfigurationSystem; + return ColorPicker; })(); - module.exports = ConfigurationSystem; + module.exports = ColorPicker; + //todo make /***/ } /******/ ]) diff --git a/dist/vis.min.css b/dist/vis.min.css index de5bfa35..8dd1a07e 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)}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 +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:block;float:left;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{font-size:18px;font-weight:700}div.vis-network-configuration.label{width:120px;height:25px;line-height:25px}div.vis-network-configuration.label.s3{width:110px}div.vis-network-configuration.label.s4{width:100px}div.vis-network-configuration.colorBlock{width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;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{-webkit-appearance:none;border:0 solid #fff;background-color:transparent;width:300px;height:20px}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 1px 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}div.vis-network-colorPicker-frame{position:relative;margin-top:40px;width:310px;height:310px;padding:10px;border-radius:20px;background-color:#fff}div.vis-network-colorPicker-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-network-colorPicker-brightness{position:absolute;top:300px}div.vis-network-colorPicker-saturation{position:absolute;top:145px;left:160px;-ms-transform:rotate(270deg);-webkit-transform:rotate(270deg);transform:rotate(270deg)}div.vis-network-colorPicker-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0)}input.vis-network-configuration.range.colorPicker{width:290px;height:20px}input.vis-network-brightnessRange,input.vis-network-saturationRange{width:289px!important} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 75f910d5..460d8346 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -102,7 +102,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-configuration.css' + './lib/network/css/network-configuration.css', + './lib/network/css/network-colorpicker.css' ]; return gulp.src(files) diff --git a/lib/network/Network.js b/lib/network/Network.js index 6b26fe99..6538a7f8 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -172,6 +172,9 @@ Network.prototype.setOptions = function (options) { } this.canvas.setSize(); + + // start the physics simulation. Can be safely called multiple times. + this.body.emitter.emit("startSimulation"); } }; diff --git a/lib/network/css/network-colorpicker.css b/lib/network/css/network-colorpicker.css new file mode 100644 index 00000000..60a02f24 --- /dev/null +++ b/lib/network/css/network-colorpicker.css @@ -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; + +} \ No newline at end of file diff --git a/lib/network/css/network-configuration.css b/lib/network/css/network-configuration.css index 1e25c9bf..b9d7d9a6 100644 --- a/lib/network/css/network-configuration.css +++ b/lib/network/css/network-configuration.css @@ -1,36 +1,92 @@ - div.vis-network-configuration { position:relative; - display:inline-flex; + display:block; + float:left; 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{ - font-size:16px; + font-size:18px; font-weight: bold; } div.vis-network-configuration.label{ 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; + 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{ /*removes default webkit styles*/ -webkit-appearance: none; /*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*/ width: 300px; + height:20px; } input.vis-network-configuration.range::-webkit-slider-runnable-track { 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: 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; + box-shadow: #111927 0px 0px 1px 0px; margin-top: -7px; } input.vis-network-configuration.range:focus { diff --git a/lib/network/modules/ConfigurationSystem.js b/lib/network/modules/ConfigurationSystem.js index a9c736c8..4210181e 100644 --- a/lib/network/modules/ConfigurationSystem.js +++ b/lib/network/modules/ConfigurationSystem.js @@ -5,6 +5,8 @@ var util = require('../../util'); +import ColorPicker from './components/ColorPicker' + class ConfigurationSystem { constructor(network) { @@ -15,15 +17,15 @@ class ConfigurationSystem { borderWidth: [1, 0, 10, 1], borderWidthSelected: [2, 0, 10, 1], color: { - border: 'color', - background: 'color', + border: ['color','#2B7CE9'], + background: ['color','#97C2FC'], highlight: { - border: 'color', - background: 'color' + border: ['color','#2B7CE9'], + background: ['color','#D2E5FF'] }, hover: { - border: 'color', - background: 'color' + border: ['color','#2B7CE9'], + background: ['color','#D2E5FF'] } }, fixed: { @@ -31,12 +33,12 @@ class ConfigurationSystem { y: false }, font: { - color: 'color', + color: ['color','#343434'], size: [14, 0, 100, 1], // px face: ['arial', 'verdana', 'tahoma'], - background: 'color', + background: ['color','none'], stroke: [0, 0, 50, 1], // px - strokeColor: 'color' + strokeColor: ['color','#ffffff'] }, group: 'string', hidden: false, @@ -44,7 +46,7 @@ class ConfigurationSystem { face: 'string', //'FontAwesome', code: 'string', //'\uf007', size: [50, 0, 200, 1], //50, - color: 'color' //'#aa00ff' + color: ['color','#2B7CE9'] //'#aa00ff' }, image: 'string', // --> URL physics: true, @@ -59,7 +61,7 @@ class ConfigurationSystem { 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] }, edges: { @@ -69,9 +71,9 @@ class ConfigurationSystem { from: {enabled: false, scaleFactor: [1, 0, 3, 0.05]} }, color: { - color: 'color', - highlight: 'color', - hover: 'color', + color: ['color','#848484'], + highlight: ['color','#848484'], + hover: ['color','#848484'], inherit: { enabled: true, source: ['from', 'to'], // from / to @@ -86,12 +88,12 @@ class ConfigurationSystem { altLength: [5, 0, 50, 1] }, font: { - color: 'color', + color: ['color','#343434'], size: [14, 0, 100, 1], // px face: ['arial', 'verdana', 'tahoma'], - background: 'color', + background: ['color','none'], stroke: [0, 0, 50, 1], // px - strokeColor: 'color', + strokeColor: ['color','#ffffff'], align: ['horizontal', 'top', 'middle', 'bottom'] }, hidden: false, @@ -112,7 +114,7 @@ class ConfigurationSystem { smooth: { enabled: 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] }, width: [1, 0, 30, 1], @@ -123,8 +125,8 @@ class ConfigurationSystem { hierarchical: { enabled: false, 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: { @@ -135,12 +137,12 @@ class ConfigurationSystem { showNavigationIcons: false, tooltip: { delay: [300, 0, 1000, 25], - fontColor: 'color', + fontColor: ['color','#000000'], fontSize: [14, 0, 40, 1], // px fontFace: ['arial', 'verdana', 'tahoma'], color: { - border: 'color', - background: 'color' + border: ['color','#666666'], + background: ['color','#FFFFC6'] } }, keyboard: { @@ -165,7 +167,7 @@ class ConfigurationSystem { physics: { barnesHut: { 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], springLength: [95, 0, 500, 5], springConstant: [0.04, 0, 5, 0.005], @@ -187,7 +189,7 @@ class ConfigurationSystem { }, maxVelocity: [50, 0, 150, 1], minVelocity: [0.1, 0.01, 0.5, 0.01], - solver: ['BarnesHut', 'Repulsion', 'HierarchicalRepulsion'], + solver: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'], timestep: [0.5, 0, 1, 0.05] }, selection: { @@ -198,44 +200,45 @@ class ConfigurationSystem { hideEdgesOnDrag: false, hideNodesOnDrag: false } - } + }; this.actualOptions = {}; this.domElements = []; + this.colorPicker = new ColorPicker(); } setOptions(options) { if (options !== undefined) { + this._clean(); util.deepExtend(this.actualOptions, options); - if (options.configurationContainer !== undefined) { - this.container = options.configurationContainer; + if (this.actualOptions.configurationContainer !== undefined) { + this.container = this.actualOptions.configurationContainer; } else { this.container = this.network.body.container; } - if (options.configure !== undefined && options.configure !== false) { + if (this.actualOptions.configure !== undefined && this.actualOptions.configure !== false) { 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 { 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; } this._create(config); } - else { - this._clean(); - } + + } } @@ -252,8 +255,9 @@ class ConfigurationSystem { if (config === true || config.indexOf(option) !== -1) { let optionObj = this.possibleOptions[option]; + // linebreak between categories if (counter > 0) { - this._makeBreak(); + this._makeEntree([]); } // a header for the category this._makeHeader(option); @@ -265,8 +269,9 @@ class ConfigurationSystem { counter++; } } - this._push(); + + this.colorPicker.generate(); } _push() { @@ -276,7 +281,10 @@ class ConfigurationSystem { } _clean() { - + for (var i = 0; i < this.domElements.length; i++) { + this.container.removeChild(this.domElements[i]); + } + this.domElements = []; } _getValue(path) { @@ -302,23 +310,36 @@ class ConfigurationSystem { 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) { let div = document.createElement('div'); div.className = 'vis-network-configuration header'; 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'); - 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 = "" + name + ":"; + } + else { + div.innerHTML = name + ':'; + } + return div; } - _makeDropdown(arr, value) { + _makeDropdown(arr, value, path) { let select = document.createElement('select'); select.className = 'vis-network-configuration select'; let selectedValue = 0; @@ -329,7 +350,7 @@ class ConfigurationSystem { } for (let i = 0; i < arr.length; i++) { - let option = document.createElement("option"); + let option = document.createElement('option'); option.value = arr[i]; if (i == selectedValue) { option.selected = 'selected'; @@ -338,10 +359,11 @@ class ConfigurationSystem { 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) { @@ -351,58 +373,83 @@ class ConfigurationSystem { let step = arr[3]; let range = document.createElement('input'); range.type = 'range'; - range.className = 'vis-network-configuration range' - range.value = defaultValue; + range.className = 'vis-network-configuration range'; 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; } + 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; 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) { var checkbox = document.createElement('input'); - checkbox.type = "checkbox"; + checkbox.type = 'checkbox'; + checkbox.className = 'vis-network-configuration checkbox'; checkbox.checked = defaultValue; if (value !== undefined) { checkbox.checked = value; } 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 = []) { for (let subObj in obj) { if (obj.hasOwnProperty(subObj)) { let item = obj[subObj]; - let value = this._getValue(path); - let newPath = this._addToPath(path, subObj); + let value = this._getValue(newPath); + if (item instanceof Array) { this._handleArray(subObj, item, value, newPath); } @@ -410,24 +457,25 @@ class ConfigurationSystem { this._handleString(subObj, item, value, newPath); } else if (typeof item === 'boolean') { - this._handleBoolean(subObj, item, value, newPath); + this._makeCheckbox(item, value, newPath); } 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); } 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) { - 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); } else if (typeof arr[0] === 'number') { @@ -436,25 +484,28 @@ class ConfigurationSystem { } _handleString(optionName, string, value, path) { - if (string !== 'color') { - this._makeLabel(optionName, path); + if (string === 'string') { + } 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) { - 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); } } diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js index a5cea6c4..ce53169c 100644 --- a/lib/network/modules/EdgesHandler.js +++ b/lib/network/modules/EdgesHandler.js @@ -55,7 +55,7 @@ class EdgesHandler { face: 'arial', background: 'none', stroke: 1, // px - strokeColor: 'white', + strokeColor: '#ffffff', align:'horizontal' }, hidden: false, diff --git a/lib/network/modules/InteractionHandler.js b/lib/network/modules/InteractionHandler.js index 87530407..ebc8809f 100644 --- a/lib/network/modules/InteractionHandler.js +++ b/lib/network/modules/InteractionHandler.js @@ -38,7 +38,6 @@ class InteractionHandler { this.body.functions.getPointer = this.getPointer.bind(this); - this.options = {}; this.defaultOptions = { dragNodes:true, @@ -48,11 +47,11 @@ class InteractionHandler { showNavigationIcons: false, tooltip: { delay: 300, - fontColor: 'black', + fontColor: '#000000', fontSize: 14, // px fontFace: 'verdana', color: { - border: '#666', + border: '#666666', background: '#FFFFC6' } }, diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 9d2968e3..36b715bd 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -51,16 +51,16 @@ class NodesHandler { face: 'arial', background: 'none', stroke: 0, // px - strokeColor: 'white', + strokeColor: '#ffffff', align: 'horizontal' }, group: undefined, hidden: false, icon: { - face: undefined, //'FontAwesome', + face: 'FontAwesome', //'FontAwesome', code: undefined, //'\uf007', - size: undefined, //50, - color:undefined //'#aa00ff' + size: 50, //50, + color:'#2B7CE9' //'#aa00ff' }, image: undefined, // --> URL label: undefined, diff --git a/lib/network/modules/components/colorPicker.js b/lib/network/modules/components/colorPicker.js new file mode 100644 index 00000000..487ea8e2 --- /dev/null +++ b/lib/network/modules/components/colorPicker.js @@ -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; \ No newline at end of file