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.

383 lines
9.9 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. var util = require("../../util");
  2. var DataSet = require('../../DataSet');
  3. var DataView = require('../../DataView');
  4. import Edge from "./components/Edge"
  5. import Label from "./components/shared/Label"
  6. class EdgesHandler {
  7. constructor(body, images, groups) {
  8. this.body = body;
  9. this.images = images;
  10. this.groups = groups;
  11. // create the edge API in the body container
  12. this.body.functions.createEdge = this.create.bind(this);
  13. this.edgesListeners = {
  14. add: (event, params) => {this.add(params.items);},
  15. update: (event, params) => {this.update(params.items);},
  16. remove: (event, params) => {this.remove(params.items);}
  17. };
  18. this.options = {};
  19. this.defaultOptions = {
  20. arrows: {
  21. to: {enabled: false, scaleFactor:1}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
  22. middle: {enabled: false, scaleFactor:1},
  23. from: {enabled: false, scaleFactor:1}
  24. },
  25. color: {
  26. color:'#848484',
  27. highlight:'#848484',
  28. hover: '#848484',
  29. inherit: 'from',
  30. opacity:1.0
  31. },
  32. dashes: false,
  33. font: {
  34. color: '#343434',
  35. size: 14, // px
  36. face: 'arial',
  37. background: 'none',
  38. strokeWidth: 2, // px
  39. strokeColor: '#ffffff',
  40. align:'horizontal'
  41. },
  42. hidden: false,
  43. hoverWidth: 1.5,
  44. label: undefined,
  45. labelHighlightBold: true,
  46. length: undefined,
  47. physics: true,
  48. scaling:{
  49. min: 1,
  50. max: 15,
  51. label: {
  52. enabled: true,
  53. min: 14,
  54. max: 30,
  55. maxVisible: 30,
  56. drawThreshold: 5
  57. },
  58. customScalingFunction: function (min,max,total,value) {
  59. if (max === min) {
  60. return 0.5;
  61. }
  62. else {
  63. var scale = 1 / (max - min);
  64. return Math.max(0,(value - min)*scale);
  65. }
  66. }
  67. },
  68. selectionWidth: 1.5,
  69. selfReferenceSize:20,
  70. shadow:{
  71. enabled: false,
  72. size:10,
  73. x:5,
  74. y:5
  75. },
  76. smooth: {
  77. enabled: true,
  78. type: "dynamic",
  79. roundness: 0.5
  80. },
  81. title:undefined,
  82. width: 1,
  83. value: undefined
  84. };
  85. util.extend(this.options, this.defaultOptions);
  86. this.bindEventListeners();
  87. }
  88. bindEventListeners() {
  89. // this allows external modules to force all dynamic curves to turn static.
  90. this.body.emitter.on("_forceDisableDynamicCurves", (type) => {
  91. if (type === 'dynamic') {
  92. type = 'continuous';
  93. }
  94. let emitChange = false;
  95. for (let edgeId in this.body.edges) {
  96. if (this.body.edges.hasOwnProperty(edgeId)) {
  97. let edge = this.body.edges[edgeId];
  98. let edgeData = this.body.data.edges._data[edgeId];
  99. // only forcilby remove the smooth curve if the data has been set of the edge has the smooth curves defined.
  100. // this is because a change in the global would not affect these curves.
  101. if (edgeData !== undefined) {
  102. let edgeOptions = edgeData.smooth;
  103. if (edgeOptions !== undefined) {
  104. if (edgeOptions.enabled === true && edgeOptions.type === 'dynamic') {
  105. if (type === undefined) {
  106. edge.setOptions({smooth: false});
  107. }
  108. else {
  109. edge.setOptions({smooth: {type: type}});
  110. }
  111. emitChange = true;
  112. }
  113. }
  114. }
  115. }
  116. }
  117. if (emitChange === true) {
  118. this.body.emitter.emit("_dataChanged");
  119. }
  120. });
  121. // this is called when options of EXISTING nodes or edges have changed.
  122. this.body.emitter.on("_dataUpdated", () => {
  123. this.reconnectEdges();
  124. this.markAllEdgesAsDirty();
  125. });
  126. // refresh the edges. Used when reverting from hierarchical layout
  127. this.body.emitter.on("refreshEdges", this.refresh.bind(this));
  128. this.body.emitter.on("refresh", this.refresh.bind(this));
  129. this.body.emitter.on("destroy", () => {
  130. delete this.body.functions.createEdge;
  131. delete this.edgesListeners.add;
  132. delete this.edgesListeners.update;
  133. delete this.edgesListeners.remove;
  134. delete this.edgesListeners;
  135. });
  136. }
  137. setOptions(options) {
  138. if (options !== undefined) {
  139. // use the parser from the Edge class to fill in all shorthand notations
  140. Edge.parseOptions(this.options, options);
  141. // hanlde multiple input cases for color
  142. if (options.color !== undefined) {
  143. this.markAllEdgesAsDirty();
  144. }
  145. // update smooth settings in all edges
  146. let dataChanged = false;
  147. if (options.smooth !== undefined) {
  148. for (let edgeId in this.body.edges) {
  149. if (this.body.edges.hasOwnProperty(edgeId)) {
  150. dataChanged = this.body.edges[edgeId].updateEdgeType() || dataChanged;
  151. }
  152. }
  153. }
  154. // update fonts in all edges
  155. if (options.font !== undefined) {
  156. // use the parser from the Label class to fill in all shorthand notations
  157. Label.parseOptions(this.options.font, options);
  158. for (let edgeId in this.body.edges) {
  159. if (this.body.edges.hasOwnProperty(edgeId)) {
  160. this.body.edges[edgeId].updateLabelModule();
  161. }
  162. }
  163. }
  164. // update the state of the variables if needed
  165. if (options.hidden !== undefined || options.physics !== undefined || dataChanged === true) {
  166. this.body.emitter.emit('_dataChanged');
  167. }
  168. }
  169. }
  170. /**
  171. * Load edges by reading the data table
  172. * @param {Array | DataSet | DataView} edges The data containing the edges.
  173. * @private
  174. * @private
  175. */
  176. setData(edges, doNotEmit = false) {
  177. var oldEdgesData = this.body.data.edges;
  178. if (edges instanceof DataSet || edges instanceof DataView) {
  179. this.body.data.edges = edges;
  180. }
  181. else if (Array.isArray(edges)) {
  182. this.body.data.edges = new DataSet();
  183. this.body.data.edges.add(edges);
  184. }
  185. else if (!edges) {
  186. this.body.data.edges = new DataSet();
  187. }
  188. else {
  189. throw new TypeError('Array or DataSet expected');
  190. }
  191. // TODO: is this null or undefined or false?
  192. if (oldEdgesData) {
  193. // unsubscribe from old dataset
  194. util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);});
  195. }
  196. // remove drawn edges
  197. this.body.edges = {};
  198. // TODO: is this null or undefined or false?
  199. if (this.body.data.edges) {
  200. // subscribe to new dataset
  201. util.forEach(this.edgesListeners, (callback, event) => {this.body.data.edges.on(event, callback);});
  202. // draw all new nodes
  203. var ids = this.body.data.edges.getIds();
  204. this.add(ids, true);
  205. }
  206. if (doNotEmit === false) {
  207. this.body.emitter.emit("_dataChanged");
  208. }
  209. }
  210. /**
  211. * Add edges
  212. * @param {Number[] | String[]} ids
  213. * @private
  214. */
  215. add(ids, doNotEmit = false) {
  216. var edges = this.body.edges;
  217. var edgesData = this.body.data.edges;
  218. for (let i = 0; i < ids.length; i++) {
  219. var id = ids[i];
  220. var oldEdge = edges[id];
  221. if (oldEdge) {
  222. oldEdge.disconnect();
  223. }
  224. var data = edgesData.get(id, {"showInternalIds" : true});
  225. edges[id] = this.create(data);
  226. }
  227. if (doNotEmit === false) {
  228. this.body.emitter.emit("_dataChanged");
  229. }
  230. }
  231. /**
  232. * Update existing edges, or create them when not yet existing
  233. * @param {Number[] | String[]} ids
  234. * @private
  235. */
  236. update(ids) {
  237. var edges = this.body.edges;
  238. var edgesData = this.body.data.edges;
  239. var dataChanged = false;
  240. for (var i = 0; i < ids.length; i++) {
  241. var id = ids[i];
  242. var data = edgesData.get(id);
  243. var edge = edges[id];
  244. if (edge !== undefined) {
  245. // update edge
  246. edge.disconnect();
  247. dataChanged = edge.setOptions(data) || dataChanged; // if a support node is added, data can be changed.
  248. edge.connect();
  249. }
  250. else {
  251. // create edge
  252. this.body.edges[id] = this.create(data);
  253. dataChanged = true;
  254. }
  255. }
  256. if (dataChanged === true) {
  257. this.body.emitter.emit("_dataChanged");
  258. }
  259. else {
  260. this.body.emitter.emit("_dataUpdated");
  261. }
  262. }
  263. /**
  264. * Remove existing edges. Non existing ids will be ignored
  265. * @param {Number[] | String[]} ids
  266. * @private
  267. */
  268. remove(ids) {
  269. var edges = this.body.edges;
  270. for (var i = 0; i < ids.length; i++) {
  271. var id = ids[i];
  272. var edge = edges[id];
  273. if (edge !== undefined) {
  274. edge.edgeType.cleanup();
  275. edge.disconnect();
  276. delete edges[id];
  277. }
  278. }
  279. this.body.emitter.emit("_dataChanged");
  280. }
  281. refresh() {
  282. let edges = this.body.edges;
  283. for (let edgeId in edges) {
  284. let edge = undefined;
  285. if (edges.hasOwnProperty(edgeId)) {
  286. edge = edges[edgeId];
  287. }
  288. let data = this.body.data.edges._data[edgeId];
  289. if (edge !== undefined && data !== undefined) {
  290. edge.setOptions(data);
  291. }
  292. }
  293. }
  294. create(properties) {
  295. return new Edge(properties, this.body, this.options)
  296. }
  297. markAllEdgesAsDirty() {
  298. for (var edgeId in this.body.edges) {
  299. this.body.edges[edgeId].edgeType.colorDirty = true;
  300. }
  301. }
  302. /**
  303. * Reconnect all edges
  304. * @private
  305. */
  306. reconnectEdges() {
  307. var id;
  308. var nodes = this.body.nodes;
  309. var edges = this.body.edges;
  310. for (id in nodes) {
  311. if (nodes.hasOwnProperty(id)) {
  312. nodes[id].edges = [];
  313. }
  314. }
  315. for (id in edges) {
  316. if (edges.hasOwnProperty(id)) {
  317. var edge = edges[id];
  318. edge.from = null;
  319. edge.to = null;
  320. edge.connect();
  321. }
  322. }
  323. }
  324. getConnectedNodes(edgeId) {
  325. let nodeList = [];
  326. if (this.body.edges[edgeId] !== undefined) {
  327. let edge = this.body.edges[edgeId];
  328. if (edge.fromId) {nodeList.push(edge.fromId);}
  329. if (edge.toId) {nodeList.push(edge.toId);}
  330. }
  331. return nodeList;
  332. }
  333. }
  334. export default EdgesHandler;