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.

288 lines
7.2 KiB

  1. /**
  2. * Created by Alex on 3/4/2015.
  3. */
  4. var util = require("../../util");
  5. var DataSet = require('../../DataSet');
  6. var DataView = require('../../DataView');
  7. var Edge = require("./components/Edge");
  8. class EdgesHandler {
  9. constructor(body, images, groups) {
  10. this.body = body;
  11. this.images = images;
  12. this.groups = groups;
  13. // create the edge API in the body container
  14. this.body.functions.createEdge = this.create.bind(this);
  15. this.edgesListeners = {
  16. 'add': (event, params) => {this.add(params.items);},
  17. 'update': (event, params) => {this.update(params.items);},
  18. 'remove': (event, params) => {this.remove(params.items);}
  19. };
  20. this.options = {};
  21. this.defaultOptions = {
  22. arrows: {
  23. to: {enabled: false, scaleFactor:1}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
  24. middle: {enabled: false, scaleFactor:1},
  25. from: {enabled: false, scaleFactor:1}
  26. },
  27. color: {
  28. color:'#848484',
  29. highlight:'#848484',
  30. hover: '#848484',
  31. inherit: {
  32. enabled: true,
  33. source: 'from', // from / true
  34. useGradients: false // release in 4.0
  35. },
  36. opacity:1.0
  37. },
  38. dashes:{
  39. enabled: false,
  40. preset: 'dotted',
  41. length: 10,
  42. gap: 5,
  43. altLength: undefined
  44. },
  45. font: {
  46. color: '#343434',
  47. size: 14, // px
  48. face: 'arial',
  49. background: 'none',
  50. stroke: 1, // px
  51. strokeColor: 'white',
  52. align:'horizontal'
  53. },
  54. hidden: false,
  55. hoverWidth: 1.5,
  56. label: undefined,
  57. length: undefined,
  58. physics: true,
  59. scaling:{
  60. min: 1,
  61. max: 15,
  62. label: {
  63. enabled: true,
  64. min: 14,
  65. max: 30,
  66. maxVisible: 30,
  67. drawThreshold: 3
  68. },
  69. customScalingFunction: function (min,max,total,value) {
  70. if (max == min) {
  71. return 0.5;
  72. }
  73. else {
  74. var scale = 1 / (max - min);
  75. return Math.max(0,(value - min)*scale);
  76. }
  77. }
  78. },
  79. selfReferenceSize:20,
  80. smooth: {
  81. enabled: true,
  82. dynamic: true,
  83. type: "continuous",
  84. roundness: 0.5
  85. },
  86. title:undefined,
  87. width: 1,
  88. widthSelectionMultiplier: 2,
  89. value:1
  90. };
  91. util.extend(this.options, this.defaultOptions);
  92. // this allows external modules to force all dynamic curves to turn static.
  93. this.body.emitter.on("_forceDisableDynamicCurves", (type) => {
  94. let emitChange = false;
  95. for (let edgeId in this.body.edges) {
  96. if (this.body.edges.hasOwnProperty(edgeId)) {
  97. let edgeOptions = this.body.edges[edgeId].options.smooth;
  98. if (edgeOptions.enabled === true && edgeOptions.dynamic === true) {
  99. if (type === undefined) {
  100. edge.setOptions({smooth:false});
  101. }
  102. else {
  103. edge.setOptions({smooth:{dynamic:false, type:type}});
  104. }
  105. emitChange = true;
  106. }
  107. }
  108. }
  109. if (emitChange === true) {
  110. this.body.emitter.emit("_dataChanged");
  111. }
  112. })
  113. }
  114. setOptions(options) {
  115. if (options !== undefined) {
  116. if (options.color !== undefined) {
  117. if (util.isString(options.color)) {
  118. util.assignAllKeys(this.options.color, options.color);
  119. }
  120. else {
  121. util.extend(this.options.color, options.color);
  122. }
  123. this.options.color.inherit.enabled = false;
  124. }
  125. util.mergeOptions(this.options, options, 'smooth');
  126. util.mergeOptions(this.options, options, 'dashes');
  127. if (options.arrows !== undefined) {
  128. util.mergeOptions(this.options.arrows, options.arrows, 'to');
  129. util.mergeOptions(this.options.arrows, options.arrows, 'middle');
  130. util.mergeOptions(this.options.arrows, options.arrows, 'from');
  131. }
  132. }
  133. }
  134. /**
  135. * Load edges by reading the data table
  136. * @param {Array | DataSet | DataView} edges The data containing the edges.
  137. * @private
  138. * @private
  139. */
  140. setData(edges, doNotEmit = false) {
  141. var oldEdgesData = this.body.data.edges;
  142. if (edges instanceof DataSet || edges instanceof DataView) {
  143. this.body.data.edges = edges;
  144. }
  145. else if (Array.isArray(edges)) {
  146. this.body.data.edges = new DataSet();
  147. this.body.data.edges.add(edges);
  148. }
  149. else if (!edges) {
  150. this.body.data.edges = new DataSet();
  151. }
  152. else {
  153. throw new TypeError('Array or DataSet expected');
  154. }
  155. // TODO: is this null or undefined or false?
  156. if (oldEdgesData) {
  157. // unsubscribe from old dataset
  158. util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);});
  159. }
  160. // remove drawn edges
  161. this.body.edges = {};
  162. // TODO: is this null or undefined or false?
  163. if (this.body.data.edges) {
  164. // subscribe to new dataset
  165. util.forEach(this.edgesListeners, (callback, event) => {this.body.data.edges.on(event, callback);});
  166. // draw all new nodes
  167. var ids = this.body.data.edges.getIds();
  168. this.add(ids, true);
  169. }
  170. if (doNotEmit === false) {
  171. this.body.emitter.emit("_dataChanged");
  172. }
  173. }
  174. /**
  175. * Add edges
  176. * @param {Number[] | String[]} ids
  177. * @private
  178. */
  179. add(ids, doNotEmit = false) {
  180. var edges = this.body.edges;
  181. var edgesData = this.body.data.edges;
  182. for (let i = 0; i < ids.length; i++) {
  183. var id = ids[i];
  184. var oldEdge = edges[id];
  185. if (oldEdge) {
  186. oldEdge.disconnect();
  187. }
  188. var data = edgesData.get(id, {"showInternalIds" : true});
  189. edges[id] = this.create(data);
  190. }
  191. if (doNotEmit === false) {
  192. this.body.emitter.emit("_dataChanged");
  193. }
  194. }
  195. /**
  196. * Update existing edges, or create them when not yet existing
  197. * @param {Number[] | String[]} ids
  198. * @private
  199. */
  200. update(ids) {
  201. var edges = this.body.edges;
  202. var edgesData = this.body.data.edges;
  203. var dataChanged = false;
  204. for (var i = 0; i < ids.length; i++) {
  205. var id = ids[i];
  206. var data = edgesData.get(id);
  207. var edge = edges[id];
  208. if (edge === null) {
  209. // update edge
  210. edge.disconnect();
  211. dataChanged = edge.setOptions(data) || dataChanged; // if a support node is added, data can be changed.
  212. edge.connect();
  213. }
  214. else {
  215. // create edge
  216. this.body.edges[id] = this.create(data);
  217. dataChanged = true;
  218. }
  219. }
  220. if (dataChanged === true) {
  221. this.body.emitter.emit("_dataChanged");
  222. }
  223. else {
  224. this.body.emitter.emit("_dataUpdated");
  225. }
  226. }
  227. /**
  228. * Remove existing edges. Non existing ids will be ignored
  229. * @param {Number[] | String[]} ids
  230. * @private
  231. */
  232. remove(ids) {
  233. var edges = this.body.edges;
  234. for (var i = 0; i < ids.length; i++) {
  235. var id = ids[i];
  236. var edge = edges[id];
  237. if (edge !== undefined) {
  238. if (edge.via != null) {
  239. delete this.body.supportNodes[edge.via.id];
  240. }
  241. edge.disconnect();
  242. delete edges[id];
  243. }
  244. }
  245. this.body.emitter.emit("_dataChanged");
  246. }
  247. create(properties) {
  248. return new Edge(properties, this.body, this.options)
  249. }
  250. }
  251. export default EdgesHandler;