feat(state): blur markers when focus

src/component/marker/MarkerView.ts

@@ -18,13 +18,14 @@
 */
 
 import ComponentView from '../../view/Component';
-import { HashMap, createHashMap } from 'zrender/src/core/util';
+import { HashMap, createHashMap, each } from 'zrender/src/core/util';
 import MarkerModel from './MarkerModel';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
 import { makeInner } from '../../util/model';
 import SeriesModel from '../../model/Series';
 import { Group } from 'zrender/src/export';
+import { enterBlur } from '../../util/states';
 
 const inner = makeInner<{
     keep: boolean
@@ -53,23 +54,37 @@ abstract class MarkerView extends ComponentView {
             inner(item).keep = false;
         });
 
-        ecModel.eachSeries(function (seriesModel) {
+        ecModel.eachSeries(seriesModel => {
             const markerModel = MarkerModel.getMarkerModelFromSeries(
                 seriesModel,
                 this.type as 'markPoint' | 'markLine' | 'markArea'
             );
             markerModel && this.renderSeries(seriesModel, markerModel, ecModel, api);
-        }, this);
+        });
 
-        markerGroupMap.each(function (item) {
+        markerGroupMap.each(item => {
             !inner(item).keep && this.group.remove(item.group);
-        }, this);
+        });
     }
 
     markKeep(drawGroup: MarkerDraw) {
         inner(drawGroup).keep = true;
     }
 
+    blurSeries(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) {
+                        enterBlur(el);
+                    }
+                });
+            }
+        });
+    }
+
     abstract renderSeries(
         seriesModel: SeriesModel,
         markerModel: MarkerModel,

src/echarts.ts

@@ -1458,6 +1458,10 @@ class ECharts extends Eventful {
 
                 const componentDirtyList = [];
                 ecModel.eachComponent((componentType, componentModel) => {
+                    if (componentType === 'series') {
+                        return;
+                    }
+
                     const componentView = this.getViewOfComponentModel(componentModel);
                     if (componentView && componentView.__alive) {
                         if (componentView.updateTransform) {
@@ -1544,9 +1548,11 @@ class ECharts extends Eventful {
                 this._scheduler.performVisualTasks(ecModel, payload, {visualType: 'visual', setDirty: true});
 
                 ecModel.eachComponent((componentType, componentModel) => {  // TODO componentType may be series.
-                    const componentView = this.getViewOfComponentModel(componentModel);
-                    componentView && componentView.__alive
-                        && componentView.updateVisual(componentModel, ecModel, this._api, payload);
+                    if (componentType !== 'series') {
+                        const componentView = this.getViewOfComponentModel(componentModel);
+                        componentView && componentView.__alive
+                            && componentView.updateVisual(componentModel, ecModel, this._api, payload);
+                    }
                 });
 
                 ecModel.eachSeries((seriesModel) => {

src/util/states.ts

@@ -288,10 +288,31 @@ export function leaveEmphasis(el: Element, highlightDigit?: number) {
         && traverseUpdateState((el as ExtendedElement), singleLeaveEmphasis);
 }
 
+export function enterBlur(el: Element) {
+    traverseUpdateState(el as ExtendedElement, singleEnterBlur);
+}
+
+export function leaveBlur(el: Element) {
+    traverseUpdateState(el as ExtendedElement, singleLeaveBlur);
+}
+
 function shouldSilent(el: Element, e: ElementEvent) {
     return (el as ExtendedElement).__highDownSilentOnTouch && e.zrByTouch;
 }
 
+function allLeaveBlur(ecIns: EChartsType) {
+    const model = ecIns.getModel();
+    model.eachComponent(function (componentType, componentModel) {
+        const view = componentType === 'series'
+            ? ecIns.getViewOfSeriesModel(componentModel as SeriesModel)
+            : ecIns.getViewOfComponentModel(componentModel);
+        // Leave blur anyway
+        view.group.traverse(function (child) {
+            singleLeaveBlur(child);
+        });
+    });
+}
+
 export function toggleSeriesBlurStates(
     targetSeriesIndex: number,
     focus: InnerFocus,
@@ -299,31 +320,39 @@ export function toggleSeriesBlurStates(
     ecIns: EChartsType,
     isBlur: boolean
 ) {
-    if (targetSeriesIndex == null) {
-        return;
+    const ecModel = ecIns.getModel();
+    blurScope = blurScope || 'coordinateSystem';
+
+    function leaveBlurOfIndices(data: List, dataIndices: ArrayLike<number>) {
+        for (let i = 0; i < dataIndices.length; i++) {
+            const itemEl = data.getItemGraphicEl(dataIndices[i]);
+            itemEl && leaveBlur(itemEl);
+        }
     }
 
-    const model = ecIns.getModel();
-    blurScope = blurScope || 'coordinateSystem';
+    if (!isBlur) {
+        allLeaveBlur(ecIns);
+        return;
+    }
 
-    if (!focus || focus === 'none') {
+    if (targetSeriesIndex == null) {
         return;
     }
 
-    function leaveBlur(data: List, dataIndices: ArrayLike<number>) {
-        for (let i = 0; i < dataIndices.length; i++) {
-            const itemEl = data.getItemGraphicEl(dataIndices[i]);
-            itemEl && traverseUpdateState(itemEl as ExtendedElement, singleLeaveBlur);
-        }
+    if (!focus || focus === 'none') {
+        return;
     }
 
-    const targetSeriesModel = model.getSeriesByIndex(targetSeriesIndex);
+    const targetSeriesModel = ecModel.getSeriesByIndex(targetSeriesIndex);
     let targetCoordSys: CoordinateSystemMaster | CoordinateSystem = targetSeriesModel.coordinateSystem;
     if (targetCoordSys && (targetCoordSys as CoordinateSystem).master) {
         targetCoordSys = (targetCoordSys as CoordinateSystem).master;
     }
 
-    model.eachSeries(function (seriesModel) {
+    const blurredSeries: SeriesModel[] = [];
+
+    ecModel.eachSeries(function (seriesModel) {
+
         const sameSeries = targetSeriesModel === seriesModel;
         let coordSys: CoordinateSystemMaster | CoordinateSystem = seriesModel.coordinateSystem;
         if (coordSys && (coordSys as CoordinateSystem).master) {
@@ -336,27 +365,37 @@ export function toggleSeriesBlurStates(
             // Not blur other series if blurScope series
             blurScope === 'series' && !sameSeries
             // Not blur other coordinate system if blurScope is coordinateSystem
-          || blurScope === 'coordinateSystem' && !sameCoordSys
+            || blurScope === 'coordinateSystem' && !sameCoordSys
             // Not blur self series if focus is series.
-          || focus === 'series' && sameSeries
-          // TODO blurScope: coordinate system
+            || focus === 'series' && sameSeries
+            // TODO blurScope: coordinate system
         )) {
             const view = ecIns.getViewOfSeriesModel(seriesModel);
             view.group.traverse(function (child) {
-                isBlur ? singleEnterBlur(child) : singleLeaveBlur(child);
+                singleEnterBlur(child);
             });
 
-            if (isBlur) {
-                if (isArrayLike(focus)) {
-                    leaveBlur(seriesModel.getData(), focus as ArrayLike<number>);
-                }
-                else if (isObject(focus)) {
-                    const dataTypes = keys(focus);
-                    for (let d = 0; d < dataTypes.length; d++) {
-                        leaveBlur(seriesModel.getData(dataTypes[d]), focus[dataTypes[d]]);
-                    }
+            if (isArrayLike(focus)) {
+                leaveBlurOfIndices(seriesModel.getData(), focus as ArrayLike<number>);
+            }
+            else if (isObject(focus)) {
+                const dataTypes = keys(focus);
+                for (let d = 0; d < dataTypes.length; d++) {
+                    leaveBlurOfIndices(seriesModel.getData(dataTypes[d]), focus[dataTypes[d]]);
                 }
             }
+
+            blurredSeries.push(seriesModel);
+        }
+    });
+
+    ecModel.eachComponent(function (componentType, componentModel) {
+        if (componentType === 'series') {
+            return;
+        }
+        const view = ecIns.getViewOfComponentModel(componentModel);
+        if (view && view.blurSeries) {
+            view.blurSeries(blurredSeries, ecModel);
         }
     });
 }

src/view/Component.ts

@@ -25,6 +25,7 @@ import GlobalModel from '../model/Global';
 import ExtensionAPI from '../ExtensionAPI';
 import {Payload, ViewRootGroup, ECEvent, EventQueryItem} from '../util/types';
 import Element from 'zrender/src/Element';
+import SeriesModel from '../model/Series';
 
 interface ComponentView {
     /**
@@ -89,6 +90,14 @@ class ComponentView {
         // Do nothing;
     }
 
+    /**
+     * Hook for blur target series.
+     * Can be used in marker for blur the markers
+     */
+    blurSeries(seriesModels: SeriesModel[], ecModel: GlobalModel): void {
+         // Do nothing;
+    }
+
     static registerClass: clazzUtil.ClassManager['registerClass'];
 };