kopia lustrzana https://github.com/Tldraw/Tldraw
105 wiersze
3.0 KiB
TypeScript
105 wiersze
3.0 KiB
TypeScript
import * as _ContextMenu from '@radix-ui/react-context-menu'
|
|
import { PageRecordType, TLPageId, track, useContainer, useEditor } from '@tldraw/editor'
|
|
import { useToasts } from '../hooks/useToastsProvider'
|
|
import { useTranslation } from '../hooks/useTranslation/useTranslation'
|
|
import { Button } from './primitives/Button'
|
|
|
|
export const MoveToPageMenu = track(function MoveToPageMenu() {
|
|
const editor = useEditor()
|
|
const container = useContainer()
|
|
const pages = editor.getPages()
|
|
const currentPageId = editor.getCurrentPageId()
|
|
const msg = useTranslation()
|
|
const { addToast } = useToasts()
|
|
|
|
return (
|
|
<_ContextMenu.Sub>
|
|
<_ContextMenu.SubTrigger dir="ltr" asChild>
|
|
<Button
|
|
type="menu"
|
|
label="context-menu.move-to-page"
|
|
data-testid="menu-item.move-to-page"
|
|
icon="chevron-right"
|
|
/>
|
|
</_ContextMenu.SubTrigger>
|
|
<_ContextMenu.Portal container={container}>
|
|
<_ContextMenu.SubContent className="tlui-menu" sideOffset={-4} collisionPadding={4}>
|
|
<_ContextMenu.Group
|
|
dir="ltr"
|
|
className={'tlui-menu__group'}
|
|
data-testid={`menu-item.pages`}
|
|
key="pages"
|
|
>
|
|
{pages.map((page) => (
|
|
<_ContextMenu.Item
|
|
key={page.id}
|
|
disabled={currentPageId === page.id}
|
|
onSelect={() => {
|
|
editor.mark('move_shapes_to_page')
|
|
editor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)
|
|
|
|
const toPage = editor.getPage(page.id)
|
|
|
|
if (toPage) {
|
|
addToast({
|
|
title: 'Changed Page',
|
|
description: `Moved to ${toPage.name}.`,
|
|
actions: [
|
|
{
|
|
label: 'Go Back',
|
|
type: 'primary',
|
|
onClick: () => {
|
|
editor.mark('change-page')
|
|
editor.setCurrentPage(currentPageId)
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
}}
|
|
asChild
|
|
>
|
|
<Button
|
|
type="menu"
|
|
title={page.name}
|
|
className="tlui-context-menu__move-to-page__name"
|
|
>
|
|
<span className="tlui-button__label">{page.name}</span>
|
|
</Button>
|
|
</_ContextMenu.Item>
|
|
))}
|
|
</_ContextMenu.Group>
|
|
<_ContextMenu.Group
|
|
dir="ltr"
|
|
className={'tlui-menu__group'}
|
|
data-testid={`menu-item.new-page`}
|
|
key="new-page"
|
|
>
|
|
<_ContextMenu.Item
|
|
key="new-page"
|
|
onSelect={() => {
|
|
const newPageId = PageRecordType.createId()
|
|
const ids = editor.getSelectedShapeIds()
|
|
editor.batch(() => {
|
|
editor.mark('move_shapes_to_page')
|
|
editor.createPage({ name: 'Page', id: newPageId })
|
|
editor.moveShapesToPage(ids, newPageId)
|
|
})
|
|
}}
|
|
asChild
|
|
>
|
|
<Button
|
|
type="menu"
|
|
title={msg('context.pages.new-page')}
|
|
className="tlui-context-menu__move-to-page__name"
|
|
>
|
|
<span className="tlui-button__label">{msg('context.pages.new-page')}</span>
|
|
</Button>
|
|
</_ContextMenu.Item>
|
|
</_ContextMenu.Group>
|
|
</_ContextMenu.SubContent>
|
|
</_ContextMenu.Portal>
|
|
</_ContextMenu.Sub>
|
|
)
|
|
})
|