vhv.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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 { path as d3path } from 'd3-path';
  14. import { appendArc, applyStyle, getShapeTheme } from '../utils';
  15. import { select } from '../../utils/selection';
  16. import { isTranspose, isPolar } from '../../utils/coordinate';
  17. import { dist } from '../../utils/vector';
  18. /**
  19. * Get vhv path in different coordinate.
  20. */
  21. function getVHVPath(from, to, coordinate, ratio) {
  22. const path = d3path();
  23. if (isPolar(coordinate)) {
  24. const center = coordinate.getCenter();
  25. const a = dist(from, center);
  26. const b = dist(to, center);
  27. const radius = (b - a) * ratio + a;
  28. path.moveTo(from[0], from[1]);
  29. appendArc(path, from, to, center, radius);
  30. path.lineTo(to[0], to[1]);
  31. return path;
  32. }
  33. if (isTranspose(coordinate)) {
  34. path.moveTo(from[0], from[1]);
  35. // VHV in x.
  36. path.lineTo(from[0] + (to[0] - from[0]) * ratio, from[1]);
  37. path.lineTo(from[0] + (to[0] - from[0]) * ratio, to[1]);
  38. path.lineTo(to[0], to[1]);
  39. return path;
  40. }
  41. path.moveTo(from[0], from[1]);
  42. // VHV in y.
  43. path.lineTo(from[0], from[1] + (to[1] - from[1]) * ratio);
  44. path.lineTo(to[0], from[1] + (to[1] - from[1]) * ratio);
  45. path.lineTo(to[0], to[1]);
  46. return path;
  47. }
  48. /**
  49. * Connect 2 points with a VHV line, used in tree.
  50. */
  51. export const VHV = (options) => {
  52. const { cornerRatio = 1 / 3 } = options, style = __rest(options, ["cornerRatio"]);
  53. return (points, value, coordinate, theme) => {
  54. const { mark, shape, defaultShape } = value;
  55. const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor } = _a, shapeTheme = __rest(_a, ["defaultColor"]);
  56. const { color = defaultColor, transform } = value;
  57. const [from, to] = points;
  58. const path = getVHVPath(from, to, coordinate, cornerRatio);
  59. return select(new Path())
  60. .call(applyStyle, shapeTheme)
  61. .style('d', path.toString())
  62. .style('stroke', color)
  63. .style('transform', transform)
  64. .call(applyStyle, style)
  65. .node();
  66. };
  67. };
  68. VHV.props = {
  69. defaultMarker: 'vhv',
  70. defaultEnterAnimation: 'fadeIn',
  71. defaultUpdateAnimation: 'morphing',
  72. defaultExitAnimation: 'fadeOut',
  73. };
  74. //# sourceMappingURL=vhv.js.map