vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

727 lines
21 KiB

9 years ago
9 years ago
  1. var util = require('../../util');
  2. import ColorPicker from './components/ColorPicker'
  3. /**
  4. * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
  5. * Boolean options are recognised as Boolean
  6. * Number options should be written as array: [default value, min value, max value, stepsize]
  7. * Colors should be written as array: ['color', '#ffffff']
  8. * Strings with should be written as array: [option1, option2, option3, ..]
  9. *
  10. * The options are matched with their counterparts in each of the modules and the values used in the configuration are
  11. *
  12. */
  13. class ConfigurationSystem {
  14. constructor(network) {
  15. this.network = network;
  16. this.changedOptions = [];
  17. this.possibleOptions = {
  18. nodes: {
  19. borderWidth: [1, 0, 10, 1],
  20. borderWidthSelected: [2, 0, 10, 1],
  21. color: {
  22. border: ['color','#2B7CE9'],
  23. background: ['color','#97C2FC'],
  24. highlight: {
  25. border: ['color','#2B7CE9'],
  26. background: ['color','#D2E5FF']
  27. },
  28. hover: {
  29. border: ['color','#2B7CE9'],
  30. background: ['color','#D2E5FF']
  31. }
  32. },
  33. fixed: {
  34. x: false,
  35. y: false
  36. },
  37. font: {
  38. color: ['color','#343434'],
  39. size: [14, 0, 100, 1], // px
  40. face: ['arial', 'verdana', 'tahoma'],
  41. background: ['color','none'],
  42. stroke: [0, 0, 50, 1], // px
  43. strokeColor: ['color','#ffffff']
  44. },
  45. //group: 'string',
  46. hidden: false,
  47. //icon: {
  48. // face: 'string', //'FontAwesome',
  49. // code: 'string', //'\uf007',
  50. // size: [50, 0, 200, 1], //50,
  51. // color: ['color','#2B7CE9'] //'#aa00ff'
  52. //},
  53. //image: 'string', // --> URL
  54. physics: true,
  55. scaling: {
  56. min: [10, 0, 200, 1],
  57. max: [30, 0, 200, 1],
  58. label: {
  59. enabled: true,
  60. min: [14, 0, 200, 1],
  61. max: [30, 0, 200, 1],
  62. maxVisible: [30, 0, 200, 1],
  63. drawThreshold: [3, 0, 20, 1]
  64. }
  65. },
  66. shadow:{
  67. enabled: false,
  68. size:[10, 0, 20, 1],
  69. x:[5, -30, 30, 1],
  70. y:[5, -30, 30, 1]
  71. },
  72. shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
  73. size: [25, 0, 200, 1]
  74. },
  75. edges: {
  76. arrows: {
  77. to: {enabled: false, scaleFactor: [1, 0, 3, 0.05]}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
  78. middle: {enabled: false, scaleFactor: [1, 0, 3, 0.05]},
  79. from: {enabled: false, scaleFactor: [1, 0, 3, 0.05]}
  80. },
  81. color: {
  82. color: ['color','#848484'],
  83. highlight: ['color','#848484'],
  84. hover: ['color','#848484'],
  85. inherit: ['from','to','both',true, false],
  86. opacity: [1, 0, 1, 0.05]
  87. },
  88. dashes: false,
  89. font: {
  90. color: ['color','#343434'],
  91. size: [14, 0, 100, 1], // px
  92. face: ['arial', 'verdana', 'tahoma'],
  93. background: ['color','none'],
  94. stroke: [1, 0, 50, 1], // px
  95. strokeColor: ['color','#ffffff'],
  96. align: ['horizontal', 'top', 'middle', 'bottom']
  97. },
  98. hidden: false,
  99. hoverWidth: [2, 0, 5, 0.1],
  100. physics: true,
  101. scaling: {
  102. min: [1, 0, 100, 1],
  103. max: [15, 0, 100, 1],
  104. label: {
  105. enabled: true,
  106. min: [14, 0, 200, 1],
  107. max: [30, 0, 200, 1],
  108. maxVisible: [30, 0, 200, 1],
  109. drawThreshold: [3, 0, 20, 1]
  110. }
  111. },
  112. selectionWidth: [1.5, 0, 5, 0.1],
  113. selfReferenceSize: [20, 0, 200, 1],
  114. shadow:{
  115. enabled: false,
  116. size:[10, 0, 20, 1],
  117. x:[5, -30, 30, 1],
  118. y:[5, -30, 30, 1]
  119. },
  120. smooth: {
  121. enabled: true,
  122. dynamic: true,
  123. type: ['continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
  124. roundness: [0.5, 0, 1, 0.05]
  125. },
  126. width: [1, 0, 30, 1]
  127. },
  128. layout: {
  129. randomSeed: [0, 0, 500, 1],
  130. hierarchical: {
  131. enabled: false,
  132. levelSeparation: [150, 20, 500, 5],
  133. direction: ['UD', 'DU', 'LR', 'RL'], // UD, DU, LR, RL
  134. sortMethod: ['hubsize', 'directed'] // hubsize, directed
  135. }
  136. },
  137. interaction: {
  138. dragNodes: true,
  139. dragView: true,
  140. zoomView: true,
  141. hoverEnabled: false,
  142. navigationButtons: false,
  143. tooltipDelay: [300, 0, 1000, 25],
  144. keyboard: {
  145. enabled: false,
  146. speed: {x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005]},
  147. bindToWindow: true
  148. }
  149. },
  150. manipulation: {
  151. enabled: false,
  152. initiallyVisible: false,
  153. locale: ['en', 'nl'],
  154. functionality: {
  155. addNode: true,
  156. addEdge: true,
  157. editNode: true,
  158. editEdge: true,
  159. deleteNode: true,
  160. deleteEdge: true
  161. }
  162. },
  163. physics: {
  164. barnesHut: {
  165. //theta: [0.5, 0.1, 1, 0.05],
  166. gravitationalConstant: [-2000, -30000, 0, 50],
  167. centralGravity: [0.3, 0, 10, 0.05],
  168. springLength: [95, 0, 500, 5],
  169. springConstant: [0.04, 0, 5, 0.005],
  170. damping: [0.09, 0, 1, 0.01]
  171. },
  172. repulsion: {
  173. centralGravity: [0.2, 0, 10, 0.05],
  174. springLength: [200, 0, 500, 5],
  175. springConstant: [0.05, 0, 5, 0.005],
  176. nodeDistance: [100, 0, 500, 5],
  177. damping: [0.09, 0, 1, 0.01]
  178. },
  179. hierarchicalRepulsion: {
  180. centralGravity: [0.2, 0, 10, 0.05],
  181. springLength: [100, 0, 500, 5],
  182. springConstant: [0.01, 0, 5, 0.005],
  183. nodeDistance: [120, 0, 500, 5],
  184. damping: [0.09, 0, 1, 0.01]
  185. },
  186. maxVelocity: [50, 0, 150, 1],
  187. minVelocity: [0.1, 0.01, 0.5, 0.01],
  188. solver: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'],
  189. timestep: [0.5, 0, 1, 0.05]
  190. },
  191. selection: {
  192. select: true,
  193. selectConnectedEdges: true
  194. },
  195. renderer: {
  196. hideEdgesOnDrag: false,
  197. hideNodesOnDrag: false
  198. }
  199. };
  200. this.actualOptions = {
  201. nodes:{},
  202. edges:{},
  203. layout:{},
  204. interaction:{},
  205. manipulation:{},
  206. physics:{},
  207. selection:{},
  208. renderer:{},
  209. configure: false,
  210. configureContainer: undefined
  211. };
  212. this.domElements = [];
  213. this.colorPicker = new ColorPicker(this.network.canvas.pixelRatio);
  214. this.wrapper;
  215. }
  216. /**
  217. * refresh all options.
  218. * Because all modules parse their options by themselves, we just use their options. We copy them here.
  219. *
  220. * @param options
  221. */
  222. setOptions(options) {
  223. if (options !== undefined) {
  224. util.extend(this.actualOptions, options);
  225. }
  226. this._clean();
  227. if (this.actualOptions.configure !== undefined && this.actualOptions.configure !== false) {
  228. util.deepExtend(this.actualOptions.nodes, this.network.nodesHandler.options, true);
  229. util.deepExtend(this.actualOptions.edges, this.network.edgesHandler.options, true);
  230. util.deepExtend(this.actualOptions.layout, this.network.layoutEngine.options, true);
  231. util.deepExtend(this.actualOptions.interaction, this.network.interactionHandler.options, true);
  232. util.deepExtend(this.actualOptions.manipulation, this.network.manipulation.options, true);
  233. util.deepExtend(this.actualOptions.physics, this.network.physics.options, true);
  234. util.deepExtend(this.actualOptions.selection, this.network.selectionHandler.selection, true);
  235. util.deepExtend(this.actualOptions.renderer, this.network.renderer.selection, true);
  236. this.container = this.network.body.container;
  237. let config = true;
  238. if (typeof this.actualOptions.configure === 'string') {
  239. config = this.actualOptions.configure;
  240. }
  241. else if (this.actualOptions.configure instanceof Array) {
  242. config = this.actualOptions.configure.join();
  243. }
  244. else if (typeof this.actualOptions.configure === 'object') {
  245. if (this.actualOptions.configure.container !== undefined) {
  246. this.container = this.actualOptions.configure.container;
  247. }
  248. if (this.actualOptions.configure.filter !== undefined) {
  249. config = this.actualOptions.configure.filter;
  250. }
  251. }
  252. else if (typeof this.actualOptions.configure === 'boolean') {
  253. config = this.actualOptions.configure;
  254. }
  255. if (config !== false) {
  256. this._create(config);
  257. }
  258. }
  259. }
  260. /**
  261. * Create all DOM elements
  262. * @param {Boolean | String} config
  263. * @private
  264. */
  265. _create(config) {
  266. this._clean();
  267. this.changedOptions = [];
  268. let counter = 0;
  269. for (let option in this.possibleOptions) {
  270. if (this.possibleOptions.hasOwnProperty(option)) {
  271. if (config === true || config.indexOf(option) !== -1) {
  272. let optionObj = this.possibleOptions[option];
  273. // linebreak between categories
  274. if (counter > 0) {
  275. this._makeItem([]);
  276. }
  277. // a header for the category
  278. this._makeHeader(option);
  279. // get the suboptions
  280. let path = [option];
  281. this._handleObject(optionObj, path);
  282. }
  283. counter++;
  284. }
  285. }
  286. let generateButton = document.createElement('div');
  287. generateButton.className = 'vis-network-configuration button';
  288. generateButton.innerHTML = 'generate options';
  289. generateButton.onclick = () => {this._printOptions();};
  290. generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
  291. generateButton.onmouseout = () => {generateButton.className = 'vis-network-configuration button';};
  292. this.optionsContainer = document.createElement('div');
  293. this.optionsContainer.className = 'vis-network-configuration vis-option-container';
  294. this.domElements.push(this.optionsContainer);
  295. this.domElements.push(generateButton);
  296. this._push();
  297. this.colorPicker.insertTo(this.container);
  298. }
  299. /**
  300. * draw all DOM elements on the screen
  301. * @private
  302. */
  303. _push() {
  304. this.wrapper = document.createElement('div');
  305. this.wrapper.className = 'vis-network-configuration-wrapper';
  306. this.container.appendChild(this.wrapper);
  307. for (var i = 0; i < this.domElements.length; i++) {
  308. this.wrapper.appendChild(this.domElements[i]);
  309. }
  310. }
  311. /**
  312. * delete all DOM elements
  313. * @private
  314. */
  315. _clean() {
  316. for (var i = 0; i < this.domElements.length; i++) {
  317. this.wrapper.removeChild(this.domElements[i]);
  318. }
  319. if (this.wrapper !== undefined) {
  320. this.container.removeChild(this.wrapper);
  321. this.wrapper = undefined;
  322. }
  323. this.domElements = [];
  324. }
  325. /**
  326. * get the value from the actualOptions if it exists
  327. * @param {array} path | where to look for the actual option
  328. * @returns {*}
  329. * @private
  330. */
  331. _getValue(path) {
  332. let base = this.actualOptions;
  333. for (let i = 0; i < path.length; i++) {
  334. if (base[path[i]] !== undefined) {
  335. base = base[path[i]];
  336. }
  337. else {
  338. base = undefined;
  339. break;
  340. }
  341. }
  342. return base;
  343. }
  344. /**
  345. * Copy the path and add a step. It needs to copy because the path will keep stacking otherwise.
  346. * @param path
  347. * @param newValue
  348. * @returns {Array}
  349. * @private
  350. */
  351. _addToPath(path, newValue) {
  352. let newPath = [];
  353. for (let i = 0; i < path.length; i++) {
  354. newPath.push(path[i]);
  355. }
  356. newPath.push(newValue);
  357. return newPath;
  358. }
  359. /**
  360. * all option elements are wrapped in an item
  361. * @param path
  362. * @param domElements
  363. * @private
  364. */
  365. _makeItem(path, ...domElements) {
  366. let item = document.createElement('div');
  367. item.className = 'vis-network-configuration item s' + path.length;
  368. domElements.forEach((element) => {
  369. item.appendChild(element);
  370. });
  371. this.domElements.push(item);
  372. }
  373. /**
  374. * header for major subjects
  375. * @param name
  376. * @private
  377. */
  378. _makeHeader(name) {
  379. let div = document.createElement('div');
  380. div.className = 'vis-network-configuration header';
  381. div.innerHTML = name;
  382. this._makeItem([],div);
  383. }
  384. /**
  385. * make a label, if it is an object label, it gets different styling.
  386. * @param name
  387. * @param path
  388. * @param objectLabel
  389. * @returns {HTMLElement}
  390. * @private
  391. */
  392. _makeLabel(name, path, objectLabel = false) {
  393. let div = document.createElement('div');
  394. div.className = 'vis-network-configuration label s' + path.length;
  395. if (objectLabel === true) {
  396. div.innerHTML = '<i><b>' + name + ':</b></i>';
  397. }
  398. else {
  399. div.innerHTML = name + ':';
  400. }
  401. return div;
  402. }
  403. /**
  404. * make a dropdown list for multiple possible string optoins
  405. * @param arr
  406. * @param value
  407. * @param path
  408. * @private
  409. */
  410. _makeDropdown(arr, value, path) {
  411. let select = document.createElement('select');
  412. select.className = 'vis-network-configuration select';
  413. let selectedValue = 0;
  414. if (value !== undefined) {
  415. if (arr.indexOf(value) !== -1) {
  416. selectedValue = arr.indexOf(value);
  417. }
  418. }
  419. for (let i = 0; i < arr.length; i++) {
  420. let option = document.createElement('option');
  421. option.value = arr[i];
  422. if (i === selectedValue) {
  423. option.selected = 'selected';
  424. }
  425. option.innerHTML = arr[i];
  426. select.appendChild(option);
  427. }
  428. let me = this;
  429. select.onchange = function () {me._update(this.value, path);};
  430. let label = this._makeLabel(path[path.length-1], path);
  431. this._makeItem(path, label, select);
  432. }
  433. /**
  434. * make a range object for numeric options
  435. * @param arr
  436. * @param value
  437. * @param path
  438. * @private
  439. */
  440. _makeRange(arr, value, path) {
  441. let defaultValue = arr[0];
  442. let min = arr[1];
  443. let max = arr[2];
  444. let step = arr[3];
  445. let range = document.createElement('input');
  446. range.type = 'range';
  447. range.className = 'vis-network-configuration range';
  448. range.min = min;
  449. range.max = max;
  450. range.step = step;
  451. if (value !== undefined) {
  452. if (value * 0.1 < min) {
  453. range.min = value / 10;
  454. }
  455. if (value * 2 > max && max !== 1) {
  456. range.max = value * 2;
  457. }
  458. range.value = value;
  459. }
  460. else {
  461. range.value = defaultValue;
  462. }
  463. let input = document.createElement('input');
  464. input.className = 'vis-network-configuration rangeinput';
  465. input.value = range.value;
  466. var me = this;
  467. range.onchange = function () {input.value = this.value; me._update(this.value, path);};
  468. range.oninput = function () {input.value = this.value; };
  469. let label = this._makeLabel(path[path.length-1], path);
  470. this._makeItem(path, label, range, input);
  471. }
  472. /**
  473. * make a checkbox for boolean options.
  474. * @param defaultValue
  475. * @param value
  476. * @param path
  477. * @private
  478. */
  479. _makeCheckbox(defaultValue, value, path) {
  480. var checkbox = document.createElement('input');
  481. checkbox.type = 'checkbox';
  482. checkbox.className = 'vis-network-configuration checkbox';
  483. checkbox.checked = defaultValue;
  484. if (value !== undefined) {
  485. checkbox.checked = value;
  486. if (value !== defaultValue) {
  487. if (typeof defaultValue === 'object') {
  488. if (value !== defaultValue.enabled) {
  489. this.changedOptions.push({path:path, value:value});
  490. }
  491. }
  492. else {
  493. this.changedOptions.push({path:path, value:value});
  494. }
  495. }
  496. }
  497. let me = this;
  498. checkbox.onchange = function() {me._update(this.checked, path)};
  499. let label = this._makeLabel(path[path.length-1], path);
  500. this._makeItem(path, label, checkbox);
  501. }
  502. /**
  503. * make a color field with a color picker for color fields
  504. * @param arr
  505. * @param value
  506. * @param path
  507. * @private
  508. */
  509. _makeColorField(arr, value, path) {
  510. let defaultColor = arr[1];
  511. let div = document.createElement('div');
  512. value = value === undefined ? defaultColor : value;
  513. if (value !== 'none') {
  514. div.className = 'vis-network-configuration colorBlock';
  515. div.style.backgroundColor = value;
  516. }
  517. else {
  518. div.className = 'vis-network-configuration colorBlock none';
  519. }
  520. value = value === undefined ? defaultColor : value;
  521. div.onclick = () => {
  522. this._showColorPicker(value,div,path);
  523. }
  524. let label = this._makeLabel(path[path.length-1], path);
  525. this._makeItem(path,label, div);
  526. }
  527. /**
  528. * used by the color buttons to call the color picker.
  529. * @param event
  530. * @param value
  531. * @param div
  532. * @param path
  533. * @private
  534. */
  535. _showColorPicker(value, div, path) {
  536. let rect = div.getBoundingClientRect();
  537. let bodyRect = document.body.getBoundingClientRect();
  538. let pickerX = rect.left + rect.width + 5;
  539. let pickerY = rect.top - bodyRect.top + rect.height*0.5;
  540. this.colorPicker.show(pickerX,pickerY);
  541. this.colorPicker.setColor(value);
  542. this.colorPicker.setCallback((color) => {
  543. let colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
  544. div.style.backgroundColor = colorString;
  545. this._update(colorString,path);
  546. })
  547. }
  548. /**
  549. * parse an object and draw the correct items
  550. * @param obj
  551. * @param path
  552. * @private
  553. */
  554. _handleObject(obj, path = []) {
  555. for (let subObj in obj) {
  556. if (obj.hasOwnProperty(subObj)) {
  557. let item = obj[subObj];
  558. let newPath = this._addToPath(path, subObj);
  559. let value = this._getValue(newPath);
  560. if (item instanceof Array) {
  561. this._handleArray(item, value, newPath);
  562. }
  563. else if (typeof item === 'string') {
  564. this._handleString(item, value, newPath);
  565. }
  566. else if (typeof item === 'boolean') {
  567. this._makeCheckbox(item, value, newPath);
  568. }
  569. else if (item instanceof Object) {
  570. // collapse the physics options that are not enabled
  571. let draw = true;
  572. if (path.indexOf('physics') !== -1) {
  573. if (this.actualOptions.physics.solver !== subObj) {
  574. draw = false;
  575. }
  576. }
  577. if (draw === true) {
  578. // initially collapse options with an disabled enabled option.
  579. if (item.enabled !== undefined) {
  580. let enabledPath = this._addToPath(newPath, 'enabled');
  581. let enabledValue = this._getValue(enabledPath);
  582. if (enabledValue === true) {
  583. let label = this._makeLabel(subObj, newPath, true);
  584. this._makeItem(newPath, label);
  585. this._handleObject(item, newPath);
  586. }
  587. else {
  588. this._makeCheckbox(item, enabledValue, newPath);
  589. }
  590. }
  591. else {
  592. let label = this._makeLabel(subObj, newPath, true);
  593. this._makeItem(newPath, label);
  594. this._handleObject(item, newPath);
  595. }
  596. }
  597. }
  598. else {
  599. console.error('dont know how to handle', item, subObj, newPath);
  600. }
  601. }
  602. }
  603. }
  604. /**
  605. * handle the array type of option
  606. * @param optionName
  607. * @param arr
  608. * @param value
  609. * @param path
  610. * @private
  611. */
  612. _handleArray(arr, value, path) {
  613. if (typeof arr[0] === 'string' && arr[0] === 'color') {
  614. this._makeColorField(arr, value, path);
  615. if (arr[1] !== value) {this.changedOptions.push({path:path, value:value});}
  616. }
  617. else if (typeof arr[0] === 'string') {
  618. this._makeDropdown(arr, value, path);
  619. if (arr[0] !== value) {this.changedOptions.push({path:path, value:value});}
  620. }
  621. else if (typeof arr[0] === 'number') {
  622. this._makeRange(arr, value, path);
  623. if (arr[0] !== value) {this.changedOptions.push({path:path, value:value});}
  624. }
  625. }
  626. /**
  627. * called to update the network with the new settings.
  628. * @param value
  629. * @param path
  630. * @private
  631. */
  632. _update(value, path) {
  633. let options = this._constructOptions(value,path);
  634. this.network.setOptions(options);
  635. }
  636. _constructOptions(value,path, optionsObj = {}) {
  637. let pointer = optionsObj;
  638. // when dropdown boxes can be string or boolean, we typecast it into correct types
  639. value = value === 'true' ? true : value;
  640. value = value === 'false' ? false : value;
  641. for (let i = 0; i < path.length; i++) {
  642. if (pointer[path[i]] === undefined) {
  643. pointer[path[i]] = {};
  644. }
  645. if (i !== path.length -1) {
  646. pointer = pointer[path[i]];
  647. }
  648. else {
  649. pointer[path[i]] = value;
  650. }
  651. }
  652. return optionsObj;
  653. }
  654. _printOptions() {
  655. let options = {};
  656. for (var i = 0; i < this.changedOptions.length; i++) {
  657. this._constructOptions(this.changedOptions[i].value, this.changedOptions[i].path, options)
  658. }
  659. this.optionsContainer.innerHTML = '<pre>var options = ' + JSON.stringify(options, null, 2) + '</pre>';
  660. }
  661. }
  662. export default ConfigurationSystem;