/
RectAnnotationOutline.tsx
61 lines (58 loc) · 1.77 KB
/
RectAnnotationOutline.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { useSpring, animated } from '@react-spring/web'
import { useMotionConfig, useTheme } from '@nivo/core'
export const RectAnnotationOutline = ({
x,
y,
width,
height,
borderRadius = 6,
}: {
x: number
y: number
width: number
height: number
borderRadius?: number
}) => {
const theme = useTheme()
const { animate, config: springConfig } = useMotionConfig()
const animatedProps = useSpring({
x: x - width / 2,
y: y - height / 2,
width,
height,
config: springConfig,
immediate: !animate,
})
return (
<>
{theme.annotations.outline.outlineWidth > 0 && (
<animated.rect
x={animatedProps.x}
y={animatedProps.y}
rx={borderRadius}
ry={borderRadius}
width={animatedProps.width}
height={animatedProps.height}
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.rect
x={animatedProps.x}
y={animatedProps.y}
rx={borderRadius}
ry={borderRadius}
width={animatedProps.width}
height={animatedProps.height}
style={theme.annotations.outline}
/>
</>
)
}