123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- 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;
- };
- import { area, areaRadial } from 'd3-shape';
- import { Path } from '@antv/g';
- import { select } from '../../utils/selection';
- import { isPolar, isTranspose } from '../../utils/coordinate';
- import { angleWithQuadrant, sub, dist } from '../../utils/vector';
- import { applyStyle, computeGradient, getShapeTheme, getTransform, } from '../utils';
- import { subObject } from '../../utils/helper';
- import { createElement } from '../../utils/createElement';
- const DoubleArea = createElement((g) => {
- const { areaPath, connectPath, areaStyle, connectStyle } = g.attributes;
- select(g)
- .maybeAppend('connect-path', () => new Path({}))
- .style('d', connectPath)
- .call(applyStyle, connectStyle);
- select(g)
- .maybeAppend('area-path', () => new Path({}))
- .style('d', areaPath)
- .call(applyStyle, areaStyle);
- });
- /**
- * Given a points sequence, split it into an array of defined points
- * and an array of undefined segments.
- *
- * Input - [p0, p1, p2, p3, p4, p5], p1 ~ p2 is `Y1`, p3 ~ p5 is `Y0`.
- * Output - When all of Y1 & Y0 is defined, move into defined points, or else undefined segments.
- */
- function segmentation(points, defined) {
- const definedPointsY1 = [];
- const definedPointsY0 = [];
- const segments = [];
- let m = false; // Is in a undefined sequence.
- let dp = null; // The previous defined point.
- const mid = points.length / 2;
- for (let i = 0; i < mid; i++) {
- const y1 = points[i];
- const y0 = points[i + mid];
- // If current point is a undefined point,
- // enter a undefined sequence.
- if ([...y1, ...y0].some((v) => !defined(v)))
- m = true;
- else {
- definedPointsY1.push(y1);
- definedPointsY0.push(y0);
- // 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 && dp) {
- m = false;
- const [dpy1, dpy0] = dp;
- segments.push([dpy1, y1, dpy0, y0]);
- }
- // Update the previous defined point.
- dp = [y1, y0];
- }
- }
- return [definedPointsY1.concat(definedPointsY0), segments];
- }
- export const Curve = (options) => {
- const { curve, gradient = false, defined = (d) => !Number.isNaN(d) && d !== undefined && d !== null, connect: connectNulls = false } = options, style = __rest(options, ["curve", "gradient", "defined", "connect"]);
- return (P, value, coordinate, theme) => {
- const { mark, shape, defaultShape } = value;
- const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor } = _a, defaults = __rest(_a, ["defaultColor"]);
- const { color = defaultColor, seriesColor: sc, seriesX: sx, seriesY: sy, } = value;
- const transform = getTransform(coordinate, value);
- const fill = gradient && sc ? computeGradient(sc, sx, sy, gradient) : color;
- const finalStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, defaults), { stroke: fill, fill: fill }), (transform && { transform })), style);
- const [DP, MS] = segmentation(P, defined);
- const connectStyle = subObject(finalStyle, 'connect');
- const missing = !!MS.length;
- const getPathNode = (path) => {
- return select(new Path({}))
- .style('d', path)
- .call(applyStyle, finalStyle)
- .node();
- };
- if (!isPolar(coordinate)) {
- /**
- * Draw area shape by points.
- */
- const areaPath = (points) => {
- const Y1 = points.slice(0, points.length / 2);
- const Y0 = points.slice(points.length / 2);
- return isTranspose(coordinate)
- ? area()
- .y((_, idx) => Y1[idx][1])
- .x1((_, idx) => Y1[idx][0])
- .x0((_, idx) => Y0[idx][0])
- .defined((_, idx) => [...Y1[idx], ...Y0[idx]].every(defined))
- .curve(curve)(Y1)
- : area()
- .x((_, idx) => Y1[idx][0])
- .y1((_, idx) => Y1[idx][1])
- .y0((_, idx) => Y0[idx][1])
- .defined((_, idx) => [...Y1[idx], ...Y0[idx]].every(defined))
- .curve(curve)(Y1);
- };
- // Draw one area of connected defined points.
- if (!missing || (connectNulls && !Object.keys(connectStyle).length)) {
- return getPathNode(areaPath(DP));
- }
- // Draw one area of unconnected defined points.
- if (missing && !connectNulls) {
- return getPathNode(areaPath(P));
- }
- // Draw two area.
- // One for unconnected defined points.
- // One for connected segments.
- return select(new DoubleArea())
- .style('areaStyle', finalStyle)
- .style('connectStyle', Object.assign(Object.assign({}, connectStyle), style))
- .style('areaPath', areaPath(P))
- .style('connectPath', MS.map(areaPath).join(''))
- .node();
- }
- else {
- /**
- * Draw areaRadial shape by points.
- */
- const areaRadialPath = (points) => {
- const center = coordinate.getCenter();
- const Y1 = points.slice(0, points.length / 2);
- const Y0 = points.slice(points.length / 2);
- return areaRadial()
- .angle((_, idx) => angleWithQuadrant(sub(Y1[idx], center)))
- .outerRadius((_, idx) => dist(Y1[idx], center))
- .innerRadius((_, idx) => dist(Y0[idx], center))
- .defined((_, idx) => [...Y1[idx], ...Y0[idx]].every(defined))
- .curve(curve)(Y0);
- };
- // Draw one area of connected defined points.
- if (!missing || (connectNulls && !Object.keys(connectStyle).length)) {
- return getPathNode(areaRadialPath(DP));
- }
- // Draw one area of unconnected defined points.
- if (missing && !connectNulls) {
- return getPathNode(areaRadialPath(P));
- }
- // Draw two area.
- // One for unconnected defined points.
- // One for connected segments.
- return select(new DoubleArea())
- .style('areaStyle', finalStyle)
- .style('connectStyle', Object.assign(Object.assign({}, connectStyle), style))
- .style('areaPath', areaRadialPath(P))
- .style('connectPath', MS.map(areaRadialPath).join(''))
- .node();
- }
- };
- };
- Curve.props = {
- defaultMarker: 'smooth',
- defaultEnterAnimation: 'fadeIn',
- defaultUpdateAnimation: 'morphing',
- defaultExitAnimation: 'fadeOut',
- };
- //# sourceMappingURL=curve.js.map
|