2021-10-13 16:03:33 +00:00
|
|
|
import {
|
|
|
|
ArrowTopRightIcon,
|
2021-11-03 16:46:33 +00:00
|
|
|
CursorArrowIcon,
|
2022-07-22 20:27:06 +00:00
|
|
|
ImageIcon,
|
2021-10-13 16:03:33 +00:00
|
|
|
Pencil1Icon,
|
|
|
|
Pencil2Icon,
|
|
|
|
TextIcon,
|
|
|
|
} from '@radix-ui/react-icons'
|
2022-08-02 13:56:12 +00:00
|
|
|
import * as React from 'react'
|
|
|
|
import { useIntl } from 'react-intl'
|
2021-11-19 10:19:06 +00:00
|
|
|
import { Panel } from '~components/Primitives/Panel'
|
2022-08-02 13:56:12 +00:00
|
|
|
import { ToolButtonWithTooltip } from '~components/Primitives/ToolButton'
|
2022-07-22 20:27:06 +00:00
|
|
|
import { EraserIcon } from '~components/Primitives/icons'
|
2022-07-23 08:33:45 +00:00
|
|
|
import { breakpoints } from '~components/breakpoints'
|
2022-08-02 13:56:12 +00:00
|
|
|
import { useTldrawApp } from '~hooks'
|
|
|
|
import { styled } from '~styles/stitches.config'
|
|
|
|
import { TDShapeType, TDSnapshot } from '~types'
|
|
|
|
import { ShapesMenu } from './ShapesMenu'
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool
|
|
|
|
const toolLockedSelector = (s: TDSnapshot) => s.appState.isToolLocked
|
2022-07-07 10:59:47 +00:00
|
|
|
const dockPositionState = (s: TDSnapshot) => s.settings.dockPosition
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2022-05-14 13:15:55 +00:00
|
|
|
export const PrimaryTools = React.memo(function PrimaryTools() {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = useTldrawApp()
|
2022-06-09 14:33:35 +00:00
|
|
|
const intl = useIntl()
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const activeTool = app.useStore(activeToolSelector)
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const isToolLocked = app.useStore(toolLockedSelector)
|
2022-07-07 10:59:47 +00:00
|
|
|
const dockPosition = app.useStore(dockPositionState)
|
2021-11-03 16:46:33 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const selectSelectTool = React.useCallback(() => {
|
|
|
|
app.selectTool('select')
|
|
|
|
}, [app])
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const selectEraseTool = React.useCallback(() => {
|
|
|
|
app.selectTool('erase')
|
|
|
|
}, [app])
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const selectDrawTool = React.useCallback(() => {
|
|
|
|
app.selectTool(TDShapeType.Draw)
|
|
|
|
}, [app])
|
2021-10-13 16:03:33 +00:00
|
|
|
|
|
|
|
const selectArrowTool = React.useCallback(() => {
|
2021-11-16 16:01:29 +00:00
|
|
|
app.selectTool(TDShapeType.Arrow)
|
|
|
|
}, [app])
|
2021-10-13 16:03:33 +00:00
|
|
|
|
|
|
|
const selectTextTool = React.useCallback(() => {
|
2021-11-16 16:01:29 +00:00
|
|
|
app.selectTool(TDShapeType.Text)
|
|
|
|
}, [app])
|
2021-10-13 16:03:33 +00:00
|
|
|
|
|
|
|
const selectStickyTool = React.useCallback(() => {
|
2021-11-16 16:01:29 +00:00
|
|
|
app.selectTool(TDShapeType.Sticky)
|
|
|
|
}, [app])
|
2021-10-13 16:03:33 +00:00
|
|
|
|
2022-07-21 18:16:01 +00:00
|
|
|
const uploadMedias = React.useCallback(async () => {
|
|
|
|
app.openAsset()
|
|
|
|
}, [app])
|
|
|
|
|
2022-07-07 10:59:47 +00:00
|
|
|
const panelStyle = dockPosition === 'bottom' || dockPosition === 'top' ? 'row' : 'column'
|
|
|
|
|
2021-10-13 16:03:33 +00:00
|
|
|
return (
|
2022-07-23 08:33:45 +00:00
|
|
|
<StyledPanel
|
|
|
|
side="center"
|
|
|
|
id="TD-PrimaryTools"
|
|
|
|
style={{ flexDirection: panelStyle }}
|
|
|
|
bp={breakpoints}
|
|
|
|
>
|
2021-11-03 16:46:33 +00:00
|
|
|
<ToolButtonWithTooltip
|
2021-11-11 09:54:58 +00:00
|
|
|
kbd={'1'}
|
2022-06-09 14:33:35 +00:00
|
|
|
label={intl.formatMessage({ id: 'select' })}
|
2021-11-05 14:13:14 +00:00
|
|
|
onClick={selectSelectTool}
|
2021-11-03 16:46:33 +00:00
|
|
|
isActive={activeTool === 'select'}
|
2022-01-21 11:44:18 +00:00
|
|
|
id="TD-PrimaryTools-CursorArrow"
|
2021-11-03 16:46:33 +00:00
|
|
|
>
|
|
|
|
<CursorArrowIcon />
|
|
|
|
</ToolButtonWithTooltip>
|
|
|
|
<ToolButtonWithTooltip
|
2021-10-13 16:03:33 +00:00
|
|
|
kbd={'2'}
|
2022-06-09 14:33:35 +00:00
|
|
|
label={intl.formatMessage({ id: 'draw' })}
|
2021-11-05 14:13:14 +00:00
|
|
|
onClick={selectDrawTool}
|
2021-11-16 16:01:29 +00:00
|
|
|
isActive={activeTool === TDShapeType.Draw}
|
2022-01-21 11:44:18 +00:00
|
|
|
id="TD-PrimaryTools-Pencil"
|
2021-10-13 16:03:33 +00:00
|
|
|
>
|
|
|
|
<Pencil1Icon />
|
2021-11-03 16:46:33 +00:00
|
|
|
</ToolButtonWithTooltip>
|
|
|
|
<ToolButtonWithTooltip
|
2021-10-13 16:03:33 +00:00
|
|
|
kbd={'3'}
|
2022-06-09 14:33:35 +00:00
|
|
|
label={intl.formatMessage({ id: 'eraser' })}
|
2021-11-16 16:01:29 +00:00
|
|
|
onClick={selectEraseTool}
|
|
|
|
isActive={activeTool === 'erase'}
|
2022-01-21 11:44:18 +00:00
|
|
|
id="TD-PrimaryTools-Eraser"
|
2021-10-13 16:03:33 +00:00
|
|
|
>
|
2021-11-16 16:01:29 +00:00
|
|
|
<EraserIcon />
|
2021-11-03 16:46:33 +00:00
|
|
|
</ToolButtonWithTooltip>
|
2021-11-16 16:01:29 +00:00
|
|
|
<ShapesMenu activeTool={activeTool} isToolLocked={isToolLocked} />
|
2021-11-03 16:46:33 +00:00
|
|
|
<ToolButtonWithTooltip
|
2021-12-09 22:29:09 +00:00
|
|
|
kbd={'8'}
|
2022-06-09 14:33:35 +00:00
|
|
|
label={intl.formatMessage({ id: 'arrow' })}
|
2021-11-05 14:13:14 +00:00
|
|
|
onClick={selectArrowTool}
|
2021-11-16 16:01:29 +00:00
|
|
|
isLocked={isToolLocked}
|
|
|
|
isActive={activeTool === TDShapeType.Arrow}
|
2022-01-21 11:44:18 +00:00
|
|
|
id="TD-PrimaryTools-ArrowTopRight"
|
2021-10-13 16:03:33 +00:00
|
|
|
>
|
|
|
|
<ArrowTopRightIcon />
|
2021-11-03 16:46:33 +00:00
|
|
|
</ToolButtonWithTooltip>
|
|
|
|
<ToolButtonWithTooltip
|
2021-12-09 22:29:09 +00:00
|
|
|
kbd={'9'}
|
2022-06-09 14:33:35 +00:00
|
|
|
label={intl.formatMessage({ id: 'text' })}
|
2021-11-05 14:13:14 +00:00
|
|
|
onClick={selectTextTool}
|
2021-11-21 11:53:13 +00:00
|
|
|
isLocked={isToolLocked}
|
2021-11-16 16:01:29 +00:00
|
|
|
isActive={activeTool === TDShapeType.Text}
|
2022-01-21 11:44:18 +00:00
|
|
|
id="TD-PrimaryTools-Text"
|
2021-10-13 16:03:33 +00:00
|
|
|
>
|
|
|
|
<TextIcon />
|
2021-11-03 16:46:33 +00:00
|
|
|
</ToolButtonWithTooltip>
|
|
|
|
<ToolButtonWithTooltip
|
2021-12-09 22:29:09 +00:00
|
|
|
kbd={'0'}
|
2022-06-09 14:33:35 +00:00
|
|
|
label={intl.formatMessage({ id: 'sticky' })}
|
2021-11-05 14:13:14 +00:00
|
|
|
onClick={selectStickyTool}
|
2021-11-16 16:01:29 +00:00
|
|
|
isActive={activeTool === TDShapeType.Sticky}
|
2022-01-21 11:44:18 +00:00
|
|
|
id="TD-PrimaryTools-Pencil2"
|
2021-10-13 16:03:33 +00:00
|
|
|
>
|
|
|
|
<Pencil2Icon />
|
2021-11-03 16:46:33 +00:00
|
|
|
</ToolButtonWithTooltip>
|
2022-08-11 06:08:32 +00:00
|
|
|
<ToolButtonWithTooltip
|
|
|
|
label={intl.formatMessage({ id: 'image' })}
|
|
|
|
onClick={uploadMedias}
|
|
|
|
id="TD-PrimaryTools-Image"
|
|
|
|
>
|
2022-07-21 18:16:01 +00:00
|
|
|
<ImageIcon />
|
|
|
|
</ToolButtonWithTooltip>
|
2022-07-23 08:33:45 +00:00
|
|
|
</StyledPanel>
|
2021-10-13 16:03:33 +00:00
|
|
|
)
|
|
|
|
})
|
2022-07-23 08:33:45 +00:00
|
|
|
|
|
|
|
const StyledPanel = styled(Panel, {
|
|
|
|
variants: {
|
|
|
|
bp: {
|
|
|
|
mobile: {
|
|
|
|
padding: '$0',
|
2022-07-23 14:05:48 +00:00
|
|
|
borderRadius: '10px',
|
2022-07-23 08:33:45 +00:00
|
|
|
},
|
|
|
|
small: {
|
|
|
|
padding: '$2',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|