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.

703 lines
33 KiB

  1. var util = require('../../../util');
  2. var RepulsionMixin = require('./RepulsionMixin');
  3. var HierarchialRepulsionMixin = require('./HierarchialRepulsionMixin');
  4. var BarnesHutMixin = require('./BarnesHutMixin');
  5. /**
  6. * Toggling barnes Hut calculation on and off.
  7. *
  8. * @private
  9. */
  10. exports._toggleBarnesHut = function () {
  11. this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
  12. this._loadSelectedForceSolver();
  13. this.moving = true;
  14. this.start();
  15. };
  16. /**
  17. * This loads the node force solver based on the barnes hut or repulsion algorithm
  18. *
  19. * @private
  20. */
  21. exports._loadSelectedForceSolver = function () {
  22. // this overloads the this._calculateNodeForces
  23. if (this.constants.physics.barnesHut.enabled == true) {
  24. this._clearMixin(RepulsionMixin);
  25. this._clearMixin(HierarchialRepulsionMixin);
  26. this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
  27. this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
  28. this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
  29. this.constants.physics.damping = this.constants.physics.barnesHut.damping;
  30. this._loadMixin(BarnesHutMixin);
  31. }
  32. else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
  33. this._clearMixin(BarnesHutMixin);
  34. this._clearMixin(RepulsionMixin);
  35. this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
  36. this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
  37. this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
  38. this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
  39. this._loadMixin(HierarchialRepulsionMixin);
  40. }
  41. else {
  42. this._clearMixin(BarnesHutMixin);
  43. this._clearMixin(HierarchialRepulsionMixin);
  44. this.barnesHutTree = undefined;
  45. this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
  46. this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
  47. this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
  48. this.constants.physics.damping = this.constants.physics.repulsion.damping;
  49. this._loadMixin(RepulsionMixin);
  50. }
  51. };
  52. /**
  53. * Before calculating the forces, we check if we need to cluster to keep up performance and we check
  54. * if there is more than one node. If it is just one node, we dont calculate anything.
  55. *
  56. * @private
  57. */
  58. exports._initializeForceCalculation = function () {
  59. // stop calculation if there is only one node
  60. if (this.nodeIndices.length == 1) {
  61. this.nodes[this.nodeIndices[0]]._setForce(0, 0);
  62. }
  63. else {
  64. // if there are too many nodes on screen, we cluster without repositioning
  65. if (this.nodeIndices.length > this.constants.clustering.clusterThreshold && this.constants.clustering.enabled == true) {
  66. this.clusterToFit(this.constants.clustering.reduceToNodes, false);
  67. }
  68. // we now start the force calculation
  69. this._calculateForces();
  70. }
  71. };
  72. /**
  73. * Calculate the external forces acting on the nodes
  74. * Forces are caused by: edges, repulsing forces between nodes, gravity
  75. * @private
  76. */
  77. exports._calculateForces = function () {
  78. // Gravity is required to keep separated groups from floating off
  79. // the forces are reset to zero in this loop by using _setForce instead
  80. // of _addForce
  81. this._calculateGravitationalForces();
  82. this._calculateNodeForces();
  83. if (this.constants.physics.springConstant > 0) {
  84. if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
  85. this._calculateSpringForcesWithSupport();
  86. }
  87. else {
  88. if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
  89. this._calculateHierarchicalSpringForces();
  90. }
  91. else {
  92. this._calculateSpringForces();
  93. }
  94. }
  95. }
  96. };
  97. /**
  98. * Smooth curves are created by adding invisible nodes in the center of the edges. These nodes are also
  99. * handled in the calculateForces function. We then use a quadratic curve with the center node as control.
  100. * This function joins the datanodes and invisible (called support) nodes into one object.
  101. * We do this so we do not contaminate this.nodes with the support nodes.
  102. *
  103. * @private
  104. */
  105. exports._updateCalculationNodes = function () {
  106. if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
  107. this.calculationNodes = {};
  108. this.calculationNodeIndices = [];
  109. for (var nodeId in this.nodes) {
  110. if (this.nodes.hasOwnProperty(nodeId)) {
  111. this.calculationNodes[nodeId] = this.nodes[nodeId];
  112. }
  113. }
  114. var supportNodes = this.sectors['support']['nodes'];
  115. for (var supportNodeId in supportNodes) {
  116. if (supportNodes.hasOwnProperty(supportNodeId)) {
  117. if (this.edges.hasOwnProperty(supportNodes[supportNodeId].parentEdgeId)) {
  118. this.calculationNodes[supportNodeId] = supportNodes[supportNodeId];
  119. }
  120. else {
  121. supportNodes[supportNodeId]._setForce(0, 0);
  122. }
  123. }
  124. }
  125. for (var idx in this.calculationNodes) {
  126. if (this.calculationNodes.hasOwnProperty(idx)) {
  127. this.calculationNodeIndices.push(idx);
  128. }
  129. }
  130. }
  131. else {
  132. this.calculationNodes = this.nodes;
  133. this.calculationNodeIndices = this.nodeIndices;
  134. }
  135. };
  136. /**
  137. * this function applies the central gravity effect to keep groups from floating off
  138. *
  139. * @private
  140. */
  141. exports._calculateGravitationalForces = function () {
  142. var dx, dy, distance, node, i;
  143. var nodes = this.calculationNodes;
  144. var gravity = this.constants.physics.centralGravity;
  145. var gravityForce = 0;
  146. for (i = 0; i < this.calculationNodeIndices.length; i++) {
  147. node = nodes[this.calculationNodeIndices[i]];
  148. node.damping = this.constants.physics.damping; // possibly add function to alter damping properties of clusters.
  149. // gravity does not apply when we are in a pocket sector
  150. if (this._sector() == "default" && gravity != 0) {
  151. dx = -node.x;
  152. dy = -node.y;
  153. distance = Math.sqrt(dx * dx + dy * dy);
  154. gravityForce = (distance == 0) ? 0 : (gravity / distance);
  155. node.fx = dx * gravityForce;
  156. node.fy = dy * gravityForce;
  157. }
  158. else {
  159. node.fx = 0;
  160. node.fy = 0;
  161. }
  162. }
  163. };
  164. /**
  165. * this function calculates the effects of the springs in the case of unsmooth curves.
  166. *
  167. * @private
  168. */
  169. exports._calculateSpringForces = function () {
  170. var edgeLength, edge, edgeId;
  171. var dx, dy, fx, fy, springForce, distance;
  172. var edges = this.edges;
  173. // forces caused by the edges, modelled as springs
  174. for (edgeId in edges) {
  175. if (edges.hasOwnProperty(edgeId)) {
  176. edge = edges[edgeId];
  177. if (edge.connected) {
  178. // only calculate forces if nodes are in the same sector
  179. if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
  180. edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
  181. // this implies that the edges between big clusters are longer
  182. edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
  183. dx = (edge.from.x - edge.to.x);
  184. dy = (edge.from.y - edge.to.y);
  185. distance = Math.sqrt(dx * dx + dy * dy);
  186. if (distance == 0) {
  187. distance = 0.01;
  188. }
  189. // the 1/distance is so the fx and fy can be calculated without sine or cosine.
  190. springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
  191. fx = dx * springForce;
  192. fy = dy * springForce;
  193. edge.from.fx += fx;
  194. edge.from.fy += fy;
  195. edge.to.fx -= fx;
  196. edge.to.fy -= fy;
  197. }
  198. }
  199. }
  200. }
  201. };
  202. /**
  203. * This function calculates the springforces on the nodes, accounting for the support nodes.
  204. *
  205. * @private
  206. */
  207. exports._calculateSpringForcesWithSupport = function () {
  208. var edgeLength, edge, edgeId, combinedClusterSize;
  209. var edges = this.edges;
  210. // forces caused by the edges, modelled as springs
  211. for (edgeId in edges) {
  212. if (edges.hasOwnProperty(edgeId)) {
  213. edge = edges[edgeId];
  214. if (edge.connected) {
  215. // only calculate forces if nodes are in the same sector
  216. if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
  217. if (edge.via != null) {
  218. var node1 = edge.to;
  219. var node2 = edge.via;
  220. var node3 = edge.from;
  221. edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
  222. combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
  223. // this implies that the edges between big clusters are longer
  224. edgeLength += combinedClusterSize * this.constants.clustering.edgeGrowth;
  225. this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
  226. this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
  227. }
  228. }
  229. }
  230. }
  231. }
  232. };
  233. /**
  234. * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
  235. *
  236. * @param node1
  237. * @param node2
  238. * @param edgeLength
  239. * @private
  240. */
  241. exports._calculateSpringForce = function (node1, node2, edgeLength) {
  242. var dx, dy, fx, fy, springForce, distance;
  243. dx = (node1.x - node2.x);
  244. dy = (node1.y - node2.y);
  245. distance = Math.sqrt(dx * dx + dy * dy);
  246. if (distance == 0) {
  247. distance = 0.01;
  248. }
  249. // the 1/distance is so the fx and fy can be calculated without sine or cosine.
  250. springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
  251. fx = dx * springForce;
  252. fy = dy * springForce;
  253. node1.fx += fx;
  254. node1.fy += fy;
  255. node2.fx -= fx;
  256. node2.fy -= fy;
  257. };
  258. /**
  259. * Load the HTML for the physics config and bind it
  260. * @private
  261. */
  262. exports._loadPhysicsConfiguration = function () {
  263. if (this.physicsConfiguration === undefined) {
  264. this.backupConstants = {};
  265. util.deepExtend(this.backupConstants,this.constants);
  266. var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
  267. this.physicsConfiguration = document.createElement('div');
  268. this.physicsConfiguration.className = "PhysicsConfiguration";
  269. this.physicsConfiguration.innerHTML = '' +
  270. '<table><tr><td><b>Simulation Mode:</b></td></tr>' +
  271. '<tr>' +
  272. '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod1" value="BH" checked="checked">Barnes Hut</td>' +
  273. '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod2" value="R">Repulsion</td>' +
  274. '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod3" value="H">Hierarchical</td>' +
  275. '</tr>' +
  276. '</table>' +
  277. '<table id="graph_BH_table" style="display:none">' +
  278. '<tr><td><b>Barnes Hut</b></td></tr>' +
  279. '<tr>' +
  280. '<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="0" max="20000" value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" step="25" style="width:300px" id="graph_BH_gc"></td><td width="50px">-20000</td><td><input value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" id="graph_BH_gc_value" style="width:60px"></td>' +
  281. '</tr>' +
  282. '<tr>' +
  283. '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this.constants.physics.barnesHut.centralGravity + '" step="0.05" style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this.constants.physics.barnesHut.centralGravity + '" id="graph_BH_cg_value" style="width:60px"></td>' +
  284. '</tr>' +
  285. '<tr>' +
  286. '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.barnesHut.springLength + '" step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="' + this.constants.physics.barnesHut.springLength + '" id="graph_BH_sl_value" style="width:60px"></td>' +
  287. '</tr>' +
  288. '<tr>' +
  289. '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.barnesHut.springConstant + '" step="0.001" style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.barnesHut.springConstant + '" id="graph_BH_sc_value" style="width:60px"></td>' +
  290. '</tr>' +
  291. '<tr>' +
  292. '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.barnesHut.damping + '" step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.barnesHut.damping + '" id="graph_BH_damp_value" style="width:60px"></td>' +
  293. '</tr>' +
  294. '</table>' +
  295. '<table id="graph_R_table" style="display:none">' +
  296. '<tr><td><b>Repulsion</b></td></tr>' +
  297. '<tr>' +
  298. '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.repulsion.nodeDistance + '" step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.repulsion.nodeDistance + '" id="graph_R_nd_value" style="width:60px"></td>' +
  299. '</tr>' +
  300. '<tr>' +
  301. '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this.constants.physics.repulsion.centralGravity + '" step="0.05" style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="' + this.constants.physics.repulsion.centralGravity + '" id="graph_R_cg_value" style="width:60px"></td>' +
  302. '</tr>' +
  303. '<tr>' +
  304. '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.repulsion.springLength + '" step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="' + this.constants.physics.repulsion.springLength + '" id="graph_R_sl_value" style="width:60px"></td>' +
  305. '</tr>' +
  306. '<tr>' +
  307. '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.repulsion.springConstant + '" step="0.001" style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.repulsion.springConstant + '" id="graph_R_sc_value" style="width:60px"></td>' +
  308. '</tr>' +
  309. '<tr>' +
  310. '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.repulsion.damping + '" step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.repulsion.damping + '" id="graph_R_damp_value" style="width:60px"></td>' +
  311. '</tr>' +
  312. '</table>' +
  313. '<table id="graph_H_table" style="display:none">' +
  314. '<tr><td width="150"><b>Hierarchical</b></td></tr>' +
  315. '<tr>' +
  316. '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" id="graph_H_nd_value" style="width:60px"></td>' +
  317. '</tr>' +
  318. '<tr>' +
  319. '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" step="0.05" style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" id="graph_H_cg_value" style="width:60px"></td>' +
  320. '</tr>' +
  321. '<tr>' +
  322. '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" id="graph_H_sl_value" style="width:60px"></td>' +
  323. '</tr>' +
  324. '<tr>' +
  325. '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" step="0.001" style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" id="graph_H_sc_value" style="width:60px"></td>' +
  326. '</tr>' +
  327. '<tr>' +
  328. '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.hierarchicalRepulsion.damping + '" step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.damping + '" id="graph_H_damp_value" style="width:60px"></td>' +
  329. '</tr>' +
  330. '<tr>' +
  331. '<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="' + hierarchicalLayoutDirections.indexOf(this.constants.hierarchicalLayout.direction) + '" step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="' + this.constants.hierarchicalLayout.direction + '" id="graph_H_direction_value" style="width:60px"></td>' +
  332. '</tr>' +
  333. '<tr>' +
  334. '<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.levelSeparation + '" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.levelSeparation + '" id="graph_H_levsep_value" style="width:60px"></td>' +
  335. '</tr>' +
  336. '<tr>' +
  337. '<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.nodeSpacing + '" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.nodeSpacing + '" id="graph_H_nspac_value" style="width:60px"></td>' +
  338. '</tr>' +
  339. '</table>' +
  340. '<table><tr><td><b>Options:</b></td></tr>' +
  341. '<tr>' +
  342. '<td width="180px"><input type="button" id="graph_toggleSmooth" value="Toggle smoothCurves" style="width:150px"></td>' +
  343. '<td width="180px"><input type="button" id="graph_repositionNodes" value="Reinitialize" style="width:150px"></td>' +
  344. '<td width="180px"><input type="button" id="graph_generateOptions" value="Generate Options" style="width:150px"></td>' +
  345. '</tr>' +
  346. '</table>'
  347. this.containerElement.parentElement.insertBefore(this.physicsConfiguration, this.containerElement);
  348. this.optionsDiv = document.createElement("div");
  349. this.optionsDiv.style.fontSize = "14px";
  350. this.optionsDiv.style.fontFamily = "verdana";
  351. this.containerElement.parentElement.insertBefore(this.optionsDiv, this.containerElement);
  352. var rangeElement;
  353. rangeElement = document.getElementById('graph_BH_gc');
  354. rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_gc', -1, "physics_barnesHut_gravitationalConstant");
  355. rangeElement = document.getElementById('graph_BH_cg');
  356. rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_cg', 1, "physics_centralGravity");
  357. rangeElement = document.getElementById('graph_BH_sc');
  358. rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sc', 1, "physics_springConstant");
  359. rangeElement = document.getElementById('graph_BH_sl');
  360. rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sl', 1, "physics_springLength");
  361. rangeElement = document.getElementById('graph_BH_damp');
  362. rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_damp', 1, "physics_damping");
  363. rangeElement = document.getElementById('graph_R_nd');
  364. rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_nd', 1, "physics_repulsion_nodeDistance");
  365. rangeElement = document.getElementById('graph_R_cg');
  366. rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_cg', 1, "physics_centralGravity");
  367. rangeElement = document.getElementById('graph_R_sc');
  368. rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sc', 1, "physics_springConstant");
  369. rangeElement = document.getElementById('graph_R_sl');
  370. rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sl', 1, "physics_springLength");
  371. rangeElement = document.getElementById('graph_R_damp');
  372. rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_damp', 1, "physics_damping");
  373. rangeElement = document.getElementById('graph_H_nd');
  374. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
  375. rangeElement = document.getElementById('graph_H_cg');
  376. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_cg', 1, "physics_centralGravity");
  377. rangeElement = document.getElementById('graph_H_sc');
  378. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sc', 1, "physics_springConstant");
  379. rangeElement = document.getElementById('graph_H_sl');
  380. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sl', 1, "physics_springLength");
  381. rangeElement = document.getElementById('graph_H_damp');
  382. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_damp', 1, "physics_damping");
  383. rangeElement = document.getElementById('graph_H_direction');
  384. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_direction', hierarchicalLayoutDirections, "hierarchicalLayout_direction");
  385. rangeElement = document.getElementById('graph_H_levsep');
  386. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_levsep', 1, "hierarchicalLayout_levelSeparation");
  387. rangeElement = document.getElementById('graph_H_nspac');
  388. rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nspac', 1, "hierarchicalLayout_nodeSpacing");
  389. var radioButton1 = document.getElementById("graph_physicsMethod1");
  390. var radioButton2 = document.getElementById("graph_physicsMethod2");
  391. var radioButton3 = document.getElementById("graph_physicsMethod3");
  392. radioButton2.checked = true;
  393. if (this.constants.physics.barnesHut.enabled) {
  394. radioButton1.checked = true;
  395. }
  396. if (this.constants.hierarchicalLayout.enabled) {
  397. radioButton3.checked = true;
  398. }
  399. var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
  400. var graph_repositionNodes = document.getElementById("graph_repositionNodes");
  401. var graph_generateOptions = document.getElementById("graph_generateOptions");
  402. graph_toggleSmooth.onclick = graphToggleSmoothCurves.bind(this);
  403. graph_repositionNodes.onclick = graphRepositionNodes.bind(this);
  404. graph_generateOptions.onclick = graphGenerateOptions.bind(this);
  405. if (this.constants.smoothCurves == true && this.constants.dynamicSmoothCurves == false) {
  406. graph_toggleSmooth.style.background = "#A4FF56";
  407. }
  408. else {
  409. graph_toggleSmooth.style.background = "#FF8532";
  410. }
  411. switchConfigurations.apply(this);
  412. radioButton1.onchange = switchConfigurations.bind(this);
  413. radioButton2.onchange = switchConfigurations.bind(this);
  414. radioButton3.onchange = switchConfigurations.bind(this);
  415. }
  416. };
  417. /**
  418. * This overwrites the this.constants.
  419. *
  420. * @param constantsVariableName
  421. * @param value
  422. * @private
  423. */
  424. exports._overWriteGraphConstants = function (constantsVariableName, value) {
  425. var nameArray = constantsVariableName.split("_");
  426. if (nameArray.length == 1) {
  427. this.constants[nameArray[0]] = value;
  428. }
  429. else if (nameArray.length == 2) {
  430. this.constants[nameArray[0]][nameArray[1]] = value;
  431. }
  432. else if (nameArray.length == 3) {
  433. this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
  434. }
  435. };
  436. /**
  437. * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
  438. */
  439. function graphToggleSmoothCurves () {
  440. this.constants.smoothCurves.enabled = !this.constants.smoothCurves.enabled;
  441. var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
  442. if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
  443. else {graph_toggleSmooth.style.background = "#FF8532";}
  444. this._configureSmoothCurves(false);
  445. }
  446. /**
  447. * this function is used to scramble the nodes
  448. *
  449. */
  450. function graphRepositionNodes () {
  451. for (var nodeId in this.calculationNodes) {
  452. if (this.calculationNodes.hasOwnProperty(nodeId)) {
  453. this.calculationNodes[nodeId].vx = 0; this.calculationNodes[nodeId].vy = 0;
  454. this.calculationNodes[nodeId].fx = 0; this.calculationNodes[nodeId].fy = 0;
  455. }
  456. }
  457. if (this.constants.hierarchicalLayout.enabled == true) {
  458. this._setupHierarchicalLayout();
  459. }
  460. else {
  461. this.repositionNodes();
  462. }
  463. this.moving = true;
  464. this.start();
  465. }
  466. /**
  467. * this is used to generate an options file from the playing with physics system.
  468. */
  469. function graphGenerateOptions () {
  470. var options = "No options are required, default values used.";
  471. var optionsSpecific = [];
  472. var radioButton1 = document.getElementById("graph_physicsMethod1");
  473. var radioButton2 = document.getElementById("graph_physicsMethod2");
  474. if (radioButton1.checked == true) {
  475. if (this.constants.physics.barnesHut.gravitationalConstant != this.backupConstants.physics.barnesHut.gravitationalConstant) {optionsSpecific.push("gravitationalConstant: " + this.constants.physics.barnesHut.gravitationalConstant);}
  476. if (this.constants.physics.centralGravity != this.backupConstants.physics.barnesHut.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
  477. if (this.constants.physics.springLength != this.backupConstants.physics.barnesHut.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
  478. if (this.constants.physics.springConstant != this.backupConstants.physics.barnesHut.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
  479. if (this.constants.physics.damping != this.backupConstants.physics.barnesHut.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
  480. if (optionsSpecific.length != 0) {
  481. options = "var options = {";
  482. options += "physics: {barnesHut: {";
  483. for (var i = 0; i < optionsSpecific.length; i++) {
  484. options += optionsSpecific[i];
  485. if (i < optionsSpecific.length - 1) {
  486. options += ", "
  487. }
  488. }
  489. options += '}}'
  490. }
  491. if (this.constants.smoothCurves.enabled != this.backupConstants.smoothCurves.enabled) {
  492. if (optionsSpecific.length == 0) {options = "var options = {";}
  493. else {options += ", "}
  494. options += "smoothCurves: " + this.constants.smoothCurves.enabled;
  495. }
  496. if (options != "No options are required, default values used.") {
  497. options += '};'
  498. }
  499. }
  500. else if (radioButton2.checked == true) {
  501. options = "var options = {";
  502. options += "physics: {barnesHut: {enabled: false}";
  503. if (this.constants.physics.repulsion.nodeDistance != this.backupConstants.physics.repulsion.nodeDistance) {optionsSpecific.push("nodeDistance: " + this.constants.physics.repulsion.nodeDistance);}
  504. if (this.constants.physics.centralGravity != this.backupConstants.physics.repulsion.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
  505. if (this.constants.physics.springLength != this.backupConstants.physics.repulsion.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
  506. if (this.constants.physics.springConstant != this.backupConstants.physics.repulsion.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
  507. if (this.constants.physics.damping != this.backupConstants.physics.repulsion.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
  508. if (optionsSpecific.length != 0) {
  509. options += ", repulsion: {";
  510. for (var i = 0; i < optionsSpecific.length; i++) {
  511. options += optionsSpecific[i];
  512. if (i < optionsSpecific.length - 1) {
  513. options += ", "
  514. }
  515. }
  516. options += '}}'
  517. }
  518. if (optionsSpecific.length == 0) {options += "}"}
  519. if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
  520. options += ", smoothCurves: " + this.constants.smoothCurves;
  521. }
  522. options += '};'
  523. }
  524. else {
  525. options = "var options = {";
  526. if (this.constants.physics.hierarchicalRepulsion.nodeDistance != this.backupConstants.physics.hierarchicalRepulsion.nodeDistance) {optionsSpecific.push("nodeDistance: " + this.constants.physics.hierarchicalRepulsion.nodeDistance);}
  527. if (this.constants.physics.centralGravity != this.backupConstants.physics.hierarchicalRepulsion.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
  528. if (this.constants.physics.springLength != this.backupConstants.physics.hierarchicalRepulsion.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
  529. if (this.constants.physics.springConstant != this.backupConstants.physics.hierarchicalRepulsion.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
  530. if (this.constants.physics.damping != this.backupConstants.physics.hierarchicalRepulsion.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
  531. if (optionsSpecific.length != 0) {
  532. options += "physics: {hierarchicalRepulsion: {";
  533. for (var i = 0; i < optionsSpecific.length; i++) {
  534. options += optionsSpecific[i];
  535. if (i < optionsSpecific.length - 1) {
  536. options += ", ";
  537. }
  538. }
  539. options += '}},';
  540. }
  541. options += 'hierarchicalLayout: {';
  542. optionsSpecific = [];
  543. if (this.constants.hierarchicalLayout.direction != this.backupConstants.hierarchicalLayout.direction) {optionsSpecific.push("direction: " + this.constants.hierarchicalLayout.direction);}
  544. if (Math.abs(this.constants.hierarchicalLayout.levelSeparation) != this.backupConstants.hierarchicalLayout.levelSeparation) {optionsSpecific.push("levelSeparation: " + this.constants.hierarchicalLayout.levelSeparation);}
  545. if (this.constants.hierarchicalLayout.nodeSpacing != this.backupConstants.hierarchicalLayout.nodeSpacing) {optionsSpecific.push("nodeSpacing: " + this.constants.hierarchicalLayout.nodeSpacing);}
  546. if (optionsSpecific.length != 0) {
  547. for (var i = 0; i < optionsSpecific.length; i++) {
  548. options += optionsSpecific[i];
  549. if (i < optionsSpecific.length - 1) {
  550. options += ", "
  551. }
  552. }
  553. options += '}'
  554. }
  555. else {
  556. options += "enabled:true}";
  557. }
  558. options += '};'
  559. }
  560. this.optionsDiv.innerHTML = options;
  561. }
  562. /**
  563. * this is used to switch between barnesHut, repulsion and hierarchical.
  564. *
  565. */
  566. function switchConfigurations () {
  567. var ids = ["graph_BH_table", "graph_R_table", "graph_H_table"];
  568. var radioButton = document.querySelector('input[name="graph_physicsMethod"]:checked').value;
  569. var tableId = "graph_" + radioButton + "_table";
  570. var table = document.getElementById(tableId);
  571. table.style.display = "block";
  572. for (var i = 0; i < ids.length; i++) {
  573. if (ids[i] != tableId) {
  574. table = document.getElementById(ids[i]);
  575. table.style.display = "none";
  576. }
  577. }
  578. this._restoreNodes();
  579. if (radioButton == "R") {
  580. this.constants.hierarchicalLayout.enabled = false;
  581. this.constants.physics.hierarchicalRepulsion.enabled = false;
  582. this.constants.physics.barnesHut.enabled = false;
  583. }
  584. else if (radioButton == "H") {
  585. if (this.constants.hierarchicalLayout.enabled == false) {
  586. this.constants.hierarchicalLayout.enabled = true;
  587. this.constants.physics.hierarchicalRepulsion.enabled = true;
  588. this.constants.physics.barnesHut.enabled = false;
  589. this.constants.smoothCurves.enabled = false;
  590. this._setupHierarchicalLayout();
  591. }
  592. }
  593. else {
  594. this.constants.hierarchicalLayout.enabled = false;
  595. this.constants.physics.hierarchicalRepulsion.enabled = false;
  596. this.constants.physics.barnesHut.enabled = true;
  597. }
  598. this._loadSelectedForceSolver();
  599. var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
  600. if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
  601. else {graph_toggleSmooth.style.background = "#FF8532";}
  602. this.moving = true;
  603. this.start();
  604. }
  605. /**
  606. * this generates the ranges depending on the iniital values.
  607. *
  608. * @param id
  609. * @param map
  610. * @param constantsVariableName
  611. */
  612. function showValueOfRange (id,map,constantsVariableName) {
  613. var valueId = id + "_value";
  614. var rangeValue = document.getElementById(id).value;
  615. if (map instanceof Array) {
  616. document.getElementById(valueId).value = map[parseInt(rangeValue)];
  617. this._overWriteGraphConstants(constantsVariableName,map[parseInt(rangeValue)]);
  618. }
  619. else {
  620. document.getElementById(valueId).value = parseInt(map) * parseFloat(rangeValue);
  621. this._overWriteGraphConstants(constantsVariableName, parseInt(map) * parseFloat(rangeValue));
  622. }
  623. if (constantsVariableName == "hierarchicalLayout_direction" ||
  624. constantsVariableName == "hierarchicalLayout_levelSeparation" ||
  625. constantsVariableName == "hierarchicalLayout_nodeSpacing") {
  626. this._setupHierarchicalLayout();
  627. }
  628. this.moving = true;
  629. this.start();
  630. }