tldraw/components/tools-panel/tools-panel.tsx

176 lines
4.5 KiB
TypeScript
Raw Normal View History

import {
2021-05-31 19:13:43 +00:00
ArrowTopRightIcon,
CircleIcon,
CursorArrowIcon,
LockClosedIcon,
LockOpen1Icon,
Pencil1Icon,
SquareIcon,
TextIcon,
} from '@radix-ui/react-icons'
import { PrimaryButton, SecondaryButton, Container } from './shared'
import React from 'react'
import state, { useSelector } from 'state'
import styled from 'styles'
import { ShapeType } from 'types'
2021-05-29 14:06:23 +00:00
import UndoRedo from './undo-redo'
2021-05-29 13:59:11 +00:00
import Zoom from './zoom'
2021-05-31 19:13:43 +00:00
const selectArrowTool = () => state.send('SELECTED_ARROW_TOOL')
const selectDrawTool = () => state.send('SELECTED_DRAW_TOOL')
const selectEllipseTool = () => state.send('SELECTED_ELLIPSE_TOOL')
const selectTextTool = () => state.send('SELECTED_TEXT_TOOL')
const selectRectangleTool = () => state.send('SELECTED_RECTANGLE_TOOL')
2021-05-31 19:13:43 +00:00
const selectSelectTool = () => state.send('SELECTED_SELECT_TOOL')
2021-07-10 12:01:59 +00:00
const toggleToolLock = () => state.send('TOGGLED_TOOL_LOCK')
2021-06-21 21:35:28 +00:00
export default function ToolsPanel(): JSX.Element {
2021-06-02 21:17:38 +00:00
const activeTool = useSelector((s) => s.data.activeTool)
const isToolLocked = useSelector((s) => s.data.settings.isToolLocked)
return (
2021-07-10 12:01:59 +00:00
<ToolsPanelContainer>
<LeftWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
<Zoom />
<Container>
2021-07-10 12:01:59 +00:00
<SecondaryButton
label={'Select'}
onClick={selectSelectTool}
isActive={activeTool === 'select'}
>
<CursorArrowIcon />
</SecondaryButton>
</Container>
2021-07-10 12:01:59 +00:00
</LeftWrap>
<CenterWrap>
<Container>
2021-07-10 12:01:59 +00:00
<PrimaryButton
label={ShapeType.Draw}
onClick={selectDrawTool}
isActive={activeTool === ShapeType.Draw}
>
<Pencil1Icon />
</PrimaryButton>
<PrimaryButton
label={ShapeType.Rectangle}
onClick={selectRectangleTool}
isActive={activeTool === ShapeType.Rectangle}
>
<SquareIcon />
</PrimaryButton>
<PrimaryButton
label={ShapeType.Ellipse}
onClick={selectEllipseTool}
isActive={activeTool === ShapeType.Ellipse}
>
<CircleIcon />
</PrimaryButton>
<PrimaryButton
label={ShapeType.Arrow}
onClick={selectArrowTool}
isActive={activeTool === ShapeType.Arrow}
>
<ArrowTopRightIcon />
</PrimaryButton>
<PrimaryButton
label={ShapeType.Text}
onClick={selectTextTool}
isActive={activeTool === ShapeType.Text}
>
<TextIcon />
</PrimaryButton>
</Container>
2021-07-10 12:01:59 +00:00
</CenterWrap>
<RightWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
<Container>
2021-07-10 12:01:59 +00:00
<SecondaryButton
label={'Lock Tool'}
onClick={toggleToolLock}
isActive={isToolLocked}
>
{isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
</SecondaryButton>
</Container>
2021-07-10 12:01:59 +00:00
<UndoRedo />
</RightWrap>
</ToolsPanelContainer>
)
}
2021-07-10 12:01:59 +00:00
const ToolsPanelContainer = styled('div', {
position: 'fixed',
2021-06-12 08:10:12 +00:00
bottom: 44,
left: 0,
right: 0,
width: '100%',
2021-07-10 12:01:59 +00:00
minWidth: 0,
maxWidth: '100%',
display: 'grid',
gridTemplateColumns: '1fr auto 1fr',
padding: '0 8px 12px 8px',
2021-06-02 16:11:42 +00:00
alignItems: 'flex-end',
zIndex: 200,
2021-07-10 12:15:09 +00:00
gap: 12,
})
2021-07-10 12:01:59 +00:00
const CenterWrap = styled('div', {
gridRow: 1,
gridColumn: 2,
display: 'flex',
width: 'fit-content',
justifyContent: 'center',
})
2021-06-01 08:56:41 +00:00
2021-07-10 12:01:59 +00:00
const LeftWrap = styled('div', {
gridRow: 1,
gridColumn: 1,
display: 'flex',
2021-06-01 08:56:41 +00:00
variants: {
size: {
2021-07-10 12:01:59 +00:00
mobile: {
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'flex-start',
'& > *:nth-of-type(1)': {
marginBottom: '8px',
},
},
2021-06-01 08:56:41 +00:00
small: {
2021-07-10 12:01:59 +00:00
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'space-between',
'& > *:nth-of-type(1)': {
marginBottom: '0px',
2021-06-01 08:56:41 +00:00
},
},
},
},
})
2021-07-10 12:01:59 +00:00
const RightWrap = styled('div', {
gridRow: 1,
gridColumn: 3,
display: 'flex',
2021-07-10 12:01:59 +00:00
variants: {
size: {
mobile: {
flexDirection: 'column-reverse',
justifyContent: 'flex-end',
alignItems: 'flex-end',
'& > *:nth-of-type(2)': {
marginBottom: '8px',
},
},
small: {
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'space-between',
'& > *:nth-of-type(2)': {
marginBottom: '0px',
},
},
},
},
})