From 6a22cc65dd0a8553927ca0d2af4c123117fa8c59 Mon Sep 17 00:00:00 2001 From: 100pah Date: Wed, 3 Mar 2021 21:00:23 +0800 Subject: [PATCH] fix: [geo] clean code and add comment and make interface better. --- src/component/helper/MapDraw.ts | 41 +++++++--------------- src/coord/View.ts | 61 +++++++++++++++++++++++++-------- src/coord/geo/Geo.ts | 14 ++++---- src/coord/geo/GeoModel.ts | 5 +-- src/coord/geo/geoCreator.ts | 1 - 5 files changed, 68 insertions(+), 54 deletions(-) diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts index 617712ab2..e1a8f4713 100644 --- a/src/component/helper/MapDraw.ts +++ b/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); } } diff --git a/src/coord/View.ts b/src/coord/View.ts index 17bafc8fa..6a72a3ff1 100644 --- a/src/coord/View.ts +++ b/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 + raw: Pick + } { + 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 + } }; } diff --git a/src/coord/geo/Geo.ts b/src/coord/geo/Geo.ts index 85a395498..516a97156 100644 --- a/src/coord/geo/Geo.ts +++ b/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 diff --git a/src/coord/geo/GeoModel.ts b/src/coord/geo/GeoModel.ts index 16c14bbc2..3705304b1 100644 --- a/src/coord/geo/GeoModel.ts +++ b/src/coord/geo/GeoModel.ts @@ -128,8 +128,9 @@ class GeoModel extends ComponentModel { 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 diff --git a/src/coord/geo/geoCreator.ts b/src/coord/geo/geoCreator.ts index 47ad2cfa1..fad940084 100644 --- a/src/coord/geo/geoCreator.ts +++ b/src/coord/geo/geoCreator.ts @@ -105,7 +105,6 @@ function resizeGeo(this: Geo, geoModel: ComponentModel[0]; - // 0.75 rate boxLayoutOption.aspect = aspect; viewRect = layout.getLayoutRect(boxLayoutOption, { -- GitLab