cobe-globe

1"use client"
2 
3import { useCallback, useEffect, useRef, useState } from "react"
4import createGlobe from "cobe"
5import { useSpring } from "react-spring"
6 
7import { cn } from "@/lib/utils"
8import { Button } from "@/components/ui/button"
9 
10type CobeVariant =
11  | "default"
12  | "draggable"
13  | "auto-draggable"
14  | "auto-rotation"
15  | "rotate-to-location"
16  | "scaled"
17 
18interface Location {
19  name: string
20  lat?: number
21  long?: number
22  emoji?: string
23}
24 
25interface GeocodeResult {
26  lat: number
27  lng: number
28  display_name: string
29}
30 
31interface CobeProps {
32  variant?: CobeVariant
33  className?: string
34  style?: React.CSSProperties
35  locations?: Location[]
36  // Globe configuration settings
37  phi?: number
38  theta?: number
39  mapSamples?: number
40  mapBrightness?: number
41  mapBaseBrightness?: number
42  diffuse?: number
43  dark?: number
44  baseColor?: string
45  markerColor?: string
46  markerSize?: number
47  glowColor?: string
48  scale?: number
49  offsetX?: number
50  offsetY?: number
51  opacity?: number
52}
53 
54type CobeState = Record<string, unknown>
55 
56export function Cobe({
57  variant = "default",
58  className,
59  style,
60  locations = [
61    { name: "San Francisco", emoji: "📍" },
62    { name: "Berlin", emoji: "📍" },
63    { name: "Tokyo", emoji: "📍" },
64    { name: "Buenos Aires", emoji: "📍" },
65  ],
66  // Default values based on the original JSX version
67  phi = 0,
68  theta = 0.2,
69  mapSamples = 16000,
70  mapBrightness = 1.8,
71  mapBaseBrightness = 0.05,
72  diffuse = 3,
73  dark = 1.0,
74  baseColor = "#ffffff",
75  markerColor = "#fb6415",
76  markerSize = 0.05,
77  glowColor = "#ffffff",
78  scale = 1.0,
79  offsetX = 0.0,
80  offsetY = 0.0,
81  opacity = 0.7,
82}: CobeProps) {
83  const canvasRef = useRef<HTMLCanvasElement>(null)
84  const pointerInteracting = useRef<number | null>(null)
85  const pointerInteractionMovement = useRef<number>(0)
86  const focusRef = useRef<[number, number]>([0, 0])
87  const [customLocations, setCustomLocations] = useState<Location[]>([])
88  const [isInitializing, setIsInitializing] = useState(true)
89 
90  const [{ r }, api] = useSpring<{ r: number }>(() => ({
91    r: 0,
92    config: {
93      mass: 1,
94      tension: 280,
95      friction: 40,
96      precision: 0.001,
97    },
98  }))
99 
100  const locationToAngles = (lat: number, long: number): [number, number] => {
101    return [
102      Math.PI - ((long * Math.PI) / 180 - Math.PI / 2),
103      (lat * Math.PI) / 180,
104    ] as [number, number]
105  }
106 
107  const hexToRgb = (hex: string): [number, number, number] => {
108// … truncated