Better geo roam

src/action/geoRoam.js

@@ -30,11 +30,13 @@ define(function (require) {
                 }
 
                 var roamDetailModel = componentModel.getModel('roamDetail');
-                if (dx != null && dy != null) {
-                    var mapScale = geo.mapScale;
+                var panX = roamDetailModel.get('x') || 0;
+                var panY = roamDetailModel.get('y') || 0;
 
-                    var panX = (roamDetailModel.get('x') || 0) + dx / mapScale[0];
-                    var panY = (roamDetailModel.get('y') || 0) + dy / mapScale[1];
+                if (dx != null && dy != null) {
+                    // FIXME Must divide mapScale ?
+                    panX += dx;
+                    panY += dy;
 
                     componentModel.setRoamPan
                         && componentModel.setRoamPan(panX, panY);
@@ -45,10 +47,19 @@ define(function (require) {
                 if (zoom != null && componentModel.setRoamZoom) {
                     var previousZoom = roamDetailModel.get('zoom') || 1;
 
-                    zoom *= previousZoom;
-                    componentModel.setRoamZoom(zoom);
+                    var fixX = (payload.originX - panX) * (zoom - 1);
+                    var fixY = (payload.originY - panY) * (zoom - 1);
+
+                    panX -= fixX;
+                    panY -= fixY;
+
+                    geo && geo.setPan(panX, panY);
+                    componentModel.setRoamPan
+                        && componentModel.setRoamPan(panX, panY);
+
+                    geo && geo.setZoom(zoom * previousZoom);
+                    componentModel.setRoamZoom(zoom * previousZoom);
 
-                    geo && geo.setZoom(zoom);
                 }
             }
         });

src/chart/map/MapView.js

@@ -16,7 +16,6 @@ define(function (require) {
 
         render: function (mapModel, ecModel, api) {
             var group = this.group;
-            var geo = mapModel.coordinateSystem;
             group.removeAll();
 
             mapModel.needsDrawMap &&
@@ -25,6 +24,11 @@ define(function (require) {
             mapModel.get('showLegendSymbol') && ecModel.getComponent('legend')
                 && this._renderSymbols(mapModel, ecModel, api);
 
+            this._updateController(mapModel, ecModel, api);
+        },
+
+        _updateController: function (mapModel, ecModel, api) {
+            var geo = mapModel.coordinateSystem;
             var controller = this._controller;
             controller.off('pan')
                 .on('pan', function (dx, dy) {
@@ -36,6 +40,19 @@ define(function (require) {
                         dy: dy
                     });
                 });
+            controller.off('zoom')
+                .on('zoom', function (wheelDelta, mouseX, mouseY) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        // component: 'series',
+                        name: mapModel.name,
+                        zoom: wheelDelta,
+                        originX: mouseX,
+                        originY: mouseY
+                    });
+
+                    // TODO Update lineWidth
+                });
 
             controller.rect = geo.getViewBox();
         },

src/component/dataRange/DataRangeModel.js

@@ -61,7 +61,7 @@ define(function(require) {
             inverse: false,
 
             seriesIndex: null,          // 所控制的series indices，默认所有有value的series.
-            splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变 (contimous)
+            splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变 (continous)
             backgroundColor: 'rgba(0,0,0,0)',
             borderColor: '#ccc',       // 值域边框颜色
             contentColor: '#5793f3',

src/component/geo/GeoView.js

@@ -71,8 +71,14 @@ define(function (require) {
                 mapGroup.add(regionGroup);
             });
 
+            this._updateController(geoModel, ecModel, api);
+        },
+
+        _updateController: function (geoModel, ecModel, api) {
+            var geo = geoModel.coordinateSystem;
             var controller = this._controller;
             controller.off('pan')
+                .off('zoom')
                 .on('pan', function (dx, dy) {
                     api.dispatch({
                         type: 'geoRoam',
@@ -81,9 +87,22 @@ define(function (require) {
                         dx: dx,
                         dy: dy
                     });
+                })
+                .on('zoom', function (wheelDelta, mouseX, mouseY) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        component: 'geo',
+                        name: geoModel.name,
+                        zoom: wheelDelta,
+                        originX: mouseX,
+                        originY: mouseY
+                    });
+
+                    // TODO Update lineWidth
                 });
 
             controller.rect = geo.getViewBox();
-        }
+        },
+
     });
 });
\ No newline at end of file

src/component/helper/RoamController.js

@@ -29,7 +29,6 @@ define(function (require) {
 
             if (target) {
                 var pos = target.position;
-                var scale = target.scale;
                 pos[0] += dx;
                 pos[1] += dy;
                 target.dirty();
@@ -44,11 +43,35 @@ define(function (require) {
     }
 
     function mousewheel(e) {
-        var x = e.offsetX;
-        var y = e.offsetY;
+        var mouseX = e.offsetX;
+        var mouseY = e.offsetY;
         var rect = this.rect;
-        if (rect && rect.contain(x, y)) {
+        var wheelDelta = e.wheelDelta > 0 ? 1.1 : 1 / 1.1;
+        // console.log(wheelDelta, e.wheelDelta);
+        if (rect && rect.contain(mouseX, mouseY)) {
+
+            var target = this.target;
+
+            if (target) {
+                var pos = target.position;
+                var scale = target.scale;
+
+                var newZoom = this._zoom = this._zoom || 1;
+                newZoom *= wheelDelta;
+                // newZoom = Math.max(
+                //     Math.min(target.maxZoom, newZoom),
+                //     target.minZoom
+                // );
+                var zoomScale = newZoom / this._zoom;
+                this._zoom = newZoom;
+                // Keep the mouse center when scaling
+                pos[0] -= (mouseX - pos[0]) * (zoomScale - 1);
+                pos[1] -= (mouseY - pos[1]) * (zoomScale - 1);
+                scale[0] *= zoomScale;
+                scale[1] *= zoomScale;
+            }
 
+            this.trigger('zoom', wheelDelta, mouseX, mouseY);
         }
     }
 

src/coord/geo/Geo.js

@@ -2,6 +2,7 @@ define(function (require) {
 
     var parseGeoJson = require('./parseGeoJson');
     var vector = require('zrender/core/vector');
+    var matrix = require('zrender/core/matrix');
 
     var Transformable = require('zrender/mixin/Transformable');
     var zrUtil = require('zrender/core/util');
@@ -10,6 +11,13 @@ define(function (require) {
 
     var v2Copy = vector.copy;
 
+
+    // Dummy transform node
+    function TransformDummy() {
+        Transformable.call(this);
+    }
+    zrUtil.mixin(TransformDummy, Transformable);
+
     function Geo(name, geoJson) {
 
         this.name = name;
@@ -35,16 +43,10 @@ define(function (require) {
          */
         this.mapScale = [1, 1];
 
-        /**
-         * @param Array.<number>
-         * @private
-         */
-        this._pan = [0, 0];
-        /**
-         * @param number
-         * @private
-         */
-        this._zoom = 1;
+
+        this._roamTransform = new TransformDummy();
+
+        this._mapTransform = new TransformDummy();
     };
 
     Geo.prototype = {
@@ -122,11 +124,12 @@ define(function (require) {
             this.decomposeTransform();
 
             var scale = this.scale;
+            var mapTransform = this._mapTransform
 
             scale[1] = -scale[1];
 
-            v2Copy(this.mapPosition, this.position);
-            v2Copy(this.mapScale, scale);
+            v2Copy(mapTransform.position, this.position);
+            v2Copy(mapTransform.scale, scale);
 
             this._updateTransform();
         },
@@ -146,9 +149,8 @@ define(function (require) {
          * @param {number} y
          */
         setPan: function (x, y) {
-            var pan = this._pan;
-            pan[0] = x;
-            pan[1] = y;
+
+            this._roamTransform.position = [x, y];
 
             this._updateTransform();
         },
@@ -157,7 +159,7 @@ define(function (require) {
          * @param {number} zoom
          */
         setZoom: function (zoom) {
-            this._zoom = zoom;
+            this._roamTransform.scale = [zoom, zoom];
 
             this._updateTransform();
         },
@@ -167,17 +169,21 @@ define(function (require) {
          * @private
          */
         _updateTransform: function () {
-            var mapScale = this.mapScale;
+            var roamTransform = this._roamTransform;
+            var mapTransform = this._mapTransform;
+            var scale = this.scale;
+
+            mapTransform.parent = roamTransform;
+            roamTransform.updateTransform();
+            mapTransform.updateTransform();
 
-            var pan = this._pan;
+            mapTransform.transform && matrix.copy(this.transform, mapTransform.transform);
+
+            this.decomposeTransform();
+
+            scale[1] = -scale[1];
 
             // Update transform position
-            pan = [
-                pan[0] * mapScale[0],
-                pan[1] * mapScale[1]
-            ];
-            vector.add(this.position, this.mapPosition, pan);
-            vector.scale(this.scale, mapScale, this._zoom);
 
             this.updateTransform();
         },