fix: 修复图层隐藏时，LayerPopup 未跟随隐藏的问题 (#2231)

antvis · Jan 10, 2024 · beb5eaf · beb5eaf
1 parent 3170f51
commit beb5eaf
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/dev-demos/component/popup/layerPopup.tsx b/dev-demos/component/popup/layerPopup.tsx
@@ -9,7 +9,7 @@ import {
 import { featureCollection, point } from '@turf/turf';
 import React, { useState } from 'react';
 // tslint:disable-next-line:no-duplicate-imports
-import type { FunctionComponent} from 'react';
+import type { FunctionComponent } from 'react';
 import { useEffect } from 'react';
 
 const Demo: FunctionComponent = () => {
@@ -88,7 +88,7 @@ const Demo: FunctionComponent = () => {
         .then((res) => res.json())
         .then((data) => {
           polygonLayer.setData(data);
-        });
+                  });
       newScene.addLayer(pointLayer);
       newScene.addLayer(polygonLayer);
       newScene.addLayer(lineString);
@@ -124,7 +124,7 @@ const Demo: FunctionComponent = () => {
             fields: ['name', 'lines'],
           },
         ],
-        trigger: 'click',
+        trigger: 'hover',
         closeOnClick: true,
       });
       // pointLayer.on('mousemove', (e) => {

diff --git a/packages/component/src/popup/layerPopup.ts b/packages/component/src/popup/layerPopup.ts
@@ -185,17 +185,17 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
       const { title, content } = this.getLayerInfoFrag(layer, e);
       this.setDOMContent(content);
       this.setTitle(title);
-      this.displayFeatureInfo = {
+      this.setDisplayFeatureInfo({
         layer,
         featureId: e.featureId,
-      };
+      });
       this.show();
     }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected onLayerMouseOut(layer: ILayer, e: any) {
-    this.displayFeatureInfo = undefined;
+    this.setDisplayFeatureInfo(undefined);
     if (this.isShow) {
       this.hide();
     }
@@ -213,10 +213,10 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
         this.setDOMContent(content);
         this.setLnglat(e.lngLat);
         this.setTitle(title);
-        this.displayFeatureInfo = {
+        this.setDisplayFeatureInfo({
           layer,
           featureId: e.featureId,
-        };
+        });
         this.show();
       }
     });
@@ -233,7 +233,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
 
   protected onSourceUpdate() {
     this.hide();
-    this.displayFeatureInfo = undefined;
+    this.setDisplayFeatureInfo(undefined);
   }
 
   /**
@@ -349,6 +349,25 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
     );
   }
 
+  protected setDisplayFeatureInfo(displayFeatureInfo?: {
+    layer: ILayer;
+    featureId: number;
+  }) {
+    const oldDisplayFeatureInfo = this.displayFeatureInfo;
+    if (oldDisplayFeatureInfo) {
+      oldDisplayFeatureInfo.layer.off('hide', this.onLayerHide);
+    }
+    if (displayFeatureInfo) {
+      displayFeatureInfo.layer.on('hide', this.onLayerHide);
+    }
+    this.displayFeatureInfo = displayFeatureInfo;
+  }
+
+  protected onLayerHide = () => {
+    this.hide();
+    this.setDisplayFeatureInfo(undefined);
+  };
+
   /**
    * 覆盖 Popup 中的默认的 closeOnClick 行为
    */