@antv/l7-component 2.15.5 → 2.16.1

package/lib/popup/popup.js

@@ -1,52 +1,77 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Popup = void 0;
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _l7Core = require("@antv/l7-core");
+
 var _l7Utils = require("@antv/l7-utils");
+
 var _eventemitter = require("eventemitter3");
+
 var _icon = require("../utils/icon");
+
 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; } }
+
 var Popup = /*#__PURE__*/function (_EventEmitter) {
   (0, _inherits2.default)(Popup, _EventEmitter);
+
   var _super = _createSuper(Popup);
+
   function Popup(cfg) {
     var _this;
+
     (0, _classCallCheck2.default)(this, Popup);
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isShow", true);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
@@ -58,30 +83,37 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       if (e.stopPropagation) {
         e.stopPropagation();
       }
+
       _this.hide();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = _l7Utils.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 = _l7Utils.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) {
@@ -89,14 +121,20 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
             });
           });
         }
+
         _this.container.style.whiteSpace = 'nowrap';
       }
+
       _this.updateLngLatPosition();
+
       _l7Utils.DOM.setTransform(_this.container, "".concat(_l7Utils.anchorTranslate[anchor]));
+
       (0, _l7Utils.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;
         }
@@ -106,11 +144,14 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     });
     _this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
     var lngLat = _this.popupOption.lngLat;
+
     if (lngLat) {
       _this.lngLat = lngLat;
     }
+
     return _this;
   }
+
   (0, _createClass2.default)(Popup, [{
     key: "lngLat",
     get:
@@ -153,9 +194,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
@@ -178,59 +219,66 @@ 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) {
         _l7Utils.DOM.remove(this.content);
       }
+
       if (this.container) {
-        _l7Utils.DOM.remove(this.container);
-        // @ts-ignore
+        _l7Utils.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() {
@@ -241,38 +289,48 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value: function setOptions(option) {
       this.show();
       this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.popupOption), option);
+
       if (this.checkUpdateOption(option, ['html', 'text', 'title', 'closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
         if (this.container) {
-          _l7Utils.DOM.remove(this.container);
-          // @ts-ignore
+          _l7Utils.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;
     }
   }, {
@@ -293,9 +351,11 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       if (this.isShow) {
         return;
       }
+
       if (this.container) {
         _l7Utils.DOM.removeClass(this.container, 'l7-popup-hide');
       }
+
       this.isShow = true;
       this.emit('show');
       return this;
@@ -306,29 +366,31 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       if (!this.isShow) {
         return;
       }
+
       if (this.container) {
         _l7Utils.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) {
@@ -340,35 +402,42 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value: function setTitle(title) {
       this.show();
       this.popupOption.title = title;
+
       if (title) {
         if (!this.contentTitle) {
           this.contentTitle = _l7Utils.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);
           }
         }
+
         _l7Utils.DOM.clearChildren(this.contentTitle);
+
         _l7Utils.DOM.appendElementType(this.contentTitle, title);
       } else if (this.contentTitle) {
         _l7Utils.DOM.remove(this.contentTitle);
+
         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;
     }
   }, {
@@ -376,23 +445,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);
@@ -400,28 +472,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) {
@@ -436,8 +511,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 {
@@ -453,32 +527,37 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         followCursor: false
       };
     }
-
     /**
      * 设置 Popup 内容 HTML
      * @param element
      */
+
   }, {
     key: "setDOMContent",
     value: function setDOMContent(element) {
       this.show();
       this.createContent();
+
       _l7Utils.DOM.appendElementType(this.contentPanel, element);
+
       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);
@@ -490,6 +569,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);
       }
@@ -498,9 +578,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);
         }
@@ -515,23 +598,29 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
      */
     function createContent() {
       var _this4 = this;
+
       if (this.content) {
         _l7Utils.DOM.remove(this.content);
       }
+
       this.contentTitle = undefined;
       this.content = _l7Utils.DOM.create('div', 'l7-popup-content', this.container);
       this.setTitle(this.popupOption.title);
+
       if (this.popupOption.closeButton) {
         var closeButton = (0, _icon.createL7Icon)('l7-icon-guanbi');
+
         _l7Utils.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();
@@ -540,6 +629,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       } else {
         this.closeButton = undefined;
       }
+
       this.contentPanel = _l7Utils.DOM.create('div', 'l7-popup-content__panel', this.content);
     }
   }, {
@@ -558,13 +648,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) {
@@ -575,4 +665,5 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
   }]);
   return Popup;
 }(_eventemitter.EventEmitter);
+
 exports.default = exports.Popup = Popup;

package/lib/utils/anchor.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.anchorType = exports.anchorTranslate = void 0;
 exports.applyAnchorClass = applyAnchorClass;
-var anchorType = /*#__PURE__*/function (anchorType) {
+var anchorType;
+exports.anchorType = anchorType;
+
+(function (anchorType) {
   anchorType["CENTER"] = "center";
   anchorType["TOP"] = "top";
   anchorType["TOP-LEFT"] = "top-left";
@@ -14,9 +17,8 @@ var anchorType = /*#__PURE__*/function (anchorType) {
   anchorType["BOTTOM-LEFT"] = "bottom-left";
   anchorType["LEFT"] = "left";
   anchorType["RIGHT"] = "right";
-  return anchorType;
-}({});
-exports.anchorType = anchorType;
+})(anchorType || (exports.anchorType = anchorType = {}));
+
 var anchorTranslate = {
   center: 'translate(-50%,-50%)',
   top: 'translate(-50%,0)',
@@ -29,12 +31,15 @@ var anchorTranslate = {
   right: 'translate(-100%,-50%)'
 };
 exports.anchorTranslate = anchorTranslate;
+
 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));
 }

package/lib/utils/icon.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createL7Icon = void 0;
+
 var createL7Icon = function createL7Icon(className) {
   var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.classList.add('l7-iconfont');
@@ -13,4 +14,5 @@ var createL7Icon = function createL7Icon(className) {
   svg.appendChild(use);
   return svg;
 };
+
 exports.createL7Icon = createL7Icon;