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.

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