2021-11-03 16:46:33 +00:00
|
|
|
|
import * as React from 'react'
|
2021-11-16 16:01:29 +00:00
|
|
|
|
import { useTldrawApp } from '~hooks'
|
|
|
|
|
import type { TDSnapshot } from '~types'
|
2021-11-06 11:16:30 +00:00
|
|
|
|
import { styled } from '~styles'
|
2021-11-03 16:46:33 +00:00
|
|
|
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
2021-11-19 10:19:06 +00:00
|
|
|
|
import { DMItem, DMContent } from '~components/Primitives/DropdownMenu'
|
|
|
|
|
import { ToolButton } from '~components/Primitives/ToolButton'
|
2021-11-16 16:01:29 +00:00
|
|
|
|
import { preventEvent } from '~components/preventEvent'
|
2022-06-09 14:33:35 +00:00
|
|
|
|
import { FormattedMessage } from 'react-intl'
|
2021-11-03 16:46:33 +00:00
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
|
const zoomSelector = (s: TDSnapshot) => s.document.pageStates[s.appState.currentPageId].camera.zoom
|
2021-11-03 16:46:33 +00:00
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
|
export const ZoomMenu = React.memo(function ZoomMenu() {
|
|
|
|
|
const app = useTldrawApp()
|
|
|
|
|
|
|
|
|
|
const zoom = app.useStore(zoomSelector)
|
2021-11-03 16:46:33 +00:00
|
|
|
|
|
|
|
|
|
return (
|
2021-11-16 16:01:29 +00:00
|
|
|
|
<DropdownMenu.Root dir="ltr">
|
2022-01-21 11:44:18 +00:00
|
|
|
|
<DropdownMenu.Trigger dir="ltr" asChild id="TD-Zoom">
|
2021-11-16 16:01:29 +00:00
|
|
|
|
<FixedWidthToolButton onDoubleClick={app.resetZoom} variant="text">
|
|
|
|
|
{Math.round(zoom * 100)}%
|
|
|
|
|
</FixedWidthToolButton>
|
2021-11-03 16:46:33 +00:00
|
|
|
|
</DropdownMenu.Trigger>
|
|
|
|
|
<DMContent align="end">
|
2022-01-21 11:44:18 +00:00
|
|
|
|
<DMItem onSelect={preventEvent} onClick={app.zoomIn} kbd="#+" id="TD-Zoom-Zoom_In">
|
2022-06-09 14:33:35 +00:00
|
|
|
|
<FormattedMessage id="zoom.in" />
|
2021-11-03 16:46:33 +00:00
|
|
|
|
</DMItem>
|
2022-01-21 11:44:18 +00:00
|
|
|
|
<DMItem onSelect={preventEvent} onClick={app.zoomOut} kbd="#−" id="TD-Zoom-Zoom_Out">
|
2022-06-09 14:33:35 +00:00
|
|
|
|
<FormattedMessage id="zoom.out" />
|
2021-11-03 16:46:33 +00:00
|
|
|
|
</DMItem>
|
2022-01-21 11:44:18 +00:00
|
|
|
|
<DMItem onSelect={preventEvent} onClick={app.resetZoom} kbd="⇧0" id="TD-Zoom-Zoom_To_100%">
|
2022-06-09 14:33:35 +00:00
|
|
|
|
<FormattedMessage id="to" /> 100%
|
2021-11-03 16:46:33 +00:00
|
|
|
|
</DMItem>
|
2022-01-21 11:44:18 +00:00
|
|
|
|
<DMItem onSelect={preventEvent} onClick={app.zoomToFit} kbd="⇧1" id="TD-Zoom-To_Fit">
|
2022-06-09 14:33:35 +00:00
|
|
|
|
<FormattedMessage id="to.fit" />
|
2021-11-03 16:46:33 +00:00
|
|
|
|
</DMItem>
|
2022-01-21 11:44:18 +00:00
|
|
|
|
<DMItem
|
|
|
|
|
onSelect={preventEvent}
|
|
|
|
|
onClick={app.zoomToSelection}
|
|
|
|
|
kbd="⇧2"
|
|
|
|
|
id="TD-Zoom-To_Selection"
|
|
|
|
|
>
|
2022-06-09 14:33:35 +00:00
|
|
|
|
<FormattedMessage id="to.selection" />
|
2021-11-03 16:46:33 +00:00
|
|
|
|
</DMItem>
|
|
|
|
|
</DMContent>
|
|
|
|
|
</DropdownMenu.Root>
|
|
|
|
|
)
|
2021-11-16 16:01:29 +00:00
|
|
|
|
})
|
2021-11-03 16:46:33 +00:00
|
|
|
|
|
|
|
|
|
const FixedWidthToolButton = styled(ToolButton, {
|
|
|
|
|
minWidth: 56,
|
|
|
|
|
})
|