You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/04/02 01:14:31 UTC
[echarts] 01/01: fix(label): fix map label won't update it's
position when labelLayout is used
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch fix-map-label
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 68f5c9064741b62f579d1d2783c18ed49152bfc9
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Apr 2 09:13:25 2021 +0800
fix(label): fix map label won't update it's position when labelLayout is used
---
src/component/helper/MapDraw.ts | 63 +++++++++++++++++++++++-----------
src/label/LabelManager.ts | 9 +++++
test/label-layout.html | 25 ++++++++++++++
test/runTest/actions/__meta__.json | 2 +-
test/runTest/actions/label-layout.json | 2 +-
5 files changed, 79 insertions(+), 22 deletions(-)
diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index 617712a..8f4fda9 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -39,7 +39,13 @@ import Transformable from 'zrender/src/core/Transformable';
import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
import { getECData } from '../../util/innerStore';
import { createOrUpdatePatternFromDecal } from '../../util/decal';
+import { makeInner } from '../../util/model';
+import ZRText from 'zrender/src/graphic/Text';
+const mapLabelTransform = makeInner<{
+ x: number
+ y: number
+}, ZRText>();
interface RegionsGroup extends graphic.Group {
__regions: Region[];
@@ -162,6 +168,17 @@ class MapDraw {
&& data.getVisual('visualMeta')
&& data.getVisual('visualMeta').length > 0;
+ 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
+ ];
+ };
+
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
@@ -216,17 +233,6 @@ 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
- ];
- };
-
zrUtil.each(region.geometries, function (geometry) {
if (geometry.type !== 'polygon') {
return;
@@ -309,6 +315,11 @@ class MapDraw {
z2: 10,
silent: true
});
+ // Save transform to restore during roam.
+ // In case LabelManager modified it.
+ // TODO
+ mapLabelTransform(textEl).x = centerPt[0];
+ mapLabelTransform(textEl).y = centerPt[1];
setLabelStyle<typeof query>(
textEl, getLabelStatesModels(regionModel),
@@ -417,11 +428,30 @@ class MapDraw {
return action;
}
+ const updateLabelTransforms = () => {
+ const group = this.group;
+ this._regionsGroup.traverse(function (el) {
+ const textContent = el.getTextContent();
+ if (textContent) {
+ el.setTextConfig({
+ local: true
+ });
+ textContent.x = mapLabelTransform(textContent).x || 0;
+ textContent.y = mapLabelTransform(textContent).y || 0;
+ textContent.scaleX = 1 / group.scaleX;
+ textContent.scaleY = 1 / group.scaleY;
+ textContent.markRedraw();
+ }
+ });
+ };
+
controller.off('pan').on('pan', function (e) {
this._mouseDownFlag = false;
roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
+ updateLabelTransforms();
+
api.dispatchAction(zrUtil.extend(makeActionBase(), {
dx: e.dx,
dy: e.dy
@@ -433,21 +463,14 @@ class MapDraw {
roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
+ updateLabelTransforms();
+
api.dispatchAction(zrUtil.extend(makeActionBase(), {
zoom: e.scale,
originX: e.originX,
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) {
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index c6b183c..b4bb204 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -81,6 +81,8 @@ interface SavedLabelAttr {
x: number
y: number
+ scaleX: number
+ scaleY: number
rotation: number
style: {
@@ -254,6 +256,8 @@ class LabelManager {
x: dummyTransformable.x,
y: dummyTransformable.y,
+ scaleX: dummyTransformable.scaleX,
+ scaleY: dummyTransformable.scaleY,
rotation: dummyTransformable.rotation,
style: {
@@ -334,6 +338,8 @@ class LabelManager {
labelItem.computedLayoutOption = layoutOption;
const degreeToRadian = Math.PI / 180;
+ // TODO hostEl should always exists.
+ // Or label should not have parent because the x, y is all in global space.
if (hostEl) {
hostEl.setTextConfig({
// Force to set local false.
@@ -385,6 +391,9 @@ class LabelManager {
label.rotation = layoutOption.rotate != null
? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation;
+ label.scaleX = defaultLabelAttr.scaleX;
+ label.scaleY = defaultLabelAttr.scaleY;
+
for (let k = 0; k < LABEL_OPTION_TO_STYLE_KEYS.length; k++) {
const key = LABEL_OPTION_TO_STYLE_KEYS[k];
label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]);
diff --git a/test/label-layout.html b/test/label-layout.html
index 8b03f4e..6c49908 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -51,6 +51,7 @@ under the License.
<div id="main8"></div>
<div id="main9"></div>
<div id="main10"></div>
+ <div id="main11"></div>
@@ -802,6 +803,30 @@ under the License.
</script>
+ <script>
+ require(['echarts', 'map/js/china'], function (echarts) {
+ const option = {
+ series: [{
+ type: 'map',
+ map: 'china',
+ roam: true,
+ label: {
+ show: true
+ },
+ labelLayout: {
+ hideOverlap: true
+ }
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main11', {
+ title: [
+ 'Map label should update it\'s position when labelLayout is used.'
+ ],
+ option: option
+ });
+ });
+ </script>
</body>
</html>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 526b2fb..925ea08 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -92,7 +92,7 @@
"hoverStyle": 14,
"hoverStyle2": 1,
"label-animation": 3,
- "label-layout": 1,
+ "label-layout": 2,
"label-position": 1,
"largeLine-tooltip": 1,
"legend": 11,
diff --git a/test/runTest/actions/label-layout.json b/test/runTest/actions/label-layout.json
index 1ff2825..a1bd982 100644
--- a/test/runTest/actions/label-layout.json
+++ b/test/runTest/actions/label-layout.json
@@ -1 +1 @@
-[{"name":"Action 1","ops":[{"type":"mousemove","time":47,"x":689,"y":417},{"type":"mousemove","time":320,"x":689,"y":415},{"type":"mousemove","time":473,"x":689,"y":415},{"type":"mousedown","time":546,"x":689,"y":415},{"type":"mousemove","time":679,"x":682,"y":380},{"type":"mousemove","time":1002,"x":675,"y":339},{"type":"mouseup","time":1054,"x":675,"y":339},{"time":1055,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1240,"x":674,"y":339},{"type":"mousemove","time":144 [...]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousemove","time":47,"x":689,"y":417},{"type":"mousemove","time":320,"x":689,"y":415},{"type":"mousemove","time":473,"x":689,"y":415},{"type":"mousedown","time":546,"x":689,"y":415},{"type":"mousemove","time":679,"x":682,"y":380},{"type":"mousemove","time":1002,"x":675,"y":339},{"type":"mouseup","time":1054,"x":675,"y":339},{"time":1055,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1240,"x":674,"y":339},{"type":"mousemove","time":144 [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org