2021-05-29 10:12:28 +00:00
|
|
|
import {
|
2021-05-31 19:13:43 +00:00
|
|
|
ArrowTopRightIcon,
|
2021-05-29 10:12:28 +00:00
|
|
|
CircleIcon,
|
|
|
|
CursorArrowIcon,
|
|
|
|
LockClosedIcon,
|
|
|
|
LockOpen1Icon,
|
|
|
|
Pencil1Icon,
|
|
|
|
SquareIcon,
|
2021-06-03 16:13:23 +00:00
|
|
|
TextIcon,
|
2021-05-29 10:12:28 +00:00
|
|
|
} from '@radix-ui/react-icons'
|
2021-07-10 12:14:00 +00:00
|
|
|
import { PrimaryButton, SecondaryButton, Container } from './shared'
|
2021-05-29 10:12:28 +00:00
|
|
|
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-29 10:12:28 +00:00
|
|
|
|
2021-05-31 19:13:43 +00:00
|
|
|
const selectArrowTool = () => state.send('SELECTED_ARROW_TOOL')
|
|
|
|
const selectDrawTool = () => state.send('SELECTED_DRAW_TOOL')
|
2021-05-29 10:12:28 +00:00
|
|
|
const selectEllipseTool = () => state.send('SELECTED_ELLIPSE_TOOL')
|
2021-06-03 16:13:23 +00:00
|
|
|
const selectTextTool = () => state.send('SELECTED_TEXT_TOOL')
|
2021-05-29 10:12:28 +00:00
|
|
|
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-05-29 10:12:28 +00:00
|
|
|
|
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)
|
2021-05-29 10:12:28 +00:00
|
|
|
|
|
|
|
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 />
|
2021-05-30 13:14:35 +00:00
|
|
|
<Container>
|
2021-07-10 12:01:59 +00:00
|
|
|
<SecondaryButton
|
|
|
|
label={'Select'}
|
|
|
|
onClick={selectSelectTool}
|
|
|
|
isActive={activeTool === 'select'}
|
|
|
|
>
|
|
|
|
<CursorArrowIcon />
|
|
|
|
</SecondaryButton>
|
2021-05-30 13:14:35 +00:00
|
|
|
</Container>
|
2021-07-10 12:01:59 +00:00
|
|
|
</LeftWrap>
|
|
|
|
<CenterWrap>
|
2021-05-30 13:14:35 +00:00
|
|
|
<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>
|
2021-05-30 13:14:35 +00:00
|
|
|
</Container>
|
2021-07-10 12:01:59 +00:00
|
|
|
</CenterWrap>
|
|
|
|
<RightWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
|
2021-05-30 13:14:35 +00:00
|
|
|
<Container>
|
2021-07-10 12:01:59 +00:00
|
|
|
<SecondaryButton
|
|
|
|
label={'Lock Tool'}
|
|
|
|
onClick={toggleToolLock}
|
|
|
|
isActive={isToolLocked}
|
|
|
|
>
|
|
|
|
{isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
|
|
|
|
</SecondaryButton>
|
2021-05-30 13:14:35 +00:00
|
|
|
</Container>
|
2021-07-10 12:01:59 +00:00
|
|
|
<UndoRedo />
|
|
|
|
</RightWrap>
|
|
|
|
</ToolsPanelContainer>
|
2021-05-29 10:12:28 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-07-10 12:01:59 +00:00
|
|
|
const ToolsPanelContainer = styled('div', {
|
2021-05-30 13:14:35 +00:00
|
|
|
position: 'fixed',
|
2021-06-12 08:10:12 +00:00
|
|
|
bottom: 44,
|
2021-05-30 13:14:35 +00:00
|
|
|
left: 0,
|
|
|
|
right: 0,
|
2021-05-29 10:12:28 +00:00
|
|
|
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',
|
2021-05-30 13:14:35 +00:00
|
|
|
zIndex: 200,
|
2021-07-10 12:15:09 +00:00
|
|
|
gap: 12,
|
2021-05-30 13:14:35 +00:00
|
|
|
})
|
|
|
|
|
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-05-30 13:14:35 +00:00
|
|
|
},
|
2021-05-29 10:12:28 +00:00
|
|
|
})
|
|
|
|
|
2021-07-10 12:01:59 +00:00
|
|
|
const RightWrap = styled('div', {
|
|
|
|
gridRow: 1,
|
|
|
|
gridColumn: 3,
|
2021-05-29 10:12:28 +00:00
|
|
|
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',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-05-29 10:12:28 +00:00
|
|
|
},
|
|
|
|
})
|