From 434e2b1add4d325fda821c09d46a45234efec4fc Mon Sep 17 00:00:00 2001 From: deqingli Date: Tue, 25 Jun 2019 14:30:39 +0800 Subject: [PATCH] fix(selector): modify the parameter in legend default option and the time selectorgroup be created --- src/component/legend/LegendModel.js | 4 +- src/component/legend/LegendView.js | 34 +++++++-------- src/component/legend/ScrollableLegendView.js | 44 +++++++++----------- 3 files changed, 37 insertions(+), 45 deletions(-) diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js index 688e47565..adcfb6eac 100644 --- a/src/component/legend/LegendModel.js +++ b/src/component/legend/LegendModel.js @@ -344,9 +344,7 @@ var LegendModel = echarts.extendComponentModel({ selectorItemGap: 7, - selectorLegendContentGap: 10, - - selectorBorderGap: 1, + selectorButtonGap: 10, // Tooltip 相关配置 tooltip: { diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index 55fdfeae8..7855df7c2 100644 --- a/src/component/legend/LegendView.js +++ b/src/component/legend/LegendView.js @@ -57,7 +57,7 @@ export default echarts.extendComponentView({ * @private * @type {module:zrender/container/Group} */ - this._selectorGroup; + this.group.add(this._selectorGroup = new Group()); /** * If first rendering, `contentGroup.position` is [0, 0], which @@ -143,7 +143,7 @@ export default echarts.extendComponentView({ resetInner: function () { this.getContentGroup().removeAll(); this._backgroundEl && this.group.remove(this._backgroundEl); - this._selectorGroup && this._selectorGroup.removeAll(); + this.getSelectorGroup().removeAll(); }, /** @@ -260,8 +260,7 @@ export default echarts.extendComponentView({ }, _createSelector: function (selector, legendModel, api, orient, selectorPosition) { - !this._selectorGroup && this.group.add(this._selectorGroup = new Group()); - var selectorGroup = this._selectorGroup; + var selectorGroup = this.getSelectorGroup(); var iconSize = legendModel.get('selectorIconSize', true); if (!isArray(iconSize)) { @@ -438,7 +437,7 @@ export default echarts.extendComponentView({ */ layoutInner: function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) { var contentGroup = this.getContentGroup(); - var selectorGroup = this._selectorGroup; + var selectorGroup = this.getSelectorGroup(); // Place items in contentGroup. layoutUtil.box( @@ -452,9 +451,9 @@ export default echarts.extendComponentView({ var contentRect = contentGroup.getBoundingRect(); var contentPos = [-contentRect.x, -contentRect.y]; - if (selector && selectorGroup) { + if (selector) { // Place buttons in selectorGroup - selectorGroup && layoutUtil.box( + layoutUtil.box( // Buttons in selectorGroup always layout horizontally 'horizontal', selectorGroup, @@ -463,30 +462,29 @@ export default echarts.extendComponentView({ var selectorRect = selectorGroup.getBoundingRect(); var selectorPos = [-selectorRect.x, -selectorRect.y]; - var selectorLegendContentGap = legendModel.get('selectorLegendContentGap', true); + 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'; - var selectorBorderGap = legendModel.get('selectorBorderGap', true); + 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] + selectorLegendContentGap; + selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap; } else { - contentPos[orientIdx] += selectorRect[WH] + selectorLegendContentGap; + contentPos[orientIdx] += selectorRect[wh] + selectorButtonGap; } //Always align selector to content as 'middle' - selectorPos[1 - orientIdx] += contentRect[HW] / 2 - selectorRect[HW] / 2; + selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2; selectorGroup.attr('position', selectorPos); contentGroup.attr('position', contentPos); var mainRect = {x: 0, y: 0}; - mainRect[WH] = contentRect[WH] + selectorLegendContentGap + selectorRect[WH] + selectorBorderGap; - mainRect[HW] = Math.max(contentRect[HW], selectorRect[HW]); - mainRect[YX] = Math.min(0, selectorRect[YX] + selectorPos[1 - orientIdx]); + 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 { diff --git a/src/component/legend/ScrollableLegendView.js b/src/component/legend/ScrollableLegendView.js index 832a4f1fc..c1ff0bdac 100644 --- a/src/component/legend/ScrollableLegendView.js +++ b/src/component/legend/ScrollableLegendView.js @@ -144,7 +144,6 @@ var ScrollableLegendView = LegendView.extend({ var containerGroup = this._containerGroup; var controllerGroup = this._controllerGroup; var selectorGroup = this.getSelectorGroup(); - var isSelector = selector && selectorGroup; var orientIdx = legendModel.getOrient().index; var wh = WH[orientIdx]; @@ -160,19 +159,16 @@ var ScrollableLegendView = LegendView.extend({ orientIdx ? null : maxSize.height ); - if (isSelector) { - layoutUtil.box( - // Buttons in selectorGroup always layout horizontally - 'horizontal', - selectorGroup, - legendModel.get('selectorItemGap', true) - ); - } + selector && layoutUtil.box( + // Buttons in selectorGroup always layout horizontally + 'horizontal', + selectorGroup, + legendModel.get('selectorItemGap', true) + ); - var selectorLegendContentGap = isSelector ? legendModel.get('selectorLegendContentGap', true) : 0; + var selectorButtonGap = selector ? legendModel.get('selectorButtonGap', true) : 0; - var selectorBorderGap = isSelector ? legendModel.get('selectorBorderGap', true) : 0; - var selectorRect = isSelector ? selectorGroup.getBoundingRect() : {x: 0, y: 0, width: 0, height: 0}; + var selectorRect = selector ? selectorGroup.getBoundingRect() : {x: 0, y: 0, width: 0, height: 0}; var selectorPos = [-selectorRect.x, -selectorRect.y]; layoutUtil.box( @@ -206,15 +202,15 @@ var ScrollableLegendView = LegendView.extend({ var pageButtonPosition = legendModel.get('pageButtonPosition', true); // controller is on the right / bottom. if (pageButtonPosition === 'end') { - if (isSelector) { + if (selector) { if (selectorPosition === 'end') { selectorPos[orientIdx] += maxSize[wh] - selectorRect[wh]; controllerPos[orientIdx] += maxSize[wh] - selectorRect[wh] - - selectorLegendContentGap - controllerRect[wh]; + - selectorButtonGap - controllerRect[wh]; } else { controllerPos[orientIdx] += maxSize[wh] - controllerRect[wh]; - containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap; + containerPos[orientIdx] += selectorRect[wh] + selectorButtonGap; } } else { @@ -223,10 +219,10 @@ var ScrollableLegendView = LegendView.extend({ } // controller is on the left / top. else { - if (isSelector) { + if (selector) { if (selectorPosition === 'start') { - controllerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap; - containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap + controllerPos[orientIdx] += selectorRect[wh] + selectorButtonGap; + containerPos[orientIdx] += selectorRect[wh] + selectorButtonGap + controllerRect[wh] + pageButtonGap; } else { @@ -239,19 +235,19 @@ var ScrollableLegendView = LegendView.extend({ } } } - else if (isSelector) { + else if (selector) { if (selectorPosition === 'end') { - selectorPos[orientIdx] += contentRect[wh] + selectorLegendContentGap; + selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap; } else { - containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap; + containerPos[orientIdx] += selectorRect[wh] + selectorButtonGap; } } // Always align controller to content as 'middle'. controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2; - if (isSelector) { + if (selector) { selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2; selectorGroup.attr('position', selectorPos); } @@ -265,7 +261,7 @@ var ScrollableLegendView = LegendView.extend({ var mainRect = {x: 0, y: 0}; // Consider content may be overflow (should be clipped). mainRect[wh] = showController ? maxSize[wh] - : contentRect[wh] + selectorLegendContentGap + selectorRect[wh] + selectorBorderGap; + : contentRect[wh] + selectorButtonGap + selectorRect[wh]; mainRect[hw] = Math.max(contentRect[hw], controllerRect[hw], selectorRect[hw]); // `containerRect[yx] + containerPos[1 - orientIdx]` is 0. @@ -276,7 +272,7 @@ var ScrollableLegendView = LegendView.extend({ if (showController) { var clipShape = {x: 0, y: 0}; clipShape[wh] = Math.max(maxSize[wh] - controllerRect[wh] - pageButtonGap - - selectorRect[wh] - selectorLegendContentGap - selectorBorderGap, 0); + - selectorRect[wh] - selectorButtonGap, 0); clipShape[hw] = mainRect[hw]; containerGroup.setClipPath(new graphic.Rect({shape: clipShape})); // Consider content may be larger than container, container rect -- GitLab