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.

81 lines
2.6 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. * @param {Array<Object>} values
  10. * @param {Array<vis.Node>} viaNodes
  11. * @private
  12. */
  13. _line(ctx, values, viaNodes) {
  14. // get the coordinates of the support points.
  15. let via1 = viaNodes[0];
  16. let via2 = viaNodes[1];
  17. this._bezierCurve(ctx, values, via1, via2);
  18. }
  19. _getViaCoordinates() {
  20. let dx = this.from.x - this.to.x;
  21. let dy = this.from.y - this.to.y;
  22. let x1, y1, x2, y2;
  23. let roundness = this.options.smooth.roundness;
  24. // horizontal if x > y or if direction is forced or if direction is horizontal
  25. if ((Math.abs(dx) > Math.abs(dy) || this.options.smooth.forceDirection === true || this.options.smooth.forceDirection === 'horizontal') && this.options.smooth.forceDirection !== 'vertical') {
  26. y1 = this.from.y;
  27. y2 = this.to.y;
  28. x1 = this.from.x - roundness * dx;
  29. x2 = this.to.x + roundness * dx;
  30. }
  31. else {
  32. y1 = this.from.y - roundness * dy;
  33. y2 = this.to.y + roundness * dy;
  34. x1 = this.from.x;
  35. x2 = this.to.x;
  36. }
  37. return [{x: x1, y: y1},{x: x2, y: y2}];
  38. }
  39. getViaNode() {
  40. return this._getViaCoordinates();
  41. }
  42. _findBorderPosition(nearNode, ctx) {
  43. return this._findBorderPositionBezier(nearNode, ctx);
  44. }
  45. _getDistanceToEdge(x1, y1, x2, y2, x3, y3, [via1, via2] = this._getViaCoordinates()) { // x3,y3 is the point
  46. return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via1, via2);
  47. }
  48. /**
  49. * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
  50. * @param {number} percentage
  51. * @param {{x: number, y: number}} [via1=this._getViaCoordinates()[0]]
  52. * @param {{x: number, y: number}} [via2=this._getViaCoordinates()[1]]
  53. * @returns {{x: number, y: number}}
  54. * @private
  55. */
  56. getPoint(percentage, [via1, via2] = this._getViaCoordinates()) {
  57. let t = percentage;
  58. let vec = [];
  59. vec[0] = Math.pow(1 - t, 3);
  60. vec[1] = 3 * t * Math.pow(1 - t, 2);
  61. vec[2] = 3 * Math.pow(t,2) * (1 - t);
  62. vec[3] = Math.pow(t, 3);
  63. let x = vec[0] * this.fromPoint.x + vec[1] * via1.x + vec[2] * via2.x + vec[3] * this.toPoint.x;
  64. let y = vec[0] * this.fromPoint.y + vec[1] * via1.y + vec[2] * via2.y + vec[3] * this.toPoint.y;
  65. return {x: x, y: y};
  66. }
  67. }
  68. export default CubicBezierEdge;