@mapka/maplibre-gl-sdk 0.16.1 → 0.16.3

package/src/modules/popup.tsx

@@ -1,167 +1,184 @@
 import { Popup } from "maplibre-gl";
 import { PopupContent } from "../components/PopupContent.js";
+import { PopupList } from "../components/PopupList.js";
 import { render } from "preact";
 import { remove } from "es-toolkit/array";
-import type { MapkaPopupOptions } from "../types/popup.js";
-import type { MapkaMap } from "../map.js";
-import { isEqual, isPlainObject } from "es-toolkit";
+import { isPlainObject, without } from "es-toolkit";
+import { computePopupGroups } from "./popupGroups.js";
+import type { MapkaPopupOptions, MapkaPopupOptionsResolved } from "../types/popup.js";
+import type { MapkaMap, MapMapkaPopup } from "../map.js";
 
 export function getPopupId(popup: { id?: string }) {
   return popup.id ?? `popup-${crypto.randomUUID()}`;
 }
 
-export function getOnClose(map: MapkaMap, id: string) {
-  return () => map.closePopup(id);
+function getOnClose(map: MapkaMap, id: string) {
+  return () => closePopupsByIds(map, [id]);
 }
 
-export function enforceMaxPopups(map: MapkaMap) {
-  if (map.popups.length > map.maxPopups) {
-    const popupToRemove = map.popups.shift();
-    popupToRemove?.popup.remove();
-    if (isPlainObject(popupToRemove?.options.content)) {
-      render(null, popupToRemove.container);
+function hasObjectContent(options: MapkaPopupOptions[]) {
+  return options.some((opt) => isPlainObject(opt.content));
+}
+
+function resolveContentCreators(options: MapkaPopupOptions[]): MapkaPopupOptionsResolved[] {
+  return options.map((opt) => {
+    const id = getPopupId(opt);
+
+    if (typeof opt.content === "function") {
+      return {
+        ...opt,
+        id,
+        content: opt.content(id),
+      };
+    } else {
+      return {
+        ...opt,
+        id,
+        content: opt.content,
+      };
     }
-    popupToRemove?.container.remove();
-  }
+  });
 }
 
-export function openPopup(map: MapkaMap, options: MapkaPopupOptions) {
-  const { lngLat, content, closeButton, id = getPopupId(options), ...popupOptions } = options;
-  if (content instanceof HTMLElement) {
-    const popup = new Popup({
-      ...popupOptions,
-      closeButton: false,
-      closeOnClick: false,
-    })
-      .setLngLat(lngLat)
-      .setDOMContent(content)
-      .addTo(map);
+function createNewPopup(map: MapkaMap, options: MapkaPopupOptionsResolved[]) {
+  const [{ lngLat, id, content, closeButton, ...opts }] = options;
 
-    map.popups.push({
-      container: content,
-      id,
-      options,
-      popup,
-    });
-    enforceMaxPopups(map);
-    return id;
-  } else if (typeof content === "object") {
-    const onClose = getOnClose(map, id);
-    const container = document.createElement("div");
-    container.classList.add("mapka-popup-container");
-
-    render(<PopupContent {...content} closeButton={closeButton} onClose={onClose} />, container);
-
-    const popup = new Popup({
-      ...popupOptions,
+  const ids = options.map(getPopupId);
+  const container = document.createElement("div");
+  container.classList.add("mapka-popup-container");
+
+  let popup: Popup | undefined;
+  if (options.length > 1) {
+    render(<PopupList items={options} />, container);
+
+    popup = new Popup({
+      ...opts,
       closeButton: false,
-      closeOnClick: false,
+      closeOnClick: true,
     })
       .setLngLat(lngLat)
       .setDOMContent(container)
       .addTo(map);
-
-    map.popups.push({
-      container,
-      id,
-      options,
-      popup,
-    });
-    enforceMaxPopups(map);
-    return id;
-  } else if (typeof content === "function") {
-    const newContent = content(id);
-    return openPopup(map, {
-      ...options,
-      content: newContent,
-    });
+  } else {
+    if (content instanceof HTMLElement) {
+      popup = new Popup({
+        ...opts,
+        closeButton: false,
+      })
+        .setLngLat(lngLat)
+        .setDOMContent(content)
+        .addTo(map);
+    } else {
+      popup = new Popup({
+        ...opts,
+        closeButton: false,
+      })
+        .setLngLat(lngLat)
+        .setDOMContent(container)
+        .addTo(map);
+
+      render(<PopupContent {...content} onClose={getOnClose(map, id)} />, container);
+    }
   }
 
-  throw new Error("Invalid popup content");
-}
+  if (!popup) return;
 
-const DEFAULT_POPUP_MAX_WIDTH = "240px";
+  map.popups.push({
+    container,
+    ids,
+    options,
+    popup,
+  });
 
-export function updatePopupBaseOptions(
-  popup: Popup,
-  options: MapkaPopupOptions,
-  newOptions: Omit<MapkaPopupOptions, "content">,
-) {
-  if (!isEqual(options.maxWidth, newOptions.maxWidth)) {
-    popup.setMaxWidth(newOptions.maxWidth ?? DEFAULT_POPUP_MAX_WIDTH);
-  }
-  if (!isEqual(options.offset, newOptions.offset)) {
-    popup.setOffset(newOptions.offset);
-  }
-  if (!isEqual(options.lngLat, newOptions.lngLat)) {
-    popup.setLngLat(newOptions.lngLat);
+  return ids;
+}
+
+export function enforceMaxPopups(map: MapkaMap) {
+  if (map.popups.length > map.maxPopups) {
+    const popupToRemove = map.popups.shift();
+    if (popupToRemove) {
+      popupToRemove.popup.remove();
+      if (hasObjectContent(popupToRemove.options)) {
+        render(null, popupToRemove.container);
+      }
+      popupToRemove.container.remove();
+    }
   }
-  return popup;
 }
 
-export function updatePopup(map: MapkaMap, { content, ...newOptions }: MapkaPopupOptions) {
-  const id = getPopupId(newOptions);
+export function reconciliatePopups(map: MapkaMap, options: MapkaPopupOptions[] = []) {
+  const resolved = resolveContentCreators(options);
+  const actions = computePopupGroups(map, resolved);
 
-  if (content instanceof HTMLElement) {
-    const mapkaPopups = map.popups.filter((popup) => popup.id === id);
-    for (const { popup, options } of mapkaPopups) {
-      updatePopupBaseOptions(popup, options, newOptions);
-      popup.setDOMContent(content);
-    }
-  } else if (typeof content === "object") {
-    const onClose = getOnClose(map, id);
-    const mapkaPopups = map.popups.filter((popup) => popup.id === id);
-
-    for (const { popup, container, options } of mapkaPopups) {
-      const { closeButton } = options;
-      render(<PopupContent {...content} closeButton={closeButton} onClose={onClose} />, container);
-      updatePopupBaseOptions(popup, options, newOptions);
-      popup.setDOMContent(container);
+  for (const action of actions) {
+    if (action.type === "close") {
+      closePopupsByIds(map, action.ids);
+    } else if (action.type === "create") {
+      createNewPopup(map, action.options);
     }
-  } else if (typeof content === "function") {
-    const newContent = content(id);
-    return updatePopup(map, {
-      ...newOptions,
-      content: newContent,
-    });
   }
+
+  enforceMaxPopups(map);
+
+  return resolved.map((opt) => opt.id);
 }
 
-/**
- * Close all popups that have closeOnClick set to true or undefined
- */
 export function closeOnMapClickPopups(map: MapkaMap) {
-  const popupsToCloseOnMapClick = remove(
-    map.popups,
-    (popup) => popup.options.closeOnClick === true || popup.options.closeOnClick === undefined,
-  );
+  const popupsToCloseOnMapClick = remove(map.popups, (popup) => {
+    const [first] = popup.options;
+    return (
+      popup.ids.length > 1 || first?.closeOnClick === true || first?.closeOnClick === undefined
+    );
+  });
   for (const popup of popupsToCloseOnMapClick) {
     popup.popup.remove();
-    if (isPlainObject(popup.options.content)) {
+    if (hasObjectContent(popup.options)) {
       render(null, popup.container);
     }
     popup.container.remove();
   }
 }
 
-export function closePopupsById(map: MapkaMap, id: string) {
-  const removedPopups = remove(map.popups, (popup) => popup.id === id);
-  for (const popup of removedPopups) {
+export function closePopups(map: MapkaMap) {
+  for (const popup of map.popups) {
     popup.popup.remove();
-    if (isPlainObject(popup.options.content)) {
+    if (hasObjectContent(popup.options)) {
       render(null, popup.container);
     }
     popup.container.remove();
   }
+  map.popups = [];
 }
 
-export function removePopups(map: MapkaMap) {
+export function closePopupsByIds(map: MapkaMap, ids: string[]) {
+  const toClose: MapMapkaPopup[] = [];
+  const toReRender: MapMapkaPopup[] = [];
+
   for (const popup of map.popups) {
+    const itemIndex = popup.ids.findIndex((id) => ids.includes(id));
+    if (itemIndex < 0) continue;
+
+    if (popup.ids.length === 1) {
+      toClose.push(popup);
+    } else if (popup.ids.length > 1) {
+      popup.ids.splice(itemIndex, 1);
+      popup.options.splice(itemIndex, 1);
+
+      toClose.push(popup);
+      toReRender.push(popup);
+    }
+  }
+
+  for (const popup of toClose) {
     popup.popup.remove();
-    if (isPlainObject(popup.options.content)) {
+    if (hasObjectContent(popup.options)) {
       render(null, popup.container);
     }
     popup.container.remove();
+    map.popups = without(map.popups, popup);
+  }
+
+  for (const popup of toReRender) {
+    createNewPopup(map, popup.options);
   }
-  map.popups = [];
 }

package/src/modules/popupGroups.ts

@@ -0,0 +1,190 @@
+import Supercluster from "supercluster";
+import type { MapkaMap, MapMapkaPopup } from "../map.js";
+import type { MapkaPopupOptionsResolved } from "../types/popup.js";
+
+export type ClosePopupAction = { type: "close"; ids: string[] };
+export type CreatePopupAction = { type: "create"; options: MapkaPopupOptionsResolved[] };
+
+export type PopupGroupAction = ClosePopupAction | CreatePopupAction;
+
+interface PopupCluster {
+  options: MapkaPopupOptionsResolved[];
+  lngLat: number[];
+}
+
+interface PopupPointProps {
+  index: number;
+}
+
+const WORLD_BOUNDS: [number, number, number, number] = [-180, -90, 180, 90];
+
+function clustersByLocation(
+  previous: MapkaPopupOptionsResolved[],
+  newOptions: MapkaPopupOptionsResolved[],
+  zoom: number,
+): PopupCluster[] {
+  const all = [...previous, ...newOptions];
+
+  const features: Supercluster.PointFeature<PopupPointProps>[] = all.map(({ lngLat }, index) => ({
+    type: "Feature",
+    properties: { index },
+    geometry: {
+      type: "Point",
+      coordinates: lngLat,
+    },
+  }));
+
+  const sc = new Supercluster<PopupPointProps>({
+    radius: 20,
+    extent: 512,
+  });
+  sc.load(features);
+
+  const results = sc.getClusters(WORLD_BOUNDS, zoom);
+  const clusters: PopupCluster[] = [];
+
+  for (const { properties, geometry } of results) {
+    if ("cluster" in properties) {
+      const leaves = sc.getLeaves(properties.cluster_id, Infinity);
+      clusters.push({
+        options: leaves.map((point) => all[point.properties.index]),
+        lngLat: geometry.coordinates,
+      });
+    } else {
+      const opt = all[properties.index];
+      clusters.push({
+        options: [opt],
+        lngLat: opt.lngLat,
+      });
+    }
+  }
+
+  return clusters;
+}
+
+function clustersFromPopups(
+  notUpdated: MapkaPopupOptionsResolved[],
+  popups: MapMapkaPopup[],
+): PopupCluster[] {
+  const clusters: PopupCluster[] = [];
+  for (const popup of popups) {
+    clusters.push({
+      options: popup.options.filter((opt) => notUpdated.includes(opt)),
+      lngLat: popup.popup.getLngLat().toArray(),
+    });
+  }
+  return clusters.filter((cluster) => cluster.options.length > 0);
+}
+
+function clusterKey(cluster: PopupCluster): string {
+  return cluster.options
+    .map((o) => o.id)
+    .sort()
+    .join("-");
+}
+
+function actionsByClustersChanges(
+  prev: PopupCluster[],
+  next: PopupCluster[],
+): {
+  close: ClosePopupAction[];
+  create: CreatePopupAction[];
+} {
+  const prevByKey = new Map(prev.map((c) => [clusterKey(c), c]));
+  const nextByKey = new Map(next.map((c) => [clusterKey(c), c]));
+
+  const close: ClosePopupAction[] = [];
+  const create: CreatePopupAction[] = [];
+
+  for (const [key, cluster] of prevByKey) {
+    if (!nextByKey.has(key)) {
+      close.push({
+        type: "close",
+        ids: cluster.options.map((o) => o.id),
+      });
+    }
+  }
+
+  for (const [key, cluster] of nextByKey) {
+    if (!prevByKey.has(key)) {
+      create.push({
+        type: "create",
+        options: cluster.options,
+      });
+    }
+  }
+
+  return { close, create };
+}
+
+function actionsByProximity(
+  popups: MapMapkaPopup[],
+  newOptions: MapkaPopupOptionsResolved[],
+  zoom: number,
+): PopupGroupAction[] {
+  const updated: MapkaPopupOptionsResolved[] = [];
+  const nonUpdated: MapkaPopupOptionsResolved[] = [];
+
+  for (const popup of popups) {
+    for (const opt of popup.options) {
+      if (newOptions.find((o) => o.id === opt.id)) {
+        updated.push(opt);
+      } else {
+        nonUpdated.push(opt);
+      }
+    }
+  }
+
+  const prevClusters = clustersFromPopups(nonUpdated, popups);
+  const nextClusters = clustersByLocation(nonUpdated, newOptions, zoom);
+  const { close, create } = actionsByClustersChanges(prevClusters, nextClusters);
+
+  const updatedIds = updated.map((opt) => opt.id);
+  const closeIds = close.flatMap((opt) => opt.ids);
+
+  return [
+    {
+      type: "close" as const,
+      ids: updatedIds.concat(closeIds),
+    },
+    ...create,
+  ];
+}
+
+export function actionsByChanges(
+  popups: MapMapkaPopup[],
+  newOptions: MapkaPopupOptionsResolved[],
+): PopupGroupAction[] {
+  const updated = [];
+
+  for (const popup of popups) {
+    if (newOptions.find((o) => popup.ids.includes(o.id))) {
+      updated.push(popup);
+    }
+  }
+
+  return [
+    ...updated.map((popup) => ({
+      type: "close" as const,
+      ids: popup.ids,
+    })),
+    {
+      type: "create" as const,
+      options: newOptions,
+    },
+  ];
+}
+
+export function computePopupGroups(
+  map: MapkaMap,
+  newOptions: MapkaPopupOptionsResolved[],
+): PopupGroupAction[] {
+  const popups = map.getPopups();
+  const zoom = map.getZoom();
+
+  if (map.scrollPopups) {
+    return actionsByProximity(popups, newOptions, zoom);
+  } else {
+    return actionsByChanges(popups, newOptions);
+  }
+}

package/src/styles.css

@@ -1,4 +1,8 @@
 @import "../../../node_modules/maplibre-gl/dist/maplibre-gl.css";
 
+@import "./components/ImageCarousel.css";
+@import "./components/PopupList.css";
+@import "./components/PopupListItem.css";
+@import "./components/PopupDataRows.css";
 @import "./components/PopupContent.css";
 @import "./controls/MapkaDrawControl.css";

package/src/types/popup.ts

@@ -5,6 +5,11 @@ export interface MapkaPopupRow {
   value: unknown;
 }
 
+export interface MapkaPopupAction {
+  label: string;
+  onClick?: () => void;
+}
+
 export type MapkaLayerPopupRow = {
   name: ExpressionSpecification | string;
   value: ExpressionSpecification | unknown;
@@ -15,7 +20,8 @@ export interface MapkaPopupContent {
   description?: string;
   rows?: MapkaPopupRow[];
   imageUrls?: string[];
-  onFavorite?: (id: string) => void;
+  /** Primary action button displayed in the popup */
+  primaryAction?: MapkaPopupAction;
 }
 
 type CreatePopupElement = (id: string) => HTMLElement;
@@ -34,6 +40,11 @@ export interface MapkaPopupOptions extends PopupOptions {
   content: MapkaPopupCreator;
 }
 
+export interface MapkaPopupOptionsResolved extends MapkaPopupOptions {
+  id: string;
+  content: HTMLElement | MapkaPopupContent;
+}
+
 export interface MapkaLayerPopupContent {
   title: ExpressionSpecification | string;
   description: ExpressionSpecification | string;

package/lib/components/CircleIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CircleIcon.d.ts","sourceRoot":"","sources":["../../src/components/CircleIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,oCAmBtB,CAAC"}

package/lib/components/DownloadIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DownloadIcon.d.ts","sourceRoot":"","sources":["../../src/components/DownloadIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,oCAqBxB,CAAC"}

package/lib/components/FreehandIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FreehandIcon.d.ts","sourceRoot":"","sources":["../../src/components/FreehandIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,oCAmBxB,CAAC"}

package/lib/components/LineIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LineIcon.d.ts","sourceRoot":"","sources":["../../src/components/LineIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oCAqBpB,CAAC"}

package/lib/components/PencilIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PencilIcon.d.ts","sourceRoot":"","sources":["../../src/components/PencilIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,oCAoBtB,CAAC"}

package/lib/components/PolygonIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PolygonIcon.d.ts","sourceRoot":"","sources":["../../src/components/PolygonIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,oCA0BvB,CAAC"}

package/lib/components/ProgressDownIcon.d.ts

@@ -1,4 +0,0 @@
-/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
-import { h } from "preact";
-export declare const ProgressDownIcon: () => h.JSX.Element;
-//# sourceMappingURL=ProgressDownIcon.d.ts.map

package/lib/components/ProgressDownIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressDownIcon.d.ts","sourceRoot":"","sources":["../../src/components/ProgressDownIcon.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,eAAO,MAAM,gBAAgB,qBAyB5B,CAAC"}

package/lib/components/RectangleIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RectangleIcon.d.ts","sourceRoot":"","sources":["../../src/components/RectangleIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,oCAmBzB,CAAC"}

package/lib/components/SelectIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectIcon.d.ts","sourceRoot":"","sources":["../../src/components/SelectIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,oCAoBtB,CAAC"}

package/lib/components/TrashIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TrashIcon.d.ts","sourceRoot":"","sources":["../../src/components/TrashIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,oCAuBrB,CAAC"}