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.

239 lines
5.6 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. level: undefined,
  61. mass: 1,
  62. physics: true,
  63. scaling: {
  64. min: 10,
  65. max: 40,
  66. label: {
  67. enabled: true,
  68. min: 14,
  69. max: 30,
  70. maxVisible: 30,
  71. drawThreshold: 3
  72. },
  73. customScalingFunction: function (min,max,total,value) {
  74. if (max == min) {
  75. return 0.5;
  76. }
  77. else {
  78. var scale = 1 / (max - min);
  79. return Math.max(0,(value - min)*scale);
  80. }
  81. }
  82. },
  83. shape: 'ellipse',
  84. size: 25,
  85. value: 1,
  86. x: undefined,
  87. y: undefined
  88. };
  89. util.extend(this.options, this.defaultOptions);
  90. }
  91. setOptions(options) {
  92. if (options) {
  93. util.selectiveNotDeepExtend(['color'], this.options, options);
  94. if (options.color) {
  95. this.options.color = util.parseColor(options.color);
  96. }
  97. }
  98. }
  99. /**
  100. * Set a data set with nodes for the network
  101. * @param {Array | DataSet | DataView} nodes The data containing the nodes.
  102. * @private
  103. */
  104. setData(nodes, doNotEmit = false) {
  105. var oldNodesData = this.body.data.nodes;
  106. if (nodes instanceof DataSet || nodes instanceof DataView) {
  107. this.body.data.nodes = nodes;
  108. }
  109. else if (Array.isArray(nodes)) {
  110. this.body.data.nodes = new DataSet();
  111. this.body.data.nodes.add(nodes);
  112. }
  113. else if (!nodes) {
  114. this.body.data.nodes = new DataSet();
  115. }
  116. else {
  117. throw new TypeError('Array or DataSet expected');
  118. }
  119. if (oldNodesData) {
  120. // unsubscribe from old dataset
  121. util.forEach(this.nodesListeners, function (callback, event) {
  122. oldNodesData.off(event, callback);
  123. });
  124. }
  125. // remove drawn nodes
  126. this.body.nodes = {};
  127. if (this.body.data.nodes) {
  128. // subscribe to new dataset
  129. var me = this;
  130. util.forEach(this.nodesListeners, function (callback, event) {
  131. me.body.data.nodes.on(event, callback);
  132. });
  133. // draw all new nodes
  134. var ids = this.body.data.nodes.getIds();
  135. this.add(ids, true);
  136. }
  137. if (doNotEmit === false) {
  138. this.body.emitter.emit("_dataChanged");
  139. }
  140. }
  141. /**
  142. * Add nodes
  143. * @param {Number[] | String[]} ids
  144. * @private
  145. */
  146. add(ids, doNotEmit = false) {
  147. var id;
  148. var newNodes = [];
  149. for (var i = 0; i < ids.length; i++) {
  150. id = ids[i];
  151. var properties = this.body.data.nodes.get(id);
  152. var node = this.create(properties);;
  153. newNodes.push(node);
  154. this.body.nodes[id] = node; // note: this may replace an existing node
  155. }
  156. this.layoutEngine.positionInitially(newNodes);
  157. if (doNotEmit === false) {
  158. this.body.emitter.emit("_dataChanged");
  159. }
  160. }
  161. /**
  162. * Update existing nodes, or create them when not yet existing
  163. * @param {Number[] | String[]} ids
  164. * @private
  165. */
  166. update(ids, changedData) {
  167. var nodes = this.body.nodes;
  168. var dataChanged = false;
  169. for (var i = 0; i < ids.length; i++) {
  170. var id = ids[i];
  171. var node = nodes[id];
  172. var data = changedData[i];
  173. if (node !== undefined) {
  174. // update node
  175. node.setOptions(data, this.constants);
  176. }
  177. else {
  178. dataChanged = true;
  179. // create node
  180. node = this.create(properties);
  181. nodes[id] = node;
  182. }
  183. }
  184. if (dataChanged === true) {
  185. this.body.emitter.emit("_dataChanged");
  186. }
  187. else {
  188. this.body.emitter.emit("_dataUpdated");
  189. }
  190. }
  191. /**
  192. * Remove existing nodes. If nodes do not exist, the method will just ignore it.
  193. * @param {Number[] | String[]} ids
  194. * @private
  195. */
  196. remove(ids) {
  197. var nodes = this.body.nodes;
  198. for (let i = 0; i < ids.length; i++) {
  199. var id = ids[i];
  200. delete nodes[id];
  201. }
  202. this.body.emitter.emit("_dataChanged");
  203. }
  204. create(properties, constructorClass = Node) {
  205. return new constructorClass(properties, this.body, this.images, this.groups, this.options)
  206. }
  207. }
  208. export default NodesHandler;