| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- "use strict";
- var __rest = (this && this.__rest) || function (s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
- t[p[i]] = s[p[i]];
- }
- return t;
- };
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.Curve = void 0;
- const d3_shape_1 = require("d3-shape");
- const g_1 = require("@antv/g");
- const coordinate_1 = require("../../utils/coordinate");
- const selection_1 = require("../../utils/selection");
- const utils_1 = require("../utils");
- const createElement_1 = require("../../utils/createElement");
- const helper_1 = require("../../utils/helper");
- const vector_1 = require("../../utils/vector");
- const DoublePath = (0, createElement_1.createElement)((g) => {
- const { d1, d2, style1, style2 } = g.attributes;
- (0, selection_1.select)(g)
- .maybeAppend('line', () => new g_1.Path({}))
- .style('d', d1)
- .call(utils_1.applyStyle, style1);
- (0, selection_1.select)(g)
- .maybeAppend('line1', () => new g_1.Path({}))
- .style('d', d2)
- .call(utils_1.applyStyle, style2);
- });
- /**
- * Given a points sequence, split it into an array of defined points
- * and an array of undefined segments.
- *
- * Input - [[1, 2], [3, 4], [null, null], [null, null], [5, 6], [null, null], [7, 8]]
- * Output
- * - [[1, 2], [3, 4], [5, 6], [7, 8]]
- * - [
- * [[3, 4], [5, 6]],
- * [[5, 6], [7, 8]]
- * ]
- */
- function segmentation(points, defined) {
- const definedPoints = [];
- const segments = [];
- let m = false; // Is in a undefined sequence.
- let dp = null; // The previous defined point.
- for (const p of points) {
- // If current point is a undefined point,
- // enter a undefined sequence.
- if (!defined(p[0]) || !defined(p[1]))
- m = true;
- else {
- definedPoints.push(p);
- // If current point is a defined point,
- // and is in a undefined sequence, save
- // the two closest defined points as this
- // undefined sequence and exit it.
- if (m) {
- m = false;
- segments.push([dp, p]);
- }
- // Update the previous defined point.
- dp = p;
- }
- }
- return [definedPoints, segments];
- }
- const Curve = (options) => {
- const { curve, gradient = false,
- // The color for each segment.
- gradientColor = 'between', defined = (d) => !Number.isNaN(d) && d !== undefined && d !== null, connect: connectNulls = false } = options, style = __rest(options, ["curve", "gradient", "gradientColor", "defined", "connect"]);
- return (P, value, coordinate, theme) => {
- // Compute styles.
- const { mark, shape, defaultShape } = value;
- const _a = (0, utils_1.getShapeTheme)(theme, mark, shape, defaultShape), { defaultColor, lineWidth: defaultSize } = _a, defaults = __rest(_a, ["defaultColor", "lineWidth"]);
- const { color = defaultColor, size = defaultSize, seriesColor: sc, seriesX: sx, seriesY: sy, } = value;
- const stroke = gradient && sc
- ? (0, utils_1.computeGradient)(sc, sx, sy, gradient, gradientColor)
- : color;
- const transform = (0, utils_1.getTransform)(coordinate, value);
- const finalStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaults), (stroke && { stroke })), (size && { lineWidth: size })), (transform && { transform })), style);
- // Compute points and segments.
- let linePath;
- if ((0, coordinate_1.isPolar)(coordinate)) {
- const center = coordinate.getCenter();
- linePath = (points) => (0, d3_shape_1.lineRadial)()
- .angle((_, idx) => (0, vector_1.angleWithQuadrant)((0, vector_1.sub)(points[idx], center)))
- .radius((_, idx) => (0, vector_1.dist)(points[idx], center))
- .defined(([x, y]) => defined(x) && defined(y))
- .curve(curve)(points);
- }
- else {
- linePath = (0, d3_shape_1.line)()
- .x((d) => d[0])
- .y((d) => d[1])
- .defined(([x, y]) => defined(x) && defined(y))
- .curve(curve);
- }
- const [DP, MS] = segmentation(P, defined);
- const connectStyle = (0, helper_1.subObject)(finalStyle, 'connect');
- const missing = !!MS.length;
- // Draw one path of connected defined points.
- if (!missing || (connectNulls && !Object.keys(connectStyle).length)) {
- return (0, selection_1.select)(new g_1.Path({}))
- .style('d', linePath(DP) || [])
- .call(utils_1.applyStyle, finalStyle)
- .node();
- }
- // Draw one path of unconnected defined points.
- if (missing && !connectNulls) {
- return (0, selection_1.select)(new g_1.Path({}))
- .style('d', linePath(P))
- .call(utils_1.applyStyle, finalStyle)
- .node();
- }
- // Draw two path.
- // One for unconnected defined points.
- // One for connected segments.
- const connectPath = (segments) => segments.map(linePath).join(',');
- return (0, selection_1.select)(new DoublePath())
- .style('style1', Object.assign(Object.assign({}, finalStyle), connectStyle))
- .style('style2', finalStyle)
- .style('d1', connectPath(MS))
- .style('d2', linePath(P))
- .node();
- };
- };
- exports.Curve = Curve;
- exports.Curve.props = {
- defaultMarker: 'smooth',
- defaultEnterAnimation: 'fadeIn',
- defaultUpdateAnimation: 'morphing',
- defaultExitAnimation: 'fadeOut',
- };
- //# sourceMappingURL=curve.js.map
|