From 529bbc3cdcface02731763ac4b71752da12f6533 Mon Sep 17 00:00:00 2001 From: sushuang Date: Thu, 13 Sep 2018 23:07:11 +0800 Subject: [PATCH] fix: emphasis and mouseover. --- src/chart/helper/Symbol.js | 19 +++++++++++--- src/util/graphic.js | 17 ++++++++---- test/hoverStyle.html | 54 ++++++++++++++++++++++++++++++++++++++ test/lib/reset.css | 7 +++++ test/lib/testHelper.js | 5 +++- test/treemap-disk.html | 17 +++++------- 6 files changed, 98 insertions(+), 21 deletions(-) diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js index 1a1d7d0aa..d55dc6e37 100644 --- a/src/chart/helper/Symbol.js +++ b/src/chart/helper/Symbol.js @@ -335,17 +335,28 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) { symbolPath.__symbolOriginalScale = getScale(symbolSize); if (hoverAnimation && seriesModel.isAnimationEnabled()) { - symbolPath.on('mouseover', onEmphasis) - .on('mouseout', onNormal) + // Note: consider `off`, should use static function here. + symbolPath.on('mouseover', onMouseOver) + .on('mouseout', onMouseOut) .on('emphasis', onEmphasis) .on('normal', 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`. - if (this.incremental || this.useHoverLayer || graphic.isInEmphasis(this)) { + if (this.incremental || this.useHoverLayer) { return; } var scale = this.__symbolOriginalScale; @@ -359,7 +370,7 @@ function onEmphasis() { } function onNormal() { - if (this.incremental || this.useHoverLayer || graphic.isInEmphasis(this)) { + if (this.incremental || this.useHoverLayer) { return; } this.animateTo({ diff --git a/src/util/graphic.js b/src/util/graphic.js index 97bc53e2b..426cb9fd2 100644 --- a/src/util/graphic.js +++ b/src/util/graphic.js @@ -417,11 +417,18 @@ export function setElementHoverStyle(el, hoverStl) { } /** + * Emphasis (called by API) has higher priority than `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} */ export function isInEmphasis(el) { - return el && el.__isEmphasis; + return el && el.__isEmphasisEntered; } function onElementMouseOver(e) { @@ -430,7 +437,7 @@ function onElementMouseOver(e) { } // Only if element is not in emphasis status - !this.__isEmphasis && traverseCall(this, doSingleEnterHover); + !this.__isEmphasisEntered && traverseCall(this, doSingleEnterHover); } function onElementMouseOut(e) { @@ -439,16 +446,16 @@ function onElementMouseOut(e) { } // Only if element is not in emphasis status - !this.__isEmphasis && traverseCall(this, doSingleLeaveHover); + !this.__isEmphasisEntered && traverseCall(this, doSingleLeaveHover); } function enterEmphasis() { - this.__isEmphasis = true; + this.__isEmphasisEntered = true; traverseCall(this, doSingleEnterHover); } function leaveEmphasis() { - this.__isEmphasis = false; + this.__isEmphasisEntered = false; traverseCall(this, doSingleLeaveHover); } diff --git a/test/hoverStyle.html b/test/hoverStyle.html index 762e5b7d3..83b9b788f 100644 --- a/test/hoverStyle.html +++ b/test/hoverStyle.html @@ -58,6 +58,7 @@ under the License.
+
+ + + + \ No newline at end of file diff --git a/test/lib/reset.css b/test/lib/reset.css index 9c931d493..d513015b5 100644 --- a/test/lib/reset.css +++ b/test/lib/reset.css @@ -45,6 +45,13 @@ body > .main { zoom: 1; text-align: left; } +.test-title strong { + color: yellow; + font-weight: 700; + text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; + padding-left: 2px; + padding-right: 2px; +} .test-buttons button { margin: 10px 5px; } diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js index e48362456..7140dde2a 100644 --- a/test/lib/testHelper.js +++ b/test/lib/testHelper.js @@ -41,6 +41,7 @@ /** * @param {Object} opt * @param {string|Array.} [opt.title] If array, each item is on a single line. + * Can use '**abc**', means abc. * @param {Option} opt.option * @param {Object} [opt.info] info object to display. * @param {string} [opt.infoKey='option'] @@ -99,7 +100,9 @@ optTitle = optTitle.join('\n'); } title.innerHTML = '
' - + testHelper.encodeHTML(optTitle).replace(/\n/g, '
') + + testHelper.encodeHTML(optTitle) + .replace(/\*\*([^*]+?)\*\*/g, '$1') + .replace(/\n/g, '
') + '
'; } diff --git a/test/treemap-disk.html b/test/treemap-disk.html index 5f5101136..35fca6174 100644 --- a/test/treemap-disk.html +++ b/test/treemap-disk.html @@ -116,6 +116,7 @@ under the License. function colorMappingChange(value) { var levelOption = getLevelOption(value); + chart.setOption({ series: [{ levels: levelOption @@ -136,10 +137,8 @@ under the License. { color: ['#d14a61'], // default color itemStyle: { - normal: { - borderWidth: 0, - gapWidth: 5 - } + borderWidth: 0, + gapWidth: 5 } }, { @@ -150,18 +149,14 @@ under the License. ], colorMappingBy: colorMapping, itemStyle: { - normal: { - gapWidth: 1 - } + gapWidth: 1 } }, { colorSaturation: [0.35, 0.5], itemStyle: { - normal: { - gapWidth: 1, - borderColorSaturation: 0.6 - } + gapWidth: 1, + borderColorSaturation: 0.6 } } ]; -- GitLab