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:52:52 UTC
[incubator-echarts] branch label-enhancement updated:
refact(sankey): use blur state.
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 52c0f4d refact(sankey): use blur state.
52c0f4d is described below
commit 52c0f4d6ffa47f52db4e7436c7554f50c33d9c77
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jun 24 19:52:34 2020 +0800
refact(sankey): use blur state.
---
src/chart/graph/GraphView.ts | 30 ++++++----
src/chart/sankey/SankeyView.ts | 124 +++++++++++++----------------------------
2 files changed, 57 insertions(+), 97 deletions(-)
diff --git a/src/chart/graph/GraphView.ts b/src/chart/graph/GraphView.ts
index 8575868..33539f1 100644
--- a/src/chart/graph/GraphView.ts
+++ b/src/chart/graph/GraphView.ts
@@ -53,21 +53,26 @@ function isViewCoordSys(coordSys: CoordinateSystem): coordSys is View {
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');
+ if (el) {
+ if ((el as Symbol).getSymbolPath) {
+ (el as Symbol).getSymbolPath().removeState('blur');
+ }
+ else {
+ (el as Line).getLinePath().removeState('blur');
+ }
+
}
}
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');
+ if (el) {
+ if ((el as Symbol).getSymbolPath) {
+ (el as Symbol).getSymbolPath().useState('blur');
+ }
+ else {
+ (el as Line).getLinePath().useState('blur');
+ }
}
}
@@ -183,7 +188,8 @@ class GraphView extends ChartView {
const symbolPath = el.getSymbolPath();
const blurState = symbolPath.ensureState('blur');
blurState.style = {
- opacity: symbolPath.style.opacity * 0.1
+ // TODO Based on the original opacity.
+ opacity: 0.1
};
el.on('mouseover', (el as any)[FOCUS_ADJACENCY] = function () {
@@ -211,7 +217,7 @@ class GraphView extends ChartView {
const linePath = el.getLinePath();
const blurState = linePath.ensureState('blur');
blurState.style = {
- opacity: linePath.style.opacity * 0.1
+ opacity: 0.1
};
el.on('mouseover', (el as any)[FOCUS_ADJACENCY] = function () {
diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts
index 6c03f7b..bf9ae17 100644
--- a/src/chart/sankey/SankeyView.ts
+++ b/src/chart/sankey/SankeyView.ts
@@ -26,15 +26,10 @@ import ChartView from '../../view/Chart';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../ExtensionAPI';
import { GraphNode, GraphEdge } from '../../data/Graph';
-import { GraphNodeItemOption, GraphEdgeItemOption } from '../graph/GraphSeries';
+import { GraphEdgeItemOption } from '../graph/GraphSeries';
import List from '../../data/List';
import { RectLike } from 'zrender/src/core/BoundingRect';
-const nodeOpacityPath = ['itemStyle', 'opacity'] as const;
-const hoverNodeOpacityPath = ['emphasis', 'itemStyle', 'opacity'] as const;
-const lineOpacityPath = ['lineStyle', 'opacity'] as const;
-const hoverLineOpacityPath = ['emphasis', 'lineStyle', 'opacity'] as const;
-
interface FocusNodeAdjacencyPayload extends Payload {
dataIndex?: number
edgeDataIndex?: number
@@ -48,54 +43,19 @@ interface SankeyEl extends graphic.Path {
unfocusNodeAdjHandler(): void
}
-function getItemOpacity(
- item: GraphNode | GraphEdge,
- opacityPath: readonly string[]
-): number {
- return item.getVisual('opacity')
- // TODO: TYPE
- || item.getModel<GraphNodeItemOption>().get(opacityPath as typeof nodeOpacityPath);
-}
-
-function fadeOutItem(
- item: GraphNode | GraphEdge,
- opacityPath: readonly string[],
- opacityRatio?: number
-) {
- const el = item.getGraphicEl() as SankeyEl;
- let opacity = getItemOpacity(item, opacityPath);
-
- if (opacityRatio != null) {
- opacity == null && (opacity = 1);
- opacity *= opacityRatio;
+function fadeInItem(nodeOrEdge: GraphNode | GraphEdge) {
+ const el = nodeOrEdge.getGraphicEl();
+ if (el) {
+ el.removeState('blur');
}
-
- el.downplay && el.downplay();
-
- el.traverse(function (child) {
- if (child.type !== 'group') {
- child.setStyle('opacity', opacity);
- }
- });
}
-function fadeInItem(
- item: GraphNode | GraphEdge,
- opacityPath: readonly string[]
-) {
- const opacity = getItemOpacity(item, opacityPath);
- const el = item.getGraphicEl() as SankeyEl;
-
- // Support emphasis here.
- el.highlight && el.highlight();
-
- el.traverse(function (child) {
- if (child.type !== 'group') {
- child.setStyle('opacity', opacity);
- }
- });
+function fadeOutItem(nodeOrEdge: GraphNode | GraphEdge) {
+ const el = nodeOrEdge.getGraphicEl();
+ if (el) {
+ el.useState('blur');
+ }
}
-
class SankeyPathShape {
x1 = 0;
y1 = 0;
@@ -175,8 +135,6 @@ class SankeyView extends ChartView {
private _data: List;
- private _unfocusDelayTimer: number;
-
render(seriesModel: SankeySeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
const sankeyView = this;
const graph = seriesModel.getGraph();
@@ -357,9 +315,13 @@ class SankeyView extends ChartView {
el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);
if (itemModel.get('focusNodeAdjacency')) {
+ const blurState = el.ensureState('blur');
+ blurState.style = {
+ opacity: 0.1
+ };
+
el.on('mouseover', el.focusNodeAdjHandler = function () {
if (!sankeyView._focusAdjacencyDisabled) {
- sankeyView._clearTimer();
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
@@ -383,9 +345,13 @@ class SankeyView extends ChartView {
el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);
if (edgeModel.get('focusNodeAdjacency')) {
+ const blurState = el.ensureState('blur');
+ blurState.style = {
+ opacity: 0.1
+ };
+
el.on('mouseover', el.focusNodeAdjHandler = function () {
if (!sankeyView._focusAdjacencyDisabled) {
- sankeyView._clearTimer();
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
@@ -412,26 +378,14 @@ class SankeyView extends ChartView {
}
dispose() {
- 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;
- }
-
- _clearTimer() {
- if (this._unfocusDelayTimer) {
- clearTimeout(this._unfocusDelayTimer);
- this._unfocusDelayTimer = null;
- }
+ api.dispatchAction({
+ type: 'unfocusNodeAdjacency',
+ seriesId: self._model.id
+ });
}
focusNodeAdjacency(
@@ -452,23 +406,23 @@ class SankeyView extends ChartView {
const edge = graph.getEdgeByIndex(edgeDataIndex);
graph.eachNode(function (node) {
- fadeOutItem(node, nodeOpacityPath, 0.1);
+ fadeOutItem(node);
});
graph.eachEdge(function (edge) {
- fadeOutItem(edge, lineOpacityPath, 0.1);
+ fadeOutItem(edge);
});
if (node) {
const itemModel = data.getItemModel<SankeyNodeItemOption>(dataIndex);
- fadeInItem(node, hoverNodeOpacityPath);
+ fadeInItem(node);
const focusNodeAdj = itemModel.get('focusNodeAdjacency');
if (focusNodeAdj === 'outEdges') {
zrUtil.each(node.outEdges, function (edge) {
if (edge.dataIndex < 0) {
return;
}
- fadeInItem(edge, hoverLineOpacityPath);
- fadeInItem(edge.node2, hoverNodeOpacityPath);
+ fadeInItem(edge);
+ fadeInItem(edge.node2);
});
}
else if (focusNodeAdj === 'inEdges') {
@@ -476,8 +430,8 @@ class SankeyView extends ChartView {
if (edge.dataIndex < 0) {
return;
}
- fadeInItem(edge, hoverLineOpacityPath);
- fadeInItem(edge.node1, hoverNodeOpacityPath);
+ fadeInItem(edge);
+ fadeInItem(edge.node1);
});
}
else if (focusNodeAdj === 'allEdges') {
@@ -485,16 +439,16 @@ class SankeyView extends ChartView {
if (edge.dataIndex < 0) {
return;
}
- fadeInItem(edge, hoverLineOpacityPath);
- (edge.node1 !== node) && fadeInItem(edge.node1, hoverNodeOpacityPath);
- (edge.node2 !== node) && fadeInItem(edge.node2, hoverNodeOpacityPath);
+ fadeInItem(edge);
+ (edge.node1 !== node) && fadeInItem(edge.node1);
+ (edge.node2 !== node) && fadeInItem(edge.node2);
});
}
}
if (edge) {
- fadeInItem(edge, hoverLineOpacityPath);
- fadeInItem(edge.node1, hoverNodeOpacityPath);
- fadeInItem(edge.node2, hoverNodeOpacityPath);
+ fadeInItem(edge);
+ fadeInItem(edge.node1);
+ fadeInItem(edge.node2);
}
}
@@ -504,10 +458,10 @@ class SankeyView extends ChartView {
const graph = seriesModel.getGraph();
graph.eachNode(function (node) {
- fadeOutItem(node, nodeOpacityPath);
+ fadeInItem(node);
});
graph.eachEdge(function (edge) {
- fadeOutItem(edge, lineOpacityPath);
+ fadeInItem(edge);
});
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org