Skip to content

Add showTools prop to Tldraw to control visible toolbar tools #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KDSBrowne wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add showTools prop to Tldraw to control visible toolbar tools #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/tldraw/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1294,7 +1294,9 @@ export type TldrawProps = TldrawEditorBaseProps & ({
sessionId?: string;
defaultName?: string;
snapshot?: StoreSnapshot<TLRecord>;
}) & TldrawUiProps & Partial<TLExternalContentProps>;
}) & TldrawUiProps & Partial<TLExternalContentProps> & {
showTools?: string[];
};

// @public (undocumented)
export const TldrawScribble: TLScribbleComponent;
Expand Down Expand Up @@ -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<TransationKey extends string = string, IconType extends string = string> {
Expand Down
8 changes: 6 additions & 2 deletions packages/tldraw/api/api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14435,7 +14435,7 @@
},
{
"kind": "Content",
"text": ">"
"text": "> & {\n showTools?: string[];\n}"
},
{
"kind": "Content",
Expand Down Expand Up @@ -14976,6 +14976,10 @@
"text": "TldrawUiContextProviderProps",
"canonicalReference": "@bigbluebutton/tldraw!TldrawUiContextProviderProps:interface"
},
{
"kind": "Content",
"text": " & {\n showTools?: string[];\n}"
},
{
"kind": "Content",
"text": ";"
Expand All @@ -14986,7 +14990,7 @@
"name": "TldrawUiProps",
"typeTokenRange": {
"startIndex": 1,
"endIndex": 4
"endIndex": 5
}
},
{
Expand Down
10 changes: 8 additions & 2 deletions packages/tldraw/src/lib/Tldraw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@ export type TldrawProps = TldrawEditorBaseProps &
}
) &
TldrawUiProps &
Partial<TLExternalContentProps>
Partial<TLExternalContentProps> & {
/**
* List of allowed shapes that should be visible in the toolbar
*/
showTools?: string[]
}

/** @public */
export function Tldraw(props: TldrawProps) {
Expand All @@ -64,6 +69,7 @@ export function Tldraw(props: TldrawProps) {
acceptedImageMimeTypes,
acceptedVideoMimeTypes,
onMount,
showTools,
...rest
} = props

Expand Down Expand Up @@ -104,7 +110,7 @@ export function Tldraw(props: TldrawProps) {

return (
<TldrawEditor {...withDefaults}>
<TldrawUi {...withDefaults}>
<TldrawUi {...withDefaults} showTools={showTools}>
<ContextMenu>
<Canvas />
</ContextMenu>
Expand Down
14 changes: 12 additions & 2 deletions packages/tldraw/src/lib/ui/TldrawUi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -76,6 +82,7 @@ export const TldrawUi = React.memo(function TldrawUi({
renderDebugMenuItems,
children,
hideUi,
showTools,
...rest
}: TldrawUiProps) {
return (
Expand All @@ -85,6 +92,7 @@ export const TldrawUi = React.memo(function TldrawUi({
shareZone={shareZone}
topZone={topZone}
renderDebugMenuItems={renderDebugMenuItems}
showTools={showTools}
>
{children}
</TldrawUiInner>
Expand All @@ -97,6 +105,7 @@ type TldrawUiContentProps = {
shareZone?: ReactNode
topZone?: ReactNode
renderDebugMenuItems?: () => React.ReactNode
showTools?: string[]
}

const TldrawUiInner = React.memo(function TldrawUiInner({
Expand All @@ -120,6 +129,7 @@ const TldrawUiContent = React.memo(function TldrawUI({
shareZone,
topZone,
renderDebugMenuItems,
showTools,
}: TldrawUiContentProps) {
const editor = useEditor()
const msg = useTranslation()
Expand Down Expand Up @@ -178,7 +188,7 @@ const TldrawUiContent = React.memo(function TldrawUI({
<div className="tlui-layout__bottom">
<div className="tlui-layout__bottom__main">
<NavigationZone />
<Toolbar />
<Toolbar showTools={showTools} />
{breakpoint >= 4 && <HelpMenu />}
</div>
{isDebugMode && <DebugPanel renderDebugMenuItems={renderDebugMenuItems ?? null} />}
Expand Down
10 changes: 8 additions & 2 deletions packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,21 @@ 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()

const rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(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])
Expand Down
Loading