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

Update PageMenu.tsx

Browse source
This commit is contained in:
Steve Ruiz 2022-06-29 19:06:56 +01:00
parent 80ed0bf27b
commit d27e7dc249
1 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/tldraw/src/components/TopPanel/PageMenu/PageMenu.tsx
View file

@ -83,7 +83,7 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
const handleDragStart = React.useCallback((ev: React.DragEvent<HTMLDivElement>) => {
setDragId(ev.currentTarget.id)
setDropIndex(sortedPages.findIndex((p) => p.id === ev.currentTarget.id))
ev.dataTransfer.effectAllowed = 'move'
}, [])
@ -91,16 +91,12 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
(ev: React.DragEvent<HTMLDivElement>) => {
ev.preventDefault()
const dropBox = sortedPages.find((p) => p.id === ev.currentTarget.id)
if (!dropBox) return
const indices = sortedPages.map((p) => p.childIndex ?? 0).sort()
const index = indices.indexOf(dropBox.childIndex ?? 0)
let dropIndex = sortedPages.findIndex((p) => p.id === ev.currentTarget.id)
const rect = ev.currentTarget.getBoundingClientRect()
const ny = (ev.clientY - rect.top) / rect.height
const dropIndex = ny < 0.5 ? index : index + 1
dropIndex = ny < 0.5 ? dropIndex : dropIndex + 1
setDropIndex(dropIndex)
},
@ -109,6 +105,7 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
const handleDrop = React.useCallback(() => {
if (dragId !== null && dropIndex !== null) {
console.log('moving page', app.document.pages[dragId].name, dropIndex)
app.movePage(dragId, dropIndex)
}
@ -138,7 +135,9 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
draggable={true}
>
<PageButton>
<span id={page.id}>{page.name || 'Page'}</span>
<span id={page.id}>
{page.name || 'Page'} - {page.childIndex}
</span>
<DropdownMenu.ItemIndicator>
<SmallIcon>
<CheckIcon />