From a08c1042e9da7cea6fd3c85612774a2d052d1c39 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Sat, 12 Mar 2022 16:13:38 +0800 Subject: [PATCH 1/6] fix(state): comp `isBlured` is true when blur --- src/util/states.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/util/states.ts b/src/util/states.ts index d247cb62b4..e6d313977d 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -520,6 +520,7 @@ export function blurSeries( } const view = api.getViewOfComponentModel(componentModel); if (view && view.blurSeries) { + getComponentStates(componentModel).isBlured = true; view.blurSeries(blurredSeries, ecModel); } }); From 20437bb15a04632bad66d2105aa440a9de5eab7f Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Sat, 12 Mar 2022 16:28:12 +0800 Subject: [PATCH 2/6] test(markPoint): add test case --- test/markPoint.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/markPoint.html b/test/markPoint.html index bf42fbaa07..f4ca85f12f 100644 --- a/test/markPoint.html +++ b/test/markPoint.html @@ -89,7 +89,9 @@ symbolSize: 6, areaStyle: {normal: {}}, data: data1, - + emphasis: { + focus: 'series' + }, markPoint: { data: [ { From fd4285da14fe88b97fe749f89c79cafc8df7d2fa Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Sat, 12 Mar 2022 23:04:18 +0800 Subject: [PATCH 3/6] fix(marker): marker leave blur --- src/component/marker/MarkerView.ts | 19 ++++++++++++++++++- src/util/states.ts | 13 +++++++++---- src/view/Component.ts | 8 ++++++++ 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/component/marker/MarkerView.ts b/src/component/marker/MarkerView.ts index 9af63e3760..3dfde52ebd 100644 --- a/src/component/marker/MarkerView.ts +++ b/src/component/marker/MarkerView.ts @@ -25,7 +25,7 @@ import ExtensionAPI from '../../core/ExtensionAPI'; import { makeInner } from '../../util/model'; import SeriesModel from '../../model/Series'; import Group from 'zrender/src/graphic/Group'; -import { enterBlur } from '../../util/states'; +import { enterBlur, leaveBlur } from '../../util/states'; const inner = makeInner<{ keep: boolean @@ -88,6 +88,23 @@ abstract class MarkerView extends ComponentView { }); } + leaveBlurSeries(seriesModelList: SeriesModel[]) { + each(seriesModelList, seriesModel => { + const markerModel = MarkerModel.getMarkerModelFromSeries( + seriesModel, + this.type as 'markPoint' | 'markLine' | 'markArea' + ); + if (markerModel) { + const data = markerModel.getData(); + data.eachItemGraphicEl(function (el) { + if (el) { + leaveBlur(el); + } + }); + } + }); + } + abstract renderSeries( seriesModel: SeriesModel, markerModel: MarkerModel, diff --git a/src/util/states.ts b/src/util/states.ts index e6d313977d..9c323ece47 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -61,6 +61,7 @@ import GlobalModel from '../model/Global'; import ExtensionAPI from '../core/ExtensionAPI'; import ComponentModel from '../model/Component'; import { error } from './log'; +import type ComponentView from '../view/Component'; // Reserve 0 as default. let _highlightNextDigit = 1; @@ -427,17 +428,22 @@ function shouldSilent(el: Element, e: ElementEvent) { export function allLeaveBlur(api: ExtensionAPI) { const model = api.getModel(); + const leaveBlurredSeries: SeriesModel[] = []; model.eachComponent(function (componentType, componentModel) { const componentStates = getComponentStates(componentModel); + const view = componentType === 'series' + ? api.getViewOfSeriesModel(componentModel as SeriesModel) + : api.getViewOfComponentModel(componentModel); + componentType === 'series' && leaveBlurredSeries.push(componentModel as SeriesModel); if (componentStates.isBlured) { - const view = componentType === 'series' - ? api.getViewOfSeriesModel(componentModel as SeriesModel) - : api.getViewOfComponentModel(componentModel); // Leave blur anyway view.group.traverse(function (child) { singleLeaveBlur(child); }); } + if (view && (view as ComponentView).leaveBlurSeries) { + (view as ComponentView).leaveBlurSeries(leaveBlurredSeries, model); + } componentStates.isBlured = false; }); } @@ -520,7 +526,6 @@ export function blurSeries( } const view = api.getViewOfComponentModel(componentModel); if (view && view.blurSeries) { - getComponentStates(componentModel).isBlured = true; view.blurSeries(blurredSeries, ecModel); } }); diff --git a/src/view/Component.ts b/src/view/Component.ts index 1c729a1ee3..2c597bc758 100644 --- a/src/view/Component.ts +++ b/src/view/Component.ts @@ -114,6 +114,14 @@ class ComponentView { // Do nothing; } + /** + * Hook for leaving blur target series. + * Can be used in marker for leaving blur the markers + */ + leaveBlurSeries(seriesModels: SeriesModel[], ecModel: GlobalModel): void { + // Do nothing; + } + /** * Traverse the new rendered elements. * From 7e6eadb7715502eb8c844905bdb6ba262b33cc85 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 14 Mar 2022 20:47:54 +0800 Subject: [PATCH 4/6] fix(marker): timing of calling leave blur --- src/component/marker/MarkerView.ts | 21 ++------------------- src/util/states.ts | 22 +++++++++++++++------- src/view/Component.ts | 16 ++++------------ 3 files changed, 21 insertions(+), 38 deletions(-) diff --git a/src/component/marker/MarkerView.ts b/src/component/marker/MarkerView.ts index 3dfde52ebd..751dd9f97e 100644 --- a/src/component/marker/MarkerView.ts +++ b/src/component/marker/MarkerView.ts @@ -71,7 +71,7 @@ abstract class MarkerView extends ComponentView { inner(drawGroup).keep = true; } - blurSeries(seriesModelList: SeriesModel[]) { + toggleBlurSeries(seriesModelList: SeriesModel[], isBlur: boolean) { each(seriesModelList, seriesModel => { const markerModel = MarkerModel.getMarkerModelFromSeries( seriesModel, @@ -81,24 +81,7 @@ abstract class MarkerView extends ComponentView { const data = markerModel.getData(); data.eachItemGraphicEl(function (el) { if (el) { - enterBlur(el); - } - }); - } - }); - } - - leaveBlurSeries(seriesModelList: SeriesModel[]) { - each(seriesModelList, seriesModel => { - const markerModel = MarkerModel.getMarkerModelFromSeries( - seriesModel, - this.type as 'markPoint' | 'markLine' | 'markArea' - ); - if (markerModel) { - const data = markerModel.getData(); - data.eachItemGraphicEl(function (el) { - if (el) { - leaveBlur(el); + isBlur ? enterBlur(el) : leaveBlur(el); } }); } diff --git a/src/util/states.ts b/src/util/states.ts index 9c323ece47..5c0e7cbcbf 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -429,23 +429,31 @@ function shouldSilent(el: Element, e: ElementEvent) { export function allLeaveBlur(api: ExtensionAPI) { const model = api.getModel(); const leaveBlurredSeries: SeriesModel[] = []; + const allComponents: ComponentModel[] = []; model.eachComponent(function (componentType, componentModel) { const componentStates = getComponentStates(componentModel); - const view = componentType === 'series' - ? api.getViewOfSeriesModel(componentModel as SeriesModel) + const isSeries = componentType === 'series'; + const view = isSeries ? api.getViewOfSeriesModel(componentModel as SeriesModel) : api.getViewOfComponentModel(componentModel); - componentType === 'series' && leaveBlurredSeries.push(componentModel as SeriesModel); + !isSeries && allComponents.push(componentModel); + isSeries && leaveBlurredSeries.push(componentModel as SeriesModel); if (componentStates.isBlured) { // Leave blur anyway view.group.traverse(function (child) { singleLeaveBlur(child); }); } - if (view && (view as ComponentView).leaveBlurSeries) { - (view as ComponentView).leaveBlurSeries(leaveBlurredSeries, model); + if (view && (view as ComponentView).toggleBlurSeries) { + (view as ComponentView).toggleBlurSeries(leaveBlurredSeries, false, model); } componentStates.isBlured = false; }); + each(allComponents, function (component) { + const view = api.getViewOfComponentModel(component); + if (view && (view as ComponentView).toggleBlurSeries) { + (view as ComponentView).toggleBlurSeries(leaveBlurredSeries, false, model); + } + }); } export function blurSeries( @@ -525,8 +533,8 @@ export function blurSeries( return; } const view = api.getViewOfComponentModel(componentModel); - if (view && view.blurSeries) { - view.blurSeries(blurredSeries, ecModel); + if (view && view.toggleBlurSeries) { + view.toggleBlurSeries(blurredSeries, true, ecModel); } }); } diff --git a/src/view/Component.ts b/src/view/Component.ts index 2c597bc758..ed7fa8ef37 100644 --- a/src/view/Component.ts +++ b/src/view/Component.ts @@ -107,19 +107,11 @@ class ComponentView { } /** - * Hook for blur target series. - * Can be used in marker for blur the markers + * Hook for toggle blur target series. + * Can be used in marker for blur or leave blur the markers */ - blurSeries(seriesModels: SeriesModel[], ecModel: GlobalModel): void { - // Do nothing; - } - - /** - * Hook for leaving blur target series. - * Can be used in marker for leaving blur the markers - */ - leaveBlurSeries(seriesModels: SeriesModel[], ecModel: GlobalModel): void { - // Do nothing; + toggleBlurSeries(seriesModels: SeriesModel[], isBlur: boolean, ecModel: GlobalModel): void { + // Do nothing; } /** From 16d166f28b6e6bb0392c2566044774eaa86505fb Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Tue, 15 Mar 2022 10:48:39 +0800 Subject: [PATCH 5/6] fix(state): add series model to`leaveBlurredSeries` if series is blured --- src/util/states.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/util/states.ts b/src/util/states.ts index 5c0e7cbcbf..641b251849 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -61,7 +61,6 @@ import GlobalModel from '../model/Global'; import ExtensionAPI from '../core/ExtensionAPI'; import ComponentModel from '../model/Component'; import { error } from './log'; -import type ComponentView from '../view/Component'; // Reserve 0 as default. let _highlightNextDigit = 1; @@ -436,22 +435,19 @@ export function allLeaveBlur(api: ExtensionAPI) { const view = isSeries ? api.getViewOfSeriesModel(componentModel as SeriesModel) : api.getViewOfComponentModel(componentModel); !isSeries && allComponents.push(componentModel); - isSeries && leaveBlurredSeries.push(componentModel as SeriesModel); if (componentStates.isBlured) { // Leave blur anyway view.group.traverse(function (child) { singleLeaveBlur(child); }); - } - if (view && (view as ComponentView).toggleBlurSeries) { - (view as ComponentView).toggleBlurSeries(leaveBlurredSeries, false, model); + isSeries && leaveBlurredSeries.push(componentModel as SeriesModel); } componentStates.isBlured = false; }); each(allComponents, function (component) { const view = api.getViewOfComponentModel(component); - if (view && (view as ComponentView).toggleBlurSeries) { - (view as ComponentView).toggleBlurSeries(leaveBlurredSeries, false, model); + if (view && view.toggleBlurSeries) { + view.toggleBlurSeries(leaveBlurredSeries, false, model); } }); } From bfe8d538a2165ad64fdd2d8c5915125b17e11888 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Tue, 15 Mar 2022 13:56:02 +0800 Subject: [PATCH 6/6] chore(state): reduce uncessary function call --- src/util/states.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/util/states.ts b/src/util/states.ts index 641b251849..f3886cd78a 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -61,6 +61,7 @@ import GlobalModel from '../model/Global'; import ExtensionAPI from '../core/ExtensionAPI'; import ComponentModel from '../model/Component'; import { error } from './log'; +import type ComponentView from '../view/Component'; // Reserve 0 as default. let _highlightNextDigit = 1; @@ -428,13 +429,13 @@ function shouldSilent(el: Element, e: ElementEvent) { export function allLeaveBlur(api: ExtensionAPI) { const model = api.getModel(); const leaveBlurredSeries: SeriesModel[] = []; - const allComponents: ComponentModel[] = []; + const allComponentViews: ComponentView[] = []; model.eachComponent(function (componentType, componentModel) { const componentStates = getComponentStates(componentModel); const isSeries = componentType === 'series'; const view = isSeries ? api.getViewOfSeriesModel(componentModel as SeriesModel) : api.getViewOfComponentModel(componentModel); - !isSeries && allComponents.push(componentModel); + !isSeries && allComponentViews.push(view as ComponentView); if (componentStates.isBlured) { // Leave blur anyway view.group.traverse(function (child) { @@ -444,8 +445,7 @@ export function allLeaveBlur(api: ExtensionAPI) { } componentStates.isBlured = false; }); - each(allComponents, function (component) { - const view = api.getViewOfComponentModel(component); + each(allComponentViews, function (view) { if (view && view.toggleBlurSeries) { view.toggleBlurSeries(leaveBlurredSeries, false, model); }