cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
391 lines (390 loc) • 16.3 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { defaults, createHashMap, extend, isFunction, isString, curry as curry$1, each as each$1 } from "../../../../zrender/lib/core/util.mjs";
import { parse, stringify } from "../../../../zrender/lib/tool/color.mjs";
import { setTooltipConfig } from "../../util/graphic.mjs";
import { enableHoverEmphasis } from "../../util/states.mjs";
import { setLabelStyle, createTextStyle } from "../../label/labelStyle.mjs";
import { makeBackground } from "../helper/listComponent.mjs";
import { getLayoutRect, box } from "../../util/layout.mjs";
import ComponentView from "../../view/Component.mjs";
import { createSymbol } from "../../util/symbol.mjs";
import { createOrUpdatePatternFromDecal } from "../../util/decal.mjs";
import ZRText from "../../../../zrender/lib/graphic/Text.mjs";
import Rect from "../../../../zrender/lib/graphic/shape/Rect.mjs";
import Group$1 from "../../../../zrender/lib/graphic/Group.mjs";
var curry = curry$1;
var each = each$1;
var Group = Group$1;
var LegendView = function(_super) {
__extends(LegendView2, _super);
function LegendView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = LegendView2.type;
_this.newlineDisabled = false;
return _this;
}
LegendView2.prototype.init = function() {
this.group.add(this._contentGroup = new Group());
this.group.add(this._selectorGroup = new Group());
this._isFirstRender = true;
};
LegendView2.prototype.getContentGroup = function() {
return this._contentGroup;
};
LegendView2.prototype.getSelectorGroup = function() {
return this._selectorGroup;
};
LegendView2.prototype.render = function(legendModel, ecModel, api) {
var isFirstRender = this._isFirstRender;
this._isFirstRender = false;
this.resetInner();
if (!legendModel.get("show", true)) {
return;
}
var itemAlign = legendModel.get("align");
var orient = legendModel.get("orient");
if (!itemAlign || itemAlign === "auto") {
itemAlign = legendModel.get("left") === "right" && orient === "vertical" ? "right" : "left";
}
var selector = legendModel.get("selector", true);
var selectorPosition = legendModel.get("selectorPosition", true);
if (selector && (!selectorPosition || selectorPosition === "auto")) {
selectorPosition = orient === "horizontal" ? "end" : "start";
}
this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
var positionInfo = legendModel.getBoxLayoutParams();
var viewportSize = {
width: api.getWidth(),
height: api.getHeight()
};
var padding = legendModel.get("padding");
var maxSize = getLayoutRect(positionInfo, viewportSize, padding);
var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition);
var layoutRect = getLayoutRect(defaults({
width: mainRect.width,
height: mainRect.height
}, positionInfo), viewportSize, padding);
this.group.x = layoutRect.x - mainRect.x;
this.group.y = layoutRect.y - mainRect.y;
this.group.markRedraw();
this.group.add(this._backgroundEl = makeBackground(mainRect, legendModel));
};
LegendView2.prototype.resetInner = function() {
this.getContentGroup().removeAll();
this._backgroundEl && this.group.remove(this._backgroundEl);
this.getSelectorGroup().removeAll();
};
LegendView2.prototype.renderInner = function(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition) {
var contentGroup = this.getContentGroup();
var legendDrawnMap = createHashMap();
var selectMode = legendModel.get("selectedMode");
var excludeSeriesId = [];
ecModel.eachRawSeries(function(seriesModel) {
!seriesModel.get("legendHoverLink") && excludeSeriesId.push(seriesModel.id);
});
each(legendModel.getData(), function(legendItemModel, dataIndex) {
var name = legendItemModel.get("name");
if (!this.newlineDisabled && (name === "" || name === "\n")) {
var g = new Group();
g.newline = true;
contentGroup.add(g);
return;
}
var seriesModel = ecModel.getSeriesByName(name)[0];
if (legendDrawnMap.get(name)) {
return;
}
if (seriesModel) {
var data = seriesModel.getData();
var lineVisualStyle = data.getVisual("legendLineStyle") || {};
var legendIcon = data.getVisual("legendIcon");
var style = data.getVisual("style");
var itemGroup = this._createItem(seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, style, legendIcon, selectMode, api);
itemGroup.on("click", curry(dispatchSelectAction, name, null, api, excludeSeriesId)).on("mouseover", curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on("mouseout", curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
legendDrawnMap.set(name, true);
} else {
ecModel.eachRawSeries(function(seriesModel2) {
if (legendDrawnMap.get(name)) {
return;
}
if (seriesModel2.legendVisualProvider) {
var provider = seriesModel2.legendVisualProvider;
if (!provider.containName(name)) {
return;
}
var idx = provider.indexOfName(name);
var style2 = provider.getItemVisual(idx, "style");
var legendIcon2 = provider.getItemVisual(idx, "legendIcon");
var colorArr = parse(style2.fill);
if (colorArr && colorArr[3] === 0) {
colorArr[3] = 0.2;
style2 = extend(extend({}, style2), {
fill: stringify(colorArr, "rgba")
});
}
var itemGroup2 = this._createItem(seriesModel2, name, dataIndex, legendItemModel, legendModel, itemAlign, {}, style2, legendIcon2, selectMode, api);
itemGroup2.on("click", curry(dispatchSelectAction, null, name, api, excludeSeriesId)).on("mouseover", curry(dispatchHighlightAction, null, name, api, excludeSeriesId)).on("mouseout", curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
legendDrawnMap.set(name, true);
}
}, this);
}
}, this);
if (selector) {
this._createSelector(selector, legendModel, api, orient, selectorPosition);
}
};
LegendView2.prototype._createSelector = function(selector, legendModel, api, orient, selectorPosition) {
var selectorGroup = this.getSelectorGroup();
each(selector, function createSelectorButton(selectorItem) {
var type = selectorItem.type;
var labelText = new ZRText({
style: {
x: 0,
y: 0,
align: "center",
verticalAlign: "middle"
},
onclick: function() {
api.dispatchAction({
type: type === "all" ? "legendAllSelect" : "legendInverseSelect"
});
}
});
selectorGroup.add(labelText);
var labelModel = legendModel.getModel("selectorLabel");
var emphasisLabelModel = legendModel.getModel(["emphasis", "selectorLabel"]);
setLabelStyle(labelText, {
normal: labelModel,
emphasis: emphasisLabelModel
}, {
defaultText: selectorItem.title
});
enableHoverEmphasis(labelText);
});
};
LegendView2.prototype._createItem = function(seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api) {
var drawType = seriesModel.visualDrawType;
var itemWidth = legendModel.get("itemWidth");
var itemHeight = legendModel.get("itemHeight");
var isSelected = legendModel.isSelected(name);
var iconRotate = legendItemModel.get("symbolRotate");
var symbolKeepAspect = legendItemModel.get("symbolKeepAspect");
var legendIconType = legendItemModel.get("icon");
legendIcon = legendIconType || legendIcon || "roundRect";
var style = getLegendStyle(legendIcon, legendItemModel, lineVisualStyle, itemVisualStyle, drawType, isSelected, api);
var itemGroup = new Group();
var textStyleModel = legendItemModel.getModel("textStyle");
if (isFunction(seriesModel.getLegendIcon) && (!legendIconType || legendIconType === "inherit")) {
itemGroup.add(seriesModel.getLegendIcon({
itemWidth,
itemHeight,
icon: legendIcon,
iconRotate,
itemStyle: style.itemStyle,
lineStyle: style.lineStyle,
symbolKeepAspect
}));
} else {
var rotate = legendIconType === "inherit" && seriesModel.getData().getVisual("symbol") ? iconRotate === "inherit" ? seriesModel.getData().getVisual("symbolRotate") : iconRotate : 0;
itemGroup.add(getDefaultLegendIcon({
itemWidth,
itemHeight,
icon: legendIcon,
iconRotate: rotate,
itemStyle: style.itemStyle,
lineStyle: style.lineStyle,
symbolKeepAspect
}));
}
var textX = itemAlign === "left" ? itemWidth + 5 : -5;
var textAlign = itemAlign;
var formatter = legendModel.get("formatter");
var content = name;
if (isString(formatter) && formatter) {
content = formatter.replace("{name}", name != null ? name : "");
} else if (isFunction(formatter)) {
content = formatter(name);
}
var inactiveColor = legendItemModel.get("inactiveColor");
itemGroup.add(new ZRText({
style: createTextStyle(textStyleModel, {
text: content,
x: textX,
y: itemHeight / 2,
fill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
align: textAlign,
verticalAlign: "middle"
})
}));
var hitRect = new Rect({
shape: itemGroup.getBoundingRect(),
invisible: true
});
var tooltipModel = legendItemModel.getModel("tooltip");
if (tooltipModel.get("show")) {
setTooltipConfig({
el: hitRect,
componentModel: legendModel,
itemName: name,
itemTooltipOption: tooltipModel.option
});
}
itemGroup.add(hitRect);
itemGroup.eachChild(function(child) {
child.silent = true;
});
hitRect.silent = !selectMode;
this.getContentGroup().add(itemGroup);
enableHoverEmphasis(itemGroup);
itemGroup.__legendDataIndex = dataIndex;
return itemGroup;
};
LegendView2.prototype.layoutInner = function(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
var contentGroup = this.getContentGroup();
var selectorGroup = this.getSelectorGroup();
box(legendModel.get("orient"), contentGroup, legendModel.get("itemGap"), maxSize.width, maxSize.height);
var contentRect = contentGroup.getBoundingRect();
var contentPos = [-contentRect.x, -contentRect.y];
selectorGroup.markRedraw();
contentGroup.markRedraw();
if (selector) {
box(
"horizontal",
selectorGroup,
legendModel.get("selectorItemGap", true)
);
var selectorRect = selectorGroup.getBoundingRect();
var selectorPos = [-selectorRect.x, -selectorRect.y];
var selectorButtonGap = legendModel.get("selectorButtonGap", true);
var orientIdx = legendModel.getOrient().index;
var wh = orientIdx === 0 ? "width" : "height";
var hw = orientIdx === 0 ? "height" : "width";
var yx = orientIdx === 0 ? "y" : "x";
if (selectorPosition === "end") {
selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap;
} else {
contentPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
}
selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
selectorGroup.x = selectorPos[0];
selectorGroup.y = selectorPos[1];
contentGroup.x = contentPos[0];
contentGroup.y = contentPos[1];
var mainRect = {
x: 0,
y: 0
};
mainRect[wh] = contentRect[wh] + selectorButtonGap + selectorRect[wh];
mainRect[hw] = Math.max(contentRect[hw], selectorRect[hw]);
mainRect[yx] = Math.min(0, selectorRect[yx] + selectorPos[1 - orientIdx]);
return mainRect;
} else {
contentGroup.x = contentPos[0];
contentGroup.y = contentPos[1];
return this.group.getBoundingRect();
}
};
LegendView2.prototype.remove = function() {
this.getContentGroup().removeAll();
this._isFirstRender = true;
};
LegendView2.type = "legend.plain";
return LegendView2;
}(ComponentView);
function getLegendStyle(iconType, legendItemModel, lineVisualStyle, itemVisualStyle, drawType, isSelected, api) {
function handleCommonProps(style, visualStyle) {
if (style.lineWidth === "auto") {
style.lineWidth = visualStyle.lineWidth > 0 ? 2 : 0;
}
each(style, function(propVal, propName) {
style[propName] === "inherit" && (style[propName] = visualStyle[propName]);
});
}
var itemStyleModel = legendItemModel.getModel("itemStyle");
var itemStyle = itemStyleModel.getItemStyle();
var iconBrushType = iconType.lastIndexOf("empty", 0) === 0 ? "fill" : "stroke";
var decalStyle = itemStyleModel.getShallow("decal");
itemStyle.decal = !decalStyle || decalStyle === "inherit" ? itemVisualStyle.decal : createOrUpdatePatternFromDecal(decalStyle, api);
if (itemStyle.fill === "inherit") {
itemStyle.fill = itemVisualStyle[drawType];
}
if (itemStyle.stroke === "inherit") {
itemStyle.stroke = itemVisualStyle[iconBrushType];
}
if (itemStyle.opacity === "inherit") {
itemStyle.opacity = (drawType === "fill" ? itemVisualStyle : lineVisualStyle).opacity;
}
handleCommonProps(itemStyle, itemVisualStyle);
var legendLineModel = legendItemModel.getModel("lineStyle");
var lineStyle = legendLineModel.getLineStyle();
handleCommonProps(lineStyle, lineVisualStyle);
itemStyle.fill === "auto" && (itemStyle.fill = itemVisualStyle.fill);
itemStyle.stroke === "auto" && (itemStyle.stroke = itemVisualStyle.fill);
lineStyle.stroke === "auto" && (lineStyle.stroke = itemVisualStyle.fill);
if (!isSelected) {
var borderWidth = legendItemModel.get("inactiveBorderWidth");
var visualHasBorder = itemStyle[iconBrushType];
itemStyle.lineWidth = borderWidth === "auto" ? itemVisualStyle.lineWidth > 0 && visualHasBorder ? 2 : 0 : itemStyle.lineWidth;
itemStyle.fill = legendItemModel.get("inactiveColor");
itemStyle.stroke = legendItemModel.get("inactiveBorderColor");
lineStyle.stroke = legendLineModel.get("inactiveColor");
lineStyle.lineWidth = legendLineModel.get("inactiveWidth");
}
return {
itemStyle,
lineStyle
};
}
function getDefaultLegendIcon(opt) {
var symboType = opt.icon || "roundRect";
var icon = createSymbol(symboType, 0, 0, opt.itemWidth, opt.itemHeight, opt.itemStyle.fill, opt.symbolKeepAspect);
icon.setStyle(opt.itemStyle);
icon.rotation = (opt.iconRotate || 0) * Math.PI / 180;
icon.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
if (symboType.indexOf("empty") > -1) {
icon.style.stroke = icon.style.fill;
icon.style.fill = "#fff";
icon.style.lineWidth = 2;
}
return icon;
}
function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
api.dispatchAction({
type: "legendToggleSelect",
name: seriesName != null ? seriesName : dataName
});
dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
}
function isUseHoverLayer(api) {
var list = api.getZr().storage.getDisplayList();
var emphasisState;
var i = 0;
var len = list.length;
while (i < len && !(emphasisState = list[i].states.emphasis)) {
i++;
}
return emphasisState && emphasisState.hoverLayer;
}
function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {
if (!isUseHoverLayer(api)) {
api.dispatchAction({
type: "highlight",
seriesName,
name: dataName,
excludeSeriesId
});
}
}
function dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId) {
if (!isUseHoverLayer(api)) {
api.dispatchAction({
type: "downplay",
seriesName,
name: dataName,
excludeSeriesId
});
}
}
var LegendView$1 = LegendView;
export { LegendView$1 as default };