lint

.env.development

@@ -22,7 +22,7 @@ VITE_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 VITE_APP_DEV_DISABLE_LIVE_RELOAD=
-VITE_APP_ENABLE_TRACKING=true
+VITE_APP_DISABLE_TRACKING=true
 
 FAST_REFRESH=false
 

.env.production

@@ -14,4 +14,4 @@ VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com
 
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
-VITE_APP_ENABLE_TRACKING=false
+VITE_APP_DISABLE_TRACKING=

.github/workflows/test.yml

@@ -9,9 +9,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - name: Install and test

dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx

@@ -90,7 +90,7 @@ function App() {
         <img src={canvasUrl} alt="" />
       </div>
       <div style={{ height: "400px" }}>
-        <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)}
+        <Excalidraw ref={(api) => setExcalidrawAPI(api)}
 />
       </div>
     </>

excalidraw-app/App.tsx

@@ -1,4 +1,5 @@
 import polyfill from "../packages/excalidraw/polyfill";
+import LanguageDetector from "i18next-browser-languagedetector";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { trackEvent } from "../packages/excalidraw/analytics";
 import { getDefaultAppState } from "../packages/excalidraw/appState";
@@ -21,6 +22,7 @@ import { useCallbackRefState } from "../packages/excalidraw/hooks/useCallbackRef
 import { t } from "../packages/excalidraw/i18n";
 import {
   Excalidraw,
+  defaultLang,
   LiveCollaborationTrigger,
   TTDDialog,
   TTDDialogTrigger,
@@ -91,7 +93,7 @@ import {
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
-import { Provider, useAtom, useAtomValue } from "jotai";
+import { atom, Provider, useAtom, useAtomValue } from "jotai";
 import { useAtomWithInitialValue } from "../packages/excalidraw/jotai";
 import { appJotaiStore } from "./app-jotai";
 
@@ -119,8 +121,6 @@ import {
   youtubeIcon,
 } from "../packages/excalidraw/components/icons";
 import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
-import { getPreferredLanguage } from "./app-language/language-detector";
-import { useAppLangCode } from "./app-language/language-state";
 
 polyfill();
 
@@ -172,6 +172,11 @@ if (window.self !== window.top) {
   }
 }
 
+const languageDetector = new LanguageDetector();
+languageDetector.init({
+  languageUtils: {},
+});
+
 const shareableLinkConfirmDialog = {
   title: t("overwriteConfirm.modal.shareableLink.title"),
   description: (
@@ -317,15 +322,19 @@ const initializeScene = async (opts: {
   return { scene: null, isExternalScene: false };
 };
 
+const detectedLangCode = languageDetector.detect() || defaultLang.code;
+export const appLangCodeAtom = atom(
+  Array.isArray(detectedLangCode) ? detectedLangCode[0] : detectedLangCode,
+);
+
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
+  const [langCode, setLangCode] = useAtom(appLangCodeAtom);
   const isCollabDisabled = isRunningInIframe();
 
   const [appTheme, setAppTheme] = useAtom(appThemeAtom);
   const { editorTheme } = useHandleAppTheme();
 
-  const [langCode, setLangCode] = useAppLangCode();
-
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -481,7 +490,11 @@ const ExcalidrawWrapper = () => {
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
           const username = importUsernameFromLocalStorage();
-          setLangCode(getPreferredLanguage());
+          let langCode = languageDetector.detect() || defaultLang.code;
+          if (Array.isArray(langCode)) {
+            langCode = langCode[0];
+          }
+          setLangCode(langCode);
           excalidrawAPI.updateScene({
             ...localDataState,
             storeAction: StoreAction.UPDATE,
@@ -582,6 +595,10 @@ const ExcalidrawWrapper = () => {
     };
   }, [excalidrawAPI]);
 
+  useEffect(() => {
+    languageDetector.cacheUserLanguage(langCode);
+  }, [langCode]);
+
   const onChange = (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,

excalidraw-app/app-language/language-detector.ts

@@ -1,25 +0,0 @@
-import LanguageDetector from "i18next-browser-languagedetector";
-import { defaultLang, languages } from "../../packages/excalidraw";
-
-export const languageDetector = new LanguageDetector();
-
-languageDetector.init({
-  languageUtils: {},
-});
-
-export const getPreferredLanguage = () => {
-  const detectedLanguages = languageDetector.detect();
-
-  const detectedLanguage = Array.isArray(detectedLanguages)
-    ? detectedLanguages[0]
-    : detectedLanguages;
-
-  const initialLanguage =
-    (detectedLanguage
-      ? // region code may not be defined if user uses generic preferred language
-        // (e.g. chinese vs instead of chienese-simplified)
-        languages.find((lang) => lang.code.startsWith(detectedLanguage))?.code
-      : null) || defaultLang.code;
-
-  return initialLanguage;
-};

excalidraw-app/app-language/language-state.ts

@@ -1,15 +0,0 @@
-import { atom, useAtom } from "jotai";
-import { useEffect } from "react";
-import { getPreferredLanguage, languageDetector } from "./language-detector";
-
-export const appLangCodeAtom = atom(getPreferredLanguage());
-
-export const useAppLangCode = () => {
-  const [langCode, setLangCode] = useAtom(appLangCodeAtom);
-
-  useEffect(() => {
-    languageDetector.cacheUserLanguage(langCode);
-  }, [langCode]);
-
-  return [langCode, setLangCode] as const;
-};

excalidraw-app/components/AppMainMenu.tsx

@@ -6,7 +6,7 @@ import {
 import type { Theme } from "../../packages/excalidraw/element/types";
 import { MainMenu } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { LanguageList } from "../app-language/LanguageList";
+import { LanguageList } from "./LanguageList";
 
 export const AppMainMenu: React.FC<{
   onCollabDialogOpen: () => any;

excalidraw-app/components/LanguageList.tsx

@@ -1,7 +1,8 @@
 import { useSetAtom } from "jotai";
 import React from "react";
-import { useI18n, languages } from "../../packages/excalidraw/i18n";
-import { appLangCodeAtom } from "./language-state";
+import { appLangCodeAtom } from "../App";
+import { useI18n } from "../../packages/excalidraw/i18n";
+import { languages } from "../../packages/excalidraw/i18n";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
   const { t, langCode } = useI18n();

excalidraw-app/package.json

@@ -31,8 +31,8 @@
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
     "build:version": "node ../scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",
     "start": "yarn && vite",

excalidraw-app/vite.config.mts

@@ -64,12 +64,7 @@ export default defineConfig({
 
       workbox: {
         // Don't push fonts and locales to app precache
-        globIgnores: [
-          "fonts.css",
-          "**/locales/**",
-          "service-worker.js",
-          "lz-string",
-        ],
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
         runtimeCaching: [
           {
             urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),

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/actionFinalize.tsx

@@ -131,12 +131,7 @@ export const actionFinalize = register({
           -1,
           arrayToMap(elements),
         );
-        maybeBindLinearElement(
-          multiPointElement,
-          appState,
-          { x, y },
-          elementsMap,
-        );
+        maybeBindLinearElement(multiPointElement, appState, { x, y }, app);
       }
     }
 

packages/excalidraw/actions/actionFlip.ts

@@ -124,7 +124,7 @@ const flipElements = (
 
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
-    elementsMap,
+    app,
     isBindingEnabled(appState),
     [],
   );

packages/excalidraw/analytics.ts

@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette"]);
+const ALLOWED_CATEGORIES_TO_TRACK = ["ai", "command_palette"] as string[];
 
 export const trackEvent = (
   category: string,
@@ -9,20 +9,17 @@ export const trackEvent = (
   value?: number,
 ) => {
   try {
+    // prettier-ignore
     if (
-      typeof window === "undefined" ||
-      import.meta.env.VITE_WORKER_ID ||
-      import.meta.env.VITE_APP_ENABLE_TRACKING !== "true"
+      typeof window === "undefined"
+      || import.meta.env.VITE_WORKER_ID
+      // comment out to debug locally
+      || import.meta.env.PROD
     ) {
       return;
     }
 
-    if (!ALLOWED_CATEGORIES_TO_TRACK.has(category)) {
-      return;
-    }
-
-    if (import.meta.env.DEV) {
-      // comment out to debug in dev
+    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
       return;
     }
 

packages/excalidraw/components/App.tsx

@@ -49,6 +49,7 @@ 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,
@@ -224,9 +225,16 @@ import type {
   ScrollBars,
 } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey, getElementShape } from "../shapes";
+import { findShapeByKey } from "../shapes";
 import type { GeometricShape } from "../../utils/geometry/shape";
-import { getSelectionBoxShape } from "../../utils/geometry/shape";
+import {
+  getClosedCurveShape,
+  getCurveShape,
+  getEllipseShape,
+  getFreedrawShape,
+  getPolygonShape,
+  getSelectionBoxShape,
+} from "../../utils/geometry/shape";
 import { isPointInShape } from "../../utils/collision";
 import type {
   AppClassProperties,
@@ -416,6 +424,7 @@ import {
   hitElementBoundText,
   hitElementBoundingBoxOnly,
   hitElementItself,
+  shouldTestInside,
 } from "../element/collision";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
@@ -2282,11 +2291,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({
@@ -2489,9 +2494,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   public componentWillUnmount() {
-    (window as any).launchQueue?.setConsumer(() => {});
     this.renderer.destroy();
-    this.scene.destroy();
     this.scene = new Scene();
     this.fonts = new Fonts({ scene: this.scene });
     this.renderer = new Renderer(this.scene);
@@ -2500,6 +2503,7 @@ class App extends React.Component<AppProps, AppState> {
     this.resizeObserver?.disconnect();
     this.unmounted = true;
     this.removeEventListeners();
+    this.scene.destroy();
     this.library.destroy();
     this.laserTrails.stop();
     this.eraserTrail.stop();
@@ -2811,7 +2815,7 @@ class App extends React.Component<AppProps, AppState> {
             nonDeletedElementsMap,
           ),
         ),
-        this.scene.getNonDeletedElementsMap(),
+        this,
       );
     }
 
@@ -3054,7 +3058,9 @@ class App extends React.Component<AppProps, AppState> {
 
           try {
             const { elements: skeletonElements, files } =
-              await api.parseMermaidToExcalidraw(data.text);
+              await api.parseMermaidToExcalidraw(data.text, {
+                fontSize: DEFAULT_FONT_SIZE,
+              });
 
             const elements = convertToExcalidrawElements(skeletonElements, {
               regenerateIds: true,
@@ -3998,7 +4004,7 @@ class App extends React.Component<AppProps, AppState> {
         this.setState({
           suggestedBindings: getSuggestedBindingsForArrows(
             selectedElements,
-            this.scene.getNonDeletedElementsMap(),
+            this,
           ),
         });
 
@@ -4169,7 +4175,7 @@ class App extends React.Component<AppProps, AppState> {
     if (isArrowKey(event.key)) {
       bindOrUnbindLinearElements(
         this.scene.getSelectedElements(this.state).filter(isLinearElement),
-        this.scene.getNonDeletedElementsMap(),
+        this,
         isBindingEnabled(this.state),
         this.state.selectedLinearElement?.selectedPointsIndices ?? [],
       );
@@ -4481,6 +4487,59 @@ class App extends React.Component<AppProps, AppState> {
     return null;
   }
 
+  /**
+   * get the pure geometric shape of an excalidraw element
+   * which is then used for hit detection
+   */
+  public getElementShape(element: ExcalidrawElement): GeometricShape {
+    switch (element.type) {
+      case "rectangle":
+      case "diamond":
+      case "frame":
+      case "magicframe":
+      case "embeddable":
+      case "image":
+      case "iframe":
+      case "text":
+      case "selection":
+        return getPolygonShape(element);
+      case "arrow":
+      case "line": {
+        const roughShape =
+          ShapeCache.get(element)?.[0] ??
+          ShapeCache.generateElementShape(element, null)[0];
+        const [, , , , cx, cy] = getElementAbsoluteCoords(
+          element,
+          this.scene.getNonDeletedElementsMap(),
+        );
+
+        return shouldTestInside(element)
+          ? getClosedCurveShape(
+              element,
+              roughShape,
+              [element.x, element.y],
+              element.angle,
+              [cx, cy],
+            )
+          : getCurveShape(roughShape, [element.x, element.y], element.angle, [
+              cx,
+              cy,
+            ]);
+      }
+
+      case "ellipse":
+        return getEllipseShape(element);
+
+      case "freedraw": {
+        const [, , , , cx, cy] = getElementAbsoluteCoords(
+          element,
+          this.scene.getNonDeletedElementsMap(),
+        );
+        return getFreedrawShape(element, [cx, cy], shouldTestInside(element));
+      }
+    }
+  }
+
   private getBoundTextShape(element: ExcalidrawElement): GeometricShape | null {
     const boundTextElement = getBoundTextElement(
       element,
@@ -4489,24 +4548,18 @@ class App extends React.Component<AppProps, AppState> {
 
     if (boundTextElement) {
       if (element.type === "arrow") {
-        return getElementShape(
-          {
-            ...boundTextElement,
-            // arrow's bound text accurate position is not stored in the element's property
-            // but rather calculated and returned from the following static method
-            ...LinearElementEditor.getBoundTextElementPosition(
-              element,
-              boundTextElement,
-              this.scene.getNonDeletedElementsMap(),
-            ),
-          },
-          this.scene.getNonDeletedElementsMap(),
-        );
+        return this.getElementShape({
+          ...boundTextElement,
+          // arrow's bound text accurate position is not stored in the element's property
+          // but rather calculated and returned from the following static method
+          ...LinearElementEditor.getBoundTextElementPosition(
+            element,
+            boundTextElement,
+            this.scene.getNonDeletedElementsMap(),
+          ),
+        });
       }
-      return getElementShape(
-        boundTextElement,
-        this.scene.getNonDeletedElementsMap(),
-      );
+      return this.getElementShape(boundTextElement);
     }
 
     return null;
@@ -4545,10 +4598,7 @@ class App extends React.Component<AppProps, AppState> {
         x,
         y,
         element: elementWithHighestZIndex,
-        shape: getElementShape(
-          elementWithHighestZIndex,
-          this.scene.getNonDeletedElementsMap(),
-        ),
+        shape: this.getElementShape(elementWithHighestZIndex),
         // when overlapping, we would like to be more precise
         // this also avoids the need to update past tests
         threshold: this.getElementHitThreshold() / 2,
@@ -4653,7 +4703,7 @@ class App extends React.Component<AppProps, AppState> {
       x,
       y,
       element,
-      shape: getElementShape(element, this.scene.getNonDeletedElementsMap()),
+      shape: this.getElementShape(element),
       threshold: this.getElementHitThreshold(),
       frameNameBound: isFrameLikeElement(element)
         ? this.frameNameBoundsCache.get(element)
@@ -4685,10 +4735,7 @@ class App extends React.Component<AppProps, AppState> {
           x,
           y,
           element: elements[index],
-          shape: getElementShape(
-            elements[index],
-            this.scene.getNonDeletedElementsMap(),
-          ),
+          shape: this.getElementShape(elements[index]),
           threshold: this.getElementHitThreshold(),
         })
       ) {
@@ -4946,10 +4993,7 @@ class App extends React.Component<AppProps, AppState> {
             x: sceneX,
             y: sceneY,
             element: container,
-            shape: getElementShape(
-              container,
-              this.scene.getNonDeletedElementsMap(),
-            ),
+            shape: this.getElementShape(container),
             threshold: this.getElementHitThreshold(),
           })
         ) {
@@ -5641,10 +5685,7 @@ class App extends React.Component<AppProps, AppState> {
           x: scenePointerX,
           y: scenePointerY,
           element,
-          shape: getElementShape(
-            element,
-            this.scene.getNonDeletedElementsMap(),
-          ),
+          shape: this.getElementShape(element),
         })
       ) {
         hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(
@@ -6763,7 +6804,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const boundElement = getHoveredElementForBinding(
       pointerDownState.origin,
-      this.scene.getNonDeletedElementsMap(),
+      this,
     );
     this.scene.insertElement(element);
     this.setState({
@@ -7025,7 +7066,7 @@ class App extends React.Component<AppProps, AppState> {
       });
       const boundElement = getHoveredElementForBinding(
         pointerDownState.origin,
-        this.scene.getNonDeletedElementsMap(),
+        this,
       );
 
       this.scene.insertElement(element);
@@ -7495,7 +7536,7 @@ class App extends React.Component<AppProps, AppState> {
           this.setState({
             suggestedBindings: getSuggestedBindingsForArrows(
               selectedElements,
-              this.scene.getNonDeletedElementsMap(),
+              this,
             ),
           });
 
@@ -8016,7 +8057,7 @@ class App extends React.Component<AppProps, AppState> {
               draggingElement,
               this.state,
               pointerCoords,
-              this.scene.getNonDeletedElementsMap(),
+              this,
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
@@ -8506,10 +8547,7 @@ class App extends React.Component<AppProps, AppState> {
               x: pointerDownState.origin.x,
               y: pointerDownState.origin.y,
               element: hitElement,
-              shape: getElementShape(
-                hitElement,
-                this.scene.getNonDeletedElementsMap(),
-              ),
+              shape: this.getElementShape(hitElement),
               threshold: this.getElementHitThreshold(),
               frameNameBound: isFrameLikeElement(hitElement)
                 ? this.frameNameBoundsCache.get(hitElement)
@@ -8577,7 +8615,7 @@ class App extends React.Component<AppProps, AppState> {
 
         bindOrUnbindLinearElements(
           linearElements,
-          this.scene.getNonDeletedElementsMap(),
+          this,
           isBindingEnabled(this.state),
           this.state.selectedLinearElement?.selectedPointsIndices ?? [],
         );
@@ -9065,7 +9103,7 @@ class App extends React.Component<AppProps, AppState> {
   }): void => {
     const hoveredBindableElement = getHoveredElementForBinding(
       pointerCoords,
-      this.scene.getNonDeletedElementsMap(),
+      this,
     );
     this.setState({
       suggestedBindings:
@@ -9092,7 +9130,7 @@ class App extends React.Component<AppProps, AppState> {
       (acc: NonDeleted<ExcalidrawBindableElement>[], coords) => {
         const hoveredBindableElement = getHoveredElementForBinding(
           coords,
-          this.scene.getNonDeletedElementsMap(),
+          this,
         );
         if (
           hoveredBindableElement != null &&
@@ -9624,7 +9662,7 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       const suggestedBindings = getSuggestedBindingsForArrows(
         selectedElements,
-        this.scene.getNonDeletedElementsMap(),
+        this,
       );
 
       const elementsToHighlight = new Set<ExcalidrawElement>();

packages/excalidraw/components/Stats/Angle.tsx

@@ -1,80 +1,67 @@
 import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement } from "../../element/typeChecks";
-import type { ExcalidrawElement } from "../../element/types";
+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, updateBindings } from "./utils";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 interface AngleProps {
   element: ExcalidrawElement;
-  scene: Scene;
-  appState: AppState;
-  property: "angle";
+  elementsMap: ElementsMap;
 }
 
 const STEP_SIZE = 15;
 
-const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
-  accumulatedChange,
-  originalElements,
-  shouldChangeByStepSize,
-  nextValue,
-  scene,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const origElement = originalElements[0];
-  if (origElement) {
-    const latestElement = elementsMap.get(origElement.id);
-    if (!latestElement) {
-      return;
-    }
+const Angle = ({ element, elementsMap }: AngleProps) => {
+  const handleDegreeChange: DragInputCallbackType = ({
+    accumulatedChange,
+    originalElements,
+    shouldChangeByStepSize,
+    nextValue,
+  }) => {
+    const origElement = originalElements[0];
+    if (origElement) {
+      if (nextValue !== undefined) {
+        const nextAngle = degreeToRadian(nextValue);
+        mutateElement(element, {
+          angle: nextAngle,
+        });
 
-    if (nextValue !== undefined) {
-      const nextAngle = degreeToRadian(nextValue);
-      mutateElement(latestElement, {
-        angle: nextAngle,
-      });
-      updateBindings(latestElement, elementsMap);
+        const boundTextElement = getBoundTextElement(element, elementsMap);
+        if (boundTextElement && !isArrowElement(element)) {
+          mutateElement(boundTextElement, { angle: nextAngle });
+        }
 
-      const boundTextElement = getBoundTextElement(latestElement, elementsMap);
-      if (boundTextElement && !isArrowElement(latestElement)) {
-        mutateElement(boundTextElement, { angle: nextAngle });
+        return;
       }
 
-      return;
+      const originalAngleInDegrees =
+        Math.round(radianToDegree(origElement.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(element, {
+        angle: nextAngle,
+      });
+
+      const boundTextElement = getBoundTextElement(element, elementsMap);
+      if (boundTextElement && !isArrowElement(element)) {
+        mutateElement(boundTextElement, { angle: nextAngle });
+      }
     }
+  };
 
-    const originalAngleInDegrees =
-      Math.round(radianToDegree(origElement.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,
-    });
-    updateBindings(latestElement, elementsMap);
-
-    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
-    if (boundTextElement && !isArrowElement(latestElement)) {
-      mutateElement(boundTextElement, { angle: nextAngle });
-    }
-  }
-};
-
-const Angle = ({ element, scene, appState, property }: AngleProps) => {
   return (
     <DragInput
       label="A"
@@ -83,9 +70,6 @@ const Angle = ({ element, scene, appState, property }: AngleProps) => {
       elements={[element]}
       dragInputCallback={handleDegreeChange}
       editable={isPropertyEditable(element, "angle")}
-      scene={scene}
-      appState={appState}
-      property={property}
     />
   );
 };

packages/excalidraw/components/Stats/Dimension.tsx

@@ -1,16 +1,13 @@
-import type { ExcalidrawElement } from "../../element/types";
+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 type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
 
 interface DimensionDragInputProps {
   property: "width" | "height";
   element: ExcalidrawElement;
-  scene: Scene;
-  appState: AppState;
+  elementsMap: ElementsMap;
 }
 
 const STEP_SIZE = 10;
@@ -18,101 +15,99 @@ const _shouldKeepAspectRatio = (element: ExcalidrawElement) => {
   return element.type === "image";
 };
 
-const handleDimensionChange: DragInputCallbackType<
-  DimensionDragInputProps["property"]
-> = ({
-  accumulatedChange,
-  originalElements,
-  originalElementsMap,
-  shouldKeepAspectRatio,
-  shouldChangeByStepSize,
-  nextValue,
+const DimensionDragInput = ({
   property,
-  scene,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const origElement = originalElements[0];
-  if (origElement) {
-    const keepAspectRatio =
-      shouldKeepAspectRatio || _shouldKeepAspectRatio(origElement);
-    const aspectRatio = origElement.width / origElement.height;
+  element,
+  elementsMap,
+}: DimensionDragInputProps) => {
+  const handleDimensionChange: DragInputCallbackType = ({
+    accumulatedChange,
+    originalElements,
+    originalElementsMap,
+    shouldKeepAspectRatio,
+    shouldChangeByStepSize,
+    nextValue,
+  }) => {
+    const origElement = originalElements[0];
+    if (origElement) {
+      const keepAspectRatio =
+        shouldKeepAspectRatio || _shouldKeepAspectRatio(element);
+      const aspectRatio = origElement.width / origElement.height;
 
-    if (nextValue !== undefined) {
-      const nextWidth = Math.max(
-        property === "width"
-          ? nextValue
-          : keepAspectRatio
-          ? nextValue * aspectRatio
-          : origElement.width,
-        MIN_WIDTH_OR_HEIGHT,
-      );
-      const nextHeight = Math.max(
-        property === "height"
-          ? nextValue
-          : keepAspectRatio
-          ? nextValue / aspectRatio
-          : origElement.height,
-        MIN_WIDTH_OR_HEIGHT,
-      );
+      if (nextValue !== undefined) {
+        const nextWidth = Math.max(
+          property === "width"
+            ? nextValue
+            : keepAspectRatio
+            ? nextValue * aspectRatio
+            : origElement.width,
+          MIN_WIDTH_OR_HEIGHT,
+        );
+        const nextHeight = Math.max(
+          property === "height"
+            ? nextValue
+            : keepAspectRatio
+            ? nextValue / aspectRatio
+            : origElement.height,
+          MIN_WIDTH_OR_HEIGHT,
+        );
+
+        resizeElement(
+          nextWidth,
+          nextHeight,
+          keepAspectRatio,
+          element,
+          origElement,
+          elementsMap,
+          originalElementsMap,
+        );
+
+        return;
+      }
+      const changeInWidth = property === "width" ? accumulatedChange : 0;
+      const changeInHeight = property === "height" ? accumulatedChange : 0;
+
+      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);
+        }
+      }
+
+      if (keepAspectRatio) {
+        if (property === "width") {
+          nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
+        } else {
+          nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
+        }
+      }
+
+      nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
+      nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
 
       resizeElement(
         nextWidth,
         nextHeight,
         keepAspectRatio,
+        element,
         origElement,
         elementsMap,
+        originalElementsMap,
       );
-
-      return;
     }
-    const changeInWidth = property === "width" ? accumulatedChange : 0;
-    const changeInHeight = property === "height" ? accumulatedChange : 0;
+  };
 
-    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);
-      }
-    }
-
-    if (keepAspectRatio) {
-      if (property === "width") {
-        nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
-      } else {
-        nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
-      }
-    }
-
-    nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-    nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-
-    resizeElement(
-      nextWidth,
-      nextHeight,
-      keepAspectRatio,
-      origElement,
-      elementsMap,
-    );
-  }
-};
-
-const DimensionDragInput = ({
-  property,
-  element,
-  scene,
-  appState,
-}: DimensionDragInputProps) => {
   const value =
     Math.round((property === "width" ? element.width : element.height) * 100) /
     100;
@@ -124,9 +119,6 @@ const DimensionDragInput = ({
       dragInputCallback={handleDimensionChange}
       value={value}
       editable={isPropertyEditable(element, property)}
-      scene={scene}
-      appState={appState}
-      property={property}
     />
   );
 };

packages/excalidraw/components/Stats/DragInput.tsx

@@ -3,54 +3,43 @@ import { EVENT } from "../../constants";
 import { KEYS } from "../../keys";
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import { deepCopyElement } from "../../element/newElement";
+
+import "./DragInput.scss";
 import clsx from "clsx";
 import { useApp } from "../App";
 import { InlineIcon } from "../InlineIcon";
-import type { StatsInputProperty } from "./utils";
 import { SMALLEST_DELTA } from "./utils";
 import { StoreAction } from "../../store";
-import type Scene from "../../scene/Scene";
 
-import "./DragInput.scss";
-import type { AppState } from "../../types";
-import { cloneJSON } from "../../utils";
-
-export type DragInputCallbackType<
-  P extends StatsInputProperty,
-  E = ExcalidrawElement,
-> = (props: {
+export type DragInputCallbackType = ({
+  accumulatedChange,
+  instantChange,
+  originalElements,
+  originalElementsMap,
+  shouldKeepAspectRatio,
+  shouldChangeByStepSize,
+  nextValue,
+}: {
   accumulatedChange: number;
   instantChange: number;
-  originalElements: readonly E[];
+  originalElements: readonly ExcalidrawElement[];
   originalElementsMap: ElementsMap;
   shouldKeepAspectRatio: boolean;
   shouldChangeByStepSize: boolean;
   nextValue?: number;
-  property: P;
-  scene: Scene;
-  originalAppState: AppState;
 }) => void;
 
-interface StatsDragInputProps<
-  T extends StatsInputProperty,
-  E = ExcalidrawElement,
-> {
+interface StatsDragInputProps {
   label: string | React.ReactNode;
   icon?: React.ReactNode;
   value: number | "Mixed";
-  elements: readonly E[];
+  elements: readonly ExcalidrawElement[];
   editable?: boolean;
   shouldKeepAspectRatio?: boolean;
-  dragInputCallback: DragInputCallbackType<T, E>;
-  property: T;
-  scene: Scene;
-  appState: AppState;
+  dragInputCallback: DragInputCallbackType;
 }
 
-const StatsDragInput = <
-  T extends StatsInputProperty,
-  E extends ExcalidrawElement = ExcalidrawElement,
->({
+const StatsDragInput = ({
   label,
   icon,
   dragInputCallback,
@@ -58,48 +47,19 @@ const StatsDragInput = <
   elements,
   editable = true,
   shouldKeepAspectRatio,
-  property,
-  scene,
-  appState,
-}: StatsDragInputProps<T, E>) => {
+}: StatsDragInputProps) => {
   const app = useApp();
   const inputRef = useRef<HTMLInputElement>(null);
   const labelRef = useRef<HTMLDivElement>(null);
 
   const [inputValue, setInputValue] = useState(value.toString());
 
-  const stateRef = useRef<{
-    originalAppState: AppState;
-    originalElements: readonly E[];
-    lastUpdatedValue: string;
-    updatePending: boolean;
-  }>(null!);
-  if (!stateRef.current) {
-    stateRef.current = {
-      originalAppState: cloneJSON(appState),
-      originalElements: elements,
-      lastUpdatedValue: inputValue,
-      updatePending: false,
-    };
-  }
-
   useEffect(() => {
-    const inputValue = value.toString();
-    setInputValue(inputValue);
-    stateRef.current.lastUpdatedValue = inputValue;
-  }, [value]);
+    setInputValue(value.toString());
+  }, [value, elements]);
 
-  const handleInputValue = (
-    updatedValue: string,
-    elements: readonly E[],
-    appState: AppState,
-  ) => {
-    if (!stateRef.current.updatePending) {
-      return false;
-    }
-    stateRef.current.updatePending = false;
-
-    const parsed = Number(updatedValue);
+  const handleInputValue = (v: string) => {
+    const parsed = Number(v);
     if (isNaN(parsed)) {
       setInputValue(value.toString());
       return;
@@ -114,7 +74,6 @@ const StatsDragInput = <
     //    than the smallest delta allowed, which is 0.01
     // reason: idempotent to avoid unnecessary
     if (isNaN(original) || Math.abs(rounded - original) >= SMALLEST_DELTA) {
-      stateRef.current.lastUpdatedValue = updatedValue;
       dragInputCallback({
         accumulatedChange: 0,
         instantChange: 0,
@@ -123,9 +82,6 @@ const StatsDragInput = <
         shouldKeepAspectRatio: shouldKeepAspectRatio!!,
         shouldChangeByStepSize: false,
         nextValue: rounded,
-        property,
-        scene,
-        originalAppState: appState,
       });
       app.syncActionResult({ storeAction: StoreAction.CAPTURE });
     }
@@ -141,28 +97,12 @@ const StatsDragInput = <
     return () => {
       const nextValue = input?.value;
       if (nextValue) {
-        handleInputValueRef.current(
-          nextValue,
-          stateRef.current.originalElements,
-          stateRef.current.originalAppState,
-        );
+        handleInputValueRef.current(nextValue);
       }
     };
-  }, [
-    // we need to track change of `editable` state as mount/unmount
-    // because react doesn't trigger `blur` when a an input is blurred due
-    // to being disabled (https://github.com/facebook/react/issues/9142).
-    // As such, if we keep rendering disabled inputs, then change in selection
-    // to an element that has a given property as non-editable would not trigger
-    // blur/unmount and wouldn't update the value.
-    editable,
-  ]);
+  }, []);
 
-  if (!editable) {
-    return null;
-  }
-
-  return (
+  return editable ? (
     <div
       className={clsx("drag-input-container", !editable && "disabled")}
       data-testid={label}
@@ -182,25 +122,30 @@ const StatsDragInput = <
               y: number;
             } | null = null;
 
+            let originalElements: ExcalidrawElement[] | null = null;
             let originalElementsMap: Map<string, ExcalidrawElement> | null =
-              app.scene
-                .getNonDeletedElements()
-                .reduce((acc: ElementsMap, element) => {
-                  acc.set(element.id, deepCopyElement(element));
-                  return acc;
-                }, new Map());
-
-            let originalElements: readonly E[] | null = elements.map(
-              (element) => originalElementsMap!.get(element.id) as E,
-            );
-
-            const originalAppState: AppState = cloneJSON(appState);
+              null;
 
             let accumulatedChange: number | null = null;
 
             document.body.classList.add("excalidraw-cursor-resize");
 
             const onPointerMove = (event: PointerEvent) => {
+              if (!originalElementsMap) {
+                originalElementsMap = app.scene
+                  .getNonDeletedElements()
+                  .reduce((acc, element) => {
+                    acc.set(element.id, deepCopyElement(element));
+                    return acc;
+                  }, new Map() as ElementsMap);
+              }
+
+              if (!originalElements) {
+                originalElements = elements.map(
+                  (element) => originalElementsMap!.get(element.id)!,
+                );
+              }
+
               if (!accumulatedChange) {
                 accumulatedChange = 0;
               }
@@ -208,7 +153,6 @@ const StatsDragInput = <
               if (
                 lastPointer &&
                 originalElementsMap !== null &&
-                originalElements !== null &&
                 accumulatedChange !== null
               ) {
                 const instantChange = event.clientX - lastPointer.x;
@@ -221,9 +165,6 @@ const StatsDragInput = <
                   originalElementsMap,
                   shouldKeepAspectRatio: shouldKeepAspectRatio!!,
                   shouldChangeByStepSize: event.shiftKey,
-                  property,
-                  scene,
-                  originalAppState,
                 });
               }
 
@@ -275,7 +216,7 @@ const StatsDragInput = <
               eventTarget instanceof HTMLInputElement &&
               event.key === KEYS.ENTER
             ) {
-              handleInputValue(eventTarget.value, elements, appState);
+              handleInputValue(eventTarget.value);
               app.focusContainer();
             }
           }
@@ -283,28 +224,23 @@ const StatsDragInput = <
         ref={inputRef}
         value={inputValue}
         onChange={(event) => {
-          stateRef.current.updatePending = true;
           setInputValue(event.target.value);
         }}
         onFocus={(event) => {
           event.target.select();
-          stateRef.current.originalElements = elements;
-          stateRef.current.originalAppState = cloneJSON(appState);
         }}
         onBlur={(event) => {
           if (!inputValue) {
             setInputValue(value.toString());
           } else if (editable) {
-            handleInputValue(
-              event.target.value,
-              stateRef.current.originalElements,
-              stateRef.current.originalAppState,
-            );
+            handleInputValue(event.target.value);
           }
         }}
         disabled={!editable}
       />
     </div>
+  ) : (
+    <></>
   );
 };
 

packages/excalidraw/components/Stats/FontSize.tsx

@@ -1,97 +1,73 @@
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
+import type { ElementsMap, ExcalidrawTextElement } from "../../element/types";
+import { refreshTextDimensions } from "../../element/newElement";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { mutateElement } from "../../element/mutateElement";
 import { getStepSizedValue } from "./utils";
 import { fontSizeIcon } from "../icons";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
-import { isTextElement, redrawTextBoundingBox } from "../../element";
-import { hasBoundTextElement } from "../../element/typeChecks";
-import { getBoundTextElement } from "../../element/textElement";
 
 interface FontSizeProps {
-  element: ExcalidrawElement;
-  scene: Scene;
-  appState: AppState;
-  property: "fontSize";
+  element: ExcalidrawTextElement;
+  elementsMap: ElementsMap;
 }
 
 const MIN_FONT_SIZE = 4;
 const STEP_SIZE = 4;
 
-const handleFontSizeChange: DragInputCallbackType<
-  FontSizeProps["property"],
-  ExcalidrawTextElement
-> = ({
-  accumulatedChange,
-  originalElements,
-  shouldChangeByStepSize,
-  nextValue,
-  scene,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
+const FontSize = ({ element, elementsMap }: FontSizeProps) => {
+  const handleFontSizeChange: DragInputCallbackType = ({
+    accumulatedChange,
+    originalElements,
+    shouldChangeByStepSize,
+    nextValue,
+  }) => {
+    const origElement = originalElements[0];
+    if (origElement) {
+      if (nextValue !== undefined) {
+        const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
 
-  const origElement = originalElements[0];
-  if (origElement) {
-    const latestElement = elementsMap.get(origElement.id);
-    if (!latestElement || !isTextElement(latestElement)) {
-      return;
-    }
+        const newElement = {
+          ...element,
+          fontSize: nextFontSize,
+        };
+        const updates = refreshTextDimensions(newElement, null, elementsMap);
+        mutateElement(element, {
+          ...updates,
+          fontSize: nextFontSize,
+        });
+        return;
+      }
 
-    let nextFontSize;
-
-    if (nextValue !== undefined) {
-      nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
-    } else if (origElement.type === "text") {
-      const originalFontSize = Math.round(origElement.fontSize);
-      const changeInFontSize = Math.round(accumulatedChange);
-      nextFontSize = Math.max(
-        originalFontSize + changeInFontSize,
-        MIN_FONT_SIZE,
-      );
-      if (shouldChangeByStepSize) {
-        nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
+      if (origElement.type === "text") {
+        const originalFontSize = Math.round(origElement.fontSize);
+        const changeInFontSize = Math.round(accumulatedChange);
+        let nextFontSize = Math.max(
+          originalFontSize + changeInFontSize,
+          MIN_FONT_SIZE,
+        );
+        if (shouldChangeByStepSize) {
+          nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
+        }
+        const newElement = {
+          ...element,
+          fontSize: nextFontSize,
+        };
+        const updates = refreshTextDimensions(newElement, null, elementsMap);
+        mutateElement(element, {
+          ...updates,
+          fontSize: nextFontSize,
+        });
       }
     }
-
-    if (nextFontSize) {
-      mutateElement(latestElement, {
-        fontSize: nextFontSize,
-      });
-      redrawTextBoundingBox(
-        latestElement,
-        scene.getContainerElement(latestElement),
-        scene.getNonDeletedElementsMap(),
-      );
-    }
-  }
-};
-
-const FontSize = ({ element, scene, appState, property }: FontSizeProps) => {
-  const _element = isTextElement(element)
-    ? element
-    : hasBoundTextElement(element)
-    ? getBoundTextElement(element, scene.getNonDeletedElementsMap())
-    : null;
-
-  if (!_element) {
-    return null;
-  }
+  };
 
   return (
     <StatsDragInput
       label="F"
-      value={Math.round(_element.fontSize * 10) / 10}
-      elements={[_element]}
+      value={Math.round(element.fontSize * 10) / 10}
+      elements={[element]}
       dragInputCallback={handleFontSizeChange}
       icon={fontSizeIcon}
-      appState={appState}
-      scene={scene}
-      property={property}
     />
   );
 };

packages/excalidraw/components/Stats/MultiAngle.tsx

@@ -1,7 +1,7 @@
 import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement } from "../../element/typeChecks";
-import type { ExcalidrawElement } from "../../element/types";
+import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import { isInGroup } from "../../groups";
 import { degreeToRadian, radianToDegree } from "../../math";
 import type Scene from "../../scene/Scene";
@@ -9,102 +9,84 @@ import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
-import type { AppState } from "../../types";
 
 interface MultiAngleProps {
   elements: readonly ExcalidrawElement[];
+  elementsMap: ElementsMap;
   scene: Scene;
-  appState: AppState;
-  property: "angle";
 }
 
 const STEP_SIZE = 15;
 
-const handleDegreeChange: DragInputCallbackType<
-  MultiAngleProps["property"]
-> = ({
-  accumulatedChange,
-  originalElements,
-  shouldChangeByStepSize,
-  nextValue,
-  property,
-  scene,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const editableLatestIndividualElements = originalElements
-    .map((el) => elementsMap.get(el.id))
-    .filter((el) => el && !isInGroup(el) && isPropertyEditable(el, property));
-  const editableOriginalIndividualElements = originalElements.filter(
-    (el) => !isInGroup(el) && isPropertyEditable(el, property),
-  );
+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);
+    if (nextValue !== undefined) {
+      const nextAngle = degreeToRadian(nextValue);
 
-    for (const element of editableLatestIndividualElements) {
-      if (!element) {
-        continue;
+      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(
-        element,
+        latestElement,
         {
           angle: nextAngle,
         },
         false,
       );
 
-      const boundTextElement = getBoundTextElement(element, elementsMap);
-      if (boundTextElement && !isArrowElement(element)) {
+      const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+      if (boundTextElement && !isArrowElement(latestElement)) {
         mutateElement(boundTextElement, { angle: nextAngle }, false);
       }
     }
-
     scene.triggerUpdate();
+  };
 
-    return;
-  }
-
-  for (let i = 0; i < editableLatestIndividualElements.length; i++) {
-    const latestElement = editableLatestIndividualElements[i];
-    if (!latestElement) {
-      continue;
-    }
-    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 MultiAngle = ({
-  elements,
-  scene,
-  appState,
-  property,
-}: MultiAngleProps) => {
   const editableLatestIndividualElements = elements.filter(
     (el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
   );
@@ -125,9 +107,6 @@ const MultiAngle = ({
       elements={elements}
       dragInputCallback={handleDegreeChange}
       editable={editable}
-      appState={appState}
-      scene={scene}
-      property={property}
     />
   );
 };

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -7,16 +7,12 @@ import {
   getBoundTextElement,
   handleBindTextResize,
 } from "../../element/textElement";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
+import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
-import type { AppState, Point } from "../../types";
+import type { Point } from "../../types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
-import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
@@ -24,10 +20,9 @@ import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
 interface MultiDimensionProps {
   property: "width" | "height";
   elements: readonly ExcalidrawElement[];
-  elementsMap: NonDeletedSceneElementsMap;
+  elementsMap: ElementsMap;
   atomicUnits: AtomicUnit[];
   scene: Scene;
-  appState: AppState;
 }
 
 const STEP_SIZE = 10;
@@ -64,7 +59,7 @@ const resizeElementInGroup = (
   scale: number,
   latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
+  elementsMap: ElementsMap,
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
@@ -107,7 +102,7 @@ const resizeGroup = (
   property: MultiDimensionProps["property"],
   latestElements: ExcalidrawElement[],
   originalElements: ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
+  elementsMap: ElementsMap,
   originalElementsMap: ElementsMap,
 ) => {
   // keep aspect ratio for groups
@@ -136,205 +131,12 @@ const resizeGroup = (
   }
 };
 
-const handleDimensionChange: DragInputCallbackType<
-  MultiDimensionProps["property"]
-> = ({
-  accumulatedChange,
-  originalElements,
-  originalElementsMap,
-  originalAppState,
-  shouldChangeByStepSize,
-  nextValue,
-  scene,
-  property,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const atomicUnits = getAtomicUnits(originalElements, originalAppState);
-  if (nextValue !== undefined) {
-    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;
-        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,
-        );
-
-        resizeGroup(
-          nextWidth,
-          nextHeight,
-          initialHeight,
-          aspectRatio,
-          [x1, y1],
-          property,
-          latestElements,
-          originalElements,
-          elementsMap,
-          originalElementsMap,
-        );
-      } 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,
-            origElement,
-            elementsMap,
-            false,
-          );
-        }
-      }
-    }
-
-    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,
-      );
-    } 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, origElement, elementsMap);
-      }
-    }
-  }
-
-  scene.triggerUpdate();
-};
-
 const MultiDimension = ({
   property,
   elements,
   elementsMap,
   atomicUnits,
   scene,
-  appState,
 }: MultiDimensionProps) => {
   const sizes = useMemo(
     () =>
@@ -365,6 +167,202 @@ const MultiDimension = ({
 
   const editable = sizes.length > 0;
 
+  const handleDimensionChange: DragInputCallbackType = ({
+    accumulatedChange,
+    originalElementsMap,
+    shouldChangeByStepSize,
+    nextValue,
+  }) => {
+    if (nextValue !== undefined) {
+      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;
+          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,
+          );
+
+          resizeGroup(
+            nextWidth,
+            nextHeight,
+            initialHeight,
+            aspectRatio,
+            [x1, y1],
+            property,
+            latestElements,
+            originalElements,
+            elementsMap,
+            originalElementsMap,
+          );
+        } 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,
+            );
+          }
+        }
+      }
+
+      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,
+        );
+      } 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,
+          );
+        }
+      }
+    }
+
+    scene.triggerUpdate();
+  };
+
   return (
     <DragInput
       label={property === "width" ? "W" : "H"}
@@ -372,9 +370,6 @@ const MultiDimension = ({
       dragInputCallback={handleDimensionChange}
       value={value}
       editable={editable}
-      appState={appState}
-      property={property}
-      scene={scene}
     />
   );
 };

packages/excalidraw/components/Stats/MultiFontSize.tsx

@@ -1,10 +1,10 @@
-import { isTextElement, redrawTextBoundingBox } from "../../element";
+import { isTextElement, refreshTextDimensions } from "../../element";
 import { mutateElement } from "../../element/mutateElement";
-import { hasBoundTextElement } from "../../element/typeChecks";
+import { isBoundToContainer } from "../../element/typeChecks";
 import type {
+  ElementsMap,
   ExcalidrawElement,
   ExcalidrawTextElement,
-  NonDeletedSceneElementsMap,
 } from "../../element/types";
 import { isInGroup } from "../../groups";
 import type Scene from "../../scene/Scene";
@@ -12,87 +12,62 @@ import { fontSizeIcon } from "../icons";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue } from "./utils";
-import type { AppState } from "../../types";
-import { getBoundTextElement } from "../../element/textElement";
 
 interface MultiFontSizeProps {
   elements: readonly ExcalidrawElement[];
+  elementsMap: ElementsMap;
   scene: Scene;
-  elementsMap: NonDeletedSceneElementsMap;
-  appState: AppState;
-  property: "fontSize";
 }
 
 const MIN_FONT_SIZE = 4;
 const STEP_SIZE = 4;
 
-const getApplicableTextElements = (
-  elements: readonly (ExcalidrawElement | undefined)[],
-  elementsMap: NonDeletedSceneElementsMap,
-) =>
-  elements.reduce(
-    (acc: ExcalidrawTextElement[], el) => {
-      if (!el || isInGroup(el)) {
-        return acc;
-      }
-      if (isTextElement(el)) {
-        acc.push(el);
-        return acc;
-      }
-      if (hasBoundTextElement(el)) {
-        const boundTextElement = getBoundTextElement(el, elementsMap);
-        if (boundTextElement) {
-          acc.push(boundTextElement);
-          return acc;
-        }
-      }
-
-      return acc;
-    },
-
-    [],
-  );
-
-const handleFontSizeChange: DragInputCallbackType<
-  MultiFontSizeProps["property"],
-  ExcalidrawTextElement
-> = ({
-  accumulatedChange,
-  originalElements,
-  shouldChangeByStepSize,
-  nextValue,
+const MultiFontSize = ({
+  elements,
+  elementsMap,
   scene,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const latestTextElements = originalElements.map((el) =>
-    elementsMap.get(el.id),
+}: 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;
 
-  let nextFontSize;
+  const handleFontSizeChange: DragInputCallbackType = ({
+    accumulatedChange,
+    originalElements,
+    shouldChangeByStepSize,
+    nextValue,
+  }) => {
+    if (nextValue) {
+      const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
 
-  if (nextValue) {
-    nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
-
-    for (const textElement of latestTextElements) {
-      mutateElement(
-        textElement,
-        {
+      for (const textElement of latestTextElements) {
+        const newElement = {
+          ...textElement,
           fontSize: nextFontSize,
-        },
-        false,
-      );
+        };
+        const updates = refreshTextDimensions(newElement, null, elementsMap);
+        mutateElement(
+          textElement,
+          {
+            ...updates,
+            fontSize: nextFontSize,
+          },
+          false,
+        );
+      }
 
-      redrawTextBoundingBox(
-        textElement,
-        scene.getContainerElement(textElement),
-        elementsMap,
-        false,
-      );
+      scene.triggerUpdate();
+      return;
     }
 
-    scene.triggerUpdate();
-  } else {
-    const originalTextElements = originalElements as ExcalidrawTextElement[];
+    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];
@@ -107,56 +82,32 @@ const handleFontSizeChange: DragInputCallbackType<
       if (shouldChangeByStepSize) {
         nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
       }
+      const newElement = {
+        ...latestElement,
+        fontSize: nextFontSize,
+      };
+      const updates = refreshTextDimensions(newElement, null, elementsMap);
       mutateElement(
         latestElement,
         {
+          ...updates,
           fontSize: nextFontSize,
         },
         false,
       );
-
-      redrawTextBoundingBox(
-        latestElement,
-        scene.getContainerElement(latestElement),
-        elementsMap,
-        false,
-      );
     }
 
     scene.triggerUpdate();
-  }
-};
-
-const MultiFontSize = ({
-  elements,
-  scene,
-  appState,
-  property,
-  elementsMap,
-}: MultiFontSizeProps) => {
-  const latestTextElements = getApplicableTextElements(elements, elementsMap);
-
-  if (!latestTextElements.length) {
-    return null;
-  }
-
-  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;
+  };
 
   return (
     <StatsDragInput
       label="F"
       icon={fontSizeIcon}
-      elements={latestTextElements}
+      elements={elements}
       dragInputCallback={handleFontSizeChange}
       value={value}
       editable={editable}
-      scene={scene}
-      property={property}
-      appState={appState}
     />
   );
 };

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -1,18 +1,13 @@
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
+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 { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
 import { getCommonBounds, isTextElement } from "../../element";
 import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
-import type { AppState } from "../../types";
 
 interface MultiPositionProps {
   property: "x" | "y";
@@ -20,7 +15,6 @@ interface MultiPositionProps {
   elementsMap: ElementsMap;
   atomicUnits: AtomicUnit[];
   scene: Scene;
-  appState: AppState;
 }
 
 const STEP_SIZE = 10;
@@ -31,11 +25,12 @@ const moveElements = (
   changeInTopY: number,
   elements: readonly ExcalidrawElement[],
   originalElements: readonly ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
+  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,
@@ -58,6 +53,7 @@ const moveElements = (
     moveElement(
       newTopLeftX,
       newTopLeftY,
+      latestElement,
       origElement,
       elementsMap,
       originalElementsMap,
@@ -69,22 +65,18 @@ const moveElements = (
 const moveGroupTo = (
   nextX: number,
   nextY: number,
+  latestElements: ExcalidrawElement[],
   originalElements: ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
+  elementsMap: ElementsMap,
   originalElementsMap: ElementsMap,
-  scene: Scene,
 ) => {
   const [x1, y1, ,] = getCommonBounds(originalElements);
   const offsetX = nextX - x1;
   const offsetY = nextY - y1;
 
-  for (let i = 0; i < originalElements.length; i++) {
+  for (let i = 0; i < latestElements.length; i++) {
     const origElement = originalElements[i];
-
-    const latestElement = elementsMap.get(origElement.id);
-    if (!latestElement) {
-      continue;
-    }
+    const latestElement = latestElements[i];
 
     // bound texts are moved with their containers
     if (!isTextElement(latestElement) || !latestElement.containerId) {
@@ -104,6 +96,7 @@ const moveGroupTo = (
       moveElement(
         topLeftX + offsetX,
         topLeftY + offsetY,
+        latestElement,
         origElement,
         elementsMap,
         originalElementsMap,
@@ -113,111 +106,12 @@ const moveGroupTo = (
   }
 };
 
-const handlePositionChange: DragInputCallbackType<
-  MultiPositionProps["property"]
-> = ({
-  accumulatedChange,
-  originalElements,
-  originalElementsMap,
-  shouldChangeByStepSize,
-  nextValue,
-  property,
-  scene,
-  originalAppState,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-
-  if (nextValue !== undefined) {
-    for (const atomicUnit of getAtomicUnits(
-      originalElements,
-      originalAppState,
-    )) {
-      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.original),
-          elementsMap,
-          originalElementsMap,
-          scene,
-        );
-      } 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,
-            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,
-    originalElements,
-    originalElements,
-    elementsMap,
-    originalElementsMap,
-  );
-
-  scene.triggerUpdate();
-};
-
 const MultiPosition = ({
   property,
   elements,
   elementsMap,
   atomicUnits,
   scene,
-  appState,
 }: MultiPositionProps) => {
   const positions = useMemo(
     () =>
@@ -243,15 +137,101 @@ const MultiPosition = ({
 
   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}
-      property={property}
-      scene={scene}
-      appState={appState}
     />
   );
 };

packages/excalidraw/components/Stats/Position.tsx

@@ -3,92 +3,16 @@ import { rotate } from "../../math";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
 
 interface PositionProps {
   property: "x" | "y";
   element: ExcalidrawElement;
   elementsMap: ElementsMap;
-  scene: Scene;
-  appState: AppState;
 }
 
 const STEP_SIZE = 10;
 
-const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
-  accumulatedChange,
-  originalElements,
-  originalElementsMap,
-  shouldChangeByStepSize,
-  nextValue,
-  property,
-  scene,
-}) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  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,
-      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,
-    origElement,
-    elementsMap,
-    originalElementsMap,
-  );
-};
-
-const Position = ({
-  property,
-  element,
-  elementsMap,
-  scene,
-  appState,
-}: PositionProps) => {
+const Position = ({ property, element, elementsMap }: PositionProps) => {
   const [topLeftX, topLeftY] = rotate(
     element.x,
     element.y,
@@ -99,15 +23,77 @@ const Position = ({
   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}
-      property={property}
-      scene={scene}
-      appState={appState}
     />
   );
 };

packages/excalidraw/components/Stats/index.tsx

@@ -11,7 +11,12 @@ import Angle from "./Angle";
 
 import FontSize from "./FontSize";
 import MultiDimension from "./MultiDimension";
-import { elementsAreInSameGroup } from "../../groups";
+import {
+  elementsAreInSameGroup,
+  getElementsInGroup,
+  getSelectedGroupIds,
+  isInGroup,
+} from "../../groups";
 import MultiAngle from "./MultiAngle";
 import MultiFontSize from "./MultiFontSize";
 import Position from "./Position";
@@ -19,7 +24,7 @@ import MultiPosition from "./MultiPosition";
 import Collapsible from "./Collapsible";
 import type Scene from "../../scene/Scene";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
-import { getAtomicUnits } from "./utils";
+import type { AtomicUnit } from "./utils";
 import { STATS_PANELS } from "../../constants";
 
 interface StatsProps {
@@ -101,7 +106,21 @@ export const StatsInner = memo(
     );
 
     const atomicUnits = useMemo(() => {
-      return getAtomicUnits(selectedElements, appState);
+      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 (
@@ -187,40 +206,32 @@ export const StatsInner = memo(
                         element={singleElement}
                         property="x"
                         elementsMap={elementsMap}
-                        scene={scene}
-                        appState={appState}
                       />
                       <Position
                         element={singleElement}
                         property="y"
                         elementsMap={elementsMap}
-                        scene={scene}
-                        appState={appState}
                       />
                       <Dimension
                         property="width"
                         element={singleElement}
-                        scene={scene}
-                        appState={appState}
+                        elementsMap={elementsMap}
                       />
                       <Dimension
                         property="height"
                         element={singleElement}
-                        scene={scene}
-                        appState={appState}
+                        elementsMap={elementsMap}
                       />
                       <Angle
-                        property="angle"
                         element={singleElement}
-                        scene={scene}
-                        appState={appState}
-                      />
-                      <FontSize
-                        property="fontSize"
-                        element={singleElement}
-                        scene={scene}
-                        appState={appState}
+                        elementsMap={elementsMap}
                       />
+                      {singleElement.type === "text" && (
+                        <FontSize
+                          element={singleElement}
+                          elementsMap={elementsMap}
+                        />
+                      )}
                     </div>
                   </div>
                 )}
@@ -243,7 +254,6 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
-                        appState={appState}
                       />
                       <MultiPosition
                         property="y"
@@ -251,7 +261,6 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
-                        appState={appState}
                       />
                       <MultiDimension
                         property="width"
@@ -259,7 +268,6 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
-                        appState={appState}
                       />
                       <MultiDimension
                         property="height"
@@ -267,20 +275,16 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
-                        appState={appState}
                       />
                       <MultiAngle
-                        property="angle"
                         elements={multipleElements}
+                        elementsMap={elementsMap}
                         scene={scene}
-                        appState={appState}
                       />
                       <MultiFontSize
-                        property="fontSize"
                         elements={multipleElements}
-                        scene={scene}
-                        appState={appState}
                         elementsMap={elementsMap}
+                        scene={scene}
                       />
                     </div>
                   </div>

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

@@ -11,11 +11,10 @@ import * as StaticScene from "../../renderer/staticScene";
 import { vi } from "vitest";
 import { reseed } from "../../random";
 import { setDateTimeForTests } from "../../utils";
-import { Excalidraw, mutateElement } from "../..";
+import { Excalidraw } from "../..";
 import { t } from "../../i18n";
 import type {
   ExcalidrawElement,
-  ExcalidrawLinearElement,
   ExcalidrawTextElement,
 } from "../../element/types";
 import { degreeToRadian, rotate } from "../../math";
@@ -24,7 +23,6 @@ import { getCommonBounds, isTextElement } from "../../element";
 import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
-import React from "react";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -32,21 +30,11 @@ const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 let stats: HTMLElement | null = null;
 let elementStats: HTMLElement | null | undefined = null;
 
-const editInput = (input: HTMLInputElement, value: string) => {
-  input.focus();
-  fireEvent.change(input, { target: { value } });
-  input.blur();
-};
-
 const getStatsProperty = (label: string) => {
-  const elementStats = UI.queryStats()?.querySelector("#elementStats");
-
   if (elementStats) {
     const properties = elementStats?.querySelector(".statsItem");
-    return (
-      properties?.querySelector?.(
-        `.drag-input-container[data-testid="${label}"]`,
-      ) || null
+    return properties?.querySelector?.(
+      `.drag-input-container[data-testid="${label}"]`,
     );
   }
 
@@ -63,9 +51,11 @@ const testInputProperty = (
   const input = getStatsProperty(label)?.querySelector(
     ".drag-input",
   ) as HTMLInputElement;
-  expect(input).toBeDefined();
+  expect(input).not.toBeNull();
   expect(input.value).toBe(initialValue.toString());
-  editInput(input, String(nextValue));
+  input?.focus();
+  input.value = nextValue.toString();
+  input?.blur();
   if (property === "angle") {
     expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
   } else if (property === "fontSize" && isTextElement(element)) {
@@ -101,92 +91,6 @@ describe("step sized value", () => {
   });
 });
 
-describe("binding with linear elements", () => {
-  beforeEach(async () => {
-    localStorage.clear();
-    renderStaticScene.mockClear();
-    reseed(19);
-    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);
-
-    UI.clickTool("arrow");
-    mouse.down(5, 0);
-    mouse.up(300, 50);
-
-    elementStats = stats?.querySelector("#elementStats");
-  });
-
-  beforeAll(() => {
-    mockBoundingClientRect();
-  });
-
-  afterAll(() => {
-    restoreOriginalGetBoundingClientRect();
-  });
-
-  it("should remain bound to linear element on small position change", async () => {
-    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = getStatsProperty("X")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(linear.startBinding).not.toBe(null);
-    expect(inputX).not.toBeNull();
-    editInput(inputX, String("204"));
-    expect(linear.startBinding).not.toBe(null);
-  });
-
-  it("should remain bound to linear element on small angle change", async () => {
-    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = getStatsProperty("A")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(linear.startBinding).not.toBe(null);
-    editInput(inputAngle, String("1"));
-    expect(linear.startBinding).not.toBe(null);
-  });
-
-  it("should unbind linear element on large position change", async () => {
-    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = getStatsProperty("X")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(linear.startBinding).not.toBe(null);
-    expect(inputX).not.toBeNull();
-    editInput(inputX, String("254"));
-    expect(linear.startBinding).toBe(null);
-  });
-
-  it("should remain bound to linear element on small angle change", async () => {
-    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = getStatsProperty("A")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(linear.startBinding).not.toBe(null);
-    editInput(inputAngle, String("45"));
-    expect(linear.startBinding).toBe(null);
-  });
-});
-
 // single element
 describe("stats for a generic element", () => {
   beforeEach(async () => {
@@ -223,8 +127,8 @@ describe("stats for a generic element", () => {
   });
 
   it("should open stats", () => {
-    expect(stats).toBeDefined();
-    expect(elementStats).toBeDefined();
+    expect(stats).not.toBeNull();
+    expect(elementStats).not.toBeNull();
 
     // title
     const title = elementStats?.querySelector("h3");
@@ -232,18 +136,18 @@ describe("stats for a generic element", () => {
 
     // element type
     const elementType = elementStats?.querySelector(".elementType");
-    expect(elementType).toBeDefined();
+    expect(elementType).not.toBeNull();
     expect(elementType?.lastChild?.nodeValue).toBe(t("element.rectangle"));
 
     // properties
     const properties = elementStats?.querySelector(".statsItem");
-    expect(properties?.childNodes).toBeDefined();
+    expect(properties?.childNodes).not.toBeNull();
     ["X", "Y", "W", "H", "A"].forEach((label) => () => {
       expect(
         properties?.querySelector?.(
           `.drag-input-container[data-testid="${label}"]`,
         ),
-      ).toBeDefined();
+      ).not.toBeNull();
     });
   });
 
@@ -266,15 +170,19 @@ describe("stats for a generic element", () => {
     const input = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(input).toBeDefined();
+    expect(input).not.toBeNull();
     expect(input.value).toBe(rectangle.width.toString());
-    editInput(input, "123.123");
+    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);
 
-    editInput(input, "88.98766");
+    input?.focus();
+    input.value = "88.98766";
+    input?.blur();
     expect(input.value).toBe("88.99");
     expect(rectangle.width).toBe(88.99);
   });
@@ -425,9 +333,11 @@ describe("stats for a non-generic element", () => {
     const input = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(input).toBeDefined();
+    expect(input).not.toBeNull();
     expect(input.value).toBe(text.fontSize.toString());
-    editInput(input, "36");
+    input?.focus();
+    input.value = "36";
+    input?.blur();
     expect(text.fontSize).toBe(36);
 
     // cannot change width or height
@@ -437,7 +347,9 @@ describe("stats for a non-generic element", () => {
     expect(height).toBeUndefined();
 
     // min font size is 4
-    editInput(input, "0");
+    input.focus();
+    input.value = "0";
+    input.blur();
     expect(text.fontSize).not.toBe(0);
     expect(text.fontSize).toBe(4);
   });
@@ -458,7 +370,7 @@ describe("stats for a non-generic element", () => {
 
     elementStats = stats?.querySelector("#elementStats");
 
-    expect(elementStats).toBeDefined();
+    expect(elementStats).not.toBeNull();
 
     // cannot change angle
     const angle = getStatsProperty("A")?.querySelector(".drag-input");
@@ -479,7 +391,7 @@ describe("stats for a non-generic element", () => {
       },
     });
     elementStats = stats?.querySelector("#elementStats");
-    expect(elementStats).toBeDefined();
+    expect(elementStats).not.toBeNull();
     const widthToHeight = image.width / image.height;
 
     // when width or height is changed, the aspect ratio is preserved
@@ -491,35 +403,6 @@ describe("stats for a non-generic element", () => {
     expect(image.height).toBe(80);
     expect(image.width / image.height).toBe(widthToHeight);
   });
-
-  it("should display fontSize for bound text", () => {
-    const container = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-    const text = API.createElement({
-      type: "text",
-      width: 200,
-      height: 100,
-      containerId: container.id,
-      fontSize: 20,
-    });
-    mutateElement(container, {
-      boundElements: [{ type: "text", id: text.id }],
-    });
-    h.elements = [container, text];
-
-    API.setSelectedElements([container]);
-    const fontSize = getStatsProperty("F")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-    expect(fontSize).toBeDefined();
-
-    editInput(fontSize, "40");
-
-    expect(text.fontSize).toBe(40);
-  });
 });
 
 // multiple elements
@@ -588,12 +471,16 @@ describe("stats for multiple elements", () => {
     ) as HTMLInputElement;
     expect(angle.value).toBe("0");
 
-    editInput(width, "250");
+    width.focus();
+    width.value = "250";
+    width.blur();
     h.elements.forEach((el) => {
       expect(el.width).toBe(250);
     });
 
-    editInput(height, "450");
+    height.focus();
+    height.value = "450";
+    height.blur();
     h.elements.forEach((el) => {
       expect(el.height).toBe(450);
     });
@@ -614,6 +501,7 @@ describe("stats for multiple elements", () => {
     mouse.up(200, 100);
 
     const frame = API.createElement({
+      id: "id0",
       type: "frame",
       x: 150,
       width: 150,
@@ -636,34 +524,38 @@ describe("stats for multiple elements", () => {
     const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(width).toBeDefined();
+    expect(width).not.toBeNull();
     expect(width.value).toBe("Mixed");
 
     const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(height).toBeDefined();
+    expect(height).not.toBeNull();
     expect(height.value).toBe("Mixed");
 
     const angle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(angle).toBeDefined();
+    expect(angle).not.toBeNull();
     expect(angle.value).toBe("0");
 
     const fontSize = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(fontSize).toBeDefined();
+    expect(fontSize).not.toBeNull();
 
     // changing width does not affect text
-    editInput(width, "200");
+    width.focus();
+    width.value = "200";
+    width.blur();
 
     expect(rectangle?.width).toBe(200);
     expect(frame.width).toBe(200);
     expect(text?.width).not.toBe(200);
 
-    editInput(angle, "40");
+    angle.focus();
+    angle.value = "40";
+    angle.blur();
 
     const angleInRadian = degreeToRadian(40);
     expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
@@ -700,10 +592,12 @@ describe("stats for multiple elements", () => {
       ".drag-input",
     ) as HTMLInputElement;
 
-    expect(x).toBeDefined();
+    expect(x).not.toBeNull();
     expect(Number(x.value)).toBe(x1);
 
-    editInput(x, "300");
+    x.focus();
+    x.value = "300";
+    x.blur();
 
     expect(h.elements[0].x).toBe(300);
     expect(h.elements[1].x).toBe(400);
@@ -713,10 +607,12 @@ describe("stats for multiple elements", () => {
       ".drag-input",
     ) as HTMLInputElement;
 
-    expect(y).toBeDefined();
+    expect(y).not.toBeNull();
     expect(Number(y.value)).toBe(y1);
 
-    editInput(y, "200");
+    y.focus();
+    y.value = "200";
+    y.blur();
 
     expect(h.elements[0].y).toBe(200);
     expect(h.elements[1].y).toBe(300);
@@ -725,29 +621,35 @@ describe("stats for multiple elements", () => {
     const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(width).toBeDefined();
+    expect(width).not.toBeNull();
     expect(Number(width.value)).toBe(200);
 
     const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(height).toBeDefined();
+    expect(height).not.toBeNull();
     expect(Number(height.value)).toBe(200);
 
-    editInput(width, "400");
+    width.focus();
+    width.value = "400";
+    width.blur();
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     let newGroupWidth = x2 - x1;
 
     expect(newGroupWidth).toBeCloseTo(400, 4);
 
-    editInput(width, "300");
+    width.focus();
+    width.value = "300";
+    width.blur();
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     newGroupWidth = x2 - x1;
     expect(newGroupWidth).toBeCloseTo(300, 4);
 
-    editInput(height, "500");
+    height.focus();
+    height.value = "500";
+    height.blur();
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     const newGroupHeight = y2 - y1;

packages/excalidraw/components/Stats/utils.ts

@@ -1,7 +1,4 @@
-import {
-  bindOrUnbindLinearElements,
-  updateBoundElements,
-} from "../../element/binding";
+import { updateBoundElements } from "../../element/binding";
 import { mutateElement } from "../../element/mutateElement";
 import {
   measureFontSizeFromWidth,
@@ -14,34 +11,15 @@ import {
   getBoundTextMaxWidth,
   handleBindTextResize,
 } from "../../element/textElement";
-import {
-  isFrameLikeElement,
-  isLinearElement,
-  isTextElement,
-} from "../../element/typeChecks";
+import { isFrameLikeElement, isTextElement } from "../../element/typeChecks";
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
 } from "../../element/types";
-import {
-  getSelectedGroupIds,
-  getElementsInGroup,
-  isInGroup,
-} from "../../groups";
 import { rotate } from "../../math";
-import type { AppState } from "../../types";
 import { getFontString } from "../../utils";
 
-export type StatsInputProperty =
-  | "x"
-  | "y"
-  | "width"
-  | "height"
-  | "angle"
-  | "fontSize";
-
 export const SMALLEST_DELTA = 0.01;
 
 export const isPropertyEditable = (
@@ -122,14 +100,12 @@ export const resizeElement = (
   nextWidth: number,
   nextHeight: number,
   keepAspectRatio: boolean,
+  latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
+  elementsMap: ElementsMap,
+  originalElementsMap: Map<string, ExcalidrawElement>,
   shouldInformMutation = true,
 ) => {
-  const latestElement = elementsMap.get(origElement.id);
-  if (!latestElement) {
-    return;
-  }
   let boundTextFont: { fontSize?: number } = {};
   const boundTextElement = getBoundTextElement(latestElement, elementsMap);
 
@@ -164,12 +140,6 @@ export const resizeElement = (
     },
     shouldInformMutation,
   );
-  updateBindings(latestElement, elementsMap, {
-    newSize: {
-      width: nextWidth,
-      height: nextHeight,
-    },
-  });
 
   if (boundTextElement) {
     boundTextFont = {
@@ -193,6 +163,13 @@ export const resizeElement = (
     }
   }
 
+  updateBoundElements(latestElement, elementsMap, {
+    newSize: {
+      width: nextWidth,
+      height: nextHeight,
+    },
+  });
+
   if (boundTextElement && boundTextFont) {
     mutateElement(boundTextElement, {
       fontSize: boundTextFont.fontSize,
@@ -204,15 +181,12 @@ export const resizeElement = (
 export const moveElement = (
   newTopLeftX: number,
   newTopLeftY: number,
+  latestElement: ExcalidrawElement,
   originalElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
+  elementsMap: ElementsMap,
   originalElementsMap: ElementsMap,
   shouldInformMutation = true,
 ) => {
-  const latestElement = elementsMap.get(originalElement.id);
-  if (!latestElement) {
-    return;
-  }
   const [cx, cy] = [
     originalElement.x + originalElement.width / 2,
     originalElement.y + originalElement.height / 2,
@@ -244,7 +218,6 @@ export const moveElement = (
     },
     shouldInformMutation,
   );
-  updateBindings(latestElement, elementsMap);
 
   const boundTextElement = getBoundTextElement(
     originalElement,
@@ -263,39 +236,3 @@ export const moveElement = (
       );
   }
 };
-
-export const getAtomicUnits = (
-  targetElements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  const selectedGroupIds = getSelectedGroupIds(appState);
-  const _atomicUnits = selectedGroupIds.map((gid) => {
-    return getElementsInGroup(targetElements, gid).reduce((acc, el) => {
-      acc[el.id] = true;
-      return acc;
-    }, {} as AtomicUnit);
-  });
-  targetElements
-    .filter((el) => !isInGroup(el))
-    .forEach((el) => {
-      _atomicUnits.push({
-        [el.id]: true,
-      });
-    });
-  return _atomicUnits;
-};
-
-export const updateBindings = (
-  latestElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
-  options?: {
-    simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: { width: number; height: number };
-  },
-) => {
-  if (isLinearElement(latestElement)) {
-    bindOrUnbindLinearElements([latestElement], elementsMap, true, []);
-  } else {
-    updateBoundElements(latestElement, elementsMap, options);
-  }
-};

packages/excalidraw/components/TTDDialog/common.ts

@@ -1,6 +1,10 @@
-import type { MermaidConfig } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
 import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
+import {
+  DEFAULT_EXPORT_PADDING,
+  DEFAULT_FONT_SIZE,
+  EDITOR_LS_KEYS,
+} from "../../constants";
 import { convertToExcalidrawElements, exportToCanvas } from "../../index";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import type { AppClassProperties, BinaryFiles } from "../../types";
@@ -34,7 +38,7 @@ export interface MermaidToExcalidrawLibProps {
   api: Promise<{
     parseMermaidToExcalidraw: (
       definition: string,
-      config?: MermaidConfig,
+      options: MermaidOptions,
     ) => Promise<MermaidToExcalidrawResult>;
   }>;
 }
@@ -74,10 +78,15 @@ export const convertMermaidToExcalidraw = async ({
 
     let ret;
     try {
-      ret = await api.parseMermaidToExcalidraw(mermaidDefinition);
+      ret = await api.parseMermaidToExcalidraw(mermaidDefinition, {
+        fontSize: DEFAULT_FONT_SIZE,
+      });
     } catch (err: any) {
       ret = await api.parseMermaidToExcalidraw(
         mermaidDefinition.replace(/"/g, "'"),
+        {
+          fontSize: DEFAULT_FONT_SIZE,
+        },
       );
     }
     const { elements, files } = ret;

packages/excalidraw/constants.ts

@@ -274,7 +274,7 @@ export const DEFAULT_EXPORT_PADDING = 10; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
-export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
 

packages/excalidraw/data/blob.ts

@@ -123,26 +123,10 @@ export const loadSceneOrLibraryFromBlob = async (
   fileHandle?: FileSystemHandle | null,
 ) => {
   const contents = await parseFileContents(blob);
-
   let data;
-
-  // assume Obsidian excalidraw plugin file
-  if (blob.name?.endsWith(".excalidraw.md")) {
-    if (contents.indexOf("```compressed-json") > -1) {
-      let str = contents.slice(
-        contents.indexOf("```compressed-json") + '"```compressed-json'.length,
-      );
-      str = str.slice(0, str.indexOf("```"));
-      str = str.replace(/\n/g, "").replace(/\r/g, "");
-      const LZString = await import("lz-string");
-
-      data = JSON.parse(LZString.decompressFromBase64(str));
-    }
-  }
-
   try {
     try {
-      data = data || JSON.parse(contents);
+      data = JSON.parse(contents);
     } catch (error: any) {
       if (isSupportedImageFile(blob)) {
         throw new ImageSceneDataError(

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,
@@ -466,23 +460,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

@@ -25,7 +25,7 @@ import type {
 } from "./types";
 
 import { getElementAbsoluteCoords } from "./bounds";
-import type { AppState, Point } from "../types";
+import type { AppClassProperties, AppState, Point } from "../types";
 import { isPointOnShape } from "../../utils/collision";
 import { getElementAtPosition } from "../scene";
 import {
@@ -43,7 +43,6 @@ import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { getElementShape } from "../shapes";
 
 export type SuggestedBinding =
   | NonDeleted<ExcalidrawBindableElement>
@@ -180,19 +179,19 @@ const bindOrUnbindLinearElementEdge = (
 const getOriginalBindingIfStillCloseOfLinearElementEdge = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   edge: "start" | "end",
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): NonDeleted<ExcalidrawElement> | null => {
+  const elementsMap = app.scene.getNonDeletedElementsMap();
   const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
   const elementId =
     edge === "start"
       ? linearElement.startBinding?.elementId
       : linearElement.endBinding?.elementId;
   if (elementId) {
-    const element = elementsMap.get(elementId);
-    if (
-      isBindableElement(element) &&
-      bindingBorderTest(element, coors, elementsMap)
-    ) {
+    const element = elementsMap.get(
+      elementId,
+    ) as NonDeleted<ExcalidrawBindableElement>;
+    if (bindingBorderTest(element, coors, app)) {
       return element;
     }
   }
@@ -202,13 +201,13 @@ const getOriginalBindingIfStillCloseOfLinearElementEdge = (
 
 const getOriginalBindingsIfStillCloseToArrowEnds = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): (NonDeleted<ExcalidrawElement> | null)[] =>
   ["start", "end"].map((edge) =>
     getOriginalBindingIfStillCloseOfLinearElementEdge(
       linearElement,
       edge as "start" | "end",
-      elementsMap,
+      app,
     ),
   );
 
@@ -216,7 +215,7 @@ const getBindingStrategyForDraggingArrowEndpoints = (
   selectedElement: NonDeleted<ExcalidrawLinearElement>,
   isBindingEnabled: boolean,
   draggingPoints: readonly number[],
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): (NonDeleted<ExcalidrawBindableElement> | null | "keep")[] => {
   const startIdx = 0;
   const endIdx = selectedElement.points.length - 1;
@@ -224,57 +223,37 @@ const getBindingStrategyForDraggingArrowEndpoints = (
   const endDragged = draggingPoints.findIndex((i) => i === endIdx) > -1;
   const start = startDragged
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
-          selectedElement,
-          "start",
-          elementsMap,
-        )
+      ? getElligibleElementForBindingElement(selectedElement, "start", app)
       : null // If binding is disabled and start is dragged, break all binds
     : // We have to update the focus and gap of the binding, so let's rebind
-      getElligibleElementForBindingElement(
-        selectedElement,
-        "start",
-        elementsMap,
-      );
+      getElligibleElementForBindingElement(selectedElement, "start", app);
   const end = endDragged
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
-          selectedElement,
-          "end",
-          elementsMap,
-        )
+      ? getElligibleElementForBindingElement(selectedElement, "end", app)
       : null // If binding is disabled and end is dragged, break all binds
     : // We have to update the focus and gap of the binding, so let's rebind
-      getElligibleElementForBindingElement(selectedElement, "end", elementsMap);
+      getElligibleElementForBindingElement(selectedElement, "end", app);
 
   return [start, end];
 };
 
 const getBindingStrategyForDraggingArrowOrJoints = (
   selectedElement: NonDeleted<ExcalidrawLinearElement>,
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
   isBindingEnabled: boolean,
 ): (NonDeleted<ExcalidrawBindableElement> | null | "keep")[] => {
   const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(
     selectedElement,
-    elementsMap,
+    app,
   );
   const start = startIsClose
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
-          selectedElement,
-          "start",
-          elementsMap,
-        )
+      ? getElligibleElementForBindingElement(selectedElement, "start", app)
       : null
     : null;
   const end = endIsClose
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
-          selectedElement,
-          "end",
-          elementsMap,
-        )
+      ? getElligibleElementForBindingElement(selectedElement, "end", app)
       : null
     : null;
 
@@ -283,7 +262,7 @@ const getBindingStrategyForDraggingArrowOrJoints = (
 
 export const bindOrUnbindLinearElements = (
   selectedElements: NonDeleted<ExcalidrawLinearElement>[],
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
   isBindingEnabled: boolean,
   draggingPoints: readonly number[] | null,
 ): void => {
@@ -294,22 +273,27 @@ export const bindOrUnbindLinearElements = (
           selectedElement,
           isBindingEnabled,
           draggingPoints ?? [],
-          elementsMap,
+          app,
         )
       : // The arrow itself (the shaft) or the inner joins are dragged
         getBindingStrategyForDraggingArrowOrJoints(
           selectedElement,
-          elementsMap,
+          app,
           isBindingEnabled,
         );
 
-    bindOrUnbindLinearElement(selectedElement, start, end, elementsMap);
+    bindOrUnbindLinearElement(
+      selectedElement,
+      start,
+      end,
+      app.scene.getNonDeletedElementsMap(),
+    );
   });
 };
 
 export const getSuggestedBindingsForArrows = (
   selectedElements: NonDeleted<ExcalidrawElement>[],
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): SuggestedBinding[] => {
   // HOT PATH: Bail out if selected elements list is too large
   if (selectedElements.length > 50) {
@@ -320,7 +304,7 @@ export const getSuggestedBindingsForArrows = (
     selectedElements
       .filter(isLinearElement)
       .flatMap((element) =>
-        getOriginalBindingsIfStillCloseToArrowEnds(element, elementsMap),
+        getOriginalBindingsIfStillCloseToArrowEnds(element, app),
       )
       .filter(
         (element): element is NonDeleted<ExcalidrawBindableElement> =>
@@ -342,20 +326,17 @@ export const maybeBindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   appState: AppState,
   pointerCoords: { x: number; y: number },
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): void => {
   if (appState.startBoundElement != null) {
     bindLinearElement(
       linearElement,
       appState.startBoundElement,
       "start",
-      elementsMap,
+      app.scene.getNonDeletedElementsMap(),
     );
   }
-  const hoveredElement = getHoveredElementForBinding(
-    pointerCoords,
-    elementsMap,
-  );
+  const hoveredElement = getHoveredElementForBinding(pointerCoords, app);
   if (
     hoveredElement != null &&
     !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
@@ -364,7 +345,12 @@ export const maybeBindLinearElement = (
       "end",
     )
   ) {
-    bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
+    bindLinearElement(
+      linearElement,
+      hoveredElement,
+      "end",
+      app.scene.getNonDeletedElementsMap(),
+    );
   }
 };
 
@@ -374,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,
@@ -448,13 +431,13 @@ export const getHoveredElementForBinding = (
     x: number;
     y: number;
   },
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
   const hoveredElement = getElementAtPosition(
-    [...elementsMap].map(([_, value]) => value),
+    app.scene.getNonDeletedElements(),
     (element) =>
       isBindableElement(element, false) &&
-      bindingBorderTest(element, pointerCoords, elementsMap),
+      bindingBorderTest(element, pointerCoords, app),
   );
   return hoveredElement as NonDeleted<ExcalidrawBindableElement> | null;
 };
@@ -678,11 +661,15 @@ const maybeCalculateNewGapWhenScaling = (
 const getElligibleElementForBindingElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   startOrEnd: "start" | "end",
-  elementsMap: NonDeletedSceneElementsMap,
+  app: AppClassProperties,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
   return getHoveredElementForBinding(
-    getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
-    elementsMap,
+    getLinearElementEdgeCoors(
+      linearElement,
+      startOrEnd,
+      app.scene.getNonDeletedElementsMap(),
+    ),
+    app,
   );
 };
 
@@ -719,9 +706,6 @@ export const fixBindingsAfterDuplication = (
   const allBoundElementIds: Set<ExcalidrawElement["id"]> = new Set();
   const allBindableElementIds: Set<ExcalidrawElement["id"]> = new Set();
   const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
-  const duplicateIdToOldId = new Map(
-    [...oldIdToDuplicatedId].map(([key, value]) => [value, key]),
-  );
   oldElements.forEach((oldElement) => {
     const { boundElements } = oldElement;
     if (boundElements != null && boundElements.length > 0) {
@@ -771,11 +755,7 @@ export const fixBindingsAfterDuplication = (
   sceneElements
     .filter(({ id }) => allBindableElementIds.has(id))
     .forEach((bindableElement) => {
-      const oldElementId = duplicateIdToOldId.get(bindableElement.id);
-      const { boundElements } = sceneElements.find(
-        ({ id }) => id === oldElementId,
-      )!;
-
+      const { boundElements } = bindableElement;
       if (boundElements != null && boundElements.length > 0) {
         mutateElement(bindableElement, {
           boundElements: boundElements.map((boundElement) =>
@@ -846,10 +826,13 @@ const newBoundElements = (
 const bindingBorderTest = (
   element: NonDeleted<ExcalidrawBindableElement>,
   { x, y }: { x: number; y: number },
-  elementsMap: ElementsMap,
+  app: AppClassProperties,
 ): boolean => {
+  if (!element || !element.width || !element.height) {
+    return false;
+  }
   const threshold = maxBindingGap(element, element.width, element.height);
-  const shape = getElementShape(element, elementsMap);
+  const shape = app.getElementShape(element);
   return isPointOnShape([x, y], shape, threshold);
 };
 

packages/excalidraw/element/linearElementEditor.ts

@@ -381,7 +381,7 @@ export class LinearElementEditor {
                     elementsMap,
                   ),
                 ),
-                elementsMap,
+                app,
               )
             : null;
 
@@ -715,10 +715,7 @@ export class LinearElementEditor {
         },
         selectedPointsIndices: [element.points.length - 1],
         lastUncommittedPoint: null,
-        endBindingElement: getHoveredElementForBinding(
-          scenePointer,
-          elementsMap,
-        ),
+        endBindingElement: getHoveredElementForBinding(scenePointer, app),
       };
 
       ret.didAddPoint = true;
@@ -1168,7 +1165,7 @@ export class LinearElementEditor {
     const nextPoints = points.map((point, idx) => {
       const selectedPointData = targetPoints.find((p) => p.index === idx);
       if (selectedPointData) {
-        if (selectedPointData.index === 0) {
+        if (selectedOriginPoint) {
           return point;
         }
 
@@ -1177,10 +1174,7 @@ export class LinearElementEditor {
         const deltaY =
           selectedPointData.point[1] - points[selectedPointData.index][1];
 
-        return [
-          point[0] + deltaX - offsetX,
-          point[1] + deltaY - offsetY,
-        ] as const;
+        return [point[0] + deltaX, point[1] + deltaY] as const;
       }
       return offsetX || offsetY
         ? ([point[0] - offsetX, point[1] - offsetY] as const)

packages/excalidraw/element/mutateElement.ts

@@ -107,6 +107,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 export const newElementWith = <TElement extends ExcalidrawElement>(
   element: TElement,
   updates: ElementUpdate<TElement>,
+  /** pass `true` to always regenerate */
+  force = false,
 ): TElement => {
   let didChange = false;
   for (const key in updates) {
@@ -123,7 +125,7 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     }
   }
 
-  if (!didChange) {
+  if (!didChange && !force) {
     return element;
   }
 

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/package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "1.1.0",
+    "@excalidraw/mermaid-to-excalidraw": "1.0.0",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
@@ -72,7 +72,6 @@
     "image-blob-reduce": "3.0.1",
     "jotai": "1.13.1",
     "lodash.throttle": "4.1.1",
-    "lz-string": "1.5.0",
     "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "1.0.11",

packages/excalidraw/renderer/renderElement.ts

@@ -90,7 +90,7 @@ const shouldResetImageFilter = (
 };
 
 const getCanvasPadding = (element: ExcalidrawElement) =>
-  element.type === "freedraw" ? element.strokeWidth * 12 : 200;
+  element.type === "freedraw" ? element.strokeWidth * 12 : 20;
 
 export const getRenderOpacity = (
   element: ExcalidrawElement,
@@ -471,7 +471,16 @@ const drawElementFromCanvas = (
   const element = elementWithCanvas.element;
   const padding = getCanvasPadding(element);
   const zoom = elementWithCanvas.scale;
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
+  let [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
+
+  // Free draw elements will otherwise "shuffle" as the min x and y change
+  if (isFreeDrawElement(element)) {
+    x1 = Math.floor(x1);
+    x2 = Math.ceil(x2);
+    y1 = Math.floor(y1);
+    y2 = Math.ceil(y2);
+  }
+
   const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
   const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
 

packages/excalidraw/scene/Fonts.ts

@@ -1,5 +1,5 @@
 import { isTextElement } from "../element";
-import { getContainerElement } from "../element/textElement";
+import { newElementWith } from "../element/mutateElement";
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
@@ -46,18 +46,14 @@ export class Fonts {
 
     let didUpdate = false;
 
-    const elementsMap = this.scene.getNonDeletedElementsMap();
-
-    for (const element of this.scene.getNonDeletedElements()) {
+    this.scene.mapElements((element) => {
       if (isTextElement(element)) {
         didUpdate = true;
         ShapeCache.delete(element);
-        const container = getContainerElement(element, elementsMap);
-        if (container) {
-          ShapeCache.delete(container);
-        }
+        return newElementWith(element, {}, true);
       }
-    }
+      return element;
+    });
 
     if (didUpdate) {
       this.scene.triggerUpdate();

packages/excalidraw/scene/types.ts

@@ -2,6 +2,7 @@ import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { Drawable } from "roughjs/bin/core";
 import type {
   ExcalidrawElement,
+  ExcalidrawTextElement,
   NonDeletedElementsMap,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
@@ -95,6 +96,10 @@ export type SceneScroll = {
   scrollY: number;
 };
 
+export interface Scene {
+  elements: ExcalidrawTextElement[];
+}
+
 export type ExportType =
   | "png"
   | "clipboard"

packages/excalidraw/shapes.tsx

@@ -1,11 +1,3 @@
-import {
-  getClosedCurveShape,
-  getCurveShape,
-  getEllipseShape,
-  getFreedrawShape,
-  getPolygonShape,
-  type GeometricShape,
-} from "../utils/geometry/shape";
 import {
   ArrowIcon,
   DiamondIcon,
@@ -18,11 +10,7 @@ import {
   SelectionIcon,
   TextIcon,
 } from "./components/icons";
-import { getElementAbsoluteCoords } from "./element";
-import { shouldTestInside } from "./element/collision";
-import type { ElementsMap, ExcalidrawElement } from "./element/types";
 import { KEYS } from "./keys";
-import { ShapeCache } from "./scene/ShapeCache";
 
 export const SHAPES = [
   {
@@ -109,53 +97,3 @@ export const findShapeByKey = (key: string) => {
   });
   return shape?.value || null;
 };
-
-/**
- * get the pure geometric shape of an excalidraw element
- * which is then used for hit detection
- */
-export const getElementShape = (
-  element: ExcalidrawElement,
-  elementsMap: ElementsMap,
-): GeometricShape => {
-  switch (element.type) {
-    case "rectangle":
-    case "diamond":
-    case "frame":
-    case "magicframe":
-    case "embeddable":
-    case "image":
-    case "iframe":
-    case "text":
-    case "selection":
-      return getPolygonShape(element);
-    case "arrow":
-    case "line": {
-      const roughShape =
-        ShapeCache.get(element)?.[0] ??
-        ShapeCache.generateElementShape(element, null)[0];
-      const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
-
-      return shouldTestInside(element)
-        ? getClosedCurveShape(
-            element,
-            roughShape,
-            [element.x, element.y],
-            element.angle,
-            [cx, cy],
-          )
-        : getCurveShape(roughShape, [element.x, element.y], element.angle, [
-            cx,
-            cy,
-          ]);
-    }
-
-    case "ellipse":
-      return getEllipseShape(element);
-
-    case "freedraw": {
-      const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
-      return getFreedrawShape(element, [cx, cy], shouldTestInside(element));
-    }
-  }
-};

packages/excalidraw/tests/binding.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from "./test-utils";
-import { Excalidraw, isLinearElement } from "../index";
+import { Excalidraw } from "../index";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
@@ -433,49 +433,4 @@ describe("element binding", () => {
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).toBe(null);
   });
-
-  it("should not unbind when duplicating via selection group", () => {
-    const rectLeft = UI.createElement("rectangle", {
-      x: 0,
-      width: 200,
-      height: 500,
-    });
-    const rectRight = UI.createElement("rectangle", {
-      x: 400,
-      y: 200,
-      width: 200,
-      height: 500,
-    });
-    const arrow = UI.createElement("arrow", {
-      x: 210,
-      y: 250,
-      width: 177,
-      height: 1,
-    });
-    expect(arrow.startBinding?.elementId).toBe(rectLeft.id);
-    expect(arrow.endBinding?.elementId).toBe(rectRight.id);
-
-    mouse.downAt(-100, -100);
-    mouse.moveTo(650, 750);
-    mouse.up(0, 0);
-
-    expect(API.getSelectedElements().length).toBe(3);
-
-    mouse.moveTo(5, 5);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.downAt(5, 5);
-      mouse.moveTo(1000, 1000);
-      mouse.up(0, 0);
-
-      expect(window.h.elements.length).toBe(6);
-      window.h.elements.forEach((element) => {
-        if (isLinearElement(element)) {
-          expect(element.startBinding).not.toBe(null);
-          expect(element.endBinding).not.toBe(null);
-        } else {
-          expect(element.boundElements).not.toBe(null);
-        }
-      });
-    });
-  });
 });

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -27,7 +27,6 @@ import * as textElementUtils from "../element/textElement";
 import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
 import { vi } from "vitest";
 import { arrayToMap } from "../utils";
-import React from "react";
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,
@@ -973,10 +972,10 @@ describe("Test Linear Elements", () => {
       ]);
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
         .toMatchInlineSnapshot(`
-          "Online whiteboard 
-          collaboration made 
-          easy"
-        `);
+        "Online whiteboard 
+        collaboration made 
+        easy"
+      `);
     });
 
     it("should bind text to arrow when clicked on arrow and enter pressed", async () => {
@@ -1007,10 +1006,10 @@ describe("Test Linear Elements", () => {
       ]);
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
         .toMatchInlineSnapshot(`
-          "Online whiteboard 
-          collaboration made 
-          easy"
-        `);
+        "Online whiteboard 
+        collaboration made 
+        easy"
+      `);
     });
 
     it("should not bind text to line when double clicked", async () => {
@@ -1350,27 +1349,4 @@ describe("Test Linear Elements", () => {
       expect(label.y).toBe(0);
     });
   });
-
-  describe("Test moving linear element points", () => {
-    it("should move the endpoint in the negative direction correctly when the start point is also moved in the positive direction", async () => {
-      const line = createThreePointerLinearElement("arrow");
-      const [origStartX, origStartY] = [line.x, line.y];
-
-      LinearElementEditor.movePoints(line, [
-        { index: 0, point: [line.points[0][0] + 10, line.points[0][1] + 10] },
-        {
-          index: line.points.length - 1,
-          point: [
-            line.points[line.points.length - 1][0] - 10,
-            line.points[line.points.length - 1][1] - 10,
-          ],
-        },
-      ]);
-      expect(line.x).toBe(origStartX + 10);
-      expect(line.y).toBe(origStartY + 10);
-
-      expect(line.points[line.points.length - 1][0]).toBe(20);
-      expect(line.points[line.points.length - 1][1]).toBe(-20);
-    });
-  });
 });

packages/excalidraw/types.ts

@@ -444,9 +444,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: {
@@ -614,6 +612,7 @@ export type AppClassProperties = {
   setOpenDialog: App["setOpenDialog"];
   insertEmbeddableElement: App["insertEmbeddableElement"];
   onMagicframeToolSelect: App["onMagicframeToolSelect"];
+  getElementShape: App["getElementShape"];
   getName: App["getName"];
 };
 

packages/excalidraw/vite-env.d.ts

@@ -43,7 +43,6 @@ interface ImportMetaEnv {
   VITE_APP_COLLAPSE_OVERLAY: string;
   // Enable eslint in dev server
   VITE_APP_ENABLE_ESLINT: string;
-  VITE_APP_ENABLE_TRACKING: string;
 
   VITE_PKG_NAME: string;
   VITE_PKG_VERSION: string;

yarn.lock

@@ -1930,10 +1930,10 @@
   resolved "https://registry.npmjs.org/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
   integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
 
-"@excalidraw/mermaid-to-excalidraw@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.0.tgz#a24a7aa3ad2e4f671054fdb670a8508bab463814"
-  integrity sha512-YP2roqrImzek1SpUAeToSTNhH5Gfw9ogdI5KHp7c+I/mX7SEW8oNqqX7CP+oHcUgNF6RrYIkqSrnMRN9/3EGLg==
+"@excalidraw/mermaid-to-excalidraw@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.0.0.tgz#8c058d2a43230425cba96d01e4a669a2d7c586a2"
+  integrity sha512-RGSoJBY2gFag6mQOIwa3OakTrvAZYx0bwvnr5ojuCZInih8Fxhje4X1WZfsaQx+GATEH8Ioq3O3b1FPDg4nKjQ==
   dependencies:
     "@excalidraw/markdown-to-text" "0.1.2"
     mermaid "10.9.0"
@@ -7753,9 +7753,9 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lz-string@1.5.0, lz-string@^1.5.0:
+lz-string@^1.5.0:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
 magic-string@^0.25.0, magic-string@^0.25.7: