Skip to content

Commit

Permalink
feat: legend.itemStyle has higher priority
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ovilia
Ovilia committed Sep 14, 2020
1 parent a9b867b commit 7113d24
Show file tree
Hide file tree
Showing 14 changed files with 174 additions and 82 deletions.
2 changes: 0 additions & 2 deletions src/chart/helper/EffectLine.ts
View file
Expand Up @@ -98,8 +98,6 @@ class EffectLine extends graphic.Group {
symbol.scaleX = size[0];
symbol.scaleY = size[1];

symbol.setColor(color);

this._symbolType = symbolType;
this._symbolScale = size;

Expand Down
10 changes: 0 additions & 10 deletions src/chart/helper/LargeSymbolDraw.ts
View file
Expand Up @@ -68,8 +68,6 @@ class LargeSymbolPath extends graphic.Path<LargeSymbolPathProps> {
return new LargeSymbolPathShape();
}

setColor: ECSymbol['setColor'];

buildPath(path: PathProxy | CanvasRenderingContext2D, shape: LargeSymbolPathShape) {
const points = shape.points;
const size = shape.size;
Expand Down Expand Up @@ -274,8 +272,6 @@ class LargeSymbolDraw {
symbolEl.symbolProxy = createSymbol(
data.getVisual('symbol'), 0, 0, 0, 0
);
// Use symbolProxy setColor method
symbolEl.setColor = symbolEl.symbolProxy.setColor;

const extrudeShadow = symbolEl.shape.size[0] < BOOST_SIZE_THRESHOLD;
symbolEl.useStyle(
Expand All @@ -285,12 +281,6 @@ class LargeSymbolDraw {
)
);

const globalStyle = data.getVisual('style');
const visualColor = globalStyle && globalStyle.fill;
if (visualColor) {
symbolEl.setColor(visualColor);
}

if (!isIncremental) {
const ecData = getECData(symbolEl);
// Enable tooltip
Expand Down
4 changes: 2 additions & 2 deletions src/chart/helper/Line.ts
View file
Expand Up @@ -219,7 +219,7 @@ class Line extends graphic.Group {
const symbol = this.childOfName(symbolCategory) as ECSymbol;
if (symbol) {
// Share opacity and color with line.
symbol.setColor(visualColor);
symbol.style.fill = visualColor;
symbol.style.opacity = lineStyle.opacity;

for (let i = 0; i < SPECIAL_STATES.length; i++) {
Expand All @@ -230,7 +230,7 @@ class Line extends graphic.Group {
const state = symbol.ensureState(stateName);
const stateStyle = state.style || (state.style = {});
if (lineStateStyle.stroke != null) {
stateStyle[symbol.__isEmptyBrush ? 'stroke' : 'fill'] = lineStateStyle.stroke;
stateStyle.fill = lineStateStyle.stroke;
}
if (lineStateStyle.opacity != null) {
stateStyle.opacity = lineStateStyle.opacity;
Expand Down
12 changes: 1 addition & 11 deletions src/chart/helper/Symbol.ts
View file
Expand Up @@ -272,18 +272,8 @@ class Symbol extends graphic.Group {
}, symbolStyle));
}
else {
if (symbolPath.__isEmptyBrush) {
// fill and stroke will be swapped if it's empty.
// So we cloned a new style to avoid it affecting the original style in visual storage.
// TODO Better implementation. No empty logic!
symbolPath.useStyle(extend({}, symbolStyle));
}
else {
symbolPath.useStyle(symbolStyle);
}
symbolPath.setColor(visualColor, opts && opts.symbolInnerColor);
symbolPath.useStyle(symbolStyle);
symbolPath.style.strokeNoScale = true;

}
const liftZ = data.getItemVisual(idx, 'liftZ');
const z2Origin = this._z2;
Expand Down
4 changes: 4 additions & 0 deletions src/chart/line/LineView.ts
View file
Expand Up @@ -548,6 +548,10 @@ class LineView extends ChartView {
}
));

if (polyline.style.stroke === 'auto') {
polyline.style.stroke = seriesModel.getColorFromPalette(name, null);
}

setStatesStylesFromModel(polyline, seriesModel, 'lineStyle');

const shouldBolderOnEmphasis = seriesModel.get(['emphasis', 'lineStyle', 'width']) === 'bolder';
Expand Down
1 change: 0 additions & 1 deletion src/chart/radar/RadarView.ts
View file
Expand Up @@ -237,7 +237,6 @@ class RadarView extends ChartView {
}
else {
symbolPath.useStyle(itemStyle);
symbolPath.setColor(color);
}

const pathEmphasisState = symbolPath.ensureState('emphasis');
Expand Down
34 changes: 17 additions & 17 deletions src/component/legend/LegendView.ts
View file
Expand Up @@ -44,8 +44,6 @@ import Displayable, { DisplayableState } from 'zrender/src/graphic/Displayable';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import { parse, stringify } from 'zrender/src/tool/color';
import SeriesModel from '../../model/Series';
import {LineStyleMixin} from '../../model/mixin/lineStyle';
import {LineDrawModelOption} from '../../chart/helper/LineDraw';

const curry = zrUtil.curry;
const each = zrUtil.each;
Expand Down Expand Up @@ -172,6 +170,7 @@ class LegendView extends ComponentView {
const contentGroup = this.getContentGroup();
const legendDrawnMap = zrUtil.createHashMap();
const selectMode = legendModel.get('selectedMode');
const legendItemStyle = legendModel.get('itemStyle');

const excludeSeriesId: string[] = [];
ecModel.eachRawSeries(function (seriesModel) {
Expand Down Expand Up @@ -204,19 +203,24 @@ class LegendView extends ComponentView {
const data = seriesModel.getData();
const style = data.getVisual('style');
const color = style[data.getVisual('drawType')] || style.fill;
const fillColor = style.fill;
const borderColor = style.stroke;
const borderWidth = style.lineWidth;

// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
const legendSymbolStyle = zrUtil.defaults(
data.getVisual('legendSymbolStyle'),
legendItemStyle,
true
);
const symbolType = data.getVisual('symbol');
const symbolSize = seriesModel.get('symbolSize');

const itemGroup = this._createItem(
name, dataIndex, itemModel, legendModel,
legendSymbolType, symbolType, symbolSize,
itemAlign, color, borderColor, borderWidth,
itemAlign, color, fillColor, borderColor, borderWidth,
legendSymbolStyle, selectMode
);

Expand Down Expand Up @@ -261,7 +265,7 @@ class LegendView extends ComponentView {
const itemGroup = this._createItem(
name, dataIndex, itemModel, legendModel,
legendSymbolType, null, null,
itemAlign, color, borderColor, borderWidth,
itemAlign, color, color, borderColor, borderWidth,
{}, selectMode
);

Expand Down Expand Up @@ -343,6 +347,7 @@ class LegendView extends ComponentView {
symbolSize: number | number[],
itemAlign: LegendOption['align'],
color: ZRColor,
fillColor: ZRColor,
borderColor: ZRColor,
borderWidth: number,
legendSymbolStyle: ItemStyleOption,
Expand Down Expand Up @@ -408,7 +413,7 @@ class LegendView extends ComponentView {
(itemHeight - size) / 2,
size,
size,
isSelected ? color : inactiveColor,
isSelected ? fillColor : inactiveColor,
// symbolKeepAspect default true for legend
symbolKeepAspect == null ? true : symbolKeepAspect
);
Expand Down Expand Up @@ -575,17 +580,12 @@ function setSymbolStyle(
isSelected: boolean
) {
let itemStyle;
if (symbolType.indexOf('empty') < 0) {
itemStyle = legendModelItemStyle.getItemStyle();
itemStyle.lineWidth = borderWidth;
// itemStyle.
itemStyle.stroke = borderColor;
if (!isSelected) {
itemStyle.stroke = inactiveBorderColor;
}
}
else {
itemStyle = legendModelItemStyle.getItemStyle(['borderWidth', 'borderColor']);
itemStyle = legendModelItemStyle.getItemStyle();
itemStyle.lineWidth = borderWidth;
// itemStyle.
itemStyle.stroke = borderColor;
if (!isSelected) {
itemStyle.stroke = inactiveBorderColor;
}
(symbol as Displayable).setStyle(itemStyle);
return symbol;
Expand Down
1 change: 0 additions & 1 deletion src/component/timeline/SliderTimelineView.ts
View file
Expand Up @@ -800,7 +800,6 @@ function giveSymbol(
callback && callback.onCreate(symbol);
}
else {
symbol.setColor(color);
group.add(symbol); // Group may be new, also need to add.
callback && callback.onUpdate(symbol);
}
Expand Down
33 changes: 5 additions & 28 deletions src/util/symbol.ts
View file
Expand Up @@ -26,11 +26,7 @@ import {calculateTextPosition} from 'zrender/src/contain/text';
import { Dictionary } from 'zrender/src/core/types';
import { ZRColor } from './types';

type ECSymbol = graphic.Path & {
__isEmptyBrush?: boolean
setColor: (color: ZRColor, innerColor?: string) => void
getColor: () => ZRColor
};
type ECSymbol = graphic.Path;
type SymbolCtor = { new(): ECSymbol };
type SymbolShapeMaker = (x: number, y: number, w: number, h: number, shape: Dictionary<any>) => void;

Expand Down Expand Up @@ -304,21 +300,6 @@ const SymbolClz = graphic.Path.extend({
}
});

// Provide setColor helper method to avoid determine if set the fill or stroke outside
function symbolPathSetColor(this: ECSymbol, color: ZRColor, innerColor?: string) {
if (this.type !== 'image') {
const symbolStyle = this.style;
if (this.__isEmptyBrush) {
symbolStyle.stroke = color;
symbolStyle.fill = innerColor || '#fff';
}
else {
symbolStyle.fill = color;
}
this.markRedraw();
}
}

/**
* Create a symbol element with given symbol configuration: shape, x, y, width, height, color
*/
Expand All @@ -342,7 +323,8 @@ export function createSymbol(
}
let symbolPath: ECSymbol | graphic.Image;

if (symbolType.indexOf('image://') === 0) {
const isImage = symbolType.indexOf('image://') === 0;
if (isImage) {
symbolPath = graphic.makeImage(
symbolType.slice(8),
new BoundingRect(x, y, w, h),
Expand All @@ -369,13 +351,8 @@ export function createSymbol(
}) as unknown as ECSymbol;
}

(symbolPath as ECSymbol).__isEmptyBrush = isEmpty;

// TODO Should deprecate setColor
(symbolPath as ECSymbol).setColor = symbolPathSetColor;

if (color) {
(symbolPath as ECSymbol).setColor(color);
if (color && !isImage) {
(symbolPath as ECSymbol).style.fill = color;
}

return symbolPath as ECSymbol;
Expand Down
6 changes: 6 additions & 0 deletions src/visual/style.ts
View file
Expand Up @@ -88,8 +88,14 @@ const seriesStyleTask: StageHandler = {
// TODO series count changed.
seriesModel.name, null, ecModel.getSeriesCount()
);

globalStyle.fill = globalStyle.fill === 'auto' ? colorPalette : globalStyle.fill;
globalStyle.stroke = globalStyle.stroke === 'auto' ? colorPalette : globalStyle.stroke;

if (!globalStyle[colorKey]) {
globalStyle[colorKey] = colorPalette;
}

data.setVisual('colorFromPalette', true);
}

Expand Down
2 changes: 1 addition & 1 deletion test/area-large.html
View file
Expand Up @@ -154,7 +154,7 @@
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
borderColor: 'rgb(255, 70, 131)'
}
},
areaStyle: {
Expand Down
10 changes: 6 additions & 4 deletions test/axes.html
View file
Expand Up @@ -493,10 +493,11 @@
data: data1,
itemStyle: {
normal: {
borderColor: 'white',
borderWidth: 3,
lineStyle: {width: 1}
}
},
lineStyle: {
width: 1
}
}]
};
Expand Down Expand Up @@ -543,10 +544,11 @@
data: data1,
itemStyle: {
normal: {
borderColor: 'white',
borderWidth: 3,
lineStyle: {width: 1}
}
},
lineStyle: {
width: 1
}
}]
};
Expand Down
1 change: 0 additions & 1 deletion test/axis-interval2.html
View file
Expand Up @@ -98,7 +98,6 @@

var itemStyle = {
normal: {
borderColor: 'white',
borderWidth: 3,
lineStyle: {
width: 1
Expand Down

0 comments on commit 7113d24

Please sign in to comment.