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/29 15:20:40 UTC
[incubator-echarts] 05/05: enable simulate browser scroll
(dataZoom.moveOnMouseWheel)
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 <su...@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
sushuang@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org