@zendir/ui 0.2.2 → 0.2.4

package/dist/react/charts/GroundTrackMapLeaflet.js

@@ -1,10 +1,10 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useCallback, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 /* empty css                   */
 import { geodesicCirclePoints, splitRingAtAntimeridian, segmentsWithWorldCopies, splitPolylineAtAntimeridian } from "./groundTrackMapLeafletUtils.js";
-import { DEFAULT_TILE, CARTO_ATTRIBUTION, OSM_ATTRIBUTION, FALLBACK_TILE } from "./groundTrackMapLeafletTiles.js";
+import { CARTO_ATTRIBUTION, OSM_ATTRIBUTION, TILE_PRESETS, FALLBACK_TILE } from "./groundTrackMapLeafletTiles.js";
 import { useTheme } from "../theme/ThemeProvider.js";
 const STATUS_COLOR_MAP = {
   normal: "#56f000",
@@ -143,13 +143,14 @@ function GroundTrackMapLeaflet({
   showLegend = true,
   showEquator = false,
   showRecenterButton = true,
+  showMapStyleToggle = true,
   defaultCenter = [20, 0],
   defaultZoom = 2,
   height = "100%",
   width = "100%",
   minHeight = "400px",
   emptyMessage = "No orbital data available",
-  tileUrl = DEFAULT_TILE,
+  tileUrl,
   nightTileUrl,
   lightSources,
   className = "",
@@ -159,7 +160,9 @@ function GroundTrackMapLeaflet({
   pinsEditable = false,
   onPinAdd,
   onPinUpdate,
-  onPinRemove
+  onPinRemove,
+  customLayers,
+  onLayerChange
 }) {
   const { tokens } = useTheme();
   const containerRef = useRef(null);
@@ -169,6 +172,71 @@ function GroundTrackMapLeaflet({
   const controlsRef = useRef([]);
   const pinsGroupRef = useRef(null);
   const [ready, setReady] = useState(false);
+  const [layersPanelOpen, setLayersPanelOpen] = useState(false);
+  const layersPanelRef = useRef(null);
+  useEffect(() => {
+    if (!layersPanelOpen) return;
+    const handleClickOutside = (e) => {
+      if (layersPanelRef.current && !layersPanelRef.current.contains(e.target)) {
+        setLayersPanelOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [layersPanelOpen]);
+  const TILE_STORAGE_KEY = "zendir-map-tile-style";
+  const isExplicitTileUrl = tileUrl !== void 0;
+  const [tileStyle, setTileStyle] = useState(() => {
+    if (isExplicitTileUrl) return "dark";
+    try {
+      const saved = localStorage.getItem(TILE_STORAGE_KEY);
+      if (saved === "dark" || saved === "satellite") return saved;
+    } catch {
+    }
+    return "dark";
+  });
+  const handleTileStyleChange = useCallback((style) => {
+    setTileStyle(style);
+    try {
+      localStorage.setItem(TILE_STORAGE_KEY, style);
+    } catch {
+    }
+  }, []);
+  const effectiveTileUrl = isExplicitTileUrl ? tileUrl : TILE_PRESETS[tileStyle];
+  const [internalTerminator, setInternalTerminator] = useState(showTerminator);
+  const [internalGrid, setInternalGrid] = useState(showGrid);
+  useEffect(() => {
+    setInternalTerminator(showTerminator);
+  }, [showTerminator]);
+  useEffect(() => {
+    setInternalGrid(showGrid);
+  }, [showGrid]);
+  const [customLayerState, setCustomLayerState] = useState(() => {
+    const state = {};
+    for (const l of customLayers ?? []) {
+      state[l.id] = l.defaultEnabled ?? true;
+    }
+    return state;
+  });
+  useEffect(() => {
+    setCustomLayerState((prev) => {
+      const next = { ...prev };
+      for (const l of customLayers ?? []) {
+        if (!(l.id in next)) next[l.id] = l.defaultEnabled ?? true;
+      }
+      return next;
+    });
+  }, [customLayers]);
+  const handleLayerToggle = useCallback((layerId, enabled) => {
+    if (layerId === "terminator") {
+      setInternalTerminator(enabled);
+    } else if (layerId === "grid") {
+      setInternalGrid(enabled);
+    } else {
+      setCustomLayerState((prev) => ({ ...prev, [layerId]: enabled }));
+    }
+    onLayerChange == null ? void 0 : onLayerChange(layerId, enabled);
+  }, [onLayerChange]);
   const clearLayers = useCallback(() => {
     var _a;
     const map = mapRef.current;
@@ -200,40 +268,7 @@ function GroundTrackMapLeaflet({
       maxBounds: [[-90, -540], [90, 540]],
       maxBoundsViscosity: 1
     });
-    L.control.zoom({ position: "topright" }).addTo(map);
     map.attributionControl.setPrefix("");
-    const isCartoTiles = tileUrl.includes("cartocdn");
-    if (isCartoTiles) {
-      map.attributionControl.addAttribution(CARTO_ATTRIBUTION);
-    }
-    const tileOptions = {
-      maxZoom: 19,
-      subdomains: isCartoTiles ? "abcd" : "abc",
-      // crossOrigin avoids tainted-canvas errors when Leaflet tries to read tile pixels
-      crossOrigin: true
-    };
-    const tile = L.tileLayer(tileUrl, tileOptions);
-    tile.addTo(map);
-    tileLayerRef.current = tile;
-    let hasSwitchedToFallback = false;
-    const onTileError = () => {
-      if (hasSwitchedToFallback) return;
-      hasSwitchedToFallback = true;
-      tile.off("tileerror", onTileError);
-      tile.remove();
-      if (isCartoTiles) {
-        map.attributionControl.removeAttribution(CARTO_ATTRIBUTION);
-        map.attributionControl.addAttribution(OSM_ATTRIBUTION);
-      }
-      const fallback = L.tileLayer(FALLBACK_TILE, {
-        maxZoom: 19,
-        subdomains: "abc",
-        crossOrigin: true
-      });
-      fallback.addTo(map);
-      tileLayerRef.current = fallback;
-    };
-    tile.on("tileerror", onTileError);
     const overlayGroup = L.layerGroup();
     overlayGroup.addTo(map);
     overlayGroupRef.current = overlayGroup;
@@ -261,12 +296,53 @@ function GroundTrackMapLeaflet({
       mapRef.current = null;
       overlayGroupRef.current = null;
     };
-  }, [tileUrl, clearLayers]);
+  }, [clearLayers]);
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !ready) return;
+    if (tileLayerRef.current) {
+      tileLayerRef.current.remove();
+      tileLayerRef.current = null;
+    }
+    try {
+      map.attributionControl.removeAttribution(CARTO_ATTRIBUTION);
+      map.attributionControl.removeAttribution(OSM_ATTRIBUTION);
+    } catch {
+    }
+    const isCartoTiles = effectiveTileUrl.includes("cartocdn");
+    if (isCartoTiles) {
+      map.attributionControl.addAttribution(CARTO_ATTRIBUTION);
+    }
+    const tile = L.tileLayer(effectiveTileUrl, {
+      maxZoom: 19,
+      subdomains: isCartoTiles ? "abcd" : "abc",
+      crossOrigin: true
+    });
+    tile.addTo(map);
+    tile.bringToBack();
+    tileLayerRef.current = tile;
+    let hasSwitchedToFallback = false;
+    const onTileError = () => {
+      if (hasSwitchedToFallback) return;
+      hasSwitchedToFallback = true;
+      tile.off("tileerror", onTileError);
+      tile.remove();
+      const fallback = L.tileLayer(FALLBACK_TILE, {
+        maxZoom: 19,
+        subdomains: "abc",
+        crossOrigin: true
+      });
+      fallback.addTo(map);
+      fallback.bringToBack();
+      tileLayerRef.current = fallback;
+    };
+    tile.on("tileerror", onTileError);
+  }, [effectiveTileUrl, ready]);
   useEffect(() => {
     if (!ready || !mapRef.current) return;
     const map = mapRef.current;
     clearLayers();
-    if (nightTileUrl && showTerminator) {
+    if (nightTileUrl && internalTerminator) {
       const nightTile = L.tileLayer(nightTileUrl, {
         maxZoom: 19,
         crossOrigin: true,
@@ -275,7 +351,7 @@ function GroundTrackMapLeaflet({
       });
       addLayer(nightTile);
     }
-    if (showTerminator) {
+    if (internalTerminator) {
       const now = terminatorTime ?? /* @__PURE__ */ new Date();
       const BAND_STEP = 2;
       const MAX_DEP = 24;
@@ -308,8 +384,31 @@ function GroundTrackMapLeaflet({
         });
         prevOpacity = b.opacity;
       }
+      const terminatorEdge = calculateTerminatorContinuous(now, 0);
+      if (terminatorEdge.sunset.length > 2) {
+        const sunsetLine = terminatorEdge.sunset.map(([lat, lon]) => [lat, lon]);
+        const sunriseLine = terminatorEdge.sunrise.map(([lat, lon]) => [lat, lon]);
+        [0, 360, -360].forEach((offset) => {
+          addLayer(L.polyline(
+            sunsetLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#5a8ec8", weight: 4, opacity: 0.12, interactive: false, smoothFactor: 1.5 }
+          ));
+          addLayer(L.polyline(
+            sunriseLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#5a8ec8", weight: 4, opacity: 0.12, interactive: false, smoothFactor: 1.5 }
+          ));
+          addLayer(L.polyline(
+            sunsetLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#7aa4d4", weight: 1, opacity: 0.5, interactive: false, smoothFactor: 1.5 }
+          ));
+          addLayer(L.polyline(
+            sunriseLine.map(([lat, lon]) => [lat, lon + offset]),
+            { color: "#7aa4d4", weight: 1, opacity: 0.5, interactive: false, smoothFactor: 1.5 }
+          ));
+        });
+      }
     }
-    if (lightSources && lightSources.length > 0 && showTerminator) {
+    if (lightSources && lightSources.length > 0 && internalTerminator) {
       const now = terminatorTime ?? /* @__PURE__ */ new Date();
       const dayOfYear = Math.floor((now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / 864e5);
       const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
@@ -355,7 +454,7 @@ function GroundTrackMapLeaflet({
         }
       }
     }
-    if (showGrid) {
+    if (internalGrid) {
       const gridStyle = { color: "rgba(157, 112, 255, 0.12)", weight: 0.5, interactive: false };
       [-360, 0, 360].forEach((offset) => {
         for (let lon = -180; lon <= 180; lon += 30) {
@@ -547,11 +646,11 @@ function GroundTrackMapLeaflet({
     ready,
     allSatellites,
     groundStations,
-    showTerminator,
+    internalTerminator,
     terminatorTime,
     nightTileUrl,
     lightSources,
-    showGrid,
+    internalGrid,
     showEquator,
     showLegend,
     tokens.colors.text.secondary,
@@ -650,8 +749,42 @@ function GroundTrackMapLeaflet({
       map.setView(defaultCenter, defaultZoom);
     }
   }, [allSatellites, groundStations, defaultCenter, defaultZoom]);
+  const handleZoomIn = useCallback(() => {
+    var _a;
+    (_a = mapRef.current) == null ? void 0 : _a.zoomIn();
+  }, []);
+  const handleZoomOut = useCallback(() => {
+    var _a;
+    (_a = mapRef.current) == null ? void 0 : _a.zoomOut();
+  }, []);
   const resolvedMinHeight = minHeight || (typeof height === "number" ? `${height}px` : "400px");
   const isEmpty = allSatellites.length === 0 && groundStations.length === 0 && (!pins || pins.length === 0);
+  const ctrlBtnBase = {
+    background: "rgba(20, 24, 38, 0.92)",
+    backdropFilter: "blur(8px)",
+    WebkitBackdropFilter: "blur(8px)",
+    border: "1px solid rgba(120, 100, 180, 0.18)",
+    color: "#c8c0d8",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background 0.15s, border-color 0.15s"
+  };
+  const ctrlHover = (e) => {
+    e.currentTarget.style.background = "rgba(30, 34, 52, 0.95)";
+    e.currentTarget.style.borderColor = "rgba(157, 112, 255, 0.4)";
+  };
+  const ctrlLeave = (e) => {
+    e.currentTarget.style.background = "rgba(20, 24, 38, 0.92)";
+    e.currentTarget.style.borderColor = "rgba(120, 100, 180, 0.18)";
+  };
+  const overlayItems = [];
+  overlayItems.push({ id: "terminator", label: "Day / Night", enabled: internalTerminator });
+  overlayItems.push({ id: "grid", label: "Grid Lines", enabled: internalGrid });
+  for (const l of customLayers ?? []) {
+    overlayItems.push({ id: l.id, label: l.label, enabled: customLayerState[l.id] ?? (l.defaultEnabled ?? true) });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -689,35 +822,232 @@ function GroundTrackMapLeaflet({
             children: emptyMessage
           }
         ),
-        showRecenterButton && /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            onClick: handleRecenter,
-            title: "Recenter map",
-            "aria-label": "Recenter map",
             style: {
               position: "absolute",
-              top: 8,
-              right: 50,
+              top: 10,
+              right: 10,
               zIndex: 1e3,
-              background: "rgba(24, 29, 46, 0.9)",
-              border: "1px solid rgba(157, 112, 255, 0.25)",
-              borderRadius: 6,
-              color: "#e4e0f0",
-              cursor: "pointer",
-              padding: "6px 10px",
-              fontSize: 12,
               display: "flex",
-              alignItems: "center",
-              gap: 4
+              flexDirection: "row",
+              gap: 4,
+              alignItems: "flex-start",
+              pointerEvents: "none"
             },
             children: [
-              /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-                /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
+              showRecenterButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleRecenter,
+                  title: "Recenter map to fit all assets and ground stations",
+                  "aria-label": "Recenter map",
+                  style: {
+                    ...ctrlBtnBase,
+                    borderRadius: 4,
+                    padding: "6px 8px",
+                    gap: 4,
+                    fontSize: 10,
+                    fontWeight: 500,
+                    letterSpacing: "0.03em",
+                    pointerEvents: "auto"
+                  },
+                  onMouseEnter: ctrlHover,
+                  onMouseLeave: ctrlLeave,
+                  children: /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                    /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { ref: layersPanelRef, style: { position: "relative", pointerEvents: "auto" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setLayersPanelOpen((o) => !o),
+                    title: "Map layers",
+                    "aria-label": "Toggle map layers panel",
+                    "aria-expanded": layersPanelOpen,
+                    style: {
+                      ...ctrlBtnBase,
+                      borderRadius: 4,
+                      padding: "6px 8px",
+                      pointerEvents: "auto",
+                      borderColor: layersPanelOpen ? "rgba(157, 112, 255, 0.4)" : void 0,
+                      background: layersPanelOpen ? "rgba(30, 34, 52, 0.95)" : ctrlBtnBase.background
+                    },
+                    onMouseEnter: ctrlHover,
+                    onMouseLeave: ctrlLeave,
+                    children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                      /* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
+                      /* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
+                    ] })
+                  }
+                ),
+                layersPanelOpen && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "calc(100% + 6px)",
+                      right: 0,
+                      minWidth: 180,
+                      background: "rgba(16, 18, 30, 0.96)",
+                      backdropFilter: "blur(16px)",
+                      WebkitBackdropFilter: "blur(16px)",
+                      border: "1px solid rgba(120, 100, 180, 0.18)",
+                      borderRadius: 6,
+                      padding: "8px 0",
+                      boxShadow: "0 8px 32px rgba(0,0,0,0.5)"
+                    },
+                    children: [
+                      !isExplicitTileUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("div", { style: {
+                          padding: "4px 12px 6px",
+                          fontSize: 9,
+                          fontWeight: 600,
+                          letterSpacing: "0.08em",
+                          textTransform: "uppercase",
+                          color: "#7a748e"
+                        }, children: "Base Map" }),
+                        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 2, padding: "0 8px 8px" }, children: ["dark", "satellite"].map((style) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => handleTileStyleChange(style),
+                            "aria-pressed": tileStyle === style,
+                            style: {
+                              flex: 1,
+                              background: tileStyle === style ? "rgba(157, 112, 255, 0.18)" : "rgba(255,255,255,0.03)",
+                              border: `1px solid ${tileStyle === style ? "rgba(157, 112, 255, 0.35)" : "rgba(120, 100, 180, 0.1)"}`,
+                              borderRadius: 4,
+                              color: tileStyle === style ? "#d0c4ee" : "#7a748e",
+                              cursor: "pointer",
+                              padding: "5px 6px",
+                              fontSize: 10,
+                              fontWeight: tileStyle === style ? 600 : 400,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              gap: 4,
+                              transition: "all 0.15s ease"
+                            },
+                            children: [
+                              style === "dark" ? /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" }) }) : /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                                /* @__PURE__ */ jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" })
+                              ] }),
+                              style === "dark" ? "Dark" : "Satellite"
+                            ]
+                          },
+                          style
+                        )) }),
+                        /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(120, 100, 180, 0.1)", margin: "0 8px" } })
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { style: {
+                        padding: `${isExplicitTileUrl ? "4px" : "8px"} 12px 4px`,
+                        fontSize: 9,
+                        fontWeight: 600,
+                        letterSpacing: "0.08em",
+                        textTransform: "uppercase",
+                        color: "#7a748e"
+                      }, children: "Overlays" }),
+                      overlayItems.map((item) => /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleLayerToggle(item.id, !item.enabled),
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            width: "100%",
+                            padding: "5px 12px",
+                            background: "transparent",
+                            border: "none",
+                            color: item.enabled ? "#c8c0d8" : "#5a5470",
+                            cursor: "pointer",
+                            fontSize: 11,
+                            textAlign: "left",
+                            transition: "background 0.1s"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.background = "rgba(157, 112, 255, 0.08)";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.background = "transparent";
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("span", { style: {
+                              width: 14,
+                              height: 14,
+                              borderRadius: 3,
+                              border: `1.5px solid ${item.enabled ? "rgba(157, 112, 255, 0.6)" : "rgba(120, 100, 180, 0.25)"}`,
+                              background: item.enabled ? "rgba(157, 112, 255, 0.22)" : "transparent",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              flexShrink: 0,
+                              transition: "all 0.15s ease"
+                            }, children: item.enabled && /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 12 12", fill: "none", stroke: "#d0c4ee", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M2 6l3 3 5-5" }) }) }),
+                            item.label
+                          ]
+                        },
+                        item.id
+                      ))
+                    ]
+                  }
+                )
               ] }),
-              "Recenter"
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", pointerEvents: "auto" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleZoomIn,
+                    title: "Zoom in",
+                    "aria-label": "Zoom in",
+                    style: {
+                      ...ctrlBtnBase,
+                      borderRadius: "4px 4px 0 0",
+                      borderBottom: "none",
+                      width: 30,
+                      height: 28,
+                      fontSize: 16,
+                      fontWeight: 300,
+                      pointerEvents: "auto"
+                    },
+                    onMouseEnter: ctrlHover,
+                    onMouseLeave: ctrlLeave,
+                    children: "+"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleZoomOut,
+                    title: "Zoom out",
+                    "aria-label": "Zoom out",
+                    style: {
+                      ...ctrlBtnBase,
+                      borderRadius: "0 0 4px 4px",
+                      width: 30,
+                      height: 28,
+                      fontSize: 16,
+                      fontWeight: 300,
+                      pointerEvents: "auto"
+                    },
+                    onMouseEnter: ctrlHover,
+                    onMouseLeave: ctrlLeave,
+                    children: "−"
+                  }
+                )
+              ] })
             ]
           }
         )