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.

92 lines
2.8 KiB

  1. import CubicBezierEdgeBase from './util/CubicBezierEdgeBase'
  2. class CubicBezierEdge extends CubicBezierEdgeBase {
  3. constructor(options, body, labelModule) {
  4. super(options, body, labelModule);
  5. }
  6. /**
  7. * Draw a line between two nodes
  8. * @param {CanvasRenderingContext2D} ctx
  9. * @private
  10. */
  11. _line(ctx, viaNodes) {
  12. // get the coordinates of the support points.
  13. let via1 = viaNodes[0];
  14. let via2 = viaNodes[1];
  15. // start drawing the line.
  16. ctx.beginPath();
  17. ctx.moveTo(this.fromPoint.x, this.fromPoint.y);
  18. // fallback to normal straight edges
  19. if (viaNodes === undefined || via1.x === undefined) {
  20. ctx.lineTo(this.toPoint.x, this.toPoint.y);
  21. }
  22. else {
  23. ctx.bezierCurveTo(via1.x, via1.y, via2.x, via2.y, this.toPoint.x, this.toPoint.y);
  24. }
  25. // draw shadow if enabled
  26. this.enableShadow(ctx);
  27. ctx.stroke();
  28. this.disableShadow(ctx);
  29. }
  30. _getViaCoordinates() {
  31. let dx = this.from.x - this.to.x;
  32. let dy = this.from.y - this.to.y;
  33. let x1, y1, x2, y2;
  34. let roundness = this.options.smooth.roundness;
  35. // horizontal if x > y or if direction is forced or if direction is horizontal
  36. if ((Math.abs(dx) > Math.abs(dy) || this.options.smooth.forceDirection === true || this.options.smooth.forceDirection === 'horizontal') && this.options.smooth.forceDirection !== 'vertical') {
  37. y1 = this.from.y;
  38. y2 = this.to.y;
  39. x1 = this.from.x - roundness * dx;
  40. x2 = this.to.x + roundness * dx;
  41. }
  42. else {
  43. y1 = this.from.y - roundness * dy;
  44. y2 = this.to.y + roundness * dy;
  45. x1 = this.from.x;
  46. x2 = this.to.x;
  47. }
  48. return [{x: x1, y: y1},{x: x2, y: y2}];
  49. }
  50. getViaNode() {
  51. return this._getViaCoordinates();
  52. }
  53. _findBorderPosition(nearNode, ctx) {
  54. return this._findBorderPositionBezier(nearNode, ctx);
  55. }
  56. _getDistanceToEdge(x1, y1, x2, y2, x3, y3, [via1, via2] = this._getViaCoordinates()) { // x3,y3 is the point
  57. return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via1, via2);
  58. }
  59. /**
  60. * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
  61. * @param percentage
  62. * @param via
  63. * @returns {{x: number, y: number}}
  64. * @private
  65. */
  66. getPoint(percentage, [via1, via2] = this._getViaCoordinates()) {
  67. let t = percentage;
  68. let vec = [];
  69. vec[0] = Math.pow(1 - t, 3);
  70. vec[1] = 3 * t * Math.pow(1 - t, 2);
  71. vec[2] = 3 * Math.pow(t,2) * (1 - t);
  72. vec[3] = Math.pow(t, 3);
  73. let x = vec[0] * this.fromPoint.x + vec[1] * via1.x + vec[2] * via2.x + vec[3] * this.toPoint.x;
  74. let y = vec[0] * this.fromPoint.y + vec[1] * via1.y + vec[2] * via2.y + vec[3] * this.toPoint.y;
  75. return {x: x, y: y};
  76. }
  77. }
  78. export default CubicBezierEdge;