/
GeometryTools.tsx
62 lines (56 loc) · 1.7 KB
/
GeometryTools.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
62
import { useApp } from '@tldraw/react'
import { observer } from 'mobx-react-lite'
import * as React from 'react'
import { ToolButton } from '../ToolButton'
import * as Popover from '@radix-ui/react-popover'
import { TablerIcon } from '../icons'
export const GeometryTools = observer(function GeometryTools() {
const geometries = [
{
id: 'box',
icon: 'square',
tooltip: 'Rectangle',
},
{
id: 'ellipse',
icon: 'circle',
tooltip: 'Circle',
},
{
id: 'polygon',
icon: 'triangle',
tooltip: 'Triangle',
},
]
const app = useApp()
const [activeGeomId, setActiveGeomId] = React.useState(
() => (geometries.find(geo => geo.id === app.selectedTool.id) ?? geometries[0]).id
)
React.useEffect(() => {
setActiveGeomId(prevId => {
return geometries.find(geo => geo.id === app.selectedTool.id)?.id ?? prevId
})
}, [app.selectedTool.id])
return (
<Popover.Root>
<Popover.Trigger asChild>
<div className="tl-geometry-tools-pane-anchor">
<ToolButton {...geometries.find(geo => geo.id === activeGeomId)!} />
<TablerIcon
data-selected={geometries.some(geo => geo.id === app.selectedTool.id)}
className="tl-popover-indicator"
name="chevron-down-left"
/>
</div>
</Popover.Trigger>
<Popover.Content className="tl-popover-content" side="left" sideOffset={15}>
<div className="tl-toolbar tl-geometry-toolbar">
{geometries.map(props => (
<ToolButton key={props.id} {...props} />
))}
</div>
<Popover.Arrow className="tl-popover-arrow" />
</Popover.Content>
</Popover.Root>
)
})