You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/05/15 11:15:58 UTC
[incubator-echarts] branch master updated: Fix hover style on
textStroke bug in custom series.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new 6b510da Fix hover style on textStroke bug in custom series.
6b510da is described below
commit 6b510da71fea14a9f6e7b028e5107445a18bceaf
Author: sushuang <su...@gmail.com>
AuthorDate: Wed May 15 02:02:14 2019 +0800
Fix hover style on textStroke bug in custom series.
---
src/chart/custom.js | 49 ++++++++++++++++++++++++++++++++++++++++++-------
src/util/graphic.js | 17 +++++++++++++----
test/hoverStyle.html | 49 +++++++++++++++++++++++++++++++++++++++++++++++--
3 files changed, 102 insertions(+), 13 deletions(-)
diff --git a/src/chart/custom.js b/src/chart/custom.js
index 825d33b..453af47 100644
--- a/src/chart/custom.js
+++ b/src/chart/custom.js
@@ -25,6 +25,7 @@ import createListFromArray from './helper/createListFromArray';
import {getLayoutOnAxis} from '../layout/barGrid';
import DataDiffer from '../data/DataDiffer';
import SeriesModel from '../model/Series';
+import Model from '../model/Model';
import ChartView from '../view/Chart';
import prepareCartesian2d from '../coord/cartesian/prepareCustom';
@@ -33,7 +34,7 @@ import prepareSingleAxis from '../coord/single/prepareCustom';
import preparePolar from '../coord/polar/prepareCustom';
import prepareCalendar from '../coord/calendar/prepareCustom';
-
+var CACHED_LABEL_STYLE_PROPERTIES = graphicUtil.CACHED_LABEL_STYLE_PROPERTIES;
var ITEM_STYLE_NORMAL_PATH = ['itemStyle'];
var ITEM_STYLE_EMPHASIS_PATH = ['emphasis', 'itemStyle'];
var LABEL_NORMAL = ['label'];
@@ -42,6 +43,7 @@ var LABEL_EMPHASIS = ['emphasis', 'label'];
// which will cause weird udpate animation.
var GROUP_DIFF_PREFIX = 'e\0\0';
+
/**
* To reduce total package size of each coordinate systems, the modules `prepareCustom`
* of each coordinate systems are not required by each coordinate systems directly, but
@@ -451,19 +453,24 @@ function makeRenderItem(customSeries, data, ecModel, api) {
var opacity = data.getItemVisual(dataIndexInside, 'opacity');
opacity != null && (itemStyle.opacity = opacity);
- graphicUtil.setTextStyle(itemStyle, currLabelNormalModel, null, {
+ var labelModel = extra
+ ? applyExtraBefore(extra, currLabelNormalModel)
+ : currLabelNormalModel;
+
+ graphicUtil.setTextStyle(itemStyle, labelModel, null, {
autoColor: currVisualColor,
isRectText: true
});
- itemStyle.text = currLabelNormalModel.getShallow('show')
+ itemStyle.text = labelModel.getShallow('show')
? zrUtil.retrieve2(
customSeries.getFormattedLabel(dataIndexInside, 'normal'),
getDefaultLabel(data, dataIndexInside)
)
: null;
- extra && zrUtil.extend(itemStyle, extra);
+ extra && applyExtraAfter(itemStyle, extra);
+
return itemStyle;
}
@@ -478,11 +485,15 @@ function makeRenderItem(customSeries, data, ecModel, api) {
var itemStyle = currItemModel.getModel(ITEM_STYLE_EMPHASIS_PATH).getItemStyle();
- graphicUtil.setTextStyle(itemStyle, currLabelEmphasisModel, null, {
+ var labelModel = extra
+ ? applyExtraBefore(extra, currLabelEmphasisModel)
+ : currLabelEmphasisModel;
+
+ graphicUtil.setTextStyle(itemStyle, labelModel, null, {
isRectText: true
}, true);
- itemStyle.text = currLabelEmphasisModel.getShallow('show')
+ itemStyle.text = labelModel.getShallow('show')
? zrUtil.retrieve3(
customSeries.getFormattedLabel(dataIndexInside, 'emphasis'),
customSeries.getFormattedLabel(dataIndexInside, 'normal'),
@@ -490,7 +501,8 @@ function makeRenderItem(customSeries, data, ecModel, api) {
)
: null;
- extra && zrUtil.extend(itemStyle, extra);
+ extra && applyExtraAfter(itemStyle, extra);
+
return itemStyle;
}
@@ -719,6 +731,29 @@ function processAddUpdate(newIndex, oldIndex) {
);
}
+// `graphic#applyDefaultTextStyle` will cache
+// textFill, textStroke, textStrokeWidth.
+// We have to do this trick.
+function applyExtraBefore(extra, model) {
+ var dummyModel = new Model({}, model);
+ zrUtil.each(CACHED_LABEL_STYLE_PROPERTIES, function (stylePropName, modelPropName) {
+ if (extra.hasOwnProperty(stylePropName)) {
+ dummyModel.option[modelPropName] = extra[stylePropName];
+ }
+ });
+ return dummyModel;
+}
+
+function applyExtraAfter(itemStyle, extra) {
+ for (var key in extra) {
+ if (extra.hasOwnProperty(key)
+ || !CACHED_LABEL_STYLE_PROPERTIES.hasOwnProperty(key)
+ ) {
+ itemStyle[key] = extra[key];
+ }
+ }
+}
+
function processRemove(oldIndex) {
var context = this.context;
var child = context.oldChildren[oldIndex];
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 74dfaba..b8c2373 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -312,12 +312,12 @@ function singleEnterEmphasis(el) {
// where properties of `emphasis` may not appear in `normal`. We previously use
// module:echarts/util/model#defaultEmphasis to merge `normal` to `emphasis`.
// But consider rich text and setOption in merge mode, it is impossible to cover
- // all properties in merge. So we use merge mode when setting style here.
+ // all properties in merge. So we use merge mode when setting style here.
// But we choose the merge strategy that only properties that is not `null/undefined`.
- // Because when making a textStyle (espacially rich text), it is not easy to distinguish
+ // Because when making a textStyle (espacially rich text), it is not easy to distinguish
// `hasOwnProperty` and `null/undefined` in code, so we trade them as the same for simplicity.
- // But this strategy brings a trouble that `null/undefined` can not be used to remove
- // style any more in `emphasis`. Users can both set properties directly on normal and
+ // But this strategy brings a trouble that `null/undefined` can not be used to remove
+ // style any more in `emphasis`. Users can both set properties directly on normal and
// emphasis to avoid this issue, or we might support `'none'` for this case if required.
targetStyle.extendFrom(hoverStl);
@@ -902,6 +902,13 @@ function getAutoColor(color, opt) {
return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
}
+// key: label model property nane, value: style property name.
+export var CACHED_LABEL_STYLE_PROPERTIES = {
+ color: 'textFill',
+ textBorderColor: 'textStroke',
+ textBorderWidth: 'textStrokeWidth'
+};
+
/**
* Give some default value to the input `textStyle` object, based on the current settings
* in this `textStyle` object.
@@ -943,6 +950,8 @@ function applyDefaultTextStyle(textStyle) {
)
)
) {
+ // If intend to cache more properties here, modify the
+ // `CACHED_LABEL_STYLE_PROPERTIES`.
insideRollback = {
textFill: null,
textStroke: textStyle.textStroke,
diff --git a/test/hoverStyle.html b/test/hoverStyle.html
index 551e890..807aa40 100644
--- a/test/hoverStyle.html
+++ b/test/hoverStyle.html
@@ -218,6 +218,51 @@ under the License.
data: [
[212, 331], [215, 131], [265, 531]
]
+ }, {
+ type: 'scatter',
+ symbol: 'rect',
+ symbolSize: 40,
+ label: {
+ show: true,
+ formatter: 'label stroke orange hover blue\n{c}',
+ textBorderWidth: 3,
+ textBorderColor: 'orange'
+ },
+ emphasis: {
+ label: {
+ formatter: 'hover become stroke blue',
+ textBorderColor: 'blue'
+ }
+ },
+ data: [
+ [312, 51]
+ ]
+ }, {
+ type: 'custom',
+ renderItem: function (params, api) {
+ var coords = api.coord([312, 351]);
+ return {
+ type: 'rect',
+ shape: {
+ x: coords[0],
+ y: coords[1],
+ width: 50,
+ height: 50
+ },
+ // check api.style
+ style: api.style({
+ text: 'label stroke orange hover blue',
+ textStrokeWidth: 2,
+ textStroke: 'orange'
+ }),
+ styleEmphasis: api.styleEmphasis({
+ textStroke: 'blue'
+ })
+ };
+ },
+ data: [
+ [312, 151]
+ ]
}]
};
@@ -343,7 +388,7 @@ under the License.
{value: 100, name: 'aa', x: 100, y: 200},
{value: 150, name: 'bb', x: 450, y: 300},
{value: 200, name: 'cc', x: 200, y: 100},
- {value: 250, name: 'dd', x: 450, y: 250,
+ {value: 250, name: 'dd', x: 450, y: 250,
emphasis: {
itemStyle: {
color: 'blue'
@@ -373,7 +418,7 @@ under the License.
var chart = testHelper.create(echarts, 'mainb4', {
title: [
- 'normal style is **line: green dashed width 3, node: red**,',
+ 'normal style is **line: green dashed width 3, node: red**,',
'should become **line: orange solid width 8, node: only "dd" blue** when hovered'
],
option: option,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org