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:22 UTC
[echarts] 04/06: fix: [geo] (1) label scale implementation change:
user afterUpdate rather than / parentScale. (2) some refactor and clean
code.
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 6b5a0e505171e605a80688b95097b54646f38d15
Author: 100pah <su...@gmail.com>
AuthorDate: Mon Mar 8 17:33:57 2021 +0800
fix: [geo]
(1) label scale implementation change: user afterUpdate rather than / parentScale.
(2) some refactor and clean code.
---
src/component/helper/MapDraw.ts | 47 ++++++++++++++++-------------------------
src/coord/geo/GeoSVGResource.ts | 37 +++++++++++++++++++-------------
2 files changed, 40 insertions(+), 44 deletions(-)
diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index 79bc1cc..1ca9ad9 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -32,7 +32,6 @@ import GlobalModel from '../../model/Global';
import { Payload, ECElement } from '../../util/types';
import GeoView from '../geo/GeoView';
import MapView from '../../chart/map/MapView';
-import Region from '../../coord/geo/Region';
import Geo from '../../coord/geo/Geo';
import Model from '../../model/Model';
import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
@@ -43,7 +42,6 @@ import { GeoSVGResource } from '../../coord/geo/GeoSVGResource';
interface RegionsGroup extends graphic.Group {
- __regions: Region[]
}
function getFixedItemStyle(model: Model<GeoItemStyleOption>) {
@@ -152,7 +150,9 @@ class MapDraw {
&& data.getVisual('visualMeta')
&& data.getVisual('visualMeta').length > 0;
+
zrUtil.each(geo.regions, function (region) {
+
// Consider in GeoJson properties.name may be duplicated, for example,
// there is multiple region named "United Kindom" or "France" (so many
// colonies). And it is not appropriate to merge them in geo, which
@@ -286,15 +286,10 @@ class MapDraw {
const textEl = new graphic.Text({
x: centerPt[0],
y: centerPt[1],
- // FIXME
- // label rotation is not support yet in geo or regions of series-map
- // that has no data. The rotation will be effected by this `scale`.
- // So needed to change to RectText?
- scaleX: 1 / group.scaleX,
- scaleY: 1 / group.scaleY,
z2: 10,
silent: true
});
+ textEl.afterUpdate = labelTextAfterUpdate;
setLabelStyle<typeof query>(
textEl, getLabelStatesModels(regionModel),
@@ -316,13 +311,6 @@ class MapDraw {
(compoundPath as ECElement).disableLabelAnimation = true;
- if (!isFirstDraw) {
- // Text animation
- graphic.updateProps(textEl, {
- scaleX: 1 / transformInfoRoam.scaleX,
- scaleY: 1 / transformInfoRoam.scaleY
- }, mapOrGeoModel);
- }
}
// setItemGraphicEl, setHoverStyle after all polygons and labels
@@ -342,9 +330,6 @@ class MapDraw {
};
}
- const groupRegions = regionGroup.__regions || (regionGroup.__regions = []);
- groupRegions.push(region);
-
// @ts-ignore FIXME:TS fix the "compatible with each other"?
regionGroup.highDownSilentOnTouch = !!mapOrGeoModel.get('selectedMode');
enableHoverEmphasis(regionGroup, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
@@ -387,8 +372,8 @@ class MapDraw {
}
const resource = geoSourceManager.getGeoResource(mapName);
if (resource && resource.type === 'svg') {
- const root = (resource as GeoSVGResource).useGraphic(this.uid);
- this._svgGroup.add(root);
+ const svgGraphic = (resource as GeoSVGResource).useGraphic(this.uid);
+ this._svgGroup.add(svgGraphic.root);
}
}
@@ -450,15 +435,6 @@ class MapDraw {
originY: e.originY
}));
- const group = this.group;
- this._regionsGroup.traverse(function (el) {
- const textContent = el.getTextContent();
- if (textContent) {
- textContent.scaleX = 1 / group.scaleX;
- textContent.scaleY = 1 / group.scaleY;
- textContent.markRedraw();
- }
- });
}, this);
controller.setPointerChecker(function (e, x, y) {
@@ -495,4 +471,17 @@ class MapDraw {
};
+function labelTextAfterUpdate(this: graphic.Text) {
+ // Make the label text do not scale but perform translate
+ // based on its host el.
+ const m = this.transform;
+ const scaleX = Math.sqrt(m[0] * m[0] + m[1] * m[1]);
+ const scaleY = Math.sqrt(m[2] * m[2] + m[3] * m[3]);
+
+ m[0] /= scaleX;
+ m[1] /= scaleX;
+ m[2] /= scaleY;
+ m[3] /= scaleY;
+}
+
export default MapDraw;
diff --git a/src/coord/geo/GeoSVGResource.ts b/src/coord/geo/GeoSVGResource.ts
index 14a29c3..0a3a4ec 100644
--- a/src/coord/geo/GeoSVGResource.ts
+++ b/src/coord/geo/GeoSVGResource.ts
@@ -24,18 +24,23 @@ import {assert, createHashMap, HashMap} from 'zrender/src/core/util';
import BoundingRect from 'zrender/src/core/BoundingRect';
import { GeoResource, GeoSVGSourceInput } from './geoTypes';
import { parseXML } from 'zrender/src/tool/parseXML';
+import Element from 'zrender/src/Element';
+export interface GeoSVGGraphic {
+ root: Group;
+ namedElements: Element[];
+}
export class GeoSVGResource implements GeoResource {
readonly type = 'svg';
private _mapName: string;
private _parsedXML: SVGElement;
- private _rootForRect: Group;
+ private _rootForRect: GeoSVGGraphic;
private _boundingRect: BoundingRect;
// key: hostKey, value: root
- private _usedRootMap: HashMap<Group> = createHashMap();
- private _freedRoots: Group[] = [];
+ private _usedRootMap: HashMap<GeoSVGGraphic> = createHashMap();
+ private _freedRoots: GeoSVGGraphic[] = [];
constructor(
mapName: string,
@@ -62,10 +67,10 @@ export class GeoSVGResource implements GeoResource {
const graphic = buildGraphic(this._parsedXML);
- this._rootForRect = graphic.root;
+ this._rootForRect = graphic;
this._boundingRect = graphic.boundingRect;
- this._freedRoots.push(graphic.root);
+ this._freedRoots.push(graphic);
return { boundingRect: graphic.boundingRect };
}
@@ -78,26 +83,26 @@ export class GeoSVGResource implements GeoResource {
// and it is called without view info.
// So we maintain graphic elements in this module, and enables `view` to use/return these
// graphics from/to the pool with it's uid.
- useGraphic(hostKey: string): Group {
+ useGraphic(hostKey: string): GeoSVGGraphic {
const usedRootMap = this._usedRootMap;
- let root = usedRootMap.get(hostKey);
- if (root) {
- return root;
+ let svgGraphic = usedRootMap.get(hostKey);
+ if (svgGraphic) {
+ return svgGraphic;
}
- root = this._freedRoots.pop() || buildGraphic(this._parsedXML, this._boundingRect).root;
+ svgGraphic = this._freedRoots.pop() || buildGraphic(this._parsedXML, this._boundingRect);
- return usedRootMap.set(hostKey, root);
+ return usedRootMap.set(hostKey, svgGraphic);
}
freeGraphic(hostKey: string): void {
const usedRootMap = this._usedRootMap;
- const root = usedRootMap.get(hostKey);
- if (root) {
+ const svgGraphic = usedRootMap.get(hostKey);
+ if (svgGraphic) {
usedRootMap.removeKey(hostKey);
- this._freedRoots.push(root);
+ this._freedRoots.push(svgGraphic);
}
}
@@ -110,6 +115,7 @@ function buildGraphic(
): {
root: Group;
boundingRect: BoundingRect;
+ namedElements: Element[]
} {
let result;
let root;
@@ -161,6 +167,7 @@ function buildGraphic(
return {
root: root,
- boundingRect: boundingRect
+ boundingRect: boundingRect,
+ namedElements: result.namedElements
};
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org