From fc311a09d4bfbb2df65f6b66cc852f2f05f3ad92 Mon Sep 17 00:00:00 2001
From: 100pah <sushuang0322@gmail.com>
Date: Thu, 1 Apr 2021 12:58:55 +0800
Subject: [PATCH] fix: geoJSON focus-blur

---
 src/component/helper/MapDraw.ts | 12 ++++-
 test/geo-svg.html               | 85 ++++++++++++++++++++++++++++++++-
 2 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index 22caaebdd..22d2caaf7 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -399,6 +399,13 @@ class MapDraw {
 
         }, this);
 
+        this._enableBlurEntireSVG(focusSelf, viewBuildCtx);
+    }
+
+    private _enableBlurEntireSVG(
+        focusSelf: boolean,
+        viewBuildCtx: ViewBuildContext
+    ): void {
         // It's a little complicated to support blurring the entire geoSVG in series-map.
         // So do not suport it until some requirements come.
         // At present, in series-map, only regions can be blurred.
@@ -417,8 +424,7 @@ class MapDraw {
                     if (style.opacity == null && opacity != null) {
                         style.opacity = opacity;
                     }
-                    // If opacity not set, but `ensureState('blur').style` set, there will
-                    // be default opacity.
+                    // If `ensureState('blur').style = {}`, there will be default opacity.
 
                     // Enable `stateTransition` (animation).
                     (el as Displayable).ensureState('emphasis');
@@ -638,6 +644,8 @@ function applyOptionStyleForRegion(
     el.ensureState('emphasis').style = emphasisStyle;
     el.ensureState('select').style = selectStyle;
     el.ensureState('blur').style = blurStyle;
+    // Enable blur
+    setDefaultStateProxy(el);
 }
 
 function resetLabelForRegion(
diff --git a/test/geo-svg.html b/test/geo-svg.html
index 45ec6e426..38a625109 100644
--- a/test/geo-svg.html
+++ b/test/geo-svg.html
@@ -39,6 +39,7 @@ under the License.
 
         <div id="main_simple_geo_json"></div>
         <div id="main_simple_geo_svg"></div>
+        <div id="main_geo_json_focus_blur"></div>
         <div id="main_geo_svg_emphasis_select"></div>
         <div id="main_pure_geo_svg"></div>
         <div id="main_pure_map_svg"></div>
@@ -199,6 +200,86 @@ under the License.
 
 
 
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            const testGeoJson1 = {
+                'type': 'FeatureCollection',
+                'features': [
+                    {
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Polygon',
+                            'coordinates': [
+                                [[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]]
+                            ]
+                        },
+                        'properties': {
+                            'name': 'Afghanistan'
+                        }
+                    },
+                    {
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Polygon',
+                            'coordinates': [
+                                [[6000, 2300], [9300, 2300], [9000, 5000]]
+                            ]
+                        },
+                        'properties': {
+                            'name': 'BBB'
+                        }
+                    }
+                ]
+            };
+
+            echarts.registerMap('testGeoJson2', testGeoJson1);
+
+            option = {
+                tooltip: {
+                },
+                geo: {
+                    map: 'testGeoJson2',
+                    roam: true,
+                    selectedMode: 'single',
+                    label: {
+                        show: true
+                    },
+                    emphasis: {
+                        focus: 'self'
+                    },
+                    // height: '100%',
+                    // center
+                    // layoutCenter: ['30%', 40],
+                    // layoutSize: 40,
+                    // boundingCoords
+                    zoom: 1,
+                    aspectScale: 1
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main_geo_json_focus_blur', {
+                title: [
+                    'check geoJSON focus-blur',
+                ],
+                option: option,
+                info: {},
+                infoKey: 'event',
+                height: 200
+            });
+
+            listenAndPrintEvent(chart);
+
+        });
+        </script>
+
+
+
+
+
+
         <script>
         require(['echarts'/*, 'map/js/china' */], function (echarts) {
             const svg = [
@@ -243,6 +324,7 @@ under the License.
                         show: true
                     },
                     emphasis: {
+                        focus: 'self',
                         label: {
                             show: true,
                             fontSize: 100
@@ -259,7 +341,8 @@ under the License.
             var chart = testHelper.create(echarts, 'main_geo_svg_emphasis_select', {
                 title: [
                     'click buttons',
-                    'hover check'
+                    'hover check',
+                    'check focus-blur'
                 ],
                 option: option,
                 info: {},
-- 
GitLab