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.

255 lines
6.1 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. }
  93. setOptions(options) {
  94. if (options) {
  95. if (options.color !== undefined) {
  96. if (util.isString(options.color)) {
  97. util.assignAllKeys(this.options.color, options.color);
  98. }
  99. else {
  100. util.extend(this.options.color, options.color);
  101. }
  102. this.options.color.inherit.enabled = false;
  103. }
  104. }
  105. }
  106. /**
  107. * Load edges by reading the data table
  108. * @param {Array | DataSet | DataView} edges The data containing the edges.
  109. * @private
  110. * @private
  111. */
  112. setData(edges, doNotEmit = false) {
  113. var oldEdgesData = this.body.data.edges;
  114. if (edges instanceof DataSet || edges instanceof DataView) {
  115. this.body.data.edges = edges;
  116. }
  117. else if (Array.isArray(edges)) {
  118. this.body.data.edges = new DataSet();
  119. this.body.data.edges.add(edges);
  120. }
  121. else if (!edges) {
  122. this.body.data.edges = new DataSet();
  123. }
  124. else {
  125. throw new TypeError('Array or DataSet expected');
  126. }
  127. // TODO: is this null or undefined or false?
  128. if (oldEdgesData) {
  129. // unsubscribe from old dataset
  130. util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);});
  131. }
  132. // remove drawn edges
  133. this.body.edges = {};
  134. // TODO: is this null or undefined or false?
  135. if (this.body.data.edges) {
  136. // subscribe to new dataset
  137. util.forEach(this.edgesListeners, (callback, event) => {this.body.data.edges.on(event, callback);});
  138. // draw all new nodes
  139. var ids = this.body.data.edges.getIds();
  140. this.add(ids, true);
  141. }
  142. if (doNotEmit === false) {
  143. this.body.emitter.emit("_dataChanged");
  144. }
  145. }
  146. /**
  147. * Add edges
  148. * @param {Number[] | String[]} ids
  149. * @private
  150. */
  151. add(ids, doNotEmit = false) {
  152. var edges = this.body.edges;
  153. var edgesData = this.body.data.edges;
  154. for (let i = 0; i < ids.length; i++) {
  155. var id = ids[i];
  156. var oldEdge = edges[id];
  157. if (oldEdge) {
  158. oldEdge.disconnect();
  159. }
  160. var data = edgesData.get(id, {"showInternalIds" : true});
  161. edges[id] = this.create(data);
  162. }
  163. if (doNotEmit === false) {
  164. this.body.emitter.emit("_dataChanged");
  165. }
  166. }
  167. /**
  168. * Update existing edges, or create them when not yet existing
  169. * @param {Number[] | String[]} ids
  170. * @private
  171. */
  172. update(ids) {
  173. var edges = this.body.edges;
  174. var edgesData = this.body.data.edges;
  175. var dataChanged = false;
  176. for (var i = 0; i < ids.length; i++) {
  177. var id = ids[i];
  178. var data = edgesData.get(id);
  179. var edge = edges[id];
  180. if (edge === null) {
  181. // update edge
  182. edge.disconnect();
  183. dataChanged = edge.setOptions(data) || dataChanged; // if a support node is added, data can be changed.
  184. edge.connect();
  185. }
  186. else {
  187. // create edge
  188. this.body.edges[id] = this.create(data);
  189. dataChanged = true;
  190. }
  191. }
  192. if (dataChanged === true) {
  193. this.body.emitter.emit("_dataChanged");
  194. }
  195. else {
  196. this.body.emitter.emit("_dataUpdated");
  197. }
  198. }
  199. /**
  200. * Remove existing edges. Non existing ids will be ignored
  201. * @param {Number[] | String[]} ids
  202. * @private
  203. */
  204. remove(ids) {
  205. var edges = this.body.edges;
  206. for (var i = 0; i < ids.length; i++) {
  207. var id = ids[i];
  208. var edge = edges[id];
  209. if (edge !== undefined) {
  210. if (edge.via != null) {
  211. delete this.body.supportNodes[edge.via.id];
  212. }
  213. edge.disconnect();
  214. delete edges[id];
  215. }
  216. }
  217. this.body.emitter.emit("_dataChanged");
  218. }
  219. create(properties) {
  220. return new Edge(properties, this.body, this.options)
  221. }
  222. }
  223. export default EdgesHandler;