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.

115 lines
3.0 KiB

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