123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401 |
- import { __extends } from "tslib";
- import * as zrUtil from 'zrender/lib/core/util.js';
- import * as graphic from '../../util/graphic.js';
- import * as layoutUtil from '../../util/layout.js';
- import LegendView from './LegendView.js';
- var Group = graphic.Group;
- var WH = ['width', 'height'];
- var XY = ['x', 'y'];
- var ScrollableLegendView = function (_super) {
- __extends(ScrollableLegendView, _super);
- function ScrollableLegendView() {
- var _this = _super !== null && _super.apply(this, arguments) || this;
- _this.type = ScrollableLegendView.type;
- _this.newlineDisabled = true;
- _this._currentIndex = 0;
- return _this;
- }
- ScrollableLegendView.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());
- };
-
- ScrollableLegendView.prototype.resetInner = function () {
- _super.prototype.resetInner.call(this);
- this._controllerGroup.removeAll();
- this._containerGroup.removeClipPath();
- this._containerGroup.__rectSize = null;
- };
-
- ScrollableLegendView.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 = zrUtil.isArray(pageIconSize) ? pageIconSize : [pageIconSize, pageIconSize];
- createPageButton('pagePrev', 0);
- var pageTextStyleModel = legendModel.getModel('pageTextStyle');
- controllerGroup.add(new graphic.Text({
- 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 = graphic.createIcon(legendModel.get('pageIcons', true)[legendModel.getOrient().name][iconIdx], {
-
-
- onclick: zrUtil.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);
- }
- };
-
- ScrollableLegendView.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 && layoutUtil.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 = zrUtil.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;
- };
- ScrollableLegendView.prototype._layoutContentAndController = function (legendModel, isFirstRender, maxSize, orientIdx, wh, hw, yx, xy) {
- var contentGroup = this.getContentGroup();
- var containerGroup = this._containerGroup;
- var controllerGroup = this._controllerGroup;
-
- layoutUtil.box(legendModel.get('orient'), contentGroup, legendModel.get('itemGap'), !orientIdx ? null : maxSize.width, orientIdx ? null : maxSize.height);
- layoutUtil.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 = zrUtil.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 graphic.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 && graphic.updateProps(contentGroup, {
- x: pageInfo.contentPosition[0],
- y: pageInfo.contentPosition[1]
- },
-
-
- showController ? legendModel : null);
- this._updatePageInfoView(legendModel, pageInfo);
- return mainRect;
- };
- ScrollableLegendView.prototype._pageGo = function (to, legendModel, api) {
- var scrollDataIndex = this._getPageInfo(legendModel)[to];
- scrollDataIndex != null && api.dispatchAction({
- type: 'legendScroll',
- scrollDataIndex: scrollDataIndex,
- legendId: legendModel.id
- });
- };
- ScrollableLegendView.prototype._updatePageInfoView = function (legendModel, pageInfo) {
- var controllerGroup = this._controllerGroup;
- zrUtil.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', zrUtil.isString(pageFormatter) ? pageFormatter.replace('{current}', current == null ? '' : current + '').replace('{total}', total == null ? '' : total + '') : pageFormatter({
- current: current,
- total: total
- }));
- };
-
- ScrollableLegendView.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;
- }
- };
- ScrollableLegendView.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;
- };
- ScrollableLegendView.type = 'legend.scroll';
- return ScrollableLegendView;
- }(LegendView);
- export default ScrollableLegendView;
|