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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
