@zendir/ui 0.2.9 → 0.2.11

package/dist/react/charts/GroundTrackMapLeaflet.js

@@ -102,47 +102,15 @@ function createStationDivIcon(statusColor, type, status) {
     tooltipAnchor: [0, -14]
   });
 }
-function calculateSubSolarPoint(date) {
-  const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
-  const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
-  const B = 2 * Math.PI / 365 * (dayOfYear - 81);
-  const eotMinutes = 9.87 * Math.sin(2 * B) - 7.53 * Math.cos(B) - 1.5 * Math.sin(B);
-  const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
-  const solarHours = utcHours + eotMinutes / 60;
-  const lon = -(solarHours - 12) * 15;
-  return [declination, (lon + 540) % 360 - 180];
-}
-function calculateSubLunarPoint(date) {
-  const J2000 = Date.UTC(2e3, 0, 1, 12, 0, 0);
-  const d = (date.getTime() - J2000) / 864e5;
-  const DEG = Math.PI / 180;
-  const L2 = (218.316 + 13.176396 * d) % 360;
-  const M = (134.963 + 13.064993 * d) % 360;
-  const F = (93.272 + 13.22935 * d) % 360;
-  const lon_ecl = L2 + 6.289 * Math.sin(M * DEG);
-  const lat_ecl = 5.128 * Math.sin(F * DEG);
-  const obliquity = 23.439 - 36e-8 * d;
-  const sinRA = Math.sin(lon_ecl * DEG) * Math.cos(obliquity * DEG) - Math.tan(lat_ecl * DEG) * Math.sin(obliquity * DEG);
-  const cosRA = Math.cos(lon_ecl * DEG);
-  let RA = Math.atan2(sinRA, cosRA) / DEG;
-  if (RA < 0) RA += 360;
-  const dec = Math.asin(
-    Math.sin(lat_ecl * DEG) * Math.cos(obliquity * DEG) + Math.cos(lat_ecl * DEG) * Math.sin(obliquity * DEG) * Math.sin(lon_ecl * DEG)
-  ) / DEG;
-  const GMST = (280.46061837 + 360.98564736629 * d) % 360;
-  let geoLon = RA - GMST;
-  geoLon = (geoLon + 540) % 360 - 180;
-  return [dec, geoLon];
-}
 function calculateTerminatorContinuous(date, depressionDeg = 0, numPoints = 360) {
-  const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
+  const dayOfYear = Math.floor((date.getTime() - Date.UTC(date.getUTCFullYear(), 0, 0)) / 864e5);
   const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
   const decRad = declination * Math.PI / 180;
   const B = 2 * Math.PI / 365 * (dayOfYear - 81);
   const eotMinutes = 9.87 * Math.sin(2 * B) - 7.53 * Math.cos(B) - 1.5 * Math.sin(B);
   const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
   const solarHours = utcHours + eotMinutes / 60;
-  const hourAngle = solarHours / 24 * 360 - 180;
+  const subSolarLon = -(solarHours - 12) * 15;
   const depRad = depressionDeg * Math.PI / 180;
   const sunset = [];
   const sunrise = [];
@@ -152,12 +120,12 @@ function calculateTerminatorContinuous(date, depressionDeg = 0, numPoints = 360)
     const cosH = -(Math.sin(depRad) + Math.sin(latRad) * Math.sin(decRad)) / (Math.cos(latRad) * Math.cos(decRad));
     if (cosH < -1) ;
     else if (cosH > 1) {
-      sunset.push([lat, hourAngle]);
-      sunrise.push([lat, hourAngle + 360]);
+      sunset.push([lat, subSolarLon]);
+      sunrise.push([lat, subSolarLon + 360]);
     } else {
       const H = Math.acos(cosH) * 180 / Math.PI;
-      sunset.push([lat, hourAngle + H]);
-      sunrise.push([lat, hourAngle + 360 - H]);
+      sunset.push([lat, subSolarLon + H]);
+      sunrise.push([lat, subSolarLon + 360 - H]);
     }
   }
   return { sunset, sunrise };
@@ -385,20 +353,18 @@ function GroundTrackMapLeaflet({
     }
     if (internalTerminator) {
       const now = terminatorTime ?? /* @__PURE__ */ new Date();
+      const isSatelliteTile = tileStyle === "satellite";
       const BAND_STEP = 1.5;
       const MAX_DEP = 30;
-      const NIGHT_OPACITY = 0.6;
+      const NIGHT_OPACITY = isSatelliteTile ? 0.75 : 0.38;
+      const NIGHT_COLOR = isSatelliteTile ? "#030810" : "#2a3a52";
       const bandSteps = [];
       for (let d = 0; d <= MAX_DEP; d += BAND_STEP) {
         const t = Math.min(d / 18, 1);
-        const opacity = t * t * (NIGHT_OPACITY * 0.78) + (d > 18 ? (d - 18) / 12 * (NIGHT_OPACITY * 0.22) : 0);
-        let color;
-        if (d <= 6) color = "#1a3a5c";
-        else if (d <= 12) color = "#0f2440";
-        else color = "#060e1a";
-        bandSteps.push({ depression: d, opacity: Math.min(opacity, NIGHT_OPACITY), color });
+        const opacity = Math.pow(t, 1.6) * (NIGHT_OPACITY * 0.85) + (d > 18 ? (d - 18) / 12 * (NIGHT_OPACITY * 0.15) : 0);
+        bandSteps.push({ depression: d, opacity: Math.min(opacity, NIGHT_OPACITY), color: NIGHT_COLOR });
       }
-      bandSteps.push({ depression: 90, opacity: NIGHT_OPACITY, color: "#060e1a" });
+      bandSteps.push({ depression: 90, opacity: NIGHT_OPACITY, color: NIGHT_COLOR });
       let prevOpacity = 0;
       for (const b of bandSteps) {
         const terminator = calculateTerminatorContinuous(now, Math.min(b.depression, 89));
@@ -421,70 +387,42 @@ function GroundTrackMapLeaflet({
         prevOpacity = b.opacity;
       }
       const terminatorEdge = calculateTerminatorContinuous(now, 0);
+      const glowColor = isSatelliteTile ? "#6aa0cc" : "#8faec8";
+      const glowOpacity = isSatelliteTile ? 0.15 : 0.08;
+      const coreColor = isSatelliteTile ? "#8cc4e8" : "#9ab8d8";
+      const coreOpacity = isSatelliteTile ? 0.5 : 0.35;
       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 }
+            { color: glowColor, weight: 3, opacity: glowOpacity, 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 }
+            { color: glowColor, weight: 3, opacity: glowOpacity, 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 }
+            { color: coreColor, weight: 1, opacity: coreOpacity, 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 }
+            { color: coreColor, weight: 1, opacity: coreOpacity, interactive: false, smoothFactor: 1.5 }
           ));
         });
       }
-      const celestialEnabled = showCelestialMarkers !== void 0 ? showCelestialMarkers : true;
-      if (celestialEnabled) {
-        const [sunLat, sunLon] = calculateSubSolarPoint(now);
-        const sunIcon = L.divIcon({
-          className: "",
-          iconSize: [28, 28],
-          iconAnchor: [14, 14],
-          html: `<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
-          <defs><filter id="sun-glow"><feGaussianBlur stdDeviation="1.5" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
-          <circle cx="14" cy="14" r="6" fill="#FFB300" stroke="#FF8F00" stroke-width="1.2" filter="url(#sun-glow)"/>
-          ${[0, 45, 90, 135, 180, 225, 270, 315].map((a) => {
-            const r1 = 8, r2 = 12, rad = a * Math.PI / 180;
-            return `<line x1="${14 + r1 * Math.cos(rad)}" y1="${14 + r1 * Math.sin(rad)}" x2="${14 + r2 * Math.cos(rad)}" y2="${14 + r2 * Math.sin(rad)}" stroke="#FFB300" stroke-width="1.4" stroke-linecap="round" opacity="0.85"/>`;
-          }).join("")}
-        </svg>`
-        });
-        addLayer(L.marker([sunLat, sunLon], { icon: sunIcon, interactive: false, zIndexOffset: 800 }));
-        const [moonLat, moonLon] = calculateSubLunarPoint(now);
-        const moonIcon = L.divIcon({
-          className: "",
-          iconSize: [22, 22],
-          iconAnchor: [11, 11],
-          html: `<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-          <defs><filter id="moon-glow"><feGaussianBlur stdDeviation="1" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
-          <circle cx="11" cy="11" r="6.5" fill="#e0e0e0" stroke="#9e9e9e" stroke-width="0.8" filter="url(#moon-glow)" opacity="0.9"/>
-          <circle cx="9" cy="9.5" r="1.6" fill="#bdbdbd" opacity="0.5"/>
-          <circle cx="13" cy="12" r="1.0" fill="#bdbdbd" opacity="0.4"/>
-          <circle cx="10.5" cy="13.5" r="0.7" fill="#bdbdbd" opacity="0.35"/>
-        </svg>`
-        });
-        addLayer(L.marker([moonLat, moonLon], { icon: moonIcon, interactive: false, zIndexOffset: 790 }));
-      }
     }
     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 dayOfYear = Math.floor((now.getTime() - Date.UTC(now.getUTCFullYear(), 0, 0)) / 864e5);
       const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
       const decRad = declination * Math.PI / 180;
-      const hourAngle = (now.getUTCHours() + now.getUTCMinutes() / 60) / 24 * 360 - 180;
+      const lsSubSolarLon = -(now.getUTCHours() + now.getUTCMinutes() / 60 - 12) * 15;
       for (const light of lightSources) {
         const latRad = light.latitude * Math.PI / 180;
-        const sinAlt = Math.sin(latRad) * Math.sin(decRad) + Math.cos(latRad) * Math.cos(decRad) * Math.cos((light.longitude - hourAngle) * Math.PI / 180);
+        const sinAlt = Math.sin(latRad) * Math.sin(decRad) + Math.cos(latRad) * Math.cos(decRad) * Math.cos((light.longitude - lsSubSolarLon) * Math.PI / 180);
         const solarAltDeg = Math.asin(sinAlt) * 180 / Math.PI;
         let nightFactor;
         if (solarAltDeg >= 0) nightFactor = 0;
@@ -721,6 +659,7 @@ function GroundTrackMapLeaflet({
     internalGrid,
     showEquator,
     showLegend,
+    tileStyle,
     tokens.colors.text.secondary,
     addLayer,
     clearLayers,