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.

107 lines
2.8 KiB

  1. /**
  2. * Created by Alex on 3/20/2015.
  3. */
  4. import BezierEdgeBase from './util/BezierEdgeBase'
  5. class BezierEdgeDynamic extends BezierEdgeBase {
  6. constructor(options, body, labelModule) {
  7. this.via = undefined;
  8. super(options, body, labelModule); // --> this calls the setOptions below
  9. }
  10. setOptions(options) {
  11. this.options = options;
  12. this.from = this.body.nodes[this.options.from];
  13. this.to = this.body.nodes[this.options.to];
  14. this.id = this.options.id;
  15. this.setupSupportNode();
  16. }
  17. cleanup() {
  18. if (this.via !== undefined) {
  19. delete this.body.nodes[this.via.id];
  20. this.via = undefined;
  21. return true;
  22. }
  23. return false;
  24. }
  25. /**
  26. * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
  27. * are used for the force calculation.
  28. *
  29. * The changed data is not called, if needed, it is returned by the main edge constructor.
  30. * @private
  31. */
  32. setupSupportNode() {
  33. if (this.via === undefined) {
  34. var nodeId = "edgeId:" + this.id;
  35. var node = this.body.functions.createNode({
  36. id: nodeId,
  37. mass: 1,
  38. shape: 'circle',
  39. image: "",
  40. physics:true,
  41. hidden:true
  42. });
  43. this.body.nodes[nodeId] = node;
  44. this.via = node;
  45. this.via.parentEdgeId = this.id;
  46. this.positionBezierNode();
  47. }
  48. }
  49. positionBezierNode() {
  50. if (this.via !== undefined && this.from !== undefined && this.to !== undefined) {
  51. this.via.x = 0.5 * (this.from.x + this.to.x);
  52. this.via.y = 0.5 * (this.from.y + this.to.y);
  53. }
  54. else if (this.via !== undefined) {
  55. this.via.x = 0;
  56. this.via.y = 0;
  57. }
  58. }
  59. /**
  60. * Draw a line between two nodes
  61. * @param {CanvasRenderingContext2D} ctx
  62. * @private
  63. */
  64. _line(ctx) {
  65. // draw a straight line
  66. ctx.beginPath();
  67. ctx.moveTo(this.from.x, this.from.y);
  68. ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
  69. ctx.stroke();
  70. return this.via;
  71. }
  72. /**
  73. * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
  74. * @param percentage
  75. * @param via
  76. * @returns {{x: number, y: number}}
  77. * @private
  78. */
  79. getPoint(percentage) {
  80. let t = percentage;
  81. let x = Math.pow(1 - t, 2) * this.from.x + (2 * t * (1 - t)) * this.via.x + Math.pow(t, 2) * this.to.x;
  82. let y = Math.pow(1 - t, 2) * this.from.y + (2 * t * (1 - t)) * this.via.y + Math.pow(t, 2) * this.to.y;
  83. return {x: x, y: y};
  84. }
  85. _findBorderPosition(nearNode, ctx) {
  86. return this._findBorderPositionBezier(nearNode, ctx, this.via);
  87. }
  88. _getDistanceToEdge(x1, y1, x2, y2, x3, y3) { // x3,y3 is the point
  89. return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, this.via);
  90. }
  91. }
  92. export default BezierEdgeDynamic;