fix: [geo] clean code and add comment and make interface better.

src/component/helper/MapDraw.ts

@@ -35,7 +35,6 @@ import MapView from '../../chart/map/MapView';
 import Region from '../../coord/geo/Region';
 import Geo from '../../coord/geo/Geo';
 import Model from '../../model/Model';
-import Transformable from 'zrender/src/core/Transformable';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getECData } from '../../util/innerStore';
 import { createOrUpdatePatternFromDecal } from '../../util/decal';
@@ -61,7 +60,6 @@ class MapDraw {
 
     private uid: string;
 
-    // @ts-ignore FIXME:TS
     private _controller: RoamController;
 
     private _controllerHost: {
@@ -82,8 +80,6 @@ class MapDraw {
 
     private _mapName: string;
 
-    private _initialized: string;
-
     private _regionsGroup: RegionsGroup;
 
     private _backgroundGroup: graphic.Group;
@@ -92,7 +88,6 @@ class MapDraw {
     constructor(api: ExtensionAPI) {
         const group = new graphic.Group();
         this.uid = getUID('ec_map_draw');
-        // @ts-ignore FIXME:TS
         this._controller = new RoamController(api.getZr());
         this._controllerHost = { target: group };
         this.group = group;
@@ -128,29 +123,21 @@ class MapDraw {
         const group = this.group;
 
         const transformInfo = geo.getTransformInfo();
+        const transformInfoRaw = transformInfo.raw;
+        const transformInfoRoam = transformInfo.roam;
 
         // No animation when first draw or in action
         const isFirstDraw = !regionsGroup.childAt(0) || payload;
-        let targetScaleX: number;
-        let targetScaleY: number;
+
         if (isFirstDraw) {
-            group.transform = transformInfo.roamTransform;
-            group.decomposeTransform();
+            group.x = transformInfoRoam.x;
+            group.y = transformInfoRoam.y;
+            group.scaleX = transformInfoRoam.scaleX;
+            group.scaleY = transformInfoRoam.scaleY;
             group.dirty();
         }
         else {
-            const target = new Transformable();
-            target.transform = transformInfo.roamTransform;
-            target.decomposeTransform();
-            const props = {
-                scaleX: target.scaleX,
-                scaleY: target.scaleY,
-                x: target.x,
-                y: target.y
-            };
-            targetScaleX = target.scaleX;
-            targetScaleY = target.scaleY;
-            graphic.updateProps(group, props, mapOrGeoModel);
+            graphic.updateProps(group, transformInfoRoam, mapOrGeoModel);
         }
 
         regionsGroup.removeAll();
@@ -216,14 +203,10 @@ class MapDraw {
                 }
             }
 
-            const sx = transformInfo.rawScaleX;
-            const sy = transformInfo.rawScaleY;
-            const offsetX = transformInfo.rawX;
-            const offsetY = transformInfo.rawY;
             const transformPoint = function (point: number[]): number[] {
                 return [
-                    point[0] * sx + offsetX,
-                    point[1] * sy + offsetY
+                    point[0] * transformInfoRaw.scaleX + transformInfoRaw.x,
+                    point[1] * transformInfoRaw.scaleY + transformInfoRaw.y
                 ];
             };
 
@@ -333,8 +316,8 @@ class MapDraw {
                 if (!isFirstDraw) {
                     // Text animation
                     graphic.updateProps(textEl, {
-                        scaleX: 1 / targetScaleX,
-                        scaleY: 1 / targetScaleY
+                        scaleX: 1 / transformInfoRoam.scaleX,
+                        scaleY: 1 / transformInfoRoam.scaleY
                     }, mapOrGeoModel);
                 }
             }

src/coord/View.ts

@@ -22,7 +22,6 @@
  * Mapping given x, y to transformd view x, y
  */
 
-import * as zrUtil from 'zrender/src/core/util';
 import * as vector from 'zrender/src/core/vector';
 import * as matrix from 'zrender/src/core/matrix';
 import BoundingRect from 'zrender/src/core/BoundingRect';
@@ -47,14 +46,37 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
         min?: number;
     };
 
+    /**
+     * Represents the transform brought by roam/zoom.
+     */
     private _roamTransformable = new Transformable();
+    /**
+     * Represents the transform from `View['_rect']` to `View['_viewRect']`.
+     */
     protected _rawTransformable = new Transformable();
+    private _rawTransform: matrix.MatrixArray;
 
+    /**
+     * This is a user specified point on the source, which will be
+     * located to the center of the `View['_viewRect']`.
+     * The unit this the same as `View['_rect']`.
+     */
     private _center: number[];
     private _zoom: number;
-    protected _rect: BoundingRect;
+
+    /**
+     * The rect of the source, where the measure is used by "data" and "center".
+     * Has nothing to do with roam/zoom.
+     * The unit is defined by the source. For example,
+     * for geo source the unit is lat/lng,
+     * for SVG source the unit is the same as the width/height defined in SVG.
+     */
+    private _rect: BoundingRect;
+    /**
+     * The visible rect on the canvas. Has nothing to do with roam/zoom.
+     * The unit of `View['_viewRect']` is pixel of the canvas.
+     */
     private _viewRect: BoundingRect;
-    private _rawTransform: matrix.MatrixArray;
 
 
     constructor(name?: string) {
@@ -62,7 +84,6 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
         this.name = name;
     }
 
-    // PENDING to getRect
     setBoundingRect(x: number, y: number, width: number, height: number): BoundingRect {
         this._rect = new BoundingRect(x, y, width, height);
         return this._rect;
@@ -71,7 +92,6 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     /**
      * @return {module:zrender/core/BoundingRect}
      */
-    // PENDING to getRect
     getBoundingRect(): BoundingRect {
         return this._rect;
     }
@@ -92,8 +112,10 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
             new BoundingRect(x, y, width, height)
         );
 
-        // Hint: only works before `this._updateTransform` firstly called.
+        const rawParent = rawTransform.parent;
+        rawTransform.parent = null;
         rawTransform.decomposeTransform();
+        rawTransform.parent = rawParent;
 
         this._updateTransform();
     }
@@ -175,7 +197,8 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     }
 
     /**
-     * Update transform from roam and mapLocation
+     * Update transform props on `this` based on the current
+     * `this._roamTransformable` and `this._rawTransformable`.
      */
     protected _updateTransform(): void {
         const roamTransformable = this._roamTransformable;
@@ -195,15 +218,25 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
         this.decomposeTransform();
     }
 
-    getTransformInfo() {
-        const roamTransform = this._roamTransformable.transform;
+    getTransformInfo(): {
+        roam: Pick<Transformable, 'x' | 'y' | 'scaleX' | 'scaleY'>
+        raw: Pick<Transformable, 'x' | 'y' | 'scaleX' | 'scaleY'>
+    } {
+        const roamTransformable = this._roamTransformable;
         const rawTransformable = this._rawTransformable;
         return {
-            roamTransform: roamTransform ? zrUtil.slice(roamTransform) : matrix.create(),
-            rawScaleX: rawTransformable.scaleX,
-            rawScaleY: rawTransformable.scaleY,
-            rawX: rawTransformable.x,
-            rawY: rawTransformable.y
+            roam: {
+                x: roamTransformable.x,
+                y: roamTransformable.y,
+                scaleX: roamTransformable.scaleX,
+                scaleY: roamTransformable.scaleY
+            },
+            raw: {
+                x: rawTransformable.x,
+                y: rawTransformable.y,
+                scaleX: rawTransformable.scaleX,
+                scaleY: rawTransformable.scaleY
+            }
         };
     }
 

src/coord/geo/Geo.ts

@@ -66,7 +66,9 @@ class Geo extends View {
         this._regionsMap = source.regionsMap;
         this._invertLongitute = invertLongitute == null ? true : invertLongitute;
         this.regions = source.regions;
-        this._rect = source.boundingRect;
+
+        const boundingRect = source.boundingRect;
+        this.setBoundingRect(boundingRect.x, boundingRect.y, boundingRect.width, boundingRect.height);
     }
 
     /**
@@ -99,15 +101,15 @@ class Geo extends View {
             new BoundingRect(x, y, width, height)
         );
 
-        // Hint: only works before `this._updateTransform` firstly called.
+        const rawParent = rawTransformable.parent;
+        rawTransformable.parent = null;
         rawTransformable.decomposeTransform();
+        rawTransformable.parent = rawParent;
 
         if (invertLongitute) {
             rawTransformable.scaleY = -rawTransformable.scaleY;
         }
 
-        rawTransformable.updateTransform();
-
         this._updateTransform();
     }
 
@@ -138,10 +140,6 @@ class Geo extends View {
         return this._nameCoordMap.get(name);
     }
 
-    getBoundingRect(): BoundingRect {
-        return this._rect;
-    }
-
     dataToPoint(data: number[], noRoam?: boolean, out?: number[]): number[] {
         if (typeof data === 'string') {
             // Map area name to geoCoord

src/coord/geo/GeoModel.ts

@@ -128,8 +128,9 @@ class GeoModel extends ComponentModel<GeoOption> {
 
         top: 'center',
 
-        // If svg used, aspectScale is 1 by default.
-        // aspectScale: 0.75,
+        // Default value:
+        // for SVG source: 1,
+        // for geoJSON source: 0.75.
         aspectScale: null,
 
         ///// Layout with center and size

src/coord/geo/geoCreator.ts

@@ -105,7 +105,6 @@ function resizeGeo(this: Geo, geoModel: ComponentModel<GeoOption | MapSeriesOpti
         // Use left/top/width/height
         const boxLayoutOption = geoModel.getBoxLayoutParams() as Parameters<typeof layout.getLayoutRect>[0];
 
-        // 0.75 rate
         boxLayoutOption.aspect = aspect;
 
         viewRect = layout.getLayoutRect(boxLayoutOption, {