51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T182d,"use client" import { useEffect, useRef, useState, type ReactNode } from "react" import { createPortal } from "react-dom" import type mapboxgl from "mapbox-gl" import { mapgl } from "./map-library" import { useMap } from "./hooks" import type { MapPath } from "./types" type MarkerState = { position: [number, number] bearing: number } type MapCameraFollowProps = { path: MapPath duration?: number zoom?: number pitch?: number autoStart?: boolean loop?: boolean loopDelay?: number marker?: boolean | ReactNode markerSize?: number onComplete?: () => void } const DEFAULT_DURATION = 20000 const DEFAULT_ZOOM = 14 const DEFAULT_PITCH = 60 const DEFAULT_LOOP_DELAY = 1000 const DEFAULT_MARKER_SIZE = 48 const calculateBearing = (from: [number, number], to: [number, number]): number => { const dLon = ((to[0] - from[0]) * Math.PI) / 180 const lat1 = (from[1] * Math.PI) / 180 const lat2 = (to[1] * Math.PI) / 180 const y = Math.sin(dLon) * Math.cos(lat2) const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon) return ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360 } const interpolatePosition = (path: MapPath, progress: number): [number, number] => { const totalSegments = path.length - 1 const segmentProgress = progress * totalSegments const segmentIndex = Math.min(Math.floor(segmentProgress), totalSegments - 1) const segmentFraction = segmentProgress - segmentIndex const start = path[segmentIndex] const end = path[segmentIndex + 1] return [start[0] + (end[0] - start[0]) * segmentFraction, start[1] + (end[1] - start[1]) * segmentFraction] } const DefaultNavigationMarker = ({ size }: { size: number }) => { return ( ) } export const MapCameraFollow = ({ path, duration = DEFAULT_DURATION, zoom = DEFAULT_ZOOM, pitch = DEFAULT_PITCH, autoStart = true, loop = false, loopDelay = DEFAULT_LOOP_DELAY, marker, markerSize = DEFAULT_MARKER_SIZE, onComplete, }: MapCameraFollowProps) => { const { map, isLoaded } = useMap() const animationFrameRef = useRef(undefined) const loopTimeoutRef = useRef | undefined>(undefined) const startTimeRef = useRef(0) const pausedProgressRef = useRef(0) const markerRef = useRef(null) const propsRef = useRef({ path, duration, zoom, pitch, onComplete, autoStart }) propsRef.current = { path, duration, zoom, pitch, onComplete, autoStart } const [markerState, setMarkerState] = useState(null) const [markerElement, setMarkerElement] = useState(null) useEffect(() => { if (!map || !isLoaded || marker === undefined) { return } const el = document.createElement("div") el.style.display = "flex" el.style.alignItems = "center" el.style.justifyContent = "center" const mapMarker = new mapgl.Marker({ element: el, rotationAlignment: "map", pitchAlignment: "map", }) markerRef.current = mapMarker setMarkerElement(el) return () => { mapMarker.remove() markerRef.current = null setMarkerElement(null) } }, [map, isLoaded, marker]) useEffect(() => { if (!markerState || !markerRef.current || !map) { return } markerRef.current.setLngLat(markerState.position).setRotation(markerState.bearing).addTo(map) }, [map, markerState]) useEffect(() => { if (!map || !isLoaded) { return } const cancelAnimation = () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) animationFrameRef.current = undefined } if (loopTimeoutRef.current) { clearTimeout(loopTimeoutRef.current) loopTimeoutRef.current = undefined } } if (!autoStart) { cancelAnimation() return } if (propsRef.current.path.length < 2) { return } startTimeRef.current = Date.now() - pausedProgressRef.current * propsRef.current.duration const animate = () => { if (!map || !propsRef.current.autoStart) { cancelAnimation() return } const { path, duration, zoom, pitch, onComplete } = propsRef.current const elapsed = Date.now() - startTimeRef.current const progress = Math.min(elapsed / duration, 1) pausedProgressRef.current = progress const currentPosition = interpolatePosition(path, progress) const lookAheadPosition = interpolatePosition(path, Math.min(progress + 0.02, 1)) const bearing = calculateBearing(currentPosition, lookAheadPosition) setMarkerState({ position: currentPosition, bearing }) try { map.easeTo({ center: currentPosition, bearing, pitch, zoom, duration: 0, }) } catch { cancelAnimation() return } if (progress < 1) { animationFrameRef.current = requestAnimationFrame(animate) return } pausedProgressRef.current = 0 onComplete?.() if (loop) { loopTimeoutRef.current = setTimeout(() => { startTimeRef.current = Date.now() animationFrameRef.current = requestAnimationFrame(animate) }, loopDelay) } } animationFrameRef.current = requestAnimationFrame(animate) return cancelAnimation }, [map, isLoaded, autoStart, loop, loopDelay]) if (marker !== undefined && markerElement) { return createPortal(marker === true ? : marker, markerElement) } return null } export const useCameraFollowControl = () => { const [isPlaying, setIsPlaying] = useState(false) const start = () => { setIsPlaying(true) } const stop = () => { setIsPlaying(false) } const toggle = () => { setIsPlaying((prev) => !prev) } return { isPlaying, start, stop, toggle } } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","mapbox-gl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mapbox-gl","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"mapbox-gl"}]]}]}]]}],["$","$L51",null,{"namespace":"@terrae","registryDependencies":["https://www.terrae.dev/map.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/map/camera-follow.tsx","content":"$53","type":"registry:ui","target":"components/ui/map/camera-follow.tsx"}],"className":"h-[70svh] min-h-80"}]]}]