cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
138 lines (137 loc) • 5.49 kB
JavaScript
import { getECData } from "../../util/innerStore.mjs";
import { positionElement, getAvailableSize } from "../../util/layout.mjs";
import { wrapTreePathInfo } from "../helper/treeHelper.mjs";
import { defaults, curry } from "../../../../zrender/lib/core/util.mjs";
import { convertOptionIdName } from "../../util/model.mjs";
import { Z2_EMPHASIS_LIFT, toggleHoverEmphasis } from "../../util/states.mjs";
import { createTextStyle } from "../../label/labelStyle.mjs";
import Group from "../../../../zrender/lib/graphic/Group.mjs";
import Polygon from "../../../../zrender/lib/graphic/shape/Polygon.mjs";
import ZRText from "../../../../zrender/lib/graphic/Text.mjs";
var TEXT_PADDING = 8;
var ITEM_GAP = 8;
var ARRAY_LENGTH = 5;
var Breadcrumb = function() {
function Breadcrumb2(containerGroup) {
this.group = new Group();
containerGroup.add(this.group);
}
Breadcrumb2.prototype.render = function(seriesModel, api, targetNode, onSelect) {
var model = seriesModel.getModel("breadcrumb");
var thisGroup = this.group;
thisGroup.removeAll();
if (!model.get("show") || !targetNode) {
return;
}
var normalStyleModel = model.getModel("itemStyle");
var emphasisModel = model.getModel("emphasis");
var textStyleModel = normalStyleModel.getModel("textStyle");
var emphasisTextStyleModel = emphasisModel.getModel(["itemStyle", "textStyle"]);
var layoutParam = {
pos: {
left: model.get("left"),
right: model.get("right"),
top: model.get("top"),
bottom: model.get("bottom")
},
box: {
width: api.getWidth(),
height: api.getHeight()
},
emptyItemWidth: model.get("emptyItemWidth"),
totalWidth: 0,
renderList: []
};
this._prepare(targetNode, layoutParam, textStyleModel);
this._renderContent(seriesModel, layoutParam, normalStyleModel, emphasisModel, textStyleModel, emphasisTextStyleModel, onSelect);
positionElement(thisGroup, layoutParam.pos, layoutParam.box);
};
Breadcrumb2.prototype._prepare = function(targetNode, layoutParam, textStyleModel) {
for (var node = targetNode; node; node = node.parentNode) {
var text = convertOptionIdName(node.getModel().get("name"), "");
var textRect = textStyleModel.getTextRect(text);
var itemWidth = Math.max(textRect.width + TEXT_PADDING * 2, layoutParam.emptyItemWidth);
layoutParam.totalWidth += itemWidth + ITEM_GAP;
layoutParam.renderList.push({
node,
text,
width: itemWidth
});
}
};
Breadcrumb2.prototype._renderContent = function(seriesModel, layoutParam, normalStyleModel, emphasisModel, textStyleModel, emphasisTextStyleModel, onSelect) {
var lastX = 0;
var emptyItemWidth = layoutParam.emptyItemWidth;
var height = seriesModel.get(["breadcrumb", "height"]);
var availableSize = getAvailableSize(layoutParam.pos, layoutParam.box);
var totalWidth = layoutParam.totalWidth;
var renderList = layoutParam.renderList;
var emphasisItemStyle = emphasisModel.getModel("itemStyle").getItemStyle();
for (var i = renderList.length - 1; i >= 0; i--) {
var item = renderList[i];
var itemNode = item.node;
var itemWidth = item.width;
var text = item.text;
if (totalWidth > availableSize.width) {
totalWidth -= itemWidth - emptyItemWidth;
itemWidth = emptyItemWidth;
text = null;
}
var el = new Polygon({
shape: {
points: makeItemPoints(lastX, 0, itemWidth, height, i === renderList.length - 1, i === 0)
},
style: defaults(normalStyleModel.getItemStyle(), {
lineJoin: "bevel"
}),
textContent: new ZRText({
style: createTextStyle(textStyleModel, {
text
})
}),
textConfig: {
position: "inside"
},
z2: Z2_EMPHASIS_LIFT * 1e4,
onclick: curry(onSelect, itemNode)
});
el.disableLabelAnimation = true;
el.getTextContent().ensureState("emphasis").style = createTextStyle(emphasisTextStyleModel, {
text
});
el.ensureState("emphasis").style = emphasisItemStyle;
toggleHoverEmphasis(el, emphasisModel.get("focus"), emphasisModel.get("blurScope"), emphasisModel.get("disabled"));
this.group.add(el);
packEventData(el, seriesModel, itemNode);
lastX += itemWidth + ITEM_GAP;
}
};
Breadcrumb2.prototype.remove = function() {
this.group.removeAll();
};
return Breadcrumb2;
}();
function makeItemPoints(x, y, itemWidth, itemHeight, head, tail) {
var points = [[head ? x : x - ARRAY_LENGTH, y], [x + itemWidth, y], [x + itemWidth, y + itemHeight], [head ? x : x - ARRAY_LENGTH, y + itemHeight]];
!tail && points.splice(2, 0, [x + itemWidth + ARRAY_LENGTH, y + itemHeight / 2]);
!head && points.push([x, y + itemHeight / 2]);
return points;
}
function packEventData(el, seriesModel, itemNode) {
getECData(el).eventData = {
componentType: "series",
componentSubType: "treemap",
componentIndex: seriesModel.componentIndex,
seriesIndex: seriesModel.seriesIndex,
seriesName: seriesModel.name,
seriesType: "treemap",
selfType: "breadcrumb",
nodeData: {
dataIndex: itemNode && itemNode.dataIndex,
name: itemNode && itemNode.name
},
treePathInfo: itemNode && wrapTreePathInfo(itemNode, seriesModel)
};
}
var Breadcrumb$1 = Breadcrumb;
export { Breadcrumb$1 as default };