@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
203 lines • 6.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var component_1 = require("@antv/component");
var g_1 = require("@antv/g");
var _ = tslib_1.__importStar(require("@antv/util"));
var global_1 = require("../../theme/global");
function getLegendData(viewLayer, props) {
var legendItems = [];
var view = viewLayer.view;
var geometry = view.get('elements')[0];
var colorAttr = geometry.getAttr('color'); // color和shape决定cat legend的生成，暂时先不考虑shape
var markerCfg = {
isInCircle: geometry.isInCircle(),
color: colorAttr.values[0],
};
var marker = geometry.get('shapeFactory').getMarkerStyle(geometry.get('type'), markerCfg);
/** 处理default不生成图例的场景 */
if (colorAttr.scales.length === 0) {
legendItems.push({
value: props.name,
checked: true,
marker: marker,
isSingle: true,
layer: viewLayer,
});
}
else {
/** 正常生成图例 */
var values = colorAttr.scales[0].values;
_.each(values, function (v, index) {
var markerColor = colorAttr.values[index];
var markerValue = v;
var cfg = {
isInCircle: geometry.isInCircle(),
color: markerColor,
};
var markerItem = geometry.get('shapeFactory').getMarkerStyle(geometry.get('type'), cfg);
legendItems.push({
field: colorAttr.scales[0].field,
value: markerValue,
checked: true,
marker: markerItem,
isSingle: false,
layer: viewLayer,
});
});
}
return legendItems;
}
exports.getLegendData = getLegendData;
function mergeLegendData(items) {
return items;
}
exports.mergeLegendData = mergeLegendData;
function createLegend(items, width, height, canvas, position) {
var legendTheme = global_1.getGlobalTheme().legend;
var positions = position.split('-');
var layout = 'horizontal';
if (positions[0] === 'left' || positions[0] === 'right') {
layout = 'vertical';
}
var legendCfg = {
type: 'category-legend',
items: items,
maxSize: width,
container: canvas.addGroup(),
layout: layout,
textStyle: {
fill: '#8C8C8C',
fontSize: 12,
textAlign: 'start',
textBaseline: 'middle',
lineHeight: 20,
},
titleDistance: 10,
autoWrap: true,
itemMarginBottom: 4,
backgroundPadding: 0,
maxLength: width,
};
var legend = new component_1.Legend.CanvasCategory(legendCfg);
legendLayout(width, height, legend, position);
addLegendInteraction(legend);
/** return legend as a padding component */
var bbox = legend.get('itemsGroup').getBBox();
var paddingBbox;
// merge legend inner padding
var innerPadding = legendTheme.innerPadding;
if (positions[0] === 'left') {
paddingBbox = new g_1.BBox(legend.get('x') + innerPadding[3], legend.get('y'), bbox.width, bbox.height);
}
else if (positions[0] === 'right') {
paddingBbox = new g_1.BBox(legend.get('x') - innerPadding[1], legend.get('y'), bbox.width, bbox.height);
}
else if (positions[0] === 'top') {
paddingBbox = new g_1.BBox(legend.get('x'), legend.get('y') + innerPadding[0], bbox.width, bbox.height);
}
else if (positions[0] === 'bottom') {
paddingBbox = new g_1.BBox(legend.get('x'), legend.get('y') - innerPadding[2], bbox.width, bbox.height);
}
return {
position: positions[0],
component: legend,
getBBox: function () {
return paddingBbox;
},
};
}
exports.createLegend = createLegend;
function addLegendInteraction(legend) {
var filteredValue = [];
legend.on('itemclick', function (ev) {
var item = ev.item, checked = ev.checked;
// 如果是单图例模式
if (item.isSingle) {
if (!checked) {
item.layer.hide();
}
else {
item.layer.show();
}
}
else {
// 正常的图例筛选数据逻辑
var view = item.layer.view;
if (!checked) {
filteredValue.push(item.value);
view.filter(item.field, function (f) {
return !_.contains(filteredValue, f);
});
view.repaint();
var filteredData = view.get('filteredData');
if (filteredData.length === 0) {
item.layer.hide();
}
else if (!item.layer.visibility) {
item.layer.show();
}
}
else {
_.pull(filteredValue, item.value);
view.filter(item.value, function (f) {
return !_.contains(filteredValue, f);
});
view.repaint();
if (!item.layer.visibility) {
item.layer.show();
}
}
}
});
}
function legendLayout(width, height, legend, position) {
console.log(position);
var bleeding = global_1.getGlobalTheme().bleeding;
if (_.isArray(bleeding)) {
_.each(bleeding, function (it, index) {
if (typeof bleeding[index] === 'function') {
bleeding[index] = bleeding[index]({});
}
});
}
var bbox = legend.get('itemsGroup').getBBox();
var x = 0;
var y = 0;
var positions = position.split('-');
// 先确定x
if (positions[0] === 'left') {
x = bleeding[3];
}
else if (positions[0] === 'right') {
x = width - bleeding[1] - bbox.width;
}
else if (positions[1] === 'center') {
x = (width - bbox.width) / 2;
}
else if (positions[1] === 'left') {
x = bleeding[3];
}
else if (positions[1] === 'right') {
x = width - bleeding[1] - bbox.width;
}
// 再确定y
if (positions[0] === 'bottom') {
y = height - bleeding[2] - bbox.height;
}
else if (positions[0] === 'top') {
y = bleeding[0];
}
else if (positions[1] === 'center') {
y = (height - bbox.height) / 2;
}
else if (positions[1] === 'top') {
y = bleeding[0];
}
else if (positions[1] === 'bottom') {
y = height - bleeding[2] - bbox.height;
}
legend.moveTo(x, y);
legend.draw();
}
//# sourceMappingURL=globalLegend.js.map