line.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. var __rest = (this && this.__rest) || function (s, e) {
  2. var t = {};
  3. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  4. t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  6. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  8. t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { Path } from '@antv/g';
  13. import { arc, line } from 'd3-shape';
  14. import { isPolar } from '../../utils/coordinate';
  15. import { select } from '../../utils/selection';
  16. import { dist } from '../../utils/vector';
  17. import { subObject } from '../../utils/helper';
  18. import { applyStyle, getShapeTheme } from '../utils';
  19. function getArrowMarker(arrowSize, arrowStyle) {
  20. const arrowMarker = new Path({
  21. style: Object.assign({ path: `M ${arrowSize},${arrowSize} L -${arrowSize},0 L ${arrowSize},-${arrowSize} L 0,0 Z`, anchor: '0.5 0.5', transformOrigin: 'center' }, arrowStyle),
  22. });
  23. return arrowMarker;
  24. }
  25. function getPath(points, coordinate) {
  26. if (!isPolar(coordinate))
  27. return line()
  28. .x((d) => d[0])
  29. .y((d) => d[1])(points);
  30. const center = coordinate.getCenter();
  31. return arc()({
  32. startAngle: 0,
  33. endAngle: Math.PI * 2,
  34. outerRadius: dist(points[0], center),
  35. innerRadius: dist(points[1], center),
  36. });
  37. }
  38. function getTransform(coordinate, transform) {
  39. if (!isPolar(coordinate))
  40. return transform;
  41. const [cx, cy] = coordinate.getCenter();
  42. return `translate(${cx}, ${cy}) ${transform || ''}`;
  43. }
  44. export const Line = (options) => {
  45. const { arrow, arrowSize = 4 } = options, style = __rest(options, ["arrow", "arrowSize"]);
  46. return (points, value, coordinate, theme) => {
  47. const { mark, shape, defaultShape } = value;
  48. const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor, lineWidth } = _a, shapeTheme = __rest(_a, ["defaultColor", "lineWidth"]);
  49. const { color = defaultColor, size = lineWidth } = value;
  50. const arrowMarker = arrow
  51. ? getArrowMarker(arrowSize, Object.assign({ fill: style.stroke || color, stroke: style.stroke || color }, subObject(style, 'arrow')))
  52. : null;
  53. const path = getPath(points, coordinate);
  54. const transform = getTransform(coordinate, value.transform);
  55. return select(new Path({}))
  56. .call(applyStyle, shapeTheme)
  57. .style('d', path)
  58. .style('stroke', color)
  59. .style('lineWidth', size)
  60. .style('transform', transform)
  61. .style('markerEnd', arrowMarker)
  62. .call(applyStyle, style)
  63. .node();
  64. };
  65. };
  66. Line.props = {
  67. defaultMarker: 'line',
  68. defaultEnterAnimation: 'fadeIn',
  69. defaultUpdateAnimation: 'morphing',
  70. defaultExitAnimation: 'fadeOut',
  71. };
  72. //# sourceMappingURL=line.js.map