You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2021/03/09 17:58:20 UTC
[echarts] 02/06: fix: [geo] clean code and add comment and make
interface better.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/geo-svg
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 6a22cc65dd0a8553927ca0d2af4c123117fa8c59
Author: 100pah <su...@gmail.com>
AuthorDate: Wed Mar 3 21:00:23 2021 +0800
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 617712a..e1a8f47 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 17bafc8..6a72a3f 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<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
+ }
};
}
diff --git a/src/coord/geo/Geo.ts b/src/coord/geo/Geo.ts
index 85a3954..516a971 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 16c14bb..3705304 100644
--- a/src/coord/geo/GeoModel.ts
+++ b/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
diff --git a/src/coord/geo/geoCreator.ts b/src/coord/geo/geoCreator.ts
index 47ad2cf..fad9400 100644
--- a/src/coord/geo/geoCreator.ts
+++ b/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, {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org