Map Line Radial

1"use client"
2 
3import { useEffect, useRef, useState, type ReactNode } from "react"
4import { createPortal } from "react-dom"
5import type mapboxgl from "mapbox-gl"
6import { mapgl } from "./map-library"
7import { useMap } from "./hooks"
8import type { MapCoordinates } from "./types"
9 
10type LineCurvature = number | "auto"
11 
12type RadialDestination =
13  | MapCoordinates
14  | {
15      coordinates: MapCoordinates
16      color?: string
17      label?: string
18    }
19 
20type MapLineRadialProps = {
21  id: string
22  origin: MapCoordinates
23  destinations: RadialDestination[]
24  color?: string
25  width?: number
26  opacity?: number
27  dashArray?: [number, number]
28  curvature?: LineCurvature
29  curveSegments?: number
30  duration?: number
31  staggerDelay?: number
32  autoStart?: boolean
33  loop?: boolean
34  loopDelay?: number
35  showOriginMarker?: boolean
36  originMarkerColor?: string
37  originMarkerIcon?: ReactNode
38  originMarkerPulse?: boolean
39  showDestinationMarkers?: boolean
40  destinationMarkerColor?: string
41  destinationMarkerIcon?: ReactNode
42  showTravelingMarker?: boolean
43  travelingMarkerColor?: string
44  travelingMarkerIcon?: ReactNode
45  onLineComplete?: (index: number, destination: MapCoordinates) => void
46  onComplete?: () => void
47}
48 
49const DEFAULT_COLOR = "#3b82f6"
50const DEFAULT_WIDTH = 2
51const DEFAULT_OPACITY = 0.8
52const DEFAULT_CURVATURE = 0.3
53const DEFAULT_CURVE_SEGMENTS = 50
54const DEFAULT_DURATION = 2000
55const DEFAULT_STAGGER_DELAY = 200
56const DEFAULT_AUTO_START = true
57const DEFAULT_LOOP = false
58const DEFAULT_LOOP_DELAY = 1000
59const DEFAULT_SHOW_ORIGIN_MARKER = true
60const DEFAULT_ORIGIN_MARKER_COLOR = "#ef4444"
61const DEFAULT_ORIGIN_MARKER_PULSE = true
62const DEFAULT_SHOW_DESTINATION_MARKERS = true
63const DEFAULT_SHOW_TRAVELING_MARKER = false
64 
65const ORIGIN_MARKER_SIZE = 32
66const ORIGIN_MARKER_RADIUS = 10
67const DESTINATION_MARKER_SIZE = 24
68const DESTINATION_MARKER_RADIUS = 6
69const PULSE_RADIUS = 20
70const TRAVELING_MARKER_RADIUS = 6
71 
72const getDestinationCoordinates = (destination: RadialDestination): MapCoordinates => {
73  if (Array.isArray(destination)) {
74    return destination
75  }
76  return destination.coordinates
77}
78 
79const getDestinationColor = (destination: RadialDestination): string | undefined => {
80  if (Array.isArray(destination)) {
81    return undefined
82  }
83  return destination.color
84}
85 
86const calculateCurvature = (
87  origin: MapCoordinates,
88  destination: MapCoordinates,
89  baseCurvature: LineCurvature
90): number => {
91  if (baseCurvature !== "auto") {
92    return baseCurvature
93  }
94 
95// … truncated