365 lines
14 KiB
Java
365 lines
14 KiB
Java
import { __assign } from "tslib";
|
||
import { deepMix, each, get, isArray, isFunction, isNil, isUndefined } from '@antv/util';
|
||
import { FIELD_ORIGIN } from '../../constant';
|
||
import { getDefaultAnimateCfg } from '../../animate';
|
||
import { getPolygonCentroid } from '../../util/graphics';
|
||
import Labels from '../../component/labels';
|
||
function avg(arr) {
|
||
var sum = 0;
|
||
each(arr, function (value) {
|
||
sum += value;
|
||
});
|
||
return sum / arr.length;
|
||
}
|
||
/**
|
||
* Geometry Label 基类，用于生成 Geometry 下所有 label 的配置项信息
|
||
*/
|
||
var GeometryLabel = /** @class */ (function () {
|
||
function GeometryLabel(geometry) {
|
||
this.geometry = geometry;
|
||
}
|
||
GeometryLabel.prototype.getLabelItems = function (mapppingArray) {
|
||
var _this = this;
|
||
var items = [];
|
||
var labelCfgs = this.getLabelCfgs(mapppingArray);
|
||
// 获取 label 相关的 x，y 的值，获取具体的 x, y，防止存在数组
|
||
each(mapppingArray, function (mappingData, index) {
|
||
var labelCfg = labelCfgs[index];
|
||
if (!labelCfg || isNil(mappingData.x) || isNil(mappingData.y)) {
|
||
items.push(null);
|
||
return;
|
||
}
|
||
var labelContent = !isArray(labelCfg.content) ? [labelCfg.content] : labelCfg.content;
|
||
labelCfg.content = labelContent;
|
||
var total = labelContent.length;
|
||
each(labelContent, function (content, subIndex) {
|
||
if (isNil(content) || content === '') {
|
||
items.push(null);
|
||
return;
|
||
}
|
||
var item = __assign(__assign({}, labelCfg), _this.getLabelPoint(labelCfg, mappingData, subIndex));
|
||
if (!item.textAlign) {
|
||
item.textAlign = _this.getLabelAlign(item, subIndex, total);
|
||
}
|
||
if (item.offset <= 0) {
|
||
item.labelLine = null;
|
||
}
|
||
items.push(item);
|
||
});
|
||
});
|
||
return items;
|
||
};
|
||
GeometryLabel.prototype.render = function (mapppingArray, isUpdate) {
|
||
if (isUpdate === void 0) { isUpdate = false; }
|
||
var labelItems = this.getLabelItems(mapppingArray);
|
||
var labelsRenderer = this.getLabelsRenderer();
|
||
var shapes = this.getGeometryShapes();
|
||
// 渲染文本
|
||
labelsRenderer.render(labelItems, shapes, isUpdate);
|
||
};
|
||
GeometryLabel.prototype.clear = function () {
|
||
var labelsRenderer = this.labelsRenderer;
|
||
if (labelsRenderer) {
|
||
labelsRenderer.clear();
|
||
}
|
||
};
|
||
GeometryLabel.prototype.destroy = function () {
|
||
var labelsRenderer = this.labelsRenderer;
|
||
if (labelsRenderer) {
|
||
labelsRenderer.destroy();
|
||
}
|
||
this.labelsRenderer = null;
|
||
};
|
||
// geometry 更新之后，对应的 Coordinate 也会更新，为了获取到最新鲜的 Coordinate，故使用方法获取
|
||
GeometryLabel.prototype.getCoordinate = function () {
|
||
return this.geometry.coordinate;
|
||
};
|
||
/**
|
||
* 获取 label 的默认配置
|
||
*/
|
||
GeometryLabel.prototype.getDefaultLabelCfg = function () {
|
||
return get(this.geometry.theme, 'labels', {});
|
||
};
|
||
/**
|
||
* 设置 label 位置
|
||
* @param labelPointCfg
|
||
* @param mappingData
|
||
* @param index
|
||
* @param position
|
||
*/
|
||
GeometryLabel.prototype.setLabelPosition = function (labelPointCfg, mappingData, index, position) { };
|
||
/**
|
||
* 获取文本默认偏移量
|
||
* @param offset
|
||
* @returns
|
||
*/
|
||
GeometryLabel.prototype.getDefaultOffset = function (offset) {
|
||
var coordinate = this.getCoordinate();
|
||
var vector = this.getOffsetVector(offset);
|
||
return coordinate.isTransposed ? vector[0] : vector[1];
|
||
};
|
||
/**
|
||
* 获取每个 label 的偏移量
|
||
* @param labelCfg
|
||
* @param index
|
||
* @param total
|
||
* @returns
|
||
*/
|
||
GeometryLabel.prototype.getLabelOffset = function (labelCfg, index, total) {
|
||
var offset = this.getDefaultOffset(labelCfg.offset);
|
||
var coordinate = this.getCoordinate();
|
||
var transposed = coordinate.isTransposed;
|
||
var dim = transposed ? 'x' : 'y';
|
||
var factor = transposed ? 1 : -1; // y 方向上越大，像素的坐标越小，所以transposed时将系数变成
|
||
var offsetPoint = {
|
||
x: 0,
|
||
y: 0,
|
||
};
|
||
if (index > 0 || total === 1) {
|
||
// 判断是否小于0
|
||
offsetPoint[dim] = offset * factor;
|
||
}
|
||
else {
|
||
offsetPoint[dim] = offset * factor * -1;
|
||
}
|
||
return offsetPoint;
|
||
};
|
||
/**
|
||
* 获取每个 label 的位置
|
||
* @param labelCfg
|
||
* @param mappingData
|
||
* @param index
|
||
* @returns label point
|
||
*/
|
||
GeometryLabel.prototype.getLabelPoint = function (labelCfg, mappingData, index) {
|
||
var coordinate = this.getCoordinate();
|
||
var total = labelCfg.content.length;
|
||
function getDimValue(value, idx) {
|
||
var v = value;
|
||
if (isArray(v)) {
|
||
if (labelCfg.content.length === 1) {
|
||
// 如果仅一个 label，多个 y, 取最后一个 y
|
||
if (v.length <= 2) {
|
||
v = v[value.length - 1];
|
||
}
|
||
else {
|
||
v = avg(v);
|
||
}
|
||
}
|
||
else {
|
||
v = v[idx];
|
||
}
|
||
}
|
||
return v;
|
||
}
|
||
var label = {
|
||
content: labelCfg.content[index],
|
||
x: 0,
|
||
y: 0,
|
||
start: { x: 0, y: 0 },
|
||
color: '#fff',
|
||
};
|
||
// 多边形场景，多用于地图
|
||
if (mappingData && this.geometry.type === 'polygon') {
|
||
var centroid = getPolygonCentroid(mappingData.x, mappingData.y);
|
||
label.x = centroid[0];
|
||
label.y = centroid[1];
|
||
}
|
||
else {
|
||
label.x = getDimValue(mappingData.x, index);
|
||
label.y = getDimValue(mappingData.y, index);
|
||
}
|
||
// 处理漏斗图文本位置
|
||
var shape = isArray(mappingData.shape) ? mappingData.shape[0] : mappingData.shape;
|
||
if (shape === 'funnel' || shape === 'pyramid') {
|
||
var nextPoints = get(mappingData, 'nextPoints');
|
||
var points = get(mappingData, 'points');
|
||
if (nextPoints) {
|
||
// 非漏斗图底部
|
||
var point1 = coordinate.convert(points[1]);
|
||
var point2 = coordinate.convert(nextPoints[1]);
|
||
label.x = (point1.x + point2.x) / 2;
|
||
label.y = (point1.y + point2.y) / 2;
|
||
}
|
||
else if (shape === 'pyramid') {
|
||
var point1 = coordinate.convert(points[1]);
|
||
var point2 = coordinate.convert(points[2]);
|
||
label.x = (point1.x + point2.x) / 2;
|
||
label.y = (point1.y + point2.y) / 2;
|
||
}
|
||
}
|
||
if (labelCfg.position) {
|
||
// 如果 label 支持 position 属性
|
||
this.setLabelPosition(label, mappingData, index, labelCfg.position);
|
||
}
|
||
var offsetPoint = this.getLabelOffset(labelCfg, index, total);
|
||
label.start = { x: label.x, y: label.y };
|
||
label.x += offsetPoint.x;
|
||
label.y += offsetPoint.y;
|
||
label.color = mappingData.color;
|
||
return label;
|
||
};
|
||
/**
|
||
* 获取文本的对齐方式
|
||
* @param item
|
||
* @param index
|
||
* @param total
|
||
* @returns
|
||
*/
|
||
GeometryLabel.prototype.getLabelAlign = function (item, index, total) {
|
||
var align = 'center';
|
||
var coordinate = this.getCoordinate();
|
||
if (coordinate.isTransposed) {
|
||
var offset = this.getDefaultOffset(item.offset);
|
||
if (offset < 0) {
|
||
align = 'right';
|
||
}
|
||
else if (offset === 0) {
|
||
align = 'center';
|
||
}
|
||
else {
|
||
align = 'left';
|
||
}
|
||
if (total > 1 && index === 0) {
|
||
if (align === 'right') {
|
||
align = 'left';
|
||
}
|
||
else if (align === 'left') {
|
||
align = 'right';
|
||
}
|
||
}
|
||
}
|
||
return align;
|
||
};
|
||
/**
|
||
* 获取每一个 label 的唯一 id
|
||
* @param mappingData label 对应的图形的绘制数据
|
||
*/
|
||
GeometryLabel.prototype.getLabelId = function (mappingData) {
|
||
var geometry = this.geometry;
|
||
var type = geometry.type;
|
||
var xScale = geometry.getXScale();
|
||
var yScale = geometry.getYScale();
|
||
var origin = mappingData[FIELD_ORIGIN]; // 原始数据
|
||
var labelId = geometry.getElementId(mappingData);
|
||
if (type === 'line' || type === 'area') {
|
||
// 折线图以及区域图，一条线会对应一组数据，即多个 labels，为了区分这些 labels，需要在 line id 的前提下加上 x 字段值
|
||
labelId += " " + origin[xScale.field];
|
||
}
|
||
else if (type === 'path') {
|
||
// path 路径图，无序，有可能存在相同 x 不同 y 的情况，需要通过 x y 来确定唯一 id
|
||
labelId += " " + origin[xScale.field] + "-" + origin[yScale.field];
|
||
}
|
||
return labelId;
|
||
};
|
||
// 获取 labels 组件
|
||
GeometryLabel.prototype.getLabelsRenderer = function () {
|
||
var _a = this.geometry, labelsContainer = _a.labelsContainer, labelOption = _a.labelOption, canvasRegion = _a.canvasRegion, animateOption = _a.animateOption;
|
||
var coordinate = this.geometry.coordinate;
|
||
var labelsRenderer = this.labelsRenderer;
|
||
if (!labelsRenderer) {
|
||
labelsRenderer = new Labels({
|
||
container: labelsContainer,
|
||
layout: get(labelOption, ['cfg', 'layout'], {
|
||
type: this.defaultLayout,
|
||
}),
|
||
});
|
||
this.labelsRenderer = labelsRenderer;
|
||
}
|
||
labelsRenderer.region = canvasRegion;
|
||
// 设置动画配置，如果 geometry 的动画关闭了，那么 label 的动画也会关闭
|
||
labelsRenderer.animate = animateOption ? getDefaultAnimateCfg('label', coordinate) : false;
|
||
return labelsRenderer;
|
||
};
|
||
GeometryLabel.prototype.getLabelCfgs = function (mapppingArray) {
|
||
var _this = this;
|
||
var geometry = this.geometry;
|
||
var defaultLabelCfg = this.getDefaultLabelCfg();
|
||
var type = geometry.type, theme = geometry.theme, labelOption = geometry.labelOption, scales = geometry.scales, coordinate = geometry.coordinate;
|
||
var _a = labelOption, fields = _a.fields, callback = _a.callback, cfg = _a.cfg;
|
||
var labelScales = fields.map(function (field) {
|
||
return scales[field];
|
||
});
|
||
var labelCfgs = [];
|
||
each(mapppingArray, function (mappingData, index) {
|
||
var origin = mappingData[FIELD_ORIGIN]; // 原始数据
|
||
var originText = _this.getLabelText(origin, labelScales);
|
||
var callbackCfg;
|
||
if (callback) {
|
||
// 当同时配置了 callback 和 cfg 时，以 callback 为准
|
||
var originValues = fields.map(function (field) { return origin[field]; });
|
||
callbackCfg = callback.apply(void 0, originValues);
|
||
if (isNil(callbackCfg)) {
|
||
labelCfgs.push(null);
|
||
return;
|
||
}
|
||
}
|
||
var labelCfg = __assign(__assign({ id: _this.getLabelId(mappingData), data: origin, // 存储原始数据
|
||
mappingData: mappingData,
|
||
coordinate: coordinate }, cfg), callbackCfg);
|
||
var content = labelCfg.content;
|
||
if (isFunction(content)) {
|
||
labelCfg.content = content(origin, mappingData, index);
|
||
}
|
||
else if (isUndefined(content)) {
|
||
// 用户未配置 content，则默认为映射的第一个字段的值
|
||
labelCfg.content = originText[0];
|
||
}
|
||
if (isFunction(labelCfg.position)) {
|
||
labelCfg.position = labelCfg.position(origin, mappingData, index);
|
||
}
|
||
if (type === 'polygon' || (labelCfg.offset < 0 && !['line', 'point', 'path'].includes(type))) {
|
||
// polygon 或者 offset 小于 0 时，文本展示在图形内部，将其颜色设置为 白色
|
||
labelCfg = deepMix({}, defaultLabelCfg, theme.innerLabels, labelCfg);
|
||
}
|
||
else {
|
||
labelCfg = deepMix({}, defaultLabelCfg, theme.labels, labelCfg);
|
||
}
|
||
labelCfgs.push(labelCfg);
|
||
});
|
||
return labelCfgs;
|
||
};
|
||
GeometryLabel.prototype.getLabelText = function (origin, scales) {
|
||
var labelTexts = [];
|
||
each(scales, function (scale) {
|
||
var value = origin[scale.field];
|
||
if (isArray(value)) {
|
||
value = value.map(function (subVal) {
|
||
return scale.getText(subVal);
|
||
});
|
||
}
|
||
else {
|
||
value = scale.getText(value);
|
||
}
|
||
if (isNil(value) || value === '') {
|
||
labelTexts.push(null);
|
||
}
|
||
else {
|
||
labelTexts.push(value);
|
||
}
|
||
});
|
||
return labelTexts;
|
||
};
|
||
GeometryLabel.prototype.getOffsetVector = function (offset) {
|
||
if (offset === void 0) { offset = 0; }
|
||
var coordinate = this.getCoordinate();
|
||
// 如果 x,y 翻转，则偏移 x，否则偏移 y
|
||
return coordinate.isTransposed ? coordinate.applyMatrix(offset, 0) : coordinate.applyMatrix(0, offset);
|
||
};
|
||
GeometryLabel.prototype.getGeometryShapes = function () {
|
||
var geometry = this.geometry;
|
||
var shapes = {};
|
||
each(geometry.elementsMap, function (element, id) {
|
||
shapes[id] = element.shape;
|
||
});
|
||
// 因为有可能 shape 还在进行动画，导致 shape.getBBox() 获取到的值不是最终态，所以需要从 offscreenGroup 获取
|
||
each(geometry.getOffscreenGroup().getChildren(), function (child) {
|
||
var id = geometry.getElementId(child.get('origin').mappingData);
|
||
shapes[id] = child;
|
||
});
|
||
return shapes;
|
||
};
|
||
return GeometryLabel;
|
||
}());
|
||
export default GeometryLabel;
|
||
//# sourceMappingURL=base.js.map |