@antv/l7-component - npm Package Compare versions

Comparing version 2.18.3 to 2.19.0

es/popup/layerPopup.d.ts

@@ -32,2 +32,6 @@ import { ILayer, IPopupOption } from '@antv/l7-core';
     /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    protected layerClickCountByFrame: number;
+    /**
      * 用于保存图层对应的事件回调以及配置信息
@@ -62,3 +66,4 @@ * @protected
     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;
@@ -88,2 +93,6 @@ /**
     protected isSameFeature(layer: ILayer, featureId: number): boolean | undefined;
+    /**
+     * 覆盖 Popup 中的默认的 closeOnClick 行为
+     */
+    protected updateCloseOnClick: () => void;
 }

es/popup/layerPopup.js

@@ -13,3 +13,2 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { DOM, lodashUtil } from '@antv/l7-utils';
-// import { Container } from 'inversify';
 import Popup from "./popup";
@@ -29,2 +28,6 @@ var get = lodashUtil.get;
     /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    _defineProperty(_assertThisInitialized(_this), "layerClickCountByFrame", 0);
+    /**
      * 用于保存图层对应的事件回调以及配置信息
@@ -34,2 +37,37 @@ * @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;
@@ -88,3 +126,3 @@ }
         closeButton: false,
-        closeOnClick: false,
+        closeOnClick: true,
         autoClose: false,
@@ -103,3 +141,5 @@ closeOnEsc: false
       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) {
@@ -120,5 +160,10 @@ var _layer$getSource;
         } 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);
+          }
         }
@@ -142,2 +187,3 @@ var source = layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
       this.layerConfigItems.forEach(function (configItem) {
+        var _this3$mapsService;
         var layer = _this3.getLayerByConfig(configItem);
@@ -165,2 +211,6 @@ var layerInfo = layer && _this3.layerConfigMap.get(layer);
         }
+        var mapContainer = (_this3$mapsService = _this3.mapsService) === null || _this3$mapsService === void 0 ? void 0 : _this3$mapsService.getMapContainer();
+        if (mapContainer) {
+          mapContainer.removeEventListener('click', _this3.onSceneClick);
+        }
       });
@@ -172,5 +222,5 @@ }
       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);
@@ -196,21 +246,2 @@ this.setTitle(title);
   }, {
-    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",
@@ -217,0 +248,0 @@ value: function onSourceUpdate(layer) {

es/popup/popup.js

@@ -525,5 +525,13 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
         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;
@@ -530,0 +538,0 @@ } else {

es/utils/popper.d.ts

@@ -73,4 +73,5 @@ import { EventEmitter } from 'eventemitter3';
     protected onBtnClick: () => void;
+    protected onPopperUnClick: (e: MouseEvent) => void;
     protected onBtnMouseLeave: () => void;
     protected onBtnMouseMove: () => void;
 }

es/utils/popper.js

@@ -59,2 +59,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
       _this.emit('show');
+      window.addEventListener('pointerdown', _this.onPopperUnClick);
       return _assertThisInitialized(_this);
@@ -69,2 +70,3 @@ });
       _this.emit('hide');
+      window.removeEventListener('pointerdown', _this.onPopperUnClick);
       return _assertThisInitialized(_this);
@@ -103,2 +105,7 @@ });
     });
+    _defineProperty(_assertThisInitialized(_this), "onPopperUnClick", function (e) {
+      if (!DOM.findParentElement(e.target, ['.l7-button-control', '.l7-popper-content'])) {
+        _this.hide();
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onBtnMouseLeave", function () {
@@ -105,0 +112,0 @@ _this.setHideTimeout();

lib/popup/layerPopup.js

@@ -20,3 +20,3 @@ "use strict";
 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;
@@ -34,2 +34,6 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "layerClickCountByFrame", 0);
+    /**
      * 用于保存图层对应的事件回调以及配置信息
@@ -39,2 +43,37 @@ * @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;
@@ -93,3 +132,3 @@ }
         closeButton: false,
-        closeOnClick: false,
+        closeOnClick: true,
         autoClose: false,
@@ -108,3 +147,5 @@ closeOnEsc: false
       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) {
@@ -125,5 +166,10 @@ var _layer$getSource;
         } 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);
+          }
         }
@@ -147,2 +193,3 @@ var source = layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
       this.layerConfigItems.forEach(function (configItem) {
+        var _this3$mapsService;
         var layer = _this3.getLayerByConfig(configItem);
@@ -170,2 +217,6 @@ var layerInfo = layer && _this3.layerConfigMap.get(layer);
         }
+        var mapContainer = (_this3$mapsService = _this3.mapsService) === null || _this3$mapsService === void 0 ? void 0 : _this3$mapsService.getMapContainer();
+        if (mapContainer) {
+          mapContainer.removeEventListener('click', _this3.onSceneClick);
+        }
       });
@@ -177,5 +228,5 @@ }
       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);
@@ -201,21 +252,2 @@ this.setTitle(title);
   }, {
-    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",
@@ -222,0 +254,0 @@ value: function onSourceUpdate(layer) {

lib/popup/popup.js

@@ -531,5 +531,13 @@ "use strict";
         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;
@@ -536,0 +544,0 @@ } else {

lib/utils/popper.js

@@ -62,2 +62,3 @@ "use strict";
       _this.emit('show');
+      window.addEventListener('pointerdown', _this.onPopperUnClick);
       return (0, _assertThisInitialized2.default)(_this);
@@ -72,2 +73,3 @@ });
       _this.emit('hide');
+      window.removeEventListener('pointerdown', _this.onPopperUnClick);
       return (0, _assertThisInitialized2.default)(_this);
@@ -106,2 +108,7 @@ });
     });
+    (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 () {
@@ -108,0 +115,0 @@ _this.setHideTimeout();

package.json

 {
   "name": "@antv/l7-component",
-  "version": "2.18.3",
+  "version": "2.19.0",
   "description": "",
@@ -29,4 +29,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/l7-core": "2.18.3",
-    "@antv/l7-utils": "2.18.3",
+    "@antv/l7-core": "2.19.0",
+    "@antv/l7-utils": "2.19.0",
     "@babel/runtime": "^7.7.7",
@@ -39,8 +39,8 @@ "eventemitter3": "^4.0.0",
   "devDependencies": {
-    "@antv/l7-layers": "2.18.3",
-    "@antv/l7-test-utils": "2.18.3",
+    "@antv/l7-layers": "2.19.0",
+    "@antv/l7-test-utils": "2.19.0",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "882d6eaa2d503b4e50ad6d94b123f8f892c0f84c",
+  "gitHead": "7f08eaafe2a25e986ba52c625acf5511f1184b82",
   "publishConfig": {
@@ -47,0 +47,0 @@ "access": "public"

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

538988

increased by0.91%

Lines of code

10816

increased by0.94%

Dependency changes

• + Added@antv/l7-core@2.19.0(transitive)

• + Added@antv/l7-utils@2.19.0(transitive)

• - Removed@antv/l7-core@2.18.3(transitive)

• - Removed@antv/l7-utils@2.18.3(transitive)

• Updated@antv/l7-core@2.19.0

• Updated@antv/l7-utils@2.19.0