curve.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. "use strict";
  2. var __rest = (this && this.__rest) || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  5. t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  7. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  9. t[p[i]] = s[p[i]];
  10. }
  11. return t;
  12. };
  13. Object.defineProperty(exports, "__esModule", { value: true });
  14. exports.Curve = void 0;
  15. const d3_shape_1 = require("d3-shape");
  16. const g_1 = require("@antv/g");
  17. const coordinate_1 = require("../../utils/coordinate");
  18. const selection_1 = require("../../utils/selection");
  19. const utils_1 = require("../utils");
  20. const createElement_1 = require("../../utils/createElement");
  21. const helper_1 = require("../../utils/helper");
  22. const vector_1 = require("../../utils/vector");
  23. const DoublePath = (0, createElement_1.createElement)((g) => {
  24. const { d1, d2, style1, style2 } = g.attributes;
  25. (0, selection_1.select)(g)
  26. .maybeAppend('line', () => new g_1.Path({}))
  27. .style('d', d1)
  28. .call(utils_1.applyStyle, style1);
  29. (0, selection_1.select)(g)
  30. .maybeAppend('line1', () => new g_1.Path({}))
  31. .style('d', d2)
  32. .call(utils_1.applyStyle, style2);
  33. });
  34. /**
  35. * Given a points sequence, split it into an array of defined points
  36. * and an array of undefined segments.
  37. *
  38. * Input - [[1, 2], [3, 4], [null, null], [null, null], [5, 6], [null, null], [7, 8]]
  39. * Output
  40. * - [[1, 2], [3, 4], [5, 6], [7, 8]]
  41. * - [
  42. * [[3, 4], [5, 6]],
  43. * [[5, 6], [7, 8]]
  44. * ]
  45. */
  46. function segmentation(points, defined) {
  47. const definedPoints = [];
  48. const segments = [];
  49. let m = false; // Is in a undefined sequence.
  50. let dp = null; // The previous defined point.
  51. for (const p of points) {
  52. // If current point is a undefined point,
  53. // enter a undefined sequence.
  54. if (!defined(p[0]) || !defined(p[1]))
  55. m = true;
  56. else {
  57. definedPoints.push(p);
  58. // If current point is a defined point,
  59. // and is in a undefined sequence, save
  60. // the two closest defined points as this
  61. // undefined sequence and exit it.
  62. if (m) {
  63. m = false;
  64. segments.push([dp, p]);
  65. }
  66. // Update the previous defined point.
  67. dp = p;
  68. }
  69. }
  70. return [definedPoints, segments];
  71. }
  72. const Curve = (options) => {
  73. const { curve, gradient = false,
  74. // The color for each segment.
  75. gradientColor = 'between', defined = (d) => !Number.isNaN(d) && d !== undefined && d !== null, connect: connectNulls = false } = options, style = __rest(options, ["curve", "gradient", "gradientColor", "defined", "connect"]);
  76. return (P, value, coordinate, theme) => {
  77. // Compute styles.
  78. const { mark, shape, defaultShape } = value;
  79. const _a = (0, utils_1.getShapeTheme)(theme, mark, shape, defaultShape), { defaultColor, lineWidth: defaultSize } = _a, defaults = __rest(_a, ["defaultColor", "lineWidth"]);
  80. const { color = defaultColor, size = defaultSize, seriesColor: sc, seriesX: sx, seriesY: sy, } = value;
  81. const stroke = gradient && sc
  82. ? (0, utils_1.computeGradient)(sc, sx, sy, gradient, gradientColor)
  83. : color;
  84. const transform = (0, utils_1.getTransform)(coordinate, value);
  85. const finalStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaults), (stroke && { stroke })), (size && { lineWidth: size })), (transform && { transform })), style);
  86. // Compute points and segments.
  87. let linePath;
  88. if ((0, coordinate_1.isPolar)(coordinate)) {
  89. const center = coordinate.getCenter();
  90. linePath = (points) => (0, d3_shape_1.lineRadial)()
  91. .angle((_, idx) => (0, vector_1.angleWithQuadrant)((0, vector_1.sub)(points[idx], center)))
  92. .radius((_, idx) => (0, vector_1.dist)(points[idx], center))
  93. .defined(([x, y]) => defined(x) && defined(y))
  94. .curve(curve)(points);
  95. }
  96. else {
  97. linePath = (0, d3_shape_1.line)()
  98. .x((d) => d[0])
  99. .y((d) => d[1])
  100. .defined(([x, y]) => defined(x) && defined(y))
  101. .curve(curve);
  102. }
  103. const [DP, MS] = segmentation(P, defined);
  104. const connectStyle = (0, helper_1.subObject)(finalStyle, 'connect');
  105. const missing = !!MS.length;
  106. // Draw one path of connected defined points.
  107. if (!missing || (connectNulls && !Object.keys(connectStyle).length)) {
  108. return (0, selection_1.select)(new g_1.Path({}))
  109. .style('d', linePath(DP) || [])
  110. .call(utils_1.applyStyle, finalStyle)
  111. .node();
  112. }
  113. // Draw one path of unconnected defined points.
  114. if (missing && !connectNulls) {
  115. return (0, selection_1.select)(new g_1.Path({}))
  116. .style('d', linePath(P))
  117. .call(utils_1.applyStyle, finalStyle)
  118. .node();
  119. }
  120. // Draw two path.
  121. // One for unconnected defined points.
  122. // One for connected segments.
  123. const connectPath = (segments) => segments.map(linePath).join(',');
  124. return (0, selection_1.select)(new DoublePath())
  125. .style('style1', Object.assign(Object.assign({}, finalStyle), connectStyle))
  126. .style('style2', finalStyle)
  127. .style('d1', connectPath(MS))
  128. .style('d2', linePath(P))
  129. .node();
  130. };
  131. };
  132. exports.Curve = Curve;
  133. exports.Curve.props = {
  134. defaultMarker: 'smooth',
  135. defaultEnterAnimation: 'fadeIn',
  136. defaultUpdateAnimation: 'morphing',
  137. defaultExitAnimation: 'fadeOut',
  138. };
  139. //# sourceMappingURL=curve.js.map