提交 bbef91a2 编写于 作者: D deqingli

fix(legendSelector): fix legend Selector with CR comment

上级 93c3e623
......@@ -65,7 +65,7 @@ let getLangFileInfo = getPlugin.getLangFileInfo = function (lang) {
if (lang) {
if (/^[a-zA-Z]{2}$/.test(lang)) {
absolutePath = resolve(__dirname, '../', 'src/lang' + lang.toUpperCase() + '.js')
absolutePath = resolve(__dirname, '../', 'src/lang' + lang.toUpperCase() + '.js');
}
else {
isOuter = true;
......
......@@ -21,6 +21,9 @@ import * as echarts from '../../echarts';
import * as zrUtil from 'zrender/src/core/util';
import Model from '../../model/Model';
import {isNameSpecified} from '../../util/model';
import lang from '../../lang';
var langTitle = lang.legendSelector.title;
var LegendModel = echarts.extendComponentModel({
......@@ -54,26 +57,26 @@ var LegendModel = echarts.extendComponentModel({
_updateSelector: function (option) {
var selector = option.selector;
var defaultAllIcon = 'M421.65 752.94h-60.24v60.24c0 18.07 12.05 30.12 30.12 30.12h421.65c18.07 0 30.12-12.05 30.12-30.12V391.53c0-18.07-12.05-30.12-30.12-30.12h-60.24v361.42c0 18.07-12.05 30.12-30.12 30.12H421.65z m271.06-572.23H210.82c-18.07 0-30.12 12.05-30.12 30.12v481.88c0 18.07 12.05 30.12 30.12 30.12h481.89c18.07 0 30.12-12.05 30.12-30.12V210.82c-0.01-18.07-12.05-30.11-30.12-30.11zM30.12 421.65c18.07 0 30.12-12.05 30.12-30.12V60.24h331.29c18.07 0 30.12-12.05 30.12-30.12S409.6 0 391.53 0H30.12C12.05 0 0 12.05 0 30.12v361.41c0 18.07 12.05 30.12 30.12 30.12z m361.41 542.11H60.24V632.47c0-18.07-12.05-30.12-30.12-30.12S0 614.4 0 632.47v361.41c0 18.07 12.05 30.12 30.12 30.12h361.41c18.07 0 30.12-12.05 30.12-30.12s-12.05-30.12-30.12-30.12z m602.35-361.41c-18.07 0-30.12 12.05-30.12 30.12v331.29H632.47c-18.07 0-30.12 12.05-30.12 30.12S614.4 1024 632.47 1024h361.41c18.07 0 30.12-12.05 30.12-30.12V632.47c0-18.07-12.05-30.12-30.12-30.12z m0-602.35H512c-18.07 0-30.12 12.05-30.12 30.12S493.93 60.24 512 60.24h451.76v331.29c0 18.07 12.05 30.12 30.12 30.12S1024 409.6 1024 391.53V30.12C1024 12.05 1011.95 0 993.88 0z';
var defaultInverseIcon = 'M843.29 331.28v481.9c0 16.65-13.47 30.12-30.12 30.12H331.3c-16.65 0-30.12-13.47-30.12-30.12v-60.23h421.63c16.65 0 30.12-13.47 30.12-30.12V301.17h60.23c16.65 0 30.13 13.47 30.13 30.11zM722.82 692.72v-481.9c0-16.65-13.47-30.12-30.12-30.12H210.83c-16.65 0-30.12 13.47-30.12 30.12v481.9c0 16.65 13.47 30.12 30.12 30.12H692.7c16.65-0.01 30.12-13.48 30.12-30.12zM240.95 240.93h421.63V662.6H240.95V240.93zM60.25 391.52V60.23h331.28c16.65 0 30.12-13.47 30.12-30.12S408.18 0 391.53 0H30.13C13.48 0 0.01 13.47 0.01 30.12v361.4c0 16.65 13.47 30.12 30.12 30.12s30.12-13.48 30.12-30.12z m361.4 602.36c0-16.65-13.47-30.12-30.12-30.12H60.25V632.48c0-16.65-13.47-30.12-30.12-30.12S0.01 615.84 0.01 632.48v361.4c0 16.65 13.47 30.12 30.12 30.12h361.4c16.65 0 30.12-13.47 30.12-30.12z m602.34 0v-361.4c0-16.65-13.47-30.12-30.12-30.12s-30.12 13.47-30.12 30.12v331.28H632.47c-16.65 0-30.12 13.47-30.12 30.12s13.47 30.12 30.12 30.12h361.4c16.65 0 30.12-13.47 30.12-30.12z m0-602.36V30.12c0-16.65-13.47-30.12-30.12-30.12h-361.4c-16.65 0-30.12 13.47-30.12 30.12s13.47 30.12 30.12 30.12h331.28v331.28c0 16.65 13.47 30.12 30.12 30.12 16.65-0.01 30.12-13.48 30.12-30.12z';
if (selector === true) {
option.selector = [{
var defaultSelectorOption = {
all: {
type: 'all',
title: '全选',
icon: defaultAllIcon
}, {
icon: 'M421.65 752.94h-60.24v60.24c0 18.07 12.05 30.12 30.12 30.12h421.65c18.07 0 30.12-12.05 30.12-30.12V391.53c0-18.07-12.05-30.12-30.12-30.12h-60.24v361.42c0 18.07-12.05 30.12-30.12 30.12H421.65z m271.06-572.23H210.82c-18.07 0-30.12 12.05-30.12 30.12v481.88c0 18.07 12.05 30.12 30.12 30.12h481.89c18.07 0 30.12-12.05 30.12-30.12V210.82c-0.01-18.07-12.05-30.11-30.12-30.11zM30.12 421.65c18.07 0 30.12-12.05 30.12-30.12V60.24h331.29c18.07 0 30.12-12.05 30.12-30.12S409.6 0 391.53 0H30.12C12.05 0 0 12.05 0 30.12v361.41c0 18.07 12.05 30.12 30.12 30.12z m361.41 542.11H60.24V632.47c0-18.07-12.05-30.12-30.12-30.12S0 614.4 0 632.47v361.41c0 18.07 12.05 30.12 30.12 30.12h361.41c18.07 0 30.12-12.05 30.12-30.12s-12.05-30.12-30.12-30.12z m602.35-361.41c-18.07 0-30.12 12.05-30.12 30.12v331.29H632.47c-18.07 0-30.12 12.05-30.12 30.12S614.4 1024 632.47 1024h361.41c18.07 0 30.12-12.05 30.12-30.12V632.47c0-18.07-12.05-30.12-30.12-30.12z m0-602.35H512c-18.07 0-30.12 12.05-30.12 30.12S493.93 60.24 512 60.24h451.76v331.29c0 18.07 12.05 30.12 30.12 30.12S1024 409.6 1024 391.53V30.12C1024 12.05 1011.95 0 993.88 0z',
title: zrUtil.clone(langTitle.all)
},
inverse: {
type: 'inverse',
title: '反选',
icon: defaultInverseIcon
}];
icon: 'M843.29 331.28v481.9c0 16.65-13.47 30.12-30.12 30.12H331.3c-16.65 0-30.12-13.47-30.12-30.12v-60.23h421.63c16.65 0 30.12-13.47 30.12-30.12V301.17h60.23c16.65 0 30.13 13.47 30.13 30.11zM722.82 692.72v-481.9c0-16.65-13.47-30.12-30.12-30.12H210.83c-16.65 0-30.12 13.47-30.12 30.12v481.9c0 16.65 13.47 30.12 30.12 30.12H692.7c16.65-0.01 30.12-13.48 30.12-30.12zM240.95 240.93h421.63V662.6H240.95V240.93zM60.25 391.52V60.23h331.28c16.65 0 30.12-13.47 30.12-30.12S408.18 0 391.53 0H30.13C13.48 0 0.01 13.47 0.01 30.12v361.4c0 16.65 13.47 30.12 30.12 30.12s30.12-13.48 30.12-30.12z m361.4 602.36c0-16.65-13.47-30.12-30.12-30.12H60.25V632.48c0-16.65-13.47-30.12-30.12-30.12S0.01 615.84 0.01 632.48v361.4c0 16.65 13.47 30.12 30.12 30.12h361.4c16.65 0 30.12-13.47 30.12-30.12z m602.34 0v-361.4c0-16.65-13.47-30.12-30.12-30.12s-30.12 13.47-30.12 30.12v331.28H632.47c-16.65 0-30.12 13.47-30.12 30.12s13.47 30.12 30.12 30.12h361.4c16.65 0 30.12-13.47 30.12-30.12z m0-602.36V30.12c0-16.65-13.47-30.12-30.12-30.12h-361.4c-16.65 0-30.12 13.47-30.12 30.12s13.47 30.12 30.12 30.12h331.28v331.28c0 16.65 13.47 30.12 30.12 30.12 16.65-0.01 30.12-13.48 30.12-30.12z',
title: zrUtil.clone(langTitle.inverse)
}
};
if (selector === true) {
selector = option.selector = ['all', 'inverse'];
}
else if (zrUtil.isArray(selector)) {
zrUtil.each(selector, function (item) {
var type = item.type;
item.icon = item.icon
|| (type === 'all' ? defaultAllIcon : defaultInverseIcon);
item.title = item.title || (type === 'all' ? '全选' : '反选');
if (zrUtil.isArray(selector)) {
zrUtil.each(selector, function (item, index) {
zrUtil.isString(item) && (item = {type: item});
selector[index] = zrUtil.merge(item, defaultSelectorOption[item.type]);
});
}
},
......@@ -296,18 +299,21 @@ var LegendModel = echarts.extendComponentModel({
// Usage:
// selector: [{type: 'all or inverse', icon: 'xxx', title: xxx}]
// or
// selector: true
// or
// selector: ['all', 'inverse']
selector: false,
selectorIconStyle: {
color: null,
borderColor: '#666666',
borderWidth: 1,
shadowBlur: null,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
borderWidth: 1
// shadowBlur: null,
// shadowColor: null,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// opacity: 1
},
selectorIconSize: 14,
......@@ -338,9 +344,9 @@ var LegendModel = echarts.extendComponentModel({
selectorItemGap: 7,
selectorLegendGap: 10,
selectorLegendContentGap: 10,
selectorBoundaryGap: 1,
selectorBorderGap: 1,
// Tooltip 相关配置
tooltip: {
......
......@@ -29,7 +29,6 @@ var curry = zrUtil.curry;
var each = zrUtil.each;
var Group = graphic.Group;
var isArray = zrUtil.isArray;
var retrieve2 = zrUtil.retrieve2;
export default echarts.extendComponentView({
......@@ -122,7 +121,7 @@ export default echarts.extendComponentView({
var maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding);
var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selectorPosition);
var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition);
// Place mainGroup, based on the calculated `mainRect`.
var layoutRect = layoutUtil.getLayoutRect(
......@@ -150,7 +149,7 @@ export default echarts.extendComponentView({
/**
* @protected
*/
renderInner: function (itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition, viewportSize) {
renderInner: function (itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition) {
var contentGroup = this.getContentGroup();
var legendDrawnMap = zrUtil.createHashMap();
var selectMode = legendModel.get('selectedMode');
......@@ -256,19 +255,18 @@ export default echarts.extendComponentView({
}, this);
if (selector) {
this._createSelector(selector, legendModel, api, orient, selectorPosition, viewportSize);
this._createSelector(selector, legendModel, api, orient, selectorPosition);
}
},
_createSelector: function (selector, legendModel, api, orient, selectorPosition, viewportSize) {
this.group.add(this._selectorGroup = new Group());
_createSelector: function (selector, legendModel, api, orient, selectorPosition) {
!this._selectorGroup && this.group.add(this._selectorGroup = new Group());
var selectorGroup = this._selectorGroup;
var iconSize = legendModel.get('selectorIconSize', true);
if (!isArray(iconSize)) {
iconSize = [iconSize, iconSize];
}
each(selector, function (selectorItem) {
createSelectorButton(selectorItem);
});
......@@ -438,7 +436,7 @@ export default echarts.extendComponentView({
/**
* @protected
*/
layoutInner: function (legendModel, itemAlign, maxSize, isFirstRender, selectorPosition) {
layoutInner: function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
var contentGroup = this.getContentGroup();
var selectorGroup = this._selectorGroup;
......@@ -454,7 +452,7 @@ export default echarts.extendComponentView({
var contentRect = contentGroup.getBoundingRect();
var contentPos = [-contentRect.x, -contentRect.y];
if (selectorGroup) {
if (selector && selectorGroup) {
// Place buttons in selectorGroup
selectorGroup && layoutUtil.box(
// Buttons in selectorGroup always layout horizontally
......@@ -465,22 +463,19 @@ export default echarts.extendComponentView({
var selectorRect = selectorGroup.getBoundingRect();
var selectorPos = [-selectorRect.x, -selectorRect.y];
var selectorLegendGap = retrieve2(
legendModel.get('selectorLegendGap', true), legendModel.get('itemGap', true)
);
var selectorLegendContentGap = legendModel.get('selectorLegendContentGap', 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 selectorBoundaryGap = legendModel.get('selectorBoundaryGap', true);
var selectorBorderGap = legendModel.get('selectorBorderGap', true);
if (selectorPosition === 'end') {
selectorPos[orientIdx] += contentRect[WH] + selectorLegendGap;
selectorPos[orientIdx] += contentRect[WH] + selectorLegendContentGap;
}
else {
contentPos[orientIdx] += selectorRect[WH] + selectorLegendGap;
contentPos[orientIdx] += selectorRect[WH] + selectorLegendContentGap;
}
//Always align selector to content as 'middle'
......@@ -489,7 +484,7 @@ export default echarts.extendComponentView({
contentGroup.attr('position', contentPos);
var mainRect = {x: 0, y: 0};
mainRect[WH] = contentRect[WH] + selectorLegendGap + selectorRect[WH] + selectorBoundaryGap;
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]);
return mainRect;
......
......@@ -139,11 +139,12 @@ var ScrollableLegendView = LegendView.extend({
/**
* @override
*/
layoutInner: function (legendModel, itemAlign, maxSize, isFirstRender, selectorPosition) {
layoutInner: function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
var contentGroup = this.getContentGroup();
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];
......@@ -159,7 +160,7 @@ var ScrollableLegendView = LegendView.extend({
orientIdx ? null : maxSize.height
);
if (selectorGroup) {
if (isSelector) {
layoutUtil.box(
// Buttons in selectorGroup always layout horizontally
'horizontal',
......@@ -168,11 +169,10 @@ var ScrollableLegendView = LegendView.extend({
);
}
var selectorLegendGap = selectorGroup ? zrUtil.retrieve2(
legendModel.get('selectorLegendGap', true), legendModel.get('itemGap', true)) : 0;
var selectorLegendContentGap = isSelector ? legendModel.get('selectorLegendContentGap', true) : 0;
var selectorBoundaryGap = selectorGroup ? legendModel.get('selectorBoundaryGap', true) : 0;
var selectorRect = selectorGroup ? selectorGroup.getBoundingRect() : {x: 0, y: 0, width: 0, height: 0};
var selectorBorderGap = isSelector ? legendModel.get('selectorBorderGap', true) : 0;
var selectorRect = isSelector ? selectorGroup.getBoundingRect() : {x: 0, y: 0, width: 0, height: 0};
var selectorPos = [-selectorRect.x, -selectorRect.y];
layoutUtil.box(
......@@ -206,15 +206,15 @@ var ScrollableLegendView = LegendView.extend({
var pageButtonPosition = legendModel.get('pageButtonPosition', true);
// controller is on the right / bottom.
if (pageButtonPosition === 'end') {
if (selectorGroup) {
if (isSelector) {
if (selectorPosition === 'end') {
selectorPos[orientIdx] += maxSize[wh] - selectorRect[wh];
controllerPos[orientIdx] += maxSize[wh] - selectorRect[wh]
- selectorLegendGap - controllerRect[wh];
- selectorLegendContentGap - controllerRect[wh];
}
else {
controllerPos[orientIdx] += maxSize[wh] - controllerRect[wh];
containerPos[orientIdx] += selectorRect[wh] + selectorLegendGap;
containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap;
}
}
else {
......@@ -223,10 +223,10 @@ var ScrollableLegendView = LegendView.extend({
}
// controller is on the left / top.
else {
if (selectorGroup) {
if (isSelector) {
if (selectorPosition === 'start') {
controllerPos[orientIdx] += selectorRect[wh] + selectorLegendGap;
containerPos[orientIdx] += selectorRect[wh] + selectorLegendGap
controllerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap;
containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap
+ controllerRect[wh] + pageButtonGap;
}
else {
......@@ -239,19 +239,19 @@ var ScrollableLegendView = LegendView.extend({
}
}
}
else if (selectorGroup) {
else if (isSelector) {
if (selectorPosition === 'end') {
selectorPos[orientIdx] += contentRect[wh] + selectorLegendGap;
selectorPos[orientIdx] += contentRect[wh] + selectorLegendContentGap;
}
else {
containerPos[orientIdx] += selectorRect[wh] + selectorLegendGap;
containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap;
}
}
// Always align controller to content as 'middle'.
controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2;
if (selectorGroup) {
if (isSelector) {
selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
selectorGroup.attr('position', selectorPos);
}
......@@ -265,7 +265,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] + selectorLegendGap + selectorRect[wh] + selectorBoundaryGap;
: contentRect[wh] + selectorLegendContentGap + selectorRect[wh] + selectorBorderGap;
mainRect[hw] = Math.max(contentRect[hw], controllerRect[hw], selectorRect[hw]);
// `containerRect[yx] + containerPos[1 - orientIdx]` is 0.
......@@ -276,7 +276,7 @@ var ScrollableLegendView = LegendView.extend({
if (showController) {
var clipShape = {x: 0, y: 0};
clipShape[wh] = Math.max(maxSize[wh] - controllerRect[wh] - pageButtonGap
- selectorRect[wh] - selectorLegendGap - selectorBoundaryGap, 0);
- selectorRect[wh] - selectorLegendContentGap - selectorBorderGap, 0);
clipShape[hw] = mainRect[hw];
containerGroup.setClipPath(new graphic.Rect({shape: clipShape}));
// Consider content may be larger than container, container rect
......
......@@ -19,6 +19,12 @@
export default {
legendSelector: {
title: {
all: '全选',
inverse: '反选'
}
},
toolbox: {
brush: {
title: {
......
......@@ -19,6 +19,12 @@
export default {
legendSelector: {
title: {
all: 'All',
inverse: 'Inv'
}
},
toolbox: {
brush: {
title: {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册