@antv/g2
Version:
the Grammar of Graphics in Javascript
142 lines • 4.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var base_1 = tslib_1.__importDefault(require("../base"));
var util_1 = require("../util");
var util_2 = require("@antv/util");
/**
* Link Elements by color
* @ignore
*/
var LinkByColor = /** @class */ (function (_super) {
tslib_1.__extends(LinkByColor, _super);
function LinkByColor() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.cache = {};
return _this;
}
// 获取颜色对应的 scale
LinkByColor.prototype.getColorScale = function (view, element) {
var colorAttr = element.geometry.getAttribute('color');
if (!colorAttr) {
return null;
}
var scale = view.getScaleByField(colorAttr.getFields()[0]);
return scale;
};
// 获取连接的 path
LinkByColor.prototype.getLinkPath = function (element, nextElement) {
var view = this.context.view;
var isTransposed = view.getCoordinate().isTransposed;
var bbox = element.shape.getCanvasBBox();
var nextBBox = nextElement.shape.getCanvasBBox();
var path = isTransposed
? [
['M', bbox.minX, bbox.minY],
['L', nextBBox.minX, nextBBox.maxY],
['L', nextBBox.maxX, nextBBox.maxY],
['L', bbox.maxX, bbox.minY],
['Z'],
]
: [
['M', bbox.maxX, bbox.minY],
['L', nextBBox.minX, nextBBox.minY],
['L', nextBBox.minX, nextBBox.maxY],
['L', bbox.maxX, bbox.maxY],
['Z'],
];
return path;
};
// 添加连接的图形
LinkByColor.prototype.addLinkShape = function (group, element, nextElement) {
group.addShape({
type: 'path',
attrs: {
opacity: 0.4,
fill: element.shape.attr('fill'),
path: this.getLinkPath(element, nextElement),
},
});
};
// 使用图形连接
LinkByColor.prototype.linkByElement = function (element) {
var _this = this;
var view = this.context.view;
var scale = this.getColorScale(view, element);
if (!scale) {
return;
}
var value = util_1.getElementValue(element, scale.field);
if (!this.cache[value]) {
var elements_1 = util_1.getElementsByField(view, scale.field, value);
var linkGroup = this.linkGroup;
var group_1 = linkGroup.addGroup();
this.cache[value] = group_1; // 缓存
var count_1 = elements_1.length;
util_2.each(elements_1, function (el, index) {
if (index < count_1 - 1) {
var nextEl = elements_1[index + 1];
_this.addLinkShape(group_1, el, nextEl);
}
});
}
};
// 移除连接
LinkByColor.prototype.removeLink = function (element) {
var scale = this.getColorScale(this.context.view, element);
if (!scale) {
return;
}
var value = util_1.getElementValue(element, scale.field);
if (this.cache[value]) {
this.cache[value].remove();
this.cache[value] = null;
}
};
/**
* 连接 elements
*/
LinkByColor.prototype.link = function () {
var context = this.context;
if (!this.linkGroup) {
// 不允许被拾取
this.linkGroup = context.view.foregroundGroup.addGroup({
capture: false,
});
}
var element = util_1.getCurrentElement(context);
if (element) {
this.linkByElement(element);
}
};
/**
* 取消连接 elements
*/
LinkByColor.prototype.unlink = function () {
var element = util_1.getCurrentElement(this.context);
if (element) {
this.removeLink(element);
}
};
/**
* 清除所有连接
*/
LinkByColor.prototype.clear = function () {
if (this.linkGroup) {
this.linkGroup.clear();
}
this.cache = {};
};
/**
* 销毁
*/
LinkByColor.prototype.destroy = function () {
_super.prototype.destroy.call(this);
if (this.linkGroup) {
this.linkGroup.remove();
}
};
return LinkByColor;
}(base_1.default));
exports.default = LinkByColor;
//# sourceMappingURL=link-by-color.js.map