mxArrow.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxArrow
  7. *
  8. * Extends <mxShape> to implement an arrow shape. (The shape
  9. * is used to represent edges, not vertices.)
  10. * This shape is registered under <mxConstants.SHAPE_ARROW>
  11. * in <mxCellRenderer>.
  12. *
  13. * Constructor: mxArrow
  14. *
  15. * Constructs a new arrow shape.
  16. *
  17. * Parameters:
  18. *
  19. * points - Array of <mxPoints> that define the points. This is stored in
  20. * <mxShape.points>.
  21. * fill - String that defines the fill color. This is stored in <fill>.
  22. * stroke - String that defines the stroke color. This is stored in <stroke>.
  23. * strokewidth - Optional integer that defines the stroke width. Default is
  24. * 1. This is stored in <strokewidth>.
  25. * arrowWidth - Optional integer that defines the arrow width. Default is
  26. * <mxConstants.ARROW_WIDTH>. This is stored in <arrowWidth>.
  27. * spacing - Optional integer that defines the spacing between the arrow shape
  28. * and its endpoints. Default is <mxConstants.ARROW_SPACING>. This is stored in
  29. * <spacing>.
  30. * endSize - Optional integer that defines the size of the arrowhead. Default
  31. * is <mxConstants.ARROW_SIZE>. This is stored in <endSize>.
  32. */
  33. function mxArrow(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize)
  34. {
  35. mxShape.call(this);
  36. this.points = points;
  37. this.fill = fill;
  38. this.stroke = stroke;
  39. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  40. this.arrowWidth = (arrowWidth != null) ? arrowWidth : mxConstants.ARROW_WIDTH;
  41. this.spacing = (spacing != null) ? spacing : mxConstants.ARROW_SPACING;
  42. this.endSize = (endSize != null) ? endSize : mxConstants.ARROW_SIZE;
  43. };
  44. /**
  45. * Extends mxShape.
  46. */
  47. mxUtils.extend(mxArrow, mxShape);
  48. /**
  49. * Function: augmentBoundingBox
  50. *
  51. * Augments the bounding box with the edge width and markers.
  52. */
  53. mxArrow.prototype.augmentBoundingBox = function(bbox)
  54. {
  55. mxShape.prototype.augmentBoundingBox.apply(this, arguments);
  56. var w = Math.max(this.arrowWidth, this.endSize);
  57. bbox.grow((w / 2 + this.strokewidth) * this.scale);
  58. };
  59. /**
  60. * Function: paintEdgeShape
  61. *
  62. * Paints the line shape.
  63. */
  64. mxArrow.prototype.paintEdgeShape = function(c, pts)
  65. {
  66. // Geometry of arrow
  67. var spacing = mxConstants.ARROW_SPACING;
  68. var width = mxConstants.ARROW_WIDTH;
  69. var arrow = mxConstants.ARROW_SIZE;
  70. // Base vector (between end points)
  71. var p0 = pts[0];
  72. var pe = pts[pts.length - 1];
  73. var dx = pe.x - p0.x;
  74. var dy = pe.y - p0.y;
  75. var dist = Math.sqrt(dx * dx + dy * dy);
  76. var length = dist - 2 * spacing - arrow;
  77. // Computes the norm and the inverse norm
  78. var nx = dx / dist;
  79. var ny = dy / dist;
  80. var basex = length * nx;
  81. var basey = length * ny;
  82. var floorx = width * ny/3;
  83. var floory = -width * nx/3;
  84. // Computes points
  85. var p0x = p0.x - floorx / 2 + spacing * nx;
  86. var p0y = p0.y - floory / 2 + spacing * ny;
  87. var p1x = p0x + floorx;
  88. var p1y = p0y + floory;
  89. var p2x = p1x + basex;
  90. var p2y = p1y + basey;
  91. var p3x = p2x + floorx;
  92. var p3y = p2y + floory;
  93. // p4 not necessary
  94. var p5x = p3x - 3 * floorx;
  95. var p5y = p3y - 3 * floory;
  96. c.begin();
  97. c.moveTo(p0x, p0y);
  98. c.lineTo(p1x, p1y);
  99. c.lineTo(p2x, p2y);
  100. c.lineTo(p3x, p3y);
  101. c.lineTo(pe.x - spacing * nx, pe.y - spacing * ny);
  102. c.lineTo(p5x, p5y);
  103. c.lineTo(p5x + floorx, p5y + floory);
  104. c.close();
  105. c.fillAndStroke();
  106. };
  107. __mxOutput.mxArrow = typeof mxArrow !== 'undefined' ? mxArrow : undefined;