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/05/21 08:52:12 UTC
[echarts] 01/02: fix: fix geo and map click event params missing
props (brought by 5.1.0, partial fixed in 5.1.1)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/geo-label
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 32cc0e3c764818730ac0745738216ef1bd3ccf0e
Author: 100pah <su...@gmail.com>
AuthorDate: Fri May 21 13:20:13 2021 +0800
fix: fix geo and map click event params missing props (brought by 5.1.0, partial fixed in 5.1.1)
---
src/component/helper/MapDraw.ts | 66 +++++----
src/label/labelStyle.ts | 9 --
test/geo-label.html | 135 ------------------
test/geo-map-features.html | 304 ++++++++++++++++++++++++++++++++++++++++
4 files changed, 345 insertions(+), 169 deletions(-)
diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index ef44f80..e76c877 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -30,15 +30,15 @@ import {
import geoSourceManager from '../../coord/geo/geoSourceManager';
import {getUID} from '../../util/component';
import ExtensionAPI from '../../core/ExtensionAPI';
-import GeoModel, { GeoCommonOptionMixin, GeoItemStyleOption } from '../../coord/geo/GeoModel';
-import MapSeries from '../../chart/map/MapSeries';
+import GeoModel, { GeoCommonOptionMixin, GeoItemStyleOption, RegoinOption } from '../../coord/geo/GeoModel';
+import MapSeries, { MapDataItemOption } from '../../chart/map/MapSeries';
import GlobalModel from '../../model/Global';
import { Payload, ECElement, LineStyleOption, InnerFocus, DisplayState } from '../../util/types';
import GeoView from '../geo/GeoView';
import MapView from '../../chart/map/MapView';
import Geo from '../../coord/geo/Geo';
import Model from '../../model/Model';
-import { setLabelStyle, getLabelStatesModels, enableLayoutLayoutFeatures } from '../../label/labelStyle';
+import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
import { getECData } from '../../util/innerStore';
import { createOrUpdatePatternFromDecal } from '../../util/decal';
import ZRText, {TextStyleProps} from 'zrender/src/graphic/Text';
@@ -225,7 +225,11 @@ class MapDraw {
}
private _buildGeoJSON(viewBuildCtx: ViewBuildContext): void {
- const nameMap = this._regionsGroupByName = zrUtil.createHashMap<RegionsGroup>();
+ const regionsGroupByName = this._regionsGroupByName = zrUtil.createHashMap<RegionsGroup, string>();
+ const regionsInfoByName = zrUtil.createHashMap<{
+ dataIdx: number;
+ regionModel: Model<RegoinOption> | Model<MapDataItemOption>;
+ }, string>();
const regionsGroup = this._regionsGroup;
const transformInfoRaw = viewBuildCtx.transformInfoRaw;
const mapOrGeoModel = viewBuildCtx.mapOrGeoModel;
@@ -243,20 +247,25 @@ class MapDraw {
// Only when the resource is GeoJSON, there is `geo.regions`.
zrUtil.each(viewBuildCtx.geo.regions, function (region: GeoJSONRegion) {
const regionName = region.name;
- const regionModel = mapOrGeoModel.getRegionModel(regionName);
- const dataIdx = data ? data.indexOfName(regionName) : null;
// 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
// will make them share the same label and bring trouble in label
// location calculation.
- let regionGroup = nameMap.get(regionName);
- const hasRegionGroup = !!regionGroup;
+ let regionGroup = regionsGroupByName.get(regionName);
+ let { dataIdx, regionModel } = regionsInfoByName.get(regionName) || {};
- if (!hasRegionGroup) {
- regionGroup = nameMap.set(regionName, new graphic.Group() as RegionsGroup);
+ if (!regionGroup) {
+ regionGroup = regionsGroupByName.set(regionName, new graphic.Group() as RegionsGroup);
regionsGroup.add(regionGroup);
+
+ dataIdx = data ? data.indexOfName(regionName) : null;
+ regionModel = viewBuildCtx.isGeo
+ ? mapOrGeoModel.getRegionModel(regionName)
+ : (data ? data.getItemModel(dataIdx) as Model<MapDataItemOption> : null);
+
+ regionsInfoByName.set(regionName, { dataIdx, regionModel });
}
const compoundPath = new graphic.CompoundPath({
@@ -267,19 +276,6 @@ class MapDraw {
});
regionGroup.add(compoundPath);
- if (!hasRegionGroup) {
- // ensure children have been added to group before calling resetEventTriggerForRegion
- resetEventTriggerForRegion(
- viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel, dataIdx
- );
- resetTooltipForRegion(
- viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
- );
- resetStateTriggerForRegion(
- viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
- );
- }
-
zrUtil.each(region.geometries, function (geometry) {
if (geometry.type !== 'polygon') {
return;
@@ -322,6 +318,21 @@ class MapDraw {
resetLabelForRegion(
viewBuildCtx, compoundPath, regionName, regionModel, mapOrGeoModel, dataIdx, centerPt
);
+ });
+
+ // Ensure children have been added to `regionGroup` before calling them.
+ regionsGroupByName.each(function (regionGroup, regionName) {
+ const { dataIdx, regionModel } = regionsInfoByName.get(regionName);
+
+ resetEventTriggerForRegion(
+ viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel, dataIdx
+ );
+ resetTooltipForRegion(
+ viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
+ );
+ resetStateTriggerForRegion(
+ viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
+ );
}, this);
}
@@ -373,7 +384,7 @@ class MapDraw {
// an area hovered that make some inner city can not be clicked.
(el as ECElement).z2EmphasisLift = 0;
- // If self named, that is, if tag is inside a named <g> (where `namedFrom` does not exists):
+ // If self named:
if (!namedItem.namedFrom) {
// label should batter to be displayed based on the center of <g>
// if it is named rather than displayed on each child.
@@ -732,7 +743,12 @@ function resetLabelForRegion(
}
}
- enableLayoutLayoutFeatures(el, dataIdx, null);
+ // PENDING:
+ // If labelLayout is enabled (test/label-layout.html), el.dataIndex should be specified.
+ // But el.dataIndex is also used to determine whether user event should be triggered,
+ // where el.seriesIndex or el.dataModel must be specified. At present for a single el
+ // there is not case that "only label layout enabled but user event disabled", so here
+ // we depends `resetEventTriggerForRegion` to do the job of setting `el.dataIndex`.
(el as ECElement).disableLabelAnimation = true;
}
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 002a77d..0012983 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -729,12 +729,3 @@ export function animateLabelValue(
: updateProps
)(textEl, {}, animatableModel, dataIndex, null, during);
}
-
-export function enableLayoutLayoutFeatures(
- el: Element,
- dataIndex: number,
- dataType: SeriesDataType
-): void {
- getECData(el).dataIndex = dataIndex;
- getECData(el).dataType = dataType;
-}
diff --git a/test/geo-label.html b/test/geo-label.html
deleted file mode 100644
index b972f6b..0000000
--- a/test/geo-label.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="lib/simpleRequire.js"></script>
- <script src="lib/config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- <script src="lib/testHelper.js"></script>
- <!-- <script src="ut/lib/canteen.js"></script> -->
- <link rel="stylesheet" href="lib/reset.css" />
- </head>
- <body>
- <style>
- </style>
-
-
-
- <div id="main0"></div>
-
-
- <script>
- require([
- 'echarts',
- ], function (echarts) {
-
- var NAME = 'AAAA';
- var testGeoJSON1 = {
- 'type': 'FeatureCollection',
- 'features': [{
- 'type': 'Feature',
- 'geometry': { 'type': 'Polygon', 'coordinates': [
- [[2000, 2000], [2100, 2000], [2100, 2100], [2000, 2100]]
- ]},
- 'properties': {
- 'name': NAME, 'childNum': 1,
- cp: [2000, 4000]
- }
- // }, {
- // 'type': 'Feature',
- // 'geometry': { 'type': 'Polygon', 'coordinates': [
- // [[3000, 2000], [7000, 2000], [7000, 5000], [3000, 5000]]
- // ]},
- // 'properties': {
- // 'name': NAME, 'childNum': 1,
- // cp: [2600, 5200]
- // }
- }]
- };
- var mapType = 'world1';
- echarts.registerMap(mapType, testGeoJSON1);
-
- var option = {
- animation: false,
- backgroundColor: '#404a59',
- animationDurationUpdate: 800,
- visualMap: {
- max: 3000,
- show: false
- },
- series: [{
- type: 'map',
- map: mapType,
- roam: true,
- zoom: 0.03,
- label: {
- show: false,
- opacity: 0.5,
- formatter: '{c}'
- },
- // itemStyle: {
- // borderWidth: 0
- // },
- emphasis: {
- itemStyle: {
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- shadowBlur: 0,
- borderWidth: 0
- }
- },
- data: [{
- name: NAME,
- value: 12361,
- label: {
- normal: {
- textStyle: {
- color: '#50d5d3',
- fontWeight: 'bolder',
- fontSize: Math.round(12361 / 500) + 20
- },
- show: true
- },
- emphasis: {
- show: true
- }
- }
- }]
- }]
- };
-
- var chart = testHelper.create(echarts, 'main0', {
- title: [
- 'Hover on the rect, the label should not be moved'
- ],
- option: option,
- height: 800,
- });
- });
- </script>
-
-
- </body>
-</html>
-
diff --git a/test/geo-map-features.html b/test/geo-map-features.html
new file mode 100644
index 0000000..d2ed57f
--- /dev/null
+++ b/test/geo-map-features.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="map_click_event"></div>
+ <div id="geo_click_event"></div>
+ <!-- <div id="main0"></div> -->
+
+
+
+ <script>
+ require([
+ 'echarts',
+ ], function (echarts) {
+
+ var testGeoJSON1 = {
+ 'type': 'FeatureCollection',
+ 'features': [{
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[2000, 3000], [2100, 3000], [3100, 2100], [2000, 2100]]
+ ]},
+ 'properties': {
+ 'name': 'AAA', 'childNum': 1
+ }
+ }, {
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[5500, 3000], [6000, 3000], [5500, 2100], [6000, 2100]]
+ ]},
+ 'properties': {
+ 'name': 'BBB', 'childNum': 1
+ }
+ }, {
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[3000, 2000], [5000, 2000], [5000, 5000], [3000, 5000]]
+ ]},
+ 'properties': {
+ 'name': 'AAA', 'childNum': 1
+ }
+ }]
+ };
+ var mapType = 'world1';
+ echarts.registerMap(mapType, testGeoJSON1);
+
+ var option = {
+ tooltip: {},
+ series: [{
+ type: 'map',
+ map: mapType,
+ label: {
+ formatter: '{c}'
+ },
+ data: [{
+ name: 'AAA',
+ value: 76543,
+ }, {
+ name: 'BBB',
+ value: 12345
+ }]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'map_click_event', {
+ title: [
+ 'Map: Click on the regions. **checked: Pass** should be displayed.'
+ ],
+ option: option,
+ height: 400,
+ });
+
+ if (chart) {
+ chart.on('click', {seriesIndex: 0, name: 'AAA'}, function (event) {
+ checkClickEvent(event, 'AAA', 76543);
+ });
+ chart.on('click', {seriesIndex: 0, name: 'BBB'}, function (event) {
+ checkClickEvent(event, 'BBB', 12345);
+ });
+ function checkClickEvent(event, name, value) {
+ testHelper.printAssert(chart, function (assert) {
+ assert(event.componentType === 'series');
+ assert(event.seriesType === 'map');
+ assert(event.seriesIndex === 0);
+ assert(event.name === name);
+ assert(event.value === value);
+ assert(event.data.name === name);
+ assert(event.data.value === value);
+ });
+ }
+ }
+ });
+ </script>
+
+
+
+
+
+
+
+ <script>
+ require([
+ 'echarts',
+ ], function (echarts) {
+
+ var testGeoJSON1 = {
+ 'type': 'FeatureCollection',
+ 'features': [{
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[2000, 3000], [2100, 3000], [3100, 2100], [2000, 2100]]
+ ]},
+ 'properties': {
+ 'name': 'AAA', 'childNum': 1
+ }
+ }, {
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[5500, 3000], [6000, 3000], [5500, 2100], [6000, 2100]]
+ ]},
+ 'properties': {
+ 'name': 'BBB', 'childNum': 1
+ }
+ }, {
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[3000, 2000], [5000, 2000], [5000, 5000], [3000, 5000]]
+ ]},
+ 'properties': {
+ 'name': 'AAA', 'childNum': 1
+ }
+ }]
+ };
+ var mapType = 'world1';
+ echarts.registerMap(mapType, testGeoJSON1);
+
+ var option = {
+ tooltip: {},
+ geo: [{
+ map: mapType
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'geo_click_event', {
+ title: [
+ 'Geo: Click on the regions. **checked: Pass** should be displayed.'
+ ],
+ option: option,
+ height: 400,
+ });
+
+ if (chart) {
+ chart.on('click', {geoIndex: 0, name: 'AAA'}, function (event) {
+ checkClickEvent(event, 'AAA', 76543);
+ });
+ chart.on('click', {geoIndex: 0, name: 'BBB'}, function (event) {
+ checkClickEvent(event, 'BBB', 12345);
+ });
+ function checkClickEvent(event, name, value) {
+ console.log(event);
+ testHelper.printAssert(chart, function (assert) {
+ assert(event.componentType === 'geo');
+ assert(event.componentIndex === 0);
+ assert(event.name === name);
+ });
+ }
+ }
+ });
+ </script>
+
+
+
+
+ <script>
+ require([
+ 'echarts',
+ ], function (echarts) {
+
+ var NAME = 'AAAA';
+ var testGeoJSON1 = {
+ 'type': 'FeatureCollection',
+ 'features': [{
+ 'type': 'Feature',
+ 'geometry': { 'type': 'Polygon', 'coordinates': [
+ [[2000, 2000], [2100, 2000], [2100, 2100], [2000, 2100]]
+ ]},
+ 'properties': {
+ 'name': NAME, 'childNum': 1,
+ cp: [2000, 4000]
+ }
+ // }, {
+ // 'type': 'Feature',
+ // 'geometry': { 'type': 'Polygon', 'coordinates': [
+ // [[3000, 2000], [7000, 2000], [7000, 5000], [3000, 5000]]
+ // ]},
+ // 'properties': {
+ // 'name': NAME, 'childNum': 1,
+ // cp: [2600, 5200]
+ // }
+ }]
+ };
+ var mapType = 'world1';
+ echarts.registerMap(mapType, testGeoJSON1);
+
+ var option = {
+ animation: false,
+ backgroundColor: '#404a59',
+ animationDurationUpdate: 800,
+ visualMap: {
+ max: 3000,
+ show: false
+ },
+ series: [{
+ type: 'map',
+ map: mapType,
+ roam: true,
+ zoom: 0.03,
+ label: {
+ show: false,
+ opacity: 0.5,
+ formatter: '{c}'
+ },
+ // itemStyle: {
+ // borderWidth: 0
+ // },
+ emphasis: {
+ itemStyle: {
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ shadowBlur: 0,
+ borderWidth: 0
+ }
+ },
+ data: [{
+ name: NAME,
+ value: 12361,
+ label: {
+ normal: {
+ textStyle: {
+ color: '#50d5d3',
+ fontWeight: 'bolder',
+ fontSize: Math.round(12361 / 500) + 20
+ },
+ show: true
+ },
+ emphasis: {
+ show: true
+ }
+ }
+ }]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Hover on the rect, the label should not be moved'
+ ],
+ option: option,
+ height: 800,
+ });
+ });
+ </script>
+
+
+
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org