move stats from layerui to app component

src/components/App.tsx

@@ -288,6 +288,7 @@ import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import { actionCreateContainerFromText } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
+import { Stats } from "./Stats";
 
 const deviceContextInitialValue = {
   isSmScreen: false,
@@ -647,6 +648,17 @@ class App extends React.Component<AppProps, AppState> {
                         actionManager={this.actionManager}
                       />
                     )}
+                    {this.state.showStats && (
+                      <Stats
+                        appState={this.state}
+                        setAppState={this.setState}
+                        scene={this.scene}
+                        onClose={() => {
+                          this.actionManager.executeAction(actionToggleStats);
+                        }}
+                        renderCustomStats={renderCustomStats}
+                      />
+                    )}
                     <main>{this.renderCanvas()}</main>
                   </ExcalidrawActionManagerContext.Provider>
                 </ExcalidrawElementsContext.Provider>{" "}

src/components/LayerUI.tsx

@@ -35,8 +35,6 @@ import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
 import { useDevice } from "../components/App";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
@@ -438,17 +436,6 @@ const LayerUI = ({
               showExitZenModeBtn={showExitZenModeBtn}
               renderWelcomeScreen={renderWelcomeScreen}
             />
-            {appState.showStats && (
-              <Stats
-                appState={appState}
-                setAppState={setAppState}
-                elements={elements}
-                onClose={() => {
-                  actionManager.executeAction(actionToggleStats);
-                }}
-                renderCustomStats={renderCustomStats}
-              />
-            )}
             {appState.scrolledOutside && (
               <button
                 className="scroll-back-to-content"

src/components/MobileMenu.tsx

@@ -15,8 +15,6 @@ import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "./context/tunnels";
@@ -155,17 +153,6 @@ export const MobileMenu = ({
     <>
       {renderSidebars()}
       {!appState.viewModeEnabled && renderToolbar()}
-      {!appState.openMenu && appState.showStats && (
-        <Stats
-          appState={appState}
-          setAppState={setAppState}
-          elements={elements}
-          onClose={() => {
-            actionManager.executeAction(actionToggleStats);
-          }}
-          renderCustomStats={renderCustomStats}
-        />
-      )}
       <div
         className="App-bottom-bar"
         style={{

src/components/Stats.tsx

@@ -1,27 +1,28 @@
 import React from "react";
 import { getCommonBounds } from "../element/bounds";
 import { mutateElement } from "../element/mutateElement";
-import {
+import { ExcalidrawElement } from "../element/types";
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "../element/types";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getTargetElements } from "../scene";
+import Scene from "../scene/Scene";
 import { AppState, ExcalidrawProps } from "../types";
 import { CloseIcon } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
 
-export const Stats = (props: {
+interface StatsProps {
   appState: AppState;
+  scene: Scene;
   setAppState: React.Component<any, AppState>["setState"];
-  elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];
-}) => {
+}
-  const boundingBox = getCommonBounds(props.elements);
+
-  const selectedElements = getTargetElements(props.elements, props.appState);
+export const Stats = (props: StatsProps) => {
+  const elements = props.scene.getNonDeletedElements();
+  const boundingBox = getCommonBounds(elements);
+  const selectedElements = getTargetElements(elements, props.appState);
   const selectedBoundingBox = getCommonBounds(selectedElements);
 
   const stats =
@@ -75,7 +76,7 @@ export const Stats = (props: {
               </tr>
               <tr>
                 <td>{t("stats.elements")}</td>
-                <td>{props.elements.length}</td>
+                <td>{elements.length}</td>
               </tr>
               <tr>
                 <td>{t("stats.width")}</td>
@@ -89,7 +90,7 @@ export const Stats = (props: {
                   {Math.round(boundingBox[3]) - Math.round(boundingBox[1])}
                 </td>
               </tr>
-              {props.renderCustomStats?.(props.elements, props.appState)}
+              {props.renderCustomStats?.(elements, props.appState)}
             </tbody>
           </table>
         </div>
@@ -127,6 +128,7 @@ export const Stats = (props: {
                     </div>
                     <input
                       id={statsItem.label}
+                      key={statsItem.value}
                       defaultValue={statsItem.value}
                       className="color-picker-input"
                       style={{