diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index 0337290d..b623b656 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -97,6 +97,7 @@ export interface CanvasContextModel { fullDocument: DocumentModel; addNewPage: () => void; duplicatePage: (pageIndex: number) => void; + getActivePage: () => Page; setActivePage: (pageId: string) => void; deletePage: (pageIndex: number) => void; editPageTitle: (pageIndex: number, newName: string) => void; diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx index 8e27e500..2d3ba3a4 100644 --- a/src/core/providers/canvas/canvas.provider.tsx +++ b/src/core/providers/canvas/canvas.provider.tsx @@ -46,11 +46,13 @@ export const CanvasProvider: React.FC = props => { const addNewPage = () => { setDocument(lastDocument => produce(lastDocument, draft => { + const newActiveIndex = draft.pages.length; draft.pages.push({ id: uuidv4(), - name: `Page ${draft.pages.length + 1}`, + name: `Page ${newActiveIndex + 1}`, shapes: [], }); + draft.activePageIndex = newActiveIndex; }) ); }; @@ -71,8 +73,9 @@ export const CanvasProvider: React.FC = props => { name: `${document.pages[pageIndex].name} - copy`, shapes: newShapes, }; - draft.pages.push(newPage); - setActivePage(newPage.id); + const newIndex = draft.activePageIndex + 1; + draft.pages.splice(newIndex, 0, newPage); + draft.activePageIndex = newIndex; }) ); }; @@ -94,6 +97,10 @@ export const CanvasProvider: React.FC = props => { setActivePage(newActivePageId); }; + const getActivePage = () => { + return document.pages[document.activePageIndex]; + }; + const setActivePage = (pageId: string) => { selectionInfo.clearSelection(); selectionInfo.shapeRefs.current = {}; @@ -296,6 +303,7 @@ export const CanvasProvider: React.FC = props => { fullDocument: document, addNewPage, duplicatePage, + getActivePage, setActivePage, deletePage, editPageTitle, diff --git a/src/pods/thumb-pages/thumb-pages.pod.tsx b/src/pods/thumb-pages/thumb-pages.pod.tsx index 69261574..bd38782c 100644 --- a/src/pods/thumb-pages/thumb-pages.pod.tsx +++ b/src/pods/thumb-pages/thumb-pages.pod.tsx @@ -4,11 +4,11 @@ import { useCanvasContext } from '@/core/providers'; import { PageTitleInlineEdit, ThumbPage } from './components'; export const ThumbPagesPod: React.FC = () => { - const { fullDocument, addNewPage, setActivePage } = useCanvasContext(); + const { fullDocument, addNewPage, setActivePage, getActivePage } = + useCanvasContext(); const [pageTitleBeingEdited, setPageTitleBeingEdited] = React.useState< number | null >(null); - const [activePageId, setActivePageId] = React.useState(null); const handleAddNewPage = () => { addNewPage(); @@ -16,7 +16,6 @@ export const ThumbPagesPod: React.FC = () => { const handleSetActivePage = (pageId: string) => { setActivePage(pageId); - setActivePageId(pageId); }; return ( @@ -25,7 +24,7 @@ export const ThumbPagesPod: React.FC = () => {
{ ) : (
setPageTitleBeingEdited(index)} - className={page.id === activePageId ? classes.activeText : ''} + className={ + page.id === getActivePage().id ? classes.activeText : '' + } > {page.name}