@antv/l7-component 2.10.7 → 2.10.9

package/es/control/baseControl/buttonControl.d.ts

@@ -1,8 +1,8 @@
-import { ELType } from '@antv/l7-utils/src/dom';
+import { DOM } from '@antv/l7-utils';
 import Control, { IControlOption } from './control';
 export { ButtonControl };
 export interface IButtonControlOption extends IControlOption {
-    btnIcon?: ELType | DocumentFragment;
+    btnIcon?: DOM.ELType | DocumentFragment;
     btnText?: string;
     title?: string;
     vertical?: boolean;
@@ -27,7 +27,7 @@ export default class ButtonControl<O extends IButtonControlOption = IButtonContr
      * 按钮中图标对应的 DOM
      * @protected
      */
-    protected buttonIcon?: ELType | DocumentFragment;
+    protected buttonIcon?: DOM.ELType | DocumentFragment;
     /**
      * 设置当前按钮
      * @param newIsDisable

package/es/control/baseControl/selectControl.d.ts

@@ -1,16 +1,16 @@
 import { IPopperControlOption, PopperControl } from './popperControl';
-declare type BaseOptionItem = {
+type BaseOptionItem = {
     value: string;
     text: string;
     [key: string]: string;
 };
-declare type NormalOptionItem = BaseOptionItem & {
+type NormalOptionItem = BaseOptionItem & {
     icon?: HTMLElement;
 };
-declare type ImageOptionItem = BaseOptionItem & {
+type ImageOptionItem = BaseOptionItem & {
     img: string;
 };
-export declare type ControlOptionItem = ImageOptionItem | NormalOptionItem;
+export type ControlOptionItem = ImageOptionItem | NormalOptionItem;
 export interface ISelectControlOption extends IPopperControlOption {
     options: ControlOptionItem[];
     defaultValue?: string | string[];

package/es/control/zoom.d.ts

@@ -1,10 +1,10 @@
 import { PositionType } from '@antv/l7-core';
-import { ELType } from '@antv/l7-utils/src/dom';
+import { DOM } from '@antv/l7-utils';
 import { Control, IControlOption } from './baseControl';
 export interface IZoomControlOption extends IControlOption {
-    zoomInText: ELType | string;
+    zoomInText: DOM.ELType | string;
     zoomInTitle: string;
-    zoomOutText: ELType | string;
+    zoomOutText: DOM.ELType | string;
     zoomOutTitle: string;
 }
 export { Zoom };

package/es/interface.d.ts

@@ -1,4 +1,4 @@
-export declare type ControlEvent = 'show' | 'hide' | 'add' | 'remove' | string;
+export type ControlEvent = 'show' | 'hide' | 'add' | 'remove' | string;
 export interface IMarkerStyleOption {
     element?: (...args: any[]) => any;
     style: {

package/es/popup/layerPopup.d.ts

@@ -1,21 +1,22 @@
 import { ILayer, IPopupOption } from '@antv/l7-core';
 import { Container } from 'inversify';
 import Popup from './popup';
-export declare type LayerField = {
+export type LayerField = {
     field: string;
-    formatField?: (field: string) => string;
-    formatValue?: (value: any) => any;
+    formatField?: ((field: string) => string) | string;
+    formatValue?: ((value: any) => any) | string;
     getValue?: (feature: any) => any;
 };
-export declare type LayerPopupConfigItem = {
+export type LayerPopupConfigItem = {
     layer: ILayer | string;
     fields: Array<LayerField | string>;
 };
 export interface ILayerPopupOption extends IPopupOption {
-    config: LayerPopupConfigItem[];
+    config?: LayerPopupConfigItem[];
+    items?: LayerPopupConfigItem[];
     trigger: 'hover' | 'click';
 }
-declare type LayerMapInfo = {
+type LayerMapInfo = {
     onMouseMove?: (layer: ILayer, e: any) => void;
     onMouseOut?: (layer: ILayer, e: any) => void;
     onClick?: (layer: ILayer, e: any) => void;
@@ -36,6 +37,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
         layer: ILayer;
         featureId: number;
     };
+    protected get layerConfigItems(): LayerPopupConfigItem[];
     addTo(scene: Container): this;
     remove(): this;
     setOptions(option: Partial<ILayerPopupOption>): this;
@@ -63,10 +65,10 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
     protected getLayerInfoFrag(layer: ILayer, e: any): DocumentFragment;
     /**
      * 通过 Layer 配置访问到真实的 Layer 实例
-     * @param config
+     * @param configItem
      * @protected
      */
-    protected getLayerByConfig(config: LayerPopupConfigItem): ILayer | undefined;
+    protected getLayerByConfig(configItem: LayerPopupConfigItem): ILayer | undefined;
     /**
      * 判断当前展示的 Feature 是否和上一次查看的一致
      * @param layer

package/es/popup/layerPopup.js

@@ -40,6 +40,16 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
   }
 
   _createClass(LayerPopup, [{
+    key: "layerConfigItems",
+    get: function get() {
+      var _ref;
+
+      var _this$popupOption = this.popupOption,
+          config = _this$popupOption.config,
+          items = _this$popupOption.items;
+      return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
+    }
+  }, {
     key: "addTo",
     value: function addTo(scene) {
       _get(_getPrototypeOf(LayerPopup.prototype), "addTo", this).call(this, scene);
@@ -94,10 +104,10 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     value: function bindLayerEvent() {
       var _this2 = this;
 
-      var _this$popupOption = this.popupOption,
-          config = _this$popupOption.config,
-          trigger = _this$popupOption.trigger;
-      config.forEach(function (configItem) {
+      var trigger = this.popupOption.trigger;
+      this.layerConfigItems.forEach(function (configItem) {
+        var _layer$getSource;
+
         var layer = _this2.getLayerByConfig(configItem);
 
         if (!layer) {
@@ -122,7 +132,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           layer === null || layer === void 0 ? void 0 : layer.on('click', onClick);
         }
 
-        var source = layer.getSource();
+        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);
 
@@ -142,8 +152,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     value: function unbindLayerEvent() {
       var _this3 = this;
 
-      var config = this.popupOption.config;
-      config.forEach(function (configItem) {
+      this.layerConfigItems.forEach(function (configItem) {
         var layer = _this3.getLayerByConfig(configItem);
 
         var layerInfo = layer && _this3.layerConfigMap.get(layer);
@@ -170,9 +179,9 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         }
 
         if (onSourceUpdate) {
-          var _layer$getSource;
+          var _layer$getSource2;
 
-          layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.off('update', onSourceUpdate);
+          layer === null || layer === void 0 ? void 0 : (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 ? void 0 : _layer$getSource2.off('update', onSourceUpdate);
         }
       });
     }
@@ -250,17 +259,22 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
 
         var fields = layerInfo.fields;
         fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
-          var _ref = typeof fieldConfig === 'string' ? {
+          var _ref3, _ref4;
+
+          var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
+          {
             field: fieldConfig
           } : fieldConfig,
-              field = _ref.field,
-              formatField = _ref.formatField,
-              formatValue = _ref.formatValue,
-              getValue = _ref.getValue;
+              field = _ref2.field,
+              formatField = _ref2.formatField,
+              formatValue = _ref2.formatValue,
+              getValue = _ref2.getValue;
 
           var row = DOM.create('div', 'l7-layer-popup__row');
           var value = getValue ? getValue(e.feature) : get(_feature, field);
-          row.innerHTML = "".concat(formatField ? formatField(field) : field, ": ").concat(formatValue ? formatValue(value) : value);
+          var fieldText = (_ref3 = formatField instanceof Function ? formatField(field) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
+          var valueText = (_ref4 = formatValue instanceof Function ? formatValue(value) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
+          row.innerHTML = "<span class=\"l7-layer-popup__key\">".concat(fieldText, "</span>: <span class=\"l7-layer-popup__value\">").concat(valueText, "</span>");
           frag.appendChild(row);
         });
       }
@@ -269,14 +283,14 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     }
     /**
      * 通过 Layer 配置访问到真实的 Layer 实例
-     * @param config
+     * @param configItem
      * @protected
      */
 
   }, {
     key: "getLayerByConfig",
-    value: function getLayerByConfig(config) {
-      var layer = config.layer;
+    value: function getLayerByConfig(configItem) {
+      var layer = configItem.layer;
 
       if (layer instanceof Object) {
         return layer;

package/es/popup/popup.js

@@ -497,30 +497,49 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "updateCloseOnClick",
     value: function updateCloseOnClick(onlyClear) {
-      this.mapsService.off('click', this.onCloseButtonClick);
+      var _this3 = this;
 
-      if (this.popupOption.closeOnClick && !onlyClear) {
-        this.mapsService.on('click', this.onCloseButtonClick);
+      var mapsService = this.mapsService;
+
+      if (mapsService) {
+        this.mapsService.off('click', this.onCloseButtonClick);
+
+        if (this.popupOption.closeOnClick && !onlyClear) {
+          requestAnimationFrame(function () {
+            _this3.mapsService.on('click', _this3.onCloseButtonClick);
+          });
+        }
       }
     }
   }, {
     key: "updateCloseOnEsc",
     value: function updateCloseOnEsc(onlyClear) {
+      var _this4 = this;
+
       window.removeEventListener('keydown', this.onKeyDown);
 
       if (this.popupOption.closeOnEsc && !onlyClear) {
-        window.addEventListener('keydown', this.onKeyDown);
+        requestAnimationFrame(function () {
+          window.addEventListener('keydown', _this4.onKeyDown);
+        });
       }
     }
   }, {
     key: "updateFollowCursor",
     value: function updateFollowCursor(onlyClear) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var container = this.mapsService.getContainer();
-      container.removeEventListener('mousemove', this.onMouseMove);
+      var _this$mapsService,
+          _this5 = this;
 
-      if (this.popupOption.followCursor && !onlyClear) {
-        container.addEventListener('mousemove', this.onMouseMove);
+      var container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
+
+      if (container) {
+        container.removeEventListener('mousemove', this.onMouseMove);
+
+        if (this.popupOption.followCursor && !onlyClear) {
+          requestAnimationFrame(function () {
+            container.addEventListener('mousemove', _this5.onMouseMove);
+          });
+        }
       }
     }
   }, {

package/es/utils/popper.d.ts

@@ -2,15 +2,15 @@ import { EventEmitter } from 'eventemitter3';
 /**
  * 气泡位置枚举
  */
-export declare type PopperPlacement = 'top-start' | 'top' | 'top-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'right-start' | 'right' | 'right-end';
+export type PopperPlacement = 'top-start' | 'top' | 'top-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'right-start' | 'right' | 'right-end';
 /**
  * 气泡触发类型，当前支持 click 和 hover 两种类型
  */
-export declare type PopperTrigger = 'click' | 'hover';
+export type PopperTrigger = 'click' | 'hover';
 /**
  * 气泡内容类型
  */
-export declare type PopperContent = string | HTMLElement | null;
+export type PopperContent = string | HTMLElement | null;
 export interface IPopperOption {
     placement: PopperPlacement;
     trigger: PopperTrigger;

package/lib/popup/layerPopup.js

@@ -55,6 +55,16 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
   }
 
   (0, _createClass2.default)(LayerPopup, [{
+    key: "layerConfigItems",
+    get: function get() {
+      var _ref;
+
+      var _this$popupOption = this.popupOption,
+          config = _this$popupOption.config,
+          items = _this$popupOption.items;
+      return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
+    }
+  }, {
     key: "addTo",
     value: function addTo(scene) {
       (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "addTo", this).call(this, scene);
@@ -105,10 +115,10 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     value: function bindLayerEvent() {
       var _this2 = this;
 
-      var _this$popupOption = this.popupOption,
-          config = _this$popupOption.config,
-          trigger = _this$popupOption.trigger;
-      config.forEach(function (configItem) {
+      var trigger = this.popupOption.trigger;
+      this.layerConfigItems.forEach(function (configItem) {
+        var _layer$getSource;
+
         var layer = _this2.getLayerByConfig(configItem);
 
         if (!layer) {
@@ -133,7 +143,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           layer === null || layer === void 0 ? void 0 : layer.on('click', onClick);
         }
 
-        var source = layer.getSource();
+        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);
 
@@ -153,8 +163,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     value: function unbindLayerEvent() {
       var _this3 = this;
 
-      var config = this.popupOption.config;
-      config.forEach(function (configItem) {
+      this.layerConfigItems.forEach(function (configItem) {
         var layer = _this3.getLayerByConfig(configItem);
 
         var layerInfo = layer && _this3.layerConfigMap.get(layer);
@@ -181,9 +190,9 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         }
 
         if (onSourceUpdate) {
-          var _layer$getSource;
+          var _layer$getSource2;
 
-          layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.off('update', onSourceUpdate);
+          layer === null || layer === void 0 ? void 0 : (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 ? void 0 : _layer$getSource2.off('update', onSourceUpdate);
         }
       });
     }
@@ -261,18 +270,23 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
 
         var fields = layerInfo.fields;
         fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
-          var _ref = typeof fieldConfig === 'string' ? {
+          var _ref3, _ref4;
+
+          var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
+          {
             field: fieldConfig
           } : fieldConfig,
-              field = _ref.field,
-              formatField = _ref.formatField,
-              formatValue = _ref.formatValue,
-              getValue = _ref.getValue;
+              field = _ref2.field,
+              formatField = _ref2.formatField,
+              formatValue = _ref2.formatValue,
+              getValue = _ref2.getValue;
 
           var row = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
 
           var value = getValue ? getValue(e.feature) : (0, _lodash.get)(_feature, field);
-          row.innerHTML = "".concat(formatField ? formatField(field) : field, ": ").concat(formatValue ? formatValue(value) : value);
+          var fieldText = (_ref3 = formatField instanceof Function ? formatField(field) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
+          var valueText = (_ref4 = formatValue instanceof Function ? formatValue(value) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
+          row.innerHTML = "<span class=\"l7-layer-popup__key\">".concat(fieldText, "</span>: <span class=\"l7-layer-popup__value\">").concat(valueText, "</span>");
           frag.appendChild(row);
         });
       }
@@ -281,14 +295,14 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     }
     /**
      * 通过 Layer 配置访问到真实的 Layer 实例
-     * @param config
+     * @param configItem
      * @protected
      */
 
   }, {
     key: "getLayerByConfig",
-    value: function getLayerByConfig(config) {
-      var layer = config.layer;
+    value: function getLayerByConfig(configItem) {
+      var layer = configItem.layer;
 
       if (layer instanceof Object) {
         return layer;

package/lib/popup/popup.js

@@ -511,30 +511,49 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "updateCloseOnClick",
     value: function updateCloseOnClick(onlyClear) {
-      this.mapsService.off('click', this.onCloseButtonClick);
+      var _this3 = this;
 
-      if (this.popupOption.closeOnClick && !onlyClear) {
-        this.mapsService.on('click', this.onCloseButtonClick);
+      var mapsService = this.mapsService;
+
+      if (mapsService) {
+        this.mapsService.off('click', this.onCloseButtonClick);
+
+        if (this.popupOption.closeOnClick && !onlyClear) {
+          requestAnimationFrame(function () {
+            _this3.mapsService.on('click', _this3.onCloseButtonClick);
+          });
+        }
       }
     }
   }, {
     key: "updateCloseOnEsc",
     value: function updateCloseOnEsc(onlyClear) {
+      var _this4 = this;
+
       window.removeEventListener('keydown', this.onKeyDown);
 
       if (this.popupOption.closeOnEsc && !onlyClear) {
-        window.addEventListener('keydown', this.onKeyDown);
+        requestAnimationFrame(function () {
+          window.addEventListener('keydown', _this4.onKeyDown);
+        });
       }
     }
   }, {
     key: "updateFollowCursor",
     value: function updateFollowCursor(onlyClear) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var container = this.mapsService.getContainer();
-      container.removeEventListener('mousemove', this.onMouseMove);
+      var _this$mapsService,
+          _this5 = this;
 
-      if (this.popupOption.followCursor && !onlyClear) {
-        container.addEventListener('mousemove', this.onMouseMove);
+      var container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
+
+      if (container) {
+        container.removeEventListener('mousemove', this.onMouseMove);
+
+        if (this.popupOption.followCursor && !onlyClear) {
+          requestAnimationFrame(function () {
+            container.addEventListener('mousemove', _this5.onMouseMove);
+          });
+        }
       }
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.10.7",
+  "version": "2.10.9",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.10.7",
-    "@antv/l7-utils": "2.10.7",
+    "@antv/l7-core": "2.10.9",
+    "@antv/l7-utils": "2.10.9",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -36,11 +36,11 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.10.7",
+    "@antv/l7-test-utils": "2.10.9",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "99a4fe9b4f36e5f4bdac1294e83ff756e9a974d1",
+  "gitHead": "9fe64ef00875f4d96771542c16842468e61a8ef4",
   "publishConfig": {
     "access": "public"
   }