Map Animated Polygon

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import type mapboxgl from "mapbox-gl"
5 
6import { useMap } from "./hooks"
7import type { MapCoordinates } from "./types"
8 
9type AnimationMode = "draw" | "fill" | "draw-then-fill"
10 
11type MapAnimatedPolygonProps = {
12  id: string
13  coordinates: MapCoordinates[]
14  strokeColor?: string
15  strokeWidth?: number
16  strokeOpacity?: number
17  fillColor?: string
18  fillOpacity?: number
19  duration?: number
20  fillDuration?: number
21  autoStart?: boolean
22  loop?: boolean
23  loopDelay?: number
24  animationMode?: AnimationMode
25  onDrawComplete?: () => void
26  onFillComplete?: () => void
27  onComplete?: () => void
28}
29 
30const DEFAULT_STROKE_COLOR = "#3b82f6"
31const DEFAULT_STROKE_WIDTH = 2
32const DEFAULT_STROKE_OPACITY = 1
33const DEFAULT_FILL_COLOR = "#3b82f6"
34const DEFAULT_FILL_OPACITY = 0.3
35const DEFAULT_DURATION = 2000
36const DEFAULT_FILL_DURATION = 1000
37const DEFAULT_AUTO_START = true
38const DEFAULT_LOOP = false
39const DEFAULT_LOOP_DELAY = 1000
40const DEFAULT_ANIMATION_MODE: AnimationMode = "draw-then-fill"
41 
42export const MapAnimatedPolygon = ({
43  id,
44  coordinates,
45  strokeColor = DEFAULT_STROKE_COLOR,
46  strokeWidth = DEFAULT_STROKE_WIDTH,
47  strokeOpacity = DEFAULT_STROKE_OPACITY,
48  fillColor = DEFAULT_FILL_COLOR,
49  fillOpacity = DEFAULT_FILL_OPACITY,
50  duration = DEFAULT_DURATION,
51  fillDuration = DEFAULT_FILL_DURATION,
52  autoStart = DEFAULT_AUTO_START,
53  loop = DEFAULT_LOOP,
54  loopDelay = DEFAULT_LOOP_DELAY,
55  animationMode = DEFAULT_ANIMATION_MODE,
56  onDrawComplete,
57  onFillComplete,
58  onComplete,
59}: MapAnimatedPolygonProps) => {
60  const { map, isLoaded } = useMap()
61 
62  const initializedRef = useRef(false)
63  const styleLoadedRef = useRef(false)
64  const animationFrameRef = useRef<number | undefined>(undefined)
65  const loopTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
66  const startTimeRef = useRef<number>(0)
67 
68  const coordinatesRef = useRef(coordinates)
69  const durationRef = useRef(duration)
70  const fillDurationRef = useRef(fillDuration)
71  const onDrawCompleteRef = useRef(onDrawComplete)
72  const onFillCompleteRef = useRef(onFillComplete)
73  const onCompleteRef = useRef(onComplete)
74 
75  coordinatesRef.current = coordinates
76  durationRef.current = duration
77  fillDurationRef.current = fillDuration
78  onDrawCompleteRef.current = onDrawComplete
79  onFillCompleteRef.current = onFillComplete
80  onCompleteRef.current = onComplete
81 
82  const [isAnimating, setIsAnimating] = useState(false)
83// … truncated