swOperation/node_modules/@antv/component/esm/annotation/data-marker.js

import { __assign, __extends, __rest } from "tslib";
import { get } from '@antv/util';
import GroupComponent from '../abstract/group-component';
import { renderTag } from '../util/graphic';
import { applyTranslate } from '../util/matrix';
import Theme from '../util/theme';
var DataMarkerAnnotation = /** @class */ (function (_super) {
    __extends(DataMarkerAnnotation, _super);
    function DataMarkerAnnotation() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * 默认的配置项
     * @returns {object} 默认的配置项
     */
    DataMarkerAnnotation.prototype.getDefaultCfg = function () {
        var cfg = _super.prototype.getDefaultCfg.call(this);
        return __assign(__assign({}, cfg), { name: 'annotation', type: 'dataMarker', locationType: 'point', x: 0, y: 0, point: {}, line: {}, text: {}, direction: 'upward', autoAdjust: true, coordinateBBox: null, defaultCfg: {
                point: {
                    display: true,
                    style: {
                        r: 3,
                        fill: '#FFFFFF',
                        stroke: '#1890FF',
                        lineWidth: 2,
                    },
                },
                line: {
                    display: true,
                    length: 20,
                    style: {
                        stroke: Theme.lineColor,
                        lineWidth: 1,
                    },
                },
                text: {
                    content: '',
                    display: true,
                    style: {
                        fill: Theme.textColor,
                        opacity: 0.65,
                        fontSize: 12,
                        textAlign: 'start',
                        fontFamily: Theme.fontFamily,
                    },
                },
            } });
    };
    DataMarkerAnnotation.prototype.renderInner = function (group) {
        if (get(this.get('line'), 'display')) {
            this.renderLine(group);
        }
        if (get(this.get('text'), 'display')) {
            this.renderText(group);
        }
        if (get(this.get('point'), 'display')) {
            this.renderPoint(group);
        }
        if (this.get('autoAdjust')) {
            this.autoAdjust(group);
        }
    };
    DataMarkerAnnotation.prototype.applyOffset = function () {
        this.moveElementTo(this.get('group'), {
            x: this.get('x') + this.get('offsetX'),
            y: this.get('y') + this.get('offsetY'),
        });
    };
    DataMarkerAnnotation.prototype.renderPoint = function (group) {
        var point = this.getShapeAttrs().point;
        this.addShape(group, {
            type: 'circle',
            id: this.getElementId('point'),
            name: 'annotation-point',
            attrs: point,
        });
    };
    DataMarkerAnnotation.prototype.renderLine = function (group) {
        var line = this.getShapeAttrs().line;
        this.addShape(group, {
            type: 'path',
            id: this.getElementId('line'),
            name: 'annotation-line',
            attrs: line,
        });
    };
    DataMarkerAnnotation.prototype.renderText = function (group) {
        var textAttrs = this.getShapeAttrs().text;
        var x = textAttrs.x, y = textAttrs.y, text = textAttrs.text, style = __rest(textAttrs, ["x", "y", "text"]);
        var _a = this.get('text'), background = _a.background, maxLength = _a.maxLength, autoEllipsis = _a.autoEllipsis, isVertival = _a.isVertival, ellipsisPosition = _a.ellipsisPosition;
        var tagCfg = {
            x: x,
            y: y,
            id: this.getElementId('text'),
            name: 'annotation-text',
            content: text,
            style: style,
            background: background,
            maxLength: maxLength,
            autoEllipsis: autoEllipsis,
            isVertival: isVertival,
            ellipsisPosition: ellipsisPosition,
        };
        renderTag(group, tagCfg);
    };
    DataMarkerAnnotation.prototype.autoAdjust = function (group) {
        var direction = this.get('direction');
        var x = this.get('x');
        var y = this.get('y');
        var lineLength = get(this.get('line'), 'length', 0);
        var coordinateBBox = this.get('coordinateBBox');
        var _a = group.getBBox(), minX = _a.minX, maxX = _a.maxX, minY = _a.minY, maxY = _a.maxY;
        var textGroup = group.findById(this.getElementId('text-group'));
        var textShape = group.findById(this.getElementId('text'));
        var lineShape = group.findById(this.getElementId('line'));
        if (!coordinateBBox) {
            return;
        }
        if (textGroup) {
            var translateX = textGroup.attr('x'), translateY = textGroup.attr('y');
            var _b = textShape.getCanvasBBox(), width = _b.width, height = _b.height;
            var xFactor = 0, yFactor = 0;
            if (x + minX <= coordinateBBox.minX) {
                // 左侧超出
                if (direction === 'leftward') {
                    xFactor = 1;
                }
                else {
                    var overflow = coordinateBBox.minX - (x + minX);
                    translateX = textGroup.attr('x') + overflow;
                }
            }
            else if (x + maxX >= coordinateBBox.maxX) {
                // 右侧超出
                if (direction === 'rightward') {
                    xFactor = -1;
                }
                else {
                    var overflow = x + maxX - coordinateBBox.maxX;
                    translateX = textGroup.attr('x') - overflow;
                }
            }
            if (!!xFactor) {
                if (lineShape) {
                    lineShape.attr('path', [
                        ['M', 0, 0],
                        ['L', lineLength * xFactor, 0],
                    ]);
                }
                translateX = (lineLength + 2 + width) * xFactor;
            }
            if (y + minY <= coordinateBBox.minY) {
                // 上方超出
                if (direction === 'upward') {
                    yFactor = 1;
                }
                else {
                    var overflow = coordinateBBox.minY - (y + minY);
                    translateY = textGroup.attr('y') + overflow;
                }
            }
            else if (y + maxY >= coordinateBBox.maxY) {
                // 下方超出
                if (direction === 'downward') {
                    yFactor = -1;
                }
                else {
                    var overflow = y + maxY - coordinateBBox.maxY;
                    translateY = textGroup.attr('y') - overflow;
                }
            }
            if (!!yFactor) {
                if (lineShape) {
                    lineShape.attr('path', [
                        ['M', 0, 0],
                        ['L', 0, lineLength * yFactor],
                    ]);
                }
                translateY = (lineLength + 2 + height) * yFactor;
            }
            if (translateX !== textGroup.attr('x') || translateY !== textGroup.attr('y'))
                applyTranslate(textGroup, translateX, translateY);
        }
    };
    DataMarkerAnnotation.prototype.getShapeAttrs = function () {
        var lineDisplay = get(this.get('line'), 'display');
        var pointStyle = get(this.get('point'), 'style', {});
        var lineStyle = get(this.get('line'), 'style', {});
        var textStyle = get(this.get('text'), 'style', {});
        var direction = this.get('direction');
        var lineLength = lineDisplay ? get(this.get('line'), 'length', 0) : 0;
        var xFactor = 0, yFactor = 0;
        var textBaseline = 'top', textAlign = 'start';
        switch (direction) {
            case 'upward':
                yFactor = -1;
                textBaseline = 'bottom';
                break;
            case 'downward':
                yFactor = 1;
                textBaseline = 'top';
                break;
            case 'leftward':
                xFactor = -1;
                textAlign = 'end';
                break;
            case 'rightward':
                xFactor = 1;
                textAlign = 'start';
                break;
        }
        return {
            point: __assign({ x: 0, y: 0 }, pointStyle),
            line: __assign({ path: [
                    ['M', 0, 0],
                    ['L', lineLength * xFactor, lineLength * yFactor],
                ] }, lineStyle),
            text: __assign({ x: (lineLength + 2) * xFactor, y: (lineLength + 2) * yFactor, text: get(this.get('text'), 'content', ''), textBaseline: textBaseline,
                textAlign: textAlign }, textStyle),
        };
    };
    return DataMarkerAnnotation;
}(GroupComponent));
export default DataMarkerAnnotation;
//# sourceMappingURL=data-marker.js.map