@maplat/ui 0.10.5 → 0.11.0

package/src/contextmenu/internal.ts

@@ -0,0 +1,293 @@
+import { CSS_VARS, EVENT_TYPE } from "./constants";
+import {
+  find,
+  addClass,
+  removeClass,
+  getViewportSize,
+  offset
+} from "./helpers/dom";
+import { Map, MapEvent } from "ol";
+import { Coordinate } from "ol/coordinate";
+import { Pixel } from "ol/pixel";
+
+/**
+ * @class Internal
+ */
+export class Internal {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Base: any;
+  map: Map | undefined;
+  viewport: HTMLElement | undefined;
+  coordinateClicked: Coordinate | undefined;
+  pixelClicked: Pixel | undefined;
+  lineHeight: number;
+  items: Record<string, import("../types").ContextMenuInternalItem>;
+  opened: boolean;
+  submenu: { left: string; top: string; lastLeft: string; lastTop: string };
+  eventHandler: (evt: Event) => void;
+  eventMapMoveHandler: (evt: MapEvent) => void;
+
+  /**
+   * @constructor
+   * @param {Function} base Base class.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(base: any) {
+    /**
+     * @type {ol.control.Control}
+     */
+    this.Base = base;
+    /**
+     * @type {ol.Map}
+     */
+    this.map = undefined;
+    /**
+     * @type {Element}
+     */
+    this.viewport = undefined;
+    /**
+     * @type {ol.Coordinate}
+     */
+    this.coordinateClicked = undefined;
+    /**
+     * @type {ol.Pixel}
+     */
+    this.pixelClicked = undefined;
+    /**
+     * @type {Number}
+     */
+    this.lineHeight = 0;
+    /**
+     * @type {Object}
+     */
+    this.items = {};
+    /**
+     * @type {Boolean}
+     */
+    this.opened = false;
+    /**
+     * @type {Object}
+     */
+    this.submenu = {
+      left: `${base.options.width - 15}px`,
+      lastLeft: "", // string + px
+      top: "0px",
+      lastTop: ""
+    };
+    /**
+     * @type {Function}
+     */
+    this.eventHandler = this.handleEvent.bind(this) as unknown as (
+      evt: Event
+    ) => void;
+    /**
+     * @type {Function}
+     */
+    this.eventMapMoveHandler = this.handleMapMoveEvent.bind(this);
+
+    return this;
+  }
+
+  init(map: import("ol").Map) {
+    this.map = map;
+    this.viewport = map.getViewport();
+    this.setListeners();
+    this.Base.Html.createMenu();
+
+    this.lineHeight =
+      this.getItemsLength() > 0
+        ? this.Base.container.offsetHeight / this.getItemsLength()
+        : this.Base.Html.cloneAndGetLineHeight();
+  }
+
+  getItemsLength() {
+    let count = 0;
+    Object.keys(this.items).forEach(k => {
+      if (this.items[k].submenu || this.items[k].separator) return;
+      count++;
+    });
+    return count;
+  }
+
+  getPixelClicked() {
+    return this.pixelClicked;
+  }
+
+  getCoordinateClicked() {
+    return this.coordinateClicked;
+  }
+
+  positionContainer(pixel: import("ol/pixel").Pixel) {
+    const container = this.Base.container as HTMLElement;
+    const mapSize = this.map!.getSize();
+    if (!mapSize) return;
+    // how much (width) space left over
+    const space_left_h = mapSize[1] - pixel[1];
+    // how much (height) space left over
+    const space_left_w = mapSize[0] - pixel[0];
+
+    const menuSize = {
+      w: container.offsetWidth,
+      // a cheap way to recalculate container height
+      // since offsetHeight is like cached
+      h: Math.round(this.lineHeight * this.getItemsLength())
+    };
+    // submenus
+    const subs = find(
+      `li.${CSS_VARS.submenu}>div`,
+      container,
+      true
+    ) as HTMLElement[];
+
+    if (space_left_w >= menuSize.w) {
+      container.style.right = "auto";
+      container.style.left = `${pixel[0] + 5}px`;
+    } else {
+      container.style.left = "auto";
+      container.style.right = "15px";
+    }
+    // set top or bottom
+    if (space_left_h >= menuSize.h) {
+      container.style.bottom = "auto";
+      container.style.top = `${pixel[1] - 10}px`;
+    } else {
+      container.style.top = "auto";
+      container.style.bottom = "0px";
+    }
+
+    removeClass(container, CSS_VARS.hidden, null);
+
+    if (subs.length) {
+      if (space_left_w < menuSize.w * 2) {
+        // no space (at right) for submenu
+        // position them at left
+        this.submenu.lastLeft = `-${menuSize.w}px`;
+      } else {
+        this.submenu.lastLeft = this.submenu.left;
+      }
+      subs.forEach((sub: HTMLElement) => {
+        // is there enough space for submenu height?
+        const viewport = getViewportSize();
+        const sub_offset = offset(sub);
+        const sub_height = sub_offset.height;
+        let sub_top = space_left_h - sub_height;
+
+        if (sub_top < 0) {
+          sub_top = sub_height - (viewport.h - sub_offset.top);
+          sub.style.top = `-${sub_top}px`;
+        }
+        sub.style.left = this.submenu.lastLeft;
+      });
+    }
+  }
+
+  openMenu(
+    pixel: import("ol/pixel").Pixel,
+    coordinate: import("ol/coordinate").Coordinate
+  ) {
+    this.Base.dispatchEvent({
+      type: EVENT_TYPE.OPEN,
+      pixel,
+      coordinate
+    });
+    this.opened = true;
+    this.positionContainer(pixel);
+  }
+
+  closeMenu() {
+    this.opened = false;
+    addClass(this.Base.container, CSS_VARS.hidden, null);
+    this.Base.dispatchEvent({
+      type: EVENT_TYPE.CLOSE
+    });
+  }
+
+  setListeners() {
+    this.viewport!.addEventListener(
+      this.Base.options.eventType,
+      this.eventHandler,
+      false
+    );
+
+    if (this.map) this.map.on("movestart", this.eventMapMoveHandler);
+  }
+
+  removeListeners() {
+    this.viewport!.removeEventListener(
+      this.Base.options.eventType,
+      this.eventHandler,
+
+      false
+    );
+
+    if (this.map) this.map.un("movestart", this.eventMapMoveHandler);
+  }
+
+  handleEvent(evt: Event) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const this_ = this;
+    if (!this.map) return;
+
+    this.coordinateClicked = this.map.getEventCoordinate(evt as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    this.pixelClicked = this.map.getEventPixel(evt as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    this.Base.dispatchEvent({
+      type: EVENT_TYPE.BEFOREOPEN,
+      pixel: this.pixelClicked,
+      coordinate: this.coordinateClicked
+    });
+
+    if (this.Base.disabled) return;
+
+    if (this.Base.options.eventType === EVENT_TYPE.CONTEXTMENU) {
+      // don't be intrusive with other event types
+      evt.stopPropagation();
+      evt.preventDefault();
+    }
+
+    this.openMenu(this.pixelClicked, this.coordinateClicked);
+
+    //one-time fire
+    if (evt.target)
+      evt.target.addEventListener(
+        "pointerdown",
+        {
+          handleEvent: (e: Event) => {
+            if (this_.opened) {
+              this_.closeMenu();
+              e.stopPropagation();
+              if (evt.target)
+                evt.target.removeEventListener(e.type, this, false);
+            }
+          }
+        },
+        false
+      );
+  }
+
+  handleMapMoveEvent(_evt: import("ol").MapEvent) {
+    this.closeMenu();
+  }
+
+  setItemListener(li: HTMLElement, index: string) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const this_ = this;
+    if (li && typeof this.items[index].callback === "function") {
+      (function (callback) {
+        li.addEventListener(
+          "click",
+          (evt: Event) => {
+            evt.preventDefault();
+            const obj = {
+              coordinate: this_.getCoordinateClicked()!,
+              data: this_.items[index].data || null
+            };
+            this_.closeMenu();
+            callback(obj, this_.map);
+          },
+          false
+        );
+      })(this.items[index].callback);
+    }
+  }
+}

package/src/contextmenu.ts

@@ -0,0 +1,40 @@
+import ContextMenuBase from "./contextmenu/base";
+import { ContextMenuOptions } from "./types";
+
+export default class ContextMenu extends ContextMenuBase {
+  constructor(options: ContextMenuOptions = {}) {
+    super(options);
+    const internal = this.Internal;
+
+    internal.setItemListener = (li: HTMLElement, index: string) => {
+      const this_ = internal;
+      if (
+        li &&
+        internal.items[index] &&
+        typeof internal.items[index].callback === "function"
+      ) {
+        (function (callback) {
+          li.addEventListener("pointerdown", (evt: Event) => {
+            evt.stopPropagation();
+          });
+          li.addEventListener(
+            "click",
+            (evt: Event) => {
+              evt.preventDefault();
+              const obj = {
+                coordinate: this_.getCoordinateClicked() || [],
+                data: this_.items[index].data || null
+              };
+              if (callback) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const result: any = callback(obj, this_.map);
+                if (!result) this_.closeMenu();
+              }
+            },
+            false
+          );
+        })(internal.items[index].callback);
+      }
+    };
+  }
+}

package/src/function.ts

@@ -0,0 +1,36 @@
+// @ts-expect-error - Module uses internal API - Module uses internal API
+import { normalizeArg as normalizeArg_ } from "@maplat/core/dist/functions";
+
+export function normalizeArg(
+  options: Record<string, unknown>
+): Record<string, unknown> {
+  const table: Record<string, string> = {
+    state_url: "stateUrl",
+    restore_session: "restoreSession",
+    enable_share: "enableShare",
+    mobile_if: "mobileIF",
+    pwa_manifest: "pwaManifest",
+    pwa_worker: "pwaWorker",
+    pwa_scope: "pwaScope",
+    presentation_mode: "presentationMode"
+  };
+  options = normalizeArg_(options);
+
+  return Object.keys(table).reduce(
+    (opt: Record<string, unknown>, key: string) => {
+      if (opt[key] !== undefined) {
+        throw new Error(
+          `Invalid Maplat option key: ${key}. Use "${table[key]}" instead.`
+        );
+        //opt[table[key]] = opt[key];
+        //delete opt[key];
+      }
+      return opt;
+    },
+    options
+  );
+}
+
+export function getUniqueId(prefix: string = "id_") {
+  return prefix + Math.random().toString(36).substr(2, 9);
+}

package/src/icons.ts

@@ -0,0 +1,46 @@
+export const icons: { [key: string]: { viewBox: string; path: string } } = {
+  house: {
+    viewBox: "0 0 512 512",
+    path: "M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"
+  },
+  "location-crosshairs": {
+    viewBox: "0 0 576 512",
+    path: "M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM128 256a160 160 0 1 0 320 0 160 160 0 1 0 -320 0zm160-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"
+  },
+  compass: {
+    viewBox: "0 0 512 512",
+    path: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm306.7 69.1L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.3 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+  },
+  "share-from-square": {
+    viewBox: "0 0 576 512",
+    path: "M425.5 7c-6.9-6.9-17.2-8.9-26.2-5.2S384.5 14.3 384.5 24l0 56-48 0c-88.4 0-160 71.6-160 160 0 46.7 20.7 80.4 43.6 103.4 8.1 8.2 16.5 14.9 24.3 20.4 9.2 6.5 21.7 5.7 30.1-1.9s10.2-20 4.5-29.8c-3.6-6.3-6.5-14.9-6.5-26.7 0-36.2 29.3-65.5 65.5-65.5l46.5 0 0 56c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l136-136c9.4-9.4 9.4-24.6 0-33.9L425.5 7zm7 97l0-22.1 78.1 78.1-78.1 78.1 0-22.1c0-13.3-10.7-24-24-24L338 192c-50.9 0-93.9 33.5-108.3 79.6-3.3-9.4-5.2-19.8-5.2-31.6 0-61.9 50.1-112 112-112l72 0c13.3 0 24-10.7 24-24zm-320-8c-44.2 0-80 35.8-80 80l0 256c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 24c0 17.7-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l24 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-24 0z"
+  },
+  "layer-group": {
+    viewBox: "0 0 512 512",
+    path: "M232.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L13.9 149.8C5.4 145.8 0 137.3 0 128s5.4-17.9 13.9-21.8L232.5 5.2zM48.1 218.4l164.3 75.9c27.7 12.8 59.6 12.8 87.3 0l164.3-75.9 34.1 15.8c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L13.9 277.8C5.4 273.8 0 265.3 0 256s5.4-17.9 13.9-21.8l34.1-15.8zM13.9 362.2l34.1-15.8 164.3 75.9c27.7 12.8 59.6 12.8 87.3 0l164.3-75.9 34.1 15.8c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L13.9 405.8C5.4 401.8 0 393.3 0 384s5.4-17.9 13.9-21.8z"
+  },
+  "circle-question": {
+    viewBox: "0 0 512 512",
+    path: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-44.2 35.8-80 80-80s80 35.8 80 80c0 47.2-36 67.2-56 74.5l0 3.8c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-8.1c0-20.5 14.8-35.2 30.1-40.2 6.4-2.1 13.2-5.5 18.2-10.3 4.3-4.2 7.7-10 7.7-19.6 0-17.7-14.3-32-32-32zM224 368a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+  },
+  "circle-info": {
+    viewBox: "0 0 512 512",
+    path: "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+  },
+  "map-pin": {
+    viewBox: "0 0 320 512",
+    path: "M192 284.4C256.1 269.9 304 212.5 304 144 304 64.5 239.5 0 160 0S16 64.5 16 144c0 68.5 47.9 125.9 112 140.4L128 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-195.6zM168 96c-30.9 0-56 25.1-56 56 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4 46.6-104 104-104 13.3 0 24 10.7 24 24s-10.7 24-24 24z"
+  },
+  list: {
+    viewBox: "0 0 512 512",
+    path: "M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"
+  }
+};
+
+export function getIcon(name: string, cls: string = ""): string {
+  const icon = icons[name];
+  if (!icon) return "";
+  // fa-lg is ~1.33em. We use 1em as base and let CSS font-size scale it.
+  // Add standardized styles to behave like an icon font.
+  return `<svg class="${cls}" viewBox="${icon.viewBox}" xmlns="http://www.w3.org/2000/svg" style="fill: currentColor; height: 1em; width: 1em; vertical-align: -0.125em;"><path d="${icon.path}" /></svg>`;
+}