From aef2025f2a5f6d7d76b8647ad562d16fe8c3fbaf Mon Sep 17 00:00:00 2001 From: oleojake Date: Sun, 10 Nov 2024 18:32:57 +0100 Subject: [PATCH 1/6] #501 first approximation --- src/core/providers/canvas/canvas.model.ts | 1 + src/core/providers/canvas/canvas.provider.tsx | 15 ++++ src/pods/canvas/use-monitor-shape.hook.ts | 56 +++++++------- .../thumb-pages/components/thumb-page.tsx | 75 ++++++++++++++++++- 4 files changed, 118 insertions(+), 29 deletions(-) diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index 0337290d..8dbcd422 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -100,6 +100,7 @@ export interface CanvasContextModel { setActivePage: (pageId: string) => void; deletePage: (pageIndex: number) => void; editPageTitle: (pageIndex: number, newName: string) => void; + swapPages: (id1: string, id2: string) => void; isThumbnailContextMenuVisible: boolean; setIsThumbnailContextMenuVisible: React.Dispatch< React.SetStateAction diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx index 8e27e500..2ac9deef 100644 --- a/src/core/providers/canvas/canvas.provider.tsx +++ b/src/core/providers/canvas/canvas.provider.tsx @@ -116,6 +116,20 @@ export const CanvasProvider: React.FC = props => { ); }; + const swapPages = (id1: string, id2: string) => { + setDocument(lastDocument => + produce(lastDocument, draft => { + const index1 = draft.pages.findIndex(page => page.id === id1); + const index2 = draft.pages.findIndex(page => page.id === id2); + if (index1 !== -1 && index2 !== -1) { + const temp = draft.pages[index1]; + draft.pages[index1] = draft.pages[index2]; + draft.pages[index2] = temp; + } + }) + ); + }; + const pasteShapes = (shapes: ShapeModel[]) => { const newShapes: ShapeModel[] = shapes.map(shape => { shape.id = uuidv4(); @@ -299,6 +313,7 @@ export const CanvasProvider: React.FC = props => { setActivePage, deletePage, editPageTitle, + swapPages, isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible, }} diff --git a/src/pods/canvas/use-monitor-shape.hook.ts b/src/pods/canvas/use-monitor-shape.hook.ts index d9229b88..1f0b6db2 100644 --- a/src/pods/canvas/use-monitor-shape.hook.ts +++ b/src/pods/canvas/use-monitor-shape.hook.ts @@ -24,38 +24,40 @@ export const useMonitorShape = ( if (!destination) return; invariant(destination); - const type = source.data.type as ShapeType; + if (source.data.type !== 'thumbPage') { + const type = source.data.type as ShapeType; - const screenPosition = - extractScreenCoordinatesFromPragmaticLocation(location); + const screenPosition = + extractScreenCoordinatesFromPragmaticLocation(location); - let positionX = 0; - let positionY = 0; - if (screenPosition) { - invariant(dropRef.current); - const { x: divRelativeX, y: divRelativeY } = - portScreenPositionToDivCoordinates( - dropRef.current as HTMLDivElement, - screenPosition - ); + let positionX = 0; + let positionY = 0; + if (screenPosition) { + invariant(dropRef.current); + const { x: divRelativeX, y: divRelativeY } = + portScreenPositionToDivCoordinates( + dropRef.current as HTMLDivElement, + screenPosition + ); - invariant(stageRef.current); - const stage = stageRef.current; - const { scrollLeft, scrollTop } = getScrollFromDiv( - dropRef as unknown as React.MutableRefObject - ); - const konvaCoord = convertFromDivElementCoordsToKonvaCoords(stage, { - screenPosition, - relativeDivPosition: { x: divRelativeX, y: divRelativeY }, - scroll: { x: scrollLeft, y: scrollTop }, - }); + invariant(stageRef.current); + const stage = stageRef.current; + const { scrollLeft, scrollTop } = getScrollFromDiv( + dropRef as unknown as React.MutableRefObject + ); + const konvaCoord = convertFromDivElementCoordsToKonvaCoords(stage, { + screenPosition, + relativeDivPosition: { x: divRelativeX, y: divRelativeY }, + scroll: { x: scrollLeft, y: scrollTop }, + }); - positionX = - konvaCoord.x - - calculateShapeOffsetToXDropCoordinate(konvaCoord.x, type); - positionY = konvaCoord.y; + positionX = + konvaCoord.x - + calculateShapeOffsetToXDropCoordinate(konvaCoord.x, type); + positionY = konvaCoord.y; + } + addNewShape(type, positionX, positionY); } - addNewShape(type, positionX, positionY); }, }); }, []); diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index 3e0c916a..dbcf9253 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -3,12 +3,18 @@ import { useCanvasContext } from '@/core/providers'; import { renderShapeComponent } from '@/pods/canvas/shape-renderer'; import { calculateCanvasBounds } from '@/pods/toolbar/components/export-button/export-button.utils'; import { KonvaEventObject } from 'konva/lib/Node'; -import { createRef, useRef } from 'react'; +import { createRef, useRef, useEffect, useState } from 'react'; import { Layer, Stage } from 'react-konva'; import { ThumbPageContextMenu } from './context-menu'; import { useContextMenu } from '../use-context-menu-thumb.hook'; import { CaretDown } from '@/common/components/icons'; import classes from './thumb-page.module.css'; +import { + draggable, + dropTargetForElements, + monitorForElements, +} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; +import invariant from 'tiny-invariant'; interface Props { pageIndex: number; @@ -18,7 +24,7 @@ interface Props { export const ThumbPage: React.FunctionComponent = props => { const { pageIndex, onSetActivePage, setPageTitleBeingEdited } = props; - const { fullDocument } = useCanvasContext(); + const { fullDocument, swapPages } = useCanvasContext(); const page = fullDocument.pages[pageIndex]; const shapes = page.shapes; const fakeShapeRefs = useRef({}); @@ -39,12 +45,77 @@ export const ThumbPage: React.FunctionComponent = props => { handleShowContextMenu, } = useContextMenu(); + const ref = useRef(null); + const [dragging, setDragging] = useState(false); + const [isDraggedOver, setIsDraggedOver] = useState(false); + + useEffect(() => { + const el = ref.current; + invariant(el); + return draggable({ + element: el, + getInitialData: () => ({ + pageIndex: fullDocument.pages[pageIndex].id, + type: 'thumbPage', + }), + onDragStart: () => setDragging(true), + onDrop: () => setDragging(false), + }); + }, [pageIndex, fullDocument.pages]); + + useEffect(() => { + const el = ref.current; + invariant(el); + + return dropTargetForElements({ + element: el, + getData: () => ({ + pageIndex: fullDocument.pages[pageIndex].id, + type: 'thumbPage', + }), + onDragEnter: () => setIsDraggedOver(true), + onDragLeave: () => setIsDraggedOver(false), + onDrop: () => setIsDraggedOver(false), + }); + }, [pageIndex, fullDocument.pages]); + + useEffect(() => { + return monitorForElements({ + onDrop({ source, location }) { + const destination = location.current.dropTargets[0]; + if (!destination) { + return; + } + if (destination.data.type === 'thumbPage') { + console.log( + 'Swapping pages:', + source.data.pageIndex, + destination.data.pageIndex + ); + swapPages( + String(source.data.pageIndex), + String(destination.data.pageIndex) + ); + } + }, + }); + }, [swapPages, fullDocument.pages]); + + useEffect(() => { + console.log('Updated pages:', fullDocument.pages); + }, [fullDocument.pages]); + return ( <>
onSetActivePage(page.id)} onContextMenu={handleShowContextMenu} + ref={ref} + style={{ + opacity: dragging ? 0.4 : 1, + background: isDraggedOver ? 'lightblue' : 'white', + }} > From 2583dffef7f7fb01c9ac6dcea0b2fe87e41cf3b5 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sun, 17 Nov 2024 09:47:17 +0100 Subject: [PATCH 2/6] fix drag --- src/pods/thumb-pages/components/thumb-page.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index ea001750..72b94253 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -96,10 +96,13 @@ export const ThumbPage: React.FunctionComponent = props => { pageIndex: fullDocument.pages[pageIndex].id, type: 'thumbPage', }), - onDragStart: () => setDragging(true), + onDragStart: () => { + console.log('Dragging page:', pageIndex); + setDragging(true); + }, onDrop: () => setDragging(false), }); - }, [pageIndex, fullDocument.pages]); + }, [divRef.current, pageIndex, fullDocument.pages]); useEffect(() => { const el = divRef.current; @@ -137,7 +140,7 @@ export const ThumbPage: React.FunctionComponent = props => { } }, }); - }, [swapPages, fullDocument.pages]); + }, [divRef.current, swapPages, fullDocument.pages]); useEffect(() => { console.log('Updated pages:', fullDocument.pages); From 38fef45120e9e63d2b04613630e6bdbe007c8424 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sun, 17 Nov 2024 10:36:13 +0100 Subject: [PATCH 3/6] basics working --- src/pods/thumb-pages/components/thumb-page.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index 72b94253..f8195f31 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -93,11 +93,11 @@ export const ThumbPage: React.FunctionComponent = props => { return draggable({ element: el, getInitialData: () => ({ - pageIndex: fullDocument.pages[pageIndex].id, + pageId: page.id, //fullDocument.pages[pageIndex].id, type: 'thumbPage', }), onDragStart: () => { - console.log('Dragging page:', pageIndex); + console.log('Dragging page:', page.id); setDragging(true); }, onDrop: () => setDragging(false), @@ -111,14 +111,14 @@ export const ThumbPage: React.FunctionComponent = props => { return dropTargetForElements({ element: el, getData: () => ({ - pageIndex: fullDocument.pages[pageIndex].id, + pageId: page.id, //fullDocument.pages[pageIndex].id, type: 'thumbPage', }), onDragEnter: () => setIsDraggedOver(true), onDragLeave: () => setIsDraggedOver(false), onDrop: () => setIsDraggedOver(false), }); - }, [pageIndex, fullDocument.pages]); + }, [divRef.current, pageIndex, fullDocument.pages]); useEffect(() => { return monitorForElements({ @@ -130,12 +130,12 @@ export const ThumbPage: React.FunctionComponent = props => { if (destination.data.type === 'thumbPage') { console.log( 'Swapping pages:', - source.data.pageIndex, - destination.data.pageIndex + source.data.pageId, + destination.data.pageId ); swapPages( - String(source.data.pageIndex), - String(destination.data.pageIndex) + String(source.data.pageId), + String(destination.data.pageId) ); } }, From fa8a4319d6ab9c931b5a3c61dcf0acf1bb363efb Mon Sep 17 00:00:00 2001 From: Braulio Date: Sun, 17 Nov 2024 12:55:30 +0100 Subject: [PATCH 4/6] encapsulate hook dar drop thumb --- .../components/drag-drop-thumb.hook.ts | 78 +++++++++++++++++++ .../thumb-pages/components/thumb-page.tsx | 76 ++---------------- 2 files changed, 84 insertions(+), 70 deletions(-) create mode 100644 src/pods/thumb-pages/components/drag-drop-thumb.hook.ts diff --git a/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts b/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts new file mode 100644 index 00000000..1fd649a3 --- /dev/null +++ b/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts @@ -0,0 +1,78 @@ +import { useCanvasContext } from '@/core/providers'; +import { + draggable, + dropTargetForElements, + monitorForElements, +} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; +import { useEffect, useState } from 'react'; +import invariant from 'tiny-invariant'; + +export const useDragDropThumb = ( + divRef: React.RefObject, + pageIndex: number +) => { + const { fullDocument, swapPages } = useCanvasContext(); + const page = fullDocument.pages[pageIndex]; + const [dragging, setDragging] = useState(false); + const [isDraggedOver, setIsDraggedOver] = useState(false); + + useEffect(() => { + const el = divRef.current; + invariant(el); + return draggable({ + element: el, + getInitialData: () => ({ + pageId: page.id, //fullDocument.pages[pageIndex].id, + type: 'thumbPage', + }), + onDragStart: () => { + console.log('Dragging page:', page.id); + setDragging(true); + }, + onDrop: () => setDragging(false), + }); + }, [divRef.current, pageIndex, fullDocument.pages]); + + useEffect(() => { + const el = divRef.current; + invariant(el); + + return dropTargetForElements({ + element: el, + getData: () => ({ + pageId: page.id, //fullDocument.pages[pageIndex].id, + type: 'thumbPage', + }), + onDragEnter: () => setIsDraggedOver(true), + onDragLeave: () => setIsDraggedOver(false), + onDrop: () => setIsDraggedOver(false), + }); + }, [divRef.current, pageIndex, fullDocument.pages]); + + useEffect(() => { + return monitorForElements({ + onDrop({ source, location }) { + const destination = location.current.dropTargets[0]; + if (!destination) { + return; + } + if (destination.data.type === 'thumbPage') { + console.log( + 'Swapping pages:', + source.data.pageId, + destination.data.pageId + ); + swapPages( + String(source.data.pageId), + String(destination.data.pageId) + ); + } + }, + }); + }, [divRef.current, swapPages, fullDocument.pages]); + + return { + dragging, + isDraggedOver, + }; +}; diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index f8195f31..76a86f78 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -2,20 +2,16 @@ import { ShapeRefs, Size } from '@/core/model'; import { useCanvasContext } from '@/core/providers'; import { renderShapeComponent } from '@/pods/canvas/shape-renderer'; import { KonvaEventObject } from 'konva/lib/Node'; -import { createRef, useRef, useEffect, useState } from 'react'; +import { createRef, useRef, useEffect } from 'react'; import { Layer, Stage } from 'react-konva'; import { calculateScaleBasedOnBounds } from './thumb-page.business'; import { ThumbPageContextMenu } from './context-menu'; import { useContextMenu } from '../use-context-menu-thumb.hook'; import { CaretDown } from '@/common/components/icons'; import classes from './thumb-page.module.css'; -import { - draggable, - dropTargetForElements, - monitorForElements, -} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; -import invariant from 'tiny-invariant'; + import React from 'react'; +import { useDragDropThumb } from './drag-drop-thumb.hook'; interface Props { pageIndex: number; @@ -25,7 +21,7 @@ interface Props { } export const ThumbPage: React.FunctionComponent = props => { - const { fullDocument, swapPages, activePageIndex } = useCanvasContext(); + const { fullDocument, activePageIndex } = useCanvasContext(); const { pageIndex, onSetActivePage, setPageTitleBeingEdited, isVisible } = props; const page = fullDocument.pages[pageIndex]; @@ -41,6 +37,8 @@ export const ThumbPage: React.FunctionComponent = props => { const divRef = useRef(null); const [key, setKey] = React.useState(0); + const { dragging, isDraggedOver } = useDragDropThumb(divRef, pageIndex); + const handleResizeAndForceRedraw = () => { const newCanvaSize = { width: divRef.current?.clientWidth || 1, @@ -84,68 +82,6 @@ export const ThumbPage: React.FunctionComponent = props => { handleShowContextMenu, } = useContextMenu(); - const [dragging, setDragging] = useState(false); - const [isDraggedOver, setIsDraggedOver] = useState(false); - - useEffect(() => { - const el = divRef.current; - invariant(el); - return draggable({ - element: el, - getInitialData: () => ({ - pageId: page.id, //fullDocument.pages[pageIndex].id, - type: 'thumbPage', - }), - onDragStart: () => { - console.log('Dragging page:', page.id); - setDragging(true); - }, - onDrop: () => setDragging(false), - }); - }, [divRef.current, pageIndex, fullDocument.pages]); - - useEffect(() => { - const el = divRef.current; - invariant(el); - - return dropTargetForElements({ - element: el, - getData: () => ({ - pageId: page.id, //fullDocument.pages[pageIndex].id, - type: 'thumbPage', - }), - onDragEnter: () => setIsDraggedOver(true), - onDragLeave: () => setIsDraggedOver(false), - onDrop: () => setIsDraggedOver(false), - }); - }, [divRef.current, pageIndex, fullDocument.pages]); - - useEffect(() => { - return monitorForElements({ - onDrop({ source, location }) { - const destination = location.current.dropTargets[0]; - if (!destination) { - return; - } - if (destination.data.type === 'thumbPage') { - console.log( - 'Swapping pages:', - source.data.pageId, - destination.data.pageId - ); - swapPages( - String(source.data.pageId), - String(destination.data.pageId) - ); - } - }, - }); - }, [divRef.current, swapPages, fullDocument.pages]); - - useEffect(() => { - console.log('Updated pages:', fullDocument.pages); - }, [fullDocument.pages]); - return ( <>
Date: Sun, 17 Nov 2024 12:55:40 +0100 Subject: [PATCH 5/6] update --- src/pods/thumb-pages/components/thumb-page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index 76a86f78..507cc037 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -2,7 +2,7 @@ import { ShapeRefs, Size } from '@/core/model'; import { useCanvasContext } from '@/core/providers'; import { renderShapeComponent } from '@/pods/canvas/shape-renderer'; import { KonvaEventObject } from 'konva/lib/Node'; -import { createRef, useRef, useEffect } from 'react'; +import { createRef, useRef } from 'react'; import { Layer, Stage } from 'react-konva'; import { calculateScaleBasedOnBounds } from './thumb-page.business'; import { ThumbPageContextMenu } from './context-menu'; From f3ed72d4a6ad1077d71a5189e9bac9d89015e0e7 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sun, 17 Nov 2024 17:49:51 +0100 Subject: [PATCH 6/6] fix drag drop thumb --- .../use-multiple-selection-shape.hook.tsx | 1 - .../context-menu/context-menu.component.tsx | 1 - .../components/drag-drop-thumb.hook.ts | 32 ++++--------------- .../thumb-pages/monitor-drop-thumb.hook.ts | 25 +++++++++++++++ src/pods/thumb-pages/thumb-pages.pod.tsx | 3 ++ 5 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 src/pods/thumb-pages/monitor-drop-thumb.hook.ts diff --git a/src/pods/canvas/use-multiple-selection-shape.hook.tsx b/src/pods/canvas/use-multiple-selection-shape.hook.tsx index 698c265c..006a415b 100644 --- a/src/pods/canvas/use-multiple-selection-shape.hook.tsx +++ b/src/pods/canvas/use-multiple-selection-shape.hook.tsx @@ -91,7 +91,6 @@ export const useMultipleSelectionShapeHook = ( e: KonvaEventObject | KonvaEventObject ) => { const transformerRect = transformerRef.current?.getClientRect(); - console.log(transformerRect); const mousePosition = e.target?.getStage()?.getPointerPosition() ?? { x: 0, y: 0, diff --git a/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx b/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx index 8b5a474e..62d8e73c 100644 --- a/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx +++ b/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx @@ -42,7 +42,6 @@ export const ThumbPageContextMenu: React.FunctionComponent< duplicatePage(pageIndex); break; case ContextButtonType.Rename: - console.log('Rename'); setPageTitleBeingEdited(pageIndex); break; case ContextButtonType.Delete: diff --git a/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts b/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts index 1fd649a3..530b8149 100644 --- a/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts +++ b/src/pods/thumb-pages/components/drag-drop-thumb.hook.ts @@ -2,7 +2,6 @@ import { useCanvasContext } from '@/core/providers'; import { draggable, dropTargetForElements, - monitorForElements, } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; import { useEffect, useState } from 'react'; import invariant from 'tiny-invariant'; @@ -11,11 +10,12 @@ export const useDragDropThumb = ( divRef: React.RefObject, pageIndex: number ) => { - const { fullDocument, swapPages } = useCanvasContext(); + const { fullDocument } = useCanvasContext(); const page = fullDocument.pages[pageIndex]; const [dragging, setDragging] = useState(false); const [isDraggedOver, setIsDraggedOver] = useState(false); + // Drag useEffect(() => { const el = divRef.current; invariant(el); @@ -26,13 +26,13 @@ export const useDragDropThumb = ( type: 'thumbPage', }), onDragStart: () => { - console.log('Dragging page:', page.id); setDragging(true); }, onDrop: () => setDragging(false), }); }, [divRef.current, pageIndex, fullDocument.pages]); + // Drop useEffect(() => { const el = divRef.current; invariant(el); @@ -45,31 +45,11 @@ export const useDragDropThumb = ( }), onDragEnter: () => setIsDraggedOver(true), onDragLeave: () => setIsDraggedOver(false), - onDrop: () => setIsDraggedOver(false), - }); - }, [divRef.current, pageIndex, fullDocument.pages]); - - useEffect(() => { - return monitorForElements({ - onDrop({ source, location }) { - const destination = location.current.dropTargets[0]; - if (!destination) { - return; - } - if (destination.data.type === 'thumbPage') { - console.log( - 'Swapping pages:', - source.data.pageId, - destination.data.pageId - ); - swapPages( - String(source.data.pageId), - String(destination.data.pageId) - ); - } + onDrop: () => { + setIsDraggedOver(false); }, }); - }, [divRef.current, swapPages, fullDocument.pages]); + }, [divRef.current, pageIndex, fullDocument.pages]); return { dragging, diff --git a/src/pods/thumb-pages/monitor-drop-thumb.hook.ts b/src/pods/thumb-pages/monitor-drop-thumb.hook.ts new file mode 100644 index 00000000..c2d8e151 --- /dev/null +++ b/src/pods/thumb-pages/monitor-drop-thumb.hook.ts @@ -0,0 +1,25 @@ +import { useEffect } from 'react'; +import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; +import { useCanvasContext } from '@/core/providers'; + +export const useMonitorDropThumb = () => { + const { fullDocument, swapPages } = useCanvasContext(); + + // Monitor + useEffect(() => { + return monitorForElements({ + onDrop({ source, location }) { + const destination = location.current.dropTargets[0]; + if (!destination || source.data.pageId === destination.data.pageId) { + return; + } + if (destination.data.type === 'thumbPage') { + swapPages( + String(source.data.pageId), + String(destination.data.pageId) + ); + } + }, + }); + }, [fullDocument.pages]); +}; diff --git a/src/pods/thumb-pages/thumb-pages.pod.tsx b/src/pods/thumb-pages/thumb-pages.pod.tsx index cf5a596f..30de47c4 100644 --- a/src/pods/thumb-pages/thumb-pages.pod.tsx +++ b/src/pods/thumb-pages/thumb-pages.pod.tsx @@ -3,6 +3,7 @@ import classes from './thumb-pages.module.css'; import { useCanvasContext } from '@/core/providers'; import { PageTitleInlineEdit, ThumbPage } from './components'; import { PlusIcon } from '@/common/components/icons'; +import { useMonitorDropThumb } from './monitor-drop-thumb.hook'; interface Props { isVisible: boolean; @@ -24,6 +25,8 @@ export const ThumbPagesPod: React.FC = props => { setActivePage(pageId); }; + useMonitorDropThumb(); + return (
{fullDocument.pages.map((page, index) => (