This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit a86d780a26bd4ca3daf05627ca5507ee8dfc161a Author: sushuang <sushuang0...@gmail.com> AuthorDate: Tue May 29 23:19:44 2018 +0800 enable simulate browser scroll (dataZoom.moveOnMouseWheel) --- src/component/dataZoom/InsideZoomView.js | 82 ++++++++++------- src/component/dataZoom/roams.js | 28 ++---- src/component/helper/RoamController.js | 5 +- test/dataZoom-scroll.html | 147 +++++++++++++++++++++++++++++++ 4 files changed, 208 insertions(+), 54 deletions(-) diff --git a/src/component/dataZoom/InsideZoomView.js b/src/component/dataZoom/InsideZoomView.js index 91acac4..36877a2 100644 --- a/src/component/dataZoom/InsideZoomView.js +++ b/src/component/dataZoom/InsideZoomView.js @@ -63,6 +63,11 @@ var InsideZoomView = DataZoomView.extend({ var coordModel = coordInfo.model; var dataZoomOption = dataZoomModel.option; + var getRange = {}; + zrUtil.each(['pan', 'zoom', 'scrollMove'], function (eventName) { + getRange[eventName] = bind(roamHandlers[eventName], this, coordInfo, coordSysName); + }, this); + roams.register( api, { @@ -73,8 +78,7 @@ var InsideZoomView = DataZoomView.extend({ }, dataZoomId: dataZoomModel.id, throttleRate: dataZoomModel.get('throttle', true), - panGetRange: bind(this._onPan, this, coordInfo, coordSysName), - zoomGetRange: bind(this._onZoom, this, coordInfo, coordSysName), + getRange: getRange, zoomLock: dataZoomOption.zoomLock, disabled: dataZoomOption.disabled, roamControllerOpt: { @@ -97,12 +101,16 @@ var InsideZoomView = DataZoomView.extend({ roams.unregister(this.api, this.dataZoomModel.id); InsideZoomView.superApply(this, 'dispose', arguments); this._range = null; - }, + } + +}); + +var roamHandlers = { /** - * @private + * @this {module:echarts/component/dataZoom/InsideZoomView} */ - _onPan: function (coordInfo, coordSysName, controller, e) { + zoom: function (coordInfo, coordSysName, controller, e) { var lastRange = this._range; var range = lastRange.slice(); @@ -113,14 +121,22 @@ var InsideZoomView = DataZoomView.extend({ } var directionInfo = getDirectionInfo[coordSysName]( - [e.oldX, e.oldY], [e.newX, e.newY], axisModel, controller, coordInfo + null, [e.originX, e.originY], axisModel, controller, coordInfo ); + var percentPoint = ( + directionInfo.signal > 0 + ? (directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel) + : (directionInfo.pixel - directionInfo.pixelStart) + ) / directionInfo.pixelLength * (range[1] - range[0]) + range[0]; - var percentDelta = directionInfo.signal - * (range[1] - range[0]) - * directionInfo.pixel / directionInfo.pixelLength; + var scale = Math.max(1 / e.scale, 0); + range[0] = (range[0] - percentPoint) * scale + percentPoint; + range[1] = (range[1] - percentPoint) * scale + percentPoint; - sliderMove(percentDelta, range, [0, 100], 'all'); + // Restrict range. + var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan(); + + sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); this._range = range; @@ -130,9 +146,28 @@ var InsideZoomView = DataZoomView.extend({ }, /** - * @private + * @this {module:echarts/component/dataZoom/InsideZoomView} */ - _onZoom: function (coordInfo, coordSysName, controller, e) { + pan: makeMover(function (range, axisModel, coordInfo, coordSysName, controller, e) { + var directionInfo = getDirectionInfo[coordSysName]( + [e.oldX, e.oldY], [e.newX, e.newY], axisModel, controller, coordInfo + ); + + return directionInfo.signal + * (range[1] - range[0]) + * directionInfo.pixel / directionInfo.pixelLength; + }), + + /** + * @this {module:echarts/component/dataZoom/InsideZoomView} + */ + scrollMove: makeMover(function (range, axisModel, coordInfo, coordSysName, controller, e) { + return (range[1] - range[0]) * e.scrollDelta; + }) +}; + +function makeMover(getPercentDelta) { + return function (coordInfo, coordSysName, controller, e) { var lastRange = this._range; var range = lastRange.slice(); @@ -142,32 +177,19 @@ var InsideZoomView = DataZoomView.extend({ return; } - var directionInfo = getDirectionInfo[coordSysName]( - null, [e.originX, e.originY], axisModel, controller, coordInfo + var percentDelta = getPercentDelta( + range, axisModel, coordInfo, coordSysName, controller, e ); - var percentPoint = ( - directionInfo.signal > 0 - ? (directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel) - : (directionInfo.pixel - directionInfo.pixelStart) - ) / directionInfo.pixelLength * (range[1] - range[0]) + range[0]; - var scale = Math.max(1 / e.scale, 0); - range[0] = (range[0] - percentPoint) * scale + percentPoint; - range[1] = (range[1] - percentPoint) * scale + percentPoint; - - // Restrict range. - var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan(); - - sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); + sliderMove(percentDelta, range, [0, 100], 'all'); this._range = range; if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { return range; } - } - -}); + }; +} var getDirectionInfo = { diff --git a/src/component/dataZoom/roams.js b/src/component/dataZoom/roams.js index 4b52974..25f205a 100644 --- a/src/component/dataZoom/roams.js +++ b/src/component/dataZoom/roams.js @@ -41,8 +41,10 @@ var ATTR = '\0_ec_dataZoom_roams'; * @param {Array.<string>} dataZoomInfo.allCoordIds * @param {string} dataZoomInfo.dataZoomId * @param {number} dataZoomInfo.throttleRate - * @param {Function} dataZoomInfo.panGetRange - * @param {Function} dataZoomInfo.zoomGetRange + * @param {Object} dataZoomInfo.getRange + * @param {Function} dataZoomInfo.getRange.pan + * @param {Function} dataZoomInfo.getRange.zoom + * @param {Function} dataZoomInfo.getRange.scrollMove * @param {boolean} [dataZoomInfo.zoomLock] * @param {boolean} [dataZoomInfo.disabled] */ @@ -140,8 +142,8 @@ function createController(api, newRecord) { zrUtil.each(['pan', 'zoom', 'scrollMove'], function (eventName) { controller.on(eventName, function (event) { wrapAndDispatch(newRecord, function (info) { - var methodName = eventName + 'GetRange'; - return info[methodName] && info[methodName](newRecord.controller, event); + var method = (info.getRange || {})[eventName]; + return method && method(newRecord.controller, event); }); }); }); @@ -158,24 +160,6 @@ function cleanStore(store) { }); } -// function onPan(record, dx, dy, oldX, oldY, newX, newY) { -// wrapAndDispatch(record, function (info) { -// return info.panGetRange(record.controller, dx, dy, oldX, oldY, newX, newY); -// }); -// } - -// function onZoom(record, scale, mouseX, mouseY) { -// wrapAndDispatch(record, function (info) { -// return info.zoomGetRange(record.controller, scale, mouseX, mouseY); -// }); -// } - -// function onScrollMove(record, scrollDelta) { -// wrapAndDispatch(record, function (info) { -// return info.scrollMoveGetRange(record.controller, scrollDelta); -// }); -// } - function wrapAndDispatch(record, getRange) { var batch = []; diff --git a/src/component/helper/RoamController.js b/src/component/helper/RoamController.js index d0638c8..0c994ef 100644 --- a/src/component/helper/RoamController.js +++ b/src/component/helper/RoamController.js @@ -210,8 +210,9 @@ function mousewheel(e) { // FIXME: Should do more test in different environment. var absDelta = Math.abs(wheelDelta); // wheelDelta of mouse wheel is bigger than touch pad. - var scrollDelta = absDelta > 3 ? 1.4 : absDelta > 1 ? 1.2 : 1.1; - this.trigger('scrollMove', {scrollDelta: scrollDelta}); + var scrollDelta = absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05; + var sign = wheelDelta > 0 ? 1 : -1; + this.trigger('scrollMove', {scrollDelta: sign * scrollDelta}); } } diff --git a/test/dataZoom-scroll.html b/test/dataZoom-scroll.html new file mode 100644 index 0000000..f5a8cf0 --- /dev/null +++ b/test/dataZoom-scroll.html @@ -0,0 +1,147 @@ + +<!-- +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/facePrint.js"></script> + <script src="lib/testHelper.js"></script> + <link rel="stylesheet" href="lib/reset.css" /> + </head> + <body> + <style> + h1 { + line-height: 60px; + height: 60px; + background: #ddd; + text-align: center; + font-weight: bold; + font-size: 14px; + } + .chart { + height: 500px; + } + </style> + + <div class="chart" id="d3"></div> + + + + <script> + require([ + 'data/rainfall.json', + 'echarts' + ], function (data, echarts) { + + var option = { + tooltip: { + trigger: 'axis' + }, + grid: [ + { + show: true, + borderWidth: 0 + } + ], + xAxis: [ + { + type: 'category', + boundaryGap: true, + axisLabel: {show: true}, + splitLine: {show: false}, + data: data.category, + gridIndex: 0 + } + ], + yAxis: [ + { + boundaryGap: false, + axisLabel: { + }, + axisLine: { + lineStyle: { + color: '#666' + } + }, + gridIndex: 0 + } + ], + series: [ + { + name: '降水量', + type: 'line', + data: data.rainfall, + itemStyle: { + normal: { + areaStyle: {} + } + }, + xAxisIndex: 0, + yAxisIndex: 0, + } + ], + dataZoom: [ + { + type: 'inside', + yAxisIndex: 0, + zoomOnMouseWheel: false, + // moveOnMouseMove: 'alt', + moveOnMouseWheel: true, + // zoomLock: true, + start: 30, + end: 40 + }, + // { + // type: 'inside', + // // zoomOnMouseWheel: false, + // // moveOnMouseMove: 'alt', + // yAxisIndex: 0, + // zoomLock: true, + // start: 30, + // end: 40 + // }, + { + type: 'slider', + start: 30, + end: 40 + }, + { + type: 'slider', + yAxisIndex: 0 + } + ] + }; + + testHelper.create(echarts, 'd3', { + title: 'Simulate browser scroll bar', + option: option, + height: 600 + }); + }) + </script> + + + + + </body> +</html> \ No newline at end of file -- To stop receiving notification emails like this one, please contact sushu...@apache.org. --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org