@traky-app/ui 1.6.7 → 1.6.9

package/src/ui/globe.tsx

@@ -28,7 +28,6 @@ function lerpAngle(a: number, b: number, t: number): number {
 const GLOBE_CONFIG: COBEOptions = {
   width: 800,
   height: 800,
-  onRender: () => {},
   devicePixelRatio: 2,
   phi: 0,
   theta: 0.3,
@@ -60,6 +59,8 @@ export function Globe({
   interactive = true,
   panBetweenMarkers = false,
   cycleMarkers = false,
+  centerMarkerLatitude = false,
+  playing = true,
   markerHoldMs = MARKER_HOLD_MS,
   markerTransitionMs = MARKER_TRANSITION_MS,
 }: {
@@ -71,10 +72,16 @@ export function Globe({
   panBetweenMarkers?: boolean
   /** Centra cada marker uno por uno con pausa y transición suave. */
   cycleMarkers?: boolean
+  /** Inclina el globo para dejar la latitud de cada marker en el centro. */
+  centerMarkerLatitude?: boolean
+  /** Si es false, el globo se queda en el fotograma actual y no avanza el tour. */
+  playing?: boolean
   markerHoldMs?: number
   markerTransitionMs?: number
 }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
+  const playingRef = useRef(playing)
+  playingRef.current = playing
   const phiRef = useRef(config.phi ?? 0)
   const widthRef = useRef(0)
   const pointerInteracting = useRef<number | null>(null)
@@ -84,12 +91,15 @@ export function Globe({
 
   const fixedTheta = config.theta ?? 0.22
 
-  const markerViews = useMemo((): Array<{ phi: number }> | null => {
+  const markerViews = useMemo((): Array<{ phi: number; theta: number }> | null => {
     if (!shouldCycleMarkers || !config.markers?.length) return null
     return config.markers.map((marker) => ({
       phi: Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),
+      theta: centerMarkerLatitude
+        ? (marker.location[0] * Math.PI) / 180
+        : fixedTheta,
     }))
-  }, [shouldCycleMarkers, config.markers])
+  }, [shouldCycleMarkers, centerMarkerLatitude, fixedTheta, config.markers])
 
   const markerPhiRange = useMemo((): [number, number] | null => {
     if (!panBetweenMarkers || cycleMarkers || !config.markers?.length) return null
@@ -127,6 +137,7 @@ export function Globe({
     const canvas = canvasRef.current
     if (!canvas) return
 
+    const host = canvas.parentElement
     const onResize = () => {
       widthRef.current = canvas.offsetWidth
     }
@@ -139,49 +150,76 @@ export function Globe({
 
     const globe = createGlobe(canvas, {
       ...config,
-      width: widthRef.current * 2,
-      height: widthRef.current * 2,
-      onRender: (state) => {
-        if (shouldCycleMarkers && markerViews && markerViews.length > 0) {
-          const segment = markerHoldMs + markerTransitionMs
-          const total = markerViews.length * segment
-          const elapsed = Date.now() % total
-          const index = Math.floor(elapsed / segment)
-          const local = elapsed % segment
-          const from = markerViews[index % markerViews.length]
-          const to = markerViews[(index + 1) % markerViews.length]
+      devicePixelRatio: config.devicePixelRatio ?? 2,
+      width: widthRef.current,
+      height: widthRef.current,
+    })
+
+    let frame = 0
+    let elapsedMs = 0
+    let lastNow = 0
+    const render = () => {
+      const now = Date.now()
+      if (playingRef.current) {
+        if (lastNow !== 0) elapsedMs += now - lastNow
+        lastNow = now
+      } else {
+        lastNow = 0
+      }
+
+      const cssSize = widthRef.current
+      let phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
+      let theta = config.theta ?? 0.3
 
+      if (shouldCycleMarkers && markerViews && markerViews.length > 0) {
+        const segment = markerHoldMs + markerTransitionMs
+        const elapsed = elapsedMs
+        const index = Math.floor(elapsed / segment) % markerViews.length
+        const local = elapsed % segment
+        const from = markerViews[index % markerViews.length]
+        const to = markerViews[(index + 1) % markerViews.length]
+        if (from && to) {
           if (local < markerHoldMs) {
-            state.phi = from.phi
+            phi = from.phi
+            theta = from.theta
           } else {
             const t = easeInOutCubic((local - markerHoldMs) / markerTransitionMs)
-            state.phi = lerpAngle(from.phi, to.phi, t)
+            phi = lerpAngle(from.phi, to.phi, t)
+            theta = lerp(from.theta, to.theta, t)
           }
-          state.theta = fixedTheta
-        } else if (panBetweenMarkers && markerPhiRange) {
-          const [phiMin, phiMax] = markerPhiRange
-          const t = Date.now() / 5200
-          state.phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)
-        } else if (autoRotate && !pointerInteracting.current) {
-          phiRef.current += 0.005
-          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
-        } else {
-          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
         }
+      } else if (panBetweenMarkers && markerPhiRange) {
+        const [phiMin, phiMax] = markerPhiRange
+        const t = Date.now() / 5200
+        phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)
+      } else if (autoRotate && playingRef.current && !pointerInteracting.current) {
+        phiRef.current += 0.005
+        phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
+      }
 
-        state.theta = shouldCycleMarkers ? fixedTheta : (config.theta ?? state.theta)
-        state.scale = config.scale ?? 1
-        state.width = widthRef.current * 2
-        state.height = widthRef.current * 2
-      },
-    })
+      globe.update({
+        phi,
+        theta,
+        scale: config.scale ?? 1,
+        width: cssSize,
+        height: cssSize,
+      })
+      frame = requestAnimationFrame(render)
+    }
+    frame = requestAnimationFrame(render)
 
     setTimeout(() => {
       canvas.style.opacity = "1"
     }, 0)
 
     return () => {
+      cancelAnimationFrame(frame)
       globe.destroy()
+      const wrapper = canvas.parentElement
+      if (wrapper && host && wrapper !== host) {
+        host.insertBefore(canvas, wrapper)
+        wrapper.remove()
+      }
       window.removeEventListener("resize", onResize)
       resizeObserver.disconnect()
     }
@@ -192,6 +230,7 @@ export function Globe({
     interactive,
     panBetweenMarkers,
     cycleMarkers,
+    centerMarkerLatitude,
     shouldCycleMarkers,
     markerViews,
     markerPhiRange,

package/src/ui/world-globe.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"
+import type { COBEOptions } from "cobe"
+
+import { useTheme } from "../hooks/use-document-theme"
+import { cn } from "../lib/utils"
+import { Globe } from "./globe"
+
+/** Tour: Norteamérica → Suramérica → Europa → África → Asia → Oceanía. */
+const MARKERS = [
+  { id: "cascade", location: [49.2827, -123.1207] as [number, number], label: "Cascade LLC" },
+  { id: "logistic", location: [41.8781, -87.6298] as [number, number], label: "Logistic LLC" },
+  { id: "alianza", location: [19.4326, -99.1332] as [number, number], label: "Alianza SA" },
+  { id: "bolivar", location: [4.711, -74.0721] as [number, number], label: "Bolívar SAS" },
+  { id: "minerva", location: [-23.5505, -46.6333] as [number, number], label: "Minerva SA" },
+  { id: "cordillera", location: [-33.4489, -70.6693] as [number, number], label: "Cordillera SA" },
+  { id: "iberica", location: [40.4168, -3.7038] as [number, number], label: "Ibérica SA" },
+  { id: "avrora", location: [55.7558, 37.6173] as [number, number], label: "Avrora LLC" },
+  { id: "meridian", location: [6.5244, 3.3792] as [number, number], label: "Meridian Ltd" },
+  { id: "savanna", location: [-26.2041, 28.0473] as [number, number], label: "Savanna SA" },
+  { id: "deccan", location: [19.076, 72.8777] as [number, number], label: "Deccan Ltd" },
+  { id: "straits", location: [1.3521, 103.8198] as [number, number], label: "Straits Ltd" },
+  { id: "huayun", location: [31.2304, 121.4737] as [number, number], label: "华运 Ltd" },
+  { id: "harbour", location: [-33.8688, 151.2093] as [number, number], label: "Harbour Ltd" },
+]
+
+const ARCS = [
+  {
+    id: "alianza-logistic",
+    from: [19.4326, -99.1332] as [number, number],
+    to: [41.8781, -87.6298] as [number, number],
+    unit: "AWB",
+    fromValue: 120,
+    toValue: 240,
+    duration: 28000,
+  },
+  {
+    id: "iberica-avrora",
+    from: [40.4168, -3.7038] as [number, number],
+    to: [55.7558, 37.6173] as [number, number],
+    unit: "BL",
+    fromValue: 100,
+    toValue: 220,
+    duration: 32000,
+  },
+  {
+    id: "meridian-savanna",
+    from: [6.5244, 3.3792] as [number, number],
+    to: [-26.2041, 28.0473] as [number, number],
+    unit: "WR",
+    fromValue: 160,
+    toValue: 280,
+    duration: 36000,
+  },
+  {
+    id: "avrora-huayun",
+    from: [55.7558, 37.6173] as [number, number],
+    to: [31.2304, 121.4737] as [number, number],
+    unit: "MAWB",
+    fromValue: 140,
+    toValue: 260,
+    duration: 30000,
+  },
+  {
+    id: "harbour-huayun",
+    from: [-33.8688, 151.2093] as [number, number],
+    to: [31.2304, 121.4737] as [number, number],
+    unit: "AWB",
+    fromValue: 110,
+    toValue: 230,
+    duration: 34000,
+  },
+  {
+    id: "avrora-cascade",
+    from: [55.7558, 37.6173] as [number, number],
+    to: [49.2827, -123.1207] as [number, number],
+    unit: "BL",
+    fromValue: 130,
+    toValue: 250,
+    duration: 31000,
+  },
+  {
+    id: "bolivar-minerva",
+    from: [4.711, -74.0721] as [number, number],
+    to: [-23.5505, -46.6333] as [number, number],
+    unit: "WR",
+    fromValue: 150,
+    toValue: 270,
+    duration: 33000,
+  },
+  {
+    id: "deccan-straits",
+    from: [19.076, 72.8777] as [number, number],
+    to: [1.3521, 103.8198] as [number, number],
+    unit: "AWB",
+    fromValue: 170,
+    toValue: 260,
+    duration: 29000,
+  },
+]
+
+/** Azul oscuro de marca #000b27. Misma línea en tema claro y oscuro. */
+const ARC_COLOR: [number, number, number] = [0, 0.043, 0.153]
+
+const WORLD_GLOBE_CONFIG: COBEOptions = {
+  width: 800,
+  height: 800,
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.2,
+  dark: 0,
+  diffuse: 1.5,
+  mapSamples: 16000,
+  mapBrightness: 10,
+  baseColor: [1, 1, 1],
+  markerColor: [0.647, 0.867, 0.392],
+  glowColor: [0.94, 0.93, 0.91],
+  markerElevation: 0.01,
+  opacity: 1,
+  markers: MARKERS.map((marker) => ({
+    location: marker.location,
+    size: 0.025,
+    id: marker.id,
+  })),
+  arcs: ARCS.map((arc) => ({
+    from: arc.from,
+    to: arc.to,
+    id: arc.id,
+  })),
+  arcColor: ARC_COLOR,
+  arcWidth: 0.5,
+  arcHeight: 0.25,
+}
+
+const GLOW_LIGHT: [number, number, number] = [0.97, 0.97, 0.98]
+const GLOW_DARK: [number, number, number] = [0.07, 0.075, 0.08]
+
+function anchoredStyle(anchor: string, visible: string): CSSProperties {
+  return {
+    positionAnchor: anchor,
+    bottom: "anchor(top)",
+    left: "anchor(center)",
+    translate: "-50% 0",
+    marginBottom: 8,
+    opacity: `var(${visible}, 0)`,
+    filter: `blur(var(${visible}, 10px))`,
+    transition: "opacity 0.8s, filter 0.8s",
+  }
+}
+
+function glowForTheme(theme: string): [number, number, number] {
+  if (theme === "dark") return GLOW_DARK
+  if (theme === "light") return GLOW_LIGHT
+  if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
+    return GLOW_DARK
+  }
+  return GLOW_LIGHT
+}
+
+/** Globo listo para la página web. No edita empresas ni envíos. */
+export function WorldGlobe({ className }: { className?: string }) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const playingRef = useRef(false)
+  const [playing, setPlaying] = useState(false)
+  const { theme } = useTheme()
+  const glowColor = glowForTheme(theme)
+  const config = useMemo(
+    () => ({ ...WORLD_GLOBE_CONFIG, glowColor }),
+    [glowColor],
+  )
+  const [lanes, setLanes] = useState(() =>
+    ARCS.map((arc) => ({
+      id: arc.id,
+      unit: arc.unit,
+      value: arc.fromValue,
+    })),
+  )
+
+  useEffect(() => {
+    const node = rootRef.current
+    if (!node) return
+
+    let onScreen = false
+    const sync = () => {
+      const next = onScreen && document.visibilityState === "visible"
+      playingRef.current = next
+      setPlaying(next)
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        onScreen = entry?.isIntersecting ?? false
+        sync()
+      },
+      { threshold: 0.35 },
+    )
+    observer.observe(node)
+    document.addEventListener("visibilitychange", sync)
+    return () => {
+      observer.disconnect()
+      document.removeEventListener("visibilitychange", sync)
+    }
+  }, [])
+
+  useEffect(() => {
+    let frame = 0
+    let elapsedMs = 0
+    let lastNow = 0
+    const shown = ARCS.map((arc) => arc.fromValue)
+
+    const tick = (now: number) => {
+      if (playingRef.current) {
+        if (lastNow !== 0) elapsedMs += now - lastNow
+        lastNow = now
+      } else {
+        lastNow = 0
+      }
+
+      let changed = false
+      const next = ARCS.map((arc, index) => {
+        const elapsed = elapsedMs / arc.duration
+        const ping = elapsed % 2
+        const t = ping < 1 ? ping : 2 - ping
+        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
+        const value = Math.round(arc.fromValue + (arc.toValue - arc.fromValue) * eased)
+        if (value !== shown[index]) {
+          shown[index] = value
+          changed = true
+        }
+        return value
+      })
+      if (changed) {
+        setLanes((current) =>
+          current.map((item, index) => ({ ...item, value: next[index] ?? item.value })),
+        )
+      }
+      frame = requestAnimationFrame(tick)
+    }
+
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn(
+        "relative mx-auto aspect-square w-full max-w-lg bg-background",
+        className,
+      )}
+    >
+      <Globe
+        config={config}
+        autoRotate={false}
+        interactive={false}
+        cycleMarkers
+        centerMarkerLatitude
+        playing={playing}
+        markerHoldMs={2400}
+        markerTransitionMs={1800}
+        className="max-w-full"
+      />
+      {MARKERS.map((marker) => (
+        <div
+          key={marker.id}
+          className="pointer-events-none absolute z-10 w-max max-w-36 rounded-sm bg-primary px-1.5 py-px font-mono text-[10px] tracking-normal text-[#000b27]"
+          style={anchoredStyle(`--cobe-${marker.id}`, `--cobe-visible-${marker.id}`)}
+        >
+          <span className="block truncate">{marker.label}</span>
+          <span className="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-primary" />
+        </div>
+      ))}
+      {lanes.map((item) => (
+        <div
+          key={item.id}
+          className="pointer-events-none absolute z-10 rounded bg-black px-2 py-[3px] font-mono text-[0.5rem] whitespace-nowrap text-white"
+          style={{
+            positionAnchor: `--cobe-arc-${item.id}`,
+            bottom: "anchor(top)",
+            left: "anchor(center)",
+            translate: "-50% 0",
+            opacity: `var(--cobe-visible-arc-${item.id}, 0)`,
+            filter: `blur(calc((1 - var(--cobe-visible-arc-${item.id}, 0)) * 8px))`,
+            transition: "opacity 0.3s, filter 0.3s",
+          }}
+        >
+          {item.value} {item.unit}/s
+        </div>
+      ))}
+    </div>
+  )
+}