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.

218 lines
5.0 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. customScalingFunction: function (min,max,total,value) {
  23. if (max == min) {
  24. return 0.5;
  25. }
  26. else {
  27. var scale = 1 / (max - min);
  28. return Math.max(0,(value - min)*scale);
  29. }
  30. },
  31. widthMin: 1, //
  32. widthMax: 15,//
  33. width: 1,
  34. widthSelectionMultiplier: 2,
  35. hoverWidth: 1.5,
  36. value:1,
  37. style: 'line',
  38. color: {
  39. color:'#848484',
  40. highlight:'#848484',
  41. hover: '#848484'
  42. },
  43. opacity:1.0,
  44. fontColor: '#343434',
  45. fontSize: 14, // px
  46. fontFace: 'arial',
  47. fontFill: 'white',
  48. fontStrokeWidth: 0, // px
  49. fontStrokeColor: 'white',
  50. labelAlignment:'horizontal',
  51. arrowScaleFactor: 1,
  52. dash: {
  53. length: 10,
  54. gap: 5,
  55. altLength: undefined
  56. },
  57. inheritColor: "from", // to, from, false, true (== from)
  58. useGradients: false, // release in 4.0
  59. smooth: {
  60. enabled: true,
  61. dynamic: true,
  62. type: "continuous",
  63. roundness: 0.5
  64. },
  65. hidden: false,
  66. physics: true
  67. };
  68. util.extend(this.options, this.defaultOptions);
  69. }
  70. setOptions(options) {
  71. }
  72. /**
  73. * Load edges by reading the data table
  74. * @param {Array | DataSet | DataView} edges The data containing the edges.
  75. * @private
  76. * @private
  77. */
  78. setData(edges) {
  79. var oldEdgesData = this.body.data.edges;
  80. if (edges instanceof DataSet || edges instanceof DataView) {
  81. this.body.data.edges = edges;
  82. }
  83. else if (Array.isArray(edges)) {
  84. this.body.data.edges = new DataSet();
  85. this.body.data.edges.add(edges);
  86. }
  87. else if (!edges) {
  88. this.body.data.edges = new DataSet();
  89. }
  90. else {
  91. throw new TypeError('Array or DataSet expected');
  92. }
  93. // TODO: is this null or undefined or false?
  94. if (oldEdgesData) {
  95. // unsubscribe from old dataset
  96. util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);});
  97. }
  98. // remove drawn edges
  99. this.body.edges = {};
  100. // TODO: is this null or undefined or false?
  101. if (this.body.data.edges) {
  102. // subscribe to new dataset
  103. util.forEach(this.edgesListeners, (callback, event) => {this.body.data.edges.on(event, callback);});
  104. // draw all new nodes
  105. var ids = this.body.data.edges.getIds();
  106. this.add(ids);
  107. }
  108. this.body.emitter.emit("_dataChanged");
  109. }
  110. /**
  111. * Add edges
  112. * @param {Number[] | String[]} ids
  113. * @private
  114. */
  115. add(ids) {
  116. var edges = this.body.edges;
  117. var edgesData = this.body.data.edges;
  118. for (let i = 0; i < ids.length; i++) {
  119. var id = ids[i];
  120. var oldEdge = edges[id];
  121. if (oldEdge) {
  122. oldEdge.disconnect();
  123. }
  124. var data = edgesData.get(id, {"showInternalIds" : true});
  125. edges[id] = this.create(data);
  126. }
  127. this.body.emitter.emit("_dataChanged");
  128. }
  129. /**
  130. * Update existing edges, or create them when not yet existing
  131. * @param {Number[] | String[]} ids
  132. * @private
  133. */
  134. update(ids) {
  135. var edges = this.body.edges;
  136. var edgesData = this.body.data.edges;
  137. var dataChanged = false;
  138. for (var i = 0; i < ids.length; i++) {
  139. var id = ids[i];
  140. var data = edgesData.get(id);
  141. var edge = edges[id];
  142. if (edge === null) {
  143. // update edge
  144. edge.disconnect();
  145. edge.setOptions(data);
  146. edge.connect();
  147. }
  148. else {
  149. // create edge
  150. this.body.edges[id] = this.create(data);
  151. dataChanged = true;
  152. }
  153. }
  154. if (dataChanged === true) {
  155. this.body.emitter.emit("_dataChanged");
  156. }
  157. else {
  158. this.body.emitter.emit("_dataUpdated");
  159. }
  160. }
  161. /**
  162. * Remove existing edges. Non existing ids will be ignored
  163. * @param {Number[] | String[]} ids
  164. * @private
  165. */
  166. remove(ids) {
  167. var edges = this.body.edges;
  168. for (var i = 0; i < ids.length; i++) {
  169. var id = ids[i];
  170. var edge = edges[id];
  171. if (edge !== undefined) {
  172. if (edge.via != null) {
  173. delete this.body.supportNodes[edge.via.id];
  174. }
  175. edge.disconnect();
  176. delete edges[id];
  177. }
  178. }
  179. this.body.emitter.emit("_dataChanged");
  180. }
  181. create(properties) {
  182. return new Edge(properties, this.body, this.options)
  183. }
  184. }
  185. export default EdgesHandler;