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

menu: export followup with different semantics for file menu (#2968)

Browse source 
Renamed Object → Shape
Different semantics for Export under file menu. Thanks @TodePond !

### Change Type

- [x] `patch` — Bug fix
This commit is contained in:
Mime Čuvalo 2024-02-27 12:48:20 +00:00 committed by GitHub
parent 98850eb043
commit 2a8ae6188e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 161 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/dotcom/src/components/LocalEditor.tsx
View file

@ -9,8 +9,8 @@ import {
EditSubmenu,
Editor,
ExtrasGroup,
ObjectSubmenu,
PreferencesGroup,
ShapeSubmenu,
TLComponents,
Tldraw,
TldrawUiMenuGroup,
@ -49,7 +49,7 @@ const components: TLComponents = {
<DefaultMainMenu>
<LocalFileMenu />
<EditSubmenu />
<ObjectSubmenu />
<ShapeSubmenu />
<ViewSubmenu />
<ExtrasGroup />
<PreferencesGroup />

4
apps/dotcom/src/components/MultiplayerEditor.tsx
View file

@ -9,9 +9,9 @@ import {
EditSubmenu,
Editor,
ExtrasGroup,
ObjectSubmenu,
OfflineIndicator,
PreferencesGroup,
ShapeSubmenu,
TLComponents,
Tldraw,
TldrawUiMenuGroup,
@ -69,7 +69,7 @@ const components: TLComponents = {
<DefaultMainMenu>
<MultiplayerFileMenu />
<EditSubmenu />
<ObjectSubmenu />
<ShapeSubmenu />
<ViewSubmenu />
<ExtrasGroup />
<PreferencesGroup />

9
assets/translations/main.json
View file

@ -36,6 +36,12 @@
"action.export-as-png": "Export as PNG",
"action.export-as-svg.short": "SVG",
"action.export-as-svg": "Export as SVG",
"action.export-all-as-json.short": "JSON",
"action.export-all-as-json": "Export all as JSON",
"action.export-all-as-png.short": "PNG",
"action.export-all-as-png": "Export all as PNG",
"action.export-all-as-svg.short": "SVG",
"action.export-all-as-svg": "Export all as SVG",
"action.fit-frame-to-content": "Fit to content",
"action.flip-horizontal": "Flip horizontally",
"action.flip-vertical": "Flip vertically",
@ -215,7 +221,7 @@
"menu.title": "Menu",
"menu.copy-as": "Copy as",
"menu.edit": "Edit",
"menu.object": "Object",
"menu.shape": "Shape",
"menu.export-as": "Export as",
"menu.file": "File",
"menu.language": "Language",
@ -224,6 +230,7 @@
"context-menu.arrange": "Arrange",
"context-menu.copy-as": "Copy as",
"context-menu.export-as": "Export as",
"context-menu.export-all-as": "Export all as",
"context-menu.move-to-page": "Move to page",
"context-menu.reorder": "Reorder",
"page-menu.title": "Pages",

12
packages/tldraw/api-report.md
View file

File diff suppressed because one or more lines are too long

95
packages/tldraw/api/api.json
View file

File diff suppressed because one or more lines are too long

2
packages/tldraw/src/index.ts
View file

@ -185,8 +185,8 @@ export {
EditSubmenu,
ExportFileContentSubMenu,
ExtrasGroup,
ObjectSubmenu,
PreferencesGroup,
ShapeSubmenu,
ViewSubmenu,
} from './lib/ui/components/MainMenu/DefaultMainMenuContent'

18
packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx
View file

@ -37,7 +37,7 @@ export function DefaultMainMenuContent() {
return (
<>
<EditSubmenu />
<ObjectSubmenu />
<ShapeSubmenu />
<ViewSubmenu />
<ExtrasGroup />
<PreferencesGroup />
@ -50,13 +50,13 @@ export function ExportFileContentSubMenu() {
const actions = useActions()
return (
<TldrawUiMenuSubmenu id="export-as" label="context-menu.export-as" size="small">
<TldrawUiMenuGroup id="export-as-group">
<TldrawUiMenuItem {...actions['export-as-svg']} />
<TldrawUiMenuItem {...actions['export-as-png']} />
<TldrawUiMenuItem {...actions['export-as-json']} />
<TldrawUiMenuSubmenu id="export-all-as" label="context-menu.export-all-as" size="small">
<TldrawUiMenuGroup id="export-all-as-group">
<TldrawUiMenuItem {...actions['export-all-as-svg']} />
<TldrawUiMenuItem {...actions['export-all-as-png']} />
<TldrawUiMenuItem {...actions['export-all-as-json']} />
</TldrawUiMenuGroup>
<TldrawUiMenuGroup id="export-as-bg">
<TldrawUiMenuGroup id="export-all-as-bg">
<ToggleTransparentBgMenuItem />
</TldrawUiMenuGroup>
</TldrawUiMenuSubmenu>
@ -83,7 +83,7 @@ export function EditSubmenu() {
}
/** @public */
export function ObjectSubmenu() {
export function ShapeSubmenu() {
const editor = useEditor()
const selectToolActive = useValue(
@ -93,7 +93,7 @@ export function ObjectSubmenu() {
)
return (
<TldrawUiMenuSubmenu id="object" label="menu.object" disabled={!selectToolActive}>
<TldrawUiMenuSubmenu id="shape" label="menu.shape" disabled={!selectToolActive}>
<ConversionsMenuGroup />
<MultiShapeMenuGroup />
<MiscMenuGroup />

9
packages/tldraw/src/lib/ui/components/menu-items.tsx
View file

@ -234,13 +234,8 @@ export function PasteMenuItem() {
/* ------------------- Conversions ------------------ */
export function ConversionsMenuGroup() {
const editor = useEditor()
const actions = useActions()
const atLeastOneShapeOnPage = useValue(
'atLeastOneShapeOnPage',
() => editor.getCurrentPageShapeIds().size > 0,
[]
)
const shouldDisplay = useUnlockedSelectedShapesCount(1)
return (
<TldrawUiMenuGroup id="conversions">
@ -248,7 +243,7 @@ export function ConversionsMenuGroup() {
id="export-as"
label="context-menu.export-as"
size="small"
disabled={!atLeastOneShapeOnPage}
disabled={!shouldDisplay}
>
<TldrawUiMenuGroup id="export-as-group">
<TldrawUiMenuItem {...actions['export-as-svg']} />

51
packages/tldraw/src/lib/ui/context/actions.tsx
View file

@ -204,6 +204,57 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
exportAs(editor.getSelectedShapeIds(), 'json', getExportName(editor, defaultDocumentName))
},
},
{
id: 'export-all-as-svg',
label: {
default: 'action.export-all-as-svg',
menu: 'action.export-all-as-svg.short',
['context-menu']: 'action.export-all-as-svg.short',
},
readonlyOk: true,
onSelect(source) {
trackEvent('export-all-as', { format: 'svg', source })
exportAs(
Array.from(editor.getCurrentPageShapeIds()),
'svg',
getExportName(editor, defaultDocumentName)
)
},
},
{
id: 'export-all-as-png',
label: {
default: 'action.export-all-as-png',
menu: 'action.export-all-as-png.short',
['context-menu']: 'action.export-all-as-png.short',
},
readonlyOk: true,
onSelect(source) {
trackEvent('export-all-as', { format: 'png', source })
exportAs(
Array.from(editor.getCurrentPageShapeIds()),
'png',
getExportName(editor, defaultDocumentName)
)
},
},
{
id: 'export-all-as-json',
label: {
default: 'action.export-all-as-json',
menu: 'action.export-all-as-json.short',
['context-menu']: 'action.export-all-as-json.short',
},
readonlyOk: true,
onSelect(source) {
trackEvent('export-all-as', { format: 'json', source })
exportAs(
Array.from(editor.getCurrentPageShapeIds()),
'json',
getExportName(editor, defaultDocumentName)
)
},
},
{
id: 'copy-as-svg',
label: {

1
packages/tldraw/src/lib/ui/context/events.tsx
View file

@ -40,6 +40,7 @@ export interface TLUiEventMap {
'toggle-auto-size': null
'copy-as': { format: 'svg' | 'png' | 'json' }
'export-as': { format: 'svg' | 'png' | 'json' }
'export-all-as': { format: 'svg' | 'png' | 'json' }
'edit-link': null
'insert-embed': null
'insert-media': null

9
packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts
View file

@ -40,6 +40,12 @@ export type TLUiTranslationKey =
| 'action.export-as-png'
| 'action.export-as-svg.short'
| 'action.export-as-svg'
| 'action.export-all-as-json.short'
| 'action.export-all-as-json'
| 'action.export-all-as-png.short'
| 'action.export-all-as-png'
| 'action.export-all-as-svg.short'
| 'action.export-all-as-svg'
| 'action.fit-frame-to-content'
| 'action.flip-horizontal'
| 'action.flip-vertical'
@ -219,7 +225,7 @@ export type TLUiTranslationKey =
| 'menu.title'
| 'menu.copy-as'
| 'menu.edit'
| 'menu.object'
| 'menu.shape'
| 'menu.export-as'
| 'menu.file'
| 'menu.language'
@ -228,6 +234,7 @@ export type TLUiTranslationKey =
| 'context-menu.arrange'
| 'context-menu.copy-as'
| 'context-menu.export-as'
| 'context-menu.export-all-as'
| 'context-menu.move-to-page'
| 'context-menu.reorder'
| 'page-menu.title'

9
packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts
View file

@ -40,6 +40,12 @@ export const DEFAULT_TRANSLATION = {
'action.export-as-png': 'Export as PNG',
'action.export-as-svg.short': 'SVG',
'action.export-as-svg': 'Export as SVG',
'action.export-all-as-json.short': 'JSON',
'action.export-all-as-json': 'Export all as JSON',
'action.export-all-as-png.short': 'PNG',
'action.export-all-as-png': 'Export all as PNG',
'action.export-all-as-svg.short': 'SVG',
'action.export-all-as-svg': 'Export all as SVG',
'action.fit-frame-to-content': 'Fit to content',
'action.flip-horizontal': 'Flip horizontally',
'action.flip-vertical': 'Flip vertically',
@ -219,7 +225,7 @@ export const DEFAULT_TRANSLATION = {
'menu.title': 'Menu',
'menu.copy-as': 'Copy as',
'menu.edit': 'Edit',
'menu.object': 'Object',
'menu.shape': 'Shape',
'menu.export-as': 'Export as',
'menu.file': 'File',
'menu.language': 'Language',
@ -228,6 +234,7 @@ export const DEFAULT_TRANSLATION = {
'context-menu.arrange': 'Arrange',
'context-menu.copy-as': 'Copy as',
'context-menu.export-as': 'Export as',
'context-menu.export-all-as': 'Export all as',
'context-menu.move-to-page': 'Move to page',
'context-menu.reorder': 'Reorder',
'page-menu.title': 'Pages',