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.

977 lines
34 KiB

10 years ago
10 years ago
10 years ago
  1. var util = require('../util');
  2. /**
  3. * @class Node
  4. * A node. A node can be connected to other nodes via one or multiple edges.
  5. * @param {object} properties An object containing properties for the node. All
  6. * properties are optional, except for the id.
  7. * {number} id Id of the node. Required
  8. * {string} label Text label for the node
  9. * {number} x Horizontal position of the node
  10. * {number} y Vertical position of the node
  11. * {string} shape Node shape, available:
  12. * "database", "circle", "ellipse",
  13. * "box", "image", "text", "dot",
  14. * "star", "triangle", "triangleDown",
  15. * "square"
  16. * {string} image An image url
  17. * {string} title An title text, can be HTML
  18. * {anytype} group A group name or number
  19. * @param {Network.Images} imagelist A list with images. Only needed
  20. * when the node has an image
  21. * @param {Network.Groups} grouplist A list with groups. Needed for
  22. * retrieving group properties
  23. * @param {Object} constants An object with default values for
  24. * example for the color
  25. *
  26. */
  27. function Node(properties, imagelist, grouplist, networkConstants) {
  28. var constants = util.selectiveBridgeObject(['nodes'],networkConstants);
  29. this.options = constants.nodes;
  30. this.selected = false;
  31. this.hover = false;
  32. this.edges = []; // all edges connected to this node
  33. this.dynamicEdges = [];
  34. this.reroutedEdges = {};
  35. this.fontDrawThreshold = 3;
  36. // set defaults for the properties
  37. this.id = undefined;
  38. this.x = null;
  39. this.y = null;
  40. this.xFixed = false;
  41. this.yFixed = false;
  42. this.horizontalAlignLeft = true; // these are for the navigation controls
  43. this.verticalAlignTop = true; // these are for the navigation controls
  44. this.baseRadiusValue = networkConstants.nodes.radius;
  45. this.radiusFixed = false;
  46. this.level = -1;
  47. this.preassignedLevel = false;
  48. this.hierarchyEnumerated = false;
  49. this.imagelist = imagelist;
  50. this.grouplist = grouplist;
  51. // physics properties
  52. this.fx = 0.0; // external force x
  53. this.fy = 0.0; // external force y
  54. this.vx = 0.0; // velocity x
  55. this.vy = 0.0; // velocity y
  56. this.damping = networkConstants.physics.damping; // written every time gravity is calculated
  57. this.fixedData = {x:null,y:null};
  58. this.setProperties(properties, constants);
  59. // creating the variables for clustering
  60. this.resetCluster();
  61. this.dynamicEdgesLength = 0;
  62. this.clusterSession = 0;
  63. this.clusterSizeWidthFactor = networkConstants.clustering.nodeScaling.width;
  64. this.clusterSizeHeightFactor = networkConstants.clustering.nodeScaling.height;
  65. this.clusterSizeRadiusFactor = networkConstants.clustering.nodeScaling.radius;
  66. this.maxNodeSizeIncrements = networkConstants.clustering.maxNodeSizeIncrements;
  67. this.growthIndicator = 0;
  68. // variables to tell the node about the network.
  69. this.networkScaleInv = 1;
  70. this.networkScale = 1;
  71. this.canvasTopLeft = {"x": -300, "y": -300};
  72. this.canvasBottomRight = {"x": 300, "y": 300};
  73. this.parentEdgeId = null;
  74. }
  75. /**
  76. * (re)setting the clustering variables and objects
  77. */
  78. Node.prototype.resetCluster = function() {
  79. // clustering variables
  80. this.formationScale = undefined; // this is used to determine when to open the cluster
  81. this.clusterSize = 1; // this signifies the total amount of nodes in this cluster
  82. this.containedNodes = {};
  83. this.containedEdges = {};
  84. this.clusterSessions = [];
  85. };
  86. /**
  87. * Attach a edge to the node
  88. * @param {Edge} edge
  89. */
  90. Node.prototype.attachEdge = function(edge) {
  91. if (this.edges.indexOf(edge) == -1) {
  92. this.edges.push(edge);
  93. }
  94. if (this.dynamicEdges.indexOf(edge) == -1) {
  95. this.dynamicEdges.push(edge);
  96. }
  97. this.dynamicEdgesLength = this.dynamicEdges.length;
  98. };
  99. /**
  100. * Detach a edge from the node
  101. * @param {Edge} edge
  102. */
  103. Node.prototype.detachEdge = function(edge) {
  104. var index = this.edges.indexOf(edge);
  105. if (index != -1) {
  106. this.edges.splice(index, 1);
  107. this.dynamicEdges.splice(index, 1);
  108. }
  109. this.dynamicEdgesLength = this.dynamicEdges.length;
  110. };
  111. /**
  112. * Set or overwrite properties for the node
  113. * @param {Object} properties an object with properties
  114. * @param {Object} constants and object with default, global properties
  115. */
  116. Node.prototype.setProperties = function(properties, constants) {
  117. if (!properties) {
  118. return;
  119. }
  120. var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
  121. 'fontSize','fontFace','fontFill','group','mass'
  122. ];
  123. util.selectiveDeepExtend(fields, this.options, properties);
  124. this.originalLabel = undefined;
  125. // basic properties
  126. if (properties.id !== undefined) {this.id = properties.id;}
  127. if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = properties.label;}
  128. if (properties.title !== undefined) {this.title = properties.title;}
  129. if (properties.x !== undefined) {this.x = properties.x;}
  130. if (properties.y !== undefined) {this.y = properties.y;}
  131. if (properties.value !== undefined) {this.value = properties.value;}
  132. if (properties.level !== undefined) {this.level = properties.level; this.preassignedLevel = true;}
  133. // navigation controls properties
  134. if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
  135. if (properties.verticalAlignTop !== undefined) {this.verticalAlignTop = properties.verticalAlignTop;}
  136. if (properties.triggerFunction !== undefined) {this.triggerFunction = properties.triggerFunction;}
  137. if (this.id === undefined) {
  138. throw "Node must have an id";
  139. }
  140. // copy group properties
  141. if (typeof this.options.group === 'number' || (typeof this.options.group === 'string' && this.options.group != '')) {
  142. var groupObj = this.grouplist.get(this.options.group);
  143. for (var prop in groupObj) {
  144. if (groupObj.hasOwnProperty(prop)) {
  145. this.options[prop] = groupObj[prop];
  146. }
  147. }
  148. }
  149. // individual shape properties
  150. if (properties.radius !== undefined) {this.baseRadiusValue = this.options.radius;}
  151. if (properties.color !== undefined) {this.options.color = util.parseColor(properties.color);}
  152. if (this.options.image!== undefined && this.options.image!= "") {
  153. if (this.imagelist) {
  154. this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
  155. }
  156. else {
  157. throw "No imagelist provided";
  158. }
  159. }
  160. this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
  161. this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
  162. this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
  163. if (this.options.shape == 'image') {
  164. this.options.radiusMin = constants.nodes.widthMin;
  165. this.options.radiusMax = constants.nodes.widthMax;
  166. }
  167. // choose draw method depending on the shape
  168. switch (this.options.shape) {
  169. case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
  170. case 'box': this.draw = this._drawBox; this.resize = this._resizeBox; break;
  171. case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
  172. case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
  173. // TODO: add diamond shape
  174. case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break;
  175. case 'text': this.draw = this._drawText; this.resize = this._resizeText; break;
  176. case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break;
  177. case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break;
  178. case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
  179. case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
  180. case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break;
  181. default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
  182. }
  183. // reset the size of the node, this can be changed
  184. this._reset();
  185. };
  186. /**
  187. * select this node
  188. */
  189. Node.prototype.select = function() {
  190. this.selected = true;
  191. this._reset();
  192. };
  193. /**
  194. * unselect this node
  195. */
  196. Node.prototype.unselect = function() {
  197. this.selected = false;
  198. this._reset();
  199. };
  200. /**
  201. * Reset the calculated size of the node, forces it to recalculate its size
  202. */
  203. Node.prototype.clearSizeCache = function() {
  204. this._reset();
  205. };
  206. /**
  207. * Reset the calculated size of the node, forces it to recalculate its size
  208. * @private
  209. */
  210. Node.prototype._reset = function() {
  211. this.width = undefined;
  212. this.height = undefined;
  213. };
  214. /**
  215. * get the title of this node.
  216. * @return {string} title The title of the node, or undefined when no title
  217. * has been set.
  218. */
  219. Node.prototype.getTitle = function() {
  220. return typeof this.title === "function" ? this.title() : this.title;
  221. };
  222. /**
  223. * Calculate the distance to the border of the Node
  224. * @param {CanvasRenderingContext2D} ctx
  225. * @param {Number} angle Angle in radians
  226. * @returns {number} distance Distance to the border in pixels
  227. */
  228. Node.prototype.distanceToBorder = function (ctx, angle) {
  229. var borderWidth = 1;
  230. if (!this.width) {
  231. this.resize(ctx);
  232. }
  233. switch (this.options.shape) {
  234. case 'circle':
  235. case 'dot':
  236. return this.options.radius+ borderWidth;
  237. case 'ellipse':
  238. var a = this.width / 2;
  239. var b = this.height / 2;
  240. var w = (Math.sin(angle) * a);
  241. var h = (Math.cos(angle) * b);
  242. return a * b / Math.sqrt(w * w + h * h);
  243. // TODO: implement distanceToBorder for database
  244. // TODO: implement distanceToBorder for triangle
  245. // TODO: implement distanceToBorder for triangleDown
  246. case 'box':
  247. case 'image':
  248. case 'text':
  249. default:
  250. if (this.width) {
  251. return Math.min(
  252. Math.abs(this.width / 2 / Math.cos(angle)),
  253. Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
  254. // TODO: reckon with border radius too in case of box
  255. }
  256. else {
  257. return 0;
  258. }
  259. }
  260. // TODO: implement calculation of distance to border for all shapes
  261. };
  262. /**
  263. * Set forces acting on the node
  264. * @param {number} fx Force in horizontal direction
  265. * @param {number} fy Force in vertical direction
  266. */
  267. Node.prototype._setForce = function(fx, fy) {
  268. this.fx = fx;
  269. this.fy = fy;
  270. };
  271. /**
  272. * Add forces acting on the node
  273. * @param {number} fx Force in horizontal direction
  274. * @param {number} fy Force in vertical direction
  275. * @private
  276. */
  277. Node.prototype._addForce = function(fx, fy) {
  278. this.fx += fx;
  279. this.fy += fy;
  280. };
  281. /**
  282. * Perform one discrete step for the node
  283. * @param {number} interval Time interval in seconds
  284. */
  285. Node.prototype.discreteStep = function(interval) {
  286. if (!this.xFixed) {
  287. var dx = this.damping * this.vx; // damping force
  288. var ax = (this.fx - dx) / this.options.mass; // acceleration
  289. this.vx += ax * interval; // velocity
  290. this.x += this.vx * interval; // position
  291. }
  292. if (!this.yFixed) {
  293. var dy = this.damping * this.vy; // damping force
  294. var ay = (this.fy - dy) / this.options.mass; // acceleration
  295. this.vy += ay * interval; // velocity
  296. this.y += this.vy * interval; // position
  297. }
  298. };
  299. /**
  300. * Perform one discrete step for the node
  301. * @param {number} interval Time interval in seconds
  302. * @param {number} maxVelocity The speed limit imposed on the velocity
  303. */
  304. Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
  305. if (!this.xFixed) {
  306. var dx = this.damping * this.vx; // damping force
  307. var ax = (this.fx - dx) / this.options.mass; // acceleration
  308. this.vx += ax * interval; // velocity
  309. this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
  310. this.x += this.vx * interval; // position
  311. }
  312. else {
  313. this.fx = 0;
  314. }
  315. if (!this.yFixed) {
  316. var dy = this.damping * this.vy; // damping force
  317. var ay = (this.fy - dy) / this.options.mass; // acceleration
  318. this.vy += ay * interval; // velocity
  319. this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
  320. this.y += this.vy * interval; // position
  321. }
  322. else {
  323. this.fy = 0;
  324. }
  325. };
  326. /**
  327. * Check if this node has a fixed x and y position
  328. * @return {boolean} true if fixed, false if not
  329. */
  330. Node.prototype.isFixed = function() {
  331. return (this.xFixed && this.yFixed);
  332. };
  333. /**
  334. * Check if this node is moving
  335. * @param {number} vmin the minimum velocity considered as "moving"
  336. * @return {boolean} true if moving, false if it has no velocity
  337. */
  338. Node.prototype.isMoving = function(vmin) {
  339. var velocity = Math.sqrt(Math.pow(this.vx,2) + Math.pow(this.vy,2));
  340. // this.velocity = Math.sqrt(Math.pow(this.vx,2) + Math.pow(this.vy,2))
  341. return (velocity > vmin);
  342. };
  343. /**
  344. * check if this node is selecte
  345. * @return {boolean} selected True if node is selected, else false
  346. */
  347. Node.prototype.isSelected = function() {
  348. return this.selected;
  349. };
  350. /**
  351. * Retrieve the value of the node. Can be undefined
  352. * @return {Number} value
  353. */
  354. Node.prototype.getValue = function() {
  355. return this.value;
  356. };
  357. /**
  358. * Calculate the distance from the nodes location to the given location (x,y)
  359. * @param {Number} x
  360. * @param {Number} y
  361. * @return {Number} value
  362. */
  363. Node.prototype.getDistance = function(x, y) {
  364. var dx = this.x - x,
  365. dy = this.y - y;
  366. return Math.sqrt(dx * dx + dy * dy);
  367. };
  368. /**
  369. * Adjust the value range of the node. The node will adjust it's radius
  370. * based on its value.
  371. * @param {Number} min
  372. * @param {Number} max
  373. */
  374. Node.prototype.setValueRange = function(min, max) {
  375. if (!this.radiusFixed && this.value !== undefined) {
  376. if (max == min) {
  377. this.options.radius= (this.options.radiusMin + this.options.radiusMax) / 2;
  378. }
  379. else {
  380. var scale = (this.options.radiusMax - this.options.radiusMin) / (max - min);
  381. this.options.radius= (this.value - min) * scale + this.options.radiusMin;
  382. }
  383. }
  384. this.baseRadiusValue = this.options.radius;
  385. };
  386. /**
  387. * Draw this node in the given canvas
  388. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  389. * @param {CanvasRenderingContext2D} ctx
  390. */
  391. Node.prototype.draw = function(ctx) {
  392. throw "Draw method not initialized for node";
  393. };
  394. /**
  395. * Recalculate the size of this node in the given canvas
  396. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  397. * @param {CanvasRenderingContext2D} ctx
  398. */
  399. Node.prototype.resize = function(ctx) {
  400. throw "Resize method not initialized for node";
  401. };
  402. /**
  403. * Check if this object is overlapping with the provided object
  404. * @param {Object} obj an object with parameters left, top, right, bottom
  405. * @return {boolean} True if location is located on node
  406. */
  407. Node.prototype.isOverlappingWith = function(obj) {
  408. return (this.left < obj.right &&
  409. this.left + this.width > obj.left &&
  410. this.top < obj.bottom &&
  411. this.top + this.height > obj.top);
  412. };
  413. Node.prototype._resizeImage = function (ctx) {
  414. // TODO: pre calculate the image size
  415. if (!this.width || !this.height) { // undefined or 0
  416. var width, height;
  417. if (this.value) {
  418. this.options.radius= this.baseRadiusValue;
  419. var scale = this.imageObj.height / this.imageObj.width;
  420. if (scale !== undefined) {
  421. width = this.options.radius|| this.imageObj.width;
  422. height = this.options.radius* scale || this.imageObj.height;
  423. }
  424. else {
  425. width = 0;
  426. height = 0;
  427. }
  428. }
  429. else {
  430. width = this.imageObj.width;
  431. height = this.imageObj.height;
  432. }
  433. this.width = width;
  434. this.height = height;
  435. this.growthIndicator = 0;
  436. if (this.width > 0 && this.height > 0) {
  437. this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
  438. this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
  439. this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
  440. this.growthIndicator = this.width - width;
  441. }
  442. }
  443. };
  444. Node.prototype._drawImage = function (ctx) {
  445. this._resizeImage(ctx);
  446. this.left = this.x - this.width / 2;
  447. this.top = this.y - this.height / 2;
  448. var yLabel;
  449. if (this.imageObj.width != 0 ) {
  450. // draw the shade
  451. if (this.clusterSize > 1) {
  452. var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
  453. lineWidth *= this.networkScaleInv;
  454. lineWidth = Math.min(0.2 * this.width,lineWidth);
  455. ctx.globalAlpha = 0.5;
  456. ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
  457. }
  458. // draw the image
  459. ctx.globalAlpha = 1.0;
  460. ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
  461. yLabel = this.y + this.height / 2;
  462. }
  463. else {
  464. // image still loading... just draw the label for now
  465. yLabel = this.y;
  466. }
  467. this._label(ctx, this.label, this.x, yLabel, undefined, "top");
  468. };
  469. Node.prototype._resizeBox = function (ctx) {
  470. if (!this.width) {
  471. var margin = 5;
  472. var textSize = this.getTextSize(ctx);
  473. this.width = textSize.width + 2 * margin;
  474. this.height = textSize.height + 2 * margin;
  475. this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
  476. this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
  477. this.growthIndicator = this.width - (textSize.width + 2 * margin);
  478. // this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
  479. }
  480. };
  481. Node.prototype._drawBox = function (ctx) {
  482. this._resizeBox(ctx);
  483. this.left = this.x - this.width / 2;
  484. this.top = this.y - this.height / 2;
  485. var clusterLineWidth = 2.5;
  486. var borderWidth = this.options.borderWidth;
  487. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  488. ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
  489. // draw the outer border
  490. if (this.clusterSize > 1) {
  491. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  492. ctx.lineWidth *= this.networkScaleInv;
  493. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  494. ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.options.radius);
  495. ctx.stroke();
  496. }
  497. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  498. ctx.lineWidth *= this.networkScaleInv;
  499. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  500. ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.options.color.background;
  501. ctx.roundRect(this.left, this.top, this.width, this.height, this.options.radius);
  502. ctx.fill();
  503. ctx.stroke();
  504. this._label(ctx, this.label, this.x, this.y);
  505. };
  506. Node.prototype._resizeDatabase = function (ctx) {
  507. if (!this.width) {
  508. var margin = 5;
  509. var textSize = this.getTextSize(ctx);
  510. var size = textSize.width + 2 * margin;
  511. this.width = size;
  512. this.height = size;
  513. // scaling used for clustering
  514. this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
  515. this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
  516. this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
  517. this.growthIndicator = this.width - size;
  518. }
  519. };
  520. Node.prototype._drawDatabase = function (ctx) {
  521. this._resizeDatabase(ctx);
  522. this.left = this.x - this.width / 2;
  523. this.top = this.y - this.height / 2;
  524. var clusterLineWidth = 2.5;
  525. var borderWidth = this.options.borderWidth;
  526. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  527. ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
  528. // draw the outer border
  529. if (this.clusterSize > 1) {
  530. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  531. ctx.lineWidth *= this.networkScaleInv;
  532. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  533. ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
  534. ctx.stroke();
  535. }
  536. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  537. ctx.lineWidth *= this.networkScaleInv;
  538. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  539. ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
  540. ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
  541. ctx.fill();
  542. ctx.stroke();
  543. this._label(ctx, this.label, this.x, this.y);
  544. };
  545. Node.prototype._resizeCircle = function (ctx) {
  546. if (!this.width) {
  547. var margin = 5;
  548. var textSize = this.getTextSize(ctx);
  549. var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
  550. this.options.radius = diameter / 2;
  551. this.width = diameter;
  552. this.height = diameter;
  553. // scaling used for clustering
  554. // this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
  555. // this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
  556. this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
  557. this.growthIndicator = this.options.radius- 0.5*diameter;
  558. }
  559. };
  560. Node.prototype._drawCircle = function (ctx) {
  561. this._resizeCircle(ctx);
  562. this.left = this.x - this.width / 2;
  563. this.top = this.y - this.height / 2;
  564. var clusterLineWidth = 2.5;
  565. var borderWidth = this.options.borderWidth;
  566. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  567. ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
  568. // draw the outer border
  569. if (this.clusterSize > 1) {
  570. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  571. ctx.lineWidth *= this.networkScaleInv;
  572. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  573. ctx.circle(this.x, this.y, this.options.radius+2*ctx.lineWidth);
  574. ctx.stroke();
  575. }
  576. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  577. ctx.lineWidth *= this.networkScaleInv;
  578. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  579. ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
  580. ctx.circle(this.x, this.y, this.options.radius);
  581. ctx.fill();
  582. ctx.stroke();
  583. this._label(ctx, this.label, this.x, this.y);
  584. };
  585. Node.prototype._resizeEllipse = function (ctx) {
  586. if (!this.width) {
  587. var textSize = this.getTextSize(ctx);
  588. this.width = textSize.width * 1.5;
  589. this.height = textSize.height * 2;
  590. if (this.width < this.height) {
  591. this.width = this.height;
  592. }
  593. var defaultSize = this.width;
  594. // scaling used for clustering
  595. this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
  596. this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
  597. this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
  598. this.growthIndicator = this.width - defaultSize;
  599. }
  600. };
  601. Node.prototype._drawEllipse = function (ctx) {
  602. this._resizeEllipse(ctx);
  603. this.left = this.x - this.width / 2;
  604. this.top = this.y - this.height / 2;
  605. var clusterLineWidth = 2.5;
  606. var borderWidth = this.options.borderWidth;
  607. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  608. ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
  609. // draw the outer border
  610. if (this.clusterSize > 1) {
  611. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  612. ctx.lineWidth *= this.networkScaleInv;
  613. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  614. ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
  615. ctx.stroke();
  616. }
  617. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  618. ctx.lineWidth *= this.networkScaleInv;
  619. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  620. ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
  621. ctx.ellipse(this.left, this.top, this.width, this.height);
  622. ctx.fill();
  623. ctx.stroke();
  624. this._label(ctx, this.label, this.x, this.y);
  625. };
  626. Node.prototype._drawDot = function (ctx) {
  627. this._drawShape(ctx, 'circle');
  628. };
  629. Node.prototype._drawTriangle = function (ctx) {
  630. this._drawShape(ctx, 'triangle');
  631. };
  632. Node.prototype._drawTriangleDown = function (ctx) {
  633. this._drawShape(ctx, 'triangleDown');
  634. };
  635. Node.prototype._drawSquare = function (ctx) {
  636. this._drawShape(ctx, 'square');
  637. };
  638. Node.prototype._drawStar = function (ctx) {
  639. this._drawShape(ctx, 'star');
  640. };
  641. Node.prototype._resizeShape = function (ctx) {
  642. if (!this.width) {
  643. this.options.radius= this.baseRadiusValue;
  644. var size = 2 * this.options.radius;
  645. this.width = size;
  646. this.height = size;
  647. // scaling used for clustering
  648. this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
  649. this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
  650. this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
  651. this.growthIndicator = this.width - size;
  652. }
  653. };
  654. Node.prototype._drawShape = function (ctx, shape) {
  655. this._resizeShape(ctx);
  656. this.left = this.x - this.width / 2;
  657. this.top = this.y - this.height / 2;
  658. var clusterLineWidth = 2.5;
  659. var borderWidth = this.options.borderWidth;
  660. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  661. var radiusMultiplier = 2;
  662. // choose draw method depending on the shape
  663. switch (shape) {
  664. case 'dot': radiusMultiplier = 2; break;
  665. case 'square': radiusMultiplier = 2; break;
  666. case 'triangle': radiusMultiplier = 3; break;
  667. case 'triangleDown': radiusMultiplier = 3; break;
  668. case 'star': radiusMultiplier = 4; break;
  669. }
  670. ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
  671. // draw the outer border
  672. if (this.clusterSize > 1) {
  673. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  674. ctx.lineWidth *= this.networkScaleInv;
  675. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  676. ctx[shape](this.x, this.y, this.options.radius+ radiusMultiplier * ctx.lineWidth);
  677. ctx.stroke();
  678. }
  679. ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
  680. ctx.lineWidth *= this.networkScaleInv;
  681. ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
  682. ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
  683. ctx[shape](this.x, this.y, this.options.radius);
  684. ctx.fill();
  685. ctx.stroke();
  686. if (this.label) {
  687. this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
  688. }
  689. };
  690. Node.prototype._resizeText = function (ctx) {
  691. if (!this.width) {
  692. var margin = 5;
  693. var textSize = this.getTextSize(ctx);
  694. this.width = textSize.width + 2 * margin;
  695. this.height = textSize.height + 2 * margin;
  696. // scaling used for clustering
  697. this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
  698. this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
  699. this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
  700. this.growthIndicator = this.width - (textSize.width + 2 * margin);
  701. }
  702. };
  703. Node.prototype._drawText = function (ctx) {
  704. this._resizeText(ctx);
  705. this.left = this.x - this.width / 2;
  706. this.top = this.y - this.height / 2;
  707. this._label(ctx, this.label, this.x, this.y);
  708. };
  709. Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
  710. if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) {
  711. ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
  712. ctx.textAlign = align || "center";
  713. ctx.textBaseline = baseline || "middle";
  714. var lines = text.split('\n');
  715. var lineCount = lines.length;
  716. var fontSize = (Number(this.options.fontSize) + 4);
  717. var yLine = y + (1 - lineCount) / 2 * fontSize;
  718. if (labelUnderNode == true) {
  719. yLine = y + (1 - lineCount) / (2 * fontSize);
  720. }
  721. // font fill from edges now for nodes!
  722. if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
  723. var width = ctx.measureText(text).width;
  724. var height = this.options.fontSize;
  725. var left = x - width / 2;
  726. var top = y - height / 2;
  727. ctx.fillStyle = this.options.fontFill;
  728. ctx.fillRect(left, top, width, height);
  729. }
  730. // draw text
  731. ctx.fillStyle = this.options.fontColor || "black";
  732. for (var i = 0; i < lineCount; i++) {
  733. ctx.fillText(lines[i], x, yLine);
  734. yLine += fontSize;
  735. }
  736. }
  737. };
  738. Node.prototype.getTextSize = function(ctx) {
  739. if (this.label !== undefined) {
  740. ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
  741. var lines = this.label.split('\n'),
  742. height = (Number(this.options.fontSize) + 4) * lines.length,
  743. width = 0;
  744. for (var i = 0, iMax = lines.length; i < iMax; i++) {
  745. width = Math.max(width, ctx.measureText(lines[i]).width);
  746. }
  747. return {"width": width, "height": height};
  748. }
  749. else {
  750. return {"width": 0, "height": 0};
  751. }
  752. };
  753. /**
  754. * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
  755. * there is a safety margin of 0.3 * width;
  756. *
  757. * @returns {boolean}
  758. */
  759. Node.prototype.inArea = function() {
  760. if (this.width !== undefined) {
  761. return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
  762. this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
  763. this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
  764. this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
  765. }
  766. else {
  767. return true;
  768. }
  769. };
  770. /**
  771. * checks if the core of the node is in the display area, this is used for opening clusters around zoom
  772. * @returns {boolean}
  773. */
  774. Node.prototype.inView = function() {
  775. return (this.x >= this.canvasTopLeft.x &&
  776. this.x < this.canvasBottomRight.x &&
  777. this.y >= this.canvasTopLeft.y &&
  778. this.y < this.canvasBottomRight.y);
  779. };
  780. /**
  781. * This allows the zoom level of the network to influence the rendering
  782. * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
  783. *
  784. * @param scale
  785. * @param canvasTopLeft
  786. * @param canvasBottomRight
  787. */
  788. Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
  789. this.networkScaleInv = 1.0/scale;
  790. this.networkScale = scale;
  791. this.canvasTopLeft = canvasTopLeft;
  792. this.canvasBottomRight = canvasBottomRight;
  793. };
  794. /**
  795. * This allows the zoom level of the network to influence the rendering
  796. *
  797. * @param scale
  798. */
  799. Node.prototype.setScale = function(scale) {
  800. this.networkScaleInv = 1.0/scale;
  801. this.networkScale = scale;
  802. };
  803. /**
  804. * set the velocity at 0. Is called when this node is contained in another during clustering
  805. */
  806. Node.prototype.clearVelocity = function() {
  807. this.vx = 0;
  808. this.vy = 0;
  809. };
  810. /**
  811. * Basic preservation of (kinectic) energy
  812. *
  813. * @param massBeforeClustering
  814. */
  815. Node.prototype.updateVelocity = function(massBeforeClustering) {
  816. var energyBefore = this.vx * this.vx * massBeforeClustering;
  817. //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
  818. this.vx = Math.sqrt(energyBefore/this.options.mass);
  819. energyBefore = this.vy * this.vy * massBeforeClustering;
  820. //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
  821. this.vy = Math.sqrt(energyBefore/this.options.mass);
  822. };
  823. module.exports = Node;