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/14 06:30:32 UTC
[incubator-echarts] 01/03: fix: emphasis and mouseover.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 529bbc3cdcface02731763ac4b71752da12f6533
Author: sushuang <su...@gmail.com>
AuthorDate: Thu Sep 13 23:07:11 2018 +0800
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 1a1d7d0..d55dc6e 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 97bc53e..426cb9f 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 762e5b7..83b9b78 100644
--- a/test/hoverStyle.html
+++ b/test/hoverStyle.html
@@ -58,6 +58,7 @@ under the License.
<div id="main2"></div>
<div id="main3"></div>
<div id="main4"></div>
+ <div id="main5"></div>
<script>
@@ -438,5 +439,58 @@ under the License.
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ hoverLayerThreshold: hoverLayerThreshold,
+ tooltip: {},
+ xAxis: {
+ },
+ yAxis: {
+ splitNumber: 2,
+ scale: true
+ },
+ series: [{
+ type: 'line',
+ symbolSize: 20,
+ data: [[21, 22], [44, 11]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main5', {
+ title: [
+ 'Test default symbol hover style (scale) (Only test **Not use hoverLayer**)',
+ 'trigger hover by API: **should scaled**.',
+ '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
diff --git a/test/lib/reset.css b/test/lib/reset.css
index 9c931d4..d513015 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 e483624..7140dde 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -41,6 +41,7 @@
/**
* @param {Object} opt
* @param {string|Array.<string>} [opt.title] If array, each item is on a single line.
+ * Can use '**abc**', means <strong>abc</strong>.
* @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 = '<div class="test-title-inner">'
- + testHelper.encodeHTML(optTitle).replace(/\n/g, '<br>')
+ + testHelper.encodeHTML(optTitle)
+ .replace(/\*\*([^*]+?)\*\*/g, '<strong>$1</strong>')
+ .replace(/\n/g, '<br>')
+ '</div>';
}
diff --git a/test/treemap-disk.html b/test/treemap-disk.html
index 5f51011..35fca61 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
}
}
];
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org