diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 983c94c8d3c5..6f44832af443 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -1294,7 +1294,9 @@ export type TldrawProps = TldrawEditorBaseProps & ({ sessionId?: string; defaultName?: string; snapshot?: StoreSnapshot; -}) & TldrawUiProps & Partial; +}) & TldrawUiProps & Partial & { + showTools?: string[]; +}; // @public (undocumented) export const TldrawScribble: TLScribbleComponent; @@ -1332,7 +1334,9 @@ export interface TldrawUiContextProviderProps { } // @public -export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps; +export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps & { + showTools?: string[]; +}; // @public (undocumented) export interface TLUiActionItem { diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index e475c144673a..6e864df8111f 100644 --- a/packages/tldraw/api/api.json +++ b/packages/tldraw/api/api.json @@ -14435,7 +14435,7 @@ }, { "kind": "Content", - "text": ">" + "text": "> & {\n showTools?: string[];\n}" }, { "kind": "Content", @@ -14976,6 +14976,10 @@ "text": "TldrawUiContextProviderProps", "canonicalReference": "@bigbluebutton/tldraw!TldrawUiContextProviderProps:interface" }, + { + "kind": "Content", + "text": " & {\n showTools?: string[];\n}" + }, { "kind": "Content", "text": ";" @@ -14986,7 +14990,7 @@ "name": "TldrawUiProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 4 + "endIndex": 5 } }, { diff --git a/packages/tldraw/src/lib/Tldraw.tsx b/packages/tldraw/src/lib/Tldraw.tsx index b3d90247194e..12e83efcdff5 100644 --- a/packages/tldraw/src/lib/Tldraw.tsx +++ b/packages/tldraw/src/lib/Tldraw.tsx @@ -53,7 +53,12 @@ export type TldrawProps = TldrawEditorBaseProps & } ) & TldrawUiProps & - Partial + Partial & { + /** + * List of allowed shapes that should be visible in the toolbar + */ + showTools?: string[] + } /** @public */ export function Tldraw(props: TldrawProps) { @@ -64,6 +69,7 @@ export function Tldraw(props: TldrawProps) { acceptedImageMimeTypes, acceptedVideoMimeTypes, onMount, + showTools, ...rest } = props @@ -104,7 +110,7 @@ export function Tldraw(props: TldrawProps) { return ( - + diff --git a/packages/tldraw/src/lib/ui/TldrawUi.tsx b/packages/tldraw/src/lib/ui/TldrawUi.tsx index acbec4648c2e..95d1bc6a9bfd 100644 --- a/packages/tldraw/src/lib/ui/TldrawUi.tsx +++ b/packages/tldraw/src/lib/ui/TldrawUi.tsx @@ -29,7 +29,13 @@ import { useTranslation } from './hooks/useTranslation/useTranslation' * * @public */ -export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps +export type TldrawUiProps = TldrawUiBaseProps & + TldrawUiContextProviderProps & { + /** + * Restrict which shapes/tools appear in the UI toolbar. + */ + showTools?: string[] + } /** * Base props for the {@link @bigbluebutton/tldraw#Tldraw} and {@link TldrawUi} components. @@ -76,6 +82,7 @@ export const TldrawUi = React.memo(function TldrawUi({ renderDebugMenuItems, children, hideUi, + showTools, ...rest }: TldrawUiProps) { return ( @@ -85,6 +92,7 @@ export const TldrawUi = React.memo(function TldrawUi({ shareZone={shareZone} topZone={topZone} renderDebugMenuItems={renderDebugMenuItems} + showTools={showTools} > {children} @@ -97,6 +105,7 @@ type TldrawUiContentProps = { shareZone?: ReactNode topZone?: ReactNode renderDebugMenuItems?: () => React.ReactNode + showTools?: string[] } const TldrawUiInner = React.memo(function TldrawUiInner({ @@ -120,6 +129,7 @@ const TldrawUiContent = React.memo(function TldrawUI({ shareZone, topZone, renderDebugMenuItems, + showTools, }: TldrawUiContentProps) { const editor = useEditor() const msg = useTranslation() @@ -178,7 +188,7 @@ const TldrawUiContent = React.memo(function TldrawUI({
- + {breakpoint >= 4 && }
{isDebugMode && } diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx index 3cc9c72ffeab..66f524c3162c 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx @@ -14,7 +14,7 @@ import { kbdStr } from '../primitives/shared' import { ToggleToolLockedButton } from './ToggleToolLockedButton' /** @public */ -export const Toolbar = memo(function Toolbar() { +export const Toolbar = memo(function Toolbar({ showTools }: { showTools?: string[] }) { const editor = useEditor() const msg = useTranslation() const breakpoint = useBreakpoint() @@ -22,7 +22,13 @@ export const Toolbar = memo(function Toolbar() { const rMostRecentlyActiveDropdownItem = React.useRef(undefined) const isReadonly = useReadonly() - const toolbarItems = useToolbarSchema() + const rawToolbarItems = useToolbarSchema() + const toolbarItems = React.useMemo(() => { + if (!showTools || showTools.length === 0) return rawToolbarItems + + return rawToolbarItems.filter((item) => showTools.includes(item.id)) + }, [rawToolbarItems, showTools]) + const laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser') const activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])