exampleConnector.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. jsPlumb.Connectors.ExampleConnector = function() {
  2. jsPlumb.Connectors.Straight.apply(this);
  3. var self = this;
  4. var arrowType1 = function(params) {
  5. params = params || {};
  6. var length = params.length || 20;
  7. var width = params.width || 20;
  8. var fillStyle = params.fillStyle || "black";
  9. var strokeStyle = params.strokeStyle || "yellow";
  10. var lineWidth = params.lineWidth || 1;
  11. this.draw = function(connector, location, ctx) {
  12. // this is the arrow head position
  13. var hxy = connector.pointAlongPathFrom(location, length / 2), hx = hxy[0], hy = hxy[1];
  14. // this is the center of the tail
  15. var txy = connector.pointAlongPathFrom(location, -length / 2), tx = txy[0], ty = txy[1];
  16. // this is the tail vector
  17. var tail = connector.perpendicularToPath(tx, ty, width);
  18. ctx.lineWidth = lineWidth;
  19. ctx.beginPath();
  20. ctx.moveTo(hx, hy);
  21. ctx.lineTo(tail[0][0], tail[0][1]);
  22. ctx.lineTo(tail[1][0], tail[1][1]);
  23. ctx.lineTo(hx, hy);
  24. ctx.closePath();
  25. if (strokeStyle) {
  26. ctx.strokeStyle = strokeStyle;
  27. ctx.stroke();
  28. }
  29. ctx.fillStyle = fillStyle;
  30. ctx.fill();
  31. };
  32. };
  33. /**
  34. * an arrow that folds back on itself instead of having a straight back edge. by default the foldback point is 62.3% along the length of the
  35. * arrow, which is roughly a golden ratio along the arrow and therefore looks quite nice. you can change that by setting the 'foldback'
  36. * parameter when you construct this. available params are:
  37. *
  38. * length - length in pixels of the arrow
  39. * width - width in pixels of the arrow's tail at its widest point
  40. * foldback - a decimal value indicating where along the arrow the tail points should fold back in to.
  41. */
  42. var arrowType2 = function(params) {
  43. params = params || {};
  44. var length = params.length || 20;
  45. var width = params.width || 20;
  46. var fillStyle = params.fillStyle || "black";
  47. var strokeStyle = params.strokeStyle || "yellow";
  48. var lineWidth = params.lineWidth || 1;
  49. // how far along the arrow the lines folding back in come to. default is 62.3%.
  50. var foldback = params.foldback || 0.623;
  51. var _getFoldBackPoint = function(connector, location) {
  52. if (foldback == 0.5) return connector.pointOnPath(location);
  53. else {
  54. var adj = 0.5 - foldback; // we calculate relative to the center
  55. return connector.pointAlongPathFrom(location, length * adj);
  56. }
  57. };
  58. this.draw = function(connector, location, ctx) {
  59. // this is the arrow head position
  60. var hxy = connector.pointAlongPathFrom(location, length / 2);
  61. // this is the center of the tail
  62. var txy = connector.pointAlongPathFrom(location, -length / 2), tx = txy[0], ty = txy[1];
  63. // this is the tail vector
  64. var tail = connector.perpendicularToPath(tx, ty, width);
  65. // this is the point the tail goes in to
  66. var cxy = _getFoldBackPoint(connector, location);
  67. ctx.lineWidth = lineWidth;
  68. ctx.beginPath();
  69. ctx.moveTo(hxy[0], hxy[1]);
  70. ctx.lineTo(tail[0][0], tail[0][1]);
  71. ctx.lineTo(cxy[0], cxy[1]);
  72. ctx.lineTo(tail[1][0], tail[1][1]);
  73. ctx.lineTo(hxy[0], hxy[1]);
  74. ctx.closePath();
  75. if (strokeStyle) {
  76. ctx.strokeStyle = strokeStyle;
  77. ctx.stroke();
  78. }
  79. ctx.fillStyle = fillStyle;
  80. ctx.fill();
  81. }
  82. };
  83. var _p = self.paint;
  84. this.paint = function(dimensions, ctx)
  85. {
  86. _p(dimensions,ctx);
  87. new arrowType1().draw(self, 0.333333333333333, ctx);
  88. new arrowType2().draw(self, 0.666666666666666, ctx);
  89. };
  90. };