@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/components/Map/MapView.mjs

@@ -0,0 +1,539 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, forwardRef, useRef, useState, useEffect } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { DEFAULT_STYLE_URL, applyDefaultBasemap } from "./basemap.mjs";
+import { navPlaceOf, georeferencesOf, cornersOf, boundsOf, readGeoreference } from "../../core/geo.mjs";
+import { sendsCredentials } from "../../core/request.mjs";
+import { selectVisibleCanvases } from "../../core/selectors.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useOptionalClover, useOptionalCloverSelector } from "../../react/context.mjs";
+import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
+import { useRootLanguage } from "../../react/language.mjs";
+import { getMapWorkerUrl } from "../../core/map-config.mjs";
+import { useNearViewport } from "../Body/useNearViewport.mjs";
+const RootMap = forwardRef(function RootMap2(props, ref) {
+  return /* @__PURE__ */ jsx(ConnectedMap, { ...props, scope: "view", landmark: false, forwardedRef: ref });
+});
+function ConnectedMap({
+  scope,
+  onSelect,
+  ...rest
+}) {
+  const context = useOptionalClover();
+  const features = useOptionalCloverSelector(
+    (state) => navPlaceOf(state.manifest, state.collection, context.language),
+    navPlaceOf(null)
+  );
+  const all = useOptionalCloverSelector(
+    (state) => georeferencesOf(state.manifest),
+    NONE
+  );
+  const shown = useOptionalCloverSelector(
+    (state) => selectVisibleCanvases(state.manifest, state.canvasId),
+    NO_CANVASES
+  );
+  const overlays = useMemo(
+    () => scope === "all" ? all : all.filter(
+      (overlay) => shown.some((canvas) => canvas.id === overlay.canvasId)
+    ),
+    [scope, all, shown]
+  );
+  const current = useMemo(
+    () => scope === "view" ? shown.map((canvas) => canvas.id) : void 0,
+    [scope, shown]
+  );
+  return /* @__PURE__ */ jsx(
+    MapView,
+    {
+      ...rest,
+      features,
+      overlays,
+      current,
+      language: context.language,
+      request: context.clover.request,
+      onSelect: (feature) => {
+        onSelect == null ? void 0 : onSelect(feature);
+        const canvasId = feature.properties.canvasId;
+        if (canvasId) context.clover.goTo(canvasId);
+      }
+    }
+  );
+}
+const NONE = [];
+const NO_CANVASES = [];
+const NO_IDS = /* @__PURE__ */ new Set();
+function GivenMap({
+  navPlace,
+  georeferences,
+  ...rest
+}) {
+  const features = useGiven(
+    navPlace,
+    (value) => navPlaceOf(
+      {
+        id: "geomap:given",
+        type: "Manifest",
+        navPlace: value,
+        items: []
+      },
+      null
+    )
+  );
+  const overlays = useGiven(
+    georeferences,
+    (value) => (value ?? []).map((annotation) => readGeoreference(annotation)).filter((overlay) => Boolean(overlay))
+  );
+  return /* @__PURE__ */ jsx(MapView, { ...rest, features, overlays });
+}
+function useGiven(value, read) {
+  const memo = useRef(null);
+  if (!memo.current || memo.current.value !== value) {
+    memo.current = { value, result: read(value) };
+  }
+  return memo.current.result;
+}
+const OVERLAY_SIZE = 2048;
+const POINT_ZOOM = 8;
+const NAVPLACE = "geomap-navplace";
+const FILL = "geomap-navplace-fill";
+const LINE = "geomap-navplace-line";
+const CASING = "geomap-navplace-casing";
+const POINT = "geomap-navplace-point";
+const CLICKABLE = [FILL, LINE, POINT];
+function MapView({
+  features,
+  overlays,
+  current,
+  language,
+  landmark = true,
+  overlay = true,
+  overlayOpacity = 0.75,
+  styleUrl,
+  workerUrl,
+  scrollZoom = false,
+  onSelect,
+  request,
+  forwardedRef,
+  as: Tag = "div",
+  className,
+  style,
+  ...rest
+}) {
+  const { t } = useCloverTranslation();
+  const aboutId = useUniqueId();
+  const root = useRootLanguage(forwardedRef, rest.lang);
+  const { langOf } = root;
+  const container = useRef(null);
+  const [box, setBox] = useState(null);
+  const near = useNearViewport(box);
+  const [map, setMap] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [drawnIds, setDrawnIds] = useState(NO_IDS);
+  const latest = useRef({ onSelect, t });
+  latest.current = { onSelect, t };
+  const name = useRef(
+    null
+  );
+  const framed = useRef("");
+  useEffect(() => {
+    if (!near) return;
+    let live = true;
+    let instance = null;
+    let observer = null;
+    Promise.all([import("maplibre-gl"), import("./worker.mjs")]).then(([module, bundled]) => {
+      var _a;
+      const maplibre = "Map" in module ? module : module.default;
+      if (!live || !container.current) return;
+      const worker = workerUrl ?? getMapWorkerUrl() ?? bundled.bundledWorkerUrl((_a = maplibre.getVersion) == null ? void 0 : _a.call(maplibre));
+      if (worker) maplibre.setWorkerUrl(worker);
+      const { t: t2 } = latest.current;
+      instance = new maplibre.Map({
+        container: container.current,
+        style: styleUrl ?? DEFAULT_STYLE_URL,
+        center: [0, 20],
+        zoom: 1,
+        maxPitch: 0,
+        dragRotate: false,
+        scrollZoom,
+        attributionControl: { compact: true },
+        // MapLibre's own names, in Clover's words; kept current below.
+        locale: {
+          "Map.Title": t2("mapLabel"),
+          "NavigationControl.ZoomIn": t2("imageZoomIn"),
+          "NavigationControl.ZoomOut": t2("imageZoomOut"),
+          "AttributionControl.ToggleAttribution": t2("mapAttribution")
+        }
+      });
+      if (!landmark) instance.getCanvas().setAttribute("role", "group");
+      instance.addControl(
+        new maplibre.NavigationControl({ showCompass: false }),
+        "top-right"
+      );
+      instance.on("load", () => {
+        var _a2;
+        if (!live) return;
+        if (!styleUrl) applyDefaultBasemap(instance);
+        const attrib = (_a2 = container.current) == null ? void 0 : _a2.querySelector(
+          ".maplibregl-ctrl-attrib"
+        );
+        attrib == null ? void 0 : attrib.classList.remove("maplibregl-compact-show");
+        attrib == null ? void 0 : attrib.removeAttribute("open");
+        addPlaceLayers(instance, accentOf(container.current));
+        let popup = null;
+        name.current = (feature, at) => {
+          var _a3, _b;
+          popup == null ? void 0 : popup.remove();
+          popup = null;
+          const title = (_a3 = feature.properties) == null ? void 0 : _a3.title;
+          if (!title) return;
+          const text = document.createElement("span");
+          text.textContent = String(title);
+          const lang = (_b = feature.properties) == null ? void 0 : _b.titleLang;
+          if (lang !== void 0) text.lang = String(lang);
+          popup = new maplibre.Popup({
+            closeButton: false,
+            offset: 8,
+            className: "clover-geomap-popup"
+          }).setLngLat(at).setDOMContent(text).addTo(instance);
+        };
+        for (const layer of CLICKABLE) {
+          instance.on("click", layer, (event) => {
+            var _a3, _b, _c, _d;
+            const feature = (_a3 = event.features) == null ? void 0 : _a3[0];
+            if (!feature) return;
+            (_b = name.current) == null ? void 0 : _b.call(name, feature, event.lngLat);
+            (_d = (_c = latest.current).onSelect) == null ? void 0 : _d.call(_c, feature);
+          });
+          instance.on("mouseenter", layer, () => {
+            instance.getCanvas().style.cursor = "pointer";
+          });
+          instance.on("mouseleave", layer, () => {
+            instance.getCanvas().style.cursor = "";
+          });
+        }
+        setMap(instance);
+      });
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(() => instance == null ? void 0 : instance.resize());
+        observer.observe(container.current);
+      }
+    }).catch(() => {
+      if (live) setFailed(true);
+    });
+    return () => {
+      live = false;
+      observer == null ? void 0 : observer.disconnect();
+      instance == null ? void 0 : instance.remove();
+      name.current = null;
+      framed.current = "";
+      setMap(null);
+    };
+  }, [near]);
+  useEffect(() => {
+    var _a;
+    (_a = map == null ? void 0 : map.getSource(NAVPLACE)) == null ? void 0 : _a.setData(features);
+  }, [map, features]);
+  const listed = overlay ? overlays.filter((item) => drawnIds.has(item.id)) : NONE;
+  const count = features.features.length + listed.length;
+  const described = count > 0;
+  useEffect(() => {
+    var _a;
+    if (!map) return;
+    const canvas = map.getCanvas();
+    canvas.setAttribute("role", landmark ? "region" : "group");
+    const mark = (element, lang) => {
+      if (lang === void 0) element.removeAttribute("lang");
+      else element.setAttribute("lang", lang);
+    };
+    canvas.setAttribute("aria-label", t("mapLabel"));
+    mark(canvas, langOf("mapLabel"));
+    if (described) canvas.setAttribute("aria-describedby", aboutId);
+    else canvas.removeAttribute("aria-describedby");
+    const rename = (selector, key) => {
+      var _a2;
+      const control = (_a2 = container.current) == null ? void 0 : _a2.querySelector(selector);
+      if (!control) return;
+      control.setAttribute("aria-label", t(key));
+      if (control.hasAttribute("title")) control.setAttribute("title", t(key));
+      mark(control, langOf(key));
+    };
+    rename(".maplibregl-ctrl-zoom-in", "imageZoomIn");
+    rename(".maplibregl-ctrl-zoom-out", "imageZoomOut");
+    rename(".maplibregl-ctrl-attrib-button", "mapAttribution");
+    const credits = (_a = container.current) == null ? void 0 : _a.querySelector(
+      ".maplibregl-ctrl-attrib-inner"
+    );
+    if (credits) mark(credits, styleUrl ? void 0 : "en");
+  }, [map, t, langOf, described, aboutId, landmark, styleUrl]);
+  const drawn = useRef({});
+  useEffect(() => {
+    if (!map) return;
+    let live = true;
+    const wanted = overlay ? overlays : [];
+    const ids = new Set(wanted.map((item) => item.id));
+    for (const [id, layer] of Object.entries(drawn.current)) {
+      if (ids.has(id)) continue;
+      if (map.getLayer(layer)) map.removeLayer(layer);
+      if (map.getSource(layer)) map.removeSource(layer);
+      delete drawn.current[id];
+    }
+    setDrawnIds(
+      (before) => [...before].every((id) => ids.has(id)) ? before : new Set([...before].filter((id) => ids.has(id)))
+    );
+    wanted.forEach((item, index) => {
+      if (drawn.current[item.id]) return;
+      const layer = `geomap-overlay-${index}-${hash(item.id)}`;
+      drawn.current[item.id] = layer;
+      void drawOverlay(item, request).then((canvas) => {
+        if (!live || !canvas || drawn.current[item.id] !== layer) return;
+        const corners = cornersOf(item);
+        if (!corners || map.getSource(layer)) return;
+        map.addSource(layer, {
+          type: "canvas",
+          canvas,
+          coordinates: corners,
+          animate: false
+        });
+        map.addLayer(
+          {
+            id: layer,
+            type: "raster",
+            source: layer,
+            paint: {
+              "raster-opacity": overlayOpacity,
+              "raster-fade-duration": 0
+            }
+          },
+          map.getLayer(FILL) ? FILL : void 0
+        );
+        setDrawnIds((before) => new Set(before).add(item.id));
+      });
+    });
+    return () => {
+      live = false;
+    };
+  }, [map, overlays, overlay, request]);
+  useEffect(() => {
+    if (!map) return;
+    for (const layer of Object.values(drawn.current)) {
+      if (map.getLayer(layer)) {
+        map.setPaintProperty(layer, "raster-opacity", overlayOpacity);
+      }
+    }
+  }, [map, overlayOpacity]);
+  useEffect(() => {
+    if (!map) return;
+    const bounds = boundsOf(features.features, overlay ? overlays : []);
+    if (!bounds) return;
+    const extent = bounds.flat().join();
+    if (extent === framed.current) return;
+    framed.current = extent;
+    frame(map, bounds, POINT_ZOOM);
+  }, [map, features, overlays, overlay]);
+  const choose = (feature) => {
+    var _a;
+    const bounds = boundsOf([feature]);
+    if (map && bounds) {
+      frame(map, bounds, Math.max(map.getZoom(), POINT_ZOOM));
+      (_a = name.current) == null ? void 0 : _a.call(name, feature, center(bounds));
+    }
+    onSelect == null ? void 0 : onSelect(feature);
+  };
+  const show = (item) => {
+    const bounds = boundsOf([], [item]);
+    if (map && bounds) frame(map, bounds, POINT_ZOOM);
+  };
+  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: root.ref,
+      className: join("clover-geomap", className),
+      "data-status": failed ? "error" : map ? "ready" : "loading",
+      style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: setBox,
+            style: {
+              position: "relative",
+              height: "var(--clover-map-height, 24rem)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: container,
+                  className: "clover-geomap-canvas",
+                  style: { position: "absolute", inset: 0 }
+                }
+              ),
+              failed && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "clover-geomap-error",
+                  role: "alert",
+                  lang: langOf("mapUnavailable"),
+                  children: t("mapUnavailable")
+                }
+              )
+            ]
+          }
+        ),
+        described && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { id: aboutId, hidden: true, lang: langOf("mapPlacesListed"), children: t("mapPlacesListed", { count }) }),
+          /* @__PURE__ */ jsxs("ul", { className: "clover-geomap-places", children: [
+            features.features.map((feature, index) => {
+              const { title, titleLang, canvasId } = feature.properties;
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  lang: title ? titleLang : langOf("mapPlaceUntitled"),
+                  "aria-current": canvasId && (current == null ? void 0 : current.includes(canvasId)) ? "true" : void 0,
+                  onClick: () => choose(feature),
+                  children: title || t("mapPlaceUntitled", { number: index + 1 })
+                }
+              ) }, `place-${index}`);
+            }),
+            listed.map((item) => {
+              const label = localize(item.label, language);
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => show(item), children: [
+                label.text && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { lang: label.lang, children: label.text }),
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx("span", { lang: langOf("mapOverlay"), children: t("mapOverlay") })
+              ] }) }, item.id);
+            })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function frame(map, bounds, zoom) {
+  const [[west, south], [east, north]] = bounds;
+  if (west === east && south === north) {
+    map.jumpTo({ center: [west, south], zoom });
+  } else {
+    map.fitBounds(bounds, { padding: 32, maxZoom: 12, duration: 0 });
+  }
+}
+function center([[west, south], [east, north]]) {
+  return [(west + east) / 2, (south + north) / 2];
+}
+function accentOf(element) {
+  const value = element ? getComputedStyle(element).getPropertyValue("--clover-color-accent").trim() : "";
+  return value || "#0065c3";
+}
+function addPlaceLayers(map, color) {
+  map.addSource(NAVPLACE, {
+    type: "geojson",
+    data: { type: "FeatureCollection", features: [] }
+  });
+  map.addLayer({
+    id: FILL,
+    type: "fill",
+    source: NAVPLACE,
+    filter: [
+      "match",
+      ["geometry-type"],
+      ["Polygon", "MultiPolygon"],
+      true,
+      false
+    ],
+    paint: {
+      "fill-color": ["coalesce", ["get", "fill"], color],
+      "fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.18]
+    }
+  });
+  const lines = [
+    "match",
+    ["geometry-type"],
+    ["LineString", "MultiLineString", "Polygon", "MultiPolygon"],
+    true,
+    false
+  ];
+  map.addLayer({
+    id: CASING,
+    type: "line",
+    source: NAVPLACE,
+    filter: lines,
+    layout: { "line-join": "round", "line-cap": "round" },
+    paint: {
+      "line-color": "#ffffff",
+      "line-width": ["+", ["coalesce", ["get", "stroke-width"], 2], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1]
+    }
+  });
+  map.addLayer({
+    id: LINE,
+    type: "line",
+    source: NAVPLACE,
+    filter: lines,
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], color],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1]
+    }
+  });
+  map.addLayer({
+    id: POINT,
+    type: "circle",
+    source: NAVPLACE,
+    filter: ["match", ["geometry-type"], ["Point", "MultiPoint"], true, false],
+    paint: {
+      "circle-radius": 6,
+      "circle-color": ["coalesce", ["get", "marker-color"], color],
+      "circle-stroke-width": 2,
+      "circle-stroke-color": "#ffffff"
+    }
+  });
+}
+async function drawOverlay(overlay, request) {
+  const { overlayImageUrl } = await import("./overlayImage.mjs");
+  const url = await overlayImageUrl(overlay.image, OVERLAY_SIZE, request);
+  if (!url) return null;
+  const image = await new Promise((done) => {
+    const element = new Image();
+    element.crossOrigin = sendsCredentials(request) ? "use-credentials" : "anonymous";
+    element.onload = () => done(element);
+    element.onerror = () => done(null);
+    element.src = url;
+  });
+  if (!(image == null ? void 0 : image.naturalWidth)) return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  if (overlay.mask) {
+    const sx = canvas.width / overlay.width;
+    const sy = canvas.height / overlay.height;
+    context.beginPath();
+    overlay.mask.forEach(
+      ([x, y], index) => index ? context.lineTo(x * sx, y * sy) : context.moveTo(x * sx, y * sy)
+    );
+    context.closePath();
+    context.clip();
+  }
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+function hash(text) {
+  let value = 0;
+  for (let i = 0; i < text.length; i++) {
+    value = value * 31 + text.charCodeAt(i) | 0;
+  }
+  return (value >>> 0).toString(36);
+}
+export {
+  ConnectedMap,
+  GivenMap,
+  RootMap
+};

package/dist/components/Map/basemap.mjs

@@ -0,0 +1,50 @@
+"use client";
+const DEFAULT_STYLE_URL = "https://tiles.openfreemap.org/styles/liberty";
+const TERRAIN_SOURCE = "geomap-terrain";
+const TERRAIN_LAYER = "geomap-hillshade";
+const ROADS = /road|highway|motorway|trunk|primary|secondary|tertiary|street|bridge|tunnel|railway|transit|aeroway|ferry|shield|path|pier/i;
+function applyDefaultBasemap(map) {
+  var _a;
+  const layers = ((_a = map.getStyle()) == null ? void 0 : _a.layers) ?? [];
+  for (const layer of layers) {
+    if (!ROADS.test(layer.id)) continue;
+    try {
+      map.removeLayer(layer.id);
+    } catch {
+    }
+  }
+  const before = layers.find(
+    (layer) => layer.type === "symbol" || /boundary|admin/i.test(layer.id)
+  );
+  try {
+    map.addSource(TERRAIN_SOURCE, {
+      type: "raster-dem",
+      tileSize: 256,
+      tiles: [
+        "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
+      ],
+      encoding: "terrarium",
+      maxzoom: 15,
+      attribution: "Elevation: <a href='https://registry.opendata.aws/terrain-tiles/'>Mapzen Terrain Tiles</a>"
+    });
+    map.addLayer(
+      {
+        id: TERRAIN_LAYER,
+        type: "hillshade",
+        source: TERRAIN_SOURCE,
+        paint: {
+          "hillshade-exaggeration": 0.3,
+          "hillshade-shadow-color": "#6b5b47",
+          "hillshade-highlight-color": "#ffffff",
+          "hillshade-accent-color": "#8a7a66"
+        }
+      },
+      before && map.getLayer(before.id) ? before.id : void 0
+    );
+  } catch {
+  }
+}
+export {
+  DEFAULT_STYLE_URL,
+  applyDefaultBasemap
+};