From 35e35119b55cd36d1cb4936912ebeebe4e2cd78a Mon Sep 17 00:00:00 2001 From: pissang Date: Tue, 14 Sep 2021 15:02:54 +0800 Subject: [PATCH] fix(legend): add back symbolKeepAspect. optimize code logic. --- src/component/legend/LegendModel.ts | 32 ++++--- src/component/legend/LegendView.ts | 127 +++++++++++----------------- test/runTest/server.js | 2 +- 3 files changed, 64 insertions(+), 97 deletions(-) diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts index 9026471423..855bcdd9ac 100644 --- a/src/component/legend/LegendModel.ts +++ b/src/component/legend/LegendModel.ts @@ -115,6 +115,11 @@ export interface LegendStyleOption { textStyle?: LabelOption symbolRotate?: number | 'inherit' + + /** + * @deprecated + */ + symbolKeepAspect?: boolean } interface DataItem extends LegendStyleOption { @@ -134,19 +139,20 @@ export interface LegendTooltipFormatterParams { } export interface LegendIconParams { - itemWidth: number, - itemHeight: number, + itemWidth: number + itemHeight: number /** * symbolType is from legend.icon, legend.data.icon, or series visual */ - icon: string, - iconRotate: number | 'inherit', - itemStyle: PathStyleProps, + icon: string + iconRotate: number | 'inherit' + symbolKeepAspect: boolean + itemStyle: PathStyleProps lineStyle: LineStyleProps } export interface LegendSymbolStyleOption { - itemStyle?: ItemStyleProps, + itemStyle?: ItemStyleProps lineStyle?: LineStyleProps } @@ -454,6 +460,7 @@ class LegendModel extends ComponentMode itemWidth: 25, itemHeight: 14, symbolRotate: 'inherit', + symbolKeepAspect: true, inactiveColor: '#ccc', inactiveBorderColor: '#ccc', @@ -462,11 +469,6 @@ class LegendModel extends ComponentMode itemStyle: { color: 'inherit', opacity: 'inherit', - decal: 'inherit', - shadowBlur: 0, - shadowColor: null, - shadowOffsetX: 0, - shadowOffsetY: 0, borderColor: 'inherit', borderWidth: 'auto', borderCap: 'inherit', @@ -485,11 +487,7 @@ class LegendModel extends ComponentMode cap: 'inherit', join: 'inherit', dashOffset: 'inherit', - miterLimit: 'inherit', - shadowBlur: 0, - shadowColor: null, - shadowOffsetX: 0, - shadowOffsetY: 0 + miterLimit: 'inherit' }, textStyle: { @@ -504,7 +502,7 @@ class LegendModel extends ComponentMode borderRadius: 10, padding: [3, 5, 3, 5], fontSize: 12, - fontFamily: ' sans-serif', + fontFamily: 'sans-serif', color: '#666', borderWidth: 1, borderColor: '#666' diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts index 5e064fd5fe..f7ce4f5126 100644 --- a/src/component/legend/LegendView.ts +++ b/src/component/legend/LegendView.ts @@ -347,16 +347,15 @@ class LegendView extends ComponentView { const itemHeight = legendModel.get('itemHeight'); const isSelected = legendModel.isSelected(name); - let iconRotate = legendItemModel.get('symbolRotate'); + const iconRotate = legendItemModel.get('symbolRotate'); + const symbolKeepAspect = legendItemModel.get('symbolKeepAspect'); const legendIconType = legendItemModel.get('icon'); legendIcon = legendIconType || legendIcon || 'roundRect'; - const legendLineStyle = legendModel.getModel('lineStyle'); const style = getLegendStyle( legendIcon, legendItemModel, - legendLineStyle, lineVisualStyle, itemVisualStyle, drawType, @@ -377,7 +376,8 @@ class LegendView extends ComponentView { icon: legendIcon, iconRotate: iconRotate, itemStyle: style.itemStyle, - lineStyle: style.lineStyle + lineStyle: style.lineStyle, + symbolKeepAspect })); } else { @@ -394,7 +394,8 @@ class LegendView extends ComponentView { icon: legendIcon, iconRotate: rotate, itemStyle: style.itemStyle, - lineStyle: style.lineStyle + lineStyle: style.lineStyle, + symbolKeepAspect })); } @@ -540,8 +541,7 @@ class LegendView extends ComponentView { function getLegendStyle( iconType: string, legendModel: LegendModel['_data'][number], - legendLineStyle: Model, - lineVisualStyle: LineStyleProps, + lineVisualStyle: PathStyleProps, itemVisualStyle: PathStyleProps, drawType: 'fill' | 'stroke', isSelected: boolean @@ -550,81 +550,49 @@ function getLegendStyle( * Use series style if is inherit; * elsewise, use legend style */ + function handleCommonProps(style: PathStyleProps, visualStyle: PathStyleProps) { + // If lineStyle.width is 'auto', it is set to be 2 if series has border + if ((style.lineWidth as any) === 'auto') { + style.lineWidth = (visualStyle.lineWidth > 0) ? 2 : 0; + } + + each(style, (propVal, propName) => { + style[propName] === 'inherit' && ((style as any)[propName] = visualStyle[propName]); + }); + } // itemStyle const legendItemModel = legendModel.getModel('itemStyle') as Model; - const itemProperties = ITEM_STYLE_KEY_MAP.concat([ - ['decal'] - ]); - const itemStyle: PathStyleProps = {}; - for (let i = 0; i < itemProperties.length; ++i) { - const propName = itemProperties[i][ - itemProperties[i].length - 1 - ] as keyof LegendItemStyleOption; - const visualName = itemProperties[i][0] as keyof PathStyleProps; - const value = legendItemModel.getShallow(propName) as LegendItemStyleOption[keyof LegendItemStyleOption]; - if (value === 'inherit') { - switch (visualName) { - case 'fill': - /** - * Series with visualDrawType as 'stroke' should have - * series stroke as legend fill - */ - itemStyle.fill = itemVisualStyle[drawType]; - break; - - case 'stroke': - /** - * icon type with "emptyXXX" should use fill color - * in visual style - */ - itemStyle.stroke = itemVisualStyle[ - iconType.lastIndexOf('empty', 0) === 0 ? 'fill' : 'stroke' - ]; - break; - - case 'opacity': - /** - * Use lineStyle.opacity if drawType is stroke - */ - itemStyle.opacity = (drawType === 'fill' ? itemVisualStyle : lineVisualStyle).opacity; - break; - - default: - (itemStyle as any)[visualName] = itemVisualStyle[visualName]; - } - } - else if (value === 'auto' && visualName === 'lineWidth') { - // If lineStyle.width is 'auto', it is set to be 2 if series has border - itemStyle.lineWidth = (itemVisualStyle.lineWidth > 0) ? 2 : 0; - } - else { - (itemStyle as any)[visualName] = value; - } + const itemStyle = legendItemModel.getItemStyle(); + const iconBrushType = iconType.lastIndexOf('empty', 0) === 0 ? 'fill' : 'stroke'; + + itemStyle.decal = itemVisualStyle.decal; + if (itemStyle.fill === 'inherit') { + /** + * Series with visualDrawType as 'stroke' should have + * series stroke as legend fill + */ + itemStyle.fill = itemVisualStyle[drawType]; } + if (itemStyle.stroke === 'inherit') { + /** + * icon type with "emptyXXX" should use fill color + * in visual style + */ + itemStyle.stroke = itemVisualStyle[iconBrushType]; + } + if ((itemStyle.opacity as any) === 'inherit') { + /** + * Use lineStyle.opacity if drawType is stroke + */ + itemStyle.opacity = (drawType === 'fill' ? itemVisualStyle : lineVisualStyle).opacity; + } + handleCommonProps(itemStyle, itemVisualStyle); // lineStyle const legendLineModel = legendModel.getModel('lineStyle') as Model; - const lineProperties = LINE_STYLE_KEY_MAP.concat([ - ['inactiveColor'], - ['inactiveWidth'] - ]); - const lineStyle: LineStyleProps = {}; - for (let i = 0; i < lineProperties.length; ++i) { - const propName = lineProperties[i][1] as keyof LegendLineStyleOption; - const visualName = lineProperties[i][0] as keyof LineStyleProps; - const value = legendLineModel.getShallow(propName) as LegendLineStyleOption[keyof LegendLineStyleOption]; - if (value === 'inherit') { - (lineStyle as any)[visualName] = lineVisualStyle[visualName]; - } - else if (value === 'auto' && visualName === 'lineWidth') { - // If lineStyle.width is 'auto', it is set to be 2 if series has border - lineStyle.lineWidth = lineVisualStyle.lineWidth > 0 ? 2 : 0; - } - else { - (lineStyle as any)[visualName] = value; - } - } + const lineStyle: LineStyleProps = legendLineModel.getLineStyle(); + handleCommonProps(lineStyle, lineVisualStyle); // Fix auto color to real color (itemStyle.fill === 'auto') && (itemStyle.fill = itemVisualStyle.fill); @@ -638,14 +606,14 @@ function getLegendStyle( * there is no border in series but border in legend, so we need to * use border only when series has border if is set to be auto */ - const visualHasBorder = itemStyle[iconType.indexOf('empty') > -1 ? 'fill' : 'stroke']; + const visualHasBorder = itemStyle[iconBrushType]; itemStyle.lineWidth = borderWidth === 'auto' ? (itemVisualStyle.lineWidth > 0 && visualHasBorder ? 2 : 0) : itemStyle.lineWidth; itemStyle.fill = legendModel.get('inactiveColor'); itemStyle.stroke = legendModel.get('inactiveBorderColor'); - lineStyle.stroke = legendLineStyle.get('inactiveColor'); - lineStyle.lineWidth = legendLineStyle.get('inactiveWidth'); + lineStyle.stroke = legendLineModel.get('inactiveColor'); + lineStyle.lineWidth = legendLineModel.get('inactiveWidth'); } return { itemStyle, lineStyle }; } @@ -658,7 +626,8 @@ function getDefaultLegendIcon(opt: LegendIconParams): ECSymbol { 0, opt.itemWidth, opt.itemHeight, - opt.itemStyle.fill + opt.itemStyle.fill, + opt.symbolKeepAspect ); icon.setStyle(opt.itemStyle); diff --git a/test/runTest/server.js b/test/runTest/server.js index 1e224ac22c..f74b001956 100644 --- a/test/runTest/server.js +++ b/test/runTest/server.js @@ -229,7 +229,7 @@ async function start() { let {io} = serve(); const stableVersions = await fetchVersions(false); - const nightlyVersions = await fetchVersions(true); + const nightlyVersions = (await fetchVersions(true)).slice(0, 100); stableVersions.unshift('local'); nightlyVersions.unshift('local');