rift-ds 1.0.0

package/components/WorldMap/WorldMap.js

@@ -0,0 +1,427 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import { HoverCard } from "../HoverCard/HoverCard.js";
+import "./WorldMap.css";
+import { LAND_PATH } from "./land.js";
+const MAX_LAT = 85.0511;
+const R = 180 / Math.PI;
+const projX = (lng) => lng + 180;
+const projY = (lat) => {
+  const clamped = Math.max(-MAX_LAT, Math.min(MAX_LAT, lat));
+  return 180 - R * Math.log(Math.tan(Math.PI / 4 + clamped * Math.PI / 180 / 2));
+};
+const WORLD_BOUNDS = [-180, -58, 180, 84];
+const WORLD_X0 = projX(WORLD_BOUNDS[0]);
+const WORLD_X1 = projX(WORLD_BOUNDS[2]);
+const WORLD_Y0 = projY(WORLD_BOUNDS[3]);
+const WORLD_Y1 = projY(WORLD_BOUNDS[1]);
+const WORLD_W = WORLD_X1 - WORLD_X0;
+const WORLD_H = WORLD_Y1 - WORLD_Y0;
+const ZOOM_OUT_HEADROOM = 1.3;
+const GRATICULE_MAX_LAT = 80;
+const ZOOM_STEP = 1.5;
+const KEY_PAN = 0.1;
+const DRAG_THRESHOLD = 3;
+const round = (n) => Math.round(n * 10) / 10;
+const clampTo = (n, min, max) => Math.max(min, Math.min(max, n));
+const clampCenter = (c, half, lo, hi) => hi - lo <= half * 2 ? (lo + hi) / 2 : clampTo(c, lo + half, hi - half);
+const pct = (n) => `${n.toFixed(4)}%`;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const WorldMap = React.forwardRef(
+  ({
+    points = [],
+    bounds = WORLD_BOUNDS,
+    fit = "contain",
+    showZoomControls = false,
+    maxZoom = 8,
+    graticuleStep = 15,
+    showLabels = false,
+    activePointId,
+    interactive = true,
+    onPointHover,
+    onPointClick,
+    renderCallout,
+    renderHoverCard,
+    label = "World map",
+    className = "",
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-world-map";
+    const [west, south, east, north] = bounds;
+    const bx0 = projX(west);
+    const by0 = projY(north);
+    const bW = Math.max(projX(east) - bx0, 0.1);
+    const bH = Math.max(projY(south) - by0, 0.1);
+    const boundsKey = bounds.join(",");
+    const [storedView, setStoredView] = useState(null);
+    const view = storedView && storedView.key === boundsKey ? storedView : null;
+    const zoomEnabled = interactive && showZoomControls;
+    const zoom = zoomEnabled && view ? view.zoom : 1;
+    const viewW = bW / zoom;
+    const viewH = bH / zoom;
+    const panX0 = Math.min(projX(WORLD_BOUNDS[0]), bx0);
+    const panX1 = Math.max(projX(WORLD_BOUNDS[2]), bx0 + bW);
+    const panY0 = Math.min(projY(WORLD_BOUNDS[3]), by0);
+    const panY1 = Math.max(projY(WORLD_BOUNDS[1]), by0 + bH);
+    const cx = clampCenter(view?.cx ?? bx0 + bW / 2, viewW / 2, panX0, panX1);
+    const cy = clampCenter(view?.cy ?? by0 + bH / 2, viewH / 2, panY0, panY1);
+    const x0 = cx - viewW / 2;
+    const y0 = cy - viewH / 2;
+    const minZoom = Math.min(
+      1,
+      Math.min(bW / WORLD_W, bH / WORLD_H) / ZOOM_OUT_HEADROOM
+    );
+    const setView = (nextZoom, nextCx, nextCy) => {
+      const bounded = clampTo(nextZoom, minZoom, maxZoom);
+      const z = Math.abs(bounded - 1) < 0.01 ? 1 : bounded;
+      setStoredView({ key: boundsKey, zoom: z, cx: nextCx, cy: nextCy });
+    };
+    const stepZoom = (direction) => {
+      setView(direction > 0 ? zoom * ZOOM_STEP : zoom / ZOOM_STEP, cx, cy);
+    };
+    const wheelStateRef = useRef({
+      zoom,
+      cx,
+      cy,
+      viewW,
+      viewH,
+      minZoom,
+      maxZoom,
+      boundsKey
+    });
+    wheelStateRef.current = { zoom, cx, cy, viewW, viewH, minZoom, maxZoom, boundsKey };
+    const frameElRef = useRef(null);
+    useEffect(() => {
+      const el = frameElRef.current;
+      if (!el || !zoomEnabled) return;
+      const onWheel = (e) => {
+        if (!e.ctrlKey && !e.metaKey) return;
+        e.preventDefault();
+        const s = wheelStateRef.current;
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        const fx = (e.clientX - rect.left) / rect.width;
+        const fy = (e.clientY - rect.top) / rect.height;
+        const bounded = clampTo(s.zoom * Math.exp(-e.deltaY * 16e-4), s.minZoom, s.maxZoom);
+        const z = Math.abs(bounded - 1) < 0.01 ? 1 : bounded;
+        const anchorX = s.cx - s.viewW / 2 + fx * s.viewW;
+        const anchorY = s.cy - s.viewH / 2 + fy * s.viewH;
+        const nextW = s.viewW * s.zoom / z;
+        const nextH = s.viewH * s.zoom / z;
+        setStoredView({
+          key: s.boundsKey,
+          zoom: z,
+          cx: anchorX + (0.5 - fx) * nextW,
+          cy: anchorY + (0.5 - fy) * nextH
+        });
+      };
+      el.addEventListener("wheel", onWheel, { passive: false });
+      return () => el.removeEventListener("wheel", onWheel);
+    }, [zoomEnabled]);
+    const rootRef = useRef(null);
+    const [frame, setFrame] = useState(null);
+    const frameRef = useRef(frame);
+    frameRef.current = frame;
+    const setRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useIsomorphicLayoutEffect(() => {
+      const node = rootRef.current;
+      if (!node) return;
+      const measure = () => {
+        const { clientWidth, clientHeight } = node;
+        if (clientWidth === 0 || clientHeight === 0) return;
+        const scaleX = clientWidth / bW;
+        const scaleY = clientHeight / bH;
+        const scale = fit === "cover" ? Math.max(scaleX, scaleY) : Math.min(scaleX, scaleY);
+        setFrame({ width: bW * scale, height: bH * scale });
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [bW, bH, fit]);
+    const drag = useRef(null);
+    const dragMoved = useRef(false);
+    const [panning, setPanning] = useState(false);
+    const pannable = zoomEnabled && (viewW < panX1 - panX0 - 0.01 || viewH < panY1 - panY0 - 0.01);
+    const handleFramePointerDown = (e) => {
+      if (!pannable || e.button !== 0) return;
+      if (e.pointerType === "touch" && zoom <= 1) return;
+      const measured = frameRef.current;
+      if (!measured) return;
+      drag.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        startCx: cx,
+        startCy: cy,
+        unitsPerPx: viewW / measured.width
+      };
+      dragMoved.current = false;
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const handleFramePointerMove = (e) => {
+      const d = drag.current;
+      if (!d) return;
+      const dx = e.clientX - d.startX;
+      const dy = e.clientY - d.startY;
+      if (!dragMoved.current && Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD) return;
+      if (!dragMoved.current) {
+        dragMoved.current = true;
+        setPanning(true);
+      }
+      setView(zoom, d.startCx - dx * d.unitsPerPx, d.startCy - dy * d.unitsPerPx);
+    };
+    const endFrameDrag = (e) => {
+      if (!drag.current) return;
+      drag.current = null;
+      setPanning(false);
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+    };
+    const handleRootKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!zoomEnabled || e.defaultPrevented) return;
+      switch (e.key) {
+        case "ArrowLeft":
+          setView(zoom, cx - viewW * KEY_PAN, cy);
+          break;
+        case "ArrowRight":
+          setView(zoom, cx + viewW * KEY_PAN, cy);
+          break;
+        case "ArrowUp":
+          setView(zoom, cx, cy - viewH * KEY_PAN);
+          break;
+        case "ArrowDown":
+          setView(zoom, cx, cy + viewH * KEY_PAN);
+          break;
+        case "+":
+        case "=":
+          stepZoom(1);
+          break;
+        case "-":
+        case "_":
+          stepZoom(-1);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+    };
+    const [hoveredId, setHoveredId] = useState(null);
+    const enterPoint = (point) => {
+      setHoveredId(point.id);
+      onPointHover?.(point);
+    };
+    const leavePoint = (point) => {
+      setHoveredId((id) => id === point.id ? null : id);
+      onPointHover?.(null);
+    };
+    let graticule = "";
+    if (graticuleStep > 0) {
+      const x1 = x0 + viewW;
+      const y1 = y0 + viewH;
+      const left = round(x0);
+      const right = round(x1);
+      const top = round(y0);
+      const bottom = round(y1);
+      const firstLng = Math.floor((x0 - 180) / graticuleStep) * graticuleStep;
+      for (let lng = firstLng; projX(lng) <= x1; lng += graticuleStep) {
+        graticule += `M${round(projX(lng))} ${top}V${bottom}`;
+      }
+      const ys = [];
+      for (let lat = -GRATICULE_MAX_LAT; lat <= GRATICULE_MAX_LAT; lat += graticuleStep) {
+        ys.push(projY(lat));
+      }
+      const gTop = projY(GRATICULE_MAX_LAT);
+      const gBottom = projY(-GRATICULE_MAX_LAT);
+      for (let y = gTop - graticuleStep; y >= y0; y -= graticuleStep) ys.push(y);
+      for (let y = gBottom + graticuleStep; y <= y1; y += graticuleStep) ys.push(y);
+      for (const y of ys) {
+        if (y < y0 || y > y1) continue;
+        graticule += `M${left} ${round(y)}H${right}`;
+      }
+    }
+    const placed = points.flatMap((point) => {
+      const px = (projX(point.lng) - x0) / viewW * 100;
+      const py = (projY(point.lat) - y0) / viewH * 100;
+      if (px < 0 || px > 100 || py < 0 || py > 100) return [];
+      return [{ point, px, py }];
+    });
+    const calloutId = activePointId ?? hoveredId;
+    const callout = calloutId ? placed.find((p) => p.point.id === calloutId) : void 0;
+    const calloutSide = callout && callout.px < 50 ? "right" : "left";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const frameClasses = [
+      `${baseClass}__frame`,
+      pannable ? `${baseClass}__frame--pannable` : "",
+      pannable && zoom > 1 ? `${baseClass}__frame--touch-lock` : "",
+      panning ? `${baseClass}__frame--panning` : ""
+    ].filter(Boolean).join(" ");
+    const markerClasses = (point) => [
+      `${baseClass}__marker`,
+      `${baseClass}__marker--${point.kind ?? "point"}`,
+      point.id === calloutId ? `${baseClass}__marker--active` : ""
+    ].filter(Boolean).join(" ");
+    const markerStyle = (px, py, color) => ({
+      left: pct(px),
+      top: pct(py),
+      ...color ? { "--ds-world-map-marker-color": color } : {}
+    });
+    const description = `${placed.length} ${placed.length === 1 ? "point" : "points"}.${zoomEnabled ? " Zoom with the controls or the plus and minus keys; drag or use the arrow keys to move the map." : ""}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        role: interactive ? "group" : "img",
+        "aria-label": `${label}. ${description}`,
+        tabIndex: zoomEnabled ? 0 : void 0,
+        onKeyDown: handleRootKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: frameElRef,
+              className: frameClasses,
+              style: frame ? { width: `${frame.width}px`, height: `${frame.height}px` } : void 0,
+              onPointerDown: handleFramePointerDown,
+              onPointerMove: handleFramePointerMove,
+              onPointerUp: endFrameDrag,
+              onPointerCancel: endFrameDrag,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: `${baseClass}__svg`,
+                    viewBox: `${round(x0)} ${round(y0)} ${round(viewW)} ${round(viewH)}`,
+                    preserveAspectRatio: fit === "cover" ? "xMidYMid slice" : "xMidYMid meet",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    children: [
+                      graticule && /* @__PURE__ */ jsx("path", { className: `${baseClass}__graticule`, d: graticule }),
+                      /* @__PURE__ */ jsx("path", { className: `${baseClass}__land`, d: LAND_PATH })
+                    ]
+                  }
+                ),
+                placed.map(({ point, px, py }) => {
+                  if (!interactive) {
+                    return /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: markerClasses(point),
+                        style: markerStyle(px, py, point.color),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot`, "aria-hidden": "true" }),
+                          showLabels && point.label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: point.label })
+                        ]
+                      },
+                      point.id
+                    );
+                  }
+                  const marker = /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: markerClasses(point),
+                      style: renderHoverCard ? void 0 : markerStyle(px, py, point.color),
+                      "aria-label": point.label ?? point.id,
+                      onPointerEnter: () => enterPoint(point),
+                      onPointerLeave: () => leavePoint(point),
+                      onFocus: () => enterPoint(point),
+                      onBlur: () => leavePoint(point),
+                      onClick: onPointClick ? () => {
+                        if (dragMoved.current) return;
+                        onPointClick(point);
+                      } : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot`, "aria-hidden": "true" }),
+                        showLabels && point.label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, "aria-hidden": "true", children: point.label })
+                      ]
+                    }
+                  );
+                  if (!renderHoverCard) return React.cloneElement(marker, { key: point.id });
+                  return /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__marker-slot`,
+                      style: markerStyle(px, py, point.color),
+                      children: /* @__PURE__ */ jsx(
+                        HoverCard,
+                        {
+                          content: renderHoverCard(point),
+                          position: py < 25 ? "bottom" : "top",
+                          children: marker
+                        }
+                      )
+                    },
+                    point.id
+                  );
+                }),
+                callout && renderCallout && !renderHoverCard && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `${baseClass}__callout`,
+                    "data-side": calloutSide,
+                    style: { left: pct(callout.px), top: pct(callout.py) },
+                    children: renderCallout(callout.point)
+                  }
+                )
+              ]
+            }
+          ),
+          zoomEnabled && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__zoom`, role: "toolbar", "aria-label": "Map zoom controls", children: [
+            /* @__PURE__ */ jsx(
+              CircularButton,
+              {
+                icon: "remove",
+                variant: "tertiary",
+                size: "compact",
+                ariaLabel: "Zoom out",
+                disabled: zoom <= minZoom + 1e-3,
+                onClick: () => stepZoom(-1)
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__zoom-level`,
+                onClick: () => setStoredView(null),
+                "aria-label": `Zoom ${Math.round(zoom * 100)}%. Reset the view`,
+                children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CircularButton,
+              {
+                icon: "add",
+                variant: "tertiary",
+                size: "compact",
+                ariaLabel: "Zoom in",
+                disabled: zoom >= maxZoom,
+                onClick: () => stepZoom(1)
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+WorldMap.displayName = "WorldMap";
+export {
+  WorldMap
+};