@antv/l7-component 2.9.32-alpha.2 → 2.9.32-alpha.4

package/lib/utils/popper.js

@@ -0,0 +1,209 @@
+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/popper.ts
+var popper_exports = {};
+__export(popper_exports, {
+  Popper: () => Popper
+});
+module.exports = __toCommonJS(popper_exports);
+var import_l7_utils = require("@antv/l7-utils");
+var import_eventemitter3 = require("eventemitter3");
+var _Popper = class extends import_eventemitter3.EventEmitter {
+  constructor(button, option) {
+    super();
+    this.isShow = false;
+    this.timeout = null;
+    this.show = () => {
+      if (this.isShow || !this.contentDOM.innerHTML) {
+        return this;
+      }
+      this.resetPopperPosition();
+      import_l7_utils.DOM.removeClass(this.popperDOM, "l7-popper-hide");
+      this.isShow = true;
+      if (this.option.unique) {
+        _Popper.conflictPopperList.forEach((popper) => {
+          if (popper !== this && popper.isShow) {
+            popper.hide();
+          }
+        });
+      }
+      this.emit("show");
+      return this;
+    };
+    this.hide = () => {
+      if (!this.isShow) {
+        return this;
+      }
+      import_l7_utils.DOM.addClass(this.popperDOM, "l7-popper-hide");
+      this.isShow = false;
+      this.emit("hide");
+      return this;
+    };
+    this.setHideTimeout = () => {
+      if (this.timeout) {
+        return;
+      }
+      this.timeout = window.setTimeout(() => {
+        if (!this.isShow) {
+          return;
+        }
+        this.hide();
+        this.timeout = null;
+      }, 300);
+    };
+    this.clearHideTimeout = () => {
+      if (this.timeout) {
+        window.clearTimeout(this.timeout);
+        this.timeout = null;
+      }
+    };
+    this.onBtnClick = () => {
+      if (this.isShow) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    };
+    this.onBtnMouseLeave = () => {
+      this.setHideTimeout();
+    };
+    this.onBtnMouseMove = () => {
+      this.clearHideTimeout();
+      if (this.isShow) {
+        return;
+      }
+      this.show();
+    };
+    this.button = button;
+    this.option = option;
+    this.init();
+    if (option.unique) {
+      _Popper.conflictPopperList.push(this);
+    }
+  }
+  get buttonRect() {
+    return this.button.getBoundingClientRect();
+  }
+  getPopperDOM() {
+    return this.popperDOM;
+  }
+  getIsShow() {
+    return this.isShow;
+  }
+  getContent() {
+    return this.content;
+  }
+  setContent(content) {
+    if (typeof content === "string") {
+      this.contentDOM.innerHTML = content;
+    } else if (content instanceof HTMLElement) {
+      import_l7_utils.DOM.clearChildren(this.contentDOM);
+      this.contentDOM.appendChild(content);
+    }
+    this.content = content;
+  }
+  init() {
+    const { trigger } = this.option;
+    this.popperDOM = this.createPopper();
+    if (trigger === "click") {
+      this.button.addEventListener("click", this.onBtnClick);
+    } else {
+      this.button.addEventListener("mousemove", this.onBtnMouseMove);
+      this.button.addEventListener("mouseleave", this.onBtnMouseLeave);
+      this.popperDOM.addEventListener("mousemove", this.onBtnMouseMove);
+      this.popperDOM.addEventListener("mouseleave", this.onBtnMouseLeave);
+    }
+  }
+  destroy() {
+    this.button.removeEventListener("click", this.onBtnClick);
+    this.button.removeEventListener("mousemove", this.onBtnMouseMove);
+    this.button.removeEventListener("mousemove", this.onBtnMouseLeave);
+    this.popperDOM.removeEventListener("mousemove", this.onBtnMouseMove);
+    this.popperDOM.removeEventListener("mouseleave", this.onBtnMouseLeave);
+    import_l7_utils.DOM.remove(this.popperDOM);
+  }
+  resetPopperPosition() {
+    const popperStyleObj = {};
+    const { container, offset = [0, 0], placement } = this.option;
+    const [offsetX, offsetY] = offset;
+    const buttonRect = this.button.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const { left, right, top, bottom } = import_l7_utils.DOM.getDiffRect(buttonRect, containerRect);
+    let isTransformX = false;
+    let isTransformY = false;
+    if (/^(left|right)/.test(placement)) {
+      if (placement.includes("left")) {
+        popperStyleObj.right = `${buttonRect.width + right}px`;
+      } else if (placement.includes("right")) {
+        popperStyleObj.left = `${buttonRect.width + left}px`;
+      }
+      if (placement.includes("start")) {
+        popperStyleObj.top = `${top}px`;
+      } else if (placement.includes("end")) {
+        popperStyleObj.bottom = `${bottom}px`;
+      } else {
+        popperStyleObj.top = `${top + buttonRect.height / 2}px`;
+        isTransformY = true;
+        popperStyleObj.transform = `translate(${offsetX}px, calc(${offsetY}px - 50%))`;
+      }
+    } else if (/^(top|bottom)/.test(placement)) {
+      if (placement.includes("top")) {
+        popperStyleObj.bottom = `${buttonRect.height + bottom}px`;
+      } else if (placement.includes("bottom")) {
+        popperStyleObj.top = `${buttonRect.height + top}px`;
+      }
+      if (placement.includes("start")) {
+        popperStyleObj.left = `${left}px`;
+      } else if (placement.includes("end")) {
+        popperStyleObj.right = `${right}px`;
+      } else {
+        popperStyleObj.left = `${left + buttonRect.width / 2}px`;
+        isTransformX = true;
+        popperStyleObj.transform = `translate(calc(${offsetX}px - 50%), ${offsetY}px)`;
+      }
+    }
+    popperStyleObj.transform = `translate(calc(${offsetX}px - ${isTransformX ? "50%" : "0%"}), calc(${offsetY}px - ${isTransformY ? "50%" : "0%"})`;
+    const posList = placement.split("-");
+    if (posList.length) {
+      import_l7_utils.DOM.addClass(this.popperDOM, posList.map((pos) => `l7-popper-${pos}`).join(" "));
+    }
+    import_l7_utils.DOM.addStyle(this.popperDOM, import_l7_utils.DOM.css2Style(popperStyleObj));
+  }
+  createPopper() {
+    const { container, className = "", content } = this.option;
+    const popper = import_l7_utils.DOM.create("div", `l7-popper l7-popper-hide ${className}`);
+    const popperContent = import_l7_utils.DOM.create("div", "l7-popper-content");
+    const popperArrow = import_l7_utils.DOM.create("div", "l7-popper-arrow");
+    popper.appendChild(popperContent);
+    popper.appendChild(popperArrow);
+    container.appendChild(popper);
+    this.popperDOM = popper;
+    this.contentDOM = popperContent;
+    if (content) {
+      this.setContent(content);
+    }
+    return popper;
+  }
+};
+var Popper = _Popper;
+Popper.conflictPopperList = [];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popper
+});

package/lib/utils/screenfull.js

@@ -0,0 +1,160 @@
+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/screenfull.ts
+var screenfull_exports = {};
+__export(screenfull_exports, {
+  default: () => screenfull_default
+});
+module.exports = __toCommonJS(screenfull_exports);
+var methodMap = [
+  [
+    "requestFullscreen",
+    "exitFullscreen",
+    "fullscreenElement",
+    "fullscreenEnabled",
+    "fullscreenchange",
+    "fullscreenerror"
+  ],
+  [
+    "webkitRequestFullscreen",
+    "webkitExitFullscreen",
+    "webkitFullscreenElement",
+    "webkitFullscreenEnabled",
+    "webkitfullscreenchange",
+    "webkitfullscreenerror"
+  ],
+  [
+    "webkitRequestFullScreen",
+    "webkitCancelFullScreen",
+    "webkitCurrentFullScreenElement",
+    "webkitCancelFullScreen",
+    "webkitfullscreenchange",
+    "webkitfullscreenerror"
+  ],
+  [
+    "mozRequestFullScreen",
+    "mozCancelFullScreen",
+    "mozFullScreenElement",
+    "mozFullScreenEnabled",
+    "mozfullscreenchange",
+    "mozfullscreenerror"
+  ],
+  [
+    "msRequestFullscreen",
+    "msExitFullscreen",
+    "msFullscreenElement",
+    "msFullscreenEnabled",
+    "MSFullscreenChange",
+    "MSFullscreenError"
+  ]
+];
+var nativeAPI = (() => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const unprefixedMethods = methodMap[0];
+  const returnValue = {};
+  for (const methodList of methodMap) {
+    const exitFullscreenMethod = methodList == null ? void 0 : methodList[1];
+    if (exitFullscreenMethod in document) {
+      for (const [index, method] of methodList.entries()) {
+        returnValue[unprefixedMethods[index]] = method;
+      }
+      return returnValue;
+    }
+  }
+  return false;
+})();
+var eventNameMap = {
+  change: nativeAPI.fullscreenchange,
+  error: nativeAPI.fullscreenerror
+};
+var screenfull = {
+  request(element = document.documentElement, options) {
+    return new Promise((resolve, reject) => {
+      const onFullScreenEntered = () => {
+        screenfull.off("change", onFullScreenEntered);
+        resolve();
+      };
+      screenfull.on("change", onFullScreenEntered);
+      const returnPromise = element[nativeAPI.requestFullscreen](options);
+      if (returnPromise instanceof Promise) {
+        returnPromise.then(onFullScreenEntered).catch(reject);
+      }
+    });
+  },
+  exit() {
+    return new Promise((resolve, reject) => {
+      if (!screenfull.isFullscreen) {
+        resolve();
+        return;
+      }
+      const onFullScreenExit = () => {
+        screenfull.off("change", onFullScreenExit);
+        resolve();
+      };
+      screenfull.on("change", onFullScreenExit);
+      const returnPromise = document[nativeAPI.exitFullscreen]();
+      if (returnPromise instanceof Promise) {
+        returnPromise.then(onFullScreenExit).catch(reject);
+      }
+    });
+  },
+  toggle(element, options) {
+    return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
+  },
+  onchange(callback) {
+    screenfull.on("change", callback);
+  },
+  onerror(callback) {
+    screenfull.on("error", callback);
+  },
+  on(event, callback) {
+    const eventName = eventNameMap[event];
+    if (eventName) {
+      document.addEventListener(eventName, callback, false);
+    }
+  },
+  off(event, callback) {
+    const eventName = eventNameMap[event];
+    if (eventName) {
+      document.removeEventListener(eventName, callback, false);
+    }
+  },
+  raw: nativeAPI
+};
+Object.defineProperties(screenfull, {
+  isFullscreen: {
+    get: () => Boolean(document[nativeAPI.fullscreenElement])
+  },
+  element: {
+    enumerable: true,
+    get: () => document[nativeAPI.fullscreenElement] ?? void 0
+  },
+  isEnabled: {
+    enumerable: true,
+    get: () => Boolean(document[nativeAPI.fullscreenEnabled])
+  }
+});
+if (!nativeAPI) {
+  screenfull = { isEnabled: false };
+}
+var screenfull_default = screenfull;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.9.32-alpha.2",
+  "version": "2.9.32-alpha.4",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.9.32-alpha.2",
-    "@antv/l7-utils": "2.9.32-alpha.2",
+    "@antv/l7-core": "2.9.32-alpha.4",
+    "@antv/l7-utils": "2.9.32-alpha.4",
     "@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.9.32-alpha.2",
+    "@antv/l7-test-utils": "2.9.32-alpha.4",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "16555be9682edaeeabec85082fc8c9e49fefabc0",
+  "gitHead": "17a8a05d41a0007db94568d2902a8f539d6e3abc",
   "publishConfig": {
     "access": "public"
   }