tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 8.38 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx"],
"sourcesContent": ["import { GeoShapeGeoStyle, useEditor, useValue } from '@tldraw/editor'\nimport { TLUiToolItem, useTools } from '../../hooks/useTools'\nimport { TldrawUiMenuToolItem } from '../primitives/menus/TldrawUiMenuToolItem'\n\n/** @public @react */\nexport function DefaultToolbarContent() {\n\treturn (\n\t\t<>\n\t\t\t<SelectToolbarItem />\n\t\t\t<HandToolbarItem />\n\t\t\t<DrawToolbarItem />\n\t\t\t<EraserToolbarItem />\n\t\t\t<ArrowToolbarItem />\n\t\t\t<TextToolbarItem />\n\t\t\t<NoteToolbarItem />\n\t\t\t<AssetToolbarItem />\n\n\t\t\t<RectangleToolbarItem />\n\t\t\t<EllipseToolbarItem />\n\t\t\t<TriangleToolbarItem />\n\t\t\t<DiamondToolbarItem />\n\n\t\t\t<HexagonToolbarItem />\n\t\t\t<OvalToolbarItem />\n\t\t\t<RhombusToolbarItem />\n\t\t\t<StarToolbarItem />\n\n\t\t\t<CloudToolbarItem />\n\t\t\t<HeartToolbarItem />\n\t\t\t<XBoxToolbarItem />\n\t\t\t<CheckBoxToolbarItem />\n\n\t\t\t<ArrowLeftToolbarItem />\n\t\t\t<ArrowUpToolbarItem />\n\t\t\t<ArrowDownToolbarItem />\n\t\t\t<ArrowRightToolbarItem />\n\n\t\t\t<LineToolbarItem />\n\t\t\t<HighlightToolbarItem />\n\t\t\t<LaserToolbarItem />\n\t\t\t<FrameToolbarItem />\n\t\t</>\n\t)\n}\n\n/** @public */\nexport function useIsToolSelected(tool: TLUiToolItem | undefined) {\n\tconst editor = useEditor()\n\tconst geo = tool?.meta?.geo\n\treturn useValue(\n\t\t'is tool selected',\n\t\t() => {\n\t\t\tif (!tool) return false\n\t\t\tconst activeToolId = editor.getCurrentToolId()\n\t\t\tif (activeToolId === 'geo') {\n\t\t\t\treturn geo === editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle)\n\t\t\t} else {\n\t\t\t\treturn activeToolId === tool.id\n\t\t\t}\n\t\t},\n\t\t[editor, tool?.id, geo]\n\t)\n}\n\n/** @public */\nexport interface ToolbarItemProps {\n\ttool: string\n}\n\n/** @public @react */\nexport function ToolbarItem({ tool }: ToolbarItemProps) {\n\tconst tools = useTools()\n\tconst isSelected = useIsToolSelected(tools[tool])\n\treturn <TldrawUiMenuToolItem toolId={tool} isSelected={isSelected} />\n}\n\n/** @public @react */\nexport function SelectToolbarItem() {\n\treturn <ToolbarItem tool=\"select\" />\n}\n\n/** @public @react */\nexport function HandToolbarItem() {\n\treturn <ToolbarItem tool=\"hand\" />\n}\n\n/** @public @react */\nexport function DrawToolbarItem() {\n\treturn <ToolbarItem tool=\"draw\" />\n}\n\n/** @public @react */\nexport function EraserToolbarItem() {\n\treturn <ToolbarItem tool=\"eraser\" />\n}\n\n/** @public @react */\nexport function ArrowToolbarItem() {\n\treturn <ToolbarItem tool=\"arrow\" />\n}\n\n/** @public @react */\nexport function TextToolbarItem() {\n\treturn <ToolbarItem tool=\"text\" />\n}\n\n/** @public @react */\nexport function NoteToolbarItem() {\n\treturn <ToolbarItem tool=\"note\" />\n}\n\n/** @public @react */\nexport function AssetToolbarItem() {\n\treturn <TldrawUiMenuToolItem toolId=\"asset\" />\n}\n\n/** @public @react */\nexport function RectangleToolbarItem() {\n\treturn <ToolbarItem tool=\"rectangle\" />\n}\n\n/** @public @react */\nexport function EllipseToolbarItem() {\n\treturn <ToolbarItem tool=\"ellipse\" />\n}\n\n/** @public @react */\nexport function DiamondToolbarItem() {\n\treturn <ToolbarItem tool=\"diamond\" />\n}\n\n/** @public @react */\nexport function TriangleToolbarItem() {\n\treturn <ToolbarItem tool=\"triangle\" />\n}\n\n/** @public @react */\nexport function TrapezoidToolbarItem() {\n\treturn <ToolbarItem tool=\"trapezoid\" />\n}\n\n/** @public @react */\nexport function RhombusToolbarItem() {\n\treturn <ToolbarItem tool=\"rhombus\" />\n}\n\n/** @public @react */\nexport function PentagonToolbarItem() {\n\treturn <ToolbarItem tool=\"pentagon\" />\n}\n\n/** @public @react */\nexport function HeartToolbarItem() {\n\treturn <ToolbarItem tool=\"heart\" />\n}\n\n/** @public @react */\nexport function HexagonToolbarItem() {\n\treturn <ToolbarItem tool=\"hexagon\" />\n}\n\n/** @public @react */\nexport function CloudToolbarItem() {\n\treturn <ToolbarItem tool=\"cloud\" />\n}\n\n/** @public @react */\nexport function StarToolbarItem() {\n\treturn <ToolbarItem tool=\"star\" />\n}\n\n/** @public @react */\nexport function OvalToolbarItem() {\n\treturn <ToolbarItem tool=\"oval\" />\n}\n\n/** @public @react */\nexport function XBoxToolbarItem() {\n\treturn <ToolbarItem tool=\"x-box\" />\n}\n\n/** @public @react */\nexport function CheckBoxToolbarItem() {\n\treturn <ToolbarItem tool=\"check-box\" />\n}\n\n/** @public @react */\nexport function ArrowLeftToolbarItem() {\n\treturn <ToolbarItem tool=\"arrow-left\" />\n}\n\n/** @public @react */\nexport function ArrowUpToolbarItem() {\n\treturn <ToolbarItem tool=\"arrow-up\" />\n}\n\n/** @public @react */\nexport function ArrowDownToolbarItem() {\n\treturn <ToolbarItem tool=\"arrow-down\" />\n}\n\n/** @public @react */\nexport function ArrowRightToolbarItem() {\n\treturn <ToolbarItem tool=\"arrow-right\" />\n}\n\n/** @public @react */\nexport function LineToolbarItem() {\n\treturn <ToolbarItem tool=\"line\" />\n}\n\n/** @public @react */\nexport function HighlightToolbarItem() {\n\treturn <ToolbarItem tool=\"highlight\" />\n}\n\n/** @public @react */\nexport function FrameToolbarItem() {\n\treturn <ToolbarItem tool=\"frame\" />\n}\n\n/** @public @react */\nexport function LaserToolbarItem() {\n\treturn <ToolbarItem tool=\"laser\" />\n}\n"],
"mappings": "AAOE,mBACC,KADD;AAPF,SAAS,kBAAkB,WAAW,gBAAgB;AACtD,SAAuB,gBAAgB;AACvC,SAAS,4BAA4B;AAG9B,SAAS,wBAAwB;AACvC,SACC,iCACC;AAAA,wBAAC,qBAAkB;AAAA,IACnB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,qBAAkB;AAAA,IACnB,oBAAC,oBAAiB;AAAA,IAClB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,oBAAiB;AAAA,IAElB,oBAAC,wBAAqB;AAAA,IACtB,oBAAC,sBAAmB;AAAA,IACpB,oBAAC,uBAAoB;AAAA,IACrB,oBAAC,sBAAmB;AAAA,IAEpB,oBAAC,sBAAmB;AAAA,IACpB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,sBAAmB;AAAA,IACpB,oBAAC,mBAAgB;AAAA,IAEjB,oBAAC,oBAAiB;AAAA,IAClB,oBAAC,oBAAiB;AAAA,IAClB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,uBAAoB;AAAA,IAErB,oBAAC,wBAAqB;AAAA,IACtB,oBAAC,sBAAmB;AAAA,IACpB,oBAAC,wBAAqB;AAAA,IACtB,oBAAC,yBAAsB;AAAA,IAEvB,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,wBAAqB;AAAA,IACtB,oBAAC,oBAAiB;AAAA,IAClB,oBAAC,oBAAiB;AAAA,KACnB;AAEF;AAGO,SAAS,kBAAkB,MAAgC;AACjE,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,MAAM,MAAM;AACxB,SAAO;AAAA,IACN;AAAA,IACA,MAAM;AACL,UAAI,CAAC,KAAM,QAAO;AAClB,YAAM,eAAe,OAAO,iBAAiB;AAC7C,UAAI,iBAAiB,OAAO;AAC3B,eAAO,QAAQ,OAAO,gBAAgB,EAAE,gBAAgB,gBAAgB;AAAA,MACzE,OAAO;AACN,eAAO,iBAAiB,KAAK;AAAA,MAC9B;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM,IAAI,GAAG;AAAA,EACvB;AACD;AAQO,SAAS,YAAY,EAAE,KAAK,GAAqB;AACvD,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,kBAAkB,MAAM,IAAI,CAAC;AAChD,SAAO,oBAAC,wBAAqB,QAAQ,MAAM,YAAwB;AACpE;AAGO,SAAS,oBAAoB;AACnC,SAAO,oBAAC,eAAY,MAAK,UAAS;AACnC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,oBAAoB;AACnC,SAAO,oBAAC,eAAY,MAAK,UAAS;AACnC;AAGO,SAAS,mBAAmB;AAClC,SAAO,oBAAC,eAAY,MAAK,SAAQ;AAClC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,mBAAmB;AAClC,SAAO,oBAAC,wBAAqB,QAAO,SAAQ;AAC7C;AAGO,SAAS,uBAAuB;AACtC,SAAO,oBAAC,eAAY,MAAK,aAAY;AACtC;AAGO,SAAS,qBAAqB;AACpC,SAAO,oBAAC,eAAY,MAAK,WAAU;AACpC;AAGO,SAAS,qBAAqB;AACpC,SAAO,oBAAC,eAAY,MAAK,WAAU;AACpC;AAGO,SAAS,sBAAsB;AACrC,SAAO,oBAAC,eAAY,MAAK,YAAW;AACrC;AAGO,SAAS,uBAAuB;AACtC,SAAO,oBAAC,eAAY,MAAK,aAAY;AACtC;AAGO,SAAS,qBAAqB;AACpC,SAAO,oBAAC,eAAY,MAAK,WAAU;AACpC;AAGO,SAAS,sBAAsB;AACrC,SAAO,oBAAC,eAAY,MAAK,YAAW;AACrC;AAGO,SAAS,mBAAmB;AAClC,SAAO,oBAAC,eAAY,MAAK,SAAQ;AAClC;AAGO,SAAS,qBAAqB;AACpC,SAAO,oBAAC,eAAY,MAAK,WAAU;AACpC;AAGO,SAAS,mBAAmB;AAClC,SAAO,oBAAC,eAAY,MAAK,SAAQ;AAClC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,SAAQ;AAClC;AAGO,SAAS,sBAAsB;AACrC,SAAO,oBAAC,eAAY,MAAK,aAAY;AACtC;AAGO,SAAS,uBAAuB;AACtC,SAAO,oBAAC,eAAY,MAAK,cAAa;AACvC;AAGO,SAAS,qBAAqB;AACpC,SAAO,oBAAC,eAAY,MAAK,YAAW;AACrC;AAGO,SAAS,uBAAuB;AACtC,SAAO,oBAAC,eAAY,MAAK,cAAa;AACvC;AAGO,SAAS,wBAAwB;AACvC,SAAO,oBAAC,eAAY,MAAK,eAAc;AACxC;AAGO,SAAS,kBAAkB;AACjC,SAAO,oBAAC,eAAY,MAAK,QAAO;AACjC;AAGO,SAAS,uBAAuB;AACtC,SAAO,oBAAC,eAAY,MAAK,aAAY;AACtC;AAGO,SAAS,mBAAmB;AAClC,SAAO,oBAAC,eAAY,MAAK,SAAQ;AAClC;AAGO,SAAS,mBAAmB;AAClC,SAAO,oBAAC,eAAY,MAAK,SAAQ;AAClC;",
"names": []
}