37 lines
1.1 KiB
TypeScript
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>
|
|
)
|
|
}
|