enable simulate browser scroll (dataZoom.moveOnMouseWheel)

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 = {
 

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 = [];
 

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});
     }
 }
 

test/dataZoom-scroll.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/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