@antv/l7-component 2.15.5 → 2.16.1

package/es/popup/popup.js

@@ -6,76 +6,103 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 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 { TYPES } from '@antv/l7-core';
 import { anchorTranslate, anchorType, applyAnchorClass, DOM } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { createL7Icon } from "../utils/icon";
 export { Popup };
+
 var Popup = /*#__PURE__*/function (_EventEmitter) {
   _inherits(Popup, _EventEmitter);
+
   var _super = _createSuper(Popup);
+
   function Popup(cfg) {
     var _this;
+
     _classCallCheck(this, Popup);
+
     _this = _super.call(this);
+
     _defineProperty(_assertThisInitialized(_this), "isShow", true);
+
     _defineProperty(_assertThisInitialized(_this), "onMouseMove", function (e) {
       var _container$getBoundin;
+
       var container = _this.mapsService.getMapContainer();
+
       var _ref = (_container$getBoundin = container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) !== null && _container$getBoundin !== void 0 ? _container$getBoundin : {},
-        _ref$left = _ref.left,
-        left = _ref$left === void 0 ? 0 : _ref$left,
-        _ref$top = _ref.top,
-        top = _ref$top === void 0 ? 0 : _ref$top;
+          _ref$left = _ref.left,
+          left = _ref$left === void 0 ? 0 : _ref$left,
+          _ref$top = _ref.top,
+          top = _ref$top === void 0 ? 0 : _ref$top;
+
       _this.setPopupPosition(e.clientX - left, e.clientY - top);
     });
+
     _defineProperty(_assertThisInitialized(_this), "updateLngLatPosition", function () {
       if (!_this.mapsService || _this.popupOption.followCursor) {
         return;
       }
+
       var _this$lngLat = _this.lngLat,
-        lng = _this$lngLat.lng,
-        lat = _this$lngLat.lat;
+          lng = _this$lngLat.lng,
+          lat = _this$lngLat.lat;
+
       var _this$mapsService$lng = _this.mapsService.lngLatToContainer([lng, lat]),
-        x = _this$mapsService$lng.x,
-        y = _this$mapsService$lng.y;
+          x = _this$mapsService$lng.x,
+          y = _this$mapsService$lng.y;
+
       _this.setPopupPosition(x, y);
     });
+
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
       if (e.keyCode === 27) {
         _this.remove();
       }
     });
+
     _defineProperty(_assertThisInitialized(_this), "onCloseButtonClick", function (e) {
       if (e.stopPropagation) {
         e.stopPropagation();
       }
+
       _this.hide();
     });
+
     _defineProperty(_assertThisInitialized(_this), "update", function () {
       var hasPosition = !!_this.lngLat;
       var _this$popupOption = _this.popupOption,
-        className = _this$popupOption.className,
-        style = _this$popupOption.style,
-        maxWidth = _this$popupOption.maxWidth,
-        anchor = _this$popupOption.anchor,
-        stopPropagation = _this$popupOption.stopPropagation;
+          className = _this$popupOption.className,
+          style = _this$popupOption.style,
+          maxWidth = _this$popupOption.maxWidth,
+          anchor = _this$popupOption.anchor,
+          stopPropagation = _this$popupOption.stopPropagation;
+
       if (!_this.mapsService || !hasPosition || !_this.content) {
         return;
       }
-      var popupContainer = _this.mapsService.getMarkerContainer();
-      // 如果当前没有创建 Popup 容器则创建
+
+      var popupContainer = _this.mapsService.getMarkerContainer(); // 如果当前没有创建 Popup 容器则创建
+
+
       if (!_this.container && popupContainer) {
         _this.container = DOM.create('div', "l7-popup ".concat(className !== null && className !== void 0 ? className : '', " ").concat(!_this.isShow ? 'l7-popup-hide' : ''), popupContainer);
+
         if (style) {
           _this.container.setAttribute('style', style);
         }
+
         _this.tip = DOM.create('div', 'l7-popup-tip', _this.container);
-        _this.container.appendChild(_this.content);
 
-        // 高德地图需要阻止事件冒泡 // 测试mapbox 地图不需要添加
+        _this.container.appendChild(_this.content); // 高德地图需要阻止事件冒泡 // 测试mapbox 地图不需要添加
+
+
         if (stopPropagation) {
           ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach(function (type) {
             _this.container.addEventListener(type, function (e) {
@@ -83,14 +110,19 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
             });
           });
         }
+
         _this.container.style.whiteSpace = 'nowrap';
       }
+
       _this.updateLngLatPosition();
+
       DOM.setTransform(_this.container, "".concat(anchorTranslate[anchor]));
       applyAnchorClass(_this.container, anchor, 'popup');
+
       if (maxWidth) {
         var _this$container$getBo = _this.container.getBoundingClientRect(),
-          width = _this$container$getBo.width;
+            width = _this$container$getBo.width;
+
         if (width > parseFloat(maxWidth)) {
           _this.container.style.width = maxWidth;
         }
@@ -98,13 +130,17 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         _this.container.style.removeProperty('width');
       }
     });
+
     _this.popupOption = _objectSpread(_objectSpread({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
     var lngLat = _this.popupOption.lngLat;
+
     if (lngLat) {
       _this.lngLat = lngLat;
     }
+
     return _this;
   }
+
   _createClass(Popup, [{
     key: "lngLat",
     get:
@@ -147,9 +183,9 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
      * 当前是否展示
      * @protected
      */
-
     function get() {
       var _this$popupOption$lng;
+
       return (_this$popupOption$lng = this.popupOption.lngLat) !== null && _this$popupOption$lng !== void 0 ? _this$popupOption$lng : {
         lng: 0,
         lat: 0
@@ -172,59 +208,65 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.mapsService.on('camerachange', this.update);
       this.mapsService.on('viewchange', this.update);
       this.scene = scene;
-      this.update();
-      // 临时关闭
+      this.update(); // 临时关闭
+
       this.updateCloseOnClick();
       this.updateCloseOnEsc();
       this.updateFollowCursor();
       var _this$popupOption2 = this.popupOption,
-        html = _this$popupOption2.html,
-        text = _this$popupOption2.text,
-        title = _this$popupOption2.title;
+          html = _this$popupOption2.html,
+          text = _this$popupOption2.text,
+          title = _this$popupOption2.title;
+
       if (html) {
         this.setHTML(html);
       } else if (text) {
         this.setText(text);
       }
+
       if (title) {
         this.setTitle(title);
       }
+
       this.emit('open');
       return this;
-    }
+    } // 移除popup
 
-    // 移除popup
   }, {
     key: "remove",
     value: function remove() {
       if (!(this !== null && this !== void 0 && this.isOpen())) {
         return;
       }
+
       if (this.content) {
         DOM.remove(this.content);
       }
+
       if (this.container) {
-        DOM.remove(this.container);
-        // @ts-ignore
+        DOM.remove(this.container); // @ts-ignore
+
         delete this.container;
       }
+
       if (this.mapsService) {
         // TODO: mapbox AMap 事件同步
         this.mapsService.off('camerachange', this.update);
         this.mapsService.off('viewchange', this.update);
         this.updateCloseOnClick(true);
         this.updateCloseOnEsc(true);
-        this.updateFollowCursor(true);
-        // @ts-ignore
+        this.updateFollowCursor(true); // @ts-ignore
+
         delete this.mapsService;
       }
+
       this.emit('close');
       return this;
     }
-
     /**
      * 获取 option 配置
      */
+
   }, {
     key: "getOptions",
     value: function getOptions() {
@@ -235,38 +277,47 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value: function setOptions(option) {
       this.show();
       this.popupOption = _objectSpread(_objectSpread({}, this.popupOption), option);
+
       if (this.checkUpdateOption(option, ['html', 'text', 'title', 'closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
         if (this.container) {
-          DOM.remove(this.container);
-          // @ts-ignore
+          DOM.remove(this.container); // @ts-ignore
+
           this.container = undefined;
         }
+
         if (this.popupOption.html) {
           this.setHTML(this.popupOption.html);
         } else if (this.popupOption.text) {
           this.setText(this.popupOption.text);
         }
+
         if (this.popupOption.title) {
           this.setTitle(this.popupOption.title);
         }
       }
+
       if (this.checkUpdateOption(option, ['closeOnEsc'])) {
         this.updateCloseOnEsc();
       }
+
       if (this.checkUpdateOption(option, ['closeOnClick'])) {
         this.updateCloseOnClick();
       }
+
       if (this.checkUpdateOption(option, ['followCursor'])) {
         this.updateFollowCursor();
       }
+
       if (this.checkUpdateOption(option, ['html']) && option.html) {
         this.setHTML(option.html);
       } else if (this.checkUpdateOption(option, ['text']) && option.text) {
         this.setText(option.text);
       }
+
       if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
         this.setLnglat(option.lngLat);
       }
+
       return this;
     }
   }, {
@@ -287,9 +338,11 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       if (this.isShow) {
         return;
       }
+
       if (this.container) {
         DOM.removeClass(this.container, 'l7-popup-hide');
       }
+
       this.isShow = true;
       this.emit('show');
       return this;
@@ -300,29 +353,31 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       if (!this.isShow) {
         return;
       }
+
       if (this.container) {
         DOM.addClass(this.container, 'l7-popup-hide');
       }
+
       this.isShow = false;
       this.emit('hide');
       return this;
     }
-
     /**
      * 设置 HTML 内容
      * @param html
      */
+
   }, {
     key: "setHTML",
     value: function setHTML(html) {
       this.popupOption.html = html;
       return this.setDOMContent(html);
     }
-
     /**
      * 设置 Popup 展示文本
      * @param text
      */
+
   }, {
     key: "setText",
     value: function setText(text) {
@@ -334,15 +389,18 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value: function setTitle(title) {
       this.show();
       this.popupOption.title = title;
+
       if (title) {
         if (!this.contentTitle) {
           this.contentTitle = DOM.create('div', 'l7-popup-content__title');
+
           if (this.content.firstChild) {
             this.content.insertBefore(this.contentTitle, this.content.firstChild);
           } else {
             this.content.append(this.contentTitle);
           }
         }
+
         DOM.clearChildren(this.contentTitle);
         DOM.appendElementType(this.contentTitle, title);
       } else if (this.contentTitle) {
@@ -350,19 +408,21 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.contentTitle = undefined;
       }
     }
-
     /**
      * 将地图自动平移到气泡位置
      */
+
   }, {
     key: "panToPopup",
     value: function panToPopup() {
       var _this$lngLat2 = this.lngLat,
-        lng = _this$lngLat2.lng,
-        lat = _this$lngLat2.lat;
+          lng = _this$lngLat2.lng,
+          lat = _this$lngLat2.lat;
+
       if (this.popupOption.autoPan) {
         this.mapsService.panTo([lng, lat]);
       }
+
       return this;
     }
   }, {
@@ -370,23 +430,26 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value: function setLngLat(lngLat) {
       return this.setLnglat(lngLat);
     }
-
     /**
      * 设置 Popup 所在经纬度
      * @param lngLat
      */
+
   }, {
     key: "setLnglat",
     value: function setLnglat(lngLat) {
       var _this2 = this;
+
       this.show();
       this.lngLat = lngLat;
+
       if (Array.isArray(lngLat)) {
         this.lngLat = {
           lng: lngLat[0],
           lat: lngLat[1]
         };
       }
+
       if (this.mapsService) {
         // 防止事件重复监听
         this.mapsService.off('camerachange', this.update);
@@ -394,28 +457,31 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.mapsService.on('camerachange', this.update);
         this.mapsService.on('viewchange', this.update);
       }
+
       this.update();
+
       if (this.popupOption.autoPan) {
         setTimeout(function () {
           _this2.panToPopup();
         }, 0);
       }
+
       return this;
     }
-
     /**
      * 获取 Popup 所在经纬度
      */
+
   }, {
     key: "getLnglat",
     value: function getLnglat() {
       return this.lngLat;
     }
-
     /**
      * 设置 Popup 最大宽度
      * @param maxWidth
      */
+
   }, {
     key: "setMaxWidth",
     value: function setMaxWidth(maxWidth) {
@@ -430,8 +496,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     }
   }, {
     key: "getDefault",
-    value:
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    value: // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function getDefault(option) {
       // tslint:disable-next-line:no-object-literal-type-assertion
       return {
@@ -447,11 +512,11 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         followCursor: false
       };
     }
-
     /**
      * 设置 Popup 内容 HTML
      * @param element
      */
+
   }, {
     key: "setDOMContent",
     value: function setDOMContent(element) {
@@ -461,18 +526,21 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.update();
       return this;
     }
-
     /**
      * 绑定地图点击事件触发销毁 Popup
      * @protected
      */
+
   }, {
     key: "updateCloseOnClick",
     value: function updateCloseOnClick(onlyClear) {
       var _this3 = this;
+
       var mapsService = this.mapsService;
+
       if (mapsService) {
         mapsService === null || mapsService === void 0 ? void 0 : mapsService.off('click', this.onCloseButtonClick);
+
         if (this.popupOption.closeOnClick && !onlyClear) {
           requestAnimationFrame(function () {
             mapsService === null || mapsService === void 0 ? void 0 : mapsService.on('click', _this3.onCloseButtonClick);
@@ -484,6 +552,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     key: "updateCloseOnEsc",
     value: function updateCloseOnEsc(onlyClear) {
       window.removeEventListener('keydown', this.onKeyDown);
+
       if (this.popupOption.closeOnEsc && !onlyClear) {
         window.addEventListener('keydown', this.onKeyDown);
       }
@@ -492,9 +561,12 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     key: "updateFollowCursor",
     value: function updateFollowCursor(onlyClear) {
       var _this$mapsService;
+
       var container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
+
       if (container) {
         container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', this.onMouseMove);
+
         if (this.popupOption.followCursor && !onlyClear) {
           container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', this.onMouseMove);
         }
@@ -509,23 +581,27 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
      */
     function createContent() {
       var _this4 = this;
+
       if (this.content) {
         DOM.remove(this.content);
       }
+
       this.contentTitle = undefined;
       this.content = DOM.create('div', 'l7-popup-content', this.container);
       this.setTitle(this.popupOption.title);
+
       if (this.popupOption.closeButton) {
         var closeButton = createL7Icon('l7-icon-guanbi');
         DOM.addClass(closeButton, 'l7-popup-close-button');
         this.content.appendChild(closeButton);
+
         if (this.popupOption.closeButtonOffsets) {
           // 关闭按钮的偏移
           closeButton.style.right = this.popupOption.closeButtonOffsets[0] + 'px';
           closeButton.style.top = this.popupOption.closeButtonOffsets[1] + 'px';
-        }
+        } // this.closeButton.type = 'button';
+
 
-        // this.closeButton.type = 'button';
         closeButton.setAttribute('aria-label', 'Close popup');
         closeButton.addEventListener('click', function () {
           _this4.hide();
@@ -534,6 +610,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       } else {
         this.closeButton = undefined;
       }
+
       this.contentPanel = DOM.create('div', 'l7-popup-content__panel', this.content);
     }
   }, {
@@ -552,13 +629,13 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.container.style.top = top - offsets[1] + 'px';
       }
     }
-
     /**
      * 检查当前传入 option 是否包含 keys 字段
      * @param option
      * @param keys
      * @protected
      */
+
   }, {
     key: "checkUpdateOption",
     value: function checkUpdateOption(option, keys) {
@@ -567,6 +644,8 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       });
     }
   }]);
+
   return Popup;
 }(EventEmitter);
+
 export { Popup as default };

package/es/utils/anchor.js

@@ -1,4 +1,6 @@
-export var anchorType = /*#__PURE__*/function (anchorType) {
+export var anchorType;
+
+(function (anchorType) {
   anchorType["CENTER"] = "center";
   anchorType["TOP"] = "top";
   anchorType["TOP-LEFT"] = "top-left";
@@ -7,8 +9,8 @@ export var anchorType = /*#__PURE__*/function (anchorType) {
   anchorType["BOTTOM-LEFT"] = "bottom-left";
   anchorType["LEFT"] = "left";
   anchorType["RIGHT"] = "right";
-  return anchorType;
-}({});
+})(anchorType || (anchorType = {}));
+
 export var anchorTranslate = {
   center: 'translate(-50%,-50%)',
   top: 'translate(-50%,0)',
@@ -22,10 +24,12 @@ export var anchorTranslate = {
 };
 export function applyAnchorClass(element, anchor, prefix) {
   var classList = element.classList;
+
   for (var key in anchorTranslate) {
     if (anchorTranslate.hasOwnProperty(key)) {
       classList.remove("l7-".concat(prefix, "-anchor-").concat(key));
     }
   }
+
   classList.add("l7-".concat(prefix, "-anchor-").concat(anchor));
 }