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.

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