Globe

1<script lang="ts">
2	import type { COBEOptions, Globe } from "cobe";
3	import { Spring } from "svelte/motion";
4	import { onDestroy, onMount } from "svelte";
5	import { cn } from "$UTILS$";
6 
7	interface Props {
8		class?: string;
9		config?: Partial<COBEOptions>;
10	}
11 
12	let { class: className, config = {} }: Props = $props();
13 
14	let size = $derived(config.width ?? 300);
15 
16	const baseTheta = 0.2;
17	const thetaOffsetMin = -0.4;
18	const thetaOffsetMax = 0.4;
19 
20	let canvas: HTMLCanvasElement | null = null;
21	let globe: Globe | null = null;
22	let observer: IntersectionObserver | null = null;
23	let createGlobePromise: Promise<typeof import("cobe").default> | null = null;
24	let isVisible = false;
25	let isDragging = $state(false);
26 
27	let frame = 0;
28	let autoPhi = 0;
29	let dragStart: { x: number; y: number; phi: number; theta: number } | null = null;
30	let lastPointer: { x: number; y: number; t: number } | null = null;
31	let releaseVelocity = { phi: 0, theta: 0 };
32 
33	const initialPhi = $derived(config.phi ?? 0);
34	const initialTheta = $derived(config.theta ?? baseTheta);
35 
36	const phiOffset = new Spring(0, {
37		stiffness: 0.12,
38		damping: 0.7,
39		precision: 0.0001,
40	});
41 
42	const thetaOffset = new Spring(0, {
43		stiffness: 0.12,
44		damping: 0.7,
45		precision: 0.0001,
46	});
47 
48	function clamp(value: number, min: number, max: number) {
49		return Math.min(max, Math.max(min, value));
50	}
51 
52	function handlePointerDown(event: PointerEvent) {
53		dragStart = {
54			x: event.clientX,
55			y: event.clientY,
56			phi: phiOffset.target,
57			theta: thetaOffset.target,
58		};
59		lastPointer = { x: event.clientX, y: event.clientY, t: performance.now() };
60		releaseVelocity = { phi: 0, theta: 0 };
61		isDragging = true;
62		canvas?.setPointerCapture?.(event.pointerId);
63	}
64 
65	function handlePointerMove(event: PointerEvent) {
66		if (!dragStart) return;
67 
68		const nextPhi = dragStart.phi + (event.clientX - dragStart.x) / 300;
69		const nextTheta = clamp(
70			dragStart.theta + (event.clientY - dragStart.y) / 1000,
71			thetaOffsetMin,
72			thetaOffsetMax
73		);
74 
75		void phiOffset.set(nextPhi, { instant: true });
76		void thetaOffset.set(nextTheta, { instant: true });
77 
78		const now = performance.now();
79		if (lastPointer) {
80			const dt = Math.max(now - lastPointer.t, 1);
81			const maxVelocity = 0.15;
82 
83			releaseVelocity = {
84				phi: clamp(((event.clientX - lastPointer.x) / dt) * 0.3, -maxVelocity, maxVelocity),
85				theta: clamp(
86					((event.clientY - lastPointer.y) / dt) * 0.08,
87					-maxVelocity,
88					maxVelocity
89				),
90			};
91		}
92 
93// … truncated