50: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"] 51: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"] 52:T3b7a,"use client" import { useEffect, useRef, useState } from "react" import { createPortal } from "react-dom" import type mapboxgl from "mapbox-gl" import { mapgl } from "./map-library" import { useMap } from "./hooks" import type { MapCoordinates, MapPath } from "./types" type HeadType = "none" | "circle" | "square" | "arrow" type MapArcAnimatedProps = { id: string origin: MapCoordinates destination: MapCoordinates color?: string width?: number opacity?: number dashArray?: [number, number] height?: number segments?: number duration?: number autoStart?: boolean loop?: boolean loopDelay?: number headType?: HeadType headSize?: number showOriginMarker?: boolean originMarkerColor?: string showDestinationMarker?: boolean destinationMarkerColor?: string onComplete?: () => void } const DEFAULT_COLOR = "#3b82f6" const DEFAULT_WIDTH = 4 const DEFAULT_OPACITY = 1 const DEFAULT_HEIGHT = 0.3 const DEFAULT_SEGMENTS = 50 const DEFAULT_DURATION = 2000 const DEFAULT_AUTO_START = true const DEFAULT_LOOP = false const DEFAULT_LOOP_DELAY = 500 const DEFAULT_HEAD_TYPE: HeadType = "circle" const DEFAULT_HEAD_SIZE = 16 const DEFAULT_SHOW_ORIGIN_MARKER = false const DEFAULT_SHOW_DESTINATION_MARKER = false const MARKER_RADIUS = 8 type HeadSvgProps = { type: HeadType size: number color: string } const HeadSvg = ({ type, size, color }: HeadSvgProps) => { if (type === "none") { return null } if (type === "arrow") { return ( ) } if (type === "square") { return ( ) } return ( ) } const calculateBearing = (from: MapCoordinates, to: MapCoordinates): 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 generateArcPath = ( origin: MapCoordinates, destination: MapCoordinates, height: number, segments: number ): MapPath => { const path: MapPath = [] const dx = destination[0] - origin[0] const dy = destination[1] - origin[1] const distance = Math.sqrt(dx * dx + dy * dy) const perpX = -dy / distance const perpY = dx / distance for (let i = 0; i <= segments; i++) { const t = i / segments const offset = Math.sin(t * Math.PI) * distance * height path.push([origin[0] + dx * t + perpX * offset, origin[1] + dy * t + perpY * offset]) } return path } export const MapArcAnimated = ({ id, origin, destination, color = DEFAULT_COLOR, width = DEFAULT_WIDTH, opacity = DEFAULT_OPACITY, dashArray, height = DEFAULT_HEIGHT, segments = DEFAULT_SEGMENTS, duration = DEFAULT_DURATION, autoStart = DEFAULT_AUTO_START, loop = DEFAULT_LOOP, loopDelay = DEFAULT_LOOP_DELAY, headType = DEFAULT_HEAD_TYPE, headSize = DEFAULT_HEAD_SIZE, showOriginMarker = DEFAULT_SHOW_ORIGIN_MARKER, originMarkerColor, showDestinationMarker = DEFAULT_SHOW_DESTINATION_MARKER, destinationMarkerColor, onComplete, }: MapArcAnimatedProps) => { const { map, isLoaded } = useMap() const initializedRef = useRef(false) const styleLoadedRef = useRef(false) const animationFrameRef = useRef(undefined) const loopTimeoutRef = useRef | undefined>(undefined) const startTimeRef = useRef(0) const htmlMarkerRef = useRef(null) const markerElementRef = useRef(null) const originRef = useRef(origin) const destinationRef = useRef(destination) const heightRef = useRef(height) const segmentsRef = useRef(segments) const durationRef = useRef(duration) const headTypeRef = useRef(headType) const showOriginMarkerRef = useRef(showOriginMarker) const showDestinationMarkerRef = useRef(showDestinationMarker) const onCompleteRef = useRef(onComplete) const autoStartRef = useRef(autoStart) originRef.current = origin destinationRef.current = destination heightRef.current = height segmentsRef.current = segments durationRef.current = duration headTypeRef.current = headType showOriginMarkerRef.current = showOriginMarker showDestinationMarkerRef.current = showDestinationMarker onCompleteRef.current = onComplete autoStartRef.current = autoStart const [isAnimating, setIsAnimating] = useState(false) const [isMarkerMounted, setIsMarkerMounted] = useState(false) const sourceId = `${id}-source` const layerId = `${id}-layer` const originMarkerSourceId = `${id}-origin-marker-source` const originMarkerLayerId = `${id}-origin-marker` const destinationMarkerSourceId = `${id}-destination-marker-source` const destinationMarkerLayerId = `${id}-destination-marker` useEffect(() => { if (!map) { return } const addLineSource = (mapInstance: mapboxgl.Map) => { if (mapInstance.getSource(sourceId)) { return } mapInstance.addSource(sourceId, { type: "geojson", data: { type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: [] } }, }) mapInstance.addLayer({ id: layerId, type: "line", source: sourceId, layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": color, "line-width": width, "line-opacity": opacity, ...(dashArray && { "line-dasharray": dashArray }), }, }) } const addOriginMarker = (mapInstance: mapboxgl.Map) => { if (!showOriginMarkerRef.current || mapInstance.getSource(originMarkerSourceId)) { return } mapInstance.addSource(originMarkerSourceId, { type: "geojson", data: { type: "Feature", properties: {}, geometry: { type: "Point", coordinates: originRef.current } }, }) mapInstance.addLayer({ id: originMarkerLayerId, type: "circle", source: originMarkerSourceId, paint: { "circle-radius": MARKER_RADIUS, "circle-color": originMarkerColor || color, "circle-stroke-width": 3, "circle-stroke-color": "#ffffff", }, }) } const addDestinationMarker = (mapInstance: mapboxgl.Map) => { if (!showDestinationMarkerRef.current || mapInstance.getSource(destinationMarkerSourceId)) { return } mapInstance.addSource(destinationMarkerSourceId, { type: "geojson", data: { type: "FeatureCollection", features: [] }, }) mapInstance.addLayer({ id: destinationMarkerLayerId, type: "circle", source: destinationMarkerSourceId, paint: { "circle-radius": MARKER_RADIUS, "circle-color": destinationMarkerColor || color, "circle-stroke-width": 3, "circle-stroke-color": "#ffffff", }, }) } const addHeadMarker = (mapInstance: mapboxgl.Map) => { if (headTypeRef.current === "none" || htmlMarkerRef.current) { return } const el = document.createElement("div") el.style.display = "flex" el.style.alignItems = "center" el.style.justifyContent = "center" markerElementRef.current = el htmlMarkerRef.current = new mapgl.Marker({ element: el, rotationAlignment: "map", pitchAlignment: "map", anchor: "center", }) .setLngLat(originRef.current) .addTo(mapInstance) setIsMarkerMounted(true) } const addSources = (mapInstance: mapboxgl.Map) => { try { addLineSource(mapInstance) addOriginMarker(mapInstance) addDestinationMarker(mapInstance) addHeadMarker(mapInstance) initializedRef.current = true } catch (error) { console.error("Error adding arc animated:", error) } } const cleanupResources = (mapInstance: mapboxgl.Map) => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (loopTimeoutRef.current) { clearTimeout(loopTimeoutRef.current) } if (htmlMarkerRef.current) { htmlMarkerRef.current.remove() htmlMarkerRef.current = null } try { if (mapInstance.getLayer(layerId)) { mapInstance.removeLayer(layerId) } if (mapInstance.getLayer(originMarkerLayerId)) { mapInstance.removeLayer(originMarkerLayerId) } if (mapInstance.getLayer(destinationMarkerLayerId)) { mapInstance.removeLayer(destinationMarkerLayerId) } if (mapInstance.getSource(sourceId)) { mapInstance.removeSource(sourceId) } if (mapInstance.getSource(originMarkerSourceId)) { mapInstance.removeSource(originMarkerSourceId) } if (mapInstance.getSource(destinationMarkerSourceId)) { mapInstance.removeSource(destinationMarkerSourceId) } } catch { // Already removed } markerElementRef.current = null setIsMarkerMounted(false) initializedRef.current = false } const handleStyleLoad = () => { styleLoadedRef.current = true initializedRef.current = false addSources(map) if (autoStartRef.current) { setIsAnimating(true) } } const handleStyleDataLoading = () => { styleLoadedRef.current = false } if (isLoaded && !initializedRef.current) { addSources(map) styleLoadedRef.current = true } map.on("style.load", handleStyleLoad) map.on("styledataloading", handleStyleDataLoading) return () => { map.off("style.load", handleStyleLoad) map.off("styledataloading", handleStyleDataLoading) cleanupResources(map) } }, [ map, isLoaded, id, sourceId, layerId, originMarkerSourceId, originMarkerLayerId, destinationMarkerSourceId, destinationMarkerLayerId, color, width, opacity, dashArray, originMarkerColor, destinationMarkerColor, ]) useEffect(() => { if (!map || !isLoaded || !initializedRef.current) { return } if (!autoStart && !isAnimating) { return } startTimeRef.current = Date.now() const arcPath = generateArcPath(originRef.current, destinationRef.current, heightRef.current, segmentsRef.current) const updateLineSource = (coordinates: MapPath) => { if (!map || !map.getStyle()) { return } try { const lineSource = map.getSource(sourceId) as mapboxgl.GeoJSONSource if (lineSource) { lineSource.setData({ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates }, }) } } catch { // Map may be in an invalid state } } const updateHeadPosition = (position: MapCoordinates, nextPosition?: MapCoordinates) => { if (!htmlMarkerRef.current) { return } htmlMarkerRef.current.setLngLat(position) if (nextPosition && headTypeRef.current === "arrow") { const bearing = calculateBearing(position, nextPosition) htmlMarkerRef.current.setRotation(bearing - 90) } } const updateDestinationMarker = (visible: boolean) => { if (!map || !map.getStyle()) { return } try { const markerSource = map.getSource(destinationMarkerSourceId) as mapboxgl.GeoJSONSource if (markerSource) { markerSource.setData({ type: "FeatureCollection", features: visible ? [{ type: "Feature", properties: {}, geometry: { type: "Point", coordinates: destinationRef.current } }] : [], }) } } catch { // Map may be in an invalid state } } const stopAnimation = () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) animationFrameRef.current = undefined } setIsAnimating(false) } const animate = () => { if (!map || !styleLoadedRef.current) { stopAnimation() return } const elapsed = Date.now() - startTimeRef.current const progress = Math.min(elapsed / durationRef.current, 1) const pointIndex = Math.floor(progress * (arcPath.length - 1)) + 1 const visiblePath = arcPath.slice(0, pointIndex) const segmentProgress = (progress * (arcPath.length - 1)) % 1 if (pointIndex < arcPath.length && segmentProgress > 0) { const start = arcPath[pointIndex - 1] const end = arcPath[pointIndex] visiblePath.push([ start[0] + (end[0] - start[0]) * segmentProgress, start[1] + (end[1] - start[1]) * segmentProgress, ]) } try { updateLineSource(visiblePath) if (headTypeRef.current !== "none" && visiblePath.length > 0) { const currentPosition = visiblePath[visiblePath.length - 1] const nextPointIndex = Math.min(pointIndex + 1, arcPath.length - 1) const nextPosition = arcPath[nextPointIndex] updateHeadPosition(currentPosition, nextPosition) } if (progress >= 1 && showDestinationMarkerRef.current) { updateDestinationMarker(true) } } catch { stopAnimation() return } if (progress < 1) { animationFrameRef.current = requestAnimationFrame(animate) return } setIsAnimating(false) onCompleteRef.current?.() if (loop) { loopTimeoutRef.current = setTimeout(() => { updateLineSource([]) updateDestinationMarker(false) setIsAnimating(true) }, loopDelay) } } setIsAnimating(true) animationFrameRef.current = requestAnimationFrame(animate) return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (loopTimeoutRef.current) { clearTimeout(loopTimeoutRef.current) } } }, [map, isLoaded, id, sourceId, destinationMarkerSourceId, autoStart, loop, loopDelay, isAnimating]) if (headType !== "none" && isMarkerMounted && markerElementRef.current) { return createPortal(, markerElementRef.current) } return null } export const useArcAnimatedControl = () => { const [isPlaying, setIsPlaying] = useState(false) return { isPlaying, start: () => setIsPlaying(true), stop: () => setIsPlaying(false), toggle: () => setIsPlaying((prev) => !prev), } } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@terrae","registryDependencies":["https://www.terrae.dev/map.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/map/arc-animated.tsx","content":"$52","type":"registry:ui","target":"components/ui/map/arc-animated.tsx"}],"className":"h-[70svh] min-h-80"}]]}]