Remove resize event listener

src/App.tsx

@@ -158,7 +158,7 @@ export function App() {
     tool,
   ])
 
-  const forceRedrawScene = useCallback(() => {
+  function forceRedrawScene() {
     // ! This is a hack
     // To redraw scene, we need to trigger useLayoutEffect().
     // ... But, there are different useLayoutEffect() living in this component and in <CanvasForSelection/>.
@@ -168,12 +168,10 @@ export function App() {
       if (prev !== 'selection') return 'selection'
       else return 'hand'
     })
-  }, [])
+  }
 
   // * --------------- Reusable renderProps ---------------
-  const { canvasSize, recalculateCanvasSize } = useCanvasSize({
-    forceRedrawScene,
-  })
+  const { canvasSize, recalculateCanvasSize } = useCanvasSize()
 
   function renderCanvas({
     onPointerDown,
@@ -317,7 +315,7 @@ export function App() {
             <li>You can also find this button at the bottom of the screen.</li>
             <li>
               While drawing, you may need to click this button to re-adjust the screen if the
-              pointer position is inaccurate.
+              pointer position is inaccurate, or you resize the browser window.
             </li>
           </ul>
         </div>

src/useCanvasSize.ts

@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState } from 'react'
 
-export function useCanvasSize({ forceRedrawScene }: { forceRedrawScene: () => void }) {
+export function useCanvasSize() {
   const [canvasSize, setCanvasSize] = useState({
     // Why not window.innerWidth ? https://github.com/pobch/react-diagram/pull/35
     width: document.documentElement.clientWidth,
@@ -11,33 +11,12 @@ export function useCanvasSize({ forceRedrawScene }: { forceRedrawScene: () => vo
     height: Math.min(document.documentElement.clientHeight, window.innerHeight),
   })
 
-  const recalculateCanvasSize = useCallback(() => {
+  function recalculateCanvasSize() {
     setCanvasSize({
       width: document.documentElement.clientWidth,
       height: Math.min(document.documentElement.clientHeight, window.innerHeight),
     })
-  }, [])
-
-  useEffect(() => {
-    function resizeCanvasAndRedraw() {
-      const el = document.activeElement
-      if (
-        el?.tagName === 'TEXTAREA' ||
-        (el?.tagName === 'INPUT' && el.getAttribute('type') === 'text')
-      ) {
-        // Android triggers `resize` when a virtual keyboard shows up
-        // We want to ignore this case
-        return
-      }
-      recalculateCanvasSize()
-      forceRedrawScene()
-    }
-    window.addEventListener('resize', resizeCanvasAndRedraw)
-
-    return () => {
-      window.removeEventListener('resize', resizeCanvasAndRedraw)
-    }
-  }, [forceRedrawScene, recalculateCanvasSize])
+  }
 
   return { canvasSize, recalculateCanvasSize }
 }