Improve graph roam

src/action/geoRoam.js

 define(function (require) {
 
     var zrUtil = require('zrender/core/util');
+    var roamHelper = require('./roamHelper');
 
-    var echarts = require('../../echarts');
+    var echarts = require('../echarts');
     var actionInfo = {
         type: 'geoRoam',
         event: 'geoRoam',
@@ -24,58 +25,30 @@ define(function (require) {
 
         ecModel.eachComponent(componentType, function (componentModel) {
             if (componentModel.name === payload.name) {
-                var dx = payload.dx;
-                var dy = payload.dy;
-                var zoom = payload.zoom;
                 var geo = componentModel.coordinateSystem;
                 if (geo.type !== 'geo') {
                     return;
                 }
 
                 var roamDetailModel = componentModel.getModel('roamDetail');
-                var panX = roamDetailModel.get('x') || 0;
-                var panY = roamDetailModel.get('y') || 0;
-                var previousZoom = roamDetailModel.get('zoom') || 1;
-
-                if (dx != null && dy != null) {
-                    // FIXME Must divide mapScale ?
-                    panX += dx;
-                    panY += dy;
+                var res = roamHelper.calcPanAndZoom(roamDetailModel, payload);
 
                 componentModel.setRoamPan
-                        && componentModel.setRoamPan(panX, panY);
-
-                    geo && geo.setPan(panX, panY);
-
-                }
-                if (zoom != null) {
-                    var fixX = (payload.originX - panX) * (zoom - 1);
-                    var fixY = (payload.originY - panY) * (zoom - 1);
+                    && componentModel.setRoamPan(res.x, res.y);
 
-                    panX -= fixX;
-                    panY -= fixY;
-
-                    geo && geo.setPan(panX, panY);
-
-                    componentModel.setRoamPan
-                        && componentModel.setRoamPan(panX, panY);
-
-                    geo && geo.setZoom(zoom * previousZoom);
                 componentModel.setRoamZoom
-                        && componentModel.setRoamZoom(zoom * previousZoom);
-                }
+                    && componentModel.setRoamZoom(res.zoom);
+
+                geo && geo.setPan(res.x, res.y);
+                geo && geo.setZoom(res.zoom);
 
                 // All map series with same `map` use the same geo coordinate system
                 // So the roamDetail must be in sync. Include the series not selected by legend
                 if (componentType === 'series') {
                     zrUtil.each(componentModel.seriesGroup, function (seriesModel) {
-                        if (dx != null && dy != null) {
-                            seriesModel.setRoamPan(panX, panY);
-                        }
-                        if (zoom != null) {
-                            seriesModel.setRoamZoom(zoom * previousZoom);
-                        }
-                    })
+                        seriesModel.setRoamPan(res.x, res.y);
+                        seriesModel.setRoamZoom(res.zoom);
+                    });
                 }
             }
         });

src/action/roamHelper.js

+define(function (require) {
+
+    var roamHelper = {};
+
+    /**
+     * Calculate pan and zoom which from roamDetail model
+     * @param  {module:echarts/model/Model} roamDetailModel
+     * @param  {Object} payload
+     */
+    roamHelper.calcPanAndZoom = function (roamDetailModel, payload) {
+        var dx = payload.dx;
+        var dy = payload.dy;
+        var zoom = payload.zoom;
+
+        var panX = roamDetailModel.get('x') || 0;
+        var panY = roamDetailModel.get('y') || 0;
+
+        var previousZoom = roamDetailModel.get('zoom') || 1;  
+
+        if (dx != null && dy != null) {
+            panX += dx;
+            panY += dy;
+        }
+        if (zoom != null) {
+            var fixX = (payload.originX - panX) * (zoom - 1);
+            var fixY = (payload.originY - panY) * (zoom - 1);
+
+            panX -= fixX;
+            panY -= fixY;
+        }
+
+        return {
+            x: panX,
+            y: panY,
+            zoom: (zoom || 1) * previousZoom
+        };
+    };
+
+    return roamHelper;
+});
\ No newline at end of file

src/chart/graph.js

@@ -6,6 +6,8 @@ define(function (require) {
     require('./graph/GraphSeries');
     require('./graph/GraphView');
 
+    require('./graph/roamAction');
+
     echarts.registerProcessor('filter', require('./graph/categoryFilter'));
 
     echarts.registerVisualCoding('chart', zrUtil.curry(

src/chart/graph/GraphSeries.js

@@ -8,12 +8,14 @@ define(function (require) {
 
     var createGraphFromNodeEdge = require('../helper/createGraphFromNodeEdge');
 
+    var seriesModelProto = SeriesModel.prototype;
+
     return SeriesModel.extend({
 
         type: 'series.graph',
 
         init: function (option) {
-            SeriesModel.prototype.init.apply(this, arguments);
+            seriesModelProto.init.apply(this, arguments);
 
             this._udpateCategoriesData();
 
@@ -24,7 +26,7 @@ define(function (require) {
         },
 
         mergeOption: function (option) {
-            SeriesModel.prototype.mergeOption.apply(this, arguments);
+            seriesModelProto.mergeOption.apply(this, arguments);
 
             this._udpateCategoriesData();
         },
@@ -76,7 +78,13 @@ define(function (require) {
             symbol: 'circle',
             symbolSize: 10,
 
-            roam: true,
+            // roam: false,
+
+            roamDetail: {
+                x: 0,
+                y: 0,
+                zoom: 1
+            },
 
             // Symbol size scale ratio in roam
             nodeScaleRatio: 0.6,
@@ -104,10 +112,8 @@ define(function (require) {
             },
 
             itemStyle: {
-                normal: {
-                },
-                emphasis: {
-                }
+                normal: {},
+                emphasis: {}
             },
 
             lineStyle: {
@@ -117,8 +123,27 @@ define(function (require) {
                     curveness: 0,
                     opacity: 0.5
                 },
-                emphasis: {
+                emphasis: {}
             }
+        },
+
+        /**
+         * @param {number} zoom
+         */
+        setRoamZoom: function (zoom) {
+            var roamDetail = this.option.roamDetail;
+            roamDetail && (roamDetail.zoom = zoom);
+        },
+
+        /**
+         * @param {number} x
+         * @param {number} y
+         */
+        setRoamPan: function (x, y) {
+            var roamDetail = this.option.roamDetail;
+            if (roamDetail) {
+                roamDetail.x = x;
+                roamDetail.y = y;
             }
         }
    });

src/chart/graph/GraphView.js

@@ -13,13 +13,14 @@ define(function (require) {
             var lineDraw = new LineDraw();
             var group = this.group;
 
+            var controller = new RoamController(api.getZr(), group);
+
             group.add(symbolDraw.group);
             group.add(lineDraw.group);
 
             this._symbolDraw = symbolDraw;
             this._lineDraw = lineDraw;
-
-            this._controller = new RoamController(api.getZr(), group);
+            this._controller = controller;
         },
 
         render: function (seriesModel, ecModel, api) {
@@ -68,7 +69,28 @@ define(function (require) {
 
             controller.disable();
             seriesModel.get('roam') && controller.enable();
-            controller.on('zoom', this._updateNodeAndLinkScale, this);
+
+            controller
+                .off('pan')
+                .off('zoom')
+                .on('pan', function (dx, dy) {
+                    api.dispatch({
+                        name: seriesModel.name,
+                        type: 'graphRoam',
+                        dx: dx,
+                        dy: dy
+                    });
+                })
+                .on('zoom', function (zoom, mouseX, mouseY) {
+                    api.dispatch({
+                        name: seriesModel.name,
+                        type: 'graphRoam',
+                        zoom:  zoom,
+                        originX: mouseX,
+                        originY: mouseY
+                    });
+                })
+                .on('zoom', this._updateNodeAndLinkScale, this);
         },
 
         _updateNodeAndLinkScale: function () {

src/chart/graph/roamAction.js

+define(function (require) {
+
+    var echarts = require('../../echarts');
+    var roamHelper = require('../../action/roamHelper');
+
+    var actionInfo = {
+        type: 'graphRoam',
+        event: 'graphRoam',
+        update: 'none'
+    };
+
+    /**
+     * @payload
+     * @property {string} name Series name
+     * @property {number} [dx]
+     * @property {number} [dy]
+     * @property {number} [zoom]
+     * @property {number} [originX]
+     * @property {number} [originY]
+     */
+
+    echarts.registerAction(actionInfo, function (payload, ecModel) {
+        var seriesModel = ecModel.getSeriesByName(payload.name);
+        if (seriesModel) {
+            var coordSys = seriesModel.coordinateSystem;
+
+            var roamDetailModel = seriesModel.getModel('roamDetail');
+            var res = roamHelper.calcPanAndZoom(roamDetailModel, payload);
+
+            seriesModel.setRoamPan
+                && seriesModel.setRoamPan(res.x, res.y);
+
+            seriesModel.setRoamZoom
+                && seriesModel.setRoamZoom(res.zoom);
+
+            coordSys && coordSys.setPan(res.x, res.y);
+            coordSys && coordSys.setZoom(res.zoom);
+        }
+    });
+});
\ No newline at end of file

src/echarts.js

@@ -253,8 +253,9 @@ define(function (require) {
         dispatch: function (payload) {
             var actionWrap = actions[payload.type];
             if (actionWrap) {
+                var updateMethod = actionWrap.actionInfo.update || 'update';
                 actionWrap.action(payload, this._model);
-                this[actionWrap.actionInfo.update || 'update'](payload);
+                updateMethod !== 'none' && this[updateMethod](payload);
             }
         },
 

test/graph.html

@@ -53,7 +53,9 @@
                     chart.setOption({
                         tooltip: {},
                         legend: [{
-                            data: categories.map(function (a) {return a.name})
+                            data: categories.map(function (a) {
+                                return a.name;
+                            })
                         }],
                         dataRange: {
                             max: 100,
@@ -68,6 +70,7 @@
                                 data: graph.nodes,
                                 links: graph.links,
                                 categories: categories,
+                                roam: true,
                                 label: {
                                     normal: {
                                         position: 'right'