default.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { getArcObject } from '../../../shape/utils';
  2. import { isCircular, isRadial } from '../../../utils/coordinate';
  3. import { maybePercentage } from '../../../utils/helper';
  4. import { mid } from '../../../utils/vector';
  5. export function inferNonCircularStyle(position, points, value, coordinate) {
  6. const { bounds } = value;
  7. const [[x0, y0], [x1, y1]] = bounds;
  8. const w = x1 - x0;
  9. const h = y1 - y0;
  10. const xy = (options) => {
  11. const { x: ox, y: oy } = options;
  12. const px = maybePercentage(value.x, w);
  13. const py = maybePercentage(value.y, h);
  14. return Object.assign(Object.assign({}, options), { x: (px || ox) + x0, y: (py || oy) + y0 });
  15. };
  16. // 4 direction.
  17. if (position === 'left')
  18. return xy({ x: 0, y: h / 2, textAnchor: 'start', textBaseline: 'middle' });
  19. if (position === 'right')
  20. return xy({ x: w, y: h / 2, textAnchor: 'end', textBaseline: 'middle' });
  21. if (position === 'top')
  22. return xy({ x: w / 2, y: 0, textAnchor: 'center', textBaseline: 'top' });
  23. if (position === 'bottom')
  24. return xy({ x: w / 2, y: h, textAnchor: 'center', textBaseline: 'bottom' });
  25. // 4 corner position.
  26. if (position === 'top-left')
  27. return xy({ x: 0, y: 0, textAnchor: 'start', textBaseline: 'top' });
  28. if (position === 'top-right')
  29. return xy({ x: w, y: 0, textAnchor: 'end', textBaseline: 'top' });
  30. if (position === 'bottom-left')
  31. return xy({ x: 0, y: h, textAnchor: 'start', textBaseline: 'bottom' });
  32. if (position === 'bottom-right')
  33. return xy({ x: w, y: h, textAnchor: 'end', textBaseline: 'bottom' });
  34. // default return 'inside'
  35. return xy({
  36. x: w / 2,
  37. y: h / 2,
  38. textAnchor: 'center',
  39. textBaseline: 'middle',
  40. });
  41. }
  42. export function inferRadialStyle(position, points, value, coordinate) {
  43. const { y, y1, autoRotate, rotateToAlignArc } = value;
  44. const center = coordinate.getCenter();
  45. const arcObject = getArcObject(coordinate, points, [y, y1]);
  46. const { innerRadius, outerRadius, startAngle, endAngle } = arcObject;
  47. const angle = position === 'inside' ? (startAngle + endAngle) / 2 : endAngle;
  48. const rotate = inferRotation(angle, autoRotate, rotateToAlignArc);
  49. const point = (() => {
  50. const [p0, p1] = points;
  51. const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  52. const [x, y] = position === 'inside' ? pointOfArc(center, angle, radius) : mid(p0, p1);
  53. return { x, y };
  54. })();
  55. return Object.assign(Object.assign({}, point), { textAlign: position === 'inside' ? 'center' : 'start', textBaseline: 'middle', rotate });
  56. }
  57. export function pointOfArc(center, angle, radius) {
  58. return [
  59. center[0] + Math.sin(angle) * radius,
  60. center[1] - Math.cos(angle) * radius,
  61. ];
  62. }
  63. export function inferRotation(angle, autoRotate, rotateToAlignArc) {
  64. if (!autoRotate)
  65. return 0;
  66. const append = rotateToAlignArc ? 0 : Math.sin(angle) < 0 ? 90 : -90;
  67. return (angle / Math.PI) * 180 + append;
  68. }
  69. function inferInnerCircularStyle(position, points, value, coordinate) {
  70. const { y, y1, autoRotate, rotateToAlignArc, radius: radiusRatio = 0.5, offset = 0, } = value;
  71. const arcObject = getArcObject(coordinate, points, [y, y1]);
  72. const { startAngle, endAngle } = arcObject;
  73. const center = coordinate.getCenter();
  74. const angle = (startAngle + endAngle) / 2;
  75. const rotate = inferRotation(angle, autoRotate, rotateToAlignArc);
  76. const textStyle = { textAlign: 'center', textBaseline: 'middle', rotate };
  77. const { innerRadius, outerRadius } = arcObject;
  78. const r0 = innerRadius + (outerRadius - innerRadius) * radiusRatio;
  79. const r1 = r0 + offset;
  80. const [x0, y0] = pointOfArc(center, angle, r1);
  81. return Object.assign({ x: x0, y: y0 }, textStyle);
  82. }
  83. export function inferIdentityStyle(position, points, value, coordinate) {
  84. const { bounds } = value;
  85. const [p] = bounds;
  86. return {
  87. x: p[0],
  88. y: p[1],
  89. };
  90. }
  91. export function getDefaultStyle(position, points, value, coordinate) {
  92. const { bounds } = value;
  93. // When bounds.length = 1
  94. // For series mark, such as line and area.
  95. // The bounds for text is defined with only one point.
  96. // Use this point as the label position.
  97. if (bounds.length === 1) {
  98. return inferIdentityStyle(position, points, value, coordinate);
  99. }
  100. const inferDefaultStyle = isRadial(coordinate)
  101. ? inferRadialStyle
  102. : isCircular(coordinate)
  103. ? inferInnerCircularStyle
  104. : inferNonCircularStyle;
  105. return inferDefaultStyle(position, points, value, coordinate);
  106. }
  107. //# sourceMappingURL=default.js.map