scroll the closest element to center (#1670)

Co-authored-by: Sanghyeon Lee <yongdamsh@gmail.com>

src/components/App.tsx

@@ -847,6 +847,8 @@ class App extends React.Component<any, AppState> {
               remoteElements.filter((element: { isDeleted: boolean }) => {
                 return !element.isDeleted;
               }),
+              this.state,
+              this.canvas,
             ),
           });
         }

src/components/LayerUI.tsx

@@ -256,7 +256,9 @@ const LayerUI = ({
         <button
           className="scroll-back-to-content"
           onClick={() => {
-            setAppState({ ...calculateScrollCenter(elements) });
+            setAppState({
+              ...calculateScrollCenter(elements, appState, canvas),
+            });
           }}
         >
           {t("buttons.scrollBackToContent")}
@@ -276,6 +278,7 @@ const LayerUI = ({
       onRoomCreate={onRoomCreate}
       onRoomDestroy={onRoomDestroy}
       onLockToggle={onLockToggle}
+      canvas={canvas}
     />
   ) : (
     <div className="layer-ui__wrapper">

src/components/MobileMenu.tsx

@@ -27,6 +27,7 @@ type MobileMenuProps = {
   onUsernameChange: (username: string) => void;
   onRoomDestroy: () => void;
   onLockToggle: () => void;
+  canvas: HTMLCanvasElement | null;
 };
 
 export const MobileMenu = ({
@@ -39,6 +40,7 @@ export const MobileMenu = ({
   onUsernameChange,
   onRoomDestroy,
   onLockToggle,
+  canvas,
 }: MobileMenuProps) => (
   <>
     {appState.isLoading && <LoadingMessage />}
@@ -131,7 +133,9 @@ export const MobileMenu = ({
             <button
               className="scroll-back-to-content"
               onClick={() => {
-                setAppState({ ...calculateScrollCenter(elements) });
+                setAppState({
+                  ...calculateScrollCenter(elements, appState, canvas),
+                });
               }}
             >
               {t("buttons.scrollBackToContent")}