@antv/g2plot/lib/plots/pie/component/label/base-label.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 g2_1 = require("@antv/g2");
var utils_1 = require("./utils");
var text_1 = require("./utils/text");
var PieElementLabels = g2_1.getElementLabels('pie');
/**
 * @desc eva-pie 所有自定义 pie-label 的基类
 */
var default_1 = /** @class */ (function (_super) {
    tslib_1.__extends(default_1, _super);
    function default_1() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    default_1.prototype.showLabels = function (points, shapes) {
        var _this = this;
        _super.prototype.showLabels.call(this, points, shapes);
        var view = this.get('element').get('view');
        var coord = this.get('coord');
        var panel = view.get('panelRange');
        // 调整
        var renderer = this.get('labelsRenderer');
        var labels = renderer.get('group').get('children');
        // 注入data数据
        var data = view.get('data');
        var fields = this.getLabelOptions().fields;
        var angleField = fields[0];
        var colorField = fields[1];
        var scale = view.get('scales')[angleField];
        labels.forEach(function (label, idx) {
            var dataItem = data[idx];
            var percentage = scale.scale(dataItem[angleField]);
            label.attr('data', { value: dataItem[angleField], name: dataItem[colorField], percent: percentage });
        });
        var items = renderer.get('items') || [];
        // 处理 label anchors
        this.anchors = [];
        var anchorRadius = coord.getRadius() + this.getOffsetOfLabel();
        this.anchorRadius = anchorRadius;
        labels.forEach(function (label, idx) {
            var item = items[idx];
            var point = utils_1.getEndPoint(coord.getCenter(), item.angle, anchorRadius);
            _this.anchors.push(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, item), point), { id: label.id }));
        });
        var labelLines = renderer.get('lineGroup').get('children') || [];
        this.adjustPosition(labels, items, coord, panel);
        this.adjustTexts(labels, items, coord, panel);
        // should adjust overlap before asjustLines
        this.adjustOverlap(labels, panel);
        this.adjustLines(labels, items, labelLines, coord, panel);
        view.get('canvas').draw();
    };
    /** 调整 label texts */
    default_1.prototype.adjustTexts = function (labels, items, coord, panel) {
        var _this = this;
        labels.forEach(function (label) {
            var anchor = items.find(function (v) { return v.id === label.id; });
            _this.adjustLabelText(label, anchor, coord, panel);
        });
    };
    default_1.prototype.adjustItems = function (originItems) {
        // could not extends super
        return originItems;
    };
    /** 调整 label text */
    default_1.prototype.adjustLabelText = function (label, item, coord, panel) {
        var box = label.getBBox();
        var textAlign = item.textAlign;
        var maxWidth = textAlign === 'right' ? box.maxX - panel.minX : panel.maxX - box.minX;
        if (maxWidth < box.width) {
            var font_1 = {
                fontFamily: label.attr('fontFamily'),
                fontSize: label.attr('fontSize'),
                fontVariant: label.attr('fontVariant'),
                fontWeight: label.attr('fontWeight'),
                fontStyle: label.attr('fontStyle'),
            };
            var originText = label.attr('text');
            var data = label.attr('data');
            /** label 优先级: 数值 - 百分比 - 分类名(先通过正则的方式处理) */
            var priority_1 = ['[\\d,.]*', '[\\d.]*%', data.name];
            var EllipsisTextArr = originText.split('\n').map(function (t) { return text_1.getEllipsisText(t, maxWidth - 2, font_1, priority_1); });
            label.attr('text', EllipsisTextArr.join('\n'));
        }
    };
    /** 处理标签遮挡问题 */
    default_1.prototype.adjustOverlap = function (labels, panel) {
        var _this = this;
        if (this.getLabelOptions().allowOverlap) {
            return;
        }
        // clearOverlap;
        for (var i = 1; i < labels.length; i++) {
            var label = labels[i];
            var overlapArea = 0;
            for (var j = i - 1; j >= 0; j--) {
                var prev = labels[j];
                // fix: start draw point.x is error when textAlign is right
                var prevBox = prev.getBBox();
                var currBox = label.getBBox();
                // if the previous one is invisible, skip
                if (prev.get('visible')) {
                    overlapArea = utils_1.getOverlapArea(prevBox, currBox);
                    if (!utils_1.near(overlapArea, 0)) {
                        label.set('visible', false);
                        break;
                    }
                }
            }
        }
        labels.forEach(function (label) { return _this.checkInPanel(label, panel); });
    };
    /**
     * 超出panel边界的标签默认隐藏
     */
    default_1.prototype.checkInPanel = function (label, panel) {
        var box = label.getBBox();
        //  横向溢出 暂不隐藏
        if (!(panel.y <= box.y && panel.y + panel.height >= box.y + box.height)) {
            label.set('visible', false);
        }
    };
    default_1.prototype.getLabelOptions = function () {
        return this.get('labelOptions');
    };
    return default_1;
}(PieElementLabels));
exports.default = default_1;
//# sourceMappingURL=base-label.js.map