rename event of roam controller and tweak zoom delta.

src/chart/graph/GraphView.js

@@ -321,23 +321,23 @@ export default echarts.extendChartView({
         controller
             .off('pan')
             .off('zoom')
-            .on('pan', function (dx, dy) {
-                roamHelper.updateViewOnPan(controllerHost, dx, dy);
+            .on('pan', function (e) {
+                roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
                 api.dispatchAction({
                     seriesId: seriesModel.id,
                     type: 'graphRoam',
-                    dx: dx,
-                    dy: dy
+                    dx: e.dx,
+                    dy: e.dy
                 });
             })
-            .on('zoom', function (zoom, mouseX, mouseY) {
-                roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+            .on('zoom', function (e) {
+                roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
                 api.dispatchAction({
                     seriesId: seriesModel.id,
                     type: 'graphRoam',
-                    zoom:  zoom,
-                    originX: mouseX,
-                    originY: mouseY
+                    zoom: e.scale,
+                    originX: e.originX,
+                    originY: e.originY
                 });
                 this._updateNodeAndLinkScale();
                 adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));

src/chart/treemap/TreemapView.js

@@ -431,9 +431,9 @@ export default echarts.extendChartView({
     /**
      * @private
      */
-    _onPan: function (dx, dy) {
+    _onPan: function (e) {
         if (this._state !== 'animating'
-            && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)
+            && (Math.abs(e.dx) > DRAG_THRESHOLD || Math.abs(e.dy) > DRAG_THRESHOLD)
         ) {
             // These param must not be cached.
             var root = this.seriesModel.getData().tree.root;
@@ -453,7 +453,7 @@ export default echarts.extendChartView({
                 from: this.uid,
                 seriesId: this.seriesModel.id,
                 rootRect: {
-                    x: rootLayout.x + dx, y: rootLayout.y + dy,
+                    x: rootLayout.x + e.dx, y: rootLayout.y + e.dy,
                     width: rootLayout.width, height: rootLayout.height
                 }
             });
@@ -463,7 +463,10 @@ export default echarts.extendChartView({
     /**
      * @private
      */
-    _onZoom: function (scale, mouseX, mouseY) {
+    _onZoom: function (e) {
+        var mouseX = e.originX;
+        var mouseY = e.originY;
+
         if (this._state !== 'animating') {
             // These param must not be cached.
             var root = this.seriesModel.getData().tree.root;
@@ -490,7 +493,7 @@ export default echarts.extendChartView({
             // Scale root bounding rect.
             var m = matrix.create();
             matrix.translate(m, m, [-mouseX, -mouseY]);
-            matrix.scale(m, m, [scale, scale]);
+            matrix.scale(m, m, [e.scale, e.scale]);
             matrix.translate(m, m, [mouseX, mouseY]);
 
             rect.applyTransform(m);

src/component/dataZoom/InsideZoomModel.js

@@ -31,6 +31,7 @@ export default DataZoomModel.extend({
         zoomLock: false,   // Whether disable zoom but only pan.
         zoomOnMouseWheel: true, // Can be: true / false / 'shift' / 'ctrl' / 'alt'.
         moveOnMouseMove: true,   // Can be: true / false / 'shift' / 'ctrl' / 'alt'.
+        moveOnMouseWheel: false, // Can be: true / false / 'shift' / 'ctrl' / 'alt'.
         preventDefaultMouseMove: true
     }
 });
\ No newline at end of file

src/component/dataZoom/InsideZoomView.js

@@ -80,6 +80,7 @@ var InsideZoomView = DataZoomView.extend({
                         roamControllerOpt: {
                             zoomOnMouseWheel: dataZoomOption.zoomOnMouseWheel,
                             moveOnMouseMove: dataZoomOption.moveOnMouseMove,
+                            moveOnMouseWheel: dataZoomOption.moveOnMouseWheel,
                             preventDefaultMouseMove: dataZoomOption.preventDefaultMouseMove
                         }
                     }
@@ -101,7 +102,7 @@ var InsideZoomView = DataZoomView.extend({
     /**
      * @private
      */
-    _onPan: function (coordInfo, coordSysName, controller, dx, dy, oldX, oldY, newX, newY) {
+    _onPan: function (coordInfo, coordSysName, controller, e) {
         var lastRange = this._range;
         var range = lastRange.slice();
 
@@ -112,7 +113,7 @@ var InsideZoomView = DataZoomView.extend({
         }
 
         var directionInfo = getDirectionInfo[coordSysName](
-            [oldX, oldY], [newX, newY], axisModel, controller, coordInfo
+            [e.oldX, e.oldY], [e.newX, e.newY], axisModel, controller, coordInfo
         );
 
         var percentDelta = directionInfo.signal
@@ -131,7 +132,7 @@ var InsideZoomView = DataZoomView.extend({
     /**
      * @private
      */
-    _onZoom: function (coordInfo, coordSysName, controller, scale, mouseX, mouseY) {
+    _onZoom: function (coordInfo, coordSysName, controller, e) {
         var lastRange = this._range;
         var range = lastRange.slice();
 
@@ -142,7 +143,7 @@ var InsideZoomView = DataZoomView.extend({
         }
 
         var directionInfo = getDirectionInfo[coordSysName](
-            null, [mouseX, mouseY], axisModel, controller, coordInfo
+            null, [e.originX, e.originY], axisModel, controller, coordInfo
         );
         var percentPoint = (
             directionInfo.signal > 0
@@ -150,7 +151,7 @@ var InsideZoomView = DataZoomView.extend({
                 : (directionInfo.pixel - directionInfo.pixelStart)
             ) / directionInfo.pixelLength * (range[1] - range[0]) + range[0];
 
-        scale = Math.max(1 / scale, 0);
+        var scale = Math.max(1 / e.scale, 0);
         range[0] = (range[0] - percentPoint) * scale + percentPoint;
         range[1] = (range[1] - percentPoint) * scale + percentPoint;
 

src/component/dataZoom/roams.js

@@ -136,8 +136,15 @@ function giveStore(api) {
 
 function createController(api, newRecord) {
     var controller = new RoamController(api.getZr());
-    controller.on('pan', curry(onPan, newRecord));
-    controller.on('zoom', curry(onZoom, 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);
+            });
+        });
+    });
 
     return controller;
 }
@@ -151,17 +158,23 @@ 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 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/MapDraw.js

@@ -389,26 +389,26 @@ MapDraw.prototype = {
             return action;
         }
 
-        controller.off('pan').on('pan', function (dx, dy) {
+        controller.off('pan').on('pan', function (e) {
             this._mouseDownFlag = false;
 
-            roamHelper.updateViewOnPan(controllerHost, dx, dy);
+            roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
 
             api.dispatchAction(zrUtil.extend(makeActionBase(), {
-                dx: dx,
-                dy: dy
+                dx: e.dx,
+                dy: e.dy
             }));
         }, this);
 
-        controller.off('zoom').on('zoom', function (zoom, mouseX, mouseY) {
+        controller.off('zoom').on('zoom', function (e) {
             this._mouseDownFlag = false;
 
-            roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+            roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
 
             api.dispatchAction(zrUtil.extend(makeActionBase(), {
-                zoom: zoom,
-                originX: mouseX,
-                originY: mouseY
+                zoom: e.scale,
+                originX: e.originX,
+                originY: e.originY
             }));
 
             if (this._updateGroup) {

src/component/helper/RoamController.js

@@ -76,6 +76,7 @@ function RoamController(zr) {
      * @param {Object} [opt]
      * @param {Object} [opt.zoomOnMouseWheel=true]
      * @param {Object} [opt.moveOnMouseMove=true]
+     * @param {Object} [opt.moveOnMouseWheel=false]
      * @param {Object} [opt.preventDefaultMouseMove=true] When pan.
      */
     this.enable = function (controlType, opt) {
@@ -86,6 +87,7 @@ function RoamController(zr) {
         this._opt = zrUtil.defaults(zrUtil.clone(opt) || {}, {
             zoomOnMouseWheel: true,
             moveOnMouseMove: true,
+            moveOnMouseWheel: false,
             preventDefaultMouseMove: true
         });
 
@@ -169,7 +171,7 @@ function mousemove(e) {
 
     this._opt.preventDefaultMouseMove && eventTool.stop(e.event);
 
-    this.trigger('pan', dx, dy, oldX, oldY, x, y);
+    this.trigger('pan', {dx: dx, dy: dy, oldX: oldX, oldY: oldY, newX: x, newY: y});
 }
 
 function mouseup(e) {
@@ -179,34 +181,56 @@ function mouseup(e) {
 }
 
 function mousewheel(e) {
+    var shouldZoom = checkKeyBinding(this, 'zoomOnMouseWheel', e);
+    var shouldMove = checkKeyBinding(this, 'moveOnMouseWheel', e);
+    var wheelDelta = e.wheelDelta;
+    var absWheelDeltaDelta = Math.abs(wheelDelta);
+
     // wheelDelta maybe -0 in chrome mac.
-    if (!checkKeyBinding(this, 'zoomOnMouseWheel', e) || e.wheelDelta === 0) {
+    if (wheelDelta === 0 || (!shouldZoom && !shouldMove)) {
         return;
     }
+    // console.log(wheelDelta);
+    if (shouldZoom) {
+        // Convenience:
+        // Mac and VM Windows on Mac: scroll up: zoom out.
+        // Windows: scroll up: zoom in.
+
+        // FIXME: Should do more test in different environment.
+        // wheelDelta is too complicated in difference nvironment
+        // (https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel),
+        // although it has been normallized by zrender.
+        // wheelDelta of mouse wheel is bigger than touch pad.
+        var factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1;
+        var scale = wheelDelta > 0 ? factor : 1 / factor;
+        zoom.call(this, e, scale, e.offsetX, e.offsetY);
+    }
 
-    // Convenience:
-    // Mac and VM Windows on Mac: scroll up: zoom out.
-    // Windows: scroll up: zoom in.
-    var zoomDelta = e.wheelDelta > 0 ? 1.1 : 1 / 1.1;
-    zoom.call(this, e, zoomDelta, e.offsetX, e.offsetY);
+    if (shouldMove) {
+        // 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});
+    }
 }
 
 function pinch(e) {
     if (interactionMutex.isTaken(this._zr, 'globalPan')) {
         return;
     }
-    var zoomDelta = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
-    zoom.call(this, e, zoomDelta, e.pinchX, e.pinchY);
+    var scale = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
+    zoom.call(this, e, scale, e.pinchX, e.pinchY);
 }
 
-function zoom(e, zoomDelta, zoomX, zoomY) {
-    if (this.pointerChecker && this.pointerChecker(e, zoomX, zoomY)) {
+function zoom(e, scale, originX, originY) {
+    if (this.pointerChecker && this.pointerChecker(e, originX, originY)) {
         // When mouse is out of roamController rect,
         // default befavoius should not be be disabled, otherwise
         // page sliding is disabled, contrary to expectation.
         eventTool.stop(e.event);
 
-        this.trigger('zoom', zoomDelta, zoomX, zoomY);
+        this.trigger('zoom', {scale: scale, originX: originX, originY: originY});
     }
 }