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.

121 lines
3.3 KiB

  1. import CubicBezierEdgeBase from './util/CubicBezierEdgeBase'
  2. /**
  3. * A Cubic Bezier Edge. Bezier curves are used to model smooth gradual
  4. * curves in paths between nodes.
  5. *
  6. * @extends CubicBezierEdgeBase
  7. */
  8. class CubicBezierEdge extends CubicBezierEdgeBase {
  9. /**
  10. * @param {Object} options
  11. * @param {Object} body
  12. * @param {Label} labelModule
  13. */
  14. constructor(options, body, labelModule) {
  15. super(options, body, labelModule);
  16. }
  17. /**
  18. * Draw a line between two nodes
  19. * @param {CanvasRenderingContext2D} ctx
  20. * @param {ArrowOptions} values
  21. * @param {Array.<Node>} viaNodes
  22. * @private
  23. */
  24. _line(ctx, values, viaNodes) {
  25. // get the coordinates of the support points.
  26. let via1 = viaNodes[0];
  27. let via2 = viaNodes[1];
  28. this._bezierCurve(ctx, values, via1, via2);
  29. }
  30. /**
  31. *
  32. * @returns {Array.<{x: number, y: number}>}
  33. * @private
  34. */
  35. _getViaCoordinates() {
  36. let dx = this.from.x - this.to.x;
  37. let dy = this.from.y - this.to.y;
  38. let x1, y1, x2, y2;
  39. let roundness = this.options.smooth.roundness;
  40. // horizontal if x > y or if direction is forced or if direction is horizontal
  41. if ((Math.abs(dx) > Math.abs(dy) || this.options.smooth.forceDirection === true || this.options.smooth.forceDirection === 'horizontal') && this.options.smooth.forceDirection !== 'vertical') {
  42. y1 = this.from.y;
  43. y2 = this.to.y;
  44. x1 = this.from.x - roundness * dx;
  45. x2 = this.to.x + roundness * dx;
  46. }
  47. else {
  48. y1 = this.from.y - roundness * dy;
  49. y2 = this.to.y + roundness * dy;
  50. x1 = this.from.x;
  51. x2 = this.to.x;
  52. }
  53. return [{x: x1, y: y1},{x: x2, y: y2}];
  54. }
  55. /**
  56. *
  57. * @returns {Array.<{x: number, y: number}>}
  58. */
  59. getViaNode() {
  60. return this._getViaCoordinates();
  61. }
  62. /**
  63. *
  64. * @param {Node} nearNode
  65. * @param {CanvasRenderingContext2D} ctx
  66. * @returns {{x: number, y: number, t: number}}
  67. * @private
  68. */
  69. _findBorderPosition(nearNode, ctx) {
  70. return this._findBorderPositionBezier(nearNode, ctx);
  71. }
  72. /**
  73. *
  74. * @param {number} x1
  75. * @param {number} y1
  76. * @param {number} x2
  77. * @param {number} y2
  78. * @param {number} x3
  79. * @param {number} y3
  80. * @param {Node} via1
  81. * @param {Node} via2
  82. * @returns {number}
  83. * @private
  84. */
  85. _getDistanceToEdge(x1, y1, x2, y2, x3, y3, [via1, via2] = this._getViaCoordinates()) { // x3,y3 is the point
  86. return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via1, via2);
  87. }
  88. /**
  89. * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
  90. * @param {number} percentage
  91. * @param {{x: number, y: number}} [via1=this._getViaCoordinates()[0]]
  92. * @param {{x: number, y: number}} [via2=this._getViaCoordinates()[1]]
  93. * @returns {{x: number, y: number}}
  94. * @private
  95. */
  96. getPoint(percentage, [via1, via2] = this._getViaCoordinates()) {
  97. let t = percentage;
  98. let vec = [];
  99. vec[0] = Math.pow(1 - t, 3);
  100. vec[1] = 3 * t * Math.pow(1 - t, 2);
  101. vec[2] = 3 * Math.pow(t,2) * (1 - t);
  102. vec[3] = Math.pow(t, 3);
  103. let x = vec[0] * this.fromPoint.x + vec[1] * via1.x + vec[2] * via2.x + vec[3] * this.toPoint.x;
  104. let y = vec[0] * this.fromPoint.y + vec[1] * via1.y + vec[2] * via2.y + vec[3] * this.toPoint.y;
  105. return {x: x, y: y};
  106. }
  107. }
  108. export default CubicBezierEdge;