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 <sushuang0...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org