@antv/g2plot/lib/plots/line/animation/clipIn-with-data.js

G2 Plot, a market of plots built with the Grammar of Graphics'

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var G = tslib_1.__importStar(require("@antv/g"));
var g2_1 = require("@antv/g2");
var _ = tslib_1.__importStar(require("@antv/util"));
function clipingWithData(shape, animateCfg) {
    /** 动画初始状态 */
    var index = shape.get('index');
    var coord = shape.get('coord');
    var scales = shape.get('scales');
    var yScale = scales[animateCfg.yField];
    var shapeData = _.clone(shape.get('origin'));
    var clip = getClip(coord);
    shape.attr('clip', clip);
    shape.setSilent('animating', true);
    var label = getLineLabel(animateCfg.plot.view, shapeData[0]._origin[animateCfg.seriesField]);
    if (label && !label.get('destroyed')) {
        label.set('visible', false);
    }
    var parent = shape.get('parent');
    var offsetX = 12;
    var title;
    if (animateCfg.seriesField) {
        title = parent.addShape('text', {
            attrs: {
                x: coord.start.x + offsetX,
                y: 0,
                text: shapeData[0]._origin[animateCfg.seriesField],
                fill: shape.attr('stroke'),
                fontSize: 12,
                textAlign: 'start',
                textBaseline: 'middle',
            },
        });
    }
    var offsetY = title ? 16 : 0;
    var marker = parent.addShape('text', {
        attrs: {
            x: coord.start.x + offsetX,
            y: offsetY,
            text: "test" + index,
            fill: shape.attr('stroke'),
            fontSize: 12,
            textAlign: 'start',
            textBaseline: 'middle',
        },
    });
    /** 动画执行之后 */
    animateCfg.callback = function () {
        if (shape && !shape.get('destroyed')) {
            shape.attr('clip', null);
            shape.setSilent('cacheShape', null);
            shape.setSilent('animating', false);
            clip.remove();
            marker.animate({
                opacity: 0,
            }, 300, function () {
                marker.remove();
                if (label && !label.get('destroyed')) {
                    label.set('visible', true);
                    animateCfg.plot.canvas.draw();
                }
            });
            if (title) {
                marker.animate({
                    opacity: 0,
                }, 300, function () {
                    marker.remove();
                });
            }
        }
    };
    /** 执行动画 */
    /** 准备动画参数 */
    var delay = animateCfg.delay;
    if (_.isFunction(delay)) {
        delay = animateCfg.delay(index);
    }
    var easing = animateCfg.easing;
    if (_.isFunction(easing)) {
        easing = animateCfg.easing(index);
    }
    /** 动起来 */
    var i = 0;
    clip.animate({
        width: coord.getWidth(),
    }, animateCfg.duration, easing, animateCfg.callback, delay);
    marker.animate({
        onFrame: function (ratio) {
            var position = getPositionByRatio(ratio, shapeData, coord, i);
            if (!position)
                return;
            marker.attr('x', position[0] + offsetX);
            marker.attr('y', position[1] + offsetY);
            var yText = getDataByPosition(yScale, position[1], coord);
            // use formatter
            if (yScale.formatter) {
                yText = yScale.formatter(yText);
            }
            marker.attr('text', yText);
        },
    }, animateCfg.duration, easing, animateCfg.callback, delay);
    if (title) {
        title.animate({
            onFrame: function (ratio) {
                var position = getPositionByRatio(ratio, shapeData, coord, i);
                if (!position)
                    return;
                title.attr('x', position[0] + offsetX);
                title.attr('y', position[1]);
            },
        }, animateCfg.duration, easing, animateCfg.callback, delay);
    }
}
function getClip(coord) {
    var start = coord.start, end = coord.end, width = coord.width, height = coord.height;
    var clip = new G.Shapes.Rect({
        attrs: {
            x: start.x,
            y: end.y,
            width: 0,
            height: height,
        },
    });
    clip.set('isClip', true);
    return clip;
}
function getPositionByRatio(ratio, dataPoints, coord, index) {
    var currentX = coord.start.x + coord.getWidth() * ratio;
    for (var i = 0; i < dataPoints.length - 1; i++) {
        var current = dataPoints[i];
        var next = dataPoints[i + 1];
        if (currentX >= current.x && currentX <= next.x) {
            var m = (next.y - current.y) / (next.x - current.x); // 斜率
            var y = current.y + m * (currentX - current.x);
            return [currentX, y];
        }
    }
}
function getDataByPosition(scale, y, coord) {
    var yRatio = (y - coord.start.y) / (coord.end.y - coord.start.y);
    return scale.invert(yRatio).toFixed(2);
}
function getLineLabel(view, name) {
    var label;
    var elements = view.get('elements');
    _.each(elements, function (e) {
        if (e.get('type') === 'line') {
            if (e.get('labelController')) {
                var labelContainer = e.get('labelController').labelsContainer;
                if (labelContainer) {
                    var labels = labelContainer.get('labelsRenderer').getLabels();
                    _.each(labels, function (l) {
                        if (l.attr('text') === name) {
                            label = l;
                        }
                    });
                }
            }
        }
    });
    return label;
}
g2_1.Animate.registerAnimation('appear', 'clipingWithData', clipingWithData);
//# sourceMappingURL=clipIn-with-data.js.map