Merge pull request #16368 from apache/emphasis-disabled

feat(state): add emphasis.disabled

src/chart/bar/BarView.ts

@@ -30,7 +30,7 @@ import {
     traverseElements
 } from '../../util/graphic';
 import { getECData } from '../../util/innerStore';
-import { enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import { setLabelStyle, getLabelStatesModels, setLabelValueAnimation, labelInner } from '../../label/labelStyle';
 import {throttle} from '../../util/throttle';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
@@ -1037,7 +1037,7 @@ function updateStyle(
     );
 
     const emphasisModel = itemModel.getModel(['emphasis']);
-    enableHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
+    toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
     setStatesStylesFromModel(el, itemModel);
 
     if (isZeroOnPolar(layout as SectorLayout)) {

src/chart/bar/PictorialBarView.ts

@@ -19,9 +19,7 @@
 
 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
-import {
-    enableHoverEmphasis
-} from '../../util/states';
+import { toggleHoverEmphasis } from '../../util/states';
 import {createSymbol, normalizeSymbolOffset} from '../../util/symbol';
 import {parsePercent, isNumeric} from '../../util/number';
 import ChartView from '../../view/Chart';
@@ -928,7 +926,7 @@ function updateCommon(
         }
     );
 
-    enableHoverEmphasis(bar, focus, blurScope);
+    toggleHoverEmphasis(bar, focus, blurScope, emphasisModel.get('disabled'));
 }
 
 function toIntTimes(times: number) {

src/chart/boxplot/BoxplotView.ts

@@ -20,7 +20,7 @@
 import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
 import * as graphic from '../../util/graphic';
-import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import Path, { PathProps } from 'zrender/src/graphic/Path';
 import BoxplotSeriesModel, { BoxplotDataItemOption } from './BoxplotSeries';
 import GlobalModel from '../../model/Global';
@@ -184,10 +184,11 @@ function updateNormalBoxData(
     el.z2 = 100;
 
     const itemModel = data.getItemModel<BoxplotDataItemOption>(dataIndex);
+    const emphasisModel = itemModel.getModel('emphasis');
 
     setStatesStylesFromModel(el, itemModel);
 
-    enableHoverEmphasis(el, itemModel.get(['emphasis', 'focus']), itemModel.get(['emphasis', 'blurScope']));
+    toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
 }
 
 function transInit(points: number[][], dim: number, itemLayout: BoxplotItemLayout) {

src/chart/custom/CustomSeries.ts

@@ -243,6 +243,8 @@ export type CustomElementOption = CustomPathOption
 export type CustomRootElementOption = CustomElementOption & {
     focus?: 'none' | 'self' | 'series' | ArrayLike<number>
     blurScope?: BlurScope
+
+    emphasisDisabled?: boolean
 };
 
 export type CustomElementOptionOnState = CustomDisplayableOptionOnState

src/chart/custom/CustomView.ts

@@ -21,7 +21,7 @@ import {
     hasOwn, assert, isString, retrieve2, retrieve3, defaults, each, indexOf
 } from 'zrender/src/core/util';
 import * as graphicUtil from '../../util/graphic';
-import { setDefaultStateProxy, enableHoverEmphasis } from '../../util/states';
+import { setDefaultStateProxy, toggleHoverEmphasis } from '../../util/states';
 import * as labelStyleHelper from '../../label/labelStyle';
 import {getDefaultLabel} from '../helper/labelHelper';
 import {getLayoutOnAxis} from '../../layout/barGrid';
@@ -932,7 +932,12 @@ function createOrUpdateItem(
     const el = doCreateOrUpdateEl(api, existsEl, dataIndex, elOption, seriesModel, group);
     el && data.setItemGraphicEl(dataIndex, el);
 
-    el && enableHoverEmphasis(el, elOption.focus, elOption.blurScope);
+    el && toggleHoverEmphasis(
+        el,
+        elOption.focus,
+        elOption.blurScope,
+        elOption.emphasisDisabled
+    );
 
     return el;
 }

src/chart/funnel/FunnelView.ts

@@ -18,7 +18,7 @@
 */
 
 import * as graphic from '../../util/graphic';
-import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import ChartView from '../../view/Chart';
 import FunnelSeriesModel, {FunnelDataItemOption} from './FunnelSeries';
 import GlobalModel from '../../model/Global';
@@ -92,7 +92,12 @@ class FunnelPiece extends graphic.Polygon {
 
         this._updateLabel(data, idx);
 
-        enableHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
+        toggleHoverEmphasis(
+            this,
+            emphasisModel.get('focus'),
+            emphasisModel.get('blurScope'),
+            emphasisModel.get('disabled')
+        );
     }
 
     _updateLabel(data: SeriesData, idx: number) {

src/chart/gauge/GaugeView.ts

@@ -19,7 +19,7 @@
 
 import PointerPath from './PointerPath';
 import * as graphic from '../../util/graphic';
-import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import {createTextStyle, setLabelValueAnimation, animateLabelValue} from '../../label/labelStyle';
 import ChartView from '../../view/Chart';
 import {parsePercent, round, linearMap} from '../../util/number';
@@ -489,6 +489,9 @@ class GaugeView extends ChartView {
             data.each(function (idx) {
                 const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
                 const emphasisModel = itemModel.getModel('emphasis');
+                const focus = emphasisModel.get('focus');
+                const blurScope = emphasisModel.get('blurScope');
+                const emphasisDisabled = emphasisModel.get('disabled');
                 if (showPointer) {
                     const pointer = data.getItemGraphicEl(idx) as ECSymbol;
                     const symbolStyle = data.getItemVisual(idx, 'style');
@@ -517,7 +520,7 @@ class GaugeView extends ChartView {
 
                     (pointer as ECElement).z2EmphasisLift = 0;
                     setStatesStylesFromModel(pointer, itemModel);
-                    enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
+                    toggleHoverEmphasis(pointer, focus, blurScope, emphasisDisabled);
                 }
 
                 if (showProgress) {
@@ -526,7 +529,7 @@ class GaugeView extends ChartView {
                     progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle());
                     (progress as ECElement).z2EmphasisLift = 0;
                     setStatesStylesFromModel(progress, itemModel);
-                    enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
+                    toggleHoverEmphasis(progress, focus, blurScope, emphasisDisabled);
                 }
             });
 

src/chart/heatmap/HeatmapView.ts

@@ -18,7 +18,7 @@
 */
 
 import * as graphic from '../../util/graphic';
-import { enableHoverEmphasis } from '../../util/states';
+import { toggleHoverEmphasis } from '../../util/states';
 import HeatmapLayer from './HeatmapLayer';
 import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
@@ -206,8 +206,10 @@ class HeatmapView extends ChartView {
         let blurStyle = seriesModel.getModel(['blur', 'itemStyle']).getItemStyle();
         let selectStyle = seriesModel.getModel(['select', 'itemStyle']).getItemStyle();
         let labelStatesModels = getLabelStatesModels(seriesModel);
-        let focus = seriesModel.get(['emphasis', 'focus']);
-        let blurScope = seriesModel.get(['emphasis', 'blurScope']);
+        const emphasisModel = seriesModel.getModel('emphasis');
+        let focus = emphasisModel.get('focus');
+        let blurScope = emphasisModel.get('blurScope');
+        let emphasisDisabled = emphasisModel.get('disabled');
 
         const dataDims = isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d')
             ? [
@@ -277,6 +279,7 @@ class HeatmapView extends ChartView {
 
                 focus = emphasisModel.get('focus');
                 blurScope = emphasisModel.get('blurScope');
+                emphasisDisabled = emphasisModel.get('disabled');
 
                 labelStatesModels = getLabelStatesModels(itemModel);
             }
@@ -301,7 +304,7 @@ class HeatmapView extends ChartView {
             rect.ensureState('blur').style = blurStyle;
             rect.ensureState('select').style = selectStyle;
 
-            enableHoverEmphasis(rect, focus, blurScope);
+            toggleHoverEmphasis(rect, focus, blurScope, emphasisDisabled);
 
             rect.incremental = incremental;
             // PENDING

src/chart/helper/EffectSymbol.ts

@@ -19,7 +19,7 @@
 
 import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol';
 import {Group, Path} from '../../util/graphic';
-import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/states';
+import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis } from '../../util/states';
 import SymbolClz from './Symbol';
 import SeriesData from '../../data/SeriesData';
 import type { ZRColor, ECElement } from '../../util/types';
@@ -173,6 +173,7 @@ class EffectSymbol extends Group {
 
         const symbolStyle = data.getItemVisual(idx, 'style');
         const color = symbolStyle && symbolStyle.fill;
+        const emphasisModel = itemModel.getModel('emphasis');
 
         rippleGroup.setScale(symbolSize);
 
@@ -203,8 +204,6 @@ class EffectSymbol extends Group {
         effectCfg.rippleEffectColor = itemModel.get(['rippleEffect', 'color']);
         effectCfg.rippleNumber = itemModel.get(['rippleEffect', 'number']);
 
-        this.off('mouseover').off('mouseout').off('emphasis').off('normal');
-
         if (effectCfg.showEffectOn === 'render') {
             this._effectCfg
                 ? this.updateEffectAnimation(effectCfg)
@@ -234,11 +233,15 @@ class EffectSymbol extends Group {
 
         this._effectCfg = effectCfg;
 
-        enableHoverEmphasis(this);
+        toggleHoverEmphasis(
+            this,
+            emphasisModel.get('focus'),
+            emphasisModel.get('blurScope'),
+            emphasisModel.get('disabled')
+        );
     };
 
     fadeOut(cb: () => void) {
-        this.off('mouseover').off('mouseout');
         cb && cb();
     };
 

src/chart/helper/Line.ts

@@ -22,11 +22,18 @@ import * as vector from 'zrender/src/core/vector';
 import * as symbolUtil from '../../util/symbol';
 import ECLinePath from './LinePath';
 import * as graphic from '../../util/graphic';
-import { enableHoverEmphasis, enterEmphasis, leaveEmphasis, SPECIAL_STATES } from '../../util/states';
+import { toggleHoverEmphasis, enterEmphasis, leaveEmphasis, SPECIAL_STATES } from '../../util/states';
 import {getLabelStatesModels, setLabelStyle} from '../../label/labelStyle';
 import {round} from '../../util/number';
 import SeriesData from '../../data/SeriesData';
-import { ZRTextAlign, ZRTextVerticalAlign, LineLabelOption, ColorString } from '../../util/types';
+import {
+    ZRTextAlign,
+    ZRTextVerticalAlign,
+    LineLabelOption,
+    ColorString,
+    DefaultEmphasisFocus,
+    BlurScope
+} from '../../util/types';
 import SeriesModel from '../../model/Series';
 import type { LineDrawSeriesScope, LineDrawModelOption } from './LineDraw';
 import { TextStyleProps } from 'zrender/src/graphic/Text';
@@ -206,13 +213,21 @@ class Line extends graphic.Group {
 
         let labelStatesModels = seriesScope && seriesScope.labelStatesModels;
 
+        let emphasisDisabled = seriesScope && seriesScope.emphasisDisabled;
+        let focus = (seriesScope && seriesScope.focus) as DefaultEmphasisFocus;
+        let blurScope = (seriesScope && seriesScope.blurScope) as BlurScope;
+
         // Optimization for large dataset
         if (!seriesScope || lineData.hasItemOption) {
             const itemModel = lineData.getItemModel<LineDrawModelOption>(idx);
+            const emphasisModel = itemModel.getModel('emphasis');
 
-            emphasisLineStyle = itemModel.getModel(['emphasis', 'lineStyle']).getLineStyle();
+            emphasisLineStyle = emphasisModel.getModel('lineStyle').getLineStyle();
             blurLineStyle = itemModel.getModel(['blur', 'lineStyle']).getLineStyle();
             selectLineStyle = itemModel.getModel(['select', 'lineStyle']).getLineStyle();
+            emphasisDisabled = emphasisModel.get('disabled');
+            focus = emphasisModel.get('focus');
+            blurScope = emphasisModel.get('blurScope');
 
             labelStatesModels = getLabelStatesModels(itemModel);
         }
@@ -296,7 +311,7 @@ class Line extends graphic.Group {
             inside: false   // Can't be inside for stroke element.
         });
 
-        enableHoverEmphasis(this);
+        toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled);
     }
 
     highlight() {

src/chart/helper/LineDraw.ts

@@ -30,7 +30,8 @@ import {
     StatesOptionMixin,
     DisplayState,
     LabelOption,
-    StatesMixinBase
+    DefaultEmphasisFocus,
+    BlurScope
 } from '../../util/types';
 import Displayable from 'zrender/src/graphic/Displayable';
 import Model from '../../model/Model';
@@ -53,7 +54,11 @@ interface LineDrawStateOption {
 }
 
 export interface LineDrawModelOption extends LineDrawStateOption,
-    StatesOptionMixin<LineDrawStateOption, StatesMixinBase> {
+    StatesOptionMixin<LineDrawStateOption, {
+        emphasis?: {
+            focus?: DefaultEmphasisFocus
+        }
+    }> {
     // If has effect
     effect?: {
         show?: boolean
@@ -88,6 +93,10 @@ export interface LineDrawSeriesScope {
     selectLineStyle?: ZRStyleProps
 
     labelStatesModels: Record<DisplayState, Model<LabelOption>>
+
+    focus?: DefaultEmphasisFocus
+    blurScope?: BlurScope
+    emphasisDisabled?: boolean;
 }
 
 class LineDraw {
@@ -237,12 +246,17 @@ function isEffectObject(el: Displayable) {
 
 function makeSeriesScope(lineData: ListForLineDraw): LineDrawSeriesScope {
     const hostModel = lineData.hostModel;
+    const emphasisModel = hostModel.getModel('emphasis');
     return {
         lineStyle: hostModel.getModel('lineStyle').getLineStyle(),
-        emphasisLineStyle: hostModel.getModel(['emphasis', 'lineStyle']).getLineStyle(),
+        emphasisLineStyle: emphasisModel.getModel(['lineStyle']).getLineStyle(),
         blurLineStyle: hostModel.getModel(['blur', 'lineStyle']).getLineStyle(),
         selectLineStyle: hostModel.getModel(['select', 'lineStyle']).getLineStyle(),
 
+        emphasisDisabled: emphasisModel.get('disabled'),
+        blurScope: emphasisModel.get('blurScope'),
+        focus: emphasisModel.get('focus'),
+
         labelStatesModels: getLabelStatesModels(hostModel)
     };
 }

src/chart/helper/Polyline.ts

@@ -18,9 +18,10 @@
 */
 
 import * as graphic from '../../util/graphic';
-import { enableHoverEmphasis } from '../../util/states';
+import { toggleHoverEmphasis } from '../../util/states';
 import type { LineDrawSeriesScope, LineDrawModelOption } from './LineDraw';
 import type SeriesData from '../../data/SeriesData';
+import { BlurScope, DefaultEmphasisFocus } from '../../util/types';
 
 class Polyline extends graphic.Group {
     constructor(lineData: SeriesData, idx: number, seriesScope: LineDrawSeriesScope) {
@@ -62,19 +63,27 @@ class Polyline extends graphic.Group {
         const itemModel = lineData.getItemModel<LineDrawModelOption>(idx);
 
 
-        let hoverLineStyle = seriesScope && seriesScope.emphasisLineStyle;
+        let emphasisLineStyle = seriesScope && seriesScope.emphasisLineStyle;
+        let focus = (seriesScope && seriesScope.focus) as DefaultEmphasisFocus;
+        let blurScope = (seriesScope && seriesScope.blurScope) as BlurScope;
+        let emphasisDisabled = seriesScope && seriesScope.emphasisDisabled;
+
 
         if (!seriesScope || lineData.hasItemOption) {
-            hoverLineStyle = itemModel.getModel(['emphasis', 'lineStyle']).getLineStyle();
+            const emphasisModel = itemModel.getModel('emphasis');
+            emphasisLineStyle = emphasisModel.getModel('lineStyle').getLineStyle();
+            emphasisDisabled = emphasisModel.get('disabled');
+            focus = emphasisModel.get('focus');
+            blurScope = emphasisModel.get('blurScope');
         }
         line.useStyle(lineData.getItemVisual(idx, 'style'));
         line.style.fill = null;
         line.style.strokeNoScale = true;
 
         const lineEmphasisState = line.ensureState('emphasis');
-        lineEmphasisState.style = hoverLineStyle;
+        lineEmphasisState.style = emphasisLineStyle;
 
-        enableHoverEmphasis(this);
+        toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled);
     };
 
     updateLayout(lineData: SeriesData, idx: number) {