Skip to content

Commit

Permalink
Merge pull request #15720 from apache/fix-legend-symbol-keep-aspect
Browse files Browse the repository at this point in the history 
fix(legend): add back symbolKeepAspect. optimize code logic.
  • Loading branch information
@pissang
pissang committed Sep 15, 2021
2 parents 5d667ec + 35e3511 commit 26e9a95
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 97 deletions.
32 changes: 15 additions & 17 deletions src/component/legend/LegendModel.ts
View file
Expand Up @@ -115,6 +115,11 @@ export interface LegendStyleOption {
textStyle?: LabelOption

symbolRotate?: number | 'inherit'

/**
* @deprecated
*/
symbolKeepAspect?: boolean
}

interface DataItem extends LegendStyleOption {
Expand All @@ -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
}

Expand Down Expand Up @@ -454,6 +460,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
itemWidth: 25,
itemHeight: 14,
symbolRotate: 'inherit',
symbolKeepAspect: true,

inactiveColor: '#ccc',
inactiveBorderColor: '#ccc',
Expand All @@ -462,11 +469,6 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
itemStyle: {
color: 'inherit',
opacity: 'inherit',
decal: 'inherit',
shadowBlur: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
borderColor: 'inherit',
borderWidth: 'auto',
borderCap: 'inherit',
Expand All @@ -485,11 +487,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
cap: 'inherit',
join: 'inherit',
dashOffset: 'inherit',
miterLimit: 'inherit',
shadowBlur: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0
miterLimit: 'inherit'
},

textStyle: {
Expand All @@ -504,7 +502,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
borderRadius: 10,
padding: [3, 5, 3, 5],
fontSize: 12,
fontFamily: ' sans-serif',
fontFamily: 'sans-serif',
color: '#666',
borderWidth: 1,
borderColor: '#666'
Expand Down
127 changes: 48 additions & 79 deletions src/component/legend/LegendView.ts
View file
Expand Up @@ -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,
Expand All @@ -377,7 +376,8 @@ class LegendView extends ComponentView {
icon: legendIcon,
iconRotate: iconRotate,
itemStyle: style.itemStyle,
lineStyle: style.lineStyle
lineStyle: style.lineStyle,
symbolKeepAspect
}));
}
else {
Expand All @@ -394,7 +394,8 @@ class LegendView extends ComponentView {
icon: legendIcon,
iconRotate: rotate,
itemStyle: style.itemStyle,
lineStyle: style.lineStyle
lineStyle: style.lineStyle,
symbolKeepAspect
}));
}

Expand Down Expand Up @@ -540,8 +541,7 @@ class LegendView extends ComponentView {
function getLegendStyle(
iconType: string,
legendModel: LegendModel['_data'][number],
legendLineStyle: Model<LegendLineStyleOption>,
lineVisualStyle: LineStyleProps,
lineVisualStyle: PathStyleProps,
itemVisualStyle: PathStyleProps,
drawType: 'fill' | 'stroke',
isSelected: boolean
Expand All @@ -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<LegendItemStyleOption>;
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<LegendLineStyleOption>;
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);
Expand All @@ -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 };
}
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion test/runTest/server.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 26e9a95

Please sign in to comment.