Merge pull request #539 from Lemoncode/feature/fix-thumb-infinite-loop

Feature/fix thumb infinite loop

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<boolean>

src/core/providers/canvas/canvas.provider.tsx

@@ -307,6 +307,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         setActivePage,
         deletePage,
         editPageTitle,
+        activePageIndex: document.activePageIndex,
         isThumbnailContextMenuVisible,
         setIsThumbnailContextMenuVisible,
       }}

src/pods/thumb-pages/components/thumb-page.tsx

@@ -13,13 +13,15 @@ import React from 'react';
 
 interface Props {
   pageIndex: number;
+  isVisible: boolean;
   onSetActivePage: (pageId: string) => void;
   setPageTitleBeingEdited: (index: number) => void;
 }
 
 export const ThumbPage: React.FunctionComponent<Props> = props => {
-  const { pageIndex, onSetActivePage, setPageTitleBeingEdited } = props;
-  const { fullDocument } = useCanvasContext();
+  const { pageIndex, onSetActivePage, setPageTitleBeingEdited, isVisible } =
+    props;
+  const { fullDocument, activePageIndex } = useCanvasContext();
   const page = fullDocument.pages[pageIndex];
   const shapes = page.shapes;
   const fakeShapeRefs = useRef<ShapeRefs>({});
@@ -33,33 +35,41 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
   const divRef = useRef<HTMLDivElement>(null);
   const [key, setKey] = React.useState(0);
 
-  React.useEffect(() => {
+  const handleResizeAndForceRedraw = () => {
     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));
+    setTimeout(() => {
+      setKey(key => key + 1);
+    }, 100);
+  };
+
+  React.useLayoutEffect(() => {
+    handleResizeAndForceRedraw();
+  }, []);
+
+  React.useEffect(() => {
+    if (!isVisible) return;
+    handleResizeAndForceRedraw();
+  }, [isVisible]);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      handleResizeAndForceRedraw();
+    }, 100);
+  }, [shapes, activePageIndex]);
 
-    setKey(key => key + 1);
+  React.useEffect(() => {
+    window.addEventListener('resize', handleResizeAndForceRedraw);
 
     return () => {
-      window.removeEventListener('resize', () => {
-        setCanvasSize({
-          width: divRef.current?.clientWidth || 1,
-          height: divRef.current?.clientHeight || 1,
-        });
-      });
+      window.removeEventListener('resize', handleResizeAndForceRedraw);
     };
-  }, [divRef.current, shapes]);
+  }, [divRef.current]);
 
   const {
     showContextMenu,

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> = 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 ? (
               <PageTitleInlineEdit

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<HTMLDetailsElement>(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,
+  };
+};

src/scenes/main.scene.tsx

@@ -13,15 +13,23 @@ import {
 import { PropertiesPod } from '@/pods/properties';
 import { FooterPod } from '@/pods/footer/footer.pod';
 import { ThumbPagesPod } from '@/pods/thumb-pages';
+import { useAccordionSectionVisibility } from './accordion-section-visibility.hook';
 
 export const MainScene = () => {
+  const { isThumbPagesPodOpen, thumbPagesPodRef } =
+    useAccordionSectionVisibility();
+
   return (
     <MainLayout>
       <ToolbarPod />
       <div className={classes.leftTools}>
-        <details className={classes.container} name="toolsLeft">
+        <details
+          className={classes.container}
+          name="toolsLeft"
+          ref={thumbPagesPodRef}
+        >
           <summary className={classes.title}>Pages</summary>
-          <ThumbPagesPod />
+          <ThumbPagesPod isVisible={isThumbPagesPodOpen} />
         </details>
         <details className={classes.container} name="toolsLeft">
           <summary className={classes.title}>Devices</summary>