You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/01/03 20:45:03 UTC
[incubator-echarts] 02/02: Fix highlight conflict.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 2b5a3ee4b674f1dd8b9be16b65bf530e65eb7da4
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Jan 4 04:44:32 2019 +0800
Fix highlight conflict.
---
src/component/visualMap/ContinuousView.js | 6 ++---
src/component/visualMap/PiecewiseModel.js | 2 +-
src/component/visualMap/PiecewiseView.js | 5 ++--
src/component/visualMap/helper.js | 9 ++++---
src/util/graphic.js | 44 +++++++++++++++++++++++--------
src/view/Chart.js | 25 +++++++++++-------
test/hoverStyle.html | 3 ++-
7 files changed, 62 insertions(+), 32 deletions(-)
diff --git a/src/component/visualMap/ContinuousView.js b/src/component/visualMap/ContinuousView.js
index b72e407..a765203 100644
--- a/src/component/visualMap/ContinuousView.js
+++ b/src/component/visualMap/ContinuousView.js
@@ -710,8 +710,8 @@ var ContinuousView = VisualMapView.extend({
var resultBatches = modelUtil.compressBatches(oldBatch, newBatch);
- this._dispatchHighDown('downplay', helper.convertDataIndex(resultBatches[0]));
- this._dispatchHighDown('highlight', helper.convertDataIndex(resultBatches[1]));
+ this._dispatchHighDown('downplay', helper.makeHighDownBatch(resultBatches[0], visualMapModel));
+ this._dispatchHighDown('highlight', helper.makeHighDownBatch(resultBatches[1], visualMapModel));
},
/**
@@ -755,7 +755,7 @@ var ContinuousView = VisualMapView.extend({
this._hideIndicator();
var indices = this._hoverLinkDataIndices;
- this._dispatchHighDown('downplay', helper.convertDataIndex(indices));
+ this._dispatchHighDown('downplay', helper.makeHighDownBatch(indices, this.visualMapModel));
indices.length = 0;
},
diff --git a/src/component/visualMap/PiecewiseModel.js b/src/component/visualMap/PiecewiseModel.js
index d3c1565..df03ed0 100644
--- a/src/component/visualMap/PiecewiseModel.js
+++ b/src/component/visualMap/PiecewiseModel.js
@@ -271,7 +271,7 @@ var PiecewiseModel = VisualMapModel.extend({
/**
* @public
* @params {number} pieceIndex piece index in visualMapModel.getPieceList()
- * @return {Array.<Object>} [{seriesId, dataIndices: <Array.<number>>}, ...]
+ * @return {Array.<Object>} [{seriesId, dataIndex: <Array.<number>>}, ...]
*/
findTargetDataIndices: function (pieceIndex) {
var result = [];
diff --git a/src/component/visualMap/PiecewiseView.js b/src/component/visualMap/PiecewiseView.js
index 885f2d7..eceb66f 100644
--- a/src/component/visualMap/PiecewiseView.js
+++ b/src/component/visualMap/PiecewiseView.js
@@ -114,8 +114,9 @@ var PiecewiseVisualMapView = VisualMapView.extend({
visualMapModel.option.hoverLink && this.api.dispatchAction({
type: method,
- batch: helper.convertDataIndex(
- visualMapModel.findTargetDataIndices(pieceIndex)
+ batch: helper.makeHighDownBatch(
+ visualMapModel.findTargetDataIndices(pieceIndex),
+ visualMapModel
)
});
}
diff --git a/src/component/visualMap/helper.js b/src/component/visualMap/helper.js
index afe1890..4f35a11 100644
--- a/src/component/visualMap/helper.js
+++ b/src/component/visualMap/helper.js
@@ -64,12 +64,13 @@ export function getItemAlign(visualMapModel, api, itemSize) {
* Prepare dataIndex for outside usage, where dataIndex means rawIndex, and
* dataIndexInside means filtered index.
*/
-export function convertDataIndex(batch) {
+export function makeHighDownBatch(batch, visualMapModel) {
zrUtil.each(batch || [], function (batchItem) {
- if (batch.dataIndex != null) {
- batch.dataIndexInside = batch.dataIndex;
- batch.dataIndex = null;
+ if (batchItem.dataIndex != null) {
+ batchItem.dataIndexInside = batchItem.dataIndex;
+ batchItem.dataIndex = null;
}
+ batchItem.highlightKey = 'visualMap' + (visualMapModel ? visualMapModel.componentIndex : '');
});
return batch;
}
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 4e3e583..69c8e37 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -53,6 +53,10 @@ var Z2_LIFT_VALUE = 1;
var EMPHASIS = 'emphasis';
var NORMAL = 'normal';
+// Reserve 0 as default.
+var _highlightNextDigit = 1;
+var _highlightKeyMap = {};
+
/**
* Extend shape with parameters
@@ -429,26 +433,26 @@ export function setElementHoverStyle(el, hoverStl) {
function onElementMouseOver(e) {
!shouldSilent(this, e)
- // API highlight has higher priority than mouse highlight.
- && !this.__emphasisEnteredByAPI
+ // "emphasis" event highlight has higher priority than mouse highlight.
+ && !this.__highByOuter
&& traverseUpdate(this, singleEnterEmphasis);
}
function onElementMouseOut(e) {
!shouldSilent(this, e)
- // API highlight has higher priority than mouse highlight.
- && !this.__emphasisEnteredByAPI
+ // "emphasis" event highlight has higher priority than mouse highlight.
+ && !this.__highByOuter
&& traverseUpdate(this, singleEnterNormal);
}
-function onEnterEmphasisByAPI() {
- this.__emphasisEnteredByAPI = true;
+function onElementEmphasisEvent(highlightDigit) {
+ this.__highByOuter |= 1 << (highlightDigit || 0);
traverseUpdate(this, singleEnterEmphasis);
}
-function onEnterNormalByAPI() {
- this.__emphasisEnteredByAPI = false;
- traverseUpdate(this, singleEnterNormal);
+function onElementNormalEvent(highlightDigit) {
+ !(this.__highByOuter &= ~(1 << (highlightDigit || 0)))
+ && traverseUpdate(this, singleEnterNormal);
}
function shouldSilent(el, e) {
@@ -537,8 +541,10 @@ export function setAsHighDownDispatcher(el, asDispatcher) {
// Duplicated function will be auto-ignored, see Eventful.js.
el[method]('mouseover', onElementMouseOver)[method]('mouseout', onElementMouseOut);
- // Emphasis, normal can be triggered manually
- el[method]('emphasis', onEnterEmphasisByAPI)[method]('normal', onEnterNormalByAPI);
+ // Emphasis, normal can be triggered manually by API or other components like hover link.
+ el[method]('emphasis', onElementEmphasisEvent)[method]('normal', onElementNormalEvent);
+ // Also keep previous record.
+ el.__highByOuter = el.__highByOuter || 0;
el.__highDownDispatcher = !disable;
}
@@ -553,6 +559,22 @@ export function isHighDownDispatcher(el) {
}
/**
+ * Support hightlight/downplay record on each elements.
+ * For the case: hover highlight/downplay (legend, visualMap, ...) and
+ * user triggerred hightlight/downplay should not conflict.
+ * Only all of the highlightDigit cleared, return to normal.
+ * @param {string} highlightKey
+ * @return {number} highlightDigit
+ */
+export function getHighlightDigit(highlightKey) {
+ var highlightDigit = _highlightKeyMap[highlightKey];
+ if (highlightDigit == null && _highlightNextDigit <= 32) {
+ highlightDigit = _highlightKeyMap[highlightKey] = _highlightNextDigit++;
+ }
+ return highlightDigit;
+}
+
+/**
* See more info in `setTextStyleCommon`.
* @param {Object|module:zrender/graphic/Style} normalStyle
* @param {Object} emphasisStyle
diff --git a/src/view/Chart.js b/src/view/Chart.js
index 7c71b01..bc7c70b 100644
--- a/src/view/Chart.js
+++ b/src/view/Chart.js
@@ -157,27 +157,28 @@ Chart.prototype = {
};
var chartProto = Chart.prototype;
-chartProto.updateView
- = chartProto.updateLayout
- = chartProto.updateVisual
- = function (seriesModel, ecModel, api, payload) {
+chartProto.updateView =
+chartProto.updateLayout =
+chartProto.updateVisual =
+ function (seriesModel, ecModel, api, payload) {
this.render(seriesModel, ecModel, api, payload);
};
/**
* Set state of single element
* @param {module:zrender/Element} el
- * @param {string} state 'normal'|'emphasis'
+ * @param {string} state 'normal'|'emphasis'
+ * @param {number} highlightDigit
*/
-function elSetState(el, state) {
+function elSetState(el, state, highlightDigit) {
if (el) {
- el.trigger(state);
+ el.trigger(state, highlightDigit);
if (el.isGroup
// Simple optimize.
&& !graphicUtil.isHighDownDispatcher(el)
) {
for (var i = 0, len = el.childCount(); i < len; i++) {
- elSetState(el.childAt(i), state);
+ elSetState(el.childAt(i), state, highlightDigit);
}
}
}
@@ -191,14 +192,18 @@ function elSetState(el, state) {
function toggleHighlight(data, payload, state) {
var dataIndex = modelUtil.queryDataIndex(data, payload);
+ var highlightDigit = (payload && payload.highlightKey != null)
+ ? graphicUtil.getHighlightDigit(payload.highlightKey)
+ : null;
+
if (dataIndex != null) {
each(modelUtil.normalizeToArray(dataIndex), function (dataIdx) {
- elSetState(data.getItemGraphicEl(dataIdx), state);
+ elSetState(data.getItemGraphicEl(dataIdx), state, highlightDigit);
});
}
else {
data.eachItemGraphicEl(function (el) {
- elSetState(el, state);
+ elSetState(el, state, highlightDigit);
});
}
}
diff --git a/test/hoverStyle.html b/test/hoverStyle.html
index e10c023..d8943cf 100644
--- a/test/hoverStyle.html
+++ b/test/hoverStyle.html
@@ -223,7 +223,8 @@ under the License.
'visualMap should be normal (and hoverLink should **scale circles**)',
'(inRange: has color, outOfRange: "black")',
'Click visualMap when hoverlink, circle color should be changed, but **keep scaled**.',
- 'Click the buttons check correct.'
+ 'Click button highlight dataIndex 0, only "middle blue" highlighted',
+ 'Then hover **blue** visualMap, all blue highlighted, and then unhover, "middle blue" should keep highlighted'
],
option: option,
height: 300,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org