{ "version": 3, "sources": ["../../../../../src/lib/ui/components/Toolbar/Toolbar.tsx"], "sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { DuplicateButton } from '../DuplicateButton'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { RedoButton } from '../RedoButton'\nimport { TrashButton } from '../TrashButton'\nimport { UndoButton } from '../UndoButton'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.currentToolId, [editor])\n\n\tconst geoState = useValue('geo', () => editor.sharedStyles.getAsKnownValue(GeoShapeGeoStyle), [\n\t\teditor,\n\t])\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t
\n\t\t
\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t
\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t
\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"], "mappings": "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", "names": ["Toolbar", "itemsInPanel", "itemsInDropdown", "dropdownFirstItem", "OverflowToolsContent"] }