tweak roamController.

src/chart/graph/GraphView.js

@@ -4,6 +4,7 @@ define(function (require) {
     var SymbolDraw = require('../helper/SymbolDraw');
     var LineDraw = require('../helper/LineDraw');
     var RoamController = require('../../component/helper/RoamController');
+    var roamHelper = require('../../component/helper/roamHelper');
 
     var graphic = require('../../util/graphic');
     var adjustEdge = require('./adjustEdge');
@@ -25,14 +26,14 @@ define(function (require) {
             var lineDraw = new LineDraw();
             var group = this.group;
 
-            var controller = new RoamController(api.getZr(), group);
+            this._controller = new RoamController(api.getZr());
+            this._controllerHost = {target: group};
 
             group.add(symbolDraw.group);
             group.add(lineDraw.group);
 
             this._symbolDraw = symbolDraw;
             this._lineDraw = lineDraw;
-            this._controller = controller;
 
             this._firstRender = true;
         },
@@ -157,6 +158,7 @@ define(function (require) {
 
         dispose: function () {
             this._controller && this._controller.dispose();
+            this._controllerHost = {};
         },
 
         focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
@@ -256,6 +258,7 @@ define(function (require) {
 
         _updateController: function (seriesModel, api) {
             var controller = this._controller;
+            var controllerHost = this._controllerHost;
             var group = this.group;
 
             controller.setContainsPoint(function (x, y) {
@@ -269,14 +272,14 @@ define(function (require) {
                 return;
             }
             controller.enable(seriesModel.get('roam'));
-            controller.zoomLimit = seriesModel.get('scaleLimit');
-            // Update zoom from model
-            controller.zoom = seriesModel.coordinateSystem.getZoom();
+            controllerHost.zoomLimit = seriesModel.get('scaleLimit');
+            controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
 
             controller
                 .off('pan')
                 .off('zoom')
                 .on('pan', function (dx, dy) {
+                    roamHelper.updateViewOnPan(controllerHost, dx, dy);
                     api.dispatchAction({
                         seriesId: seriesModel.id,
                         type: 'graphRoam',
@@ -285,6 +288,7 @@ define(function (require) {
                     });
                 })
                 .on('zoom', function (zoom, mouseX, mouseY) {
+                    roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
                     api.dispatchAction({
                         seriesId: seriesModel.id,
                         type: 'graphRoam',

src/component/helper/MapDraw.js

@@ -4,6 +4,7 @@
 define(function (require) {
 
     var RoamController = require('./RoamController');
+    var roamHelper = require('../../component/helper/roamHelper');
     var graphic = require('../../util/graphic');
     var zrUtil = require('zrender/core/util');
 
@@ -84,9 +85,13 @@ define(function (require) {
          * @type {module:echarts/component/helper/RoamController}
          * @private
          */
-        this._controller = new RoamController(
-            api.getZr(), updateGroup ? group : null, null
-        );
+        this._controller = new RoamController(api.getZr());
+
+        /**
+         * @type {Object} {target, zoom, zoomLimit}
+         * @private
+         */
+        this._controllerHost = {target: updateGroup ? group : null};
 
         /**
          * @type {module:zrender/container/Group}
@@ -295,14 +300,17 @@ define(function (require) {
         remove: function () {
             this.group.removeAll();
             this._controller.dispose();
+            this._controllerHost = {};
         },
 
         _updateController: function (mapOrGeoModel, ecModel, api) {
             var geo = mapOrGeoModel.coordinateSystem;
             var controller = this._controller;
-            controller.zoomLimit = mapOrGeoModel.get('scaleLimit');
-            // Update zoom from model
-            controller.zoom = geo.getZoom();
+            var controllerHost = this._controllerHost;
+
+            controllerHost.zoomLimit = mapOrGeoModel.get('scaleLimit');
+            controllerHost.zoom = geo.getZoom();
+
             // roamType is will be set default true if it is null
             controller.enable(mapOrGeoModel.get('roam') || false);
             var mainType = mapOrGeoModel.mainType;
@@ -319,6 +327,8 @@ define(function (require) {
             controller.off('pan').on('pan', function (dx, dy) {
                 this._mouseDownFlag = false;
 
+                roamHelper.updateViewOnPan(controllerHost, dx, dy);
+
                 api.dispatchAction(zrUtil.extend(makeActionBase(), {
                     dx: dx,
                     dy: dy
@@ -328,6 +338,8 @@ define(function (require) {
             controller.off('zoom').on('zoom', function (zoom, mouseX, mouseY) {
                 this._mouseDownFlag = false;
 
+                roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+
                 api.dispatchAction(zrUtil.extend(makeActionBase(), {
                     zoom: zoom,
                     originX: mouseX,

src/component/helper/RoamController.js

 /**
  * @module echarts/component/helper/RoamController
  */
-
 define(function (require) {
 
     var Eventful = require('zrender/mixin/Eventful');
@@ -9,153 +8,20 @@ define(function (require) {
     var eventTool = require('zrender/core/event');
     var interactionMutex = require('./interactionMutex');
 
-    function mousedown(e) {
-        if (e.target && e.target.draggable) {
-            return;
-        }
-
-        var x = e.offsetX;
-        var y = e.offsetY;
-
-        if (this.containsPoint && this.containsPoint(x, y)) {
-            this._x = x;
-            this._y = y;
-            this._dragging = true;
-        }
-    }
-
-    function mousemove(e) {
-        if (!this._dragging) {
-            return;
-        }
-
-        eventTool.stop(e.event);
-
-        if (e.gestureEvent !== 'pinch') {
-
-            if (interactionMutex.isTaken(this._zr, 'globalPan')) {
-                return;
-            }
-
-            var x = e.offsetX;
-            var y = e.offsetY;
-
-            var oldX = this._x;
-            var oldY = this._y;
-
-            var dx = x - oldX;
-            var dy = y - oldY;
-
-            this._x = x;
-            this._y = y;
-
-            var target = this.target;
-
-            if (target) {
-                var pos = target.position;
-                pos[0] += dx;
-                pos[1] += dy;
-                target.dirty();
-            }
-
-            eventTool.stop(e.event);
-            this.trigger('pan', dx, dy, oldX, oldY, x, y);
-        }
-    }
-
-    function mouseup(e) {
-        this._dragging = false;
-    }
-
-    function mousewheel(e) {
-        // wheelDelta maybe -0 in chrome mac.
-        if (e.wheelDelta === 0) {
-            return;
-        }
-        // 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);
-    }
-
-    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);
-    }
-
-    function zoom(e, zoomDelta, zoomX, zoomY) {
-        if (this.containsPoint && this.containsPoint(zoomX, zoomY)) {
-            // When mouse is out of roamController rect,
-            // default befavoius should be be disabled, otherwise
-            // page sliding is disabled, contrary to expectation.
-            eventTool.stop(e.event);
-
-            var target = this.target;
-            var zoomLimit = this.zoomLimit;
-
-            if (target) {
-                var pos = target.position;
-                var scale = target.scale;
-
-                var newZoom = this.zoom = this.zoom || 1;
-                newZoom *= zoomDelta;
-                if (zoomLimit) {
-                    var zoomMin = zoomLimit.min || 0;
-                    var zoomMax = zoomLimit.max || Infinity;
-                    newZoom = Math.max(
-                        Math.min(zoomMax, newZoom),
-                        zoomMin
-                    );
-                }
-                var zoomScale = newZoom / this.zoom;
-                this.zoom = newZoom;
-                // Keep the mouse center when scaling
-                pos[0] -= (zoomX - pos[0]) * (zoomScale - 1);
-                pos[1] -= (zoomY - pos[1]) * (zoomScale - 1);
-                scale[0] *= zoomScale;
-                scale[1] *= zoomScale;
-
-                target.dirty();
-            }
-
-            this.trigger('zoom', zoomDelta, zoomX, zoomY);
-        }
-    }
-
     /**
      * @alias module:echarts/component/helper/RoamController
      * @constructor
      * @mixin {module:zrender/mixin/Eventful}
      *
      * @param {module:zrender/zrender~ZRender} zr
-     * @param {module:zrender/Element} target
      */
-    function RoamController(zr, target) {
-
-        /**
-         * @type {module:zrender/Element}
-         */
-        this.target = target;
+    function RoamController(zr) {
 
         /**
          * @type {Function}
          */
         this.containsPoint;
 
-        /**
-         * { min: 1, max: 2 }
-         * @type {Object}
-         */
-        this.zoomLimit;
-
-        /**
-         * @type {number}
-         */
-        this.zoom;
         /**
          * @type {module:zrender}
          */
@@ -229,5 +95,86 @@ define(function (require) {
 
     zrUtil.mixin(RoamController, Eventful);
 
+
+    function mousedown(e) {
+        if (e.target && e.target.draggable) {
+            return;
+        }
+
+        var x = e.offsetX;
+        var y = e.offsetY;
+
+        if (this.containsPoint && this.containsPoint(x, y)) {
+            this._x = x;
+            this._y = y;
+            this._dragging = true;
+        }
+    }
+
+    function mousemove(e) {
+        if (!this._dragging) {
+            return;
+        }
+
+        eventTool.stop(e.event);
+
+        if (e.gestureEvent !== 'pinch') {
+
+            if (interactionMutex.isTaken(this._zr, 'globalPan')) {
+                return;
+            }
+
+            var x = e.offsetX;
+            var y = e.offsetY;
+
+            var oldX = this._x;
+            var oldY = this._y;
+
+            var dx = x - oldX;
+            var dy = y - oldY;
+
+            this._x = x;
+            this._y = y;
+
+            eventTool.stop(e.event);
+            this.trigger('pan', dx, dy, oldX, oldY, x, y);
+        }
+    }
+
+    function mouseup(e) {
+        this._dragging = false;
+    }
+
+    function mousewheel(e) {
+        // wheelDelta maybe -0 in chrome mac.
+        if (e.wheelDelta === 0) {
+            return;
+        }
+        // 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);
+    }
+
+    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);
+    }
+
+    function zoom(e, zoomDelta, zoomX, zoomY) {
+        if (this.containsPoint && this.containsPoint(zoomX, zoomY)) {
+            // When mouse is out of roamController rect,
+            // default befavoius should be be disabled, otherwise
+            // page sliding is disabled, contrary to expectation.
+            eventTool.stop(e.event);
+
+            this.trigger('zoom', zoomDelta, zoomX, zoomY);
+        }
+    }
+
     return RoamController;
 });
\ No newline at end of file