@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
152 lines • 7.26 kB
JavaScript
import { __assign, __extends } from "tslib";
import BaseComponent from './base';
import { Rect } from '@antv/g';
var Breadcrumb = /** @class */ (function (_super) {
__extends(Breadcrumb, _super);
function Breadcrumb() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.listeners = [];
_this.onItemGroupToggleActive = function (itemGroup, active) { return function () {
var rectShape = itemGroup.get('children').find(function (item) { return item.get('class') === 'item-background'; });
if (rectShape) {
rectShape.attr(active ? _this.itemActiveBackgroundStyle : _this.itemBackgroundStyle);
}
_this.getCanvas().draw();
}; };
return _this;
}
Breadcrumb.prototype.destroy = function () {
this.offEvents();
_super.prototype.destroy.call(this);
};
Breadcrumb.prototype.init = function (config) {
this.x = config.x;
this.y = config.y;
this.items = config.items || [];
this.itemPadding = config.itemPadding || [2, 8, 2, 8];
this.backgroundStyle = __assign({ lineWidth: 1, stroke: '#ffffff' }, (config.backgroundStyle || {}));
this.itemBackgroundStyle = __assign({ fill: '#fff' }, (config.itemBackgroundStyle || {}));
this.itemActiveBackgroundStyle = __assign({ fill: '#ccc', opacity: 0.2 }, (config.itemActiveBackgroundStyle || {}));
this.separator = config.separator || '/';
this.separatorStyle = __assign({ textBaseline: 'top', fill: '#000', opacity: 0.45 }, (config.separatorStyle || {}));
this.itemWidth = config.itemWidth;
this.itemHeight = config.itemHeight;
this.maxItemWidth = config.maxItemWidth;
this.textStyle = __assign({ textBaseline: 'top', fill: '#000', opacity: 0.45 }, (config.textStyle || {}));
};
Breadcrumb.prototype.renderInner = function (group) {
var startX = 0;
var startY = 0;
this.offEvents();
this.renderItems(group, startX, startY);
//this.bindEvents(group);
this.group.move(this.x, this.y);
};
Breadcrumb.prototype.renderItems = function (group, startX, startY) {
var _this = this;
var _a = this.itemPadding, topPadding = _a[0], rightPadding = _a[1], bottomPadding = _a[2], leftPadding = _a[3];
var itemHeight;
// background
var backgroundRect = group.addShape('rect', {
class: 'breadcrumb-background',
attrs: __assign({ x: startX, y: startY, width: 1, height: 1 }, this.backgroundStyle),
});
this.items.forEach(function (item, idx) {
// item group
var itemGroup = group.addGroup({
id: "item-group-" + item.key,
// data: item.key,
data: item,
class: 'item-group',
attrs: {
cursor: 'pointer',
},
});
// background rect
var rectShape = itemGroup.addShape('rect', {
id: "item-background-" + item.key,
class: 'item-background',
attrs: __assign(__assign({ x: startX, y: startY, width: leftPadding + rightPadding, height: topPadding + bottomPadding }, _this.itemBackgroundStyle), { cursor: 'pointer' }),
});
rectShape.name = 'breadcrumb';
// text shape
var textShape = itemGroup.addShape('text', {
id: "item-text-" + item.key,
class: 'item-text',
attrs: __assign(__assign({ x: startX + leftPadding, y: startY + topPadding, text: item.text }, _this.textStyle), { cursor: 'pointer' }),
});
textShape.name = 'breadcrumb';
var textShapeBBox = textShape.getBBox();
itemHeight = _this.itemHeight || textShapeBBox.height;
var itemWidth = _this.itemWidth || textShapeBBox.width;
if (_this.maxItemWidth) {
itemWidth = Math.min(itemWidth, _this.maxItemWidth);
}
// update background rect
var backgroundRectAttr = {
x: startX,
y: startY,
width: itemWidth + leftPadding + rightPadding,
height: itemHeight + topPadding + bottomPadding,
};
rectShape.attr('width', backgroundRectAttr.width);
rectShape.attr('height', backgroundRectAttr.height);
// clip
itemGroup.attr('clip', new Rect({
attrs: backgroundRectAttr,
}));
startX += backgroundRectAttr.width;
// separator
if (idx !== _this.items.length - 1) {
var sepShape = group.addShape('text', {
attrs: __assign({ x: startX, y: startY + topPadding, text: _this.separator }, _this.separatorStyle),
class: 'separator',
});
startX += sepShape.getBBox().width;
}
});
// update background
backgroundRect.attr({
width: startX,
height: itemHeight + topPadding + bottomPadding,
});
};
Breadcrumb.prototype.bindEvents = function (group) {
var _this = this;
var items = this.items;
var itemGroups = group.get('children').filter(function (item) { return item.get('class') === 'item-group'; });
var callback = function (event, itemGroup, emitEventName) { return function () {
var key = itemGroup.get('data');
var item = items.find(function (val) { return val.key === key; });
_this.emit(emitEventName, {
item: item,
});
}; };
itemGroups.forEach(function (itemGroup) {
var clickCallback = callback('click', itemGroup, 'onItemClick');
var dblclickCallback = callback('dblclick', itemGroup, 'onItemDblclick');
var mouseEnterCallback = _this.onItemGroupToggleActive(itemGroup, true);
var mouseLeaveCallback = _this.onItemGroupToggleActive(itemGroup, false);
itemGroup.on('click', clickCallback);
itemGroup.on('dblclick', dblclickCallback);
itemGroup.on('mouseenter', mouseEnterCallback);
itemGroup.on('mouseleave', mouseLeaveCallback);
_this.listeners.push({ target: itemGroup, event: 'click', callback: clickCallback });
_this.listeners.push({ target: itemGroup, event: 'dblclick', callback: dblclickCallback });
_this.listeners.push({ target: itemGroup, event: 'mouseenter', callback: mouseEnterCallback });
_this.listeners.push({ target: itemGroup, event: 'mouseleave', callback: mouseLeaveCallback });
});
};
Breadcrumb.prototype.offEvents = function () {
if (this.listeners) {
this.listeners.forEach(function (_a) {
var target = _a.target, event = _a.event, callback = _a.callback;
target.off(event, callback);
});
}
this.listeners = [];
};
return Breadcrumb;
}(BaseComponent));
export default Breadcrumb;
//# sourceMappingURL=breadcrumb.js.map