refact(graph): use blur state instead of change opacity by manual

src/chart/graph/GraphView.ts

@@ -32,20 +32,16 @@ import ExtensionAPI from '../../ExtensionAPI';
 import GraphSeriesModel, { GraphNodeItemOption, GraphEdgeItemOption } from './GraphSeries';
 import { CoordinateSystem } from '../../coord/CoordinateSystem';
 import View from '../../coord/View';
-import { GraphNode, GraphEdge } from '../../data/Graph';
-import Displayable from 'zrender/src/graphic/Displayable';
 import Symbol from '../helper/Symbol';
 import Model from '../../model/Model';
 import { Payload } from '../../util/types';
-import { LineLabel } from '../helper/Line';
 import List from '../../data/List';
+import Line from '../helper/Line';
+import { GraphNode, GraphEdge } from '../../data/Graph';
 
 const FOCUS_ADJACENCY = '__focusNodeAdjacency';
 const UNFOCUS_ADJACENCY = '__unfocusNodeAdjacency';
 
-const nodeOpacityPath = ['itemStyle', 'opacity'] as const;
-const lineOpacityPath = ['lineStyle', 'opacity'] as const;
-
 interface FocusNodePayload extends Payload {
     dataIndex: number
     edgeDataIndex: number
@@ -55,53 +51,24 @@ function isViewCoordSys(coordSys: CoordinateSystem): coordSys is View {
     return coordSys.type === 'view';
 }
 
-function getItemOpacity(
-    item: GraphNode | GraphEdge,
-    opacityPath: typeof nodeOpacityPath | typeof lineOpacityPath
-): number {
-    const opacity = item.getVisual('opacity');
-    return opacity != null
-        ? opacity : item.getModel<any>().get(opacityPath);
-}
-
-function fadeOutItem(
-    item: GraphNode | GraphEdge,
-    opacityPath: typeof nodeOpacityPath | typeof lineOpacityPath,
-    opacityRatio?: number
-) {
-    const el = item.getGraphicEl() as Symbol;   // TODO Symbol?
-    let opacity = getItemOpacity(item, opacityPath);
-
-    if (opacityRatio != null) {
-        opacity == null && (opacity = 1);
-        opacity *= opacityRatio;
+function fadeInItem(nodeOrEdge: GraphNode | GraphEdge) {
+    const el = nodeOrEdge.getGraphicEl() as Symbol | Line;
+    if ((el as Symbol).getSymbolPath) {
+        (el as Symbol).getSymbolPath().removeState('blur');
+    }
+    else {
+        (el as Line).getLinePath().removeState('blur');
     }
-
-    el.downplay && el.downplay();
-    el.traverse(function (child: LineLabel) {
-        if (!child.isGroup) {
-            let opct = child.lineLabelOriginalOpacity;
-            if (opct == null || opacityRatio != null) {
-                opct = opacity;
-            }
-            child.setStyle('opacity', opct);
-        }
-    });
 }
 
-function fadeInItem(
-    item: GraphNode | GraphEdge,
-    opacityPath: typeof nodeOpacityPath | typeof lineOpacityPath
-) {
-    const opacity = getItemOpacity(item, opacityPath);
-    const el = item.getGraphicEl() as Symbol;
-    // Should go back to normal opacity first, consider hoverLayer,
-    // where current state is copied to elMirror, and support
-    // emphasis opacity here.
-    el.traverse(function (child: Displayable) {
-        !child.isGroup && child.setStyle('opacity', opacity);
-    });
-    el.highlight && el.highlight();
+function fadeOutItem(nodeOrEdge: GraphNode | GraphEdge) {
+    const el = nodeOrEdge.getGraphicEl() as Symbol | Line;
+    if ((el as Symbol).getSymbolPath) {
+        (el as Symbol).getSymbolPath().useState('blur');
+    }
+    else {
+        (el as Line).getLinePath().useState('blur');
+    }
 }
 
 class GraphView extends ChartView {
@@ -120,7 +87,6 @@ class GraphView extends ChartView {
     private _model: GraphSeriesModel;
 
     private _layoutTimeout: number;
-    private _unfocusDelayTimer: number;
 
     private _layouting: boolean;
 
@@ -214,8 +180,13 @@ class GraphView extends ChartView {
             (el as any)[UNFOCUS_ADJACENCY] && el.off('mouseout', (el as any)[UNFOCUS_ADJACENCY]);
 
             if (itemModel.get('focusNodeAdjacency')) {
+                const symbolPath = el.getSymbolPath();
+                const blurState = symbolPath.ensureState('blur');
+                blurState.style = {
+                    opacity: symbolPath.style.opacity * 0.1
+                };
+
                 el.on('mouseover', (el as any)[FOCUS_ADJACENCY] = function () {
-                    graphView._clearTimer();
                     api.dispatchAction({
                         type: 'focusNodeAdjacency',
                         seriesId: seriesModel.id,
@@ -230,14 +201,20 @@ class GraphView extends ChartView {
         });
 
         data.graph.eachEdge(function (edge) {
-            const el = edge.getGraphicEl();
+            const el = edge.getGraphicEl() as Line;
 
             (el as any)[FOCUS_ADJACENCY] && el.off('mouseover', (el as any)[FOCUS_ADJACENCY]);
             (el as any)[UNFOCUS_ADJACENCY] && el.off('mouseout', (el as any)[UNFOCUS_ADJACENCY]);
 
             if (edge.getModel<GraphEdgeItemOption>().get('focusNodeAdjacency')) {
+
+                const linePath = el.getLinePath();
+                const blurState = linePath.ensureState('blur');
+                blurState.style = {
+                    opacity: linePath.style.opacity * 0.1
+                };
+
                 el.on('mouseover', (el as any)[FOCUS_ADJACENCY] = function () {
-                    graphView._clearTimer();
                     api.dispatchAction({
                         type: 'focusNodeAdjacency',
                         seriesId: seriesModel.id,
@@ -293,27 +270,15 @@ class GraphView extends ChartView {
     dispose() {
         this._controller && this._controller.dispose();
         this._controllerHost = null;
-        this._clearTimer();
     }
 
     _dispatchUnfocus(api: ExtensionAPI) {
         const self = this;
-        this._clearTimer();
-        this._unfocusDelayTimer = setTimeout(function () {
-            self._unfocusDelayTimer = null;
-            api.dispatchAction({
-                type: 'unfocusNodeAdjacency',
-                seriesId: self._model.id
-            });
-        }, 500) as any;
-
-    }
+        api.dispatchAction({
+            type: 'unfocusNodeAdjacency',
+            seriesId: self._model.id
+        });
 
-    _clearTimer() {
-        if (this._unfocusDelayTimer) {
-            clearTimeout(this._unfocusDelayTimer);
-            this._unfocusDelayTimer = null;
-        }
     }
 
     focusNodeAdjacency(
@@ -335,27 +300,27 @@ class GraphView extends ChartView {
         }
 
         graph.eachNode(function (node) {
-            fadeOutItem(node, nodeOpacityPath, 0.1);
+            fadeOutItem(node);
         });
         graph.eachEdge(function (edge) {
-            fadeOutItem(edge, lineOpacityPath, 0.1);
+            fadeOutItem(edge);
         });
 
         if (node) {
-            fadeInItem(node, nodeOpacityPath);
+            fadeInItem(node);
             zrUtil.each(node.edges, function (adjacentEdge) {
                 if (adjacentEdge.dataIndex < 0) {
                     return;
                 }
-                fadeInItem(adjacentEdge, lineOpacityPath);
-                fadeInItem(adjacentEdge.node1, nodeOpacityPath);
-                fadeInItem(adjacentEdge.node2, nodeOpacityPath);
+                fadeInItem(adjacentEdge);
+                fadeInItem(adjacentEdge.node1);
+                fadeInItem(adjacentEdge.node2);
             });
         }
         if (edge) {
-            fadeInItem(edge, lineOpacityPath);
-            fadeInItem(edge.node1, nodeOpacityPath);
-            fadeInItem(edge.node2, nodeOpacityPath);
+            fadeInItem(edge);
+            fadeInItem(edge.node1);
+            fadeInItem(edge.node2);
         }
     }
 
@@ -365,10 +330,10 @@ class GraphView extends ChartView {
         const graph = seriesModel.getData().graph;
 
         graph.eachNode(function (node) {
-            fadeOutItem(node, nodeOpacityPath);
+            fadeInItem(node);
         });
         graph.eachEdge(function (edge) {
-            fadeOutItem(edge, lineOpacityPath);
+            fadeInItem(edge);
         });
     }
 

src/chart/helper/Line.ts

@@ -182,6 +182,10 @@ class Line extends graphic.Group {
         this._updateCommonStl(lineData, idx, seriesScope);
     };
 
+    getLinePath() {
+        return this.childAt(0) as graphic.Line;
+    }
+
     _updateCommonStl(lineData: List, idx: number, seriesScope?: LineDrawSeriesScope) {
         const seriesModel = lineData.hostModel as SeriesModel;
 

src/chart/helper/Symbol.ts

@@ -95,7 +95,7 @@ class Symbol extends graphic.Group {
      * @param {boolean} toLastFrame
      */
     stopSymbolAnimation(toLastFrame: boolean) {
-        this.childAt(0).stopAnimation(toLastFrame);
+        this.childAt(0).stopAnimation('', toLastFrame);
     }
 
     /**

src/component/helper/roamHelper.ts

@@ -22,7 +22,7 @@ import Element from 'zrender/src/Element';
 interface ControllerHost {
     target: Element,
     zoom?: number
-    zoomLimit?: {min: number, max: number}
+    zoomLimit?: {min?: number, max?: number}
 }
 
 /**