From 791e4d35b17ec2fcb85f9711daeafda451b8cab7 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 16 Nov 2024 10:42:05 +0100 Subject: [PATCH 1/5] fix infinite loop --- .../thumb-pages/components/thumb-page.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index eb853117..43dd7eee 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -33,33 +33,33 @@ export const ThumbPage: React.FunctionComponent = props => { const divRef = useRef(null); const [key, setKey] = React.useState(0); - React.useEffect(() => { + const handleResize = () => { const newCanvaSize = { width: divRef.current?.clientWidth || 1, height: divRef.current?.clientHeight || 1, }; - window.addEventListener('resize', () => { - setCanvasSize({ - width: divRef.current?.clientWidth || 1, - height: divRef.current?.clientHeight || 1, - }); - }); - setCanvasSize(newCanvaSize); setFinalScale(calculateScaleBasedOnBounds(shapes, newCanvaSize)); setKey(key => key + 1); + }; + + React.useLayoutEffect(() => { + handleResize(); + }, []); + + React.useEffect(() => { + handleResize(); + }, [shapes]); + + React.useEffect(() => { + window.addEventListener('resize', handleResize); return () => { - window.removeEventListener('resize', () => { - setCanvasSize({ - width: divRef.current?.clientWidth || 1, - height: divRef.current?.clientHeight || 1, - }); - }); + window.removeEventListener('resize', handleResize); }; - }, [divRef.current, shapes]); + }, [divRef.current]); const { showContextMenu, From 69f17eef227a9d43566eaf305621182b51eb7278 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 16 Nov 2024 10:48:28 +0100 Subject: [PATCH 2/5] final fix --- .../thumb-pages/components/thumb-page.tsx | 9 +++++- src/pods/thumb-pages/thumb-pages.pod.tsx | 8 ++++- src/scenes/main.scene.tsx | 30 +++++++++++++++++-- 3 files changed, 43 insertions(+), 4 deletions(-) diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index 43dd7eee..88488695 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -13,12 +13,14 @@ import React from 'react'; interface Props { pageIndex: number; + isVisible: boolean; onSetActivePage: (pageId: string) => void; setPageTitleBeingEdited: (index: number) => void; } export const ThumbPage: React.FunctionComponent = props => { - const { pageIndex, onSetActivePage, setPageTitleBeingEdited } = props; + const { pageIndex, onSetActivePage, setPageTitleBeingEdited, isVisible } = + props; const { fullDocument } = useCanvasContext(); const page = fullDocument.pages[pageIndex]; const shapes = page.shapes; @@ -49,6 +51,11 @@ export const ThumbPage: React.FunctionComponent = props => { handleResize(); }, []); + React.useEffect(() => { + if (!isVisible) return; + handleResize(); + }, [isVisible]); + React.useEffect(() => { handleResize(); }, [shapes]); diff --git a/src/pods/thumb-pages/thumb-pages.pod.tsx b/src/pods/thumb-pages/thumb-pages.pod.tsx index 40c7cc5b..cf5a596f 100644 --- a/src/pods/thumb-pages/thumb-pages.pod.tsx +++ b/src/pods/thumb-pages/thumb-pages.pod.tsx @@ -4,7 +4,12 @@ import { useCanvasContext } from '@/core/providers'; import { PageTitleInlineEdit, ThumbPage } from './components'; import { PlusIcon } from '@/common/components/icons'; -export const ThumbPagesPod: React.FC = () => { +interface Props { + isVisible: boolean; +} + +export const ThumbPagesPod: React.FC = props => { + const { isVisible } = props; const { fullDocument, addNewPage, setActivePage, getActivePage } = useCanvasContext(); const [pageTitleBeingEdited, setPageTitleBeingEdited] = React.useState< @@ -34,6 +39,7 @@ export const ThumbPagesPod: React.FC = () => { pageIndex={index} onSetActivePage={handleSetActivePage} setPageTitleBeingEdited={setPageTitleBeingEdited} + isVisible={isVisible} /> {pageTitleBeingEdited === index ? ( { + const [isThumbPagesPodOpen, setIsThumbPagesPodOpen] = useState(false); + const thumbPagesPodRef = useRef(null); + + useEffect(() => { + const handleToggle = () => { + setIsThumbPagesPodOpen(thumbPagesPodRef.current?.open ?? false); + }; + + const detailsElement = thumbPagesPodRef.current; + if (detailsElement) { + detailsElement.addEventListener('toggle', handleToggle); + } + + // Cleanup event listener on component unmount + return () => { + if (detailsElement) { + detailsElement.removeEventListener('toggle', handleToggle); + } + }; + }, []); + return (
-
+
Pages - +
Devices From 6e40eee0a8f03ac2a1ef1eed75cedc57d3cd901c Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 16 Nov 2024 10:51:42 +0100 Subject: [PATCH 3/5] refactor --- .../accordion-section-visibility.hook.ts | 29 +++++++++++++++++++ src/scenes/main.scene.tsx | 24 ++------------- 2 files changed, 32 insertions(+), 21 deletions(-) create mode 100644 src/scenes/accordion-section-visibility.hook.ts diff --git a/src/scenes/accordion-section-visibility.hook.ts b/src/scenes/accordion-section-visibility.hook.ts new file mode 100644 index 00000000..b38b10d9 --- /dev/null +++ b/src/scenes/accordion-section-visibility.hook.ts @@ -0,0 +1,29 @@ +import { useEffect, useRef, useState } from 'react'; + +export const useAccordionSectionVisibility = () => { + const [isThumbPagesPodOpen, setIsThumbPagesPodOpen] = useState(false); + const thumbPagesPodRef = useRef(null); + + useEffect(() => { + const handleToggle = () => { + setIsThumbPagesPodOpen(thumbPagesPodRef.current?.open ?? false); + }; + + const detailsElement = thumbPagesPodRef.current; + if (detailsElement) { + detailsElement.addEventListener('toggle', handleToggle); + } + + // Cleanup event listener on component unmount + return () => { + if (detailsElement) { + detailsElement.removeEventListener('toggle', handleToggle); + } + }; + }, []); + + return { + thumbPagesPodRef, + isThumbPagesPodOpen, + }; +}; diff --git a/src/scenes/main.scene.tsx b/src/scenes/main.scene.tsx index 5b6f4af9..c25929b3 100644 --- a/src/scenes/main.scene.tsx +++ b/src/scenes/main.scene.tsx @@ -13,29 +13,11 @@ import { import { PropertiesPod } from '@/pods/properties'; import { FooterPod } from '@/pods/footer/footer.pod'; import { ThumbPagesPod } from '@/pods/thumb-pages'; -import { useEffect, useRef, useState } from 'react'; +import { useAccordionSectionVisibility } from './accordion-section-visibility.hook'; export const MainScene = () => { - const [isThumbPagesPodOpen, setIsThumbPagesPodOpen] = useState(false); - const thumbPagesPodRef = useRef(null); - - useEffect(() => { - const handleToggle = () => { - setIsThumbPagesPodOpen(thumbPagesPodRef.current?.open ?? false); - }; - - const detailsElement = thumbPagesPodRef.current; - if (detailsElement) { - detailsElement.addEventListener('toggle', handleToggle); - } - - // Cleanup event listener on component unmount - return () => { - if (detailsElement) { - detailsElement.removeEventListener('toggle', handleToggle); - } - }; - }, []); + const { isThumbPagesPodOpen, thumbPagesPodRef } = + useAccordionSectionVisibility(); return ( From bed1935130c917f8083cfe063002fcf5b660c5b4 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 16 Nov 2024 11:20:54 +0100 Subject: [PATCH 4/5] thumbpage --- .../thumb-pages/components/thumb-page.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index 88488695..7417a0fa 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -35,7 +35,7 @@ export const ThumbPage: React.FunctionComponent = props => { const divRef = useRef(null); const [key, setKey] = React.useState(0); - const handleResize = () => { + const handleResizeAndForceRedraw = () => { const newCanvaSize = { width: divRef.current?.clientWidth || 1, height: divRef.current?.clientHeight || 1, @@ -43,28 +43,29 @@ export const ThumbPage: React.FunctionComponent = props => { setCanvasSize(newCanvaSize); setFinalScale(calculateScaleBasedOnBounds(shapes, newCanvaSize)); - - setKey(key => key + 1); + setTimeout(() => { + setKey(key => key + 1); + }, 100); }; React.useLayoutEffect(() => { - handleResize(); + handleResizeAndForceRedraw(); }, []); React.useEffect(() => { if (!isVisible) return; - handleResize(); + handleResizeAndForceRedraw(); }, [isVisible]); React.useEffect(() => { - handleResize(); - }, [shapes]); + handleResizeAndForceRedraw(); + }, [shapes, fullDocument]); React.useEffect(() => { - window.addEventListener('resize', handleResize); + window.addEventListener('resize', handleResizeAndForceRedraw); return () => { - window.removeEventListener('resize', handleResize); + window.removeEventListener('resize', handleResizeAndForceRedraw); }; }, [divRef.current]); From a13061df4a746c388322008897feee884eda1dd7 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 16 Nov 2024 11:40:56 +0100 Subject: [PATCH 5/5] fix --- src/core/providers/canvas/canvas.model.ts | 1 + src/core/providers/canvas/canvas.provider.tsx | 1 + src/pods/thumb-pages/components/thumb-page.tsx | 8 +++++--- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index b623b656..645736dc 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -101,6 +101,7 @@ export interface CanvasContextModel { setActivePage: (pageId: string) => void; deletePage: (pageIndex: number) => void; editPageTitle: (pageIndex: number, newName: string) => void; + activePageIndex: number; 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 2d3ba3a4..fef9d809 100644 --- a/src/core/providers/canvas/canvas.provider.tsx +++ b/src/core/providers/canvas/canvas.provider.tsx @@ -307,6 +307,7 @@ export const CanvasProvider: React.FC = props => { setActivePage, deletePage, editPageTitle, + activePageIndex: document.activePageIndex, isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible, }} diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx index 7417a0fa..49496d52 100644 --- a/src/pods/thumb-pages/components/thumb-page.tsx +++ b/src/pods/thumb-pages/components/thumb-page.tsx @@ -21,7 +21,7 @@ interface Props { export const ThumbPage: React.FunctionComponent = props => { const { pageIndex, onSetActivePage, setPageTitleBeingEdited, isVisible } = props; - const { fullDocument } = useCanvasContext(); + const { fullDocument, activePageIndex } = useCanvasContext(); const page = fullDocument.pages[pageIndex]; const shapes = page.shapes; const fakeShapeRefs = useRef({}); @@ -58,8 +58,10 @@ export const ThumbPage: React.FunctionComponent = props => { }, [isVisible]); React.useEffect(() => { - handleResizeAndForceRedraw(); - }, [shapes, fullDocument]); + setTimeout(() => { + handleResizeAndForceRedraw(); + }, 100); + }, [shapes, activePageIndex]); React.useEffect(() => { window.addEventListener('resize', handleResizeAndForceRedraw);