PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: export menu accessibility (#1121)

Browse source 
* Move export submenu(Edit -> File)

* Add export menu to context menu with no selection

* Add export shortcuts
This commit is contained in:
Jang Min 2023-02-03 01:14:39 +09:00 committed by GitHub
parent e02a5cb62e
commit d38f5a037b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/tldraw/src/components/ContextMenu/ContextMenu.tsx
View file

@ -280,6 +280,29 @@ const InnerMenu = React.memo(function InnerMenu() {
<CMRowButton onClick={handleRedo} kbd="#⇧Z" id="TD-ContextMenu-Redo">
<FormattedMessage id="redo" />
</CMRowButton>
<ContextMenuSubMenu
label={`${intl.formatMessage({ id: 'export.as' })}...`}
size="small"
id="TD-ContextMenu-Export"
>
<CMRowButton onClick={handleExportSVG} id="TD-ContextMenu-Export-SVG">
SVG
</CMRowButton>
<CMRowButton onClick={handleExportPNG} id="TD-ContextMenu-Export-PNG">
PNG
</CMRowButton>
<CMRowButton onClick={handleExportJPG} id="TD-ContextMenu-Export-JPG">
JPG
</CMRowButton>
<CMRowButton onClick={handleExportWEBP} id="TD-ContextMenu-Export-WEBP">
WEBP
</CMRowButton>
{isDebugMode && (
<CMRowButton onClick={handleExportJSON} id="TD-ContextMenu-Export-JSON">
JSON
</CMRowButton>
)}
</ContextMenuSubMenu>
</>
)}
</>

42
packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
View file

@ -161,6 +161,27 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
...
</DMItem>
)}
<DMSubMenu
label={`${intl.formatMessage({ id: 'export.as' })}...`}
size="small"
id="TD-MenuItem-Export"
>
<DMItem onClick={handleExportSVG} id="TD-MenuItem-Export-SVG">
SVG
</DMItem>
<DMItem onClick={handleExportPNG} id="TD-MenuItem-Export-PNG">
PNG
</DMItem>
<DMItem onClick={handleExportJPG} id="TD-MenuItem-Export-JPG">
JPG
</DMItem>
<DMItem onClick={handleExportWEBP} id="TD-MenuItem-Export-WEBP">
WEBP
</DMItem>
<DMItem onClick={handleExportJSON} id="TD-MenuItem-Export-JSON">
JSON
</DMItem>
</DMSubMenu>
{!disableAssets && (
<>
<Divider />
@ -233,27 +254,6 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
JSON
</DMItem>
</DMSubMenu>
<DMSubMenu
label={`${intl.formatMessage({ id: 'export.as' })}...`}
size="small"
id="TD-MenuItem-Export"
>
<DMItem onClick={handleExportSVG} id="TD-MenuItem-Export-SVG">
SVG
</DMItem>
<DMItem onClick={handleExportPNG} id="TD-MenuItem-Export-PNG">
PNG
</DMItem>
<DMItem onClick={handleExportJPG} id="TD-MenuItem-Export-JPG">
JPG
</DMItem>
<DMItem onClick={handleExportWEBP} id="TD-MenuItem-Export-WEBP">
WEBP
</DMItem>
<DMItem onClick={handleExportJSON} id="TD-MenuItem-Export-JSON">
JSON
</DMItem>
</DMSubMenu>
<Divider />
<DMItem

54
packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'
import { useHotkeys } from 'react-hotkeys-hook'
import { useFileSystemHandlers, useTldrawApp } from '~hooks'
import { AlignStyle, TDShapeType } from '~types'
import { AlignStyle, TDExportType, TDShapeType } from '~types'
export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
const app = useTldrawApp()
@ -227,6 +227,58 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
undefined,
[app]
)
useHotkeys(
'ctrl+alt+1,⌘+alt+1',
(e) => {
if (!canHandleEvent()) return
app.exportImage(TDExportType.SVG, { scale: 2, quality: 1 })
},
undefined,
[app]
)
useHotkeys(
'ctrl+alt+2,⌘+alt+2',
(e) => {
if (!canHandleEvent()) return
app.exportImage(TDExportType.PNG, { scale: 2, quality: 1 })
},
undefined,
[app]
)
useHotkeys(
'ctrl+alt+3,⌘+alt+3',
(e) => {
if (!canHandleEvent()) return
app.exportImage(TDExportType.JPG, { scale: 2, quality: 1 })
},
undefined,
[app]
)
useHotkeys(
'ctrl+alt+4,⌘+alt+4',
(e) => {
if (!canHandleEvent()) return
app.exportImage(TDExportType.WEBP, { scale: 2, quality: 1 })
},
undefined,
[app]
)
useHotkeys(
'ctrl+alt+5,⌘+alt+5',
(e) => {
if (!canHandleEvent()) return
app.exportJson()
},
undefined,
[app]
)
useHotkeys(
'ctrl+o,⌘+o',
(e) => {