jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add all function shortcuts to contextmenu

This commit is contained in:
Jeff Emmett 2024-11-27 13:24:11 +07:00
parent 7a73870bf5
commit aa1b40dd21
1 changed files with 73 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/ui-overrides.tsx
View File

@ -365,47 +365,79 @@ export const components: TLComponents = {
return ( return (
<DefaultContextMenu {...rest}> <DefaultContextMenu {...rest}>
<DefaultContextMenuContent /> <DefaultContextMenuContent />
<TldrawUiMenuGroup id="custom-actions">
<TldrawUiMenuItem {/* Camera Controls */}
id="zoom-to-selection" <TldrawUiMenuItem
label="Zoom to Selection" id="zoom-to-selection"
icon="zoom-in" label="Zoom to Selection"
kbd="z" icon="zoom-in"
disabled={!hasSelection} kbd="z"
onSelect={() => zoomToSelection(editor)} disabled={!hasSelection}
/> onSelect={() => zoomToSelection(editor)}
<TldrawUiMenuItem />
id="copy-link-to-current-view" <TldrawUiMenuItem
label="Copy Link to Current View" id="copy-link-to-current-view"
icon="link" label="Copy Link to Current View"
kbd="s" icon="link"
onSelect={() => copyLinkToCurrentView(editor)} kbd="s"
/> onSelect={() => copyLinkToCurrentView(editor)}
<TldrawUiMenuItem />
id="revert-camera" <TldrawUiMenuItem
label="Revert Camera" id="revert-camera"
icon="undo" label="Revert Camera"
kbd="b" icon="undo"
disabled={!hasCameraHistory} kbd="b"
onSelect={() => revertCamera(editor)} disabled={!hasCameraHistory}
/> onSelect={() => revertCamera(editor)}
{isFrame && ( />
<>
<TldrawUiMenuItem {/* Shape Creation Tools */}
id="copy-frame-link" <TldrawUiMenuItem
label="Copy Frame Link" id="video-chat"
icon="link" label="Create Video Chat"
onSelect={() => copyFrameLink(editor, selectedShape.id)} icon="video"
/> kbd="v"
<TldrawUiMenuItem onSelect={() => {
id="zoom-to-frame" editor.setCurrentTool('VideoChat');
label="Zoom to Frame" }}
icon="zoom-in" />
onSelect={() => zoomToSelection(editor)} <TldrawUiMenuItem
/> id="chat-box"
</> label="Create Chat Box"
)} icon="chat"
</TldrawUiMenuGroup> kbd="c"
onSelect={() => {
editor.setCurrentTool('ChatBox');
}}
/>
<TldrawUiMenuItem
id="embed"
label="Create Embed"
icon="embed"
kbd="e"
onSelect={() => {
editor.setCurrentTool('Embed');
}}
/>
Frame-specific actions
{isFrame && (
<>
<TldrawUiMenuItem
id="copy-frame-link"
label="Copy Frame Link"
icon="link"
onSelect={() => copyFrameLink(editor, selectedShape.id)}
/>
<TldrawUiMenuItem
id="zoom-to-frame"
label="Zoom to Frame"
icon="zoom-in"
onSelect={() => zoomToSelection(editor)}
/>
</>
)}
</DefaultContextMenu> </DefaultContextMenu>
) )
}, },