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 2018/09/21 16:58:56 UTC
[incubator-echarts] 01/03: (fix): fix pie high down and tweak
graphic high down.
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 1357fee6e4093dcbd8d6ca3f828bf34ed0fa9fff
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Sep 21 23:55:47 2018 +0800
(fix): fix pie high down and tweak graphic high down.
---
src/chart/custom.js | 2 +-
src/chart/helper/Symbol.js | 21 ++----------
src/chart/pie/PieView.js | 8 ++---
src/util/graphic.js | 84 +++++++++++++++++++++++++++++++---------------
src/view/Chart.js | 19 +++++++----
test/hoverStyle.html | 55 ++++++++++++++++++++++++++++++
6 files changed, 129 insertions(+), 60 deletions(-)
diff --git a/src/chart/custom.js b/src/chart/custom.js
index 98f7ead..8a423ac 100644
--- a/src/chart/custom.js
+++ b/src/chart/custom.js
@@ -327,7 +327,7 @@ function updateEl(el, dataIndex, elOption, animatableModel, data, isInit, isRoot
graphicUtil.setElementHoverStyle(el, styleEmphasis);
el.__cusHasEmphStl = !disableStyleEmphasis;
}
- isRoot && graphicUtil.setAsHoverStyleTrigger(el, !disableStyleEmphasis);
+ isRoot && graphicUtil.setAsHighDownDispatcher(el, !disableStyleEmphasis);
}
function prepareStyleTransition(prop, targetStyle, elOptionStyle, oldElStyle, isInit) {
diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js
index d55dc6e..1090798 100644
--- a/src/chart/helper/Symbol.js
+++ b/src/chart/helper/Symbol.js
@@ -321,10 +321,7 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
return useNameLabel ? data.getName(idx) : getDefaultLabel(data, idx);
}
- symbolPath.off('mouseover')
- .off('mouseout')
- .off('emphasis')
- .off('normal');
+ graphic.removeExtraHighDownEffect(symbolPath);
symbolPath.hoverStyle = hoverItemStyle;
@@ -335,24 +332,10 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
symbolPath.__symbolOriginalScale = getScale(symbolSize);
if (hoverAnimation && seriesModel.isAnimationEnabled()) {
- // Note: consider `off`, should use static function here.
- symbolPath.on('mouseover', onMouseOver)
- .on('mouseout', onMouseOut)
- .on('emphasis', onEmphasis)
- .on('normal', onNormal);
+ graphic.setExtraHighDownEffect(symbolPath, onEmphasis, onNormal);
}
};
-function onMouseOver() {
- // see comment in `graphic.isInEmphasis`
- !graphic.isInEmphasis(this) && onEmphasis.call(this);
-}
-
-function onMouseOut() {
- // see comment in `graphic.isInEmphasis`
- !graphic.isInEmphasis(this) && onNormal.call(this);
-}
-
function onEmphasis() {
// Do not support this hover animation util some scenario required.
// Animation can only be supported in hover layer when using `el.incremetal`.
diff --git a/src/chart/pie/PieView.js b/src/chart/pie/PieView.js
index 199ec24..9913838 100644
--- a/src/chart/pie/PieView.js
+++ b/src/chart/pie/PieView.js
@@ -197,13 +197,9 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
}
}, 300, 'elasticOut');
}
- sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
+ graphic.removeExtraHighDownEffect(sector);
if (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled()) {
- sector
- .on('mouseover', onEmphasis)
- .on('mouseout', onNormal)
- .on('emphasis', onEmphasis)
- .on('normal', onNormal);
+ graphic.setExtraHighDownEffect(sector, onEmphasis, onNormal);
}
this._updateLabel(data, idx);
diff --git a/src/util/graphic.js b/src/util/graphic.js
index f44b844..c24b089 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -274,7 +274,7 @@ function cacheElementStl(el) {
var elStyle = el.style;
for (var name in hoverStyle) {
- // See comment in `doSingleEnterHover`.
+ // See comment in `singleEnterEmphasis`.
if (hoverStyle[name] != null) {
normalStyle[name] = elStyle[name];
}
@@ -285,7 +285,7 @@ function cacheElementStl(el) {
normalStyle.stroke = elStyle.stroke;
}
-function doSingleEnterHover(el) {
+function singleEnterEmphasis(el) {
var hoverStl = el.__hoverStl;
if (!hoverStl || el.__highlighted) {
@@ -347,6 +347,8 @@ function doSingleEnterHover(el) {
el.dirty(false);
el.z2 += 1;
}
+
+ el.__extraOnEmphasis && el.__extraOnEmphasis();
}
function setDefaultHoverFillStroke(targetStyle, hoverStyle, prop) {
@@ -355,9 +357,12 @@ function setDefaultHoverFillStroke(targetStyle, hoverStyle, prop) {
}
}
-function doSingleLeaveHover(el) {
+function singleEnterNormal(el) {
if (el.__highlighted) {
doSingleRestoreHoverStyle(el);
+
+ el.__extraOnNormal && el.__extraOnNormal();
+
el.__highlighted = false;
}
}
@@ -404,31 +409,48 @@ function traverseCall(el, method) {
* as `false` to disable the hover style.
* Otherwise, use the default hover style if not provided.
* @param {Object} [opt]
- * @param {boolean} [opt.hoverSilentOnTouch=false] See `graphic.setAsHoverStyleTrigger`
+ * @param {boolean} [opt.hoverSilentOnTouch=false] See `graphic.setAsHighDownDispatcher`
*/
export function setElementHoverStyle(el, hoverStl) {
hoverStl = el.__hoverStl = hoverStl !== false && (hoverStl || {});
el.__hoverStlDirty = true;
if (el.__highlighted) {
- doSingleLeaveHover(el);
- doSingleEnterHover(el);
+ singleEnterNormal(el);
+ singleEnterEmphasis(el);
}
}
/**
- * Emphasis (called by API) has higher priority than `mouseover`.
+ * Set customized emphasis effect like scale, animation.
+ * If calling this method more than once with the same
+ * `onEmphasis` and `onNormal` function, it will not
+ * add but do nothing.
+ *
+ * Highlight that triggered by API (
+ * `chart.dispatchAction({type: 'highlight'});`
+ * or `el.trigger('emphasis');`
+ * ) has higher priority than that triggered by `mouseover`.
* When element has been called to be entered emphasis, mouse over
* should not trigger the highlight effect (for example, animation
* scale) again, and `mouseout` should not downplay the highlight
* effect. So the listener of `mouseover` and `mouseout` should
* check `isInEmphasis`.
*
- * @param {module:zrender/Element} el
- * @return {boolean}
+ * @param {module:zrender/src/Element} el element that will take the effect.
+ * @param {Function} onEmphasis
+ * @param {Function} onNormal
*/
-export function isInEmphasis(el) {
- return el && el.__isEmphasisEntered;
+export function setExtraHighDownEffect(el, onEmphasis, onNormal) {
+ el.__extraOnEmphasis = onEmphasis;
+ el.__extraOnNormal = onNormal;
+}
+
+/**
+ * @param {module:zrender/src/Element} el element that will take the effect.
+ */
+export function removeExtraHighDownEffect(el) {
+ el.__extraOnEmphasis = el.__extraOnNormal = null;
}
function onElementMouseOver(e) {
@@ -436,8 +458,8 @@ function onElementMouseOver(e) {
return;
}
- // Only if element is not in emphasis status
- !this.__isEmphasisEntered && traverseCall(this, doSingleEnterHover);
+ // API highlight has higher priority than mouse highlight.
+ !this.__doesEmphasisEnteredByAPI && traverseCall(this, singleEnterEmphasis);
}
function onElementMouseOut(e) {
@@ -445,18 +467,18 @@ function onElementMouseOut(e) {
return;
}
- // Only if element is not in emphasis status
- !this.__isEmphasisEntered && traverseCall(this, doSingleLeaveHover);
+ // API highlight has higher priority than mouse highlight.
+ !this.__doesEmphasisEnteredByAPI && traverseCall(this, singleEnterNormal);
}
-function enterEmphasis() {
- this.__isEmphasisEntered = true;
- traverseCall(this, doSingleEnterHover);
+function onEnterEmphasisByAPI() {
+ this.__doesEmphasisEnteredByAPI = true;
+ traverseCall(this, singleEnterEmphasis);
}
-function leaveEmphasis() {
- this.__isEmphasisEntered = false;
- traverseCall(this, doSingleLeaveHover);
+function onEnterNormalByAPI() {
+ this.__doesEmphasisEnteredByAPI = false;
+ traverseCall(this, singleEnterNormal);
}
/**
@@ -474,7 +496,7 @@ function leaveEmphasis() {
* @param {module:zrender/Element} el
* @param {Object|boolean} [hoverStyle] See `graphic.setElementHoverStyle`.
* @param {Object} [opt]
- * @param {boolean} [opt.hoverSilentOnTouch=false] See `graphic.setAsHoverStyleTrigger`.
+ * @param {boolean} [opt.hoverSilentOnTouch=false] See `graphic.setAsHighDownDispatcher`.
*/
export function setHoverStyle(el, hoverStyle, opt) {
el.isGroup
@@ -485,7 +507,7 @@ export function setHoverStyle(el, hoverStyle, opt) {
})
: setElementHoverStyle(el, el.hoverStyle || hoverStyle);
- setAsHoverStyleTrigger(el, opt);
+ setAsHighDownDispatcher(el, opt);
}
/**
@@ -501,25 +523,33 @@ export function setHoverStyle(el, hoverStyle, opt) {
* In this case, hoverSilentOnTouch should be used to disable hover-highlight
* on touch device.
*/
-export function setAsHoverStyleTrigger(el, opt) {
+export function setAsHighDownDispatcher(el, opt) {
var disable = opt === false;
el.__hoverSilentOnTouch = opt != null && opt.hoverSilentOnTouch;
// Simple optimize, since this method might be
// called for each elements of a group in some cases.
- if (!disable || el.__hoverStyleTrigger) {
+ if (!disable || el.__highDownDispatcher) {
var method = disable ? 'off' : 'on';
// 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', enterEmphasis)[method]('normal', leaveEmphasis);
+ el[method]('emphasis', onEnterEmphasisByAPI)[method]('normal', onEnterNormalByAPI);
- el.__hoverStyleTrigger = !disable;
+ el.__highDownDispatcher = !disable;
}
}
/**
+ * @param {module:zrender/src/Element} el
+ * @return {boolean}
+ */
+export function isHighDownDispatcher(el) {
+ return !!(el && el.__highDownDispatcher);
+}
+
+/**
* @param {Object|module:zrender/graphic/Style} normalStyle
* @param {Object} emphasisStyle
* @param {module:echarts/model/Model} normalModel
diff --git a/src/view/Chart.js b/src/view/Chart.js
index 47485d8..7c71b01 100644
--- a/src/view/Chart.js
+++ b/src/view/Chart.js
@@ -22,6 +22,7 @@ import Group from 'zrender/src/container/Group';
import * as componentUtil from '../util/component';
import * as clazzUtil from '../util/clazz';
import * as modelUtil from '../util/model';
+import * as graphicUtil from '../util/graphic';
import {createTask} from '../stream/task';
import createRenderPlanner from '../chart/helper/createRenderPlanner';
@@ -165,23 +166,27 @@ chartProto.updateView
/**
* Set state of single element
- * @param {module:zrender/Element} el
- * @param {string} state
+ * @param {module:zrender/Element} el
+ * @param {string} state 'normal'|'emphasis'
*/
function elSetState(el, state) {
if (el) {
el.trigger(state);
- if (el.type === 'group') {
- for (var i = 0; i < el.childCount(); i++) {
+ if (el.isGroup
+ // Simple optimize.
+ && !graphicUtil.isHighDownDispatcher(el)
+ ) {
+ for (var i = 0, len = el.childCount(); i < len; i++) {
elSetState(el.childAt(i), state);
}
}
}
}
+
/**
- * @param {module:echarts/data/List} data
- * @param {Object} payload
- * @param {string} state 'normal'|'emphasis'
+ * @param {module:echarts/data/List} data
+ * @param {Object} payload
+ * @param {string} state 'normal'|'emphasis'
*/
function toggleHighlight(data, payload, state) {
var dataIndex = modelUtil.queryDataIndex(data, payload);
diff --git a/test/hoverStyle.html b/test/hoverStyle.html
index 83b9b78..40fffb7 100644
--- a/test/hoverStyle.html
+++ b/test/hoverStyle.html
@@ -59,6 +59,7 @@ under the License.
<div id="main3"></div>
<div id="main4"></div>
<div id="main5"></div>
+ <div id="main6"></div>
<script>
@@ -492,5 +493,59 @@ under the License.
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ hoverLayerThreshold: hoverLayerThreshold,
+ tooltip: {},
+ series: [{
+ type: 'pie',
+ data: [
+ {value: 12, name: 'qwer'},
+ {value: 15, name: 'asdf'},
+ {value: 17, name: 'zxcv'}
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main6', {
+ title: [
+ 'Pie **hightlight priority** of API and mouse:',
+ 'Hover on sector, **should scaled and highlighted**.',
+ 'trigger hover by API: **should scaled and highlighted**.',
+ 'Test mouse hover and leave, should NOT return to normal.',
+ 'Only click downplay to return normal'
+ ],
+ option: option,
+ height: 200,
+ buttons: [{
+ text: 'highlight dataIndex 0',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ }
+ }, {
+ text: 'downplay dataIndex 0',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ }
+ }]
+ });
+ });
+ </script>
+
+
+
+
</body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org