You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/24 11:44:12 UTC
[incubator-echarts] branch label-enhancement updated:
refact(graph): use blur state instead of change opacity by manual
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new 2e2a76e refact(graph): use blur state instead of change opacity by manual
2e2a76e is described below
commit 2e2a76e8bafad1968a49588e207085b6e78108c0
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jun 24 19:43:54 2020 +0800
refact(graph): use blur state instead of change opacity by manual
---
src/chart/graph/GraphView.ts | 127 ++++++++++++++-----------------------
src/chart/helper/Line.ts | 4 ++
src/chart/helper/Symbol.ts | 2 +-
src/component/helper/roamHelper.ts | 2 +-
4 files changed, 52 insertions(+), 83 deletions(-)
diff --git a/src/chart/graph/GraphView.ts b/src/chart/graph/GraphView.ts
index f1dd3b1..8575868 100644
--- a/src/chart/graph/GraphView.ts
+++ b/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);
});
}
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index 72268ac..7ae5b86 100644
--- a/src/chart/helper/Line.ts
+++ b/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;
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index e7bed16..85f7553 100644
--- a/src/chart/helper/Symbol.ts
+++ b/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);
}
/**
diff --git a/src/component/helper/roamHelper.ts b/src/component/helper/roamHelper.ts
index 27b2332..07d5839 100644
--- a/src/component/helper/roamHelper.ts
+++ b/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}
}
/**
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org