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/12/10 20:40:21 UTC
[incubator-echarts] branch fix/pagemousexxx updated: fix: remove
the page event. But use another way: keep trigger mouse move and mouse up
event when dragging instead.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/pagemousexxx
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/fix/pagemousexxx by this push:
new 4e24e26 fix: remove the page event. But use another way: keep trigger mouse move and mouse up event when dragging instead.
4e24e26 is described below
commit 4e24e260966f5229efe1638426f0679e8ee943f4
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Wed Dec 11 04:39:52 2019 +0800
fix: remove the page event. But use another way: keep trigger mouse move and mouse up event when dragging instead.
---
src/component/helper/BrushController.js | 88 +++++++-------------
test/css-transform.html | 9 +-
test/drag-out.html | 141 +++++++++++++++++++++++++-------
3 files changed, 148 insertions(+), 90 deletions(-)
diff --git a/src/component/helper/BrushController.js b/src/component/helper/BrushController.js
index 3ebb920..c8fb8cd 100644
--- a/src/component/helper/BrushController.js
+++ b/src/component/helper/BrushController.js
@@ -181,25 +181,8 @@ function BrushController(zr) {
*/
this._handlers = {};
- /**
- * @private
- * @type {Object}
- */
- this._localHandlers = {};
-
- /**
- * @private
- * @type {Object}
- */
- this._pageHandlers = {};
-
- each(localMouseHandlers, function (handler, eventName) {
- this._handlers[eventName] =
- this._localHandlers[eventName] = zrUtil.bind(handler, this);
- }, this);
- each(pageMouseHandlers, function (handler, eventName) {
- this._handlers[eventName] =
- this._pageHandlers[eventName] = zrUtil.bind(handler, this);
+ each(pointerHandlers, function (handler, eventName) {
+ this._handlers[eventName] = zrUtil.bind(handler, this);
}, this);
}
@@ -394,7 +377,7 @@ function doEnableBrush(controller, brushOption) {
interactionMutex.take(zr, MUTEX_RESOURCE_KEY, controller._uid);
}
- mountHandlers(zr, controller._localHandlers);
+ mountHandlers(zr, controller._handlers);
controller._brushType = brushOption.brushType;
controller._brushOption = zrUtil.merge(zrUtil.clone(DEFAULT_BRUSH_OPT), brushOption, true);
@@ -735,8 +718,14 @@ function pointsToRect(points) {
}
function resetCursor(controller, e, localCursorPoint) {
- // Check active
- if (!controller._brushType) {
+ if (
+ // Check active
+ !controller._brushType
+ // resetCursor should be always called when mouse is in zr area,
+ // but not called when mouse is out of zr area to avoid bad influence
+ // if `mousemove`, `mouseup` are triggered from `document` event.
+ || isOutsideZrArea(controller, e)
+ ) {
return;
}
@@ -764,12 +753,8 @@ function resetCursor(controller, e, localCursorPoint) {
}
function preventDefault(e) {
- // Just be worried about bring some side effect to the world
- // out of echarts, we do not `preventDefault` for globalout.
- if (e.zrIsFromLocal) {
- var rawE = e.event;
- rawE.preventDefault && rawE.preventDefault();
- }
+ var rawE = e.event;
+ rawE.preventDefault && rawE.preventDefault();
}
function mainShapeContain(cover, x, y) {
@@ -844,7 +829,7 @@ function determineBrushType(brushType, panel) {
return brushType;
}
-var localMouseHandlers = {
+var pointerHandlers = {
mousedown: function (e) {
if (this._dragging) {
@@ -865,44 +850,38 @@ var localMouseHandlers = {
this._dragging = true;
this._track = [localCursorPoint.slice()];
}
-
- // Mount page handlers only when needed to minimize unexpected side-effect.
- mountHandlers(this._zr, this._pageHandlers);
}
},
mousemove: function (e) {
- var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
- // resetCursor should be always called when mouse is in zr area,
- // but not called when mouse is out of zr area.
- resetCursor(this, e, localCursorPoint);
- }
-};
+ var x = e.offsetX;
+ var y = e.offsetY;
-var pageMouseHandlers = {
+ var localCursorPoint = this.group.transformCoordToLocal(x, y);
- pagemousemove: function (e) {
- if (this._dragging) {
- var xy = getLocalMouseXY(e, this._zr);
- var localCursorPoint = this.group.transformCoordToLocal(xy[0], xy[1]);
+ resetCursor(this, e, localCursorPoint);
+ if (this._dragging) {
preventDefault(e);
var eventParams = updateCoverByMouse(this, e, localCursorPoint, false);
eventParams && trigger(this, eventParams);
}
},
- pagemouseup: function (e) {
+ mouseup: function (e) {
handleDragEnd(this, e);
}
};
+
function handleDragEnd(controller, e) {
if (controller._dragging) {
preventDefault(e);
- var xy = getLocalMouseXY(e, controller._zr);
- var localCursorPoint = controller.group.transformCoordToLocal(xy[0], xy[1]);
+ var x = e.offsetX;
+ var y = e.offsetY;
+
+ var localCursorPoint = controller.group.transformCoordToLocal(x, y);
var eventParams = updateCoverByMouse(controller, e, localCursorPoint, true);
controller._dragging = false;
@@ -911,24 +890,15 @@ function handleDragEnd(controller, e) {
// trigger event shoule be at final, after procedure will be nested.
eventParams && trigger(controller, eventParams);
-
- unmountHandlers(controller._zr, controller._pageHandlers);
}
}
-function getLocalMouseXY(event, zr) {
- var x = event.offsetX;
- var y = event.offsetY;
- // var w = zr.getWidth();
- // var h = zr.getHeight();
- // x < 0 && (x = 0);
- // x > w && (x = w);
- // y < 0 && (y = 0);
- // y > h && (y = h);
-
- return [x, y];
+function isOutsideZrArea(controller, x, y) {
+ var zr = controller._zr;
+ return x < 0 || x > zr.getWidth() || y < 0 || y > zr.getHeight();
}
+
/**
* key: brushType
* @type {Object}
diff --git a/test/css-transform.html b/test/css-transform.html
index 51eade2..1e79e88 100644
--- a/test/css-transform.html
+++ b/test/css-transform.html
@@ -238,18 +238,21 @@ under the License.
grid: {
left: '10%',
right: 2,
- bottom: 80
+ bottom: 100
},
yAxis: {
splitArea: {
show: true
}
},
- dataZoom: {
+ dataZoom: [{
type: 'inside',
start: 10,
end: 30
- },
+ }, {
+ type: 'slider',
+ bottom: 40
+ }],
series: [{
name: 'line',
type: 'line',
diff --git a/test/drag-out.html b/test/drag-out.html
index 0973a7d..03c49f7 100644
--- a/test/drag-out.html
+++ b/test/drag-out.html
@@ -44,7 +44,7 @@ under the License.
position: fixed;
right: 5px;
top: 5px;
- width: 120px;
+ width: 140px;
height: 120px;
box-shadow: 0 0 5px #fff;
border: 2px solid green;
@@ -72,9 +72,90 @@ under the License.
<div id="live-info-content"></div>
</div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
+<div>
<div id="parent-of-main0">
<div id="main0"></div>
</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+
<div id="main1"></div>
<div id="main2"></div>
@@ -84,16 +165,20 @@ under the License.
<script>
var _liveInfoPanel = document.getElementById('live-info-panel');
var _liveInfoContent = document.getElementById('live-info-content');;
+ var _liveMsg = [];
function _printLiveInfo(msg) {
- _liveInfoContent.innerHTML = testHelper.encodeHTML(msg).replace(/\n/g, '<br>');
+ _liveMsg.push(testHelper.encodeHTML(msg));
+ _liveMsg = _liveMsg.slice(Math.max(0, _liveMsg.length - 9));
+ _liveInfoContent.innerHTML = _liveMsg.join('<br>');
}
function _printEvent(event) {
- _printLiveInfo([
- 'type: ' + event.type,
- 'x: ' + event.offsetX,
- 'y: ' + event.offsetY,
- 'isFromLocal: ' + !!event.zrIsFromLocal
- ].join('\n'));
+ var x = event.offsetX;
+ var y = event.offsetY;
+ x = x != null ? x.toFixed(1) : '-';
+ y = y != null ? y.toFixed(1) : '-';
+ _printLiveInfo(
+ event.type + ' [' + x + ',' + x + ']'
+ );
}
</script>
@@ -110,6 +195,11 @@ under the License.
xAxis: {},
yAxis: {},
brush: {},
+ tooltip: {
+ enterable: true,
+ alwaysShowContent: true,
+ position: [10, 10]
+ },
series: {
type: 'line',
data: [[11, 22]]
@@ -120,32 +210,18 @@ under the License.
title: [
'[ Test this case in **PC** / **Touch device** / **WeApp(no document)** ]',
'(1) Before anything clicked, **mousemove** / **click** on both inside and outside echarts.',
- '**Live Info Panel** should have nothing.',
- '(2) Click "mount page event listeners"',
- '**mousemove** / **click** on both inside and outside echarts.',
- '**Live Info Panel** should display mouse **xy** and **isFromLocal** correctly.',
+ '**Live Info Panel** should have mouse events.',
+ '(2) **mousemove** / **click** on both inside and outside echarts.',
+ '**Live Info Panel** should display mouse **xy** correctly.',
+ 'drag outside and release, "globalout" event should be displayed fianly (only PC)',
'(3) Click "add stopPropagation on parent"',
- 'Move outside echarts, **Live Info Panel** should have nothing changed.',
- 'Move inside echarts, **Live Info Panel** should have page event.'
+ 'drag outside should be as usual.',
+ 'Move inside and outside echarts, **Live Info Panel** should have mouse event.'
],
option: option,
width: 300,
height: 200,
buttons: [{
- text: 'mount page event listeners',
- onclick: function () {
- if (mounted) {
- return;
- }
- mounted = true;
- zr.on('pagemousemove', function (event) {
- _printEvent(event)
- });
- zr.on('pagemouseup', function (event) {
- _printEvent(event)
- });
- }
- }, {
text: 'add stopPropagation on parent',
onclick: function () {
var parent = document.getElementById('parent-of-main0');
@@ -160,6 +236,15 @@ under the License.
var mounted;
if (chart) {
zr = chart.getZr();
+ zr.on('mousemove', function (event) {
+ _printEvent(event)
+ });
+ zr.on('mouseup', function (event) {
+ _printEvent(event)
+ });
+ zr.on('globalout', function (event) {
+ _printEvent(event)
+ });
}
});
</script>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org