handle bound texts

.github/workflows/test.yml

@@ -1,9 +1,6 @@
 name: Tests
 
-on:
-  pull_request:
-  push:
-    branches: master
+on: pull_request
 
 jobs:
   test:

dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx

@@ -13,7 +13,7 @@ Once the callback is triggered, you will need to store the api in state to acces
 ```jsx showLineNumbers
 export default function App() {
   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-  return <Excalidraw excalidrawAPI={(api)=> setExcalidrawAPI(api)} />;
+  return <Excalidraw excalidrawAPI={{(api)=> setExcalidrawAPI(api)}} />;
 }
 ```
 

excalidraw-app/components/AppMainMenu.tsx

@@ -34,7 +34,7 @@ export const AppMainMenu: React.FC<{
       <MainMenu.ItemLink
         icon={ExcalLogo}
         href={`${
-          import.meta.env.VITE_APP_PLUS_LP
+          import.meta.env.VITE_APP_PLUS_APP
         }/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger`}
         className=""
       >

excalidraw-app/index.scss

@@ -25,7 +25,6 @@
     margin-bottom: auto;
     margin-inline-start: auto;
     margin-inline-end: 0.6em;
-    z-index: var(--zIndex-layerUI);
 
     svg {
       width: 1.2rem;

package.json

@@ -11,7 +11,6 @@
   ],
   "dependencies": {
     "@excalidraw/random-username": "1.0.0",
-    "@imgly/background-removal": "1.5.3",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "firebase": "8.3.3",

packages/excalidraw/CHANGELOG.md

@@ -15,8 +15,6 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
-
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)
 
 - `MainMenu.DefaultItems.ToggleTheme` now supports `onSelect(theme: string)` callback, and optionally `allowSystemTheme: boolean` alongside `theme: string` to indicate you want to allow users to set to system theme (you need to handle this yourself). [#7853](https://github.com/excalidraw/excalidraw/pull/7853)

packages/excalidraw/actions/actionCanvas.tsx

@@ -104,7 +104,7 @@ export const actionClearCanvas = register({
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
         gridSize: appState.gridSize,
-        stats: appState.stats,
+        showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,
         activeTool:
           appState.activeTool.type === "image"

packages/excalidraw/actions/actionRemoveBackground.tsx

@@ -1,129 +0,0 @@
-import { generateIdFromFile, getDataURL } from "../data/blob";
-import { mutateElement } from "../element/mutateElement";
-import { isInitializedImageElement } from "../element/typeChecks";
-import type { InitializedExcalidrawImageElement } from "../element/types";
-import type { BinaryFileData } from "../types";
-import { register } from "./register";
-
-export const actionRemoveBackground = register({
-  name: "removeBackground",
-  label: "stats.fullTitle",
-  trackEvent: false,
-  viewMode: false,
-  async perform(elements, appState, type, app) {
-    const selectedElements = app.scene.getSelectedElements(appState);
-
-    if (
-      selectedElements.length > 0 &&
-      selectedElements.every(isInitializedImageElement)
-    ) {
-      const filesToProcess = selectedElements.reduce(
-        (
-          acc: Map<
-            BinaryFileData["id"],
-            {
-              file: BinaryFileData;
-              elements: InitializedExcalidrawImageElement[];
-            }
-          >,
-          imageElement,
-        ) => {
-          const file = app.files[imageElement.fileId];
-
-          if (file) {
-            const fileWithRemovedBackground = Object.values(app.files).find(
-              (_file) =>
-                _file.customData?.source === "backgroundRemoval" &&
-                _file.customData.parentFileId === file.id,
-            );
-
-            if (fileWithRemovedBackground) {
-              mutateElement(
-                imageElement,
-                { fileId: fileWithRemovedBackground.id },
-                false,
-              );
-            } else if (acc.has(file.id)) {
-              acc.get(file.id)!.elements.push(imageElement);
-            } else {
-              acc.set(file.id, { file, elements: [imageElement] });
-            }
-          }
-          return acc;
-        },
-        new Map(),
-      );
-
-      if (filesToProcess.size) {
-        const backgroundRemoval = await await import(
-          "@imgly/background-removal"
-        );
-
-        console.time("removeBackground");
-
-        for (const [, { file, elements }] of filesToProcess) {
-          const res = await backgroundRemoval.removeBackground(file.dataURL, {
-            debug: true,
-            progress: (...args) => {
-              console.log("progress", args);
-            },
-            device: type === "auto" ? undefined : type,
-            proxyToWorker: true,
-          });
-
-          const fileId = await generateIdFromFile(res);
-          const dataURL = await getDataURL(res);
-
-          for (const imageElement of elements) {
-            mutateElement(imageElement, { fileId }, false);
-          }
-
-          app.addFiles([
-            {
-              ...file,
-              id: fileId,
-              dataURL,
-              customData: {
-                source: "backgroundRemoval",
-                version: 1,
-                parentFileId: file.id,
-              },
-            },
-          ]);
-        }
-
-        console.timeEnd("removeBackground");
-      }
-
-      app.scene.triggerUpdate();
-    }
-    return false as false;
-  },
-  PanelComponent: ({ updateData }) => {
-    return (
-      <>
-        <button
-          onClick={() => {
-            updateData("auto");
-          }}
-        >
-          Remove background (auto)
-        </button>
-        <button
-          onClick={() => {
-            updateData("gpu");
-          }}
-        >
-          Remove background (gpu)
-        </button>
-        <button
-          onClick={() => {
-            updateData("cpu");
-          }}
-        >
-          Remove background (cpu)
-        </button>
-      </>
-    );
-  },
-});

packages/excalidraw/actions/actionToggleStats.tsx

@@ -5,22 +5,21 @@ import { StoreAction } from "../store";
 
 export const actionToggleStats = register({
   name: "stats",
-  label: "stats.fullTitle",
+  label: "stats.title",
   icon: abacusIcon,
   paletteName: "Toggle stats",
   viewMode: true,
   trackEvent: { category: "menu" },
-  keywords: ["edit", "attributes", "customize"],
   perform(elements, appState) {
     return {
       appState: {
         ...appState,
-        stats: { ...appState.stats, open: !this.checked!(appState) },
+        showStats: !this.checked!(appState),
       },
       storeAction: StoreAction.NONE,
     };
   },
-  checked: (appState) => appState.stats.open,
+  checked: (appState) => appState.showStats,
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.SLASH,
 });

packages/excalidraw/actions/index.ts

@@ -86,4 +86,3 @@ export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "./actionLink";
 export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
-export { actionRemoveBackground } from "./actionRemoveBackground";

packages/excalidraw/actions/types.ts

@@ -136,8 +136,7 @@ export type ActionName =
   | "wrapTextInContainer"
   | "commandPalette"
   | "autoResize"
-  | "elementStats"
-  | "removeBackground";
+  | "elementStats";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

packages/excalidraw/appState.ts

@@ -5,7 +5,6 @@ import {
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
   EXPORT_SCALES,
-  STATS_PANELS,
   THEME,
 } from "./constants";
 import type { AppState, NormalizedZoomValue } from "./types";
@@ -81,10 +80,7 @@ export const getDefaultAppState = (): Omit<
     selectedElementsAreBeingDragged: false,
     selectionElement: null,
     shouldCacheIgnoreZoom: false,
-    stats: {
-      open: false,
-      panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
-    },
+    showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
@@ -200,7 +196,7 @@ const APP_STATE_STORAGE_CONF = (<
   },
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
-  stats: { browser: true, export: false, server: false },
+  showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },

packages/excalidraw/components/Actions.tsx

@@ -25,7 +25,6 @@ import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import {
   hasBoundTextElement,
-  isInitializedImageElement,
   isLinearElement,
   isTextElement,
 } from "../element/typeChecks";
@@ -126,10 +125,6 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {targetElements.length > 0 &&
-        targetElements.every(isInitializedImageElement) && (
-          <div>{renderAction("removeBackground")}</div>
-        )}
       <div>
         {canChangeStrokeColor(appState, targetElements) &&
           renderAction("changeStrokeColor")}

packages/excalidraw/components/App.tsx

@@ -49,7 +49,6 @@ import {
 import type { PastedMixedContent } from "../clipboard";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
 import type { EXPORT_IMAGE_TYPES } from "../constants";
-import { DEFAULT_FONT_SIZE } from "../constants";
 import {
   APP_NAME,
   CURSOR_TYPE,
@@ -331,7 +330,6 @@ import {
   getContainerElement,
   getDefaultLineHeight,
   getLineHeightInPx,
-  getMinTextElementWidth,
   isMeasureTextSupported,
   isValidTextContainer,
   measureText,
@@ -436,7 +434,7 @@ import {
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 import { getVisibleSceneBounds } from "../element/bounds";
-import { isMaybeMermaidDefinition } from "../mermaid";
+import { Stats } from "./Stats";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -548,7 +546,7 @@ class App extends React.Component<AppProps, AppState> {
   public library: AppClassProperties["library"];
   public libraryItemsFromStorage: LibraryItems | undefined;
   public id: string;
-  private store: Store;
+  store: Store;
   private history: History;
   private excalidrawContainerValue: {
     container: HTMLDivElement | null;
@@ -1672,6 +1670,19 @@ class App extends React.Component<AppProps, AppState> {
                             }}
                           />
                         )}
+                        {this.state.showStats && (
+                          <Stats
+                            appState={this.state}
+                            setAppState={this.setState}
+                            scene={this.scene}
+                            onClose={() => {
+                              this.actionManager.executeAction(
+                                actionToggleStats,
+                              );
+                            }}
+                            renderCustomStats={renderCustomStats}
+                          />
+                        )}
                         <StaticCanvas
                           canvas={this.canvas}
                           rc={this.rc}
@@ -1699,7 +1710,6 @@ class App extends React.Component<AppProps, AppState> {
                           canvas={this.interactiveCanvas}
                           elementsMap={elementsMap}
                           visibleElements={visibleElements}
-                          allElementsMap={allElementsMap}
                           selectedElements={selectedElements}
                           sceneNonce={sceneNonce}
                           selectionNonce={
@@ -2135,96 +2145,95 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
-  public syncActionResult = withBatchedUpdates((actionResult: ActionResult) => {
-    if (this.unmounted || actionResult === false) {
-      return;
-    }
-
-    if (actionResult.storeAction === StoreAction.UPDATE) {
-      this.store.shouldUpdateSnapshot();
-    } else if (actionResult.storeAction === StoreAction.CAPTURE) {
-      this.store.shouldCaptureIncrement();
-    }
-
-    let didUpdate = false;
-
-    let editingElement: AppState["editingElement"] | null = null;
-    if (actionResult.elements) {
-      actionResult.elements.forEach((element) => {
-        if (
-          this.state.editingElement?.id === element.id &&
-          this.state.editingElement !== element &&
-          isNonDeletedElement(element)
-        ) {
-          editingElement = element;
-        }
-      });
-
-      this.scene.replaceAllElements(actionResult.elements);
-      didUpdate = true;
-    }
-
-    if (actionResult.files) {
-      this.files = actionResult.replaceFiles
-        ? actionResult.files
-        : { ...this.files, ...actionResult.files };
-      this.addNewImagesToImageCache();
-    }
-
-    if (actionResult.appState || editingElement || this.state.contextMenu) {
-      let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
-      let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
-      let gridSize = actionResult?.appState?.gridSize || null;
-      const theme =
-        actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
-      const name = actionResult?.appState?.name ?? this.state.name;
-      const errorMessage =
-        actionResult?.appState?.errorMessage ?? this.state.errorMessage;
-      if (typeof this.props.viewModeEnabled !== "undefined") {
-        viewModeEnabled = this.props.viewModeEnabled;
+  private syncActionResult = withBatchedUpdates(
+    (actionResult: ActionResult) => {
+      if (this.unmounted || actionResult === false) {
+        return;
       }
 
-      if (typeof this.props.zenModeEnabled !== "undefined") {
-        zenModeEnabled = this.props.zenModeEnabled;
-      }
-
-      if (typeof this.props.gridModeEnabled !== "undefined") {
-        gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
-      }
-
-      editingElement =
-        editingElement || actionResult.appState?.editingElement || null;
-
-      if (editingElement?.isDeleted) {
-        editingElement = null;
-      }
-
-      this.setState((state) => {
-        // using Object.assign instead of spread to fool TS 4.2.2+ into
-        // regarding the resulting type as not containing undefined
-        // (which the following expression will never contain)
-        return Object.assign(actionResult.appState || {}, {
-          // NOTE this will prevent opening context menu using an action
-          // or programmatically from the host, so it will need to be
-          // rewritten later
-          contextMenu: null,
-          editingElement,
-          viewModeEnabled,
-          zenModeEnabled,
-          gridSize,
-          theme,
-          name,
-          errorMessage,
+      let editingElement: AppState["editingElement"] | null = null;
+      if (actionResult.elements) {
+        actionResult.elements.forEach((element) => {
+          if (
+            this.state.editingElement?.id === element.id &&
+            this.state.editingElement !== element &&
+            isNonDeletedElement(element)
+          ) {
+            editingElement = element;
+          }
         });
-      });
 
-      didUpdate = true;
-    }
+        if (actionResult.storeAction === StoreAction.UPDATE) {
+          this.store.shouldUpdateSnapshot();
+        } else if (actionResult.storeAction === StoreAction.CAPTURE) {
+          this.store.shouldCaptureIncrement();
+        }
 
-    if (!didUpdate && actionResult.storeAction !== StoreAction.NONE) {
-      this.scene.triggerUpdate();
-    }
-  });
+        this.scene.replaceAllElements(actionResult.elements);
+      }
+
+      if (actionResult.files) {
+        this.files = actionResult.replaceFiles
+          ? actionResult.files
+          : { ...this.files, ...actionResult.files };
+        this.addNewImagesToImageCache();
+      }
+
+      if (actionResult.appState || editingElement || this.state.contextMenu) {
+        if (actionResult.storeAction === StoreAction.UPDATE) {
+          this.store.shouldUpdateSnapshot();
+        } else if (actionResult.storeAction === StoreAction.CAPTURE) {
+          this.store.shouldCaptureIncrement();
+        }
+
+        let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
+        let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
+        let gridSize = actionResult?.appState?.gridSize || null;
+        const theme =
+          actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
+        const name = actionResult?.appState?.name ?? this.state.name;
+        const errorMessage =
+          actionResult?.appState?.errorMessage ?? this.state.errorMessage;
+        if (typeof this.props.viewModeEnabled !== "undefined") {
+          viewModeEnabled = this.props.viewModeEnabled;
+        }
+
+        if (typeof this.props.zenModeEnabled !== "undefined") {
+          zenModeEnabled = this.props.zenModeEnabled;
+        }
+
+        if (typeof this.props.gridModeEnabled !== "undefined") {
+          gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
+        }
+
+        editingElement =
+          editingElement || actionResult.appState?.editingElement || null;
+
+        if (editingElement?.isDeleted) {
+          editingElement = null;
+        }
+
+        this.setState((state) => {
+          // using Object.assign instead of spread to fool TS 4.2.2+ into
+          // regarding the resulting type as not containing undefined
+          // (which the following expression will never contain)
+          return Object.assign(actionResult.appState || {}, {
+            // NOTE this will prevent opening context menu using an action
+            // or programmatically from the host, so it will need to be
+            // rewritten later
+            contextMenu: null,
+            editingElement,
+            viewModeEnabled,
+            zenModeEnabled,
+            gridSize,
+            theme,
+            name,
+            errorMessage,
+          });
+        });
+      }
+    },
+  );
 
   // Lifecycle
 
@@ -2291,11 +2300,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     let initialData = null;
     try {
-      if (typeof this.props.initialData === "function") {
-        initialData = (await this.props.initialData()) || null;
-      } else {
-        initialData = (await this.props.initialData) || null;
-      }
+      initialData = (await this.props.initialData) || null;
       if (initialData?.libraryItems) {
         this.library
           .updateLibrary({
@@ -3057,33 +3062,6 @@ class App extends React.Component<AppProps, AppState> {
           retainSeed: isPlainPaste,
         });
       } else if (data.text) {
-        if (data.text && isMaybeMermaidDefinition(data.text)) {
-          const api = await import("@excalidraw/mermaid-to-excalidraw");
-
-          try {
-            const { elements: skeletonElements, files } =
-              await api.parseMermaidToExcalidraw(data.text, {
-                fontSize: DEFAULT_FONT_SIZE,
-              });
-
-            const elements = convertToExcalidrawElements(skeletonElements, {
-              regenerateIds: true,
-            });
-
-            this.addElementsFromPasteOrLibrary({
-              elements,
-              files,
-              position: "cursor",
-            });
-
-            return;
-          } catch (err: any) {
-            console.warn(
-              `parsing pasted text as mermaid definition failed: ${err.message}`,
-            );
-          }
-        }
-
         const nonEmptyLines = normalizeEOL(data.text)
           .split(/\n+/)
           .map((s) => s.trim())
@@ -4455,11 +4433,6 @@ class App extends React.Component<AppProps, AppState> {
       element,
       excalidrawContainer: this.excalidrawContainerRef.current,
       app: this,
-      // when text is selected, it's hard (at least on iOS) to re-position the
-      // caret (i.e. deselect). There's not much use for always selecting
-      // the text on edit anyway (and users can select-all from contextmenu
-      // if needed)
-      autoSelect: !this.device.isTouchScreen,
     });
     // deselect all other elements when inserting text
     this.deselectElements();
@@ -4759,7 +4732,6 @@ class App extends React.Component<AppProps, AppState> {
     sceneY,
     insertAtParentCenter = true,
     container,
-    autoEdit = true,
   }: {
     /** X position to insert text at */
     sceneX: number;
@@ -4768,7 +4740,6 @@ class App extends React.Component<AppProps, AppState> {
     /** whether to attempt to insert at element center if applicable */
     insertAtParentCenter?: boolean;
     container?: ExcalidrawTextContainer | null;
-    autoEdit?: boolean;
   }) => {
     let shouldBindToContainer = false;
 
@@ -4901,16 +4872,13 @@ class App extends React.Component<AppProps, AppState> {
       }
     }
 
-    if (autoEdit || existingTextElement || container) {
-      this.handleTextWysiwyg(element, {
-        isExistingElement: !!existingTextElement,
-      });
-    } else {
-      this.setState({
-        draggingElement: element,
-        multiElement: null,
-      });
-    }
+    this.setState({
+      editingElement: element,
+    });
+
+    this.handleTextWysiwyg(element, {
+      isExistingElement: !!existingTextElement,
+    });
   };
 
   private handleCanvasDoubleClick = (
@@ -5945,6 +5913,7 @@ class App extends React.Component<AppProps, AppState> {
 
     if (this.state.activeTool.type === "text") {
       this.handleTextOnPointerDown(event, pointerDownState);
+      return;
     } else if (
       this.state.activeTool.type === "arrow" ||
       this.state.activeTool.type === "line"
@@ -6065,7 +6034,6 @@ class App extends React.Component<AppProps, AppState> {
     );
     const clicklength =
       event.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0);
-
     if (this.device.editor.isMobile && clicklength < 300) {
       const hitElement = this.getElementAtPosition(
         scenePointer.x,
@@ -6739,7 +6707,6 @@ class App extends React.Component<AppProps, AppState> {
       sceneY,
       insertAtParentCenter: !event.altKey,
       container,
-      autoEdit: false,
     });
 
     resetCursor(this.interactiveCanvas);
@@ -8090,28 +8057,6 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      if (isTextElement(draggingElement)) {
-        const minWidth = getMinTextElementWidth(
-          getFontString({
-            fontSize: draggingElement.fontSize,
-            fontFamily: draggingElement.fontFamily,
-          }),
-          draggingElement.lineHeight,
-        );
-
-        if (draggingElement.width < minWidth) {
-          mutateElement(draggingElement, {
-            autoResize: true,
-          });
-        }
-
-        this.resetCursor();
-
-        this.handleTextWysiwyg(draggingElement, {
-          isExistingElement: true,
-        });
-      }
-
       if (
         activeTool.type !== "selection" &&
         draggingElement &&
@@ -9479,7 +9424,6 @@ class App extends React.Component<AppProps, AppState> {
         distance(pointerDownState.origin.y, pointerCoords.y),
         shouldMaintainAspectRatio(event),
         shouldResizeFromCenter(event),
-        this.state.zoom.value,
       );
     } else {
       let [gridX, gridY] = getGridPoint(
@@ -9537,7 +9481,6 @@ class App extends React.Component<AppProps, AppState> {
           ? !shouldMaintainAspectRatio(event)
           : shouldMaintainAspectRatio(event),
         shouldResizeFromCenter(event),
-        this.state.zoom.value,
         aspectRatio,
         this.state.originSnapOffset,
       );

packages/excalidraw/components/HelpDialog.tsx

@@ -285,7 +285,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               shortcuts={[getShortcutKey("Alt+Shift+D")]}
             />
             <Shortcut
-              label={t("stats.fullTitle")}
+              label={t("stats.title")}
               shortcuts={[getShortcutKey("Alt+/")]}
             />
             <Shortcut

packages/excalidraw/components/LayerUI.scss

@@ -27,99 +27,6 @@
       & > * {
         pointer-events: var(--ui-pointerEvents);
       }
-
-      & > .Stats {
-        width: 204px;
-        position: absolute;
-        top: 60px;
-        font-size: 12px;
-        z-index: var(--zIndex-layerUI);
-        pointer-events: var(--ui-pointerEvents);
-
-        .title {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 12px;
-
-          h2 {
-            margin: 0;
-          }
-        }
-
-        .sectionContent {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .elementType {
-          font-size: 12px;
-          font-weight: 700;
-          margin-top: 8px;
-        }
-
-        .elementsCount {
-          width: 100%;
-          font-size: 12px;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 8px;
-        }
-
-        .statsItem {
-          margin-top: 8px;
-          width: 100%;
-          margin-bottom: 4px;
-          display: grid;
-          gap: 4px;
-
-          .label {
-            margin-right: 4px;
-          }
-        }
-
-        h3 {
-          white-space: nowrap;
-          margin: 0;
-        }
-
-        .close {
-          height: 16px;
-          width: 16px;
-          cursor: pointer;
-          svg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        table {
-          width: 100%;
-          th {
-            border-bottom: 1px solid var(--input-border-color);
-            padding: 4px;
-          }
-          tr {
-            td:nth-child(2) {
-              min-width: 24px;
-              text-align: right;
-            }
-          }
-        }
-
-        .divider {
-          width: 100%;
-          height: 1px;
-          background-color: var(--default-border-color);
-        }
-
-        :root[dir="rtl"] & {
-          left: 12px;
-          right: initial;
-        }
-      }
     }
 
     &__footer {

packages/excalidraw/components/LayerUI.tsx

@@ -62,8 +62,6 @@ import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserPointerButton";
 import { MagicSettings } from "./MagicSettings";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -241,11 +239,6 @@ const LayerUI = ({
       elements,
     );
 
-    const shouldShowStats =
-      appState.stats.open &&
-      !appState.zenModeEnabled &&
-      !appState.viewModeEnabled;
-
     return (
       <FixedSideContainer side="top">
         <div className="App-menu App-menu_top">
@@ -358,15 +351,6 @@ const LayerUI = ({
                 appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (
                 <tunnels.DefaultSidebarTriggerTunnel.Out />
               )}
-            {shouldShowStats && (
-              <Stats
-                scene={app.scene}
-                onClose={() => {
-                  actionManager.executeAction(actionToggleStats);
-                }}
-                renderCustomStats={renderCustomStats}
-              />
-            )}
           </div>
         </div>
       </FixedSideContainer>

packages/excalidraw/components/Stats/Angle.tsx

@@ -3,7 +3,6 @@ import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement } from "../../element/typeChecks";
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import { degreeToRadian, radianToDegree } from "../../math";
-import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
@@ -18,12 +17,12 @@ const STEP_SIZE = 15;
 const Angle = ({ element, elementsMap }: AngleProps) => {
   const handleDegreeChange: DragInputCallbackType = ({
     accumulatedChange,
-    originalElements,
+    stateAtStart,
     shouldChangeByStepSize,
     nextValue,
   }) => {
-    const origElement = originalElements[0];
-    if (origElement) {
+    const _stateAtStart = stateAtStart[0];
+    if (_stateAtStart) {
       if (nextValue !== undefined) {
         const nextAngle = degreeToRadian(nextValue);
         mutateElement(element, {
@@ -39,7 +38,7 @@ const Angle = ({ element, elementsMap }: AngleProps) => {
       }
 
       const originalAngleInDegrees =
-        Math.round(radianToDegree(origElement.angle) * 100) / 100;
+        Math.round(radianToDegree(_stateAtStart.angle) * 100) / 100;
       const changeInDegrees = Math.round(accumulatedChange);
       let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
       if (shouldChangeByStepSize) {
@@ -65,8 +64,7 @@ const Angle = ({ element, elementsMap }: AngleProps) => {
   return (
     <DragInput
       label="A"
-      icon={angleIcon}
-      value={Math.round((radianToDegree(element.angle) % 360) * 100) / 100}
+      value={Math.round(radianToDegree(element.angle) * 100) / 100}
       elements={[element]}
       dragInputCallback={handleDegreeChange}
       editable={isPropertyEditable(element, "angle")}

packages/excalidraw/components/Stats/Collapsible.tsx

@@ -1,39 +0,0 @@
-import { InlineIcon } from "../InlineIcon";
-import { collapseDownIcon, collapseUpIcon } from "../icons";
-
-interface CollapsibleProps {
-  label: React.ReactNode;
-  // having it controlled so that the state is managed outside
-  // this is to keep the user's previous choice even when the
-  // Collapsible is unmounted
-  open: boolean;
-  openTrigger: () => void;
-  children: React.ReactNode;
-}
-
-const Collapsible = ({
-  label,
-  open,
-  openTrigger,
-  children,
-}: CollapsibleProps) => {
-  return (
-    <>
-      <div
-        style={{
-          cursor: "pointer",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-        onClick={openTrigger}
-      >
-        {label}
-        <InlineIcon icon={open ? collapseUpIcon : collapseDownIcon} />
-      </div>
-      {open && <>{children}</>}
-    </>
-  );
-};
-
-export default Collapsible;

packages/excalidraw/components/Stats/Dimension.tsx

@@ -1,8 +1,21 @@
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable, resizeElement } from "./utils";
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
+import { mutateElement } from "../../element/mutateElement";
+import {
+  measureFontSizeFromWidth,
+  rescalePointsInElement,
+} from "../../element/resizeElements";
+import {
+  getApproxMinLineHeight,
+  getApproxMinLineWidth,
+  getBoundTextElement,
+  getBoundTextMaxWidth,
+  handleBindTextResize,
+} from "../../element/textElement";
+import { getFontString } from "../../utils";
+import { updateBoundElements } from "../../element/binding";
 
 interface DimensionDragInputProps {
   property: "width" | "height";
@@ -15,6 +28,117 @@ const _shouldKeepAspectRatio = (element: ExcalidrawElement) => {
   return element.type === "image";
 };
 
+export const newOrigin = (
+  x1: number,
+  y1: number,
+  w1: number,
+  h1: number,
+  w2: number,
+  h2: number,
+  angle: number,
+) => {
+  /**
+   * The formula below is the result of solving
+   *   rotate(x1, y1, cx1, cy1, angle) = rotate(x2, y2, cx2, cy2, angle)
+   * where rotate is the function defined in math.ts
+   *
+   * This is so that the new origin (x2, y2),
+   * when rotated against the new center (cx2, cy2),
+   * coincides with (x1, y1) rotated against (cx1, cy1)
+   *
+   * The reason for doing this computation is so the element's top left corner
+   * on the canvas remains fixed after any changes in its dimension.
+   */
+
+  return {
+    x:
+      x1 +
+      (w1 - w2) / 2 +
+      ((w2 - w1) / 2) * Math.cos(angle) +
+      ((h1 - h2) / 2) * Math.sin(angle),
+    y:
+      y1 +
+      (h1 - h2) / 2 +
+      ((w2 - w1) / 2) * Math.sin(angle) +
+      ((h2 - h1) / 2) * Math.cos(angle),
+  };
+};
+
+const resizeElement = (
+  nextWidth: number,
+  nextHeight: number,
+  keepAspectRatio: boolean,
+  latestState: ExcalidrawElement,
+  stateAtStart: ExcalidrawElement,
+  elementsMap: ElementsMap,
+  originalElementsMap: Map<string, ExcalidrawElement>,
+) => {
+  mutateElement(latestState, {
+    ...newOrigin(
+      latestState.x,
+      latestState.y,
+      latestState.width,
+      latestState.height,
+      nextWidth,
+      nextHeight,
+      latestState.angle,
+    ),
+    width: nextWidth,
+    height: nextHeight,
+    ...rescalePointsInElement(stateAtStart, nextWidth, nextHeight, true),
+  });
+
+  let boundTextFont: { fontSize?: number } = {};
+  const boundTextElement = getBoundTextElement(latestState, elementsMap);
+
+  if (boundTextElement) {
+    boundTextFont = {
+      fontSize: boundTextElement.fontSize,
+    };
+    if (keepAspectRatio) {
+      const updatedElement = {
+        ...latestState,
+        width: nextWidth,
+        height: nextHeight,
+      };
+
+      const nextFont = measureFontSizeFromWidth(
+        boundTextElement,
+        elementsMap,
+        getBoundTextMaxWidth(updatedElement, boundTextElement),
+      );
+      boundTextFont = {
+        fontSize: nextFont?.size ?? boundTextElement.fontSize,
+      };
+    } else {
+      const minWidth = getApproxMinLineWidth(
+        getFontString(boundTextElement),
+        boundTextElement.lineHeight,
+      );
+      const minHeight = getApproxMinLineHeight(
+        boundTextElement.fontSize,
+        boundTextElement.lineHeight,
+      );
+      nextWidth = Math.max(nextWidth, minWidth);
+      nextHeight = Math.max(nextHeight, minHeight);
+    }
+  }
+
+  updateBoundElements(latestState, elementsMap, {
+    newSize: {
+      width: nextWidth,
+      height: nextHeight,
+    },
+  });
+
+  if (boundTextElement && boundTextFont) {
+    mutateElement(boundTextElement, {
+      fontSize: boundTextFont.fontSize,
+    });
+  }
+  handleBindTextResize(latestState, elementsMap, "e", keepAspectRatio);
+};
+
 const DimensionDragInput = ({
   property,
   element,
@@ -22,17 +146,17 @@ const DimensionDragInput = ({
 }: DimensionDragInputProps) => {
   const handleDimensionChange: DragInputCallbackType = ({
     accumulatedChange,
-    originalElements,
+    stateAtStart,
     originalElementsMap,
     shouldKeepAspectRatio,
     shouldChangeByStepSize,
     nextValue,
   }) => {
-    const origElement = originalElements[0];
-    if (origElement) {
+    const _stateAtStart = stateAtStart[0];
+    if (_stateAtStart) {
       const keepAspectRatio =
         shouldKeepAspectRatio || _shouldKeepAspectRatio(element);
-      const aspectRatio = origElement.width / origElement.height;
+      const aspectRatio = _stateAtStart.width / _stateAtStart.height;
 
       if (nextValue !== undefined) {
         const nextWidth = Math.max(
@@ -40,16 +164,16 @@ const DimensionDragInput = ({
             ? nextValue
             : keepAspectRatio
             ? nextValue * aspectRatio
-            : origElement.width,
-          MIN_WIDTH_OR_HEIGHT,
+            : _stateAtStart.width,
+          0,
         );
         const nextHeight = Math.max(
           property === "height"
             ? nextValue
             : keepAspectRatio
             ? nextValue / aspectRatio
-            : origElement.height,
-          MIN_WIDTH_OR_HEIGHT,
+            : _stateAtStart.height,
+          0,
         );
 
         resizeElement(
@@ -57,7 +181,7 @@ const DimensionDragInput = ({
           nextHeight,
           keepAspectRatio,
           element,
-          origElement,
+          _stateAtStart,
           elementsMap,
           originalElementsMap,
         );
@@ -67,7 +191,7 @@ const DimensionDragInput = ({
       const changeInWidth = property === "width" ? accumulatedChange : 0;
       const changeInHeight = property === "height" ? accumulatedChange : 0;
 
-      let nextWidth = Math.max(0, origElement.width + changeInWidth);
+      let nextWidth = Math.max(0, _stateAtStart.width + changeInWidth);
       if (property === "width") {
         if (shouldChangeByStepSize) {
           nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
@@ -76,7 +200,7 @@ const DimensionDragInput = ({
         }
       }
 
-      let nextHeight = Math.max(0, origElement.height + changeInHeight);
+      let nextHeight = Math.max(0, _stateAtStart.height + changeInHeight);
       if (property === "height") {
         if (shouldChangeByStepSize) {
           nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
@@ -93,31 +217,28 @@ const DimensionDragInput = ({
         }
       }
 
-      nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-      nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-
       resizeElement(
         nextWidth,
         nextHeight,
         keepAspectRatio,
         element,
-        origElement,
+        _stateAtStart,
         elementsMap,
         originalElementsMap,
       );
     }
   };
 
-  const value =
-    Math.round((property === "width" ? element.width : element.height) * 100) /
-    100;
-
   return (
     <DragInput
       label={property === "width" ? "W" : "H"}
       elements={[element]}
       dragInputCallback={handleDimensionChange}
-      value={value}
+      value={
+        Math.round(
+          (property === "width" ? element.width : element.height) * 100,
+        ) / 100
+      }
       editable={isPropertyEditable(element, property)}
     />
   );

packages/excalidraw/components/Stats/DragInput.scss

@@ -15,13 +15,12 @@
   }
 
   .drag-input-label {
+    height: var(--default-button-size);
     flex-shrink: 0;
+    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
     border: 1px solid var(--default-border-color);
     border-right: 0;
-    width: 2rem;
-    height: 2rem;
     box-sizing: border-box;
-    color: var(--popup-text-color);
 
     :root[dir="ltr"] & {
       border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
@@ -33,6 +32,7 @@
       border-left: 0;
     }
 
+    color: var(--input-label-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -49,7 +49,7 @@
     color: var(--text-primary-color);
     border: 0;
     outline: none;
-    height: 2rem;
+    height: var(--default-button-size);
     border: 1px solid var(--default-border-color);
     border-left: 0;
     letter-spacing: 0.4px;

packages/excalidraw/components/Stats/DragInput.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import throttle from "lodash.throttle";
 import { EVENT } from "../../constants";
 import { KEYS } from "../../keys";
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
@@ -7,14 +8,11 @@ import { deepCopyElement } from "../../element/newElement";
 import "./DragInput.scss";
 import clsx from "clsx";
 import { useApp } from "../App";
-import { InlineIcon } from "../InlineIcon";
-import { SMALLEST_DELTA } from "./utils";
-import { StoreAction } from "../../store";
 
 export type DragInputCallbackType = ({
   accumulatedChange,
   instantChange,
-  originalElements,
+  stateAtStart,
   originalElementsMap,
   shouldKeepAspectRatio,
   shouldChangeByStepSize,
@@ -22,7 +20,7 @@ export type DragInputCallbackType = ({
 }: {
   accumulatedChange: number;
   instantChange: number;
-  originalElements: readonly ExcalidrawElement[];
+  stateAtStart: ExcalidrawElement[];
   originalElementsMap: ElementsMap;
   shouldKeepAspectRatio: boolean;
   shouldChangeByStepSize: boolean;
@@ -31,9 +29,8 @@ export type DragInputCallbackType = ({
 
 interface StatsDragInputProps {
   label: string | React.ReactNode;
-  icon?: React.ReactNode;
-  value: number | "Mixed";
-  elements: readonly ExcalidrawElement[];
+  value: number;
+  elements: ExcalidrawElement[];
   editable?: boolean;
   shouldKeepAspectRatio?: boolean;
   dragInputCallback: DragInputCallbackType;
@@ -41,7 +38,6 @@ interface StatsDragInputProps {
 
 const StatsDragInput = ({
   label,
-  icon,
   dragInputCallback,
   value,
   elements,
@@ -52,61 +48,18 @@ const StatsDragInput = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const labelRef = useRef<HTMLDivElement>(null);
 
+  const cbThrottled = useMemo(() => {
+    return throttle(dragInputCallback, 16);
+  }, [dragInputCallback]);
+
   const [inputValue, setInputValue] = useState(value.toString());
 
   useEffect(() => {
     setInputValue(value.toString());
-  }, [value, elements]);
+  }, [value]);
 
-  const handleInputValue = (v: string) => {
-    const parsed = Number(v);
-    if (isNaN(parsed)) {
-      setInputValue(value.toString());
-      return;
-    }
-
-    const rounded = Number(parsed.toFixed(2));
-    const original = Number(value);
-
-    // only update when
-    // 1. original was "Mixed" and we have a new value
-    // 2. original was not "Mixed" and the difference between a new value and previous value is greater
-    //    than the smallest delta allowed, which is 0.01
-    // reason: idempotent to avoid unnecessary
-    if (isNaN(original) || Math.abs(rounded - original) >= SMALLEST_DELTA) {
-      dragInputCallback({
-        accumulatedChange: 0,
-        instantChange: 0,
-        originalElements: elements,
-        originalElementsMap: app.scene.getNonDeletedElementsMap(),
-        shouldKeepAspectRatio: shouldKeepAspectRatio!!,
-        shouldChangeByStepSize: false,
-        nextValue: rounded,
-      });
-      app.syncActionResult({ storeAction: StoreAction.CAPTURE });
-    }
-  };
-
-  const handleInputValueRef = useRef(handleInputValue);
-  handleInputValueRef.current = handleInputValue;
-
-  // make sure that clicking on canvas (which umounts the component)
-  // updates current input value (blur isn't triggered)
-  useEffect(() => {
-    const input = inputRef.current;
-    return () => {
-      const nextValue = input?.value;
-      if (nextValue) {
-        handleInputValueRef.current(nextValue);
-      }
-    };
-  }, []);
-
-  return editable ? (
-    <div
-      className={clsx("drag-input-container", !editable && "disabled")}
-      data-testid={label}
-    >
+  return (
+    <div className={clsx("drag-input-container", !editable && "disabled")}>
       <div
         className="drag-input-label"
         ref={labelRef}
@@ -122,15 +75,21 @@ const StatsDragInput = ({
               y: number;
             } | null = null;
 
-            let originalElements: ExcalidrawElement[] | null = null;
+            let stateAtStart: ExcalidrawElement[] | null = null;
             let originalElementsMap: Map<string, ExcalidrawElement> | null =
               null;
 
             let accumulatedChange: number | null = null;
 
-            document.body.classList.add("excalidraw-cursor-resize");
+            document.body.classList.add("dragResize");
 
             const onPointerMove = (event: PointerEvent) => {
+              if (!stateAtStart) {
+                stateAtStart = elements.map((element) =>
+                  deepCopyElement(element),
+                );
+              }
+
               if (!originalElementsMap) {
                 originalElementsMap = app.scene
                   .getNonDeletedElements()
@@ -140,28 +99,18 @@ const StatsDragInput = ({
                   }, new Map() as ElementsMap);
               }
 
-              if (!originalElements) {
-                originalElements = elements.map(
-                  (element) => originalElementsMap!.get(element.id)!,
-                );
-              }
-
               if (!accumulatedChange) {
                 accumulatedChange = 0;
               }
 
-              if (
-                lastPointer &&
-                originalElementsMap !== null &&
-                accumulatedChange !== null
-              ) {
+              if (lastPointer && stateAtStart && accumulatedChange !== null) {
                 const instantChange = event.clientX - lastPointer.x;
                 accumulatedChange += instantChange;
 
-                dragInputCallback({
+                cbThrottled({
                   accumulatedChange,
                   instantChange,
-                  originalElements,
+                  stateAtStart,
                   originalElementsMap,
                   shouldKeepAspectRatio: shouldKeepAspectRatio!!,
                   shouldChangeByStepSize: event.shiftKey,
@@ -184,14 +133,14 @@ const StatsDragInput = ({
                   false,
                 );
 
-                app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+                app.store.shouldCaptureIncrement();
 
                 lastPointer = null;
                 accumulatedChange = null;
-                originalElements = null;
+                stateAtStart = null;
                 originalElementsMap = null;
 
-                document.body.classList.remove("excalidraw-cursor-resize");
+                document.body.classList.remove("dragResize");
               },
               false,
             );
@@ -203,7 +152,7 @@ const StatsDragInput = ({
           }
         }}
       >
-        {icon ? <InlineIcon icon={icon} /> : label}
+        {label}
       </div>
       <input
         className="drag-input"
@@ -212,35 +161,47 @@ const StatsDragInput = ({
         onKeyDown={(event) => {
           if (editable) {
             const eventTarget = event.target;
+
             if (
               eventTarget instanceof HTMLInputElement &&
               event.key === KEYS.ENTER
             ) {
-              handleInputValue(eventTarget.value);
-              app.focusContainer();
+              const v = Number(eventTarget.value);
+              if (isNaN(v)) {
+                setInputValue(value.toString());
+                return;
+              }
+
+              dragInputCallback({
+                accumulatedChange: 0,
+                instantChange: 0,
+                stateAtStart: elements,
+                originalElementsMap: app.scene.getNonDeletedElementsMap(),
+                shouldKeepAspectRatio: shouldKeepAspectRatio!!,
+                shouldChangeByStepSize: false,
+                nextValue: v,
+              });
+              app.store.shouldCaptureIncrement();
+              eventTarget.blur();
             }
           }
         }}
         ref={inputRef}
         value={inputValue}
         onChange={(event) => {
-          setInputValue(event.target.value);
+          const eventTarget = event.target;
+          if (eventTarget instanceof HTMLInputElement) {
+            setInputValue(event.target.value);
+          }
         }}
-        onFocus={(event) => {
-          event.target.select();
-        }}
-        onBlur={(event) => {
+        onBlur={() => {
           if (!inputValue) {
             setInputValue(value.toString());
-          } else if (editable) {
-            handleInputValue(event.target.value);
           }
         }}
         disabled={!editable}
-      />
+      ></input>
     </div>
-  ) : (
-    <></>
   );
 };
 

packages/excalidraw/components/Stats/FontSize.tsx

@@ -4,7 +4,6 @@ import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { mutateElement } from "../../element/mutateElement";
 import { getStepSizedValue } from "./utils";
-import { fontSizeIcon } from "../icons";
 
 interface FontSizeProps {
   element: ExcalidrawTextElement;
@@ -17,13 +16,13 @@ const STEP_SIZE = 4;
 const FontSize = ({ element, elementsMap }: FontSizeProps) => {
   const handleFontSizeChange: DragInputCallbackType = ({
     accumulatedChange,
-    originalElements,
+    stateAtStart,
     shouldChangeByStepSize,
     nextValue,
   }) => {
-    const origElement = originalElements[0];
-    if (origElement) {
-      if (nextValue !== undefined) {
+    const _stateAtStart = stateAtStart[0];
+    if (_stateAtStart) {
+      if (nextValue) {
         const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
 
         const newElement = {
@@ -38,8 +37,8 @@ const FontSize = ({ element, elementsMap }: FontSizeProps) => {
         return;
       }
 
-      if (origElement.type === "text") {
-        const originalFontSize = Math.round(origElement.fontSize);
+      if (_stateAtStart.type === "text") {
+        const originalFontSize = Math.round(_stateAtStart.fontSize);
         const changeInFontSize = Math.round(accumulatedChange);
         let nextFontSize = Math.max(
           originalFontSize + changeInFontSize,
@@ -67,7 +66,6 @@ const FontSize = ({ element, elementsMap }: FontSizeProps) => {
       value={Math.round(element.fontSize * 10) / 10}
       elements={[element]}
       dragInputCallback={handleFontSizeChange}
-      icon={fontSizeIcon}
     />
   );
 };

packages/excalidraw/components/Stats/MultiAngle.tsx

@@ -1,114 +0,0 @@
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement } from "../../element/typeChecks";
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import { isInGroup } from "../../groups";
-import { degreeToRadian, radianToDegree } from "../../math";
-import type Scene from "../../scene/Scene";
-import { angleIcon } from "../icons";
-import DragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
-
-interface MultiAngleProps {
-  elements: readonly ExcalidrawElement[];
-  elementsMap: ElementsMap;
-  scene: Scene;
-}
-
-const STEP_SIZE = 15;
-
-const MultiAngle = ({ elements, elementsMap, scene }: MultiAngleProps) => {
-  const handleDegreeChange: DragInputCallbackType = ({
-    accumulatedChange,
-    originalElements,
-    shouldChangeByStepSize,
-    nextValue,
-  }) => {
-    const editableLatestIndividualElements = elements.filter(
-      (el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
-    );
-    const editableOriginalIndividualElements = originalElements.filter(
-      (el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
-    );
-
-    if (nextValue !== undefined) {
-      const nextAngle = degreeToRadian(nextValue);
-
-      for (const element of editableLatestIndividualElements) {
-        mutateElement(
-          element,
-          {
-            angle: nextAngle,
-          },
-          false,
-        );
-
-        const boundTextElement = getBoundTextElement(element, elementsMap);
-        if (boundTextElement && !isArrowElement(element)) {
-          mutateElement(boundTextElement, { angle: nextAngle }, false);
-        }
-      }
-
-      scene.triggerUpdate();
-
-      return;
-    }
-
-    for (let i = 0; i < editableLatestIndividualElements.length; i++) {
-      const latestElement = editableLatestIndividualElements[i];
-      const originalElement = editableOriginalIndividualElements[i];
-      const originalAngleInDegrees =
-        Math.round(radianToDegree(originalElement.angle) * 100) / 100;
-      const changeInDegrees = Math.round(accumulatedChange);
-      let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
-      if (shouldChangeByStepSize) {
-        nextAngleInDegrees = getStepSizedValue(nextAngleInDegrees, STEP_SIZE);
-      }
-
-      nextAngleInDegrees =
-        nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
-
-      const nextAngle = degreeToRadian(nextAngleInDegrees);
-
-      mutateElement(
-        latestElement,
-        {
-          angle: nextAngle,
-        },
-        false,
-      );
-
-      const boundTextElement = getBoundTextElement(latestElement, elementsMap);
-      if (boundTextElement && !isArrowElement(latestElement)) {
-        mutateElement(boundTextElement, { angle: nextAngle }, false);
-      }
-    }
-    scene.triggerUpdate();
-  };
-
-  const editableLatestIndividualElements = elements.filter(
-    (el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
-  );
-  const angles = editableLatestIndividualElements.map(
-    (el) => Math.round((radianToDegree(el.angle) % 360) * 100) / 100,
-  );
-  const value = new Set(angles).size === 1 ? angles[0] : "Mixed";
-
-  const editable = editableLatestIndividualElements.some((el) =>
-    isPropertyEditable(el, "angle"),
-  );
-
-  return (
-    <DragInput
-      label="A"
-      icon={angleIcon}
-      value={value}
-      elements={elements}
-      dragInputCallback={handleDegreeChange}
-      editable={editable}
-    />
-  );
-};
-
-export default MultiAngle;

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { getCommonBounds, isTextElement } from "../../element";
 import { updateBoundElements } from "../../element/binding";
 import { mutateElement } from "../../element/mutateElement";
@@ -8,21 +7,14 @@ import {
   handleBindTextResize,
 } from "../../element/textElement";
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import type Scene from "../../scene/Scene";
-import type { Point } from "../../types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
-import { getElementsInAtomicUnit, resizeElement } from "./utils";
-import type { AtomicUnit } from "./utils";
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { getStepSizedValue } from "./utils";
 
 interface MultiDimensionProps {
   property: "width" | "height";
-  elements: readonly ExcalidrawElement[];
+  elements: ExcalidrawElement[];
   elementsMap: ElementsMap;
-  atomicUnits: AtomicUnit[];
-  scene: Scene;
 }
 
 const STEP_SIZE = 10;
@@ -31,12 +23,12 @@ const getResizedUpdates = (
   anchorX: number,
   anchorY: number,
   scale: number,
-  origElement: ExcalidrawElement,
+  stateAtStart: ExcalidrawElement,
 ) => {
-  const offsetX = origElement.x - anchorX;
-  const offsetY = origElement.y - anchorY;
-  const nextWidth = origElement.width * scale;
-  const nextHeight = origElement.height * scale;
+  const offsetX = stateAtStart.x - anchorX;
+  const offsetY = stateAtStart.y - anchorY;
+  const nextWidth = stateAtStart.width * scale;
+  const nextHeight = stateAtStart.height * scale;
   const x = anchorX + offsetX * scale;
   const y = anchorY + offsetY * scale;
 
@@ -45,14 +37,14 @@ const getResizedUpdates = (
     height: nextHeight,
     x,
     y,
-    ...rescalePointsInElement(origElement, nextWidth, nextHeight, false),
-    ...(isTextElement(origElement)
-      ? { fontSize: origElement.fontSize * scale }
+    ...rescalePointsInElement(stateAtStart, nextWidth, nextHeight, false),
+    ...(isTextElement(stateAtStart)
+      ? { fontSize: stateAtStart.fontSize * scale }
       : {}),
   };
 };
 
-const resizeElementInGroup = (
+const resizeElement = (
   anchorX: number,
   anchorY: number,
   property: MultiDimensionProps["property"],
@@ -61,10 +53,11 @@ const resizeElementInGroup = (
   origElement: ExcalidrawElement,
   elementsMap: ElementsMap,
   originalElementsMap: ElementsMap,
+  shouldInformMutation: boolean,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
 
-  mutateElement(latestElement, updates, false);
+  mutateElement(latestElement, updates, shouldInformMutation);
   const boundTextElement = getBoundTextElement(
     origElement,
     originalElementsMap,
@@ -81,7 +74,7 @@ const resizeElementInGroup = (
         {
           fontSize: newFontSize,
         },
-        false,
+        shouldInformMutation,
       );
       handleBindTextResize(
         latestElement,
@@ -93,283 +86,123 @@ const resizeElementInGroup = (
   }
 };
 
-const resizeGroup = (
-  nextWidth: number,
-  nextHeight: number,
-  initialHeight: number,
-  aspectRatio: number,
-  anchor: Point,
-  property: MultiDimensionProps["property"],
-  latestElements: ExcalidrawElement[],
-  originalElements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
-  originalElementsMap: ElementsMap,
-) => {
-  // keep aspect ratio for groups
-  if (property === "width") {
-    nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
-  } else {
-    nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
-  }
-
-  const scale = nextHeight / initialHeight;
-
-  for (let i = 0; i < originalElements.length; i++) {
-    const origElement = originalElements[i];
-    const latestElement = latestElements[i];
-
-    resizeElementInGroup(
-      anchor[0],
-      anchor[1],
-      property,
-      scale,
-      latestElement,
-      origElement,
-      elementsMap,
-      originalElementsMap,
-    );
-  }
-};
-
 const MultiDimension = ({
   property,
   elements,
   elementsMap,
-  atomicUnits,
-  scene,
 }: MultiDimensionProps) => {
-  const sizes = useMemo(
-    () =>
-      atomicUnits.map((atomicUnit) => {
-        const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap);
-
-        if (elementsInUnit.length > 1) {
-          const [x1, y1, x2, y2] = getCommonBounds(
-            elementsInUnit.map((el) => el.latest),
-          );
-          return (
-            Math.round((property === "width" ? x2 - x1 : y2 - y1) * 100) / 100
-          );
-        }
-        const [el] = elementsInUnit;
-
-        return (
-          Math.round(
-            (property === "width" ? el.latest.width : el.latest.height) * 100,
-          ) / 100
-        );
-      }),
-    [elementsMap, atomicUnits, property],
-  );
-
-  const value =
-    new Set(sizes).size === 1 ? Math.round(sizes[0] * 100) / 100 : "Mixed";
-
-  const editable = sizes.length > 0;
-
   const handleDimensionChange: DragInputCallbackType = ({
     accumulatedChange,
+    stateAtStart,
     originalElementsMap,
     shouldChangeByStepSize,
     nextValue,
   }) => {
+    const [x1, y1, x2, y2] = getCommonBounds(stateAtStart);
+    const initialWidth = x2 - x1;
+    const initialHeight = y2 - y1;
+    const keepAspectRatio = true;
+    const aspectRatio = initialWidth / initialHeight;
+
     if (nextValue !== undefined) {
-      for (const atomicUnit of atomicUnits) {
-        const elementsInUnit = getElementsInAtomicUnit(
-          atomicUnit,
-          elementsMap,
-          originalElementsMap,
-        );
+      const nextHeight =
+        property === "height" ? nextValue : nextValue / aspectRatio;
 
-        if (elementsInUnit.length > 1) {
-          const latestElements = elementsInUnit.map((el) => el.latest!);
-          const originalElements = elementsInUnit.map((el) => el.original!);
-          const [x1, y1, x2, y2] = getCommonBounds(originalElements);
-          const initialWidth = x2 - x1;
-          const initialHeight = y2 - y1;
-          const aspectRatio = initialWidth / initialHeight;
-          const nextWidth = Math.max(
-            MIN_WIDTH_OR_HEIGHT,
-            property === "width" ? Math.max(0, nextValue) : initialWidth,
-          );
-          const nextHeight = Math.max(
-            MIN_WIDTH_OR_HEIGHT,
-            property === "height" ? Math.max(0, nextValue) : initialHeight,
-          );
+      const scale = nextHeight / initialHeight;
+      const anchorX = property === "width" ? x1 : x1 + width / 2;
+      const anchorY = property === "height" ? y1 : y1 + height / 2;
 
-          resizeGroup(
-            nextWidth,
-            nextHeight,
-            initialHeight,
-            aspectRatio,
-            [x1, y1],
+      let i = 0;
+      while (i < stateAtStart.length) {
+        const latestElement = elements[i];
+        const origElement = stateAtStart[i];
+
+        // it should never happen that element and origElement are different
+        // but check just in case
+        if (latestElement.id === origElement.id) {
+          resizeElement(
+            anchorX,
+            anchorY,
             property,
-            latestElements,
-            originalElements,
+            scale,
+            latestElement,
+            origElement,
             elementsMap,
             originalElementsMap,
+            i === stateAtStart.length - 1,
           );
-        } else {
-          const [el] = elementsInUnit;
-          const latestElement = el?.latest;
-          const origElement = el?.original;
-
-          if (
-            latestElement &&
-            origElement &&
-            isPropertyEditable(latestElement, property)
-          ) {
-            let nextWidth =
-              property === "width"
-                ? Math.max(0, nextValue)
-                : latestElement.width;
-            if (property === "width") {
-              if (shouldChangeByStepSize) {
-                nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
-              } else {
-                nextWidth = Math.round(nextWidth);
-              }
-            }
-
-            let nextHeight =
-              property === "height"
-                ? Math.max(0, nextValue)
-                : latestElement.height;
-            if (property === "height") {
-              if (shouldChangeByStepSize) {
-                nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
-              } else {
-                nextHeight = Math.round(nextHeight);
-              }
-            }
-
-            nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-            nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-
-            resizeElement(
-              nextWidth,
-              nextHeight,
-              false,
-              latestElement,
-              origElement,
-              elementsMap,
-              originalElementsMap,
-              false,
-            );
-          }
         }
+        i++;
       }
 
-      scene.triggerUpdate();
-
       return;
     }
 
     const changeInWidth = property === "width" ? accumulatedChange : 0;
     const changeInHeight = property === "height" ? accumulatedChange : 0;
 
-    for (const atomicUnit of atomicUnits) {
-      const elementsInUnit = getElementsInAtomicUnit(
-        atomicUnit,
-        elementsMap,
-        originalElementsMap,
-      );
-
-      if (elementsInUnit.length > 1) {
-        const latestElements = elementsInUnit.map((el) => el.latest!);
-        const originalElements = elementsInUnit.map((el) => el.original!);
-
-        const [x1, y1, x2, y2] = getCommonBounds(originalElements);
-        const initialWidth = x2 - x1;
-        const initialHeight = y2 - y1;
-        const aspectRatio = initialWidth / initialHeight;
-        let nextWidth = Math.max(0, initialWidth + changeInWidth);
-        if (property === "width") {
-          if (shouldChangeByStepSize) {
-            nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
-          } else {
-            nextWidth = Math.round(nextWidth);
-          }
-        }
-
-        let nextHeight = Math.max(0, initialHeight + changeInHeight);
-        if (property === "height") {
-          if (shouldChangeByStepSize) {
-            nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
-          } else {
-            nextHeight = Math.round(nextHeight);
-          }
-        }
-
-        nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-        nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-
-        resizeGroup(
-          nextWidth,
-          nextHeight,
-          initialHeight,
-          aspectRatio,
-          [x1, y1],
-          property,
-          latestElements,
-          originalElements,
-          elementsMap,
-          originalElementsMap,
-        );
+    let nextWidth = Math.max(0, initialWidth + changeInWidth);
+    if (property === "width") {
+      if (shouldChangeByStepSize) {
+        nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
       } else {
-        const [el] = elementsInUnit;
-        const latestElement = el?.latest;
-        const origElement = el?.original;
-
-        if (
-          latestElement &&
-          origElement &&
-          isPropertyEditable(latestElement, property)
-        ) {
-          let nextWidth = Math.max(0, origElement.width + changeInWidth);
-          if (property === "width") {
-            if (shouldChangeByStepSize) {
-              nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
-            } else {
-              nextWidth = Math.round(nextWidth);
-            }
-          }
-
-          let nextHeight = Math.max(0, origElement.height + changeInHeight);
-          if (property === "height") {
-            if (shouldChangeByStepSize) {
-              nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
-            } else {
-              nextHeight = Math.round(nextHeight);
-            }
-          }
-
-          nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-          nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-
-          resizeElement(
-            nextWidth,
-            nextHeight,
-            false,
-            latestElement,
-            origElement,
-            elementsMap,
-            originalElementsMap,
-          );
-        }
+        nextWidth = Math.round(nextWidth);
       }
     }
 
-    scene.triggerUpdate();
+    let nextHeight = Math.max(0, initialHeight + changeInHeight);
+    if (property === "height") {
+      if (shouldChangeByStepSize) {
+        nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
+      } else {
+        nextHeight = Math.round(nextHeight);
+      }
+    }
+
+    if (keepAspectRatio) {
+      if (property === "width") {
+        nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
+      } else {
+        nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
+      }
+    }
+
+    const scale = nextHeight / initialHeight;
+    const anchorX = property === "width" ? x1 : x1 + width / 2;
+    const anchorY = property === "height" ? y1 : y1 + height / 2;
+
+    let i = 0;
+    while (i < stateAtStart.length) {
+      const latestElement = elements[i];
+      const origElement = stateAtStart[i];
+
+      if (latestElement.id === origElement.id) {
+        resizeElement(
+          anchorX,
+          anchorY,
+          property,
+          scale,
+          latestElement,
+          origElement,
+          elementsMap,
+          originalElementsMap,
+          i === stateAtStart.length - 1,
+        );
+      }
+      i++;
+    }
   };
 
+  const [x1, y1, x2, y2] = getCommonBounds(elements);
+  const width = x2 - x1;
+  const height = y2 - y1;
+
   return (
     <DragInput
       label={property === "width" ? "W" : "H"}
       elements={elements}
       dragInputCallback={handleDimensionChange}
-      value={value}
-      editable={editable}
+      value={Math.round((property === "width" ? width : height) * 100) / 100}
     />
   );
 };

packages/excalidraw/components/Stats/MultiFontSize.tsx

@@ -1,115 +0,0 @@
-import { isTextElement, refreshTextDimensions } from "../../element";
-import { mutateElement } from "../../element/mutateElement";
-import { isBoundToContainer } from "../../element/typeChecks";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
-import { isInGroup } from "../../groups";
-import type Scene from "../../scene/Scene";
-import { fontSizeIcon } from "../icons";
-import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue } from "./utils";
-
-interface MultiFontSizeProps {
-  elements: readonly ExcalidrawElement[];
-  elementsMap: ElementsMap;
-  scene: Scene;
-}
-
-const MIN_FONT_SIZE = 4;
-const STEP_SIZE = 4;
-
-const MultiFontSize = ({
-  elements,
-  elementsMap,
-  scene,
-}: MultiFontSizeProps) => {
-  const latestTextElements = elements.filter(
-    (el) => !isInGroup(el) && isTextElement(el) && !isBoundToContainer(el),
-  ) as ExcalidrawTextElement[];
-  const fontSizes = latestTextElements.map(
-    (textEl) => Math.round(textEl.fontSize * 10) / 10,
-  );
-  const value = new Set(fontSizes).size === 1 ? fontSizes[0] : "Mixed";
-  const editable = fontSizes.length > 0;
-
-  const handleFontSizeChange: DragInputCallbackType = ({
-    accumulatedChange,
-    originalElements,
-    shouldChangeByStepSize,
-    nextValue,
-  }) => {
-    if (nextValue) {
-      const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
-
-      for (const textElement of latestTextElements) {
-        const newElement = {
-          ...textElement,
-          fontSize: nextFontSize,
-        };
-        const updates = refreshTextDimensions(newElement, null, elementsMap);
-        mutateElement(
-          textElement,
-          {
-            ...updates,
-            fontSize: nextFontSize,
-          },
-          false,
-        );
-      }
-
-      scene.triggerUpdate();
-      return;
-    }
-
-    const originalTextElements = originalElements.filter(
-      (el) => !isInGroup(el) && isTextElement(el) && !isBoundToContainer(el),
-    ) as ExcalidrawTextElement[];
-
-    for (let i = 0; i < latestTextElements.length; i++) {
-      const latestElement = latestTextElements[i];
-      const originalElement = originalTextElements[i];
-
-      const originalFontSize = Math.round(originalElement.fontSize);
-      const changeInFontSize = Math.round(accumulatedChange);
-      let nextFontSize = Math.max(
-        originalFontSize + changeInFontSize,
-        MIN_FONT_SIZE,
-      );
-      if (shouldChangeByStepSize) {
-        nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
-      }
-      const newElement = {
-        ...latestElement,
-        fontSize: nextFontSize,
-      };
-      const updates = refreshTextDimensions(newElement, null, elementsMap);
-      mutateElement(
-        latestElement,
-        {
-          ...updates,
-          fontSize: nextFontSize,
-        },
-        false,
-      );
-    }
-
-    scene.triggerUpdate();
-  };
-
-  return (
-    <StatsDragInput
-      label="F"
-      icon={fontSizeIcon}
-      elements={elements}
-      dragInputCallback={handleFontSizeChange}
-      value={value}
-      editable={editable}
-    />
-  );
-};
-
-export default MultiFontSize;

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -1,239 +0,0 @@
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import { rotate } from "../../math";
-import type Scene from "../../scene/Scene";
-import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
-import { getCommonBounds, isTextElement } from "../../element";
-import { useMemo } from "react";
-import { getElementsInAtomicUnit, moveElement } from "./utils";
-import type { AtomicUnit } from "./utils";
-
-interface MultiPositionProps {
-  property: "x" | "y";
-  elements: readonly ExcalidrawElement[];
-  elementsMap: ElementsMap;
-  atomicUnits: AtomicUnit[];
-  scene: Scene;
-}
-
-const STEP_SIZE = 10;
-
-const moveElements = (
-  property: MultiPositionProps["property"],
-  changeInTopX: number,
-  changeInTopY: number,
-  elements: readonly ExcalidrawElement[],
-  originalElements: readonly ExcalidrawElement[],
-  elementsMap: ElementsMap,
-  originalElementsMap: ElementsMap,
-) => {
-  for (let i = 0; i < elements.length; i++) {
-    const origElement = originalElements[i];
-    const latestElement = elements[i];
-
-    const [cx, cy] = [
-      origElement.x + origElement.width / 2,
-      origElement.y + origElement.height / 2,
-    ];
-    const [topLeftX, topLeftY] = rotate(
-      origElement.x,
-      origElement.y,
-      cx,
-      cy,
-      origElement.angle,
-    );
-
-    const newTopLeftX =
-      property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
-
-    const newTopLeftY =
-      property === "y" ? Math.round(topLeftY + changeInTopY) : topLeftY;
-
-    moveElement(
-      newTopLeftX,
-      newTopLeftY,
-      latestElement,
-      origElement,
-      elementsMap,
-      originalElementsMap,
-      false,
-    );
-  }
-};
-
-const moveGroupTo = (
-  nextX: number,
-  nextY: number,
-  latestElements: ExcalidrawElement[],
-  originalElements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
-  originalElementsMap: ElementsMap,
-) => {
-  const [x1, y1, ,] = getCommonBounds(originalElements);
-  const offsetX = nextX - x1;
-  const offsetY = nextY - y1;
-
-  for (let i = 0; i < latestElements.length; i++) {
-    const origElement = originalElements[i];
-    const latestElement = latestElements[i];
-
-    // bound texts are moved with their containers
-    if (!isTextElement(latestElement) || !latestElement.containerId) {
-      const [cx, cy] = [
-        latestElement.x + latestElement.width / 2,
-        latestElement.y + latestElement.height / 2,
-      ];
-
-      const [topLeftX, topLeftY] = rotate(
-        latestElement.x,
-        latestElement.y,
-        cx,
-        cy,
-        latestElement.angle,
-      );
-
-      moveElement(
-        topLeftX + offsetX,
-        topLeftY + offsetY,
-        latestElement,
-        origElement,
-        elementsMap,
-        originalElementsMap,
-        false,
-      );
-    }
-  }
-};
-
-const MultiPosition = ({
-  property,
-  elements,
-  elementsMap,
-  atomicUnits,
-  scene,
-}: MultiPositionProps) => {
-  const positions = useMemo(
-    () =>
-      atomicUnits.map((atomicUnit) => {
-        const elementsInUnit = Object.keys(atomicUnit)
-          .map((id) => elementsMap.get(id))
-          .filter((el) => el !== undefined) as ExcalidrawElement[];
-
-        // we're dealing with a group
-        if (elementsInUnit.length > 1) {
-          const [x1, y1] = getCommonBounds(elementsInUnit);
-          return Math.round((property === "x" ? x1 : y1) * 100) / 100;
-        }
-        const [el] = elementsInUnit;
-        const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
-
-        const [topLeftX, topLeftY] = rotate(el.x, el.y, cx, cy, el.angle);
-
-        return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
-      }),
-    [atomicUnits, elementsMap, property],
-  );
-
-  const value = new Set(positions).size === 1 ? positions[0] : "Mixed";
-
-  const handlePositionChange: DragInputCallbackType = ({
-    accumulatedChange,
-    originalElements,
-    originalElementsMap,
-    shouldChangeByStepSize,
-    nextValue,
-  }) => {
-    if (nextValue !== undefined) {
-      for (const atomicUnit of atomicUnits) {
-        const elementsInUnit = getElementsInAtomicUnit(
-          atomicUnit,
-          elementsMap,
-          originalElementsMap,
-        );
-
-        if (elementsInUnit.length > 1) {
-          const [x1, y1, ,] = getCommonBounds(
-            elementsInUnit.map((el) => el.latest!),
-          );
-          const newTopLeftX = property === "x" ? nextValue : x1;
-          const newTopLeftY = property === "y" ? nextValue : y1;
-
-          moveGroupTo(
-            newTopLeftX,
-            newTopLeftY,
-            elementsInUnit.map((el) => el.latest),
-            elementsInUnit.map((el) => el.original),
-            elementsMap,
-            originalElementsMap,
-          );
-        } else {
-          const origElement = elementsInUnit[0]?.original;
-          const latestElement = elementsInUnit[0]?.latest;
-          if (
-            origElement &&
-            latestElement &&
-            isPropertyEditable(latestElement, property)
-          ) {
-            const [cx, cy] = [
-              origElement.x + origElement.width / 2,
-              origElement.y + origElement.height / 2,
-            ];
-            const [topLeftX, topLeftY] = rotate(
-              origElement.x,
-              origElement.y,
-              cx,
-              cy,
-              origElement.angle,
-            );
-
-            const newTopLeftX = property === "x" ? nextValue : topLeftX;
-            const newTopLeftY = property === "y" ? nextValue : topLeftY;
-            moveElement(
-              newTopLeftX,
-              newTopLeftY,
-              latestElement,
-              origElement,
-              elementsMap,
-              originalElementsMap,
-              false,
-            );
-          }
-        }
-      }
-
-      scene.triggerUpdate();
-      return;
-    }
-
-    const change = shouldChangeByStepSize
-      ? getStepSizedValue(accumulatedChange, STEP_SIZE)
-      : accumulatedChange;
-
-    const changeInTopX = property === "x" ? change : 0;
-    const changeInTopY = property === "y" ? change : 0;
-
-    moveElements(
-      property,
-      changeInTopX,
-      changeInTopY,
-      elements,
-      originalElements,
-      elementsMap,
-      originalElementsMap,
-    );
-
-    scene.triggerUpdate();
-  };
-
-  return (
-    <StatsDragInput
-      label={property === "x" ? "X" : "Y"}
-      elements={elements}
-      dragInputCallback={handlePositionChange}
-      value={value}
-    />
-  );
-};
-
-export default MultiPosition;

packages/excalidraw/components/Stats/Position.tsx

@@ -1,101 +0,0 @@
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import { rotate } from "../../math";
-import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, moveElement } from "./utils";
-
-interface PositionProps {
-  property: "x" | "y";
-  element: ExcalidrawElement;
-  elementsMap: ElementsMap;
-}
-
-const STEP_SIZE = 10;
-
-const Position = ({ property, element, elementsMap }: PositionProps) => {
-  const [topLeftX, topLeftY] = rotate(
-    element.x,
-    element.y,
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-    element.angle,
-  );
-  const value =
-    Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
-
-  const handlePositionChange: DragInputCallbackType = ({
-    accumulatedChange,
-    originalElements,
-    originalElementsMap,
-    shouldChangeByStepSize,
-    nextValue,
-  }) => {
-    const origElement = originalElements[0];
-    const [cx, cy] = [
-      origElement.x + origElement.width / 2,
-      origElement.y + origElement.height / 2,
-    ];
-    const [topLeftX, topLeftY] = rotate(
-      origElement.x,
-      origElement.y,
-      cx,
-      cy,
-      origElement.angle,
-    );
-
-    if (nextValue !== undefined) {
-      const newTopLeftX = property === "x" ? nextValue : topLeftX;
-      const newTopLeftY = property === "y" ? nextValue : topLeftY;
-      moveElement(
-        newTopLeftX,
-        newTopLeftY,
-        element,
-        origElement,
-        elementsMap,
-        originalElementsMap,
-      );
-      return;
-    }
-
-    const changeInTopX = property === "x" ? accumulatedChange : 0;
-    const changeInTopY = property === "y" ? accumulatedChange : 0;
-
-    const newTopLeftX =
-      property === "x"
-        ? Math.round(
-            shouldChangeByStepSize
-              ? getStepSizedValue(origElement.x + changeInTopX, STEP_SIZE)
-              : topLeftX + changeInTopX,
-          )
-        : topLeftX;
-
-    const newTopLeftY =
-      property === "y"
-        ? Math.round(
-            shouldChangeByStepSize
-              ? getStepSizedValue(origElement.y + changeInTopY, STEP_SIZE)
-              : topLeftY + changeInTopY,
-          )
-        : topLeftY;
-
-    moveElement(
-      newTopLeftX,
-      newTopLeftY,
-      element,
-      origElement,
-      elementsMap,
-      originalElementsMap,
-    );
-  };
-
-  return (
-    <StatsDragInput
-      label={property === "x" ? "X" : "Y"}
-      elements={[element]}
-      dragInputCallback={handlePositionChange}
-      value={value}
-    />
-  );
-};
-
-export default Position;

packages/excalidraw/components/Stats/index.scss

@@ -0,0 +1,93 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .Stats {
+    width: 204px;
+    position: absolute;
+    top: 64px;
+    right: 12px;
+    font-size: 12px;
+    z-index: 10;
+    pointer-events: var(--ui-pointerEvents);
+
+    .sectionContent {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .elementType {
+      font-size: 12px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+
+    .elementsCount {
+      width: 100%;
+      font-size: 12px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+
+    .statsItem {
+      width: 100%;
+      margin-bottom: 4px;
+      display: grid;
+      gap: 4px;
+
+      .label {
+        margin-right: 4px;
+      }
+    }
+
+    h3 {
+      margin: 0 24px 8px 0;
+      white-space: nowrap;
+    }
+
+    .close {
+      float: right;
+      height: 16px;
+      width: 16px;
+      cursor: pointer;
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    table {
+      width: 100%;
+      th {
+        border-bottom: 1px solid var(--input-border-color);
+        padding: 4px;
+      }
+      tr {
+        td:nth-child(2) {
+          min-width: 24px;
+          text-align: right;
+        }
+      }
+    }
+
+    .divider {
+      width: 100%;
+      height: 1px;
+      background-color: var(--default-border-color);
+    }
+
+    :root[dir="rtl"] & {
+      left: 12px;
+      right: initial;
+
+      h3 {
+        margin: 0 0 8px 24px;
+      }
+      .close {
+        float: left;
+      }
+    }
+  }
+}

packages/excalidraw/components/Stats/index.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useMemo, useState, memo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { getCommonBounds } from "../../element/bounds";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { t } from "../../i18n";
+import { getSelectedElements } from "../../scene";
+import type Scene from "../../scene/Scene";
 import type { AppState, ExcalidrawProps } from "../../types";
 import { CloseIcon } from "../icons";
 import { Island } from "../Island";
@@ -9,298 +11,165 @@ import { throttle } from "lodash";
 import Dimension from "./Dimension";
 import Angle from "./Angle";
 
+import "./index.scss";
 import FontSize from "./FontSize";
 import MultiDimension from "./MultiDimension";
-import {
-  elementsAreInSameGroup,
-  getElementsInGroup,
-  getSelectedGroupIds,
-  isInGroup,
-} from "../../groups";
-import MultiAngle from "./MultiAngle";
-import MultiFontSize from "./MultiFontSize";
-import Position from "./Position";
-import MultiPosition from "./MultiPosition";
-import Collapsible from "./Collapsible";
-import type Scene from "../../scene/Scene";
-import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
-import type { AtomicUnit } from "./utils";
-import { STATS_PANELS } from "../../constants";
+import { elementsAreInSameGroup } from "../../groups";
 
 interface StatsProps {
+  appState: AppState;
   scene: Scene;
+  setAppState: React.Component<any, AppState>["setState"];
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }
-
 const STATS_TIMEOUT = 50;
 
 export const Stats = (props: StatsProps) => {
-  const appState = useExcalidrawAppState();
-  const sceneNonce = props.scene.getSceneNonce() || 1;
-  const selectedElements = props.scene.getSelectedElements({
-    selectedElementIds: appState.selectedElementIds,
-    includeBoundTextElement: false,
+  const elements = props.scene.getNonDeletedElements();
+  const elementsMap = props.scene.getNonDeletedElementsMap();
+  const sceneNonce = props.scene.getSceneNonce();
+  // const selectedElements = getTargetElements(elements, props.appState);
+  const selectedElements = getSelectedElements(
+    props.scene.getNonDeletedElementsMap(),
+    props.appState,
+    {
+      includeBoundTextElement: false,
+    },
+  );
+
+  const singleElement =
+    selectedElements.length === 1 ? selectedElements[0] : null;
+
+  const multipleElements =
+    selectedElements.length > 1 ? selectedElements : null;
+
+  const [sceneDimension, setSceneDimension] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0,
   });
 
+  const throttledSetSceneDimension = useMemo(
+    () =>
+      throttle((elements: readonly NonDeletedExcalidrawElement[]) => {
+        const boundingBox = getCommonBounds(elements);
+        setSceneDimension({
+          width: Math.round(boundingBox[2]) - Math.round(boundingBox[0]),
+          height: Math.round(boundingBox[3]) - Math.round(boundingBox[1]),
+        });
+      }, STATS_TIMEOUT),
+    [],
+  );
+
+  useEffect(() => {
+    throttledSetSceneDimension(elements);
+  }, [sceneNonce, elements, throttledSetSceneDimension]);
+
+  useEffect(
+    () => () => throttledSetSceneDimension.cancel(),
+    [throttledSetSceneDimension],
+  );
+
   return (
-    <StatsInner
-      {...props}
-      appState={appState}
-      sceneNonce={sceneNonce}
-      selectedElements={selectedElements}
-    />
+    <div className="Stats">
+      <Island padding={3}>
+        <div className="section">
+          <div className="close" onClick={props.onClose}>
+            {CloseIcon}
+          </div>
+          <h3>{t("stats.generalStats")}</h3>
+          <table>
+            <tbody>
+              <tr>
+                <th colSpan={2}>{t("stats.scene")}</th>
+              </tr>
+              <tr>
+                <td>{t("stats.elements")}</td>
+                <td>{elements.length}</td>
+              </tr>
+              <tr>
+                <td>{t("stats.width")}</td>
+                <td>{sceneDimension.width}</td>
+              </tr>
+              <tr>
+                <td>{t("stats.height")}</td>
+                <td>{sceneDimension.height}</td>
+              </tr>
+              {props.renderCustomStats?.(elements, props.appState)}
+            </tbody>
+          </table>
+        </div>
+
+        {selectedElements.length > 0 && (
+          <div
+            className="section"
+            style={{
+              marginTop: 12,
+            }}
+          >
+            <h3>{t("stats.elementStats")}</h3>
+
+            {singleElement && (
+              <div className="sectionContent">
+                <div className="elementType">
+                  {t(`element.${singleElement.type}`)}
+                </div>
+
+                <div className="statsItem">
+                  <Dimension
+                    property="width"
+                    element={singleElement}
+                    elementsMap={elementsMap}
+                  />
+                  <Dimension
+                    property="height"
+                    element={singleElement}
+                    elementsMap={elementsMap}
+                  />
+                  <Angle element={singleElement} elementsMap={elementsMap} />
+                  {singleElement.type === "text" && (
+                    <FontSize
+                      element={singleElement}
+                      elementsMap={elementsMap}
+                    />
+                  )}
+                </div>
+
+                {singleElement.type === "text" && <div></div>}
+              </div>
+            )}
+
+            {multipleElements && (
+              <div className="sectionContent">
+                {elementsAreInSameGroup(multipleElements) && (
+                  <div className="elementType">{t("element.group")}</div>
+                )}
+
+                <div className="elementsCount">
+                  <div>{t("stats.elements")}</div>
+                  <div>{selectedElements.length}</div>
+                </div>
+
+                <div className="statsItem">
+                  <MultiDimension
+                    property="width"
+                    elements={multipleElements}
+                    elementsMap={elementsMap}
+                  />
+                  <MultiDimension
+                    property="height"
+                    elements={multipleElements}
+                    elementsMap={elementsMap}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </Island>
+    </div>
   );
 };
-
-export const StatsInner = memo(
-  ({
-    scene,
-    onClose,
-    renderCustomStats,
-    selectedElements,
-    appState,
-    sceneNonce,
-  }: StatsProps & {
-    sceneNonce: number;
-    selectedElements: readonly NonDeletedExcalidrawElement[];
-    appState: AppState;
-  }) => {
-    const elements = scene.getNonDeletedElements();
-    const elementsMap = scene.getNonDeletedElementsMap();
-    const setAppState = useExcalidrawSetAppState();
-
-    const singleElement =
-      selectedElements.length === 1 ? selectedElements[0] : null;
-
-    const multipleElements =
-      selectedElements.length > 1 ? selectedElements : null;
-
-    const [sceneDimension, setSceneDimension] = useState<{
-      width: number;
-      height: number;
-    }>({
-      width: 0,
-      height: 0,
-    });
-
-    const throttledSetSceneDimension = useMemo(
-      () =>
-        throttle((elements: readonly NonDeletedExcalidrawElement[]) => {
-          const boundingBox = getCommonBounds(elements);
-          setSceneDimension({
-            width: Math.round(boundingBox[2]) - Math.round(boundingBox[0]),
-            height: Math.round(boundingBox[3]) - Math.round(boundingBox[1]),
-          });
-        }, STATS_TIMEOUT),
-      [],
-    );
-
-    useEffect(() => {
-      throttledSetSceneDimension(elements);
-    }, [sceneNonce, elements, throttledSetSceneDimension]);
-
-    useEffect(
-      () => () => throttledSetSceneDimension.cancel(),
-      [throttledSetSceneDimension],
-    );
-
-    const atomicUnits = useMemo(() => {
-      const selectedGroupIds = getSelectedGroupIds(appState);
-      const _atomicUnits = selectedGroupIds.map((gid) => {
-        return getElementsInGroup(selectedElements, gid).reduce((acc, el) => {
-          acc[el.id] = true;
-          return acc;
-        }, {} as AtomicUnit);
-      });
-      selectedElements
-        .filter((el) => !isInGroup(el))
-        .forEach((el) => {
-          _atomicUnits.push({
-            [el.id]: true,
-          });
-        });
-      return _atomicUnits;
-    }, [selectedElements, appState]);
-
-    return (
-      <div className="Stats">
-        <Island padding={3}>
-          <div className="title">
-            <h2>{t("stats.title")}</h2>
-            <div className="close" onClick={onClose}>
-              {CloseIcon}
-            </div>
-          </div>
-
-          <Collapsible
-            label={<h3>{t("stats.generalStats")}</h3>}
-            open={!!(appState.stats.panels & STATS_PANELS.generalStats)}
-            openTrigger={() =>
-              setAppState((state) => {
-                return {
-                  ...state,
-                  stats: {
-                    open: true,
-                    panels: state.stats.panels ^ STATS_PANELS.generalStats,
-                  },
-                };
-              })
-            }
-          >
-            <table>
-              <tbody>
-                <tr>
-                  <th colSpan={2}>{t("stats.scene")}</th>
-                </tr>
-                <tr>
-                  <td>{t("stats.elements")}</td>
-                  <td>{elements.length}</td>
-                </tr>
-                <tr>
-                  <td>{t("stats.width")}</td>
-                  <td>{sceneDimension.width}</td>
-                </tr>
-                <tr>
-                  <td>{t("stats.height")}</td>
-                  <td>{sceneDimension.height}</td>
-                </tr>
-                {renderCustomStats?.(elements, appState)}
-              </tbody>
-            </table>
-          </Collapsible>
-
-          {selectedElements.length > 0 && (
-            <div
-              id="elementStats"
-              style={{
-                marginTop: 12,
-              }}
-            >
-              <Collapsible
-                label={<h3>{t("stats.elementProperties")}</h3>}
-                open={
-                  !!(appState.stats.panels & STATS_PANELS.elementProperties)
-                }
-                openTrigger={() =>
-                  setAppState((state) => {
-                    return {
-                      ...state,
-                      stats: {
-                        open: true,
-                        panels:
-                          state.stats.panels ^ STATS_PANELS.elementProperties,
-                      },
-                    };
-                  })
-                }
-              >
-                {singleElement && (
-                  <div className="sectionContent">
-                    <div className="elementType">
-                      {t(`element.${singleElement.type}`)}
-                    </div>
-
-                    <div className="statsItem">
-                      <Position
-                        element={singleElement}
-                        property="x"
-                        elementsMap={elementsMap}
-                      />
-                      <Position
-                        element={singleElement}
-                        property="y"
-                        elementsMap={elementsMap}
-                      />
-                      <Dimension
-                        property="width"
-                        element={singleElement}
-                        elementsMap={elementsMap}
-                      />
-                      <Dimension
-                        property="height"
-                        element={singleElement}
-                        elementsMap={elementsMap}
-                      />
-                      <Angle
-                        element={singleElement}
-                        elementsMap={elementsMap}
-                      />
-                      {singleElement.type === "text" && (
-                        <FontSize
-                          element={singleElement}
-                          elementsMap={elementsMap}
-                        />
-                      )}
-                    </div>
-                  </div>
-                )}
-
-                {multipleElements && (
-                  <div className="sectionContent">
-                    {elementsAreInSameGroup(multipleElements) && (
-                      <div className="elementType">{t("element.group")}</div>
-                    )}
-
-                    <div className="elementsCount">
-                      <div>{t("stats.elements")}</div>
-                      <div>{selectedElements.length}</div>
-                    </div>
-
-                    <div className="statsItem">
-                      <MultiPosition
-                        property="x"
-                        elements={multipleElements}
-                        elementsMap={elementsMap}
-                        atomicUnits={atomicUnits}
-                        scene={scene}
-                      />
-                      <MultiPosition
-                        property="y"
-                        elements={multipleElements}
-                        elementsMap={elementsMap}
-                        atomicUnits={atomicUnits}
-                        scene={scene}
-                      />
-                      <MultiDimension
-                        property="width"
-                        elements={multipleElements}
-                        elementsMap={elementsMap}
-                        atomicUnits={atomicUnits}
-                        scene={scene}
-                      />
-                      <MultiDimension
-                        property="height"
-                        elements={multipleElements}
-                        elementsMap={elementsMap}
-                        atomicUnits={atomicUnits}
-                        scene={scene}
-                      />
-                      <MultiAngle
-                        elements={multipleElements}
-                        elementsMap={elementsMap}
-                        scene={scene}
-                      />
-                      <MultiFontSize
-                        elements={multipleElements}
-                        elementsMap={elementsMap}
-                        scene={scene}
-                      />
-                    </div>
-                  </div>
-                )}
-              </Collapsible>
-            </div>
-          )}
-        </Island>
-      </div>
-    );
-  },
-  (prev, next) => {
-    return (
-      prev.sceneNonce === next.sceneNonce &&
-      prev.selectedElements === next.selectedElements &&
-      prev.appState.stats.panels === next.appState.stats.panels
-    );
-  },
-);

packages/excalidraw/components/Stats/stats.test.tsx

@@ -1,658 +0,0 @@
-import { fireEvent, queryByTestId } from "@testing-library/react";
-import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
-import { getStepSizedValue } from "./utils";
-import {
-  GlobalTestState,
-  mockBoundingClientRect,
-  render,
-  restoreOriginalGetBoundingClientRect,
-} from "../../tests/test-utils";
-import * as StaticScene from "../../renderer/staticScene";
-import { vi } from "vitest";
-import { reseed } from "../../random";
-import { setDateTimeForTests } from "../../utils";
-import { Excalidraw } from "../..";
-import { t } from "../../i18n";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
-import { degreeToRadian, rotate } from "../../math";
-import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
-import { getCommonBounds, isTextElement } from "../../element";
-import { API } from "../../tests/helpers/api";
-import { actionGroup } from "../../actions";
-import { isInGroup } from "../../groups";
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
-let stats: HTMLElement | null = null;
-let elementStats: HTMLElement | null | undefined = null;
-
-const getStatsProperty = (label: string) => {
-  if (elementStats) {
-    const properties = elementStats?.querySelector(".statsItem");
-    return properties?.querySelector?.(
-      `.drag-input-container[data-testid="${label}"]`,
-    );
-  }
-
-  return null;
-};
-
-const testInputProperty = (
-  element: ExcalidrawElement,
-  property: "x" | "y" | "width" | "height" | "angle" | "fontSize",
-  label: string,
-  initialValue: number,
-  nextValue: number,
-) => {
-  const input = getStatsProperty(label)?.querySelector(
-    ".drag-input",
-  ) as HTMLInputElement;
-  expect(input).not.toBeNull();
-  expect(input.value).toBe(initialValue.toString());
-  input?.focus();
-  input.value = nextValue.toString();
-  input?.blur();
-  if (property === "angle") {
-    expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
-  } else if (property === "fontSize" && isTextElement(element)) {
-    expect(element[property]).toBe(Number(nextValue));
-  } else if (property !== "fontSize") {
-    expect(element[property]).toBe(Number(nextValue));
-  }
-};
-
-describe("step sized value", () => {
-  it("should return edge values correctly", () => {
-    const steps = [10, 15, 20, 25, 30];
-    const values = [10, 15, 20, 25, 30];
-
-    steps.forEach((step, idx) => {
-      expect(getStepSizedValue(values[idx], step)).toEqual(values[idx]);
-    });
-  });
-
-  it("step sized value lies in the middle", () => {
-    let stepSize = 15;
-    let values = [7.5, 9, 12, 14.99, 15, 22.49];
-
-    values.forEach((value) => {
-      expect(getStepSizedValue(value, stepSize)).toEqual(15);
-    });
-
-    stepSize = 10;
-    values = [-5, 4.99, 0, 1.23];
-    values.forEach((value) => {
-      expect(getStepSizedValue(value, stepSize)).toEqual(0);
-    });
-  });
-});
-
-// single element
-describe("stats for a generic element", () => {
-  beforeEach(async () => {
-    localStorage.clear();
-    renderStaticScene.mockClear();
-    reseed(7);
-    setDateTimeForTests("201933152653");
-
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-
-    h.elements = [];
-
-    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
-      button: 2,
-      clientX: 1,
-      clientY: 1,
-    });
-    const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByTestId(contextMenu!, "stats")!);
-    stats = UI.queryStats();
-
-    UI.clickTool("rectangle");
-    mouse.down();
-    mouse.up(200, 100);
-    elementStats = stats?.querySelector("#elementStats");
-  });
-
-  beforeAll(() => {
-    mockBoundingClientRect();
-  });
-
-  afterAll(() => {
-    restoreOriginalGetBoundingClientRect();
-  });
-
-  it("should open stats", () => {
-    expect(stats).not.toBeNull();
-    expect(elementStats).not.toBeNull();
-
-    // title
-    const title = elementStats?.querySelector("h3");
-    expect(title?.lastChild?.nodeValue)?.toBe(t("stats.elementProperties"));
-
-    // element type
-    const elementType = elementStats?.querySelector(".elementType");
-    expect(elementType).not.toBeNull();
-    expect(elementType?.lastChild?.nodeValue).toBe(t("element.rectangle"));
-
-    // properties
-    const properties = elementStats?.querySelector(".statsItem");
-    expect(properties?.childNodes).not.toBeNull();
-    ["X", "Y", "W", "H", "A"].forEach((label) => () => {
-      expect(
-        properties?.querySelector?.(
-          `.drag-input-container[data-testid="${label}"]`,
-        ),
-      ).not.toBeNull();
-    });
-  });
-
-  it("should be able to edit all properties for a general element", () => {
-    const rectangle = h.elements[0];
-    const initialX = rectangle.x;
-    const initialY = rectangle.y;
-
-    testInputProperty(rectangle, "width", "W", 200, 100);
-    testInputProperty(rectangle, "height", "H", 100, 200);
-    testInputProperty(rectangle, "x", "X", initialX, 230);
-    testInputProperty(rectangle, "y", "Y", initialY, 220);
-    testInputProperty(rectangle, "angle", "A", 0, 45);
-  });
-
-  it("should keep only two decimal places", () => {
-    const rectangle = h.elements[0];
-    const rectangleId = rectangle.id;
-
-    const input = getStatsProperty("W")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(input).not.toBeNull();
-    expect(input.value).toBe(rectangle.width.toString());
-    input?.focus();
-    input.value = "123.123";
-    input?.blur();
-    expect(h.elements.length).toBe(1);
-    expect(rectangle.id).toBe(rectangleId);
-    expect(input.value).toBe("123.12");
-    expect(rectangle.width).toBe(123.12);
-
-    input?.focus();
-    input.value = "88.98766";
-    input?.blur();
-    expect(input.value).toBe("88.99");
-    expect(rectangle.width).toBe(88.99);
-  });
-
-  it("should update input x and y when angle is changed", () => {
-    const rectangle = h.elements[0];
-    const [cx, cy] = [
-      rectangle.x + rectangle.width / 2,
-      rectangle.y + rectangle.height / 2,
-    ];
-    const [topLeftX, topLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
-      rectangle.angle,
-    );
-
-    const xInput = getStatsProperty("X")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    const yInput = getStatsProperty("Y")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(xInput.value).toBe(topLeftX.toString());
-    expect(yInput.value).toBe(topLeftY.toString());
-
-    testInputProperty(rectangle, "angle", "A", 0, 45);
-
-    let [newTopLeftX, newTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
-      rectangle.angle,
-    );
-
-    expect(newTopLeftX.toString()).not.toEqual(xInput.value);
-    expect(newTopLeftY.toString()).not.toEqual(yInput.value);
-
-    testInputProperty(rectangle, "angle", "A", 45, 66);
-
-    [newTopLeftX, newTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
-      rectangle.angle,
-    );
-    expect(newTopLeftX.toString()).not.toEqual(xInput.value);
-    expect(newTopLeftY.toString()).not.toEqual(yInput.value);
-  });
-
-  it("should fix top left corner when width or height is changed", () => {
-    const rectangle = h.elements[0];
-
-    testInputProperty(rectangle, "angle", "A", 0, 45);
-    let [cx, cy] = [
-      rectangle.x + rectangle.width / 2,
-      rectangle.y + rectangle.height / 2,
-    ];
-    const [topLeftX, topLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
-      rectangle.angle,
-    );
-    testInputProperty(rectangle, "width", "W", rectangle.width, 400);
-    [cx, cy] = [
-      rectangle.x + rectangle.width / 2,
-      rectangle.y + rectangle.height / 2,
-    ];
-    let [currentTopLeftX, currentTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
-      rectangle.angle,
-    );
-    expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
-    expect(currentTopLeftY).toBeCloseTo(topLeftY, 4);
-
-    testInputProperty(rectangle, "height", "H", rectangle.height, 400);
-    [cx, cy] = [
-      rectangle.x + rectangle.width / 2,
-      rectangle.y + rectangle.height / 2,
-    ];
-    [currentTopLeftX, currentTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
-      rectangle.angle,
-    );
-
-    expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
-    expect(currentTopLeftY).toBeCloseTo(topLeftY, 4);
-  });
-});
-
-describe("stats for a non-generic element", () => {
-  beforeEach(async () => {
-    localStorage.clear();
-    renderStaticScene.mockClear();
-    reseed(7);
-    setDateTimeForTests("201933152653");
-
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-
-    h.elements = [];
-
-    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
-      button: 2,
-      clientX: 1,
-      clientY: 1,
-    });
-    const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByTestId(contextMenu!, "stats")!);
-    stats = UI.queryStats();
-  });
-
-  beforeAll(() => {
-    mockBoundingClientRect();
-  });
-
-  afterAll(() => {
-    restoreOriginalGetBoundingClientRect();
-  });
-
-  it("text element", async () => {
-    UI.clickTool("text");
-    mouse.clickAt(20, 30);
-    const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
-    const editor = await getTextEditor(textEditorSelector, true);
-    await new Promise((r) => setTimeout(r, 0));
-    updateTextEditor(editor, "Hello!");
-    editor.blur();
-
-    const text = h.elements[0] as ExcalidrawTextElement;
-    mouse.clickOn(text);
-
-    elementStats = stats?.querySelector("#elementStats");
-
-    // can change font size
-    const input = getStatsProperty("F")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(input).not.toBeNull();
-    expect(input.value).toBe(text.fontSize.toString());
-    input?.focus();
-    input.value = "36";
-    input?.blur();
-    expect(text.fontSize).toBe(36);
-
-    // cannot change width or height
-    const width = getStatsProperty("W")?.querySelector(".drag-input");
-    expect(width).toBeUndefined();
-    const height = getStatsProperty("H")?.querySelector(".drag-input");
-    expect(height).toBeUndefined();
-
-    // min font size is 4
-    input.focus();
-    input.value = "0";
-    input.blur();
-    expect(text.fontSize).not.toBe(0);
-    expect(text.fontSize).toBe(4);
-  });
-
-  it("frame element", () => {
-    const frame = API.createElement({
-      id: "id0",
-      type: "frame",
-      x: 150,
-      width: 150,
-    });
-    h.elements = [frame];
-    h.setState({
-      selectedElementIds: {
-        [frame.id]: true,
-      },
-    });
-
-    elementStats = stats?.querySelector("#elementStats");
-
-    expect(elementStats).not.toBeNull();
-
-    // cannot change angle
-    const angle = getStatsProperty("A")?.querySelector(".drag-input");
-    expect(angle).toBeUndefined();
-
-    // can change width or height
-    testInputProperty(frame, "width", "W", frame.width, 250);
-    testInputProperty(frame, "height", "H", frame.height, 500);
-  });
-
-  it("image element", () => {
-    const image = API.createElement({ type: "image", width: 200, height: 100 });
-    h.elements = [image];
-    mouse.clickOn(image);
-    h.setState({
-      selectedElementIds: {
-        [image.id]: true,
-      },
-    });
-    elementStats = stats?.querySelector("#elementStats");
-    expect(elementStats).not.toBeNull();
-    const widthToHeight = image.width / image.height;
-
-    // when width or height is changed, the aspect ratio is preserved
-    testInputProperty(image, "width", "W", image.width, 400);
-    expect(image.width).toBe(400);
-    expect(image.width / image.height).toBe(widthToHeight);
-
-    testInputProperty(image, "height", "H", image.height, 80);
-    expect(image.height).toBe(80);
-    expect(image.width / image.height).toBe(widthToHeight);
-  });
-});
-
-// multiple elements
-describe("stats for multiple elements", () => {
-  beforeEach(async () => {
-    mouse.reset();
-    localStorage.clear();
-    renderStaticScene.mockClear();
-    reseed(7);
-    setDateTimeForTests("201933152653");
-
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-
-    h.elements = [];
-
-    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
-      button: 2,
-      clientX: 1,
-      clientY: 1,
-    });
-    const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByTestId(contextMenu!, "stats")!);
-    stats = UI.queryStats();
-  });
-
-  beforeAll(() => {
-    mockBoundingClientRect();
-  });
-
-  afterAll(() => {
-    restoreOriginalGetBoundingClientRect();
-  });
-
-  it("should display MIXED for elements with different values", () => {
-    UI.clickTool("rectangle");
-    mouse.down();
-    mouse.up(200, 100);
-
-    UI.clickTool("ellipse");
-    mouse.down(50, 50);
-    mouse.up(100, 100);
-
-    UI.clickTool("diamond");
-    mouse.down(-100, -100);
-    mouse.up(125, 145);
-
-    h.setState({
-      selectedElementIds: h.elements.reduce((acc, el) => {
-        acc[el.id] = true;
-        return acc;
-      }, {} as Record<string, true>),
-    });
-
-    elementStats = stats?.querySelector("#elementStats");
-
-    const width = getStatsProperty("W")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(width?.value).toBe("Mixed");
-    const height = getStatsProperty("H")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(height?.value).toBe("Mixed");
-    const angle = getStatsProperty("A")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(angle.value).toBe("0");
-
-    width.focus();
-    width.value = "250";
-    width.blur();
-    h.elements.forEach((el) => {
-      expect(el.width).toBe(250);
-    });
-
-    height.focus();
-    height.value = "450";
-    height.blur();
-    h.elements.forEach((el) => {
-      expect(el.height).toBe(450);
-    });
-  });
-
-  it("should display a property when one of the elements is editable for that property", async () => {
-    // text, rectangle, frame
-    UI.clickTool("text");
-    mouse.clickAt(20, 30);
-    const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
-    const editor = await getTextEditor(textEditorSelector, true);
-    await new Promise((r) => setTimeout(r, 0));
-    updateTextEditor(editor, "Hello!");
-    editor.blur();
-
-    UI.clickTool("rectangle");
-    mouse.down();
-    mouse.up(200, 100);
-
-    const frame = API.createElement({
-      id: "id0",
-      type: "frame",
-      x: 150,
-      width: 150,
-    });
-
-    h.elements = [...h.elements, frame];
-
-    const text = h.elements.find((el) => el.type === "text");
-    const rectangle = h.elements.find((el) => el.type === "rectangle");
-
-    h.setState({
-      selectedElementIds: h.elements.reduce((acc, el) => {
-        acc[el.id] = true;
-        return acc;
-      }, {} as Record<string, true>),
-    });
-
-    elementStats = stats?.querySelector("#elementStats");
-
-    const width = getStatsProperty("W")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(width).not.toBeNull();
-    expect(width.value).toBe("Mixed");
-
-    const height = getStatsProperty("H")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(height).not.toBeNull();
-    expect(height.value).toBe("Mixed");
-
-    const angle = getStatsProperty("A")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(angle).not.toBeNull();
-    expect(angle.value).toBe("0");
-
-    const fontSize = getStatsProperty("F")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(fontSize).not.toBeNull();
-
-    // changing width does not affect text
-    width.focus();
-    width.value = "200";
-    width.blur();
-
-    expect(rectangle?.width).toBe(200);
-    expect(frame.width).toBe(200);
-    expect(text?.width).not.toBe(200);
-
-    angle.focus();
-    angle.value = "40";
-    angle.blur();
-
-    const angleInRadian = degreeToRadian(40);
-    expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
-    expect(text?.angle).toBeCloseTo(angleInRadian, 4);
-    expect(frame.angle).toBe(0);
-  });
-
-  it("should treat groups as single units", () => {
-    const createAndSelectGroup = () => {
-      UI.clickTool("rectangle");
-      mouse.down();
-      mouse.up(100, 100);
-
-      UI.clickTool("rectangle");
-      mouse.down(0, 0);
-      mouse.up(100, 100);
-
-      mouse.reset();
-      Keyboard.withModifierKeys({ shift: true }, () => {
-        mouse.click();
-      });
-
-      h.app.actionManager.executeAction(actionGroup);
-    };
-
-    createAndSelectGroup();
-
-    const elementsInGroup = h.elements.filter((el) => isInGroup(el));
-    let [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
-
-    elementStats = stats?.querySelector("#elementStats");
-
-    const x = getStatsProperty("X")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(x).not.toBeNull();
-    expect(Number(x.value)).toBe(x1);
-
-    x.focus();
-    x.value = "300";
-    x.blur();
-
-    expect(h.elements[0].x).toBe(300);
-    expect(h.elements[1].x).toBe(400);
-    expect(x.value).toBe("300");
-
-    const y = getStatsProperty("Y")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(y).not.toBeNull();
-    expect(Number(y.value)).toBe(y1);
-
-    y.focus();
-    y.value = "200";
-    y.blur();
-
-    expect(h.elements[0].y).toBe(200);
-    expect(h.elements[1].y).toBe(300);
-    expect(y.value).toBe("200");
-
-    const width = getStatsProperty("W")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(width).not.toBeNull();
-    expect(Number(width.value)).toBe(200);
-
-    const height = getStatsProperty("H")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(height).not.toBeNull();
-    expect(Number(height.value)).toBe(200);
-
-    width.focus();
-    width.value = "400";
-    width.blur();
-
-    [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
-    let newGroupWidth = x2 - x1;
-
-    expect(newGroupWidth).toBeCloseTo(400, 4);
-
-    width.focus();
-    width.value = "300";
-    width.blur();
-
-    [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
-    newGroupWidth = x2 - x1;
-    expect(newGroupWidth).toBeCloseTo(300, 4);
-
-    height.focus();
-    height.value = "500";
-    height.blur();
-
-    [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
-    const newGroupHeight = y2 - y1;
-    expect(newGroupHeight).toBeCloseTo(500, 4);
-  });
-});

packages/excalidraw/components/Stats/utils.ts

@@ -1,26 +1,5 @@
-import { updateBoundElements } from "../../element/binding";
-import { mutateElement } from "../../element/mutateElement";
-import {
-  measureFontSizeFromWidth,
-  rescalePointsInElement,
-} from "../../element/resizeElements";
-import {
-  getApproxMinLineHeight,
-  getApproxMinLineWidth,
-  getBoundTextElement,
-  getBoundTextMaxWidth,
-  handleBindTextResize,
-} from "../../element/textElement";
 import { isFrameLikeElement, isTextElement } from "../../element/typeChecks";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "../../element/types";
-import { rotate } from "../../math";
-import { getFontString } from "../../utils";
-
-export const SMALLEST_DELTA = 0.01;
+import type { ExcalidrawElement } from "../../element/types";
 
 export const isPropertyEditable = (
   element: ExcalidrawElement,
@@ -42,197 +21,3 @@ export const getStepSizedValue = (value: number, stepSize: number) => {
   const v = value + stepSize / 2;
   return v - (v % stepSize);
 };
-
-export type AtomicUnit = Record<string, true>;
-export const getElementsInAtomicUnit = (
-  atomicUnit: AtomicUnit,
-  elementsMap: ElementsMap,
-  originalElementsMap?: ElementsMap,
-) => {
-  return Object.keys(atomicUnit)
-    .map((id) => ({
-      original: (originalElementsMap ?? elementsMap).get(id),
-      latest: elementsMap.get(id),
-    }))
-    .filter((el) => el.original !== undefined && el.latest !== undefined) as {
-    original: NonDeletedExcalidrawElement;
-    latest: NonDeletedExcalidrawElement;
-  }[];
-};
-
-export const newOrigin = (
-  x1: number,
-  y1: number,
-  w1: number,
-  h1: number,
-  w2: number,
-  h2: number,
-  angle: number,
-) => {
-  /**
-   * The formula below is the result of solving
-   *   rotate(x1, y1, cx1, cy1, angle) = rotate(x2, y2, cx2, cy2, angle)
-   * where rotate is the function defined in math.ts
-   *
-   * This is so that the new origin (x2, y2),
-   * when rotated against the new center (cx2, cy2),
-   * coincides with (x1, y1) rotated against (cx1, cy1)
-   *
-   * The reason for doing this computation is so the element's top left corner
-   * on the canvas remains fixed after any changes in its dimension.
-   */
-
-  return {
-    x:
-      x1 +
-      (w1 - w2) / 2 +
-      ((w2 - w1) / 2) * Math.cos(angle) +
-      ((h1 - h2) / 2) * Math.sin(angle),
-    y:
-      y1 +
-      (h1 - h2) / 2 +
-      ((w2 - w1) / 2) * Math.sin(angle) +
-      ((h2 - h1) / 2) * Math.cos(angle),
-  };
-};
-
-export const resizeElement = (
-  nextWidth: number,
-  nextHeight: number,
-  keepAspectRatio: boolean,
-  latestElement: ExcalidrawElement,
-  origElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
-  originalElementsMap: Map<string, ExcalidrawElement>,
-  shouldInformMutation = true,
-) => {
-  let boundTextFont: { fontSize?: number } = {};
-  const boundTextElement = getBoundTextElement(latestElement, elementsMap);
-
-  if (boundTextElement) {
-    const minWidth = getApproxMinLineWidth(
-      getFontString(boundTextElement),
-      boundTextElement.lineHeight,
-    );
-    const minHeight = getApproxMinLineHeight(
-      boundTextElement.fontSize,
-      boundTextElement.lineHeight,
-    );
-    nextWidth = Math.max(nextWidth, minWidth);
-    nextHeight = Math.max(nextHeight, minHeight);
-  }
-
-  mutateElement(
-    latestElement,
-    {
-      ...newOrigin(
-        latestElement.x,
-        latestElement.y,
-        latestElement.width,
-        latestElement.height,
-        nextWidth,
-        nextHeight,
-        latestElement.angle,
-      ),
-      width: nextWidth,
-      height: nextHeight,
-      ...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
-    },
-    shouldInformMutation,
-  );
-
-  if (boundTextElement) {
-    boundTextFont = {
-      fontSize: boundTextElement.fontSize,
-    };
-    if (keepAspectRatio) {
-      const updatedElement = {
-        ...latestElement,
-        width: nextWidth,
-        height: nextHeight,
-      };
-
-      const nextFont = measureFontSizeFromWidth(
-        boundTextElement,
-        elementsMap,
-        getBoundTextMaxWidth(updatedElement, boundTextElement),
-      );
-      boundTextFont = {
-        fontSize: nextFont?.size ?? boundTextElement.fontSize,
-      };
-    }
-  }
-
-  updateBoundElements(latestElement, elementsMap, {
-    newSize: {
-      width: nextWidth,
-      height: nextHeight,
-    },
-  });
-
-  if (boundTextElement && boundTextFont) {
-    mutateElement(boundTextElement, {
-      fontSize: boundTextFont.fontSize,
-    });
-  }
-  handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
-};
-
-export const moveElement = (
-  newTopLeftX: number,
-  newTopLeftY: number,
-  latestElement: ExcalidrawElement,
-  originalElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
-  originalElementsMap: ElementsMap,
-  shouldInformMutation = true,
-) => {
-  const [cx, cy] = [
-    originalElement.x + originalElement.width / 2,
-    originalElement.y + originalElement.height / 2,
-  ];
-  const [topLeftX, topLeftY] = rotate(
-    originalElement.x,
-    originalElement.y,
-    cx,
-    cy,
-    originalElement.angle,
-  );
-
-  const changeInX = newTopLeftX - topLeftX;
-  const changeInY = newTopLeftY - topLeftY;
-
-  const [x, y] = rotate(
-    newTopLeftX,
-    newTopLeftY,
-    cx + changeInX,
-    cy + changeInY,
-    -originalElement.angle,
-  );
-
-  mutateElement(
-    latestElement,
-    {
-      x,
-      y,
-    },
-    shouldInformMutation,
-  );
-
-  const boundTextElement = getBoundTextElement(
-    originalElement,
-    originalElementsMap,
-  );
-  if (boundTextElement) {
-    const latestBoundTextElement = elementsMap.get(boundTextElement.id);
-    latestBoundTextElement &&
-      mutateElement(
-        latestBoundTextElement,
-        {
-          x: boundTextElement.x + changeInX,
-          y: boundTextElement.y + changeInY,
-        },
-        shouldInformMutation,
-      );
-  }
-};

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -9,10 +9,7 @@ import type {
   RenderableElementsMap,
   RenderInteractiveSceneCallback,
 } from "../../scene/types";
-import type {
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { isRenderThrottlingEnabled } from "../../reactUtils";
 import { renderInteractiveScene } from "../../renderer/interactiveScene";
 
@@ -22,7 +19,6 @@ type InteractiveCanvasProps = {
   elementsMap: RenderableElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
   selectedElements: readonly NonDeletedExcalidrawElement[];
-  allElementsMap: NonDeletedSceneElementsMap;
   sceneNonce: number | undefined;
   selectionNonce: number | undefined;
   scale: number;
@@ -126,7 +122,6 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
         elementsMap: props.elementsMap,
         visibleElements: props.visibleElements,
         selectedElements: props.selectedElements,
-        allElementsMap: props.allElementsMap,
         scale: window.devicePixelRatio,
         appState: props.appState,
         renderConfig: {
@@ -202,7 +197,6 @@ const getRelevantAppStateProps = (
   activeEmbeddable: appState.activeEmbeddable,
   snapLines: appState.snapLines,
   zenModeEnabled: appState.zenModeEnabled,
-  editingElement: appState.editingElement,
 });
 
 const areEqual = (

packages/excalidraw/components/icons.tsx

@@ -1573,18 +1573,6 @@ export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
   ),
 );
 
-export const angleIcon = createIcon(
-  <g>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M21 19h-18l9 -15" />
-    <path d="M20.615 15.171h.015" />
-    <path d="M19.515 11.771h.015" />
-    <path d="M17.715 8.671h.015" />
-    <path d="M15.415 5.971h.015" />
-  </g>,
-  tablerIconProps,
-);
-
 export const publishIcon = createIcon(
   <path
     d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"
@@ -2073,19 +2061,3 @@ export const lineEditorIcon = createIcon(
   </g>,
   tablerIconProps,
 );
-
-export const collapseDownIcon = createIcon(
-  <g>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M6 9l6 6l6 -6" />
-  </g>,
-  tablerIconProps,
-);
-
-export const collapseUpIcon = createIcon(
-  <g>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M6 15l6 -6l6 6" />
-  </g>,
-  tablerIconProps,
-);

packages/excalidraw/constants.ts

@@ -25,11 +25,6 @@ export const supportsResizeObserver =
 
 export const APP_NAME = "Excalidraw";
 
-// distance when creating text before it's considered `autoResize: false`
-// we're using higher threshold so that clicks that end up being drags
-// don't unintentionally create text elements that are wrapped to a few chars
-// (happens a lot with fast clicks with the text tool)
-export const TEXT_AUTOWRAP_THRESHOLD = 36; // px
 export const DRAGGING_THRESHOLD = 10; // px
 export const LINE_CONFIRM_THRESHOLD = 8; // px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -405,7 +400,3 @@ export const EDITOR_LS_KEYS = {
  * where filename is optional and we can't retrieve name from app state
  */
 export const DEFAULT_FILENAME = "Untitled";
-
-export const STATS_PANELS = { generalStats: 1, elementProperties: 2 } as const;
-
-export const MIN_WIDTH_OR_HEIGHT = 1;

packages/excalidraw/css/styles.scss

@@ -22,9 +22,9 @@
   --sat: env(safe-area-inset-top);
 }
 
-body.excalidraw-cursor-resize,
-body.excalidraw-cursor-resize a:hover,
-body.excalidraw-cursor-resize * {
+body.dragResize,
+body.dragResize a:hover,
+body.dragResize * {
   cursor: ew-resize;
 }
 

packages/excalidraw/data/blob.ts

@@ -235,9 +235,7 @@ export const canvasToBlob = async (
 
 /** generates SHA-1 digest from supplied file (if not supported, falls back
     to a 40-char base64 random id) */
-export const generateIdFromFile = async (
-  file: File | Blob,
-): Promise<FileId> => {
+export const generateIdFromFile = async (file: File): Promise<FileId> => {
   try {
     const hashBuffer = await window.crypto.subtle.digest(
       "SHA-1",

packages/excalidraw/data/restore.ts

@@ -1,7 +1,6 @@
 import type {
   ExcalidrawElement,
   ExcalidrawElementType,
-  ExcalidrawLinearElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FontFamilyValues,
@@ -22,12 +21,7 @@ import {
   isInvisiblySmallElement,
   refreshTextDimensions,
 } from "../element";
-import {
-  isArrowElement,
-  isLinearElement,
-  isTextElement,
-  isUsingAdaptiveRadius,
-} from "../element/typeChecks";
+import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
   DEFAULT_FONT_FAMILY,
@@ -51,7 +45,6 @@ import {
 } from "../element/textElement";
 import { normalizeLink } from "./url";
 import { syncInvalidIndices } from "../fractionalIndex";
-import { getSizeFromPoints } from "../points";
 
 type RestoredAppState = Omit<
   AppState,
@@ -277,7 +270,6 @@ const restoreElement = (
         points,
         x,
         y,
-        ...getSizeFromPoints(points),
       });
     }
 
@@ -466,23 +458,6 @@ export const restoreElements = (
         ),
       );
     }
-
-    if (isLinearElement(element)) {
-      if (
-        element.startBinding &&
-        (!restoredElementsMap.has(element.startBinding.elementId) ||
-          !isArrowElement(element))
-      ) {
-        (element as Mutable<ExcalidrawLinearElement>).startBinding = null;
-      }
-      if (
-        element.endBinding &&
-        (!restoredElementsMap.has(element.endBinding.elementId) ||
-          !isArrowElement(element))
-      ) {
-        (element as Mutable<ExcalidrawLinearElement>).endBinding = null;
-      }
-    }
   }
 
   return restoredElements;

packages/excalidraw/element/binding.ts

@@ -188,8 +188,10 @@ const getOriginalBindingIfStillCloseOfLinearElementEdge = (
       ? linearElement.startBinding?.elementId
       : linearElement.endBinding?.elementId;
   if (elementId) {
-    const element = elementsMap.get(elementId);
-    if (isBindableElement(element) && bindingBorderTest(element, coors, app)) {
+    const element = elementsMap.get(
+      elementId,
+    ) as NonDeleted<ExcalidrawBindableElement>;
+    if (bindingBorderTest(element, coors, app)) {
       return element;
     }
   }
@@ -358,9 +360,6 @@ export const bindLinearElement = (
   startOrEnd: "start" | "end",
   elementsMap: NonDeletedSceneElementsMap,
 ): void => {
-  if (!isArrowElement(linearElement)) {
-    return;
-  }
   mutateElement(linearElement, {
     [startOrEnd === "start" ? "startBinding" : "endBinding"]: {
       elementId: hoveredElement.id,

packages/excalidraw/element/dragElements.ts

@@ -4,17 +4,11 @@ import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import type { NonDeletedExcalidrawElement } from "./types";
-import type { AppState, NormalizedZoomValue, PointerDownState } from "../types";
-import { getBoundTextElement, getMinTextElementWidth } from "./textElement";
+import type { AppState, PointerDownState } from "../types";
+import { getBoundTextElement } from "./textElement";
 import { getGridPoint } from "../math";
 import type Scene from "../scene/Scene";
-import {
-  isArrowElement,
-  isFrameLikeElement,
-  isTextElement,
-} from "./typeChecks";
-import { getFontString } from "../utils";
-import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";
+import { isArrowElement, isFrameLikeElement } from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -146,7 +140,6 @@ export const dragNewElement = (
   height: number,
   shouldMaintainAspectRatio: boolean,
   shouldResizeFromCenter: boolean,
-  zoom: NormalizedZoomValue,
   /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
       true */
   widthAspectRatio?: number | null,
@@ -192,41 +185,12 @@ export const dragNewElement = (
     newY = originY - height / 2;
   }
 
-  let textAutoResize = null;
-
-  // NOTE this should apply only to creating text elements, not existing
-  // (once we rewrite appState.draggingElement to actually mean dragging
-  // elements)
-  if (isTextElement(draggingElement)) {
-    height = draggingElement.height;
-    const minWidth = getMinTextElementWidth(
-      getFontString({
-        fontSize: draggingElement.fontSize,
-        fontFamily: draggingElement.fontFamily,
-      }),
-      draggingElement.lineHeight,
-    );
-    width = Math.max(width, minWidth);
-
-    if (Math.abs(x - originX) > TEXT_AUTOWRAP_THRESHOLD / zoom) {
-      textAutoResize = {
-        autoResize: false,
-      };
-    }
-
-    newY = originY;
-    if (shouldResizeFromCenter) {
-      newX = originX - width / 2;
-    }
-  }
-
   if (width !== 0 && height !== 0) {
     mutateElement(draggingElement, {
       x: newX + (originOffset?.x ?? 0),
       y: newY + (originOffset?.y ?? 0),
       width,
       height,
-      ...textAutoResize,
     });
   }
 };

packages/excalidraw/element/resizeElements.ts

@@ -1,4 +1,8 @@
-import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
+import {
+  BOUND_TEXT_PADDING,
+  MIN_FONT_SIZE,
+  SHIFT_LOCKING_ANGLE,
+} from "../constants";
 import { rescalePoints } from "../points";
 
 import { rotate, centerPoint, rotatePoint } from "../math";
@@ -47,7 +51,7 @@ import {
   getApproxMinLineHeight,
   wrapText,
   measureText,
-  getMinTextElementWidth,
+  getMinCharWidth,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
@@ -348,13 +352,8 @@ const resizeSingleTextElement = (
     const boundsCurrentWidth = esx2 - esx1;
 
     const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];
-    const minWidth = getMinTextElementWidth(
-      getFontString({
-        fontSize: element.fontSize,
-        fontFamily: element.fontFamily,
-      }),
-      element.lineHeight,
-    );
+    const minWidth =
+      getMinCharWidth(getFontString(element)) + BOUND_TEXT_PADDING * 2;
 
     let scaleX = atStartBoundsWidth / boundsCurrentWidth;
 

packages/excalidraw/element/textElement.ts

@@ -938,10 +938,3 @@ export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
   }
   return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
 };
-
-export const getMinTextElementWidth = (
-  font: FontString,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
-  return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
-};

packages/excalidraw/element/textWysiwyg.test.tsx

@@ -576,7 +576,7 @@ describe("textWysiwyg", () => {
 
     it("text should never go beyond max width", async () => {
       UI.clickTool("text");
-      mouse.click(0, 0);
+      mouse.clickAt(750, 300);
 
       textarea = await getTextEditor(textEditorSelector, true);
       updateTextEditor(

packages/excalidraw/element/textWysiwyg.tsx

@@ -77,7 +77,6 @@ export const textWysiwyg = ({
   canvas,
   excalidrawContainer,
   app,
-  autoSelect = true,
 }: {
   id: ExcalidrawElement["id"];
   /**
@@ -93,7 +92,6 @@ export const textWysiwyg = ({
   canvas: HTMLCanvasElement;
   excalidrawContainer: HTMLDivElement | null;
   app: App;
-  autoSelect?: boolean;
 }) => {
   const textPropertiesUpdated = (
     updatedTextElement: ExcalidrawTextElement,
@@ -493,11 +491,6 @@ export const textWysiwyg = ({
   // so that we don't need to create separate a callback for event handlers
   let submittedViaKeyboard = false;
   const handleSubmit = () => {
-    // prevent double submit
-    if (isDestroyed) {
-      return;
-    }
-    isDestroyed = true;
     // cleanup must be run before onSubmit otherwise when app blurs the wysiwyg
     // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
     // wysiwyg on update
@@ -551,6 +544,10 @@ export const textWysiwyg = ({
   };
 
   const cleanup = () => {
+    if (isDestroyed) {
+      return;
+    }
+    isDestroyed = true;
     // remove events to ensure they don't late-fire
     editable.onblur = null;
     editable.oninput = null;
@@ -642,22 +639,6 @@ export const textWysiwyg = ({
       // handle edge-case where pointerup doesn't fire e.g. due to user
       // alt-tabbing away
       window.addEventListener("blur", handleSubmit);
-    } else if (
-      event.target instanceof HTMLElement &&
-      !event.target.contains(editable) &&
-      // Vitest simply ignores stopPropagation, capture-mode, or rAF
-      // so without introducing crazier hacks, nothing we can do
-      !isTestEnv()
-    ) {
-      // On mobile, blur event doesn't seem to always fire correctly,
-      // so we want to also submit on pointerdown outside the wysiwyg.
-      // Done in the next frame to prevent pointerdown from creating a new text
-      // immediately (if tools locked) so that users on mobile have chance
-      // to submit first (to hide virtual keyboard).
-      // Note: revisit if we want to differ this behavior on Desktop
-      requestAnimationFrame(() => {
-        handleSubmit();
-      });
     }
   };
 
@@ -676,11 +657,9 @@ export const textWysiwyg = ({
 
   let isDestroyed = false;
 
-  if (autoSelect) {
-    // select on init (focusing is done separately inside the bindBlurEvent()
-    // because we need it to happen *after* the blur event from `pointerdown`)
-    editable.select();
-  }
+  // select on init (focusing is done separately inside the bindBlurEvent()
+  // because we need it to happen *after* the blur event from `pointerdown`)
+  editable.select();
   bindBlurEvent();
 
   // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
@@ -695,13 +674,7 @@ export const textWysiwyg = ({
     window.addEventListener("resize", updateWysiwygStyle);
   }
 
-  editable.onpointerdown = (event) => event.stopPropagation();
-
-  // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that
-  // triggered the wysiwyg
-  requestAnimationFrame(() => {
-    window.addEventListener("pointerdown", onPointerDown, { capture: true });
-  });
+  window.addEventListener("pointerdown", onPointerDown);
   window.addEventListener("wheel", stopEvent, {
     passive: false,
     capture: true,

packages/excalidraw/element/typeChecks.ts

@@ -132,7 +132,7 @@ export const isBindingElementType = (
 };
 
 export const isBindableElement = (
-  element: ExcalidrawElement | null | undefined,
+  element: ExcalidrawElement | null,
   includeLocked = true,
 ): element is ExcalidrawBindableElement => {
   return (

packages/excalidraw/groups.ts

@@ -373,9 +373,7 @@ export const getNonDeletedGroupIds = (elements: ElementsMap) => {
   return nonDeletedGroupIds;
 };
 
-export const elementsAreInSameGroup = (
-  elements: readonly ExcalidrawElement[],
-) => {
+export const elementsAreInSameGroup = (elements: ExcalidrawElement[]) => {
   const allGroups = elements.flatMap((element) => element.groupIds);
   const groupCount = new Map<string, number>();
   let maxGroup = 0;

packages/excalidraw/locales/en.json

@@ -459,10 +459,9 @@
     "scene": "Scene",
     "selected": "Selected",
     "storage": "Storage",
-    "fullTitle": "Stats & Element properties",
     "title": "Stats",
     "generalStats": "General stats",
-    "elementProperties": "Element properties",
+    "elementStats": "Element stats",
     "total": "Total",
     "version": "Version",
     "versionCopy": "Click to copy",

packages/excalidraw/mermaid.ts

@@ -1,32 +0,0 @@
-/** heuristically checks whether the text may be a mermaid diagram definition */
-export const isMaybeMermaidDefinition = (text: string) => {
-  const chartTypes = [
-    "flowchart",
-    "sequenceDiagram",
-    "classDiagram",
-    "stateDiagram",
-    "stateDiagram-v2",
-    "erDiagram",
-    "journey",
-    "gantt",
-    "pie",
-    "quadrantChart",
-    "requirementDiagram",
-    "gitGraph",
-    "C4Context",
-    "mindmap",
-    "timeline",
-    "zenuml",
-    "sankey",
-    "xychart",
-    "block",
-  ];
-
-  const re = new RegExp(
-    `^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
-      .map((x) => `${x}(-beta)?`)
-      .join("|")}\\b`,
-  );
-
-  return re.test(text.trim());
-};

packages/excalidraw/renderer/interactiveScene.ts

@@ -47,18 +47,13 @@ import {
   getNormalizedCanvasDimensions,
 } from "./helpers";
 import oc from "open-color";
-import {
-  isFrameLikeElement,
-  isLinearElement,
-  isTextElement,
-} from "../element/typeChecks";
+import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
 import type {
   ElementsMap,
   ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawFrameLikeElement,
   ExcalidrawLinearElement,
-  ExcalidrawTextElement,
   GroupId,
   NonDeleted,
 } from "../element/types";
@@ -308,6 +303,7 @@ const renderSelectionBorder = (
     cy: number;
     activeEmbeddable: boolean;
   },
+  padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2,
 ) => {
   const {
     angle,
@@ -324,8 +320,6 @@ const renderSelectionBorder = (
   const elementWidth = elementX2 - elementX1;
   const elementHeight = elementY2 - elementY1;
 
-  const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
-
   const linePadding = padding / appState.zoom.value;
   const lineWidth = 8 / appState.zoom.value;
   const spaceWidth = 4 / appState.zoom.value;
@@ -576,34 +570,11 @@ const renderTransformHandles = (
   });
 };
 
-const renderTextBox = (
-  text: NonDeleted<ExcalidrawTextElement>,
-  context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState,
-  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
-) => {
-  context.save();
-  const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
-  const width = text.width + padding * 2;
-  const height = text.height + padding * 2;
-  const cx = text.x + width / 2;
-  const cy = text.y + height / 2;
-  const shiftX = -(width / 2 + padding);
-  const shiftY = -(height / 2 + padding);
-  context.translate(cx + appState.scrollX, cy + appState.scrollY);
-  context.rotate(text.angle);
-  context.lineWidth = 1 / appState.zoom.value;
-  context.strokeStyle = selectionColor;
-  context.strokeRect(shiftX, shiftY, width, height);
-  context.restore();
-};
-
 const _renderInteractiveScene = ({
   canvas,
   elementsMap,
   visibleElements,
   selectedElements,
-  allElementsMap,
   scale,
   appState,
   renderConfig,
@@ -655,31 +626,12 @@ const _renderInteractiveScene = ({
   // Paint selection element
   if (appState.selectionElement) {
     try {
-      renderSelectionElement(
-        appState.selectionElement,
-        context,
-        appState,
-        renderConfig.selectionColor,
-      );
+      renderSelectionElement(appState.selectionElement, context, appState);
     } catch (error: any) {
       console.error(error);
     }
   }
 
-  if (appState.editingElement && isTextElement(appState.editingElement)) {
-    const textElement = allElementsMap.get(appState.editingElement.id) as
-      | ExcalidrawTextElement
-      | undefined;
-    if (textElement && !textElement.autoResize) {
-      renderTextBox(
-        textElement,
-        context,
-        appState,
-        renderConfig.selectionColor,
-      );
-    }
-  }
-
   if (appState.isBindingEnabled) {
     appState.suggestedBindings
       .filter((binding) => binding != null)
@@ -858,12 +810,7 @@ const _renderInteractiveScene = ({
         "mouse", // when we render we don't know which pointer type so use mouse,
         getOmitSidesForDevice(device),
       );
-      if (
-        !appState.viewModeEnabled &&
-        showBoundingBox &&
-        // do not show transform handles when text is being edited
-        !isTextElement(appState.editingElement)
-      ) {
+      if (!appState.viewModeEnabled && showBoundingBox) {
         renderTransformHandles(
           context,
           renderConfig,

packages/excalidraw/renderer/renderElement.ts

@@ -24,7 +24,6 @@ import type { RoughCanvas } from "roughjs/bin/canvas";
 import type {
   StaticCanvasRenderConfig,
   RenderableElementsMap,
-  InteractiveCanvasRenderConfig,
 } from "../scene/types";
 import { distance, getFontString, isRTL } from "../utils";
 import { getCornerRadius, isRightAngle } from "../math";
@@ -619,7 +618,6 @@ export const renderSelectionElement = (
   element: NonDeletedExcalidrawElement,
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
-  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
 ) => {
   context.save();
   context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
@@ -633,7 +631,7 @@ export const renderSelectionElement = (
 
   context.fillRect(offset, offset, element.width, element.height);
   context.lineWidth = 1 / appState.zoom.value;
-  context.strokeStyle = selectionColor;
+  context.strokeStyle = " rgb(105, 101, 219)";
   context.strokeRect(offset, offset, element.width, element.height);
 
   context.restore();

packages/excalidraw/scene/Scene.ts

@@ -105,9 +105,6 @@ class Scene {
     }
   }
 
-  /**
-   * @deprecated pass down `app.scene` and use it directly
-   */
   static getScene(elementKey: ElementKey): Scene | null {
     if (isIdKey(elementKey)) {
       return this.sceneMapById.get(elementKey) || null;

packages/excalidraw/scene/types.ts

@@ -55,7 +55,7 @@ export type InteractiveCanvasRenderConfig = {
   remotePointerUserStates: Map<SocketId, UserIdleState>;
   remotePointerUsernames: Map<SocketId, string>;
   remotePointerButton: Map<SocketId, string | undefined>;
-  selectionColor: string;
+  selectionColor?: string;
   // extra options passed to the renderer
   // ---------------------------------------------------------------------------
   renderScrollbars?: boolean;
@@ -83,7 +83,6 @@ export type InteractiveSceneRenderConfig = {
   elementsMap: RenderableElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
   selectedElements: readonly NonDeletedExcalidrawElement[];
-  allElementsMap: NonDeletedSceneElementsMap;
   scale: number;
   appState: InteractiveCanvasAppState;
   renderConfig: InteractiveCanvasRenderConfig;

packages/excalidraw/snapping.ts

@@ -1375,7 +1375,6 @@ export const isActiveToolNonLinearSnappable = (
     activeToolType === TOOL_TYPE.diamond ||
     activeToolType === TOOL_TYPE.frame ||
     activeToolType === TOOL_TYPE.magicframe ||
-    activeToolType === TOOL_TYPE.image ||
-    activeToolType === TOOL_TYPE.text
+    activeToolType === TOOL_TYPE.image
   );
 };

packages/excalidraw/tests/MermaidToExcalidraw.test.tsx

@@ -1,12 +1,28 @@
 import { act, render, waitFor } from "./test-utils";
 import { Excalidraw } from "../index";
-import { expect } from "vitest";
+import React from "react";
+import { expect, vi } from "vitest";
+import * as MermaidToExcalidraw from "@excalidraw/mermaid-to-excalidraw";
 import { getTextEditor, updateTextEditor } from "./queries/dom";
-import { mockMermaidToExcalidraw } from "./helpers/mocks";
 
-mockMermaidToExcalidraw({
-  mockRef: true,
-  parseMermaidToExcalidraw: async (definition) => {
+vi.mock("@excalidraw/mermaid-to-excalidraw", async (importActual) => {
+  const module = (await importActual()) as any;
+
+  return {
+    __esModule: true,
+    ...module,
+  };
+});
+const parseMermaidToExcalidrawSpy = vi.spyOn(
+  MermaidToExcalidraw,
+  "parseMermaidToExcalidraw",
+);
+
+parseMermaidToExcalidrawSpy.mockImplementation(
+  async (
+    definition: string,
+    options?: MermaidToExcalidraw.MermaidOptions | undefined,
+  ) => {
     const firstLine = definition.split("\n")[0];
     return new Promise((resolve, reject) => {
       if (firstLine === "flowchart TD") {
@@ -72,6 +88,12 @@ mockMermaidToExcalidraw({
       }
     });
   },
+);
+
+vi.spyOn(React, "useRef").mockReturnValue({
+  current: {
+    parseMermaidToExcalidraw: parseMermaidToExcalidrawSpy,
+  },
 });
 
 describe("Test <MermaidToExcalidraw/>", () => {

packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -874,13 +874,10 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1069,13 +1066,10 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": {
@@ -1280,13 +1274,10 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1606,13 +1597,10 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1932,13 +1920,10 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": {
@@ -2141,13 +2126,10 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2378,13 +2360,10 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2679,13 +2658,10 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3038,13 +3014,10 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": {
@@ -3508,13 +3481,10 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3826,13 +3796,10 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4147,13 +4114,10 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5328,13 +5292,10 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -6452,13 +6413,10 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7285,12 +7243,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
           </g>
         </svg>,
         "keyTest": [Function],
-        "keywords": [
-          "edit",
-          "attributes",
-          "customize",
-        ],
-        "label": "stats.fullTitle",
+        "label": "stats.title",
         "name": "stats",
         "paletteName": "Toggle stats",
         "perform": [Function],
@@ -7378,13 +7331,10 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8284,13 +8234,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9176,13 +9123,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,

packages/excalidraw/tests/__snapshots__/history.test.tsx.snap

@@ -84,13 +84,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -665,13 +662,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1161,13 +1155,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1507,13 +1498,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1853,13 +1841,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2114,13 +2099,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2544,13 +2526,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2838,13 +2817,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3117,13 +3093,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3406,13 +3379,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3687,13 +3657,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3917,13 +3884,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4171,13 +4135,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4439,13 +4400,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4665,13 +4623,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4891,13 +4846,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5115,13 +5067,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5339,13 +5288,10 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5592,13 +5538,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5918,13 +5861,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -6341,13 +6281,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -6720,13 +6657,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7023,13 +6957,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7314,13 +7245,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7538,13 +7466,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7888,13 +7813,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8244,13 +8166,10 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8637,13 +8556,10 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8921,13 +8837,10 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9181,13 +9094,10 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9440,13 +9350,10 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9667,13 +9574,10 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9962,13 +9866,10 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -10293,13 +10194,10 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -10525,13 +10423,10 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -10772,13 +10667,10 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": false,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11008,13 +10900,10 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11242,13 +11131,10 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11641,13 +11527,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": false,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11882,13 +11765,10 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": false,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -12118,13 +11998,10 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": false,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -12354,13 +12231,10 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -12596,13 +12470,10 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -12924,13 +12795,10 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13093,13 +12961,10 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13374,13 +13239,10 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13637,13 +13499,10 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13906,13 +13765,10 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -14063,13 +13919,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -14748,13 +14601,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -15357,13 +15207,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -15964,13 +15811,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -16667,13 +16511,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -17404,13 +17245,10 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -17875,13 +17713,10 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -18387,13 +18222,10 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -18840,13 +18672,10 @@ exports[`history > singleplayer undo/redo > should support linear element creati
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -92,13 +92,10 @@ exports[`given element A and group of elements B and given both are selected whe
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -501,13 +498,10 @@ exports[`given element A and group of elements B and given both are selected whe
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -890,13 +884,10 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1427,13 +1418,10 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1628,13 +1616,10 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -1992,13 +1977,10 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2222,13 +2204,10 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2396,13 +2375,10 @@ exports[`regression tests > can drag element that covers another element, while
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2706,13 +2682,10 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -2946,13 +2919,10 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3181,13 +3151,10 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3403,13 +3370,10 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3652,13 +3616,10 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -3954,13 +3915,10 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4419,13 +4377,10 @@ exports[`regression tests > deselects group of selected elements on pointer down
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4694,13 +4649,10 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -4998,13 +4950,10 @@ exports[`regression tests > deselects selected element on pointer down when poin
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5170,13 +5119,10 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5361,13 +5307,10 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -5739,13 +5682,10 @@ exports[`regression tests > drags selected elements from point inside common bou
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -6015,13 +5955,10 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -6818,13 +6755,10 @@ exports[`regression tests > given a group of selected elements with an element t
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7140,13 +7074,10 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7407,13 +7338,10 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7633,13 +7561,10 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -7860,13 +7785,10 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8032,13 +7954,10 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8204,13 +8123,10 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8399,13 +8315,10 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8611,13 +8524,10 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -8798,13 +8708,10 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9009,13 +8916,10 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9198,13 +9102,10 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9393,13 +9294,10 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9582,13 +9480,10 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9752,13 +9647,10 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -9940,13 +9832,10 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -10120,13 +10009,10 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -10620,13 +10506,10 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -10885,13 +10768,10 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "selectionElement": null,
   "shouldCacheIgnoreZoom": true,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11005,13 +10885,10 @@ exports[`regression tests > shift click on selected element should deselect it o
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11200,13 +11077,10 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11505,13 +11379,10 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -11913,13 +11784,10 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -12509,13 +12377,10 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -12631,13 +12496,10 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13268,13 +13130,10 @@ exports[`regression tests > switches from group of selected elements to another
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13627,13 +13486,10 @@ exports[`regression tests > switches selected element on pointer down > [end of
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13850,13 +13706,10 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "selectionElement": null,
   "shouldCacheIgnoreZoom": true,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -13970,13 +13823,10 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -14338,13 +14188,10 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,
@@ -14459,13 +14306,10 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": true,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,

packages/excalidraw/tests/clipboard.test.tsx

@@ -13,7 +13,6 @@ import type { NormalizedZoomValue } from "../types";
 import { API } from "./helpers/api";
 import { createPasteEvent, serializeAsClipboardJSON } from "../clipboard";
 import { arrayToMap } from "../utils";
-import { mockMermaidToExcalidraw } from "./helpers/mocks";
 
 const { h } = window;
 
@@ -436,83 +435,3 @@ describe("pasting & frames", () => {
     });
   });
 });
-
-describe("clipboard - pasting mermaid definition", () => {
-  beforeAll(() => {
-    mockMermaidToExcalidraw({
-      parseMermaidToExcalidraw: async (definition) => {
-        const lines = definition.split("\n");
-        return new Promise((resolve, reject) => {
-          if (lines.some((line) => line === "flowchart TD")) {
-            resolve({
-              elements: [
-                {
-                  id: "rect1",
-                  type: "rectangle",
-                  groupIds: [],
-                  x: 0,
-                  y: 0,
-                  width: 69.703125,
-                  height: 44,
-                  strokeWidth: 2,
-                  label: {
-                    groupIds: [],
-                    text: "A",
-                    fontSize: 20,
-                  },
-                  link: null,
-                },
-              ],
-            });
-          } else {
-            reject(new Error("ERROR"));
-          }
-        });
-      },
-    });
-  });
-
-  it("should detect and paste as mermaid", async () => {
-    const text = "flowchart TD\nA";
-
-    pasteWithCtrlCmdV(text);
-    await waitFor(() => {
-      expect(h.elements.length).toEqual(2);
-      expect(h.elements).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ type: "rectangle" }),
-          expect.objectContaining({ type: "text", text: "A" }),
-        ]),
-      );
-    });
-  });
-
-  it("should support directives", async () => {
-    const text = "%%{init: { **config** } }%%\nflowchart TD\nA";
-
-    pasteWithCtrlCmdV(text);
-    await waitFor(() => {
-      expect(h.elements.length).toEqual(2);
-      expect(h.elements).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ type: "rectangle" }),
-          expect.objectContaining({ type: "text", text: "A" }),
-        ]),
-      );
-    });
-  });
-
-  it("should paste as normal text if invalid mermaid", async () => {
-    const text = "flowchart TD xx\nA";
-    pasteWithCtrlCmdV(text);
-    await waitFor(() => {
-      expect(h.elements.length).toEqual(2);
-      expect(h.elements).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ type: "text", text: "flowchart TD xx" }),
-          expect.objectContaining({ type: "text", text: "A" }),
-        ]),
-      );
-    });
-  });
-});

packages/excalidraw/tests/helpers/mocks.ts

@@ -1,32 +0,0 @@
-import { vi } from "vitest";
-import * as MermaidToExcalidraw from "@excalidraw/mermaid-to-excalidraw";
-import type { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
-import React from "react";
-
-export const mockMermaidToExcalidraw = (opts: {
-  parseMermaidToExcalidraw: typeof parseMermaidToExcalidraw;
-  mockRef?: boolean;
-}) => {
-  vi.mock("@excalidraw/mermaid-to-excalidraw", async (importActual) => {
-    const module = (await importActual()) as any;
-
-    return {
-      __esModule: true,
-      ...module,
-    };
-  });
-  const parseMermaidToExcalidrawSpy = vi.spyOn(
-    MermaidToExcalidraw,
-    "parseMermaidToExcalidraw",
-  );
-
-  parseMermaidToExcalidrawSpy.mockImplementation(opts.parseMermaidToExcalidraw);
-
-  if (opts.mockRef) {
-    vi.spyOn(React, "useRef").mockReturnValue({
-      current: {
-        parseMermaidToExcalidraw: parseMermaidToExcalidrawSpy,
-      },
-    });
-  }
-};

packages/excalidraw/tests/helpers/ui.ts

@@ -559,10 +559,4 @@ export class UI {
       ".context-menu",
     ) as HTMLElement | null;
   };
-
-  static queryStats = () => {
-    return GlobalTestState.renderResult.container.querySelector(
-      ".Stats",
-    ) as HTMLElement | null;
-  };
 }

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -1051,11 +1051,11 @@ describe("Test Linear Elements", () => {
           arrayToMap(h.elements),
         ),
       ).toMatchInlineSnapshot(`
-        {
-          "x": 75,
-          "y": 60,
-        }
-      `);
+          {
+            "x": 75,
+            "y": 60,
+          }
+        `);
       expect(textElement.text).toMatchInlineSnapshot(`
         "Online whiteboard 
         collaboration made 

packages/excalidraw/types.ts

@@ -108,7 +108,6 @@ export type BinaryFileData = {
    * Epoch timestamp in milliseconds.
    */
   lastRetrieved?: number;
-  customData?: Record<string, any>;
 };
 
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
@@ -198,7 +197,6 @@ export type InteractiveCanvasAppState = Readonly<
     // SnapLines
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
-    editingElement: AppState["editingElement"];
   }
 >;
 
@@ -337,11 +335,7 @@ export interface AppState {
 
   fileHandle: FileSystemHandle | null;
   collaborators: Map<SocketId, Collaborator>;
-  stats: {
-    open: boolean;
-    /** bitmap. Use `STATS_PANELS` bit values */
-    panels: number;
-  };
+  showStats: boolean;
   currentChartType: ChartType;
   pasteDialog:
     | {
@@ -445,9 +439,7 @@ export interface ExcalidrawProps {
     appState: AppState,
     files: BinaryFiles,
   ) => void;
-  initialData?:
-    | (() => MaybePromise<ExcalidrawInitialDataState | null>)
-    | MaybePromise<ExcalidrawInitialDataState | null>;
+  initialData?: MaybePromise<ExcalidrawInitialDataState | null>;
   excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
   isCollaborating?: boolean;
   onPointerUpdate?: (payload: {
@@ -600,7 +592,7 @@ export type AppClassProperties = {
   files: BinaryFiles;
   device: App["device"];
   scene: App["scene"];
-  syncActionResult: App["syncActionResult"];
+  store: App["store"];
   pasteFromClipboard: App["pasteFromClipboard"];
   id: App["id"];
   onInsertElements: App["onInsertElements"];

packages/utils/__snapshots__/export.test.ts.snap

@@ -84,13 +84,10 @@ exports[`exportToSvg > with default arguments 1`] = `
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
+  "showStats": false,
   "showWelcomeScreen": false,
   "snapLines": [],
   "startBoundElement": null,
-  "stats": {
-    "open": false,
-    "panels": 3,
-  },
   "suggestedBindings": [],
   "theme": "light",
   "toast": null,

yarn.lock

@@ -2238,19 +2238,6 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@imgly/background-removal@1.5.3":
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@imgly/background-removal/-/background-removal-1.5.3.tgz#5fb39eb97e0f26fefd6a270b18f771c1c905593d"
-  integrity sha512-Q5DI5EtOvTvsWueimB0XUlkDObdcQsN2hTEsQUnJXym7x7oH8dn1qrOZ6UklJSIHK7hkiqKtaDONvvk0lKVWmA==
-  dependencies:
-    "@types/lodash-es" "^4.17.12"
-    "@types/ndarray" "~1.0.14"
-    "@types/node" "~20.3.0"
-    lodash-es "^4.17.21"
-    ndarray "~1.0.0"
-    onnxruntime-web "~1.18.0"
-    zod "^3.23.8"
-
 "@istanbuljs/schema@^0.1.2":
   version "0.1.3"
   resolved "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
@@ -3206,13 +3193,6 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash-es@^4.17.12":
-  version "4.17.12"
-  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
-  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
-  dependencies:
-    "@types/lodash" "*"
-
 "@types/lodash.throttle@4.1.7":
   version "4.1.7"
   resolved "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz#4ef379eb4f778068022310ef166625f420b6ba58"
@@ -3242,11 +3222,6 @@
   resolved "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
-"@types/ndarray@~1.0.14":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@types/ndarray/-/ndarray-1.0.14.tgz#96b28c09a3587a76de380243f87bb7a2d63b4b23"
-  integrity sha512-oANmFZMnFQvb219SSBIhI1Ih/r4CvHDOzkWyJS/XRqkMrGH5/kaPSA1hQhdIBzouaE+5KpE/f5ylI9cujmckQg==
-
 "@types/node@*", "@types/node@>=13.7.0", "@types/node@^20":
   version "20.12.4"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz#af5921bd75ccdf3a3d8b3fa75bf3d3359268cd11"
@@ -3254,11 +3229,6 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@~20.3.0":
-  version "20.3.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.3.tgz#329842940042d2b280897150e023e604d11657d6"
-  integrity sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==
-
 "@types/pako@1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@types/pako/-/pako-1.0.3.tgz#2e61c2b02020b5f44e2e5e946dfac74f4ec33c58"
@@ -6436,11 +6406,6 @@ flat@^5.0.2:
   resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
-flatbuffers@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/flatbuffers/-/flatbuffers-1.12.0.tgz#72e87d1726cb1b216e839ef02658aa87dcef68aa"
-  integrity sha512-c7CZADjRcl6j0PlvFy0ZqXQ67qSEZfrVPynmnL+2zPc+NtMvrF8Y0QceMo7QqnSPc7+uWjUIAbvCQ5WIKlMVdQ==
-
 flatted@^3.2.7, flatted@^3.2.9:
   version "3.3.1"
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
@@ -6694,11 +6659,6 @@ graphemer@^1.4.0:
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-guid-typescript@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/guid-typescript/-/guid-typescript-1.0.9.tgz#e35f77003535b0297ea08548f5ace6adb1480ddc"
-  integrity sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ==
-
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -7007,11 +6967,6 @@ invariant@^2.2.2, invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-iota-array@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/iota-array/-/iota-array-1.0.0.tgz#81ef57fe5d05814cd58c2483632a99c30a0e8087"
-  integrity sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==
-
 is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -7062,11 +7017,6 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-buffer@^1.0.2:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
@@ -7763,7 +7713,7 @@ long@^4.0.0:
   resolved "https://registry.npmjs.org/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
-long@^5.0.0, long@^5.2.3:
+long@^5.0.0:
   version "5.2.3"
   resolved "https://registry.npmjs.org/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
   integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
@@ -8263,14 +8213,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-ndarray@~1.0.0:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/ndarray/-/ndarray-1.0.19.tgz#6785b5f5dfa58b83e31ae5b2a058cfd1ab3f694e"
-  integrity sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==
-  dependencies:
-    iota-array "^1.0.0"
-    is-buffer "^1.0.2"
-
 neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
@@ -8473,23 +8415,6 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
-onnxruntime-common@1.18.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/onnxruntime-common/-/onnxruntime-common-1.18.0.tgz#b904dc6ff134e7f21a3eab702fac17538f59e116"
-  integrity sha512-lufrSzX6QdKrktAELG5x5VkBpapbCeS3dQwrXbN0eD9rHvU0yAWl7Ztju9FvgAKWvwd/teEKJNj3OwM6eTZh3Q==
-
-onnxruntime-web@~1.18.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/onnxruntime-web/-/onnxruntime-web-1.18.0.tgz#cd46268d9472f89697da0a3282f13129f0acbfa0"
-  integrity sha512-o1UKj4ABIj1gmG7ae0RKJ3/GT+3yoF0RRpfDfeoe0huzRW4FDRLfbkDETmdFAvnJEXuYDE0YT+hhkia0352StQ==
-  dependencies:
-    flatbuffers "^1.12.0"
-    guid-typescript "^1.0.9"
-    long "^5.2.3"
-    onnxruntime-common "1.18.0"
-    platform "^1.3.6"
-    protobufjs "^7.2.4"
-
 open-color@1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/open-color/-/open-color-1.9.1.tgz#a6e6328f60eff7aa60e3e8fcfa50f53ff3eece35"
@@ -8702,11 +8627,6 @@ pkg-types@^1.0.3:
     mlly "^1.2.0"
     pathe "^1.1.0"
 
-platform@^1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
-  integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
-
 png-chunk-text@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/png-chunk-text/-/png-chunk-text-1.0.0.tgz#1c6006d8e34ba471d38e1c9c54b3f53e1085e18f"
@@ -11171,11 +11091,6 @@ yocto-queue@^1.0.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zod@^3.23.8:
-  version "3.23.8"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
-  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
-
 zustand@^4.3.2:
   version "4.5.2"
   resolved "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"