@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
225 lines • 9.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var breadcrumb_1 = tslib_1.__importDefault(require("../../../components/breadcrumb"));
var base_1 = tslib_1.__importDefault(require("../../../interaction/base"));
var g_1 = require("@antv/g");
var util_1 = require("@antv/util");
var animation_1 = require("./animation");
var DEFAULT_ITEM_WIDTH = 100;
var DEFAULT_ITEM_HEIGHT = 30;
var PADDING_TOP = 10;
var getValidBreadcrumbConfig = function (cfg) {
if (cfg === void 0) { cfg = {}; }
var _cfg = tslib_1.__assign({ x: 0, y: 0, startNode: { name: 'root' }, itemWidth: DEFAULT_ITEM_WIDTH, itemHeight: DEFAULT_ITEM_HEIGHT, padding: [0, 0, 0, 0] }, cfg);
return _cfg;
};
var DrillDownInteraction = /** @class */ (function (_super) {
tslib_1.__extends(DrillDownInteraction, _super);
function DrillDownInteraction() {
return _super !== null && _super.apply(this, arguments) || this;
}
DrillDownInteraction.getInteractionRange = function (layerRange, interaction) {
var config = getValidBreadcrumbConfig(interaction);
var _a = config.padding, paddingTop = _a[0], paddingBottom = _a[1];
return new g_1.BBox(layerRange.minX, layerRange.maxY - config.itemHeight - paddingTop - paddingBottom, layerRange.width, config.itemHeight + paddingTop + paddingBottom);
};
DrillDownInteraction.prototype.start = function (ev) {
var _this = this;
var data = ev.data._origin;
if (data.children) {
this.parentNode = {
shape: ev.target,
data: {
name: util_1.clone(this.currentNode.name),
value: util_1.clone(this.currentNode.value),
},
depth: util_1.clone(this.currentDepth),
};
this.currentDepth++;
animation_1.drillingDown(ev.target, this.view, function () {
_this.update(data);
});
}
};
DrillDownInteraction.prototype.update = function (data) {
if (!util_1.hasKey(this.cache, data.name)) {
this.cache[data.name] = data;
}
var tempoData = this.plot.getTreemapData(data, data.depth);
this.view.changeData(tempoData);
this.adjustScale(this.currentDepth);
this.currentNode = data;
this.render();
};
DrillDownInteraction.prototype.render = function () {
if (this.breadcrumb) {
var items = this.getItems();
this.breadcrumb.update({
items: items,
});
this.layout();
}
else {
this.initGeometry();
this.cache = {};
this.saveOriginMapping();
this.container = this.container = this.canvas.addGroup();
if (!this.startNode) {
this.startNode = {
name: 'root',
};
}
if (this.startNode.name === 'root') {
this.startNodeName = util_1.hasKey(this.plot.options.data, 'name') ? this.plot.options.data.name : 'root';
this.currentNode = this.plot.options.data;
this.currentDepth = 1;
}
else {
this.startNodeName = this.startNode.name;
this.currentNode = this.startNode;
}
this.y = this.view.get('viewRange').maxY + PADDING_TOP;
this.breadcrumb = new breadcrumb_1.default({
container: this.container,
x: 0,
y: this.y,
items: this.getItems(),
});
this.breadcrumb.render();
this.layout();
}
this.onInteraction();
};
DrillDownInteraction.prototype.clear = function () { };
DrillDownInteraction.prototype.layout = function () {
var currentWidth = this.container.getBBox().width;
var x = (this.plot.width - currentWidth) / 2;
this.breadcrumb.update({
x: x,
y: this.y,
});
};
DrillDownInteraction.prototype.getItems = function () {
var items = [];
if (this.currentNode.name && this.currentNode.name === this.startNodeName) {
var rootItem = this.getRootItem();
items.push(rootItem);
}
else {
items = [];
var parents = [];
this.findParent(this.currentNode, parents);
items.push(this.getRootItem());
util_1.each(parents, function (p, index) {
items.push({ key: String(index + 2), text: p.name, data: p });
});
items.push({ key: String(parents.length + 2), text: this.currentNode.name, data: this.currentNode });
}
return items;
};
DrillDownInteraction.prototype.findParent = function (data, parents) {
if (data.parent) {
if (util_1.hasKey(this.cache, data.parent.name)) {
parents.push(this.cache[data.parent.name]);
}
else {
parents.push(data.parent);
}
this.findParent(data.parent, parents);
}
else {
return;
}
};
DrillDownInteraction.prototype.onInteraction = function () {
var _this = this;
this.container.on('click', function (ev) {
var targetParent = ev.target.get('parent');
if (targetParent && targetParent.get('class') === 'item-group') {
var data_1 = targetParent.get('data');
if (data_1.data) {
if (data_1.text === _this.startNodeName) {
var targetDepth = 1;
//只有前后depth相邻才执行上卷动画，否则直接更新
if (_this.currentDepth - 1 === targetDepth) {
animation_1.rollingUp(_this.currentNode.name, _this.view, function () {
_this.updateRoot(data_1);
});
}
else {
_this.updateRoot(data_1);
}
_this.currentDepth = 1;
}
else if (_this.currentNode === data_1.data) {
return;
}
else {
var previousDepth = util_1.clone(_this.currentDepth);
_this.currentDepth = parseInt(data_1.key);
if (previousDepth - 1 === _this.currentDepth) {
animation_1.rollingUp(_this.currentNode.name, _this.view, function () {
_this.update(data_1.data);
});
}
else {
_this.update(data_1.data);
}
}
}
}
});
};
DrillDownInteraction.prototype.getRootItem = function () {
var rootData = this.plot.options.data;
var rootName = util_1.hasKey(rootData, 'name') ? rootData.name : 'root';
return { key: '1', text: rootName, data: this.plot.rootData };
};
DrillDownInteraction.prototype.saveOriginMapping = function () {
var _a = this.plot.options, colorField = _a.colorField, colors = _a.colors;
var mappingInfo = { field: colorField, values: colors };
this.originMapping = mappingInfo;
};
DrillDownInteraction.prototype.adjustScale = function (index) {
var view = this.view;
// 根据当前层级确定mapping配置项
if (util_1.hasKey(this.mapping, String(index))) {
var mappingCfg = util_1.clone(this.mapping[index]);
if (mappingCfg.values && util_1.isFunction(mappingCfg.values)) {
var values = mappingCfg.values(this.parentNode, this.currentNode);
mappingCfg.values = values;
}
this.view.get('elements')[0].color(mappingCfg.field, mappingCfg.values);
}
else {
var mappingCfg = util_1.clone(this.originMapping);
this.view.get('elements')[0].color(mappingCfg.field, mappingCfg.values);
}
view.render();
};
DrillDownInteraction.prototype.initGeometry = function () {
this.geometry = this.view.get('elements')[0];
var viewRange = this.view.get('viewRange');
var container = this.geometry.get('container');
var cliper = new g_1.Rect({
attrs: {
x: viewRange.minX,
y: viewRange.minY,
width: viewRange.width,
height: viewRange.height,
},
});
container.attr('clip', cliper);
};
DrillDownInteraction.prototype.updateRoot = function (data) {
this.view.changeData(data.data);
this.adjustScale(1);
this.currentNode = this.plot.options.data;
this.render();
};
return DrillDownInteraction;
}(base_1.default));
exports.default = DrillDownInteraction;
base_1.default.registerInteraction('drilldown', DrillDownInteraction);
//# sourceMappingURL=drillDown.js.map