tldraw/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultToolbar.tsx"],
  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { TldrawUiOrientationProvider } from '../primitives/layout'\nimport { TldrawUiToolbar } from '../primitives/TldrawUiToolbar'\nimport { DefaultToolbarContent } from './DefaultToolbarContent'\nimport { OverflowingToolbar } from './OverflowingToolbar'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport interface DefaultToolbarProps {\n\tchildren?: ReactNode\n\torientation?: 'horizontal' | 'vertical'\n\tminItems?: number\n\tminSizePx?: number\n\tmaxItems?: number\n\tmaxSizePx?: number\n}\n\n/**\n * The default toolbar for the editor. `children` defaults to the `DefaultToolbarContent` component.\n * Depending on the screen size, the children will overflow into a drop-down menu, with the most\n * recently active item from the overflow being shown in the main toolbar.\n *\n * @public\n * @react\n */\nexport const DefaultToolbar = memo(function DefaultToolbar({\n\tchildren,\n\torientation = 'horizontal',\n\tminItems = 4,\n\tminSizePx = 310,\n\tmaxItems = 8,\n\tmaxSizePx = 470,\n}: DefaultToolbarProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { ActionsMenu, QuickActions } = useTldrawUiComponents()\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? false\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? true\n\t\t\t\t: breakpoint < PORTRAIT_BREAKPOINT.TABLET\n\n\treturn (\n\t\t<TldrawUiOrientationProvider\n\t\t\torientation={orientation}\n\t\t\ttooltipSide={orientation === 'horizontal' ? 'top' : 'right'}\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames('tlui-main-toolbar', `tlui-main-toolbar--${orientation}`)}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-main-toolbar__inner\">\n\t\t\t\t\t<div className=\"tlui-main-toolbar__left\">\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<div className=\"tlui-main-toolbar__extras\">\n\t\t\t\t\t\t\t\t{showQuickActions && (\n\t\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\t\torientation={orientation}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__extras__controls\"\n\t\t\t\t\t\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OverflowingToolbar\n\t\t\t\t\t\t\torientation={orientation}\n\t\t\t\t\t\t\tsizingParentClassName=\"tlui-main-toolbar\"\n\t\t\t\t\t\t\tminItems={minItems}\n\t\t\t\t\t\t\tmaxItems={maxItems}\n\t\t\t\t\t\t\tminSizePx={minSizePx}\n\t\t\t\t\t\t\tmaxSizePx={maxSizePx}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children ?? <DefaultToolbarContent />}\n\t\t\t\t\t\t</OverflowingToolbar>\n\t\t\t\t\t</div>\n\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t\t<div className=\"tlui-main-toolbar__tools tlui-main-toolbar__mobile-style-panel\">\n\t\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</TldrawUiOrientationProvider>\n\t)\n})\n"],
  "mappings": "AAyES,SAKkB,KALlB;AAzET,SAAS,WAAW,2BAA2B,gBAAgB;AAC/D,OAAO,gBAAgB;AACvB,SAAoB,MAAM,cAAc;AACxC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAoBhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EAC1D;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AACb,GAAwB;AACvB,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AACjC,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,SAAS,mBAAmB,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAE1F,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,EAAE,aAAa,aAAa,IAAI,sBAAsB;AAE5D,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,QACA,OAAO,QAAQ,4BAA4B,YAC1C,OACA,aAAa,oBAAoB;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,aAAa,gBAAgB,eAAe,QAAQ;AAAA,MAEpD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAW,WAAW,qBAAqB,sBAAsB,WAAW,EAAE;AAAA,UAE9E,+BAAC,SAAI,WAAU,4BACd;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA,eAAC,kBACD,qBAAC,SAAI,WAAU,6BACb;AAAA,oCACA;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA,WAAU;AAAA,oBACV,OAAO,IAAI,oBAAoB;AAAA,oBAE9B;AAAA,sCAAgB,oBAAC,gBAAa;AAAA,sBAC9B,eAAe,oBAAC,eAAY;AAAA;AAAA;AAAA,gBAC9B;AAAA,gBAED,oBAAC,0BAAuB,cAA4B;AAAA,iBACrD;AAAA,cAED;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,uBAAsB;AAAA,kBACtB;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,sBAAY,oBAAC,yBAAsB;AAAA;AAAA,cACrC;AAAA,eACD;AAAA,YACC,aAAa,oBAAoB,aAAa,CAAC,kBAC/C,oBAAC,SAAI,WAAU,kEACd,8BAAC,oBAAiB,GACnB;AAAA,aAEF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF,CAAC;",
  "names": ["DefaultToolbar"]
}