/
AnnotationLink.tsx
39 lines (32 loc) · 1.09 KB
/
AnnotationLink.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { useMemo } from 'react'
import { animated } from '@react-spring/web'
import { useAnimatedPath, useTheme } from '@nivo/core'
export const AnnotationLink = ({
points,
isOutline = false,
}: {
points: [number, number][]
isOutline?: boolean
}) => {
const theme = useTheme()
const path = useMemo(() => {
const [firstPoint, ...otherPoints] = points
return otherPoints.reduce(
(acc, [x, y]) => `${acc} L${x},${y}`,
`M${firstPoint[0]},${firstPoint[1]}`
)
}, [points])
const animatedPath = useAnimatedPath(path)
if (isOutline && theme.annotations.link.outlineWidth <= 0) {
return null
}
const style = { ...theme.annotations.link }
if (isOutline) {
style.strokeLinecap = 'square'
style.strokeWidth =
theme.annotations.link.strokeWidth + theme.annotations.link.outlineWidth * 2
style.stroke = theme.annotations.link.outlineColor
style.opacity = theme.annotations.link.outlineOpacity
}
return <animated.path fill="none" d={animatedPath} style={style} />
}