@antv/l7-component 2.9.26-alpha.0 → 2.9.26

package/lib/popup.js

@@ -0,0 +1,216 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/popup.ts
+var popup_exports = {};
+__export(popup_exports, {
+  default: () => Popup
+});
+module.exports = __toCommonJS(popup_exports);
+var import_l7_core = require("@antv/l7-core");
+var import_l7_utils = require("@antv/l7-utils");
+var import_eventemitter3 = require("eventemitter3");
+var Popup = class extends import_eventemitter3.EventEmitter {
+  constructor(cfg) {
+    super();
+    this.popupOption = {
+      ...this.getdefault(),
+      ...cfg
+    };
+    (0, import_l7_utils.bindAll)(["update", "onClickClose", "remove"], this);
+  }
+  addTo(scene) {
+    this.mapsService = scene.get(import_l7_core.TYPES.IMapService);
+    this.sceneSerive = scene.get(import_l7_core.TYPES.ISceneService);
+    this.mapsService.on("camerachange", this.update);
+    this.mapsService.on("viewchange", this.update);
+    this.scene = scene;
+    this.update();
+    if (this.popupOption.closeOnClick) {
+      this.timeoutInstance = setTimeout(() => {
+        this.mapsService.on("click", this.onClickClose);
+      }, 30);
+    }
+    this.emit("open");
+    return this;
+  }
+  close() {
+    this.remove();
+  }
+  open() {
+    this.addTo(this.scene);
+  }
+  setHTML(html) {
+    const frag = window.document.createDocumentFragment();
+    const temp = window.document.createElement("body");
+    let child;
+    temp.innerHTML = html;
+    while (true) {
+      child = temp.firstChild;
+      if (!child) {
+        break;
+      }
+      frag.appendChild(child);
+    }
+    return this.setDOMContent(frag);
+  }
+  setLnglat(lngLat) {
+    this.lngLat = lngLat;
+    if (Array.isArray(lngLat)) {
+      this.lngLat = {
+        lng: lngLat[0],
+        lat: lngLat[1]
+      };
+    }
+    if (this.mapsService) {
+      this.mapsService.on("camerachange", this.update);
+      this.mapsService.on("viewchange", this.update);
+    }
+    this.update();
+    return this;
+  }
+  getLnglat() {
+    return this.lngLat;
+  }
+  setText(text) {
+    return this.setDOMContent(window.document.createTextNode(text));
+  }
+  setMaxWidth(maxWidth) {
+    this.popupOption.maxWidth = maxWidth;
+    this.update();
+    return this;
+  }
+  setDOMContent(htmlNode) {
+    this.createContent();
+    this.content.appendChild(htmlNode);
+    this.update();
+    return this;
+  }
+  remove() {
+    if (this.content) {
+      this.removeDom(this.content);
+    }
+    if (this.container) {
+      this.removeDom(this.container);
+      delete this.container;
+    }
+    if (this.mapsService) {
+      this.mapsService.off("camerachange", this.update);
+      this.mapsService.off("viewchange", this.update);
+      this.mapsService.off("click", this.onClickClose);
+      delete this.mapsService;
+    }
+    clearTimeout(this.timeoutInstance);
+    this.emit("close");
+    return this;
+  }
+  isOpen() {
+    return !!this.mapsService;
+  }
+  createContent() {
+    if (this.content) {
+      import_l7_utils.DOM.remove(this.content);
+    }
+    this.content = import_l7_utils.DOM.create("div", "l7-popup-content", this.container);
+    if (this.popupOption.closeButton) {
+      this.closeButton = import_l7_utils.DOM.create("button", "l7-popup-close-button", this.content);
+      if (this.popupOption.closeButtonOffsets) {
+        this.closeButton.style.right = this.popupOption.closeButtonOffsets[0] + "px";
+        this.closeButton.style.top = this.popupOption.closeButtonOffsets[1] + "px";
+      }
+      this.closeButton.setAttribute("aria-label", "Close popup");
+      this.closeButton.innerHTML = "×";
+      this.closeButton.addEventListener("click", this.onClickClose);
+    }
+  }
+  creatDom(tagName, className, container) {
+    const el = window.document.createElement(tagName);
+    if (className !== void 0) {
+      el.className = className;
+    }
+    if (container) {
+      container.appendChild(el);
+    }
+    return el;
+  }
+  removeDom(node) {
+    if (node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  }
+  getdefault() {
+    return {
+      closeButton: true,
+      closeOnClick: true,
+      maxWidth: "240px",
+      offsets: [0, 0],
+      anchor: import_l7_utils.anchorType.BOTTOM,
+      className: "",
+      stopPropagation: true
+    };
+  }
+  onClickClose(e) {
+    if (e.stopPropagation) {
+      e.stopPropagation();
+    }
+    this.remove();
+  }
+  update() {
+    const hasPosition = this.lngLat;
+    const { className, maxWidth, anchor } = this.popupOption;
+    if (!this.mapsService || !hasPosition || !this.content) {
+      return;
+    }
+    const popupContainer = this.mapsService.getMarkerContainer();
+    if (!this.container && popupContainer) {
+      this.container = this.creatDom("div", "l7-popup", popupContainer);
+      this.tip = this.creatDom("div", "l7-popup-tip", this.container);
+      this.container.appendChild(this.content);
+      if (className) {
+        className.split(" ").forEach((name) => this.container.classList.add(name));
+      }
+      const { stopPropagation } = this.popupOption;
+      if (stopPropagation) {
+        ["mousemove", "mousedown", "mouseup", "click", "dblclick"].forEach((type) => {
+          this.container.addEventListener(type, (e) => {
+            e.stopPropagation();
+          });
+        });
+      }
+      this.container.style.whiteSpace = "nowrap";
+    }
+    if (maxWidth && this.container.style.maxWidth !== maxWidth) {
+      this.container.style.maxWidth = maxWidth;
+    }
+    this.updatePosition();
+    import_l7_utils.DOM.setTransform(this.container, `${import_l7_utils.anchorTranslate[anchor]}`);
+    (0, import_l7_utils.applyAnchorClass)(this.container, anchor, "popup");
+  }
+  updatePosition() {
+    if (!this.mapsService) {
+      return;
+    }
+    const { lng, lat } = this.lngLat;
+    const { offsets } = this.popupOption;
+    const pos = this.mapsService.lngLatToContainer([lng, lat]);
+    this.container.style.left = pos.x + offsets[0] + "px";
+    this.container.style.top = pos.y - offsets[1] + "px";
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/utils/anchor.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/anchor.ts
+var anchor_exports = {};
+__export(anchor_exports, {
+  anchorTranslate: () => anchorTranslate,
+  anchorType: () => anchorType,
+  applyAnchorClass: () => applyAnchorClass
+});
+module.exports = __toCommonJS(anchor_exports);
+var anchorType = /* @__PURE__ */ ((anchorType2) => {
+  anchorType2["CENTER"] = "center";
+  anchorType2["TOP"] = "top";
+  anchorType2["TOP-LEFT"] = "top-left";
+  anchorType2["TOP-RIGHT"] = "top-right";
+  anchorType2["BOTTOM"] = "bottom";
+  anchorType2["BOTTOM-LEFT"] = "bottom-left";
+  anchorType2["LEFT"] = "left";
+  anchorType2["RIGHT"] = "right";
+  return anchorType2;
+})(anchorType || {});
+var 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%)"
+};
+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}`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anchorTranslate,
+  anchorType,
+  applyAnchorClass
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.9.26-alpha.0",
+  "version": "2.9.26",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.9.26-alpha.0",
-    "@antv/l7-utils": "2.9.26-alpha.0",
+    "@antv/l7-core": "2.9.26",
+    "@antv/l7-utils": "2.9.26",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -35,9 +35,9 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.9.26-alpha.0"
+    "@antv/l7-test-utils": "2.9.26"
   },
-  "gitHead": "177d0c84b6f1043ec91da9617dc4e32e769c0025",
+  "gitHead": "4e6f44c4ae44f7e9b9bbe627fd35406b3e7a63e1",
   "publishConfig": {
     "access": "public"
   }