import { __assign } from "tslib"; import { deepMix, each, get, isArray } from '@antv/util'; import { doAnimate } from '../animate'; import { getGeometryLabelLayout } from '../geometry/label'; import { getReplaceAttrs } from '../util/graphics'; import { rotate, translate } from '../util/transform'; /** * 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: 绘制 labelLine this.renderLabelLine(items); // step 4: 根据用户设置的偏移量调整 label this.adjustLabel(items); } // 进行添加、更新、销毁操作 var lastShapesMap = this.lastShapesMap; var shapesMap = this.shapesMap; each(shapesMap, function (shape, id) { if (shape.destroyed) { // label 在布局调整环节被删除了(doLayout) delete shapesMap[id]; } else { if (lastShapesMap[id]) { // 图形发生更新 var data_1 = shape.get('data'); var origin_1 = shape.get('origin'); var coordinate_1 = shape.get('coordinate'); var currentShape = lastShapesMap[id]; // 已经在渲染树上的 shape var currentAnimateCfg_1 = shape.get('animateCfg'); currentShape.set('data', data_1); currentShape.set('origin', origin_1); currentShape.set('animateCfg', currentAnimateCfg_1); currentShape.set('coordinate', coordinate_1); var updateAnimateCfg_1 = get(currentAnimateCfg_1, 'update'); var currentChildren_1 = currentShape.getChildren(); shape.getChildren().map(function (child, index) { var currentChild = currentChildren_1[index]; currentChild.set('data', data_1); currentChild.set('origin', origin_1); currentChild.set('animateCfg', currentAnimateCfg_1); currentChild.set('coordinate', coordinate_1); var newAttrs = getReplaceAttrs(currentChild, child); if (updateAnimateCfg_1) { doAnimate(currentChild, updateAnimateCfg_1, { toAttrs: newAttrs, coordinate: coordinate_1, }); } else { currentChild.attr(newAttrs); } }); _this.shapesMap[id] = currentShape; // 保存引用 } else { // 新生成的 shape container.add(shape); var animateCfg = get(shape.get('animateCfg'), isUpdate ? 'enter' : 'appear'); if (animateCfg) { doAnimate(shape, animateCfg, { toAttrs: __assign({}, shape.attr()), coordinate: shape.get('coordinate'), }); } } delete lastShapesMap[id]; } }); // 移除 each(lastShapesMap, function (deleteShape) { var animateCfg = get(deleteShape.get('animateCfg'), 'leave'); if (animateCfg) { 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, data = cfg.data, mappingData = cfg.mappingData, coordinate = cfg.coordinate, animate = cfg.animate, content = cfg.content; var shapeAppendCfg = { id: id, data: data, origin: mappingData, coordinate: coordinate, }; var labelGroup = container.addGroup(__assign({ name: 'label', // 如果 this.animate === false 或者 cfg.animate === false/null 则不进行动画,否则进行动画配置的合并 animateCfg: this.animate === false || animate === null || animate === false ? false : 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 = 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; } translate(content, x, y); // 将 label 平移至 x, y 指定的位置 labelShape = content; labelGroup.add(content); } else { labelShape = labelGroup.addShape('text', __assign({ attrs: __assign({ x: cfg.x, y: cfg.y, textAlign: cfg.textAlign, textBaseline: get(cfg, 'textBaseline', 'middle'), text: cfg.content }, cfg.style) }, shapeAppendCfg)); } if (cfg.rotate) { rotate(labelShape, cfg.rotate); } this.shapesMap[id] = labelGroup; }; // 根据type对label布局 Labels.prototype.doLayout = function (items, shapes) { var _this = this; if (this.layout) { var layouts = isArray(this.layout) ? this.layout : [this.layout]; each(layouts, function (layout) { var layoutFn = getGeometryLabelLayout(get(layout, 'type', '')); if (layoutFn) { var labelShapes_1 = []; var geometryShapes_1 = []; each(_this.shapesMap, function (labelShape, id) { labelShapes_1.push(labelShape); geometryShapes_1.push(shapes[id]); }); layoutFn(items, labelShapes_1, geometryShapes_1, _this.region, layout.cfg); } }); } }; Labels.prototype.renderLabelLine = function (labelItems) { var _this = this; each(labelItems, function (labelItem) { if (!labelItem) { return; } if (!labelItem.labelLine) { // labelLine: null | false,关闭 label 对应的 labelLine return; } var labelLineCfg = get(labelItem, 'labelLine', {}); var id = labelItem.id; var path = labelLineCfg.path; if (!path) { var start = labelItem.start; 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: __assign({ path: path, stroke: labelItem.color ? labelItem.color : get(labelItem, ['style', 'fill'], '#000'), fill: null }, labelLineCfg.style), id: id, origin: labelItem.mappingData, data: labelItem.data, coordinate: labelItem.coordinate, }); } }); }; 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; each(items, function (item) { if (item) { var id = item.id; var labelGroup = _this.shapesMap[id]; if (!labelGroup.destroyed) { var labelShape = labelGroup.find(function (ele) { return ele.get('type') === 'text'; }); 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; }()); export default Labels; //# sourceMappingURL=labels.js.map