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.

341 lines
8.5 KiB

  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: {
  30. enabled: true,
  31. source: 'from', // from / true
  32. useGradients: false // release in 4.0
  33. },
  34. opacity:1.0
  35. },
  36. dashes:{
  37. enabled: false,
  38. preset: 'dotted',
  39. length: 10,
  40. gap: 5,
  41. altLength: undefined
  42. },
  43. font: {
  44. color: '#343434',
  45. size: 14, // px
  46. face: 'arial',
  47. background: 'none',
  48. stroke: 1, // px
  49. strokeColor: '#ffffff',
  50. align:'horizontal'
  51. },
  52. hidden: false,
  53. hoverWidth: 1.5,
  54. label: undefined,
  55. length: undefined,
  56. physics: true,
  57. scaling:{
  58. min: 1,
  59. max: 15,
  60. label: {
  61. enabled: true,
  62. min: 14,
  63. max: 30,
  64. maxVisible: 30,
  65. drawThreshold: 3
  66. },
  67. customScalingFunction: function (min,max,total,value) {
  68. if (max === min) {
  69. return 0.5;
  70. }
  71. else {
  72. var scale = 1 / (max - min);
  73. return Math.max(0,(value - min)*scale);
  74. }
  75. }
  76. },
  77. selfReferenceSize:20,
  78. smooth: {
  79. enabled: true,
  80. dynamic: true,
  81. type: "continuous",
  82. roundness: 0.5
  83. },
  84. title:undefined,
  85. width: 1,
  86. widthSelectionMultiplier: 2,
  87. value: undefined
  88. };
  89. util.extend(this.options, this.defaultOptions);
  90. // this allows external modules to force all dynamic curves to turn static.
  91. this.body.emitter.on("_forceDisableDynamicCurves", (type) => {
  92. let emitChange = false;
  93. for (let edgeId in this.body.edges) {
  94. if (this.body.edges.hasOwnProperty(edgeId)) {
  95. let edgeOptions = this.body.edges[edgeId].options.smooth;
  96. if (edgeOptions.enabled === true && edgeOptions.dynamic === true) {
  97. if (type === undefined) {
  98. edge.setOptions({smooth:false});
  99. }
  100. else {
  101. edge.setOptions({smooth:{dynamic:false, type:type}});
  102. }
  103. emitChange = true;
  104. }
  105. }
  106. }
  107. if (emitChange === true) {
  108. this.body.emitter.emit("_dataChanged");
  109. }
  110. });
  111. // this is called when options of EXISTING nodes or edges have changed.
  112. this.body.emitter.on("_dataUpdated", () => {
  113. this.reconnectEdges();
  114. this.markAllEdgesAsDirty();
  115. });
  116. }
  117. setOptions(options) {
  118. if (options !== undefined) {
  119. // use the parser from the Edge class to fill in all shorthand notations
  120. Edge.parseOptions(this.options, options);
  121. // hanlde multiple input cases for color
  122. if (options.color !== undefined) {
  123. this.markAllEdgesAsDirty();
  124. }
  125. // update smooth settings in all edges
  126. let dataChanged = false;
  127. if (options.smooth !== undefined) {
  128. for (let edgeId in this.body.edges) {
  129. if (this.body.edges.hasOwnProperty(edgeId)) {
  130. dataChanged = this.body.edges[edgeId].updateEdgeType() || dataChanged;
  131. }
  132. }
  133. }
  134. // update fonts in all edges
  135. if (options.font !== undefined) {
  136. // use the parser from the Label class to fill in all shorthand notations
  137. Label.parseOptions(this.options,options);
  138. for (let edgeId in this.body.edges) {
  139. if (this.body.edges.hasOwnProperty(edgeId)) {
  140. this.body.edges[edgeId].updateLabelModule();
  141. }
  142. }
  143. }
  144. // update the state of the variables if needed
  145. if (options.hidden !== undefined || options.physics !== undefined || dataChanged === true) {
  146. this.body.emitter.emit('_dataChanged');
  147. }
  148. }
  149. }
  150. /**
  151. * Load edges by reading the data table
  152. * @param {Array | DataSet | DataView} edges The data containing the edges.
  153. * @private
  154. * @private
  155. */
  156. setData(edges, doNotEmit = false) {
  157. var oldEdgesData = this.body.data.edges;
  158. if (edges instanceof DataSet || edges instanceof DataView) {
  159. this.body.data.edges = edges;
  160. }
  161. else if (Array.isArray(edges)) {
  162. this.body.data.edges = new DataSet();
  163. this.body.data.edges.add(edges);
  164. }
  165. else if (!edges) {
  166. this.body.data.edges = new DataSet();
  167. }
  168. else {
  169. throw new TypeError('Array or DataSet expected');
  170. }
  171. // TODO: is this null or undefined or false?
  172. if (oldEdgesData) {
  173. // unsubscribe from old dataset
  174. util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);});
  175. }
  176. // remove drawn edges
  177. this.body.edges = {};
  178. // TODO: is this null or undefined or false?
  179. if (this.body.data.edges) {
  180. // subscribe to new dataset
  181. util.forEach(this.edgesListeners, (callback, event) => {this.body.data.edges.on(event, callback);});
  182. // draw all new nodes
  183. var ids = this.body.data.edges.getIds();
  184. this.add(ids, true);
  185. }
  186. if (doNotEmit === false) {
  187. this.body.emitter.emit("_dataChanged");
  188. }
  189. }
  190. /**
  191. * Add edges
  192. * @param {Number[] | String[]} ids
  193. * @private
  194. */
  195. add(ids, doNotEmit = false) {
  196. var edges = this.body.edges;
  197. var edgesData = this.body.data.edges;
  198. for (let i = 0; i < ids.length; i++) {
  199. var id = ids[i];
  200. var oldEdge = edges[id];
  201. if (oldEdge) {
  202. oldEdge.disconnect();
  203. }
  204. var data = edgesData.get(id, {"showInternalIds" : true});
  205. edges[id] = this.create(data);
  206. }
  207. if (doNotEmit === false) {
  208. this.body.emitter.emit("_dataChanged");
  209. }
  210. }
  211. /**
  212. * Update existing edges, or create them when not yet existing
  213. * @param {Number[] | String[]} ids
  214. * @private
  215. */
  216. update(ids) {
  217. var edges = this.body.edges;
  218. var edgesData = this.body.data.edges;
  219. var dataChanged = false;
  220. for (var i = 0; i < ids.length; i++) {
  221. var id = ids[i];
  222. var data = edgesData.get(id);
  223. var edge = edges[id];
  224. if (edge === null) {
  225. // update edge
  226. edge.disconnect();
  227. dataChanged = edge.setOptions(data) || dataChanged; // if a support node is added, data can be changed.
  228. edge.connect();
  229. }
  230. else {
  231. // create edge
  232. this.body.edges[id] = this.create(data);
  233. dataChanged = true;
  234. }
  235. }
  236. if (dataChanged === true) {
  237. this.body.emitter.emit("_dataChanged");
  238. }
  239. else {
  240. this.body.emitter.emit("_dataUpdated");
  241. }
  242. }
  243. /**
  244. * Remove existing edges. Non existing ids will be ignored
  245. * @param {Number[] | String[]} ids
  246. * @private
  247. */
  248. remove(ids) {
  249. var edges = this.body.edges;
  250. for (var i = 0; i < ids.length; i++) {
  251. var id = ids[i];
  252. var edge = edges[id];
  253. if (edge !== undefined) {
  254. if (edge.via != null) {
  255. delete this.body.supportNodes[edge.via.id];
  256. }
  257. edge.disconnect();
  258. delete edges[id];
  259. }
  260. }
  261. this.body.emitter.emit("_dataChanged");
  262. }
  263. create(properties) {
  264. return new Edge(properties, this.body, this.options)
  265. }
  266. markAllEdgesAsDirty() {
  267. for (var edgeId in this.body.edges) {
  268. this.body.edges[edgeId].edgeType.colorDirty = true;
  269. }
  270. }
  271. /**
  272. * Reconnect all edges
  273. * @private
  274. */
  275. reconnectEdges() {
  276. var id;
  277. var nodes = this.body.nodes;
  278. var edges = this.body.edges;
  279. for (id in nodes) {
  280. if (nodes.hasOwnProperty(id)) {
  281. nodes[id].edges = [];
  282. }
  283. }
  284. for (id in edges) {
  285. if (edges.hasOwnProperty(id)) {
  286. var edge = edges[id];
  287. edge.from = null;
  288. edge.to = null;
  289. edge.connect();
  290. }
  291. }
  292. }
  293. }
  294. export default EdgesHandler;