/
CircleAnnotationOutline.tsx
42 lines (39 loc) · 1.4 KB
/
CircleAnnotationOutline.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
40
41
42
import { useSpring, animated } from '@react-spring/web'
import { useMotionConfig, useTheme } from '@nivo/core'
export const CircleAnnotationOutline = ({ x, y, size }: { x: number; y: number; size: number }) => {
const theme = useTheme()
const { animate, config: springConfig } = useMotionConfig()
const animatedProps = useSpring({
x,
y,
radius: size / 2,
config: springConfig,
immediate: !animate,
})
return (
<>
{theme.annotations.outline.outlineWidth > 0 && (
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth:
theme.annotations.outline.strokeWidth +
theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
opacity: theme.annotations.outline.outlineOpacity,
}}
/>
)}
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius}
style={theme.annotations.outline}
/>
</>
)
}