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/05/07 12:04:47 UTC
[incubator-echarts] branch dev updated: Fix that tooltip
occasionally trigger mouseout event.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/dev by this push:
new f7cb789 Fix that tooltip occasionally trigger mouseout event.
f7cb789 is described below
commit f7cb789de7b350af5375af53ed0db1b96d742584
Author: sushuang <su...@gmail.com>
AuthorDate: Mon May 7 20:04:27 2018 +0800
Fix that tooltip occasionally trigger mouseout event.
---
src/component/tooltip/TooltipContent.js | 7 ++
test/tooltip-event.html | 151 ++++++++++++++++++++++++++++++++
2 files changed, 158 insertions(+)
diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js
index 110c604..2c90944 100644
--- a/src/component/tooltip/TooltipContent.js
+++ b/src/component/tooltip/TooltipContent.js
@@ -217,6 +217,13 @@ TooltipContent.prototype = {
el.style.display = el.innerHTML ? 'block' : 'none';
+ // If mouse occsionally move over the tooltip, a mouseout event will be
+ // triggered by canvas, and cuase some unexpectable result like dragging
+ // stop, "unfocusAdjacency". Here `pointer-events: none` is used to solve
+ // it. Although it is not suppored by IE8~IE10, fortunately it is a rare
+ // scenario.
+ el.style.pointerEvents = this._enterable ? 'auto' : 'none';
+
this._show = true;
},
diff --git a/test/tooltip-event.html b/test/tooltip-event.html
new file mode 100644
index 0000000..e2268f3
--- /dev/null
+++ b/test/tooltip-event.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ .test-title {
+ background: #146402;
+ color: #fff;
+ }
+ </style>
+
+
+ <div id="main0"></div>
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var data = [[10, 300], [10, 600]];
+
+ var option = {
+ xAxis: {},
+ yAxis: {},
+ tooltip: {
+ position: function (point, params, dom, rect, size) {
+ return [rect.x, rect.y];
+ },
+ extraCssText: 'width: 60px; height: 60px;'
+ },
+ series: [{
+ id: 'scatter',
+ type: 'scatter',
+ symbol: 'rect',
+ symbolSize: 50,
+ emphasis: {
+ itemStyle: {
+ color: 'green'
+ }
+ },
+ data: data
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Tooltip should be event disalbed:',
+ '(1) When hovering on the symbol',
+ 'tooltip is shown on the symbol;',
+ 'the symbol should keep green, but not return to red.',
+ '(2) Enable moving the symbol without tooltip effection',
+ '(3) click "set tooltip enterable, button in tooltip should be clickable'
+ ],
+ option: option,
+ button: {
+ text: 'set tooltip enterable',
+ onclick: function () {
+ chart.setOption({
+ tooltip: {
+ formatter: function () {
+ return [
+ '<button onclick="alert(\'click\');">click me</button>'
+ ].join('');
+ },
+ enterable: true
+ }
+ });
+ }
+ }
+ });
+
+ if (chart) {
+ var zr = chart.getZr();
+ var pointerOffset;
+ var draggingDataIndex;
+
+ chart.on('mousedown', function (params) {
+ if (params.seriesIndex === 0) {
+ var pointerData = chart.convertFromPixel(
+ 'grid', [params.event.offsetX, params.event.offsetY]
+ );
+ draggingDataIndex = params.dataIndex;
+ pointerOffset = [
+ params.data[0] - pointerData[0],
+ params.data[1] - pointerData[1]
+ ];
+ }
+ });
+
+ zr.on('mousemove', function (params) {
+ if (draggingDataIndex != null) {
+ var pointerData = chart.convertFromPixel(
+ 'grid', [params.event.offsetX, params.event.offsetY]
+ );
+ data[draggingDataIndex] = [
+ pointerData[0] + pointerOffset[0],
+ pointerData[1] + pointerOffset[1]
+ ];
+ chart.setOption({
+ series: {
+ id: 'scatter',
+ data: data
+ },
+ animationDurationUpdate: 0
+ });
+ }
+ });
+
+ zr.on('mouseup', function (params) {
+ draggingDataIndex = null;
+ chart.setOption({
+ animationDurationUpdate: 700
+ });
+ });
+ }
+ });
+
+ </script>
+ </body>
+</html>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
sushuang@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org