@antv/l7-component 2.18.3 → 2.19.1

package/es/popup/layerPopup.d.ts

@@ -28,6 +28,10 @@ type LayerMapInfo = {
 } & Partial<LayerPopupConfigItem>;
 export { LayerPopup };
 export default class LayerPopup extends Popup<ILayerPopupOption> {
+    /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    protected layerClickCountByFrame: number;
     /**
      * 用于保存图层对应的事件回调以及配置信息
      * @protected
@@ -58,7 +62,8 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
     protected unbindLayerEvent(): void;
     protected onLayerMouseMove(layer: ILayer, e: any): void;
     protected onLayerMouseOut(layer: ILayer, e: any): void;
-    protected onLayerClick(layer: ILayer, e: any): void;
+    protected onLayerClick: (layer: ILayer, e: any) => void;
+    protected onSceneClick: () => void;
     protected onSourceUpdate(layer: ILayer): void;
     /**
      * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
@@ -83,4 +88,8 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
      * @protected
      */
     protected isSameFeature(layer: ILayer, featureId: number): boolean | undefined;
+    /**
+     * 覆盖 Popup 中的默认的 closeOnClick 行为
+     */
+    protected updateCloseOnClick: () => void;
 }

package/es/popup/layerPopup.js

@@ -10,7 +10,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { DOM, lodashUtil } from '@antv/l7-utils';
-// import { Container } from 'inversify';
 import Popup from "./popup";
 var get = lodashUtil.get;
 export { LayerPopup };
@@ -24,11 +23,50 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    _defineProperty(_assertThisInitialized(_this), "layerClickCountByFrame", 0);
     /**
      * 用于保存图层对应的事件回调以及配置信息
      * @protected
      */
     _defineProperty(_assertThisInitialized(_this), "layerConfigMap", new WeakMap());
+    _defineProperty(_assertThisInitialized(_this), "onLayerClick", function (layer, e) {
+      requestAnimationFrame(function () {
+        if (_this.popupOption.closeOnClick) {
+          _this.layerClickCountByFrame++;
+        }
+        if (_this.isShow && _this.isSameFeature(layer, e.featureId)) {
+          _this.hide();
+        } else {
+          var _this$getLayerInfoFra = _this.getLayerInfoFrag(layer, e),
+            title = _this$getLayerInfoFra.title,
+            content = _this$getLayerInfoFra.content;
+          _this.setDOMContent(content);
+          _this.setLnglat(e.lngLat);
+          _this.setTitle(title);
+          _this.displayFeatureInfo = {
+            layer: layer,
+            featureId: e.featureId
+          };
+          _this.show();
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onSceneClick", function () {
+      _this.layerClickCountByFrame = 0;
+      requestAnimationFrame(function () {
+        if (!_this.layerClickCountByFrame) {
+          _this.hide();
+        }
+      });
+    });
+    /**
+     * 覆盖 Popup 中的默认的 closeOnClick 行为
+     */
+    // tslint:disable-next-line:no-empty
+    _defineProperty(_assertThisInitialized(_this), "updateCloseOnClick", function () {});
     return _this;
   }
   _createClass(LayerPopup, [{
@@ -82,7 +120,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         },
         offsets: [0, 10],
         closeButton: false,
-        closeOnClick: false,
+        closeOnClick: true,
         autoClose: false,
         closeOnEsc: false
       });
@@ -96,7 +134,9 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     key: "bindLayerEvent",
     value: function bindLayerEvent() {
       var _this2 = this;
-      var trigger = this.popupOption.trigger;
+      var _this$popupOption2 = this.popupOption,
+        trigger = _this$popupOption2.trigger,
+        closeOnClick = _this$popupOption2.closeOnClick;
       this.layerConfigItems.forEach(function (configItem) {
         var _layer$getSource;
         var layer = _this2.getLayerByConfig(configItem);
@@ -112,9 +152,14 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           layer === null || layer === void 0 ? void 0 : layer.on('mousemove', onMouseMove);
           layer === null || layer === void 0 ? void 0 : layer.on('mouseout', onMouseOut);
         } else {
-          var onClick = _this2.onLayerClick.bind(_this2, layer);
-          layerInfo.onClick = onClick;
-          layer === null || layer === void 0 ? void 0 : layer.on('click', onClick);
+          var _this2$mapsService;
+          var onLayerClick = _this2.onLayerClick.bind(_this2, layer);
+          layerInfo.onClick = onLayerClick;
+          layer === null || layer === void 0 ? void 0 : layer.on('click', onLayerClick);
+          var mapContainer = (_this2$mapsService = _this2.mapsService) === null || _this2$mapsService === void 0 ? void 0 : _this2$mapsService.getMapContainer();
+          if (mapContainer && closeOnClick) {
+            mapContainer.addEventListener('click', _this2.onSceneClick);
+          }
         }
         var source = layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
         var onSourceUpdate = _this2.onSourceUpdate.bind(_this2, layer);
@@ -133,6 +178,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     value: function unbindLayerEvent() {
       var _this3 = this;
       this.layerConfigItems.forEach(function (configItem) {
+        var _this3$mapsService;
         var layer = _this3.getLayerByConfig(configItem);
         var layerInfo = layer && _this3.layerConfigMap.get(layer);
         if (!layerInfo) {
@@ -155,15 +201,19 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           var _layer$getSource2;
           layer === null || layer === void 0 ? void 0 : (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 ? void 0 : _layer$getSource2.off('update', onSourceUpdate);
         }
+        var mapContainer = (_this3$mapsService = _this3.mapsService) === null || _this3$mapsService === void 0 ? void 0 : _this3$mapsService.getMapContainer();
+        if (mapContainer) {
+          mapContainer.removeEventListener('click', _this3.onSceneClick);
+        }
       });
     }
   }, {
     key: "onLayerMouseMove",
     value: function onLayerMouseMove(layer, e) {
       if (!this.isSameFeature(layer, e.featureId)) {
-        var _this$getLayerInfoFra = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra.title,
-          content = _this$getLayerInfoFra.content;
+        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
+          title = _this$getLayerInfoFra2.title,
+          content = _this$getLayerInfoFra2.content;
         this.setDOMContent(content);
         this.setTitle(title);
         this.displayFeatureInfo = {
@@ -183,25 +233,6 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         this.hide();
       }
     }
-  }, {
-    key: "onLayerClick",
-    value: function onLayerClick(layer, e) {
-      if (this.isShow && this.isSameFeature(layer, e.featureId)) {
-        this.hide();
-      } else {
-        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra2.title,
-          content = _this$getLayerInfoFra2.content;
-        this.setDOMContent(content);
-        this.setLnglat(e.lngLat);
-        this.setTitle(title);
-        this.displayFeatureInfo = {
-          layer: layer,
-          featureId: e.featureId
-        };
-        this.show();
-      }
-    }
   }, {
     key: "onSourceUpdate",
     value: function onSourceUpdate(layer) {

package/es/popup/popup.js

@@ -522,9 +522,17 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
 
         // this.closeButton.type = 'button';
         closeButton.setAttribute('aria-label', 'Close popup');
-        closeButton.addEventListener('click', function () {
+        closeButton.addEventListener('click', function (e) {
           _this4.hide();
         });
+
+        // 防止点击 Popup 关闭按钮时，触发 Layer click 事件
+        closeButton.addEventListener('pointerup', function (e) {
+          e.stopPropagation();
+        });
+        closeButton.addEventListener('pointerdown', function (e) {
+          e.stopPropagation();
+        });
         this.closeButton = closeButton;
       } else {
         this.closeButton = undefined;

package/es/utils/popper.d.ts

@@ -70,6 +70,7 @@ export declare class Popper extends EventEmitter<'show' | 'hide'> {
     resetPopperPosition(): void;
     protected createPopper(): HTMLElement;
     protected onBtnClick: () => void;
+    protected onPopperUnClick: (e: MouseEvent) => void;
     protected onBtnMouseLeave: () => void;
     protected onBtnMouseMove: () => void;
 }

package/es/utils/popper.js

@@ -56,6 +56,7 @@ export var Popper = /*#__PURE__*/function (_EventEmitter) {
         });
       }
       _this.emit('show');
+      window.addEventListener('pointerdown', _this.onPopperUnClick);
       return _assertThisInitialized(_this);
     });
     _defineProperty(_assertThisInitialized(_this), "hide", function () {
@@ -65,6 +66,7 @@ export var Popper = /*#__PURE__*/function (_EventEmitter) {
       DOM.addClass(_this.popperDOM, 'l7-popper-hide');
       _this.isShow = false;
       _this.emit('hide');
+      window.removeEventListener('pointerdown', _this.onPopperUnClick);
       return _assertThisInitialized(_this);
     });
     /**
@@ -98,6 +100,11 @@ export var Popper = /*#__PURE__*/function (_EventEmitter) {
         _this.show();
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "onPopperUnClick", function (e) {
+      if (!DOM.findParentElement(e.target, ['.l7-button-control', '.l7-popper-content'])) {
+        _this.hide();
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onBtnMouseLeave", function () {
       _this.setHideTimeout();
     });

package/lib/popup/layerPopup.js

@@ -17,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _l7Utils = require("@antv/l7-utils");
 var _popup = _interopRequireDefault(require("./popup"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // import { Container } from 'inversify';
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var get = _l7Utils.lodashUtil.get;
 var LayerPopup = /*#__PURE__*/function (_Popup) {
   (0, _inherits2.default)(LayerPopup, _Popup);
@@ -29,11 +29,50 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "layerClickCountByFrame", 0);
     /**
      * 用于保存图层对应的事件回调以及配置信息
      * @protected
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "layerConfigMap", new WeakMap());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLayerClick", function (layer, e) {
+      requestAnimationFrame(function () {
+        if (_this.popupOption.closeOnClick) {
+          _this.layerClickCountByFrame++;
+        }
+        if (_this.isShow && _this.isSameFeature(layer, e.featureId)) {
+          _this.hide();
+        } else {
+          var _this$getLayerInfoFra = _this.getLayerInfoFrag(layer, e),
+            title = _this$getLayerInfoFra.title,
+            content = _this$getLayerInfoFra.content;
+          _this.setDOMContent(content);
+          _this.setLnglat(e.lngLat);
+          _this.setTitle(title);
+          _this.displayFeatureInfo = {
+            layer: layer,
+            featureId: e.featureId
+          };
+          _this.show();
+        }
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSceneClick", function () {
+      _this.layerClickCountByFrame = 0;
+      requestAnimationFrame(function () {
+        if (!_this.layerClickCountByFrame) {
+          _this.hide();
+        }
+      });
+    });
+    /**
+     * 覆盖 Popup 中的默认的 closeOnClick 行为
+     */
+    // tslint:disable-next-line:no-empty
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCloseOnClick", function () {});
     return _this;
   }
   (0, _createClass2.default)(LayerPopup, [{
@@ -87,7 +126,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         },
         offsets: [0, 10],
         closeButton: false,
-        closeOnClick: false,
+        closeOnClick: true,
         autoClose: false,
         closeOnEsc: false
       });
@@ -101,7 +140,9 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     key: "bindLayerEvent",
     value: function bindLayerEvent() {
       var _this2 = this;
-      var trigger = this.popupOption.trigger;
+      var _this$popupOption2 = this.popupOption,
+        trigger = _this$popupOption2.trigger,
+        closeOnClick = _this$popupOption2.closeOnClick;
       this.layerConfigItems.forEach(function (configItem) {
         var _layer$getSource;
         var layer = _this2.getLayerByConfig(configItem);
@@ -117,9 +158,14 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           layer === null || layer === void 0 ? void 0 : layer.on('mousemove', onMouseMove);
           layer === null || layer === void 0 ? void 0 : layer.on('mouseout', onMouseOut);
         } else {
-          var onClick = _this2.onLayerClick.bind(_this2, layer);
-          layerInfo.onClick = onClick;
-          layer === null || layer === void 0 ? void 0 : layer.on('click', onClick);
+          var _this2$mapsService;
+          var onLayerClick = _this2.onLayerClick.bind(_this2, layer);
+          layerInfo.onClick = onLayerClick;
+          layer === null || layer === void 0 ? void 0 : layer.on('click', onLayerClick);
+          var mapContainer = (_this2$mapsService = _this2.mapsService) === null || _this2$mapsService === void 0 ? void 0 : _this2$mapsService.getMapContainer();
+          if (mapContainer && closeOnClick) {
+            mapContainer.addEventListener('click', _this2.onSceneClick);
+          }
         }
         var source = layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
         var onSourceUpdate = _this2.onSourceUpdate.bind(_this2, layer);
@@ -138,6 +184,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     value: function unbindLayerEvent() {
       var _this3 = this;
       this.layerConfigItems.forEach(function (configItem) {
+        var _this3$mapsService;
         var layer = _this3.getLayerByConfig(configItem);
         var layerInfo = layer && _this3.layerConfigMap.get(layer);
         if (!layerInfo) {
@@ -160,15 +207,19 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           var _layer$getSource2;
           layer === null || layer === void 0 ? void 0 : (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 ? void 0 : _layer$getSource2.off('update', onSourceUpdate);
         }
+        var mapContainer = (_this3$mapsService = _this3.mapsService) === null || _this3$mapsService === void 0 ? void 0 : _this3$mapsService.getMapContainer();
+        if (mapContainer) {
+          mapContainer.removeEventListener('click', _this3.onSceneClick);
+        }
       });
     }
   }, {
     key: "onLayerMouseMove",
     value: function onLayerMouseMove(layer, e) {
       if (!this.isSameFeature(layer, e.featureId)) {
-        var _this$getLayerInfoFra = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra.title,
-          content = _this$getLayerInfoFra.content;
+        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
+          title = _this$getLayerInfoFra2.title,
+          content = _this$getLayerInfoFra2.content;
         this.setDOMContent(content);
         this.setTitle(title);
         this.displayFeatureInfo = {
@@ -188,25 +239,6 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         this.hide();
       }
     }
-  }, {
-    key: "onLayerClick",
-    value: function onLayerClick(layer, e) {
-      if (this.isShow && this.isSameFeature(layer, e.featureId)) {
-        this.hide();
-      } else {
-        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra2.title,
-          content = _this$getLayerInfoFra2.content;
-        this.setDOMContent(content);
-        this.setLnglat(e.lngLat);
-        this.setTitle(title);
-        this.displayFeatureInfo = {
-          layer: layer,
-          featureId: e.featureId
-        };
-        this.show();
-      }
-    }
   }, {
     key: "onSourceUpdate",
     value: function onSourceUpdate(layer) {

package/lib/popup/popup.js

@@ -528,9 +528,17 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
 
         // this.closeButton.type = 'button';
         closeButton.setAttribute('aria-label', 'Close popup');
-        closeButton.addEventListener('click', function () {
+        closeButton.addEventListener('click', function (e) {
           _this4.hide();
         });
+
+        // 防止点击 Popup 关闭按钮时，触发 Layer click 事件
+        closeButton.addEventListener('pointerup', function (e) {
+          e.stopPropagation();
+        });
+        closeButton.addEventListener('pointerdown', function (e) {
+          e.stopPropagation();
+        });
         this.closeButton = closeButton;
       } else {
         this.closeButton = undefined;

package/lib/utils/popper.js

@@ -59,6 +59,7 @@ var Popper = /*#__PURE__*/function (_EventEmitter) {
         });
       }
       _this.emit('show');
+      window.addEventListener('pointerdown', _this.onPopperUnClick);
       return (0, _assertThisInitialized2.default)(_this);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function () {
@@ -68,6 +69,7 @@ var Popper = /*#__PURE__*/function (_EventEmitter) {
       _l7Utils.DOM.addClass(_this.popperDOM, 'l7-popper-hide');
       _this.isShow = false;
       _this.emit('hide');
+      window.removeEventListener('pointerdown', _this.onPopperUnClick);
       return (0, _assertThisInitialized2.default)(_this);
     });
     /**
@@ -101,6 +103,11 @@ var Popper = /*#__PURE__*/function (_EventEmitter) {
         _this.show();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPopperUnClick", function (e) {
+      if (!_l7Utils.DOM.findParentElement(e.target, ['.l7-button-control', '.l7-popper-content'])) {
+        _this.hide();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBtnMouseLeave", function () {
       _this.setHideTimeout();
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.18.3",
+  "version": "2.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.18.3",
-    "@antv/l7-utils": "2.18.3",
+    "@antv/l7-core": "2.19.1",
+    "@antv/l7-utils": "2.19.1",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -35,12 +35,12 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-layers": "2.18.3",
-    "@antv/l7-test-utils": "2.18.3",
+    "@antv/l7-layers": "2.19.1",
+    "@antv/l7-test-utils": "2.19.1",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "882d6eaa2d503b4e50ad6d94b123f8f892c0f84c",
+  "gitHead": "8367745186870d2519ad00006fcdbcb92196e9ad",
   "publishConfig": {
     "access": "public"
   }