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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
