@maplat/ui 0.10.5 → 0.11.0

package/src/ui_marker.ts

@@ -0,0 +1,376 @@
+import { createElement } from "@maplat/core";
+import * as bsn from "bootstrap.native";
+// import { Swiper } from "./swiper_ex";
+import "@c4h/chuci";
+import { point, polygon, booleanPointInPolygon } from "@turf/turf";
+import { resolveRelativeLink } from "./ui_utils";
+
+function detectMediaType(src: string): string {
+  if (src.includes("youtube.com") || src.includes("youtu.be")) {
+    return "youtube";
+  }
+  const ext = src.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "mp4":
+    case "webm":
+      return "video";
+    case "obj":
+      return "3dmodel";
+    case "splat":
+    case "ply":
+      return "gaussian";
+    default:
+      return "image";
+  }
+}
+import type { MaplatUi } from "./index";
+import type { MarkerData, MediaSetting, MediaObject } from "./types";
+
+export function poiWebControl(
+  ui: MaplatUi,
+  div: HTMLElement,
+  data: MarkerData
+) {
+  // let poiSwiper: SwiperInstance | undefined;
+  div.innerHTML = "";
+
+  if (data.url || data.html) {
+    const htmlDiv =
+      createElement(`<div class="${ui.enablePoiHtmlNoScroll ? "" : " embed-responsive embed-responsive-60vh"}">
+    <iframe class="poi_iframe iframe_poi" frameborder="0" src=""${ui.enablePoiHtmlNoScroll ? ` onload="window.addEventListener('message', (e) =>{if (e.data[0] == 'setHeight') {this.style.height = e.data[1];}});" scrolling="no"` : ""}></iframe>
+    </div>`)[0] as HTMLElement;
+    div.appendChild(htmlDiv);
+    const iframe = htmlDiv.querySelector(".poi_iframe") as HTMLIFrameElement;
+
+    if (data.html) {
+      const loadEvent = (event: Event) => {
+        if (!event.currentTarget) return;
+        event.currentTarget.removeEventListener(event.type, loadEvent);
+        const cssLink = createElement(
+          '<style type="text/css">html, body { height: 100vh; }\n img { width: 100%; }</style>'
+        );
+        const jsLink = createElement(
+          `<script>
+                const heightGetter = document.querySelector("#heightGetter");
+                const resizeObserver = new ResizeObserver(entries => {
+                  window.parent.postMessage(["setHeight", (entries[0].target.clientHeight + 16) + "px"], "*");
+                });
+                if(heightGetter) resizeObserver.observe(heightGetter);
+              </script>`
+        );
+        iframe.contentDocument!.head.appendChild(cssLink[0]);
+        iframe.contentDocument!.head.appendChild(jsLink[0]);
+      };
+      iframe.addEventListener("load", loadEvent);
+      iframe.removeAttribute("src");
+      iframe.setAttribute(
+        "srcdoc",
+        `<div id="heightGetter">${ui.core!.translate(data.html) || ""}</div>`
+      );
+    } else {
+      iframe.removeAttribute("srcdoc");
+      iframe.setAttribute("src", ui.core!.translate(data.url) || "");
+    }
+  } else {
+    const slides: string[] = [];
+    const mediaList = (data.media || data.image) as MediaSetting[] | undefined;
+
+    if (mediaList) {
+      const inputs = Array.isArray(mediaList) ? mediaList : [mediaList];
+
+      inputs.forEach((item: MediaSetting) => {
+        let mediaObj: MediaObject;
+        if (typeof item === "string") {
+          mediaObj = {
+            src: item,
+            type: detectMediaType(item)
+          };
+        } else {
+          mediaObj = { ...item }; // Clone to avoid mutation if needed
+          if (!mediaObj.type) {
+            mediaObj.type = detectMediaType(mediaObj.src);
+          }
+          // desc compatibility for caption
+          if (mediaObj.desc && !mediaObj.caption) {
+            mediaObj.caption = mediaObj.desc;
+          }
+        }
+
+        const tmpSrc = resolveRelativeLink(mediaObj.src, "img"); // Assume 'img' type resolve works for most media assets or general path
+
+        let slideAttrs = `image-url="${tmpSrc}" image-type="${mediaObj.type}"`;
+
+        if (mediaObj.thumbnail) {
+          slideAttrs += ` thumbnail-url="${resolveRelativeLink(mediaObj.thumbnail, "img")}"`;
+        } else {
+          // Default thumbnail to src for images, but for others (video etc) this might fail if no explicit thumb provided.
+          // Legacy behavior was image-only so src was thumb.
+          // For non-image types without thumbnail, Chuci might handle or show placeholder.
+          // Let's use src as thumb for images or if nothing else.
+          if (mediaObj.type === "image") {
+            slideAttrs += ` thumbnail-url="${tmpSrc}"`;
+          }
+        }
+
+        // Map other attributes
+        Object.keys(mediaObj).forEach(key => {
+          if (["src", "type", "thumbnail", "desc"].includes(key)) return;
+          const val = mediaObj[key];
+          if (typeof val === "boolean") {
+            if (val) slideAttrs += ` ${key}`;
+          } else if (val !== undefined && val !== null) {
+            slideAttrs += ` ${key}="${val}"`;
+          }
+        });
+
+        slides.push(`<cc-swiper-slide ${slideAttrs}></cc-swiper-slide>`);
+      });
+    }
+    // Logic for noimage skipped/simplified as requested in previous interactions
+
+    const htmlDiv = createElement(`<div class="poi_data">
+    <div class="col-xs-12 poi_img_swiper">
+      <cc-swiper>${slides.join("")}</cc-swiper>
+    </div>
+    <p class="recipient poi_address"></p>
+    <p class="recipient poi_desc"></p>
+    </div>`)[0] as HTMLElement;
+    div.appendChild(htmlDiv);
+
+    // Inject custom CSS for Swiper if not exists (global check)
+    if (!document.getElementById("poi-swiper-style")) {
+      const style = document.createElement("style");
+      style.id = "poi-swiper-style";
+      style.innerHTML = `
+            cc-swiper { --cc-slider-theme-color: #007aff; --cc-slider-navigation-color: #007aff; height: 300px; }
+            cc-viewer { --cc-viewer-z-index: 100000; }
+          `;
+      document.head.appendChild(style);
+    }
+
+    (htmlDiv.querySelector(".poi_address") as HTMLElement).innerText =
+      ui.core!.translate(data.address) || "";
+    (htmlDiv.querySelector(".poi_desc") as HTMLElement).innerHTML = (
+      ui.core!.translate(data.desc) || ""
+    ).replace(/\n/g, "<br>");
+  }
+
+  return undefined;
+}
+
+export function handleMarkerAction(ui: MaplatUi, data: MarkerData) {
+  const modalElm = ui.core!.mapDivDocument!.querySelector(".modalBase")!;
+  const modal = bsn.Modal.getInstance(modalElm) || new bsn.Modal(modalElm);
+
+  const closeBtns = modalElm.querySelectorAll(".close, .modal-footer button");
+  for (let i = 0; i < closeBtns.length; i++) {
+    closeBtns[i].addEventListener("click", () => {
+      modal.hide();
+    });
+  }
+
+  if (data.directgo) {
+    let blank = false;
+    let href = "";
+    if (typeof data.directgo == "string") {
+      href = data.directgo;
+    } else {
+      href = data.directgo.href;
+      blank = data.directgo.blank || false;
+    }
+    if (blank) {
+      window.open(href, "_blank");
+    } else {
+      window.location.href = href;
+    }
+    return;
+  }
+
+  const titleEl =
+    ui.core!.mapDivDocument!.querySelector(".modal_poi_title") ||
+    ui.core!.mapDivDocument!.querySelector(".modal_title");
+  if (titleEl)
+    (titleEl as HTMLElement).innerText = ui.core!.translate(data.name) || "";
+
+  // Prepare container - ensure poi_web_div exists or target it
+  let poiWebDiv = ui.core!.mapDivDocument!.querySelector(".poi_web_div");
+  if (!poiWebDiv) {
+    // Fallback or create? simpler to assume ui_init will be updated,
+    // but for robustness we can clear modal_poi_content and append it if missing,
+    // OR target existing .poi_web (renaming it effectively).
+    // Let's assume ui_init.ts will provide .poi_web_div.
+    // If not present, we grab .modal_poi_content and insert it?
+    const modalPoiContent =
+      ui.core!.mapDivDocument!.querySelector(".modal_poi_content");
+    if (modalPoiContent) {
+      poiWebDiv = createElement(
+        '<div class="poi_web_div"></div>'
+      )[0] as HTMLElement;
+      // Prepend to avoid messing with share buttons at bottom?
+      modalPoiContent.insertBefore(poiWebDiv, modalPoiContent.firstChild);
+    }
+  }
+
+  poiWebControl(ui, poiWebDiv as HTMLElement, data);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const hiddenFunc = (_event: any) => {
+    modalElm.removeEventListener("hidden.bs.modal", hiddenFunc, false);
+    ui.core!.unselectMarker();
+  };
+  modalElm.addEventListener("hidden.bs.modal", hiddenFunc, false);
+
+  ui.core!.selectMarker(data.namespaceID);
+  ui.modalSetting("poi");
+  modal.show();
+}
+
+export function showContextMenu(ui: MaplatUi, list: MarkerData[]) {
+  if (!ui.contextMenu) return;
+
+  ui.contextMenu.clear();
+  ui.contextMenu.extend(list);
+
+  const pixel = ui.lastClickPixel;
+  const coordinate = ui.lastClickCoordinate;
+
+  if (!pixel) {
+    console.warn("[Debug] No lastClickPixel for ContextMenu");
+    return;
+  }
+
+  const openHandler = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (ui.contextMenu as any).un("open", openHandler);
+    const closeHandler = () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ui.contextMenu as any).un("close", closeHandler);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (ui.contextMenu as any).on("close", closeHandler);
+  };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (ui.contextMenu as any).on("open", openHandler);
+
+  // Need direct access to internal openMenu if possible, or standard open
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (ui.contextMenu as any).Internal?.openMenu(pixel, coordinate);
+
+  // One-time click to close (mimic legacy)
+  const viewport = ui.core!.mapObject.getViewport();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const closeMenuHandler = (e: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((ui.contextMenu as any).Internal.opened) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ui.contextMenu as any).Internal?.closeMenu();
+      e.stopPropagation();
+      viewport.removeEventListener(e.type, closeMenuHandler, false);
+    }
+  };
+  viewport.addEventListener("pointerdown", closeMenuHandler, false);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function xyToMapIDs(ui: MaplatUi, xy: any, threshold = 10) {
+  const point_ = point(xy);
+
+  const map = ui.core!.mapObject;
+  const size = map.getSize();
+  const extent = [[0, 0], [size[0], 0], size, [0, size[1]], [0, 0]];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const sysCoords = extent.map((pixel: any) =>
+    map.getCoordinateFromPixel(pixel)
+  );
+  const mercs = await (typeof ui.core!.from!.xy2SysCoord !== "function" // ERROR HERE - wait, index.ts line 1273 - checking source
+    ? Promise.resolve(sysCoords)
+    : Promise.all(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sysCoords.map((sysCoord: any) =>
+          ui.core!.from!.sysCoord2MercAsync(sysCoord)
+        )
+      ));
+  const areaIndex = ui.areaIndex(mercs);
+
+  return Promise.all(
+    Object.keys(ui.core!.cacheHash!)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .filter((key: any) => ui.core!.cacheHash[key].envelope)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .map((key: any) => {
+        const source = ui.core!.cacheHash[key];
+        return Promise.all([
+          Promise.resolve(source),
+          Promise.all(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            source.envelope.geometry.coordinates[0].map((coord: any) =>
+              ui.core!.from!.merc2SysCoordAsync(coord)
+            )
+          )
+        ]);
+      })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ).then((sources: any) => {
+    const mapIDs = sources
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .reduce((prev: any, curr: any) => {
+        const source = curr[0];
+        const mercXys = curr[1];
+        if (source.mapID !== ui.core!.from!.mapID) {
+          const polygon_ = polygon([mercXys]);
+          if (booleanPointInPolygon(point_, polygon_)) {
+            prev.push(source);
+          }
+        }
+        return prev;
+      }, [])
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .filter((source: any) => source.envelopeAreaIndex / areaIndex < threshold)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .sort((a: any, b: any) => a.envelopeAreaIndex - b.envelopeAreaIndex)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .map((source: any) => source.mapID);
+    return mapIDs;
+  });
+}
+
+export function setHideMarker(ui: MaplatUi, flag: boolean) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ui.core!.requestUpdateState({ hideMarker: flag ? 1 : 0 } as any);
+  if (flag) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((ui.core as any).hideAllMarkers) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ui.core as any).hideAllMarkers();
+    }
+    ui.core!.mapDivDocument!.classList.add("hide-marker");
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((ui.core as any).showAllMarkers) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ui.core as any).showAllMarkers();
+    }
+    ui.core!.mapDivDocument!.classList.remove("hide-marker");
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (ui.core!.restoreSession as any) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ui.core!.requestUpdateState({ hideMarker: flag ? 1 : 0 } as any);
+  }
+}
+
+export function checkOverlayID(ui: MaplatUi, mapID: string) {
+  const swiper = ui.overlaySwiper;
+  const sliders = swiper.$el[0].querySelectorAll(".swiper-slide");
+  for (let i = 0; i < sliders.length; i++) {
+    const slider = sliders[i];
+    if (slider.getAttribute("data") === mapID) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function handleMarkerActionById(_ui: MaplatUi, markerId: string) {
+  console.log(`Open marker: ${markerId}`);
+}

package/src/ui_utils.ts

@@ -0,0 +1,87 @@
+export function resolveRelativeLink(
+  file: string,
+  fallbackPath: string | null
+): string {
+  if (!fallbackPath) fallbackPath = ".";
+  return file.match(/\//) ? file : `${fallbackPath}/${file}`;
+}
+
+export function ellips(mapDivDocument: HTMLElement) {
+  const omitMark = "…";
+  const omitLine = 2;
+  const stringSplit = function (element: HTMLElement) {
+    const splitArr = element.innerText.split("");
+    let joinString = "";
+    for (let i = 0; i < splitArr.length; i++) {
+      joinString += `<span>${splitArr[i]}</span>`;
+    }
+    joinString += `<span class="omit-mark">${omitMark}</span>`;
+    element.innerHTML = joinString;
+  };
+  const omitCheck = function (element: HTMLElement) {
+    const thisSpan = element.querySelectorAll("span");
+    const omitSpan = element.querySelector(".omit-mark") as HTMLElement;
+    let lineCount = 0;
+    let omitCount = 0;
+
+    if (omitLine <= 0) {
+      return;
+    }
+
+    thisSpan[0].style.display = "";
+    for (let i = 1; i < thisSpan.length; i++) {
+      thisSpan[i].style.display = "none";
+    }
+    omitSpan.style.display = "";
+    let divHeight = element.offsetHeight;
+    let minimizeFont = false;
+    for (let i = 1; i < thisSpan.length - 1; i++) {
+      thisSpan[i].style.display = "";
+      if (element.offsetHeight > divHeight) {
+        if (!minimizeFont) {
+          minimizeFont = true;
+          element.classList.add("minimize");
+        } else {
+          divHeight = element.offsetHeight;
+          lineCount++;
+        }
+      }
+      if (lineCount >= omitLine) {
+        omitCount = i - 2;
+        break;
+      }
+      if (i >= thisSpan.length - 2) {
+        omitSpan.style.display = "none";
+        return;
+      }
+    }
+    for (let i = omitCount; i < thisSpan.length - 1; i++) {
+      thisSpan[i].style.display = "none";
+    }
+  };
+  const swiperItems = mapDivDocument.querySelectorAll(".swiper-slide div");
+  for (let i = 0; i < swiperItems.length; i++) {
+    const swiperItem = swiperItems[i] as HTMLElement;
+    stringSplit(swiperItem);
+    omitCheck(swiperItem);
+  }
+}
+
+export function isMaplatSource(source: unknown): source is {
+  setGPSMarkerAsync: () => unknown;
+  constructor: { isBasemap_?: boolean };
+} {
+  return (
+    !!source &&
+    typeof (source as { setGPSMarkerAsync: unknown }).setGPSMarkerAsync ===
+      "function"
+  );
+}
+
+export function isBasemap(source: unknown): boolean {
+  if (!isMaplatSource(source)) return false;
+  if (source.constructor && source.constructor.isBasemap_ === false)
+    return false;
+  if (source.constructor && source.constructor.isBasemap_ === true) return true;
+  return true;
+}