"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var tslib_1 = require("tslib"); var util_1 = require("@antv/util"); var animate_1 = require("../animate"); var label_1 = require("../geometry/label"); var util_2 = require("../geometry/label/util"); var graphics_1 = require("../util/graphics"); var transform_1 = require("../util/transform"); var constant_1 = require("../constant"); var update_label_1 = require("./update-label"); /** * Geometry labels 渲染组件 */ var Labels = /** @class */ (function () { function Labels(cfg) { /** 存储当前 shape 的映射表,键值为 shape id */ this.shapesMap = {}; this.lastShapesMap = {}; var layout = cfg.layout, container = cfg.container; this.layout = layout; this.container = container; } /** * 渲染文本 */ Labels.prototype.render = function (items, shapes, isUpdate) { var _this = this; if (isUpdate === void 0) { isUpdate = false; } this.shapesMap = {}; var container = this.container; var offscreenGroup = this.createOffscreenGroup(); // 创建虚拟分组 if (items.length) { // 如果 items 空的话就不进行绘制调整操作 // step 1: 在虚拟 group 中创建 shapes for (var _i = 0, items_1 = items; _i < items_1.length; _i++) { var item = items_1[_i]; if (item) { this.renderLabel(item, offscreenGroup); } } // step 2: 根据布局,调整 labels this.doLayout(items, shapes); // step 3.1: 绘制 labelLine this.renderLabelLine(items); // step 3.2: 绘制 labelBackground this.renderLabelBackground(items); // step 4: 根据用户设置的偏移量调整 label this.adjustLabel(items); } // 进行添加、更新、销毁操作 var lastShapesMap = this.lastShapesMap; var shapesMap = this.shapesMap; (0, util_1.each)(shapesMap, function (shape, id) { if (shape.destroyed) { // label 在布局调整环节被删除了(doLayout) delete shapesMap[id]; } else { if (lastShapesMap[id]) { // 图形发生更新 var data = shape.get('data'); var origin_1 = shape.get('origin'); var coordinate = shape.get('coordinate'); var currentAnimateCfg = shape.get('animateCfg'); var currentShape = lastShapesMap[id]; // 已经在渲染树上的 shape (0, update_label_1.updateLabel)(currentShape, shapesMap[id], { data: data, origin: origin_1, animateCfg: currentAnimateCfg, coordinate: coordinate, }); _this.shapesMap[id] = currentShape; // 保存引用 } else { // 新生成的 shape container.add(shape); var animateCfg = (0, util_1.get)(shape.get('animateCfg'), isUpdate ? 'enter' : 'appear'); if (animateCfg) { (0, animate_1.doAnimate)(shape, animateCfg, { toAttrs: (0, tslib_1.__assign)({}, shape.attr()), coordinate: shape.get('coordinate'), }); } } delete lastShapesMap[id]; } }); // 移除 (0, util_1.each)(lastShapesMap, function (deleteShape) { var animateCfg = (0, util_1.get)(deleteShape.get('animateCfg'), 'leave'); if (animateCfg) { (0, animate_1.doAnimate)(deleteShape, animateCfg, { toAttrs: null, coordinate: deleteShape.get('coordinate'), }); } else { deleteShape.remove(true); // 移除 } }); this.lastShapesMap = shapesMap; offscreenGroup.destroy(); }; /** 清除当前 labels */ Labels.prototype.clear = function () { this.container.clear(); this.shapesMap = {}; this.lastShapesMap = {}; }; /** 销毁 */ Labels.prototype.destroy = function () { this.container.destroy(); this.shapesMap = null; this.lastShapesMap = null; }; Labels.prototype.renderLabel = function (cfg, container) { var id = cfg.id, elementId = cfg.elementId, data = cfg.data, mappingData = cfg.mappingData, coordinate = cfg.coordinate, animate = cfg.animate, content = cfg.content; var shapeAppendCfg = { id: id, elementId: elementId, data: data, origin: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mappingData), { data: mappingData[constant_1.FIELD_ORIGIN] }), coordinate: coordinate, }; var labelGroup = container.addGroup((0, tslib_1.__assign)({ name: 'label', // 如果 this.animate === false 或者 cfg.animate === false/null 则不进行动画,否则进行动画配置的合并 animateCfg: this.animate === false || animate === null || animate === false ? false : (0, util_1.deepMix)({}, this.animate, animate) }, shapeAppendCfg)); var labelShape; if ((content.isGroup && content.isGroup()) || (content.isShape && content.isShape())) { // 如果 content 是 Group 或者 Shape,根据 textAlign 调整位置后,直接将其加入 labelGroup var _a = content.getCanvasBBox(), width = _a.width, height = _a.height; var textAlign = (0, util_1.get)(cfg, 'textAlign', 'left'); var x = cfg.x; var y = cfg.y - height / 2; if (textAlign === 'center') { x = x - width / 2; } else if (textAlign === 'right' || textAlign === 'end') { x = x - width; } (0, transform_1.translate)(content, x, y); // 将 label 平移至 x, y 指定的位置 labelShape = content; labelGroup.add(content); } else { var fill = (0, util_1.get)(cfg, ['style', 'fill']); labelShape = labelGroup.addShape('text', (0, tslib_1.__assign)({ attrs: (0, tslib_1.__assign)((0, tslib_1.__assign)({ x: cfg.x, y: cfg.y, textAlign: cfg.textAlign, textBaseline: (0, util_1.get)(cfg, 'textBaseline', 'middle'), text: cfg.content }, cfg.style), { fill: (0, util_1.isNull)(fill) ? cfg.color : fill }) }, shapeAppendCfg)); } if (cfg.rotate) { (0, transform_1.rotate)(labelShape, cfg.rotate); } this.shapesMap[id] = labelGroup; }; // 根据type对label布局 Labels.prototype.doLayout = function (items, shapes) { var _this = this; if (this.layout) { var layouts = (0, util_1.isArray)(this.layout) ? this.layout : [this.layout]; (0, util_1.each)(layouts, function (layout) { var layoutFn = (0, label_1.getGeometryLabelLayout)((0, util_1.get)(layout, 'type', '')); if (layoutFn) { var labelShapes_1 = []; var geometryShapes_1 = []; (0, util_1.each)(_this.shapesMap, function (labelShape, id) { labelShapes_1.push(labelShape); geometryShapes_1.push(shapes[labelShape.get('elementId')]); }); layoutFn(items, labelShapes_1, geometryShapes_1, _this.region, layout.cfg); } }); } }; Labels.prototype.renderLabelLine = function (labelItems) { var _this = this; (0, util_1.each)(labelItems, function (labelItem) { var coordinate = (0, util_1.get)(labelItem, 'coordinate'); if (!labelItem || !coordinate) { return; } var center = coordinate.getCenter(); var radius = coordinate.getRadius(); if (!labelItem.labelLine) { // labelLine: null | false,关闭 label 对应的 labelLine return; } var labelLineCfg = (0, util_1.get)(labelItem, 'labelLine', {}); var id = labelItem.id; var path = labelLineCfg.path; if (!path) { var start = (0, graphics_1.polarToCartesian)(center.x, center.y, radius, labelItem.angle); path = [ ['M', start.x, start.y], ['L', labelItem.x, labelItem.y], ]; } var labelGroup = _this.shapesMap[id]; if (!labelGroup.destroyed) { labelGroup.addShape('path', { capture: false, attrs: (0, tslib_1.__assign)({ path: path, stroke: labelItem.color ? labelItem.color : (0, util_1.get)(labelItem, ['style', 'fill'], '#000'), fill: null }, labelLineCfg.style), id: id, origin: labelItem.mappingData, data: labelItem.data, coordinate: labelItem.coordinate, }); } }); }; /** * 绘制标签背景 * @param labelItems */ Labels.prototype.renderLabelBackground = function (labelItems) { var _this = this; (0, util_1.each)(labelItems, function (labelItem) { var coordinate = (0, util_1.get)(labelItem, 'coordinate'); var background = (0, util_1.get)(labelItem, 'background'); if (!background || !coordinate) { return; } var id = labelItem.id; var labelGroup = _this.shapesMap[id]; if (!labelGroup.destroyed) { var labelContentShape = labelGroup.getChildren()[0]; if (labelContentShape) { var _a = (0, util_2.getlLabelBackgroundInfo)(labelGroup, labelItem, background.padding), rotation = _a.rotation, box = (0, tslib_1.__rest)(_a, ["rotation"]); var backgroundShape = labelGroup.addShape('rect', { attrs: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, box), (background.style || {})), id: id, origin: labelItem.mappingData, data: labelItem.data, coordinate: labelItem.coordinate, }); backgroundShape.setZIndex(-1); if (rotation) { var matrix = labelContentShape.getMatrix(); backgroundShape.setMatrix(matrix); } } } }); }; Labels.prototype.createOffscreenGroup = function () { var container = this.container; var GroupClass = container.getGroupBase(); // 获取分组的构造函数 var newGroup = new GroupClass({}); return newGroup; }; Labels.prototype.adjustLabel = function (items) { var _this = this; (0, util_1.each)(items, function (item) { if (item) { var id = item.id; var labelGroup = _this.shapesMap[id]; if (!labelGroup.destroyed) { // fix: 如果说开发者的 label content 是一个 group,此处的偏移无法对 整个 content group 生效;场景类似 饼图 spider label 是一个含 2 个 textShape 的 gorup var labelShapes = labelGroup.findAll(function (ele) { return ele.get('type') !== 'path'; }); (0, util_1.each)(labelShapes, function (labelShape) { if (labelShape) { if (item.offsetX) { labelShape.attr('x', labelShape.attr('x') + item.offsetX); } if (item.offsetY) { labelShape.attr('y', labelShape.attr('y') + item.offsetY); } } }); } } }); }; return Labels; }()); exports.default = Labels; //# sourceMappingURL=labels.js.map