tldraw/components/tools-panel/zoom.tsx
2021-07-10 13:14:00 +01:00

37 lines
1.1 KiB
TypeScript

import { ZoomInIcon, ZoomOutIcon } from '@radix-ui/react-icons'
import { TertiaryButton, TertiaryButtonsContainer } from './shared'
import state, { useSelector } from 'state'
import tld from 'utils/tld'
const zoomIn = () => state.send('ZOOMED_IN')
const zoomOut = () => state.send('ZOOMED_OUT')
const zoomToFit = () => state.send('ZOOMED_TO_FIT')
const zoomToActual = () => state.send('ZOOMED_TO_ACTUAL')
export default function Zoom(): JSX.Element {
return (
<TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
<TertiaryButton label="Zoom Out" onClick={zoomOut}>
<ZoomOutIcon />
</TertiaryButton>
<TertiaryButton label="Zoom In" onClick={zoomIn}>
<ZoomInIcon />
</TertiaryButton>
<ZoomCounter />
</TertiaryButtonsContainer>
)
}
function ZoomCounter() {
const zoom = useSelector((s) => tld.getCurrentCamera(s.data).zoom)
return (
<TertiaryButton
label="Reset Zoom"
onClick={zoomToActual}
onDoubleClick={zoomToFit}
>
{Math.round(zoom * 100)}%
</TertiaryButton>
)
}