@antv/l7-component 2.25.5 → 2.25.7

package/es/popup/popup.js

@@ -1,587 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { DOM, anchorTranslate, anchorType, applyAnchorClass } from '@antv/l7-utils';
-import { EventEmitter } from 'eventemitter3';
-import { createL7Icon } from "../utils/icon";
-export { Popup };
-export default class Popup extends EventEmitter {
-  get lngLat() {
-    var _this$popupOption$lng;
-    return (_this$popupOption$lng = this.popupOption.lngLat) !== null && _this$popupOption$lng !== void 0 ? _this$popupOption$lng : {
-      lng: 0,
-      lat: 0
-    };
-  }
-  set lngLat(newLngLat) {
-    this.popupOption.lngLat = newLngLat;
-  }
-  constructor(cfg) {
-    super();
-    /**
-     * 配置
-     * @protected
-     */
-    _defineProperty(this, "popupOption", void 0);
-    _defineProperty(this, "mapsService", void 0);
-    _defineProperty(this, "sceneService", void 0);
-    _defineProperty(this, "layerService", void 0);
-    _defineProperty(this, "scene", void 0);
-    /**
-     * 关闭按钮对应的 DOM
-     * @protected
-     */
-    _defineProperty(this, "closeButton", void 0);
-    /**
-     * Popup 的总容器 DOM，包含 content 和 tip
-     * @protected
-     */
-    _defineProperty(this, "container", void 0);
-    /**
-     * popup 气泡容器
-     * @protected
-     */
-    _defineProperty(this, "content", void 0);
-    /**
-     * popup 气泡标题
-     * @protected
-     */
-    _defineProperty(this, "contentTitle", void 0);
-    /**
-     * popup 内容容器
-     * @protected
-     */
-    _defineProperty(this, "contentPanel", void 0);
-    /**
-     * 气泡箭头对应的 DOM
-     * @protected
-     */
-    _defineProperty(this, "tip", void 0);
-    /**
-     * 当前是否展示
-     * @protected
-     */
-    _defineProperty(this, "isShow", true);
-    /**
-     * RAF 节流 ID
-     * @protected
-     */
-    _defineProperty(this, "rafId", null);
-    _defineProperty(this, "onMouseMove", e => {
-      var _container$getBoundin;
-      const container = this.mapsService.getMapContainer();
-      const {
-        left = 0,
-        top = 0
-      } = (_container$getBoundin = container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) !== null && _container$getBoundin !== void 0 ? _container$getBoundin : {};
-      this.setPopupPosition(e.clientX - left, e.clientY - top);
-    });
-    /**
-     * 将经纬度转换成对应的像素偏移位置
-     * @protected
-     */
-    _defineProperty(this, "updateLngLatPosition", () => {
-      if (!this.mapsService || this.popupOption.followCursor) {
-        return;
-      }
-      const {
-        lng,
-        lat
-      } = this.lngLat;
-      const {
-        x,
-        y
-      } = this.mapsService.lngLatToContainer([lng, lat]);
-      this.setPopupPosition(x, y);
-    });
-    //zoom时计算PopUp的位置并更新
-    _defineProperty(this, "updateLngLatPositionWhenZoom", ev => {
-      if (!this.mapsService || this.popupOption.followCursor) {
-        return;
-      }
-      const map = ev.map;
-      const viewHalf = map.getSize();
-      viewHalf.x = viewHalf.x / 2;
-      viewHalf.y = viewHalf.y / 2;
-      const center = ev.center;
-      const zoom = ev.zoom;
-      const projectedCenter = map.DE(this.lngLat, zoom, center);
-      projectedCenter.x = Math.round(projectedCenter.x);
-      projectedCenter.y = Math.round(projectedCenter.y);
-      this.setPopupPosition(projectedCenter.x, projectedCenter.y, true);
-    });
-    _defineProperty(this, "onKeyDown", e => {
-      if (e.keyCode === 27) {
-        this.remove();
-      }
-    });
-    _defineProperty(this, "onCloseButtonClick", e => {
-      if (e.stopPropagation) {
-        e.stopPropagation();
-      }
-      this.hide();
-    });
-    //更新位置 支持zoom时更新
-    _defineProperty(this, "updatePosition", (ev, zoom = true) => {
-      const hasPosition = !!this.lngLat;
-      const {
-        className,
-        style,
-        maxWidth,
-        anchor,
-        stopPropagation
-      } = this.popupOption;
-      if (!this.mapsService || !hasPosition || !this.content) {
-        return;
-      }
-      const popupContainer = this.mapsService.getMarkerContainer();
-      // 如果当前没有创建 Popup 容器则创建
-      if (!this.container && popupContainer) {
-        this.container = DOM.create('div', `l7-popup ${className !== null && className !== void 0 ? className : ''} ${!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 地图不需要添加
-        if (stopPropagation) {
-          ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach(type => {
-            this.container.addEventListener(type, e => {
-              e.stopPropagation();
-            });
-          });
-        }
-        this.container.style.whiteSpace = 'nowrap';
-      }
-      if (zoom) {
-        this.updateLngLatPositionWhenZoom(ev);
-      } else {
-        this.updateLngLatPosition();
-      }
-      DOM.setTransform(this.container, `${anchorTranslate[anchor]}`);
-      applyAnchorClass(this.container, anchor, 'popup');
-      if (maxWidth) {
-        const {
-          width
-        } = this.container.getBoundingClientRect();
-        if (width > parseFloat(maxWidth)) {
-          this.container.style.width = maxWidth;
-        }
-      } else {
-        this.container.style.removeProperty('width');
-      }
-    });
-    _defineProperty(this, "updateWhenZoom", ev => {
-      this.updatePosition(ev, true);
-    });
-    _defineProperty(this, "update", () => {
-      // 使用 RAF 节流，避免高频事件导致的性能问题
-      if (this.rafId !== null) {
-        return;
-      }
-      this.rafId = requestAnimationFrame(() => {
-        this.rafId = null;
-        this.updatePosition(null, false);
-      });
-    });
-    this.popupOption = _objectSpread(_objectSpread({}, this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
-    const {
-      lngLat
-    } = this.popupOption;
-    if (lngLat) {
-      this.lngLat = lngLat;
-    }
-  }
-  getIsShow() {
-    return this.isShow;
-  }
-  addTo(scene) {
-    this.mapsService = scene.mapService;
-    this.sceneService = scene.sceneService;
-    this.layerService = scene.layerService;
-    //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
-    // this.mapsService.on('zoomchange', this.updateWhenZoom);
-    this.mapsService.on('camerachange', this.update);
-    this.mapsService.on('viewchange', this.update);
-    this.scene = scene;
-    this.update();
-    // 临时关闭
-    this.updateCloseOnClick();
-    this.updateCloseOnEsc();
-    this.updateFollowCursor();
-    const {
-      html,
-      text,
-      title
-    } = this.popupOption;
-    if (html) {
-      this.setHTML(html);
-    } else if (text) {
-      this.setText(text);
-    }
-    if (title) {
-      this.setTitle(title);
-    }
-    this.emit('open');
-    return this;
-  }
-
-  // 移除popup
-  remove() {
-    if (!(this !== null && this !== void 0 && this.isOpen())) {
-      return;
-    }
-
-    // 取消未执行的 RAF
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-    if (this.content) {
-      DOM.remove(this.content);
-    }
-    if (this.container) {
-      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.mapsService.off('zoomchange', this.updateWhenZoom);
-      this.updateCloseOnClick(true);
-      this.updateCloseOnEsc(true);
-      this.updateFollowCursor(true);
-      // @ts-ignore
-      delete this.mapsService;
-    }
-    this.emit('close');
-    return this;
-  }
-
-  /**
-   * 获取 option 配置
-   */
-  getOptions() {
-    return this.popupOption;
-  }
-  setOptions(option) {
-    this.show();
-    const {
-      className: oldClassName
-    } = this.popupOption;
-    this.popupOption = _objectSpread(_objectSpread({}, this.popupOption), option);
-    if (this.checkUpdateOption(option, ['html', 'text', 'title', 'closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'lngLat', 'offsets'])) {
-      if (this.container) {
-        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, ['className'])) {
-      var _option$className;
-      if (oldClassName) {
-        this.container.classList.remove(oldClassName !== null && oldClassName !== void 0 ? oldClassName : '');
-      }
-      this.container.classList.add((_option$className = option.className) !== null && _option$className !== void 0 ? _option$className : '');
-    }
-    if (this.checkUpdateOption(option, ['style'])) {
-      var _option$style;
-      DOM.addStyle(this.container, (_option$style = option.style) !== null && _option$style !== void 0 ? _option$style : '');
-    }
-    if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
-      this.setLnglat(option.lngLat);
-    }
-    return this;
-  }
-  open() {
-    this.addTo(this.scene);
-    return this;
-  }
-  close() {
-    this.remove();
-    return this;
-  }
-  show() {
-    if (this.isShow) {
-      return;
-    }
-    if (this.container) {
-      DOM.removeClass(this.container, 'l7-popup-hide');
-    }
-    this.isShow = true;
-    this.emit('show');
-    return this;
-  }
-  hide() {
-    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
-   */
-  setHTML(html) {
-    this.popupOption.html = html;
-    return this.setDOMContent(html);
-  }
-
-  /**
-   * 设置 Popup 展示文本
-   * @param text
-   */
-  setText(text) {
-    this.popupOption.text = text;
-    return this.setDOMContent(window.document.createTextNode(text));
-  }
-  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) {
-      DOM.remove(this.contentTitle);
-      this.contentTitle = undefined;
-    }
-  }
-
-  /**
-   * 将地图自动平移到气泡位置
-   */
-  panToPopup() {
-    const {
-      lng,
-      lat
-    } = this.lngLat;
-    if (this.popupOption.autoPan) {
-      this.mapsService.panTo([lng, lat]);
-    }
-    return this;
-  }
-  setLngLat(lngLat) {
-    return this.setLnglat(lngLat);
-  }
-
-  /**
-   * 设置 Popup 所在经纬度
-   * @param lngLat
-   */
-  setLnglat(lngLat) {
-    this.show();
-    this.lngLat = lngLat;
-    if (Array.isArray(lngLat)) {
-      this.lngLat = {
-        lng: lngLat[0],
-        lat: lngLat[1]
-      };
-    }
-    if (this.mapsService) {
-      // 防止事件重复监听
-      // this.mapsService.off('zoonanim', this.updateWhenZoom);
-      this.mapsService.off('camerachange', this.update);
-      this.mapsService.off('viewchange', this.update);
-
-      // this.mapsService.on('zoonanim', this.updateWhenZoom);
-      this.mapsService.on('camerachange', this.update);
-      this.mapsService.on('viewchange', this.update);
-    }
-    this.update();
-    if (this.popupOption.autoPan) {
-      setTimeout(() => {
-        this.panToPopup();
-      }, 0);
-    }
-    return this;
-  }
-
-  /**
-   * 获取 Popup 所在经纬度
-   */
-  getLnglat() {
-    return this.lngLat;
-  }
-
-  /**
-   * 设置 Popup 最大宽度
-   * @param maxWidth
-   */
-  setMaxWidth(maxWidth) {
-    this.popupOption.maxWidth = maxWidth;
-    this.update();
-    return this;
-  }
-  isOpen() {
-    return !!this.mapsService;
-  }
-  getDefault(option) {
-    // tslint:disable-next-line:no-object-literal-type-assertion
-    return {
-      closeButton: true,
-      closeOnClick: false,
-      maxWidth: '240px',
-      offsets: [0, 0],
-      anchor: anchorType.BOTTOM,
-      stopPropagation: true,
-      autoPan: false,
-      autoClose: true,
-      closeOnEsc: false,
-      followCursor: false
-    };
-  }
-
-  /**
-   * 设置 Popup 内容 HTML
-   * @param element
-   */
-  setDOMContent(element) {
-    this.show();
-    this.createContent();
-    DOM.appendElementType(this.contentPanel, element);
-    this.update();
-    return this;
-  }
-
-  /**
-   * 绑定地图点击事件触发销毁 Popup
-   * @protected
-   */
-  updateCloseOnClick(onlyClear) {
-    const mapsService = this.mapsService;
-    if (mapsService) {
-      mapsService === null || mapsService === void 0 || mapsService.off('click', this.onCloseButtonClick);
-      if (this.popupOption.closeOnClick && !onlyClear) {
-        requestAnimationFrame(() => {
-          mapsService === null || mapsService === void 0 || mapsService.on('click', this.onCloseButtonClick);
-        });
-      }
-    }
-  }
-  updateCloseOnEsc(onlyClear) {
-    window.removeEventListener('keydown', this.onKeyDown);
-    if (this.popupOption.closeOnEsc && !onlyClear) {
-      window.addEventListener('keydown', this.onKeyDown);
-    }
-  }
-  updateFollowCursor(onlyClear) {
-    var _this$mapsService;
-    const container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
-    if (container) {
-      container === null || container === void 0 || container.removeEventListener('mousemove', this.onMouseMove);
-      if (this.popupOption.followCursor && !onlyClear) {
-        container === null || container === void 0 || container.addEventListener('mousemove', this.onMouseMove);
-      }
-    }
-  }
-  /**
-   * 创建 Popup 内容容器的 DOM （在每次 setHTML 或 setText 时都会被调用）
-   * @protected
-   */
-  createContent() {
-    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) {
-      const 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';
-      closeButton.setAttribute('aria-label', 'Close popup');
-      closeButton.addEventListener('click', () => {
-        this.hide();
-      });
-
-      // 防止点击 Popup 关闭按钮时，触发 Layer click 事件
-      closeButton.addEventListener('pointerup', e => {
-        e.stopPropagation();
-      });
-      closeButton.addEventListener('pointerdown', e => {
-        e.stopPropagation();
-      });
-      this.closeButton = closeButton;
-    } else {
-      this.closeButton = undefined;
-    }
-    this.contentPanel = DOM.create('div', 'l7-popup-content__panel', this.content);
-  }
-  /**
-   * 设置 Popup 相对于地图容器的 Position
-   * @param {Number} left
-   * @param {Number} top
-   * @param {Boolean} [useTransition=false] 是否使用过度效果
-   * @protected
-   */
-  setPopupPosition(left, top, useTransition = false) {
-    if (this.container) {
-      const {
-        offsets
-      } = this.popupOption;
-      this.container.style.left = left + offsets[0] + 'px';
-      this.container.style.top = top - offsets[1] + 'px';
-      if (useTransition) {
-        this.container.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
-      } else {
-        this.container.style.transition = '';
-      }
-    }
-  }
-
-  /**
-   * 检查当前传入 option 是否包含 keys 字段
-   * @param option
-   * @param keys
-   * @protected
-   */
-  checkUpdateOption(option, keys) {
-    return keys.some(key => key in option);
-  }
-}

package/es/utils/anchor.d.ts

@@ -1,22 +0,0 @@
-export declare enum anchorType {
-    'CENTER' = "center",
-    'TOP' = "top",
-    'TOP-LEFT' = "top-left",
-    'TOP-RIGHT' = "top-right",
-    'BOTTOM' = "bottom",
-    'BOTTOM-LEFT' = "bottom-left",
-    'LEFT' = "left",
-    'RIGHT' = "right"
-}
-export declare const anchorTranslate: {
-    center: string;
-    top: string;
-    'top-left': string;
-    'top-right': string;
-    bottom: string;
-    'bottom-left': string;
-    'bottom-right': string;
-    left: string;
-    right: string;
-};
-export declare function applyAnchorClass(element: HTMLElement, anchor: string, prefix: string): void;

package/es/utils/anchor.js

@@ -1,31 +0,0 @@
-export let anchorType = /*#__PURE__*/function (anchorType) {
-  anchorType["CENTER"] = "center";
-  anchorType["TOP"] = "top";
-  anchorType["TOP-LEFT"] = "top-left";
-  anchorType["TOP-RIGHT"] = "top-right";
-  anchorType["BOTTOM"] = "bottom";
-  anchorType["BOTTOM-LEFT"] = "bottom-left";
-  anchorType["LEFT"] = "left";
-  anchorType["RIGHT"] = "right";
-  return anchorType;
-}({});
-export const anchorTranslate = {
-  center: 'translate(-50%,-50%)',
-  top: 'translate(-50%,0)',
-  'top-left': 'translate(0,0)',
-  'top-right': 'translate(-100%,0)',
-  bottom: 'translate(-50%,-100%)',
-  'bottom-left': 'translate(0,-100%)',
-  'bottom-right': 'translate(-100%,-100%)',
-  left: 'translate(0,-50%)',
-  right: 'translate(-100%,-50%)'
-};
-export function applyAnchorClass(element, anchor, prefix) {
-  const classList = element.classList;
-  for (const key in anchorTranslate) {
-    if (anchorTranslate.hasOwnProperty(key)) {
-      classList.remove(`l7-${prefix}-anchor-${key}`);
-    }
-  }
-  classList.add(`l7-${prefix}-anchor-${anchor}`);
-}

package/es/utils/eventManager.d.ts

@@ -1,42 +0,0 @@
-import type { IMapService } from '@antv/l7-core';
-type EventHandler = (...args: any[]) => void;
-/**
- * 事件管理器，用于统一管理事件绑定和解绑
- * 解决组件销毁时事件未正确清理导致的内存泄漏问题
- */
-export declare class EventManager {
-    private bindings;
-    /**
-     * 绑定事件
-     * @param target 事件目标对象
-     * @param event 事件名称
-     * @param handler 事件处理函数
-     */
-    on(target: IMapService, event: string, handler: EventHandler): this;
-    on(target: HTMLElement, event: string, handler: EventHandler): this;
-    on(target: Window, event: string, handler: EventHandler): this;
-    on(target: Document, event: string, handler: EventHandler): this;
-    /**
-     * 解绑指定事件
-     * @param target 事件目标对象
-     * @param event 事件名称
-     * @param handler 事件处理函数
-     */
-    off(target: IMapService, event: string, handler: EventHandler): this;
-    off(target: HTMLElement, event: string, handler: EventHandler): this;
-    off(target: Window, event: string, handler: EventHandler): this;
-    off(target: Document, event: string, handler: EventHandler): this;
-    /**
-     * 清除所有绑定的事件
-     */
-    clear(): void;
-    /**
-     * 获取当前绑定的事件数量
-     */
-    size(): number;
-    /**
-     * 判断目标是否为 MapService
-     */
-    private isMapService;
-}
-export default EventManager;