From 3876ad0ab30c8fc672f956f3012f53557b9d23aa Mon Sep 17 00:00:00 2001 From: lang Date: Thu, 26 May 2016 19:50:39 +0800 Subject: [PATCH] Graph focus opacity tweak --- src/chart/graph/GraphView.js | 27 +++++++++++++++++---------- src/chart/helper/Symbol.js | 10 +++++----- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/chart/graph/GraphView.js b/src/chart/graph/GraphView.js index de298ac01..facffdde5 100644 --- a/src/chart/graph/GraphView.js +++ b/src/chart/graph/GraphView.js @@ -104,10 +104,10 @@ define(function (require) { el.setDraggable(draggable && forceLayout); el.off('mouseover', this._focusNodeAdjacency); - el.off('mouseout', this._unfocusNodeAdjacency); + el.off('mouseout', this._unfocusAll); if (itemModel.get('focusNodeAdjacency')) { el.on('mouseover', this._focusNodeAdjacency, this); - el.on('mouseout', this._unfocusNodeAdjacency, this); + el.on('mouseout', this._unfocusAll, this); } }, this); @@ -121,10 +121,19 @@ define(function (require) { var dataIndex = el.dataIndex; var dataType = el.dataType; - function fadeOut(child) { - if (child.type !== 'group') { - child.setStyle('opacity', 0.2); + function fadeOutItem(item, opacityPath) { + var opacity = getItemOpacity(item, opacityPath); + var el = item.getGraphicEl(); + if (opacity == null) { + opacity = 1; } + + el.traverse(function (child) { + child.trigger('normal'); + if (child.type !== 'group') { + child.setStyle('opacity', opacity * 0.1); + } + }); } function fadeInItem(item, opacityPath) { @@ -140,12 +149,10 @@ define(function (require) { } if (dataIndex !== null && dataType !== 'edge') { graph.eachNode(function (node) { - var el = node.getGraphicEl(); - el.traverse(fadeOut); + fadeOutItem(node, nodeOpacityPath); }); graph.eachEdge(function (edge) { - var el = edge.getGraphicEl(); - el.traverse(fadeOut); + fadeOutItem(edge, lineOpacityPath); }); var node = graph.getNodeByIndex(dataIndex); @@ -160,7 +167,7 @@ define(function (require) { } }, - _unfocusNodeAdjacency: function () { + _unfocusAll: function () { var data = this._model.getData(); var graph = data.graph; graph.eachNode(function (node) { diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js index c4fde57fd..a86153b24 100644 --- a/src/chart/helper/Symbol.js +++ b/src/chart/helper/Symbol.js @@ -116,6 +116,8 @@ define(function (require) { * @param {number} idx */ symbolProto.updateData = function (data, idx) { + this.silent = false; + var symbolType = data.getItemVisual(idx, 'symbol') || 'circle'; var seriesModel = data.hostModel; var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize')); @@ -141,6 +143,7 @@ define(function (require) { symbolProto._updateCommon = function (data, idx, symbolSize) { var symbolPath = this.childAt(0); + var seriesModel = data.hostModel; var itemModel = data.getItemModel(idx); var normalItemStyleModel = itemModel.getModel(normalStyleAccessPath); @@ -247,11 +250,8 @@ define(function (require) { symbolProto.fadeOut = function (cb) { var symbolPath = this.childAt(0); - // Avoid trigger hoverAnimation when fading - symbolPath.off('mouseover') - .off('mouseout') - .off('emphasis') - .off('normal'); + // Avoid mistaken hover when fading out + this.silent = true; // Not show text when animating symbolPath.style.text = ''; graphic.updateProps(symbolPath, { -- GitLab