connector.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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 { Marker } from '@antv/gui';
  13. import { line as d3line } from 'd3-shape';
  14. import { createElement } from '../../utils/createElement';
  15. import { isTranspose } from '../../utils/coordinate';
  16. import { subObject } from '../../utils/helper';
  17. import { select } from '../../utils/selection';
  18. import { applyStyle, getShapeTheme } from '../utils';
  19. function inferSymbol(x, y, r) {
  20. return [['M', x, y], ['L', x + 2 * r, y - r], ['L', x + 2 * r, y + r], ['Z']];
  21. }
  22. /**
  23. * @todo support polar later.
  24. */
  25. function inferConnectorPath(points) {
  26. return d3line()
  27. .x((d) => d[0])
  28. .y((d) => d[1])(points);
  29. }
  30. const ConnectorPath = createElement((g) => {
  31. // Do not copy className to path.
  32. const _a = g.attributes, { points, class: className, endMarker = true, direction } = _a, rest = __rest(_a, ["points", "class", "endMarker", "direction"]);
  33. const markerStyle = subObject(rest, 'endMarker');
  34. const path = inferConnectorPath(points);
  35. select(g)
  36. .maybeAppend('connector', 'path')
  37. .style('path', path)
  38. .style('markerEnd', endMarker
  39. ? new Marker({
  40. className: 'marker',
  41. style: Object.assign(Object.assign({}, markerStyle), { symbol: inferSymbol }),
  42. })
  43. : null)
  44. .call(applyStyle, rest);
  45. });
  46. function getPoints(coordinate, points, offset, length1 = 0) {
  47. const [[x0, y0], [x1, y1]] = points;
  48. if (isTranspose(coordinate)) {
  49. const OFFSET = offset;
  50. const X0 = x0 + OFFSET;
  51. const X1 = x1 + OFFSET;
  52. const X = X0 + length1;
  53. return [
  54. [X0, y0],
  55. [X, y0],
  56. [X, y1],
  57. [X1, y1],
  58. ];
  59. }
  60. const OFFSET = -offset;
  61. const Y0 = y0 + OFFSET;
  62. const Y1 = y1 + OFFSET;
  63. const Y = Y0 + -length1;
  64. return [
  65. [x0, Y0],
  66. [x0, Y],
  67. [x1, Y],
  68. [x1, Y1],
  69. ];
  70. }
  71. export const Connector = (options) => {
  72. const { offset = 0, connectLength1: length1 } = options, style = __rest(options, ["offset", "connectLength1"]);
  73. return (points, value, coordinate, theme) => {
  74. const { mark, shape, defaultShape } = value;
  75. const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor, connectLength1 = length1 } = _a, shapeTheme = __rest(_a, ["defaultColor", "connectLength1"]);
  76. const { color, transform } = value;
  77. const P = getPoints(coordinate, points, offset, connectLength1);
  78. return select(new ConnectorPath())
  79. .call(applyStyle, shapeTheme)
  80. .style('points', P)
  81. .style('stroke', color || defaultColor)
  82. .style('transform', transform)
  83. .call(applyStyle, style)
  84. .node();
  85. };
  86. };
  87. Connector.props = {
  88. defaultMarker: 'line',
  89. defaultEnterAnimation: 'fadeIn',
  90. defaultUpdateAnimation: 'morphing',
  91. defaultExitAnimation: 'fadeOut',
  92. };
  93. //# sourceMappingURL=connector.js.map