@gramps-connect/story 0.1.2 → 0.2.0

package/dist/player.js

@@ -83,6 +83,19 @@ function placeCenter(place) {
   const bounds = placeBounds(place);
   return bounds ? [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2] : null;
 }
+function storyPlaces(places) {
+  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  const points = /* @__PURE__ */ new Map();
+  for (const place of places) {
+    const center = placeCenter(place);
+    if (!center) continue;
+    points.set(`${center[0].toFixed(5)},${center[1].toFixed(5)}`, center);
+    visit(center, bounds);
+    const box = placeBounds(place);
+    if (box) visit([[box[0], box[1]], [box[2], box[3]]], bounds);
+  }
+  return points.size ? { points: [...points.values()], bounds } : null;
+}
 
 // src/player/MapBackground.tsx
 import { useEffect, useRef, useState } from "react";
@@ -149,8 +162,17 @@ var LINE_LAYER = "story-shape-line";
 var POINT_LAYER = "story-shape-points";
 var LABEL_LAYER = "story-shape-labels";
 var OVERLAY_PREFIX = "story-overlay-";
+var PLACES_SOURCE = "story-places";
+var PLACES_LAYER = "story-places-dots";
+var OVERVIEW_PADDING = 60;
 var EMPTY = { type: "FeatureCollection", features: [] };
-function moveCamera(map, place, duration) {
+function moveCamera(map, slide, duration) {
+  if (slide.overview) {
+    const [west, south, east, north] = slide.overview.bounds;
+    map.fitBounds([[west, south], [east, north]], { maxZoom: 9, padding: OVERVIEW_PADDING, duration });
+    return;
+  }
+  const place = slide.place;
   const bounds = placeBounds(place);
   if (bounds) {
     map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], { maxZoom: 17, duration });
@@ -159,11 +181,20 @@ function moveCamera(map, place, duration) {
   const center = placeCenter(place);
   if (center) map.flyTo({ center, zoom: 9, essential: true, duration });
 }
-function placeMarker(marker, center) {
+function placeMarker(marker, slide) {
   if (!marker) return;
+  const center = placeCenter(slide.place);
   if (center) marker.setLngLat(center);
-  marker.getElement().style.opacity = center ? "1" : "0.4";
+  marker.setOpacity(slide.overview ? 0 : center ? 1 : 0.4);
 }
+var placeDots = (overview) => ({
+  type: "FeatureCollection",
+  features: (overview?.points ?? []).map((coordinates) => ({
+    type: "Feature",
+    properties: {},
+    geometry: { type: "Point", coordinates }
+  }))
+});
 function MapBackground({ initialCenter, current, dark, colors, panelFraction, ohmYear, resolveMedia }) {
   const [containerEl, setContainerEl] = useState(null);
   const mapRef = useRef(null);
@@ -194,10 +225,9 @@ function MapBackground({ initialCenter, current, dark, colors, panelFraction, oh
     mapRef.current = map;
     map.on("style.load", () => setReady(true));
     map.setPadding({ top: 0, bottom: 0, left: 0, right: containerEl.clientWidth * panelFraction });
-    const start = currentRef.current.place;
-    const startCenter = placeCenter(start);
-    map.jumpTo({ center: startCenter ?? initialCenter });
-    if (startCenter) moveCamera(map, start, 0);
+    const start = currentRef.current;
+    map.jumpTo({ center: placeCenter(start.place) ?? initialCenter });
+    moveCamera(map, start, 0);
     map.on("load", () => {
       const c = colorsRef.current;
       const el = document.createElement("div");
@@ -206,7 +236,7 @@ function MapBackground({ initialCenter, current, dark, colors, panelFraction, oh
       el.style.transition = "opacity 300ms";
       el.innerHTML = `<svg viewBox="0 0 24 24" width="26" height="26"><path d="${PIN_PATH_D}" fill="${c.mark}" stroke="${c.surface}" stroke-width="1.5" /></svg>`;
       markerRef.current = new maplibregl.Marker({ element: el, anchor: "bottom" }).setLngLat(initialCenter).addTo(map);
-      placeMarker(markerRef.current, placeCenter(currentRef.current.place));
+      placeMarker(markerRef.current, currentRef.current);
     });
     return () => {
       markerRef.current?.remove();
@@ -273,6 +303,13 @@ function MapBackground({ initialCenter, current, dark, colors, panelFraction, oh
         "text-halo-width": 1.5
       }
     });
+    map.addSource(PLACES_SOURCE, { type: "geojson", data: EMPTY });
+    map.addLayer({
+      id: PLACES_LAYER,
+      type: "circle",
+      source: PLACES_SOURCE,
+      paint: { "circle-radius": 6, "circle-color": c.mark, "circle-stroke-width": 2, "circle-stroke-color": c.surface }
+    });
   }, [ready]);
   const place = current.place;
   useEffect(() => {
@@ -280,13 +317,14 @@ function MapBackground({ initialCenter, current, dark, colors, panelFraction, oh
     if (!map || !ready) return;
     const source = map.getSource(SHAPE_SOURCE);
     source?.setData(place?.geometry ?? EMPTY);
-  }, [ready, current.key, place]);
+    const dots = map.getSource(PLACES_SOURCE);
+    dots?.setData(placeDots(current.overview));
+  }, [ready, current.key, place, current.overview]);
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
-    const center = placeCenter(place);
-    placeMarker(markerRef.current, center);
-    if (center) moveCamera(map, place, 900);
+    placeMarker(markerRef.current, current);
+    moveCamera(map, current, 900);
   }, [current.key]);
   const overlayKey = JSON.stringify(place?.overlays ?? []);
   useEffect(() => {
@@ -719,6 +757,7 @@ function StoryPlayer({
   onSlideChange,
   renderMapModeControl,
   brand,
+  actions,
   initialSlide = 0
 }) {
   const colors = useMemo(() => ({ ...defaultColors(dark), ...colorOverrides }), [dark, colorOverrides]);
@@ -802,7 +841,13 @@ function StoryPlayer({
       else goPrev();
     }
   };
-  const mapSlide = useMemo(() => ({ key: slide?.id ?? String(index), place: slide?.place }), [slide, index]);
+  const places = useMemo(() => storyPlaces(slides.map((s) => s.place)), [slides]);
+  const mapSlide = useMemo(() => ({
+    key: slide?.id ?? String(index),
+    place: slide?.place,
+    // The opening card, with no place of its own, shows where the story goes.
+    overview: index === 0 && !placeCenter(slide?.place) ? places : null
+  }), [slide, index, places]);
   const firstCenter = useMemo(() => {
     if (story.presentation?.basemap === "none") return null;
     for (const s of slides) {
@@ -894,6 +939,22 @@ function StoryPlayer({
             children: /* @__PURE__ */ jsx4("div", { style: { pointerEvents: "auto" }, children: renderMapModeControl ? renderMapModeControl(modeControlProps) : /* @__PURE__ */ jsx4(MapModeControl, { ...modeControlProps, strings, colors }) })
           }
         ),
+        actions && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: onClose ? 60 : 12,
+              height: BAR_HEIGHT,
+              zIndex: 3,
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: actions
+          }
+        ),
         onClose && /* @__PURE__ */ jsx4(
           RoundButton,
           {