tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 4.65 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx"],
"sourcesContent": ["import * as _Dropdown from '@radix-ui/react-dropdown-menu'\nimport { useContainer, useEditor, useValue } from '@tldraw/editor'\nimport { ReactNode, forwardRef, memo, useCallback } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultZoomMenuContent } from './DefaultZoomMenuContent'\n\n/** @public */\nexport interface TLUiZoomMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZoomMenuProps) {\n\tconst container = useContainer()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('zoom menu')\n\n\t// Get the zoom menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\tconst content = children ?? <DefaultZoomMenuContent />\n\n\treturn (\n\t\t<_Dropdown.Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t<_Dropdown.Trigger asChild dir=\"ltr\">\n\t\t\t\t<ZoomTriggerButton />\n\t\t\t</_Dropdown.Trigger>\n\t\t\t<_Dropdown.Portal container={container}>\n\t\t\t\t<_Dropdown.Content\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"top\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\talignOffset={0}\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"zoom-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</_Dropdown.Content>\n\t\t\t</_Dropdown.Portal>\n\t\t</_Dropdown.Root>\n\t)\n})\n\nconst ZoomTriggerButton = forwardRef<HTMLButtonElement, any>(\n\tfunction ZoomTriggerButton(props, ref) {\n\t\tconst editor = useEditor()\n\t\tconst breakpoint = useBreakpoint()\n\t\tconst zoom = useValue('zoom', () => editor.getZoomLevel(), [editor])\n\t\tconst msg = useTranslation()\n\n\t\tconst handleDoubleClick = useCallback(() => {\n\t\t\teditor.resetZoom(editor.getViewportScreenCenter(), {\n\t\t\t\tanimation: { duration: editor.options.animationMediumMs },\n\t\t\t})\n\t\t}, [editor])\n\n\t\treturn (\n\t\t\t<TldrawUiButton\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={`${msg('navigation-zone.zoom')}`}\n\t\t\t\tdata-testid=\"minimap.zoom-menu-button\"\n\t\t\t\tclassName={\n\t\t\t\t\tbreakpoint < PORTRAIT_BREAKPOINT.TABLET_SM\n\t\t\t\t\t\t? 'tlui-zoom-menu__button'\n\t\t\t\t\t\t: 'tlui-zoom-menu__button__pct'\n\t\t\t\t}\n\t\t\t\tonDoubleClick={handleDoubleClick}\n\t\t\t>\n\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.MOBILE ? null : (\n\t\t\t\t\t<span style={{ flexGrow: 0, textAlign: 'center' }}>{Math.floor(zoom * 100)}%</span>\n\t\t\t\t)}\n\t\t\t</TldrawUiButton>\n\t\t)\n\t}\n)\n"],
"mappings": "AAwB6B,cAG3B,YAH2B;AAxB7B,YAAY,eAAe;AAC3B,SAAS,cAAc,WAAW,gBAAgB;AAClD,SAAoB,YAAY,MAAM,mBAAmB;AACzD,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAQhC,MAAM,kBAAkB,KAAK,SAASA,iBAAgB,EAAE,SAAS,GAAsB;AAC7F,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,WAAW;AAKxD,QAAM,UAAU,YAAY,oBAAC,0BAAuB;AAEpD,SACC,qBAAC,UAAU,MAAV,EAAe,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAC1E;AAAA,wBAAC,UAAU,SAAV,EAAkB,SAAO,MAAC,KAAI,OAC9B,8BAAC,qBAAkB,GACpB;AAAA,IACA,oBAAC,UAAU,QAAV,EAAiB,WACjB;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,8BAAC,+BAA4B,MAAK,QAAO,UAAS,aAChD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF,CAAC;AAED,MAAM,oBAAoB;AAAA,EACzB,SAASC,mBAAkB,OAAO,KAAK;AACtC,UAAM,SAAS,UAAU;AACzB,UAAM,aAAa,cAAc;AACjC,UAAM,OAAO,SAAS,QAAQ,MAAM,OAAO,aAAa,GAAG,CAAC,MAAM,CAAC;AACnE,UAAM,MAAM,eAAe;AAE3B,UAAM,oBAAoB,YAAY,MAAM;AAC3C,aAAO,UAAU,OAAO,wBAAwB,GAAG;AAAA,QAClD,WAAW,EAAE,UAAU,OAAO,QAAQ,kBAAkB;AAAA,MACzD,CAAC;AAAA,IACF,GAAG,CAAC,MAAM,CAAC;AAEX,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,OAAO,GAAG,IAAI,sBAAsB,CAAC;AAAA,QACrC,eAAY;AAAA,QACZ,WACC,aAAa,oBAAoB,YAC9B,2BACA;AAAA,QAEJ,eAAe;AAAA,QAEd,uBAAa,oBAAoB,SAAS,OAC1C,qBAAC,UAAK,OAAO,EAAE,UAAU,GAAG,WAAW,SAAS,GAAI;AAAA,eAAK,MAAM,OAAO,GAAG;AAAA,UAAE;AAAA,WAAC;AAAA;AAAA,IAE9E;AAAA,EAEF;AACD;",
"names": ["DefaultZoomMenu", "ZoomTriggerButton"]
}