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.

225 lines
5.2 KiB

9 years ago
9 years ago
  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. import Node from "./components/Node";
  8. class NodesHandler {
  9. constructor(body, images, groups, layoutEngine) {
  10. this.body = body;
  11. this.images = images;
  12. this.groups = groups;
  13. this.layoutEngine = layoutEngine;
  14. // create the node API in the body container
  15. this.body.functions.createNode = this.create.bind(this);
  16. this.nodesListeners = {
  17. 'add': (event, params) => {this.add(params.items);},
  18. 'update': (event, params) => {this.update(params.items, params.data);},
  19. 'remove': (event, params) => {this.remove(params.items);}
  20. };
  21. this.options = {};
  22. this.defaultOptions = {
  23. borderWidth: 1,
  24. borderWidthSelected: undefined,
  25. color: {
  26. border: '#2B7CE9',
  27. background: '#97C2FC',
  28. highlight: {
  29. border: '#2B7CE9',
  30. background: '#D2E5FF'
  31. },
  32. hover: {
  33. border: '#2B7CE9',
  34. background: '#D2E5FF'
  35. }
  36. },
  37. fixed: {
  38. x:false,
  39. y:false
  40. },
  41. font: {
  42. color: '#343434',
  43. size: 14, // px
  44. face: 'arial',
  45. background: 'none',
  46. stroke: 0, // px
  47. strokeColor: 'white',
  48. align: 'horizontal'
  49. },
  50. group: undefined,
  51. hidden: false,
  52. icon: {
  53. fontFace: undefined, //'FontAwesome',
  54. code: undefined, //'\uf007',
  55. size: undefined, //50,
  56. color: undefined //'#aa00ff'
  57. },
  58. image: undefined, // --> URL
  59. label: undefined,
  60. mass: 1,
  61. physics: true,
  62. scaling: {
  63. min: 10,
  64. max: 40,
  65. label: {
  66. enabled: true,
  67. min: 14,
  68. max: 30,
  69. maxVisible: 30,
  70. drawThreshold: 3
  71. },
  72. customScalingFunction: function (min,max,total,value) {
  73. if (max == min) {
  74. return 0.5;
  75. }
  76. else {
  77. var scale = 1 / (max - min);
  78. return Math.max(0,(value - min)*scale);
  79. }
  80. }
  81. },
  82. shape: 'ellipse',
  83. size: 10,
  84. value: 1
  85. };
  86. util.extend(this.options, this.defaultOptions);
  87. }
  88. setOptions(options) {
  89. }
  90. /**
  91. * Set a data set with nodes for the network
  92. * @param {Array | DataSet | DataView} nodes The data containing the nodes.
  93. * @private
  94. */
  95. setData(nodes) {
  96. var oldNodesData = this.body.data.nodes;
  97. if (nodes instanceof DataSet || nodes instanceof DataView) {
  98. this.body.data.nodes = nodes;
  99. }
  100. else if (Array.isArray(nodes)) {
  101. this.body.data.nodes = new DataSet();
  102. this.body.data.nodes.add(nodes);
  103. }
  104. else if (!nodes) {
  105. this.body.data.nodes = new DataSet();
  106. }
  107. else {
  108. throw new TypeError('Array or DataSet expected');
  109. }
  110. if (oldNodesData) {
  111. // unsubscribe from old dataset
  112. util.forEach(this.nodesListeners, function (callback, event) {
  113. oldNodesData.off(event, callback);
  114. });
  115. }
  116. // remove drawn nodes
  117. this.body.nodes = {};
  118. if (this.body.data.nodes) {
  119. // subscribe to new dataset
  120. var me = this;
  121. util.forEach(this.nodesListeners, function (callback, event) {
  122. me.body.data.nodes.on(event, callback);
  123. });
  124. // draw all new nodes
  125. var ids = this.body.data.nodes.getIds();
  126. this.add(ids);
  127. }
  128. this.body.emitter.emit("_dataChanged");
  129. }
  130. /**
  131. * Add nodes
  132. * @param {Number[] | String[]} ids
  133. * @private
  134. */
  135. add(ids) {
  136. var id;
  137. var newNodes = [];
  138. for (var i = 0; i < ids.length; i++) {
  139. id = ids[i];
  140. var properties = this.body.data.nodes.get(id);
  141. var node = this.create(properties);;
  142. newNodes.push(node);
  143. this.body.nodes[id] = node; // note: this may replace an existing node
  144. }
  145. this.layoutEngine.positionInitially(newNodes);
  146. this.body.emitter.emit("_dataChanged");
  147. }
  148. /**
  149. * Update existing nodes, or create them when not yet existing
  150. * @param {Number[] | String[]} ids
  151. * @private
  152. */
  153. update(ids, changedData) {
  154. var nodes = this.body.nodes;
  155. var dataChanged = false;
  156. for (var i = 0; i < ids.length; i++) {
  157. var id = ids[i];
  158. var node = nodes[id];
  159. var data = changedData[i];
  160. if (node !== undefined) {
  161. // update node
  162. node.setOptions(data, this.constants);
  163. }
  164. else {
  165. dataChanged = true;
  166. // create node
  167. node = this.create(properties);
  168. nodes[id] = node;
  169. }
  170. }
  171. if (dataChanged === true) {
  172. this.body.emitter.emit("_dataChanged");
  173. }
  174. else {
  175. this.body.emitter.emit("_dataUpdated");
  176. }
  177. }
  178. /**
  179. * Remove existing nodes. If nodes do not exist, the method will just ignore it.
  180. * @param {Number[] | String[]} ids
  181. * @private
  182. */
  183. remove(ids) {
  184. var nodes = this.body.nodes;
  185. for (let i = 0; i < ids.length; i++) {
  186. var id = ids[i];
  187. delete nodes[id];
  188. }
  189. this.body.emitter.emit("_dataChanged");
  190. }
  191. create(properties, constructorClass = Node) {
  192. return new constructorClass(properties, this.body, this.images, this.groups, this.options)
  193. }
  194. }
  195. export default NodesHandler;