Skip to content

fix(legend): add back symbolKeepAspect. optimize code logic. #15720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pissang merged 1 commit into from
Sep 15, 2021
+64 −97
Merged

fix(legend): add back symbolKeepAspect. optimize code logic. #15720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions src/component/legend/LegendModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop

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