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 2021/03/27 14:54:52 UTC
[echarts] 01/02: fix: [blur] make API trigger emphasis blur correct
(should leave blur firstly for other series).
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/geo-svg
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit c2d78733eedd47d11b5623a3a867fcf4acbb14a9
Author: 100pah <su...@gmail.com>
AuthorDate: Thu Mar 25 13:02:00 2021 +0800
fix: [blur] make API trigger emphasis blur correct (should leave blur firstly for other series).
---
src/core/echarts.ts | 14 +++---
src/util/states.ts | 43 +++++++++--------
test/hoverFocus2.html | 88 +++++++++++++++++++++++++++++++++++
test/runTest/actions/__meta__.json | 2 +-
test/runTest/actions/hoverFocus2.json | 2 +-
5 files changed, 117 insertions(+), 32 deletions(-)
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index fc96e69..a9d7103 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -41,7 +41,7 @@ import {
isHighDownDispatcher,
HOVER_STATE_EMPHASIS,
HOVER_STATE_BLUR,
- toggleSeriesBlurState,
+ blurSeries,
toggleSeriesBlurStateFromPayload,
toggleSelectionFromPayload,
updateSeriesElementSelection,
@@ -59,7 +59,8 @@ import {
leaveBlur,
enterSelect,
leaveSelect,
- enterBlur
+ enterBlur,
+ allLeaveBlur
} from '../util/states';
import * as modelUtil from '../util/model';
import {throttle} from '../util/throttle';
@@ -1898,8 +1899,8 @@ class ECharts extends Eventful<ECEventDefinition> {
const ecData = getECData(dispatcher);
// Try blur all in the related series. Then emphasis the hoverred.
// TODO. progressive mode.
- toggleSeriesBlurState(
- ecData.seriesIndex, ecData.focus, ecData.blurScope, ecIns._api, true
+ blurSeries(
+ ecData.seriesIndex, ecData.focus, ecData.blurScope, ecIns._api
);
enterEmphasisWhenMouseOver(dispatcher, e);
@@ -1909,10 +1910,7 @@ class ECharts extends Eventful<ECEventDefinition> {
const el = e.target;
const dispatcher = findEventDispatcher(el, isHighDownDispatcher);
if (dispatcher) {
- const ecData = getECData(dispatcher);
- toggleSeriesBlurState(
- ecData.seriesIndex, ecData.focus, ecData.blurScope, ecIns._api, false
- );
+ allLeaveBlur(ecIns._api);
leaveEmphasisWhenMouseOut(dispatcher, e);
diff --git a/src/util/states.ts b/src/util/states.ts
index 2136fd7..31b5367 100644
--- a/src/util/states.ts
+++ b/src/util/states.ts
@@ -388,7 +388,7 @@ function shouldSilent(el: Element, e: ElementEvent) {
return (el as ExtendedElement).__highDownSilentOnTouch && e.zrByTouch;
}
-function allLeaveBlur(api: ExtensionAPI) {
+export function allLeaveBlur(api: ExtensionAPI) {
const model = api.getModel();
model.eachComponent(function (componentType, componentModel) {
const view = componentType === 'series'
@@ -401,12 +401,11 @@ function allLeaveBlur(api: ExtensionAPI) {
});
}
-export function toggleSeriesBlurState(
+export function blurSeries(
targetSeriesIndex: number,
focus: InnerFocus,
blurScope: BlurScope,
- api: ExtensionAPI,
- isBlur: boolean
+ api: ExtensionAPI
) {
const ecModel = api.getModel();
blurScope = blurScope || 'coordinateSystem';
@@ -418,11 +417,6 @@ export function toggleSeriesBlurState(
}
}
- if (!isBlur) {
- allLeaveBlur(api);
- return;
- }
-
if (targetSeriesIndex == null) {
return;
}
@@ -512,19 +506,24 @@ export function toggleSeriesBlurStateFromPayload(
el = data.getItemGraphicEl(current++);
}
}
- if (el) {
- const ecData = getECData(el);
- toggleSeriesBlurState(
- seriesIndex, ecData.focus, ecData.blurScope, api, isHighlight
- );
- }
- else {
- // If there is no element put on the data. Try getting it from raw option
- // TODO Should put it on seriesModel?
- const focus = seriesModel.get(['emphasis', 'focus']);
- const blurScope = seriesModel.get(['emphasis', 'blurScope']);
- if (focus != null) {
- toggleSeriesBlurState(seriesIndex, focus, blurScope, api, isHighlight);
+
+ allLeaveBlur(api);
+
+ if (isHighlight) {
+ if (el) {
+ const ecData = getECData(el);
+ blurSeries(
+ seriesIndex, ecData.focus, ecData.blurScope, api
+ );
+ }
+ else {
+ // If there is no element put on the data. Try getting it from raw option
+ // TODO Should put it on seriesModel?
+ const focus = seriesModel.get(['emphasis', 'focus']);
+ const blurScope = seriesModel.get(['emphasis', 'blurScope']);
+ if (focus != null) {
+ blurSeries(seriesIndex, focus, blurScope, api);
+ }
}
}
}
diff --git a/test/hoverFocus2.html b/test/hoverFocus2.html
index 61e313c..31ea524 100644
--- a/test/hoverFocus2.html
+++ b/test/hoverFocus2.html
@@ -39,6 +39,7 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
+ <div id="main2"></div>
@@ -325,6 +326,93 @@ under the License.
});
</script>
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {
+ data: ['a', 'b', 'c']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [1212, 3232, 2525]
+ }, {
+ type: 'bar',
+ emphasis: {
+ // itemStyle: {
+ // color: 'red'
+ // },
+ focus: 'series'
+ },
+ data: [1212, 3232, 2525]
+ }]
+ };
+
+ var buttons = makeToggleChartButtons(function (newOpt) {
+ option.series.forEach(function (seriesOpt) {
+ seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
+ });
+ chart.setOption(option);
+ });
+
+ buttons.push({
+ text: 'highlight seriesIndex: 0, dataIndex: 1',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: 1
+ });
+ }
+ }, {
+ text: 'highlight seriesIndex: 1, dataIndex: 1',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 1,
+ dataIndex: 1
+ });
+ }
+ }, {
+ text: 'downplay seriesIndex: 1, dataIndex: 1',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 1,
+ dataIndex: 1
+ });
+ }
+ }, {
+ text: 'downplay all',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'downplay'
+ });
+ }
+ });
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'API trigger highlight'
+ ],
+ option: option,
+ // height: 300,
+ buttons: buttons
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
</body>
</html>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 80a69e9..5d7c4a6 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -88,7 +88,7 @@
"heatmap-map": 1,
"homepage3": 1,
"hoverFocus": 9,
- "hoverFocus2": 2,
+ "hoverFocus2": 3,
"hoverStyle": 14,
"hoverStyle2": 1,
"label-animation": 3,
diff --git a/test/runTest/actions/hoverFocus2.json b/test/runTest/actions/hoverFocus2.json
index a53a5b6..5ad850f 100644
--- a/test/runTest/actions/hoverFocus2.json
+++ b/test/runTest/actions/hoverFocus2.json
@@ -1 +1 @@
-[{"name":"Action 1","ops":[{"type":"mousedown","time":534,"x":348,"y":376},{"type":"mouseup","time":647,"x":348,"y":376},{"time":648,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1138,"x":341,"y":371},{"type":"mousemove","time":1338,"x":174,"y":134},{"type":"mousemove","time":1538,"x":78,"y":77},{"type":"mousemove","time":1744,"x":78,"y":76},{"type":"mousedown","time":1847,"x":78,"y":76},{"type":"mouseup","time":1928,"x":78,"y":76},{"time":1929,"delay":400,"type":"scre [...]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":534,"x":348,"y":376},{"type":"mouseup","time":647,"x":348,"y":376},{"time":648,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1138,"x":341,"y":371},{"type":"mousemove","time":1338,"x":174,"y":134},{"type":"mousemove","time":1538,"x":78,"y":77},{"type":"mousemove","time":1744,"x":78,"y":76},{"type":"mousedown","time":1847,"x":78,"y":76},{"type":"mouseup","time":1928,"x":78,"y":76},{"time":1929,"delay":400,"type":"scre [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org