@eodash/eodash 5.7.0 → 5.8.0

package/dist/client/{index-1JKE68n3.js → index-1wMAyuNL.js}

@@ -1,14 +1,70 @@
-import { onMounted, onUnmounted, watch, computed, withAsyncContext, useTemplateRef, ref, toRaw, nextTick, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, createCommentVNode, createVNode } from 'vue';
+import { watch, onUnmounted, onMounted, computed, withAsyncContext, useTemplateRef, ref, toRaw, nextTick, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, createCommentVNode, createVNode } from 'vue';
 import { transformExtent } from '@eox/map';
 import '@eox/map/src/plugins/advancedLayersAndSources';
-import { T as setMapProjFromCol, D as mapPosition, Q as sanitizeBbox, i as mapEl, R as mapCompareEl, E as indicator, H as compareIndicator, B as poi, U as isGlobe, A as datetime } from './helpers-DjZVl_WF.js';
+import { a0 as loading, ab as isGlobe, ac as setMapProjFromCol, P as isFirstLoad, O as mapPosition, a3 as sanitizeBbox, q as mapEl, a5 as mapCompareEl, a4 as tooltipAdapter, Q as indicator, U as compareIndicator, M as poi, a9 as layerControlFormValue, a8 as layerControlFormValueCompare, L as datetime, T as eodashCompareCollections, W as eodashCollections } from './helpers-BFuh19CP.js';
 import { storeToRefs } from 'pinia';
-import { H as useSTAcStore, R as useEmitLayersUpdate, S as isFirstLoad, N as useOnLayersUpdate, _ as _export_sfc, G as useDisplay, a as useLayout, Q as layerControlFormValue, P as layerControlFormValueCompare, M as eodashCompareCollections, L as eodashCollections } from './asWebComponent-BHWpMuE3.js';
-import { c as createLayersConfig } from './create-layers-config-CBoYedqB.js';
+import { H as useSTAcStore, aa as useEmitLayersUpdate, L as useOnLayersUpdate, _ as _export_sfc, G as useDisplay, a as useLayout } from './asWebComponent-IZanwL-A.js';
+import { c as createLayersConfig } from './create-layers-config-3S3y_kZg.js';
 import log from 'loglevel';
 import { i as inAndOut } from './easing-CH0-9wR8.js';
 import mustache from 'mustache';
-import EodashMapBtns from './EodashMapBtns-Cpned0tc.js';
+import EodashMapBtns from './EodashMapBtns-CG7u2Aq8.js';
+
+/**
+ * Tracks map loading state at the source level via `loading.activeLoads`,
+ * the same counter used by the axios plugin. Re-attaches source listeners
+ * whenever eox-map fires `layerschanged`, using `getFlatLayersArray`.
+ *
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} compareMapElement
+ */
+const useMapLoading = (mapElement, compareMapElement) => {
+  // This instance's outstanding loads, so unmount subtracts only its share.
+  let localLoads = 0;
+  const startHandler = () => {
+    localLoads++;
+    loading.activeLoads++;
+  };
+  const endHandler = () => {
+    localLoads = Math.max(0, localLoads - 1);
+    loading.activeLoads = Math.max(0, loading.activeLoads - 1);
+  };
+
+  /** @param {import("@eox/map").EOxMap | null} newMapEl */
+  const watcherHandler = (newMapEl) => {
+    if (!newMapEl) return;
+
+    const hasStartListener = newMapEl.map
+      .getListeners("loadstart")
+      ?.some((listner) => listner === startHandler);
+    const hasEndListener = newMapEl.map
+      .getListeners("loadend")
+      ?.some((listner) => listner === endHandler);
+
+    if (!hasStartListener) {
+      newMapEl.map.addEventListener("loadstart", startHandler);
+    }
+    if (!hasEndListener) {
+      newMapEl.map.addEventListener("loadend", endHandler);
+    }
+  };
+  const stopMainWatcher = watch(mapElement, watcherHandler, {
+    immediate: true,
+  });
+  const stopCompareWatcher = watch(compareMapElement, watcherHandler, {
+    immediate: true,
+  });
+
+  onUnmounted(() => {
+    mapElement.value?.map.removeEventListener("loadstart", startHandler);
+    mapElement.value?.map.removeEventListener("loadend", endHandler);
+    compareMapElement.value?.map.removeEventListener("loadstart", startHandler);
+    compareMapElement.value?.map.removeEventListener("loadend", endHandler);
+    stopMainWatcher();
+    stopCompareWatcher();
+    loading.activeLoads = Math.max(0, loading.activeLoads - localLoads);
+  });
+};
 
 /**
  * Holder for previous compare map view as it is overwritten by sync
@@ -40,14 +96,52 @@ const useHandleMapMoveEnd = (mapElement, mapPosition) => {
     }
   };
 
+  const handleGlobeMoveEnd = () => {
+    const camera = mapElement.value?.globe?.planet?.camera;
+    const lonLat = camera?.getLonLat();
+    if (!lonLat) return;
+    const { lon, lat, height } = lonLat;
+    if (![lon, lat, height].some(Number.isNaN)) {
+      mapPosition.value = [lon, lat, height];
+    }
+  };
+
+  /** @type {{ events: { off: Function } } | null} */
+  let subscribedCamera = null;
+
+  const subscribeGlobe = (retries = 3) => {
+    if (!isGlobe.value) return; // toggled back out during retry
+    const camera = mapElement.value?.globe?.planet?.camera;
+    if (camera) {
+      if (subscribedCamera === camera) return;
+      camera.events.on("moveend", handleGlobeMoveEnd);
+      subscribedCamera = camera;
+      handleGlobeMoveEnd();
+      return;
+    }
+    if (retries > 0) setTimeout(() => subscribeGlobe(retries - 1), 50);
+  };
+  const unsubscribeGlobe = () => {
+    subscribedCamera?.events.off("moveend", handleGlobeMoveEnd);
+    subscribedCamera = null;
+  };
+
+  const stopGlobeWatch = watch(isGlobe, (globe) =>
+    globe ? subscribeGlobe() : unsubscribeGlobe(),
+  );
+
   onMounted(() => {
-    /** @type {import('ol/Map').default} */
-    (mapElement.value?.map)?.on("moveend", handleMoveEnd);
+    const map = mapElement.value?.map;
+    map?.on("moveend", handleMoveEnd);
+    // Seed mapPosition from the initial view
+    handleMoveEnd(/** @type {any} */ ({ map }));
   });
 
   onUnmounted(() => {
     /** @type {import('ol/Map').default} */
     (mapElement.value?.map)?.un("moveend", handleMoveEnd);
+    unsubscribeGlobe();
+    stopGlobeWatch();
   });
 };
 
@@ -62,6 +156,7 @@ const useHandleMapMoveEnd = (mapElement, mapPosition) => {
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
  * @param {boolean} zoomToExtent
  * @param {import("vue").Ref<import("stac-ts").StacItem | import("stac-ts").StacLink | null>} [selectedItem]
+ * @param {Record<string, any>[]} [defaultBaseLayers]
  */
 const useInitMap = (
   mapElement,
@@ -72,6 +167,7 @@ const useInitMap = (
   partnerMap,
   zoomToExtent,
   selectedItem,
+  defaultBaseLayers,
 ) => {
   log.debug(
     "InitMap",
@@ -101,12 +197,24 @@ const useInitMap = (
         );
 
       if (updatedStac) {
-        if (
+        const isSameStac = updatedStac?.id === previousStac?.id;
+        const isSameItem = updatedItem?.id === previousItem?.id;
+
+        // Item deselect: overview render is owned by the item catalog widget.
+        const isItemDeselect =
+          previousItem &&
+          !updatedItem &&
+          isSameStac &&
+          updatedTime === previousTime;
+        if (isItemDeselect) return;
+
+        // Re-fire from our own datetime.value write, skip and clear
+        const isOwnDatetimeUpdate =
           internalDatetime !== null &&
           updatedTime === internalDatetime &&
-          updatedStac?.id === previousStac?.id &&
-          updatedItem?.id === previousItem?.id
-        ) {
+          isSameStac &&
+          isSameItem;
+        if (isOwnDatetimeUpdate) {
           internalDatetime = null;
           return;
         }
@@ -154,7 +262,9 @@ const useInitMap = (
             updatedStac,
             eodashCols,
             updatedItem ?? updatedTime,
+            defaultBaseLayers,
           );
+
           log.debug(
             "Assigned layers after changing time only",
             JSON.parse(JSON.stringify(layersCollection)),
@@ -176,6 +286,11 @@ const useInitMap = (
         if (interval && interval.length > 0 && interval[0].length > 1) {
           // @ts-expect-error this is the defined STAC structure
           endInterval = new Date(interval[0][1]);
+          // If end interval is in the future, set to now,
+          // for item fetching based on search endpoint
+          if (endInterval.getTime() > Date.now()) {
+            endInterval = new Date();
+          }
           log.debug(
             "Indicator load: found stac extent, setting time to latest value",
             endInterval,
@@ -201,7 +316,8 @@ const useInitMap = (
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          resolvedTime,
+          updatedItem ?? resolvedTime,
+          defaultBaseLayers,
         );
 
         if (zoomToExtent) {
@@ -284,7 +400,7 @@ const useUpdateTooltipProperties = (
   });
 };
 
-const _style_0 = "#cursor-coordinates[data-v-5de71391]{position:fixed;left:24px;bottom:54px;color:#000000e6;font-size:10px;font-family:var(--eox-body-font-family);background:#fffe;border-radius:4px;border:none;padding:0 3px;max-height:24px}@media(max-width:959px){#cursor-coordinates[data-v-5de71391]{display:none}}#scale-line[data-v-5de71391]{position:fixed;left:24px;bottom:28px;color:#fff}@media(max-width:959px){#scale-line[data-v-5de71391]{bottom:102px}}[data-v-5de71391] .ol-scale-line{background:#fffe!important;border-radius:4px!important;border:none!important;padding:0 3px 3px!important;font-size:10px!important;font-family:var(--eox-body-font-family);max-height:20px}[data-v-5de71391] .ol-scale-line-inner{display:flex;justify-content:center;border:1px solid rgba(0,0,0,.5)!important;border-top:none!important;color:#333!important;font-weight:500!important;transform:translateY(1px)}.map-buttons-container[data-v-5de71391]{position:fixed;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);pointer-events:none;z-index:1}.map-buttons-container[data-v-5de71391]>*{pointer-events:auto}";
+const _style_0 = ".map-buttons-container[data-v-0ac5d70c]{position:fixed;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);pointer-events:none;z-index:1}.map-buttons-container[data-v-0ac5d70c]>*{pointer-events:auto}";
 
 const _hoisted_1 = [".enabled"];
 const _hoisted_2 = [".animationOptions", ".center", ".zoom", ".layers", ".controls"];
@@ -306,42 +422,73 @@ const _hoisted_7 = {
 const _sfc_main = {
   __name: 'index',
   props: {
+  baseLayers: {
+    /** @type {import("vue").PropType<import("@eox/map").EoxLayer[]>} */
+    type: Array,
+    default: () => [
+      {
+        type: "Tile",
+        source: { type: "OSM" },
+        properties: {
+          id: "osm",
+          title: "Background",
+          layerControlExclusive: true,
+        },
+      },
+    ],
+  },
   enableCompare: {
     type: Boolean,
     default: false,
   },
-  /** @type {import("vue").PropType<[number,number]>} */
+  /**
+   * Initial map center as [lon, lat]; falls back to the last stored map position.
+   * @default [15, 48]
+   */
   center: {
-    //@ts-expect-error todo
-    type: Array,
+    type: /** @type {import("vue").PropType<[number, number]>} */ (
+      /** @type {unknown} */ (Array)
+    ),
     default: () => [mapPosition.value?.[0] ?? 15, mapPosition.value?.[1] ?? 48],
   },
+  /**
+   * Initial zoom level; falls back to the last stored map position.
+   * @default 4
+   */
   zoom: {
     type: Number,
     default: mapPosition.value?.[2] ?? 4,
   },
+  /** Fly to the selected collection's spatial extent on selection. */
   zoomToExtent: {
     type: Boolean,
     default: true,
   },
+  /** Show live cursor coordinates as a fixed overlay at the bottom-left of the map. */
   enableCursorCoordinates: {
     type: Boolean,
     default: true,
   },
+  /** Show an OpenLayers scale-line control at the bottom-left of the map. */
   enableScaleLine: {
     type: Boolean,
     default: true,
   },
+  /** Grid position of the floating button toolbar. `x` accepts responsive `"mobile/tablet/desktop"` column notation. */
   btnsPosition: {
-    type: Object,
+    type: /** @type {import("vue").PropType<{ x: string | number; y: number; gap: number }>} */ (
+      Object
+    ),
     default: () => ({
       x: "12/9/10",
       y: 1,
       gap: 16,
     }),
   },
+  /** Toolbar feature flags; set any flag to `false` to hide the corresponding button. */
   btns: {
-    /** @type {import("vue").PropType<{
+    type: /**
+     * @type {import("vue").PropType<{
      * enableExportMap?: boolean;
      * enableChangeProjection?: boolean;
      * enableBackToPOIs?: boolean;
@@ -349,14 +496,14 @@ const _sfc_main = {
      * searchParams?: object;
      * enableZoom?: boolean;
      * enableGlobe?: boolean;
+     * enableMosaic?: boolean;
      * enableFeedback?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
      *   fallbackTemplate?:string;
      *   itemFilterConfig?:InstanceType<import("../EodashItemFilter.vue").default>["$props"]
      * };
-     * }> }*/
-    type: Object,
+     * }> } */ (Object),
     default: () => ({
       enableExportMap: true,
       enableChangeProjection: true,
@@ -365,6 +512,7 @@ const _sfc_main = {
       enableSearch: true,
       enableZoom: true,
       enableGlobe: true,
+      enableMosaic: true,
       enableFeedback: true,
       searchParams: {},
     }),
@@ -414,6 +562,7 @@ const btnsProps = computed(() => ({
   enableSearch: props.btns.enableSearch ?? true,
   enableZoom: props.btns.enableZoom ?? true,
   enableGlobe: props.btns.enableGlobe ?? true,
+  enableMosaic: props.btns.enableMosaic ?? true,
   enableFeedback: props.btns.enableFeedback ?? true,
   searchParams: props.btns.searchParams,
 }));
@@ -433,22 +582,13 @@ const cursorCoordsRef = useTemplateRef("cursor-coords");
 const tooltipProperties = ref([]);
 /** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const compareTooltipProperties = ref([]);
-/** @type {import("vue").ComputedRef<{
-  Attribution: { collapsible: boolean };
-  ScaleLine?: { target: HTMLElement };
-  MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
-}>} */
+
 const controls = computed(() => {
-  /** @type {{
-    Attribution: { collapsible: boolean };
-    ScaleLine?: { target: HTMLElement };
-    MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
-  }} */
-  const controlsObj = {
+  const controlsObj = /** @type {import("@eox/map").ControlDictionary} */ ({
     Attribution: {
       collapsible: true,
     },
-  };
+  });
 
   if (props.enableScaleLine && scaleLineRef.value) {
     controlsObj.ScaleLine = {
@@ -459,12 +599,10 @@ const controls = computed(() => {
   if (props.enableCursorCoordinates && cursorCoordsRef.value) {
     controlsObj.MousePosition = {
       projection: "EPSG:4326",
-      coordinateFormat: (/** @type {[number, number]} */ c) => {
-        const lat = c[1];
-        const lng = c[0];
-        const latStr = `${Math.abs(lat).toFixed(3)}°${lat >= 0 ? "N" : "S"}`;
-        const lngStr = `${Math.abs(lng).toFixed(3)}°${lng >= 0 ? "E" : "W"}`;
-        return `${latStr}, ${lngStr}`;
+      coordinateFormat: (c) => {
+        if (!c) return "";
+        const [lon, lat] = c;
+        return `${Math.abs(lat).toFixed(3)} °${lat >= 0 ? "N" : "S"}, ${Math.abs(lon).toFixed(3)} °${lon >= 0 ? "E" : "W"}`;
       },
       target: cursorCoordsRef.value,
     };
@@ -476,28 +614,17 @@ const controls = computed(() => {
 const initialCenter = toRaw(props.center);
 const initialZoom = toRaw(mapPosition.value?.[2] ?? props.zoom);
 /** @type {import("vue").Ref<Record<string,any>[]>} */
-const eoxMapLayers = ref([
-  {
-    type: "Tile",
-    source: { type: "OSM" },
-    properties: {
-      id: "osm",
-      title: "Background",
-    },
-  },
-]);
+const eoxMapLayers = ref(
+  /** @type {Record<string,any>[]} */ (
+    structuredClone(toRaw(props.baseLayers))
+  ),
+);
 
-/** @type {import("vue").Ref<Record<string,any>[]>} */
-const eoxMapCompareLayers = ref([
-  {
-    type: "Tile",
-    source: { type: "OSM" },
-    properties: {
-      id: "osm",
-      title: "Background",
-    },
-  },
-]);
+const eoxMapCompareLayers = ref(
+  /** @type {Record<string,any>[]} */ (
+    structuredClone(toRaw(props.baseLayers))
+  ),
+);
 
 const animationOptions = ref({
   duration: 0, // Initially set to 0 for an instant "jump"
@@ -505,9 +632,10 @@ const animationOptions = ref({
 });
 
 /** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
-const eoxMap = ref(null);
+const eoxMap = useTemplateRef("eoxMap");
 /** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
-const compareMap = ref(null);
+const compareMap = useTemplateRef("compareMap");
+
 const { selectedCompareStac } = storeToRefs(useSTAcStore());
 const showCompare = computed(() =>
   props.enableCompare && !!selectedCompareStac.value ? "" : "first",
@@ -516,10 +644,20 @@ const showCompare = computed(() =>
 useHandleMapMoveEnd(eoxMap, mapPosition);
 
 onMounted(() => {
-  const { selectedCompareStac, selectedStac, selectedItem } =
-    storeToRefs(useSTAcStore());
+  const {
+    selectedCompareStac,
+    selectedStac,
+    selectedItem,
+    selectedCompareItem,
+  } = storeToRefs(useSTAcStore());
+  if (!eoxMap.value) {
+    console.error("EOxMap reference is not available on mounted.");
+    return;
+  }
   // assign map Element state to eox map
   mapEl.value = eoxMap.value;
+  // enable terrain
+  mapEl.value.globeConfig.terrain = true;
 
   if (props.enableCompare) {
     mapCompareEl.value = compareMap.value;
@@ -534,6 +672,8 @@ onMounted(() => {
       eoxMapCompareLayers,
       eoxMap,
       false,
+      selectedCompareItem,
+      props.baseLayers,
     );
 
     useUpdateTooltipProperties(
@@ -552,6 +692,7 @@ onMounted(() => {
     compareMap,
     props.zoomToExtent,
     selectedItem,
+    props.baseLayers,
   );
   // After the initial mount and "jump", set the animation duration for subsequent flyTo calls
   nextTick(() => {
@@ -559,14 +700,23 @@ onMounted(() => {
   });
 });
 
+// sync map loading with the global loading state
+useMapLoading(eoxMap, compareMap);
+
 useUpdateTooltipProperties(eodashCollections, tooltipProperties);
 
 const mainTooltipStyles = computed(() => ({
-  visibility: tooltipProperties.value.length ? "visible" : "hidden",
+  visibility:
+    tooltipProperties.value.length || !!tooltipAdapter.value
+      ? "visible"
+      : "hidden",
 }));
 
 const compareTooltipStyles = computed(() => ({
-  visibility: compareTooltipProperties.value.length ? "visible" : "hidden",
+  visibility:
+    compareTooltipProperties.value.length || !!tooltipAdapter.value
+      ? "visible"
+      : "hidden",
 }));
 /**
  * @param {"main" | "compare"} map
@@ -592,6 +742,9 @@ const tooltipPropertyTransform = (map) => {
       (prop) => prop.id === param.key,
     );
     if (!tooltipProp) {
+      if (tooltipAdapter.value) {
+        return tooltipAdapter.value(param, map);
+      }
       return undefined;
     }
     if (typeof param.value === "object") {
@@ -603,7 +756,6 @@ const tooltipPropertyTransform = (map) => {
         : 4;
       param.value = Number(param.value).toFixed(decimals).toString();
     }
-
     return {
       key: tooltipProp.title || tooltipProp.id,
       value: param.value + " " + (tooltipProp.appendix || ""),
@@ -692,6 +844,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-5de71391"]]);
+const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-0ac5d70c"]]);
 
 export { index as default };