154 lines
6.3 KiB
Java
154 lines
6.3 KiB
Java
import { __extends } from "tslib";
|
|
import { each, head, isEqual, last } from '@antv/util';
|
|
import { getAngle, getSectorPath } from '../../util/graphics';
|
|
import Action from './base';
|
|
/**
|
|
* 背景框的 Action
|
|
* @ignore
|
|
*/
|
|
var ActiveRegion = /** @class */ (function (_super) {
|
|
__extends(ActiveRegion, _super);
|
|
function ActiveRegion() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
/**
|
|
* 显示
|
|
*/
|
|
ActiveRegion.prototype.show = function () {
|
|
var view = this.context.view;
|
|
var ev = this.context.event;
|
|
var tooltipItems = view.getTooltipItems({
|
|
x: ev.x,
|
|
y: ev.y,
|
|
});
|
|
if (isEqual(tooltipItems, this.items)) {
|
|
// 如果拾取数据同上次相同，则不重复绘制
|
|
return;
|
|
}
|
|
this.items = tooltipItems;
|
|
if (tooltipItems.length) {
|
|
var xField_1 = view.getXScale().field;
|
|
var xValue_1 = tooltipItems[0].data[xField_1];
|
|
// 根据 x 对应的值查找 elements
|
|
var elements_1 = [];
|
|
var geometries = view.geometries;
|
|
each(geometries, function (geometry) {
|
|
if (geometry.type === 'interval' || geometry.type === 'schema') {
|
|
var result = geometry.getElementsBy(function (ele) {
|
|
var eleData = ele.getData();
|
|
return eleData[xField_1] === xValue_1;
|
|
});
|
|
elements_1 = elements_1.concat(result);
|
|
}
|
|
});
|
|
// 根据 bbox 计算背景框的面积区域
|
|
if (elements_1.length) {
|
|
var coordinate_1 = view.getCoordinate();
|
|
var firstBBox_1 = elements_1[0].shape.getCanvasBBox();
|
|
var lastBBox_1 = elements_1[0].shape.getCanvasBBox();
|
|
var groupBBox_1 = firstBBox_1;
|
|
each(elements_1, function (ele) {
|
|
var bbox = ele.shape.getCanvasBBox();
|
|
if (coordinate_1.isTransposed) {
|
|
if (bbox.minY < firstBBox_1.minY) {
|
|
firstBBox_1 = bbox;
|
|
}
|
|
if (bbox.maxY > lastBBox_1.maxY) {
|
|
lastBBox_1 = bbox;
|
|
}
|
|
}
|
|
else {
|
|
if (bbox.minX < firstBBox_1.minX) {
|
|
firstBBox_1 = bbox;
|
|
}
|
|
if (bbox.maxX > lastBBox_1.maxX) {
|
|
lastBBox_1 = bbox;
|
|
}
|
|
}
|
|
groupBBox_1.x = Math.min(bbox.minX, groupBBox_1.minX);
|
|
groupBBox_1.y = Math.min(bbox.minY, groupBBox_1.minY);
|
|
groupBBox_1.width = Math.max(bbox.maxX, groupBBox_1.maxX) - groupBBox_1.x;
|
|
groupBBox_1.height = Math.max(bbox.maxY, groupBBox_1.maxY) - groupBBox_1.y;
|
|
});
|
|
var backgroundGroup = view.backgroundGroup, coordinateBBox = view.coordinateBBox;
|
|
var path = void 0;
|
|
if (coordinate_1.isRect) {
|
|
var xScale = view.getXScale();
|
|
var appendRatio = xScale.isLinear ? 0 : 0.25; // 如果 x 轴是数值类型，如直方图，不需要家额外的宽度
|
|
var minX = void 0;
|
|
var minY = void 0;
|
|
var width = void 0;
|
|
var height = void 0;
|
|
if (coordinate_1.isTransposed) {
|
|
minX = coordinateBBox.minX;
|
|
minY = Math.min(lastBBox_1.minY, firstBBox_1.minY) - appendRatio * lastBBox_1.height;
|
|
width = coordinateBBox.width;
|
|
height = groupBBox_1.height + appendRatio * 2 * lastBBox_1.height;
|
|
}
|
|
else {
|
|
minX = Math.min(firstBBox_1.minX, lastBBox_1.minX) - appendRatio * firstBBox_1.width;
|
|
minY = Math.min(coordinateBBox.minY, firstBBox_1.minY);
|
|
width = groupBBox_1.width + appendRatio * 2 * firstBBox_1.width;
|
|
height = coordinateBBox.height;
|
|
}
|
|
path = [
|
|
['M', minX, minY],
|
|
['L', minX + width, minY],
|
|
['L', minX + width, minY + height],
|
|
['L', minX, minY + height],
|
|
['Z'],
|
|
];
|
|
}
|
|
else {
|
|
var firstElement = head(elements_1);
|
|
var lastElement = last(elements_1);
|
|
var startAngle = getAngle(firstElement.getModel(), coordinate_1).startAngle;
|
|
var endAngle = getAngle(lastElement.getModel(), coordinate_1).endAngle;
|
|
var center = coordinate_1.getCenter();
|
|
var radius = coordinate_1.getRadius();
|
|
var innterRadius = coordinate_1.innerRadius * radius;
|
|
path = getSectorPath(center.x, center.y, radius, startAngle, endAngle, innterRadius);
|
|
}
|
|
if (this.regionPath) {
|
|
this.regionPath.attr('path', path);
|
|
this.regionPath.show();
|
|
}
|
|
else {
|
|
this.regionPath = backgroundGroup.addShape({
|
|
type: 'path',
|
|
name: 'active-region',
|
|
capture: false,
|
|
attrs: {
|
|
path: path,
|
|
fill: '#CCD6EC',
|
|
opacity: 0.3,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
/**
|
|
* 隐藏
|
|
*/
|
|
ActiveRegion.prototype.hide = function () {
|
|
if (this.regionPath) {
|
|
this.regionPath.hide();
|
|
}
|
|
// this.regionPath = null;
|
|
this.items = null;
|
|
};
|
|
/**
|
|
* 销毁
|
|
*/
|
|
ActiveRegion.prototype.destroy = function () {
|
|
this.hide();
|
|
if (this.regionPath) {
|
|
this.regionPath.remove(true);
|
|
}
|
|
_super.prototype.destroy.call(this);
|
|
};
|
|
return ActiveRegion;
|
|
}(Action));
|
|
export default ActiveRegion;
|
|
//# sourceMappingURL=active-region.js.map |