cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
296 lines (295 loc) • 12.1 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { isArray, bind, clone, retrieve2, each, isString } from "../../../../zrender/lib/core/util.mjs";
import { createIcon } from "../../util/graphic.mjs";
import { box } from "../../util/layout.mjs";
import LegendView from "./LegendView.mjs";
import ZRText from "../../../../zrender/lib/graphic/Text.mjs";
import Rect from "../../../../zrender/lib/graphic/shape/Rect.mjs";
import { updateProps } from "../../animation/basicTransition.mjs";
import Group$1 from "../../../../zrender/lib/graphic/Group.mjs";
var Group = Group$1;
var WH = ["width", "height"];
var XY = ["x", "y"];
var ScrollableLegendView = function(_super) {
__extends(ScrollableLegendView2, _super);
function ScrollableLegendView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = ScrollableLegendView2.type;
_this.newlineDisabled = true;
_this._currentIndex = 0;
return _this;
}
ScrollableLegendView2.prototype.init = function() {
_super.prototype.init.call(this);
this.group.add(this._containerGroup = new Group());
this._containerGroup.add(this.getContentGroup());
this.group.add(this._controllerGroup = new Group());
};
ScrollableLegendView2.prototype.resetInner = function() {
_super.prototype.resetInner.call(this);
this._controllerGroup.removeAll();
this._containerGroup.removeClipPath();
this._containerGroup.__rectSize = null;
};
ScrollableLegendView2.prototype.renderInner = function(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition) {
var self = this;
_super.prototype.renderInner.call(this, itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
var controllerGroup = this._controllerGroup;
var pageIconSize = legendModel.get("pageIconSize", true);
var pageIconSizeArr = isArray(pageIconSize) ? pageIconSize : [pageIconSize, pageIconSize];
createPageButton("pagePrev", 0);
var pageTextStyleModel = legendModel.getModel("pageTextStyle");
controllerGroup.add(new ZRText({
name: "pageText",
style: {
text: "xx/xx",
fill: pageTextStyleModel.getTextColor(),
font: pageTextStyleModel.getFont(),
verticalAlign: "middle",
align: "center"
},
silent: true
}));
createPageButton("pageNext", 1);
function createPageButton(name, iconIdx) {
var pageDataIndexName = name + "DataIndex";
var icon = createIcon(legendModel.get("pageIcons", true)[legendModel.getOrient().name][iconIdx], {
onclick: bind(self._pageGo, self, pageDataIndexName, legendModel, api)
}, {
x: -pageIconSizeArr[0] / 2,
y: -pageIconSizeArr[1] / 2,
width: pageIconSizeArr[0],
height: pageIconSizeArr[1]
});
icon.name = name;
controllerGroup.add(icon);
}
};
ScrollableLegendView2.prototype.layoutInner = function(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
var selectorGroup = this.getSelectorGroup();
var orientIdx = legendModel.getOrient().index;
var wh = WH[orientIdx];
var xy = XY[orientIdx];
var hw = WH[1 - orientIdx];
var yx = XY[1 - orientIdx];
selector && box(
"horizontal",
selectorGroup,
legendModel.get("selectorItemGap", true)
);
var selectorButtonGap = legendModel.get("selectorButtonGap", true);
var selectorRect = selectorGroup.getBoundingRect();
var selectorPos = [-selectorRect.x, -selectorRect.y];
var processMaxSize = clone(maxSize);
selector && (processMaxSize[wh] = maxSize[wh] - selectorRect[wh] - selectorButtonGap);
var mainRect = this._layoutContentAndController(legendModel, isFirstRender, processMaxSize, orientIdx, wh, hw, yx, xy);
if (selector) {
if (selectorPosition === "end") {
selectorPos[orientIdx] += mainRect[wh] + selectorButtonGap;
} else {
var offset = selectorRect[wh] + selectorButtonGap;
selectorPos[orientIdx] -= offset;
mainRect[xy] -= offset;
}
mainRect[wh] += selectorRect[wh] + selectorButtonGap;
selectorPos[1 - orientIdx] += mainRect[yx] + mainRect[hw] / 2 - selectorRect[hw] / 2;
mainRect[hw] = Math.max(mainRect[hw], selectorRect[hw]);
mainRect[yx] = Math.min(mainRect[yx], selectorRect[yx] + selectorPos[1 - orientIdx]);
selectorGroup.x = selectorPos[0];
selectorGroup.y = selectorPos[1];
selectorGroup.markRedraw();
}
return mainRect;
};
ScrollableLegendView2.prototype._layoutContentAndController = function(legendModel, isFirstRender, maxSize, orientIdx, wh, hw, yx, xy) {
var contentGroup = this.getContentGroup();
var containerGroup = this._containerGroup;
var controllerGroup = this._controllerGroup;
box(legendModel.get("orient"), contentGroup, legendModel.get("itemGap"), !orientIdx ? null : maxSize.width, orientIdx ? null : maxSize.height);
box(
"horizontal",
controllerGroup,
legendModel.get("pageButtonItemGap", true)
);
var contentRect = contentGroup.getBoundingRect();
var controllerRect = controllerGroup.getBoundingRect();
var showController = this._showController = contentRect[wh] > maxSize[wh];
var contentPos = [-contentRect.x, -contentRect.y];
if (!isFirstRender) {
contentPos[orientIdx] = contentGroup[xy];
}
var containerPos = [0, 0];
var controllerPos = [-controllerRect.x, -controllerRect.y];
var pageButtonGap = retrieve2(legendModel.get("pageButtonGap", true), legendModel.get("itemGap", true));
if (showController) {
var pageButtonPosition = legendModel.get("pageButtonPosition", true);
if (pageButtonPosition === "end") {
controllerPos[orientIdx] += maxSize[wh] - controllerRect[wh];
} else {
containerPos[orientIdx] += controllerRect[wh] + pageButtonGap;
}
}
controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2;
contentGroup.setPosition(contentPos);
containerGroup.setPosition(containerPos);
controllerGroup.setPosition(controllerPos);
var mainRect = {
x: 0,
y: 0
};
mainRect[wh] = showController ? maxSize[wh] : contentRect[wh];
mainRect[hw] = Math.max(contentRect[hw], controllerRect[hw]);
mainRect[yx] = Math.min(0, controllerRect[yx] + controllerPos[1 - orientIdx]);
containerGroup.__rectSize = maxSize[wh];
if (showController) {
var clipShape = {
x: 0,
y: 0
};
clipShape[wh] = Math.max(maxSize[wh] - controllerRect[wh] - pageButtonGap, 0);
clipShape[hw] = mainRect[hw];
containerGroup.setClipPath(new Rect({
shape: clipShape
}));
containerGroup.__rectSize = clipShape[wh];
} else {
controllerGroup.eachChild(function(child) {
child.attr({
invisible: true,
silent: true
});
});
}
var pageInfo = this._getPageInfo(legendModel);
pageInfo.pageIndex != null && updateProps(
contentGroup,
{
x: pageInfo.contentPosition[0],
y: pageInfo.contentPosition[1]
},
showController ? legendModel : null
);
this._updatePageInfoView(legendModel, pageInfo);
return mainRect;
};
ScrollableLegendView2.prototype._pageGo = function(to, legendModel, api) {
var scrollDataIndex = this._getPageInfo(legendModel)[to];
scrollDataIndex != null && api.dispatchAction({
type: "legendScroll",
scrollDataIndex,
legendId: legendModel.id
});
};
ScrollableLegendView2.prototype._updatePageInfoView = function(legendModel, pageInfo) {
var controllerGroup = this._controllerGroup;
each(["pagePrev", "pageNext"], function(name) {
var key = name + "DataIndex";
var canJump = pageInfo[key] != null;
var icon = controllerGroup.childOfName(name);
if (icon) {
icon.setStyle("fill", canJump ? legendModel.get("pageIconColor", true) : legendModel.get("pageIconInactiveColor", true));
icon.cursor = canJump ? "pointer" : "default";
}
});
var pageText = controllerGroup.childOfName("pageText");
var pageFormatter = legendModel.get("pageFormatter");
var pageIndex = pageInfo.pageIndex;
var current = pageIndex != null ? pageIndex + 1 : 0;
var total = pageInfo.pageCount;
pageText && pageFormatter && pageText.setStyle("text", isString(pageFormatter) ? pageFormatter.replace("{current}", current == null ? "" : current + "").replace("{total}", total == null ? "" : total + "") : pageFormatter({
current,
total
}));
};
ScrollableLegendView2.prototype._getPageInfo = function(legendModel) {
var scrollDataIndex = legendModel.get("scrollDataIndex", true);
var contentGroup = this.getContentGroup();
var containerRectSize = this._containerGroup.__rectSize;
var orientIdx = legendModel.getOrient().index;
var wh = WH[orientIdx];
var xy = XY[orientIdx];
var targetItemIndex = this._findTargetItemIndex(scrollDataIndex);
var children = contentGroup.children();
var targetItem = children[targetItemIndex];
var itemCount = children.length;
var pCount = !itemCount ? 0 : 1;
var result = {
contentPosition: [contentGroup.x, contentGroup.y],
pageCount: pCount,
pageIndex: pCount - 1,
pagePrevDataIndex: null,
pageNextDataIndex: null
};
if (!targetItem) {
return result;
}
var targetItemInfo = getItemInfo(targetItem);
result.contentPosition[orientIdx] = -targetItemInfo.s;
for (var i = targetItemIndex + 1, winStartItemInfo = targetItemInfo, winEndItemInfo = targetItemInfo, currItemInfo = null; i <= itemCount; ++i) {
currItemInfo = getItemInfo(children[i]);
if (!currItemInfo && winEndItemInfo.e > winStartItemInfo.s + containerRectSize || currItemInfo && !intersect(currItemInfo, winStartItemInfo.s)) {
if (winEndItemInfo.i > winStartItemInfo.i) {
winStartItemInfo = winEndItemInfo;
} else {
winStartItemInfo = currItemInfo;
}
if (winStartItemInfo) {
if (result.pageNextDataIndex == null) {
result.pageNextDataIndex = winStartItemInfo.i;
}
++result.pageCount;
}
}
winEndItemInfo = currItemInfo;
}
for (var i = targetItemIndex - 1, winStartItemInfo = targetItemInfo, winEndItemInfo = targetItemInfo, currItemInfo = null; i >= -1; --i) {
currItemInfo = getItemInfo(children[i]);
if ((!currItemInfo || !intersect(winEndItemInfo, currItemInfo.s)) && winStartItemInfo.i < winEndItemInfo.i) {
winEndItemInfo = winStartItemInfo;
if (result.pagePrevDataIndex == null) {
result.pagePrevDataIndex = winStartItemInfo.i;
}
++result.pageCount;
++result.pageIndex;
}
winStartItemInfo = currItemInfo;
}
return result;
function getItemInfo(el) {
if (el) {
var itemRect = el.getBoundingRect();
var start = itemRect[xy] + el[xy];
return {
s: start,
e: start + itemRect[wh],
i: el.__legendDataIndex
};
}
}
function intersect(itemInfo, winStart) {
return itemInfo.e >= winStart && itemInfo.s <= winStart + containerRectSize;
}
};
ScrollableLegendView2.prototype._findTargetItemIndex = function(targetDataIndex) {
if (!this._showController) {
return 0;
}
var index;
var contentGroup = this.getContentGroup();
var defaultIndex;
contentGroup.eachChild(function(child, idx) {
var legendDataIdx = child.__legendDataIndex;
if (defaultIndex == null && legendDataIdx != null) {
defaultIndex = idx;
}
if (legendDataIdx === targetDataIndex) {
index = idx;
}
});
return index != null ? index : defaultIndex;
};
ScrollableLegendView2.type = "legend.scroll";
return ScrollableLegendView2;
}(LegendView);
var ScrollableLegendView$1 = ScrollableLegendView;
export { ScrollableLegendView$1 as default };