feat: remove ai token settings

Manual stats changes now respect previous element bindings.

excalidraw-app/App.tsx

@@ -1,5 +1,4 @@
 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";
@@ -22,9 +21,7 @@ import { useCallbackRefState } from "../packages/excalidraw/hooks/useCallbackRef
 import { t } from "../packages/excalidraw/i18n";
 import {
   Excalidraw,
-  defaultLang,
   LiveCollaborationTrigger,
-  TTDDialog,
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
@@ -93,7 +90,7 @@ import {
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
-import { atom, Provider, useAtom, useAtomValue } from "jotai";
+import { Provider, useAtom, useAtomValue } from "jotai";
 import { useAtomWithInitialValue } from "../packages/excalidraw/jotai";
 import { appJotaiStore } from "./app-jotai";
 
@@ -121,6 +118,9 @@ 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";
+import { AIComponents } from "./components/AI";
 
 polyfill();
 
@@ -172,11 +172,6 @@ if (window.self !== window.top) {
   }
 }
 
-const languageDetector = new LanguageDetector();
-languageDetector.init({
-  languageUtils: {},
-});
-
 const shareableLinkConfirmDialog = {
   title: t("overwriteConfirm.modal.shareableLink.title"),
   description: (
@@ -322,19 +317,15 @@ 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
   // ---------------------------------------------------------------------------
 
@@ -490,11 +481,7 @@ const ExcalidrawWrapper = () => {
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
           const username = importUsernameFromLocalStorage();
-          let langCode = languageDetector.detect() || defaultLang.code;
-          if (Array.isArray(langCode)) {
-            langCode = langCode[0];
-          }
-          setLangCode(langCode);
+          setLangCode(getPreferredLanguage());
           excalidrawAPI.updateScene({
             ...localDataState,
             storeAction: StoreAction.UPDATE,
@@ -595,10 +582,6 @@ const ExcalidrawWrapper = () => {
     };
   }, [excalidrawAPI]);
 
-  useEffect(() => {
-    languageDetector.cacheUserLanguage(langCode);
-  }, [langCode]);
-
   const onChange = (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,
@@ -863,63 +846,8 @@ const ExcalidrawWrapper = () => {
           )}
         </OverwriteConfirmDialog>
         <AppFooter />
-        <TTDDialog
-          onTextSubmit={async (input) => {
-            try {
-              const response = await fetch(
-                `${
-                  import.meta.env.VITE_APP_AI_BACKEND
-                }/v1/ai/text-to-diagram/generate`,
-                {
-                  method: "POST",
-                  headers: {
-                    Accept: "application/json",
-                    "Content-Type": "application/json",
-                  },
-                  body: JSON.stringify({ prompt: input }),
-                },
-              );
+        {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
 
-              const rateLimit = response.headers.has("X-Ratelimit-Limit")
-                ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
-                : undefined;
-
-              const rateLimitRemaining = response.headers.has(
-                "X-Ratelimit-Remaining",
-              )
-                ? parseInt(
-                    response.headers.get("X-Ratelimit-Remaining") || "0",
-                    10,
-                  )
-                : undefined;
-
-              const json = await response.json();
-
-              if (!response.ok) {
-                if (response.status === 429) {
-                  return {
-                    rateLimit,
-                    rateLimitRemaining,
-                    error: new Error(
-                      "Too many requests today, please try again tomorrow!",
-                    ),
-                  };
-                }
-
-                throw new Error(json.message || "Generation failed...");
-              }
-
-              const generatedResponse = json.generatedResponse;
-              if (!generatedResponse) {
-                throw new Error("Generation failed...");
-              }
-
-              return { generatedResponse, rateLimit, rateLimitRemaining };
-            } catch (err: any) {
-              throw new Error("Request failed");
-            }
-          }}
-        />
         <TTDDialogTrigger />
         {isCollaborating && isOffline && (
           <div className="collab-offline-warning">

excalidraw-app/app-language/LanguageList.tsx

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,15 @@
+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/AI.tsx

@@ -0,0 +1,152 @@
+import type { ExcalidrawImperativeAPI } from "../../packages/excalidraw/types";
+import {
+  DiagramToCodePlugin,
+  exportToBlob,
+  getTextFromElements,
+  MIME_TYPES,
+  TTDDialog,
+} from "../../packages/excalidraw";
+import { getDataURL } from "../../packages/excalidraw/data/blob";
+import { safelyParseJSON } from "../../packages/excalidraw/utils";
+
+export const AIComponents = ({
+  excalidrawAPI,
+}: {
+  excalidrawAPI: ExcalidrawImperativeAPI;
+}) => {
+  return (
+    <>
+      <DiagramToCodePlugin
+        generate={async ({ frame, children }) => {
+          const appState = excalidrawAPI.getAppState();
+
+          const blob = await exportToBlob({
+            elements: children,
+            appState: {
+              ...appState,
+              exportBackground: true,
+              viewBackgroundColor: appState.viewBackgroundColor,
+            },
+            exportingFrame: frame,
+            files: excalidrawAPI.getFiles(),
+            mimeType: MIME_TYPES.jpg,
+          });
+
+          const dataURL = await getDataURL(blob);
+
+          const textFromFrameChildren = getTextFromElements(children);
+
+          const response = await fetch(
+            `${
+              import.meta.env.VITE_APP_AI_BACKEND
+            }/v1/ai/diagram-to-code/generate`,
+            {
+              method: "POST",
+              headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                texts: textFromFrameChildren,
+                image: dataURL,
+                theme: appState.theme,
+              }),
+            },
+          );
+
+          if (!response.ok) {
+            const text = await response.text();
+            const error = safelyParseJSON(text);
+
+            if (!error) {
+              throw new Error(text);
+            }
+
+            if (error.statusCode === 429) {
+              return {
+                html: `<html>
+                <body style="margin: 0; text-align: center">
+                <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; padding: 0 60px">
+                  <div style="color:red">Too many requests today,</br>please try again tomorrow!</div>
+                  </br>
+                  </br>
+                  <div>You can also try <a href="${
+                    import.meta.env.VITE_APP_PLUS_LP
+                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">Excalidraw+</a> to get more requests.</div>
+                </div>
+                </body>
+                </html>`,
+              };
+            }
+
+            throw new Error(error.message || text);
+          }
+
+          const html = await response.text();
+
+          return {
+            html,
+          };
+        }}
+      />
+
+      <TTDDialog
+        onTextSubmit={async (input) => {
+          try {
+            const response = await fetch(
+              `${
+                import.meta.env.VITE_APP_AI_BACKEND
+              }/v1/ai/text-to-diagram/generate`,
+              {
+                method: "POST",
+                headers: {
+                  Accept: "application/json",
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ prompt: input }),
+              },
+            );
+
+            const rateLimit = response.headers.has("X-Ratelimit-Limit")
+              ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
+              : undefined;
+
+            const rateLimitRemaining = response.headers.has(
+              "X-Ratelimit-Remaining",
+            )
+              ? parseInt(
+                  response.headers.get("X-Ratelimit-Remaining") || "0",
+                  10,
+                )
+              : undefined;
+
+            const json = await response.json();
+
+            if (!response.ok) {
+              if (response.status === 429) {
+                return {
+                  rateLimit,
+                  rateLimitRemaining,
+                  error: new Error(
+                    "Too many requests today, please try again tomorrow!",
+                  ),
+                };
+              }
+
+              throw new Error(json.message || "Generation failed...");
+            }
+
+            const generatedResponse = json.generatedResponse;
+            if (!generatedResponse) {
+              throw new Error("Generation failed...");
+            }
+
+            return { generatedResponse, rateLimit, rateLimitRemaining };
+          } catch (err: any) {
+            throw new Error("Request failed");
+          }
+        }}
+      />
+    </>
+  );
+};

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 "./LanguageList";
+import { LanguageList } from "../app-language/LanguageList";
 
 export const AppMainMenu: React.FC<{
   onCollabDialogOpen: () => any;

packages/excalidraw/actions/actionClipboard.tsx

@@ -10,7 +10,7 @@ import {
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { isTextElement } from "../element";
+import { getTextFromElements, isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -239,16 +239,8 @@ export const copyText = register({
       includeBoundTextElement: true,
     });
 
-    const text = selectedElements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
     try {
-      copyTextToSystemClipboard(text);
+      copyTextToSystemClipboard(getTextFromElements(selectedElements));
     } catch (e) {
       throw new Error(t("errors.copyToSystemClipboardFailed"));
     }

packages/excalidraw/actions/actionFinalize.tsx

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

packages/excalidraw/actions/actionFlip.ts

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

packages/excalidraw/components/Actions.tsx

@@ -44,7 +44,6 @@ import {
   frameToolIcon,
   mermaidLogoIcon,
   laserPointerToolIcon,
-  OpenAIIcon,
   MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
@@ -395,7 +394,7 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.mermaidToExcalidraw")}
           </DropdownMenu.Item>
-          {app.props.aiEnabled !== false && (
+          {app.props.aiEnabled !== false && app.plugins.diagramToCode && (
             <>
               <DropdownMenu.Item
                 onSelect={() => app.onMagicframeToolSelect()}
@@ -405,20 +404,6 @@ export const ShapesSwitcher = ({
                 {t("toolBar.magicframe")}
                 <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
               </DropdownMenu.Item>
-              <DropdownMenu.Item
-                onSelect={() => {
-                  trackEvent("ai", "open-settings", "d2c");
-                  app.setOpenDialog({
-                    name: "settings",
-                    source: "settings",
-                    tab: "diagram-to-code",
-                  });
-                }}
-                icon={OpenAIIcon}
-                data-testid="toolbar-magicSettings"
-              >
-                {t("toolBar.magicSettings")}
-              </DropdownMenu.Item>
             </>
           )}
         </DropdownMenu.Content>

packages/excalidraw/components/App.tsx

@@ -85,7 +85,6 @@ import {
   ZOOM_STEP,
   POINTER_EVENTS,
   TOOL_TYPE,
-  EDITOR_LS_KEYS,
   isIOS,
   supportsResizeObserver,
   DEFAULT_COLLISION_THRESHOLD,
@@ -183,6 +182,7 @@ import type {
   ExcalidrawIframeElement,
   ExcalidrawEmbeddableElement,
   Ordered,
+  MagicGenerationData,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -225,16 +225,9 @@ import type {
   ScrollBars,
 } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey } from "../shapes";
+import { findShapeByKey, getElementShape } from "../shapes";
 import type { GeometricShape } from "../../utils/geometry/shape";
-import {
-  getClosedCurveShape,
-  getCurveShape,
-  getEllipseShape,
-  getFreedrawShape,
-  getPolygonShape,
-  getSelectionBoxShape,
-} from "../../utils/geometry/shape";
+import { getSelectionBoxShape } from "../../utils/geometry/shape";
 import { isPointInShape } from "../../utils/collision";
 import type {
   AppClassProperties,
@@ -260,6 +253,7 @@ import type {
   UnsubscribeCallback,
   EmbedsValidationStatus,
   ElementsPendingErasure,
+  GenerateDiagramToCode,
 } from "../types";
 import {
   debounce,
@@ -406,13 +400,9 @@ import {
 } from "../cursor";
 import { Emitter } from "../emitter";
 import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
-import type { MagicCacheData } from "../data/magic";
-import { diagramToHTML } from "../data/magic";
-import { exportToBlob } from "../../utils/export";
 import { COLOR_PALETTE } from "../colors";
 import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
-import { EditorLocalStorage } from "../data/EditorLocalStorage";
 import FollowMode from "./FollowMode/FollowMode";
 import { Store, StoreAction } from "../store";
 import { AnimationFrameHandler } from "../animation-frame-handler";
@@ -424,7 +414,6 @@ import {
   hitElementBoundText,
   hitElementBoundingBoxOnly,
   hitElementItself,
-  shouldTestInside,
 } from "../element/collision";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
@@ -1001,7 +990,7 @@ class App extends React.Component<AppProps, AppState> {
           if (isIframeElement(el)) {
             src = null;
 
-            const data: MagicCacheData = (el.customData?.generationData ??
+            const data: MagicGenerationData = (el.customData?.generationData ??
               this.magicGenerations.get(el.id)) || {
               status: "error",
               message: "No generation data",
@@ -1551,10 +1540,6 @@ class App extends React.Component<AppProps, AppState> {
                           }
                           app={this}
                           isCollaborating={this.props.isCollaborating}
-                          openAIKey={this.OPENAI_KEY}
-                          isOpenAIKeyPersisted={this.OPENAI_KEY_IS_PERSISTED}
-                          onOpenAIAPIKeyChange={this.onOpenAIKeyChange}
-                          onMagicSettingsConfirm={this.onMagicSettingsConfirm}
                         >
                           {this.props.children}
                         </LayerUI>
@@ -1797,7 +1782,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private magicGenerations = new Map<
     ExcalidrawIframeElement["id"],
-    MagicCacheData
+    MagicGenerationData
   >();
 
   private updateMagicGeneration = ({
@@ -1805,7 +1790,7 @@ class App extends React.Component<AppProps, AppState> {
     data,
   }: {
     frameElement: ExcalidrawIframeElement;
-    data: MagicCacheData;
+    data: MagicGenerationData;
   }) => {
     if (data.status === "pending") {
       // We don't wanna persist pending state to storage. It should be in-app
@@ -1828,31 +1813,26 @@ class App extends React.Component<AppProps, AppState> {
     this.triggerRender();
   };
 
-  private getTextFromElements(elements: readonly ExcalidrawElement[]) {
-    const text = elements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
-    return text;
+  public plugins: {
+    diagramToCode?: {
+      generate: GenerateDiagramToCode;
+    };
+  } = {};
+
+  public setPlugins(plugins: Partial<App["plugins"]>) {
+    Object.assign(this.plugins, plugins);
   }
 
   private async onMagicFrameGenerate(
     magicFrame: ExcalidrawMagicFrameElement,
     source: "button" | "upstream",
   ) {
-    if (!this.OPENAI_KEY) {
+    const generateDiagramToCode = this.plugins.diagramToCode?.generate;
+
+    if (!generateDiagramToCode) {
       this.setState({
-        openDialog: {
-          name: "settings",
-          tab: "diagram-to-code",
-          source: "generation",
-        },
+        errorMessage: "No diagram to code plugin found",
       });
-      trackEvent("ai", "generate (missing key)", "d2c");
       return;
     }
 
@@ -1891,68 +1871,50 @@ class App extends React.Component<AppProps, AppState> {
       selectedElementIds: { [frameElement.id]: true },
     });
 
-    const blob = await exportToBlob({
-      elements: this.scene.getNonDeletedElements(),
-      appState: {
-        ...this.state,
-        exportBackground: true,
-        viewBackgroundColor: this.state.viewBackgroundColor,
-      },
-      exportingFrame: magicFrame,
-      files: this.files,
-    });
-
-    const dataURL = await getDataURL(blob);
-
-    const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);
-
     trackEvent("ai", "generate (start)", "d2c");
+    try {
+      const { html } = await generateDiagramToCode({
+        frame: magicFrame,
+        children: magicFrameChildren,
+      });
 
-    const result = await diagramToHTML({
-      image: dataURL,
-      apiKey: this.OPENAI_KEY,
-      text: textFromFrameChildren,
-      theme: this.state.theme,
-    });
+      trackEvent("ai", "generate (success)", "d2c");
 
-    if (!result.ok) {
+      if (!html.trim()) {
+        this.updateMagicGeneration({
+          frameElement,
+          data: {
+            status: "error",
+            code: "ERR_OAI",
+            message: "Nothing genereated :(",
+          },
+        });
+        return;
+      }
+
+      const parsedHtml =
+        html.includes("<!DOCTYPE html>") && html.includes("</html>")
+          ? html.slice(
+              html.indexOf("<!DOCTYPE html>"),
+              html.indexOf("</html>") + "</html>".length,
+            )
+          : html;
+
+      this.updateMagicGeneration({
+        frameElement,
+        data: { status: "done", html: parsedHtml },
+      });
+    } catch (error: any) {
       trackEvent("ai", "generate (failed)", "d2c");
-      console.error(result.error);
       this.updateMagicGeneration({
         frameElement,
         data: {
           status: "error",
           code: "ERR_OAI",
-          message: result.error?.message || "Unknown error during generation",
+          message: error.message || "Unknown error during generation",
         },
       });
-      return;
     }
-    trackEvent("ai", "generate (success)", "d2c");
-
-    if (result.choices[0].message.content == null) {
-      this.updateMagicGeneration({
-        frameElement,
-        data: {
-          status: "error",
-          code: "ERR_OAI",
-          message: "Nothing genereated :(",
-        },
-      });
-      return;
-    }
-
-    const message = result.choices[0].message.content;
-
-    const html = message.slice(
-      message.indexOf("<!DOCTYPE html>"),
-      message.indexOf("</html>") + "</html>".length,
-    );
-
-    this.updateMagicGeneration({
-      frameElement,
-      data: { status: "done", html },
-    });
   }
 
   private onIframeSrcCopy(element: ExcalidrawIframeElement) {
@@ -1966,70 +1928,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
-  private OPENAI_KEY: string | null = EditorLocalStorage.get(
-    EDITOR_LS_KEYS.OAI_API_KEY,
-  );
-  private OPENAI_KEY_IS_PERSISTED: boolean =
-    EditorLocalStorage.has(EDITOR_LS_KEYS.OAI_API_KEY) || false;
-
-  private onOpenAIKeyChange = (
-    openAIKey: string | null,
-    shouldPersist: boolean,
-  ) => {
-    this.OPENAI_KEY = openAIKey || null;
-    if (shouldPersist) {
-      const didPersist = EditorLocalStorage.set(
-        EDITOR_LS_KEYS.OAI_API_KEY,
-        openAIKey,
-      );
-      this.OPENAI_KEY_IS_PERSISTED = didPersist;
-    } else {
-      this.OPENAI_KEY_IS_PERSISTED = false;
-    }
-  };
-
-  private onMagicSettingsConfirm = (
-    apiKey: string,
-    shouldPersist: boolean,
-    source: "tool" | "generation" | "settings",
-  ) => {
-    this.OPENAI_KEY = apiKey || null;
-    this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);
-
-    if (source === "settings") {
-      return;
-    }
-
-    const selectedElements = this.scene.getSelectedElements({
-      selectedElementIds: this.state.selectedElementIds,
-    });
-
-    if (apiKey) {
-      if (selectedElements.length) {
-        this.onMagicframeToolSelect();
-      } else {
-        this.setActiveTool({ type: "magicframe" });
-      }
-    } else if (!isMagicFrameElement(selectedElements[0])) {
-      // even if user didn't end up setting api key, let's pick the tool
-      // so they can draw up a frame and move forward
-      this.setActiveTool({ type: "magicframe" });
-    }
-  };
-
   public onMagicframeToolSelect = () => {
-    if (!this.OPENAI_KEY) {
-      this.setState({
-        openDialog: {
-          name: "settings",
-          tab: "diagram-to-code",
-          source: "tool",
-        },
-      });
-      trackEvent("ai", "tool-select (missing key)", "d2c");
-      return;
-    }
-
     const selectedElements = this.scene.getSelectedElements({
       selectedElementIds: this.state.selectedElementIds,
     });
@@ -2498,7 +2397,9 @@ 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);
@@ -2507,7 +2408,6 @@ 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();
@@ -2819,7 +2719,7 @@ class App extends React.Component<AppProps, AppState> {
             nonDeletedElementsMap,
           ),
         ),
-        this,
+        this.scene.getNonDeletedElementsMap(),
       );
     }
 
@@ -4008,7 +3908,7 @@ class App extends React.Component<AppProps, AppState> {
         this.setState({
           suggestedBindings: getSuggestedBindingsForArrows(
             selectedElements,
-            this,
+            this.scene.getNonDeletedElementsMap(),
           ),
         });
 
@@ -4179,7 +4079,7 @@ class App extends React.Component<AppProps, AppState> {
     if (isArrowKey(event.key)) {
       bindOrUnbindLinearElements(
         this.scene.getSelectedElements(this.state).filter(isLinearElement),
-        this,
+        this.scene.getNonDeletedElementsMap(),
         isBindingEnabled(this.state),
         this.state.selectedLinearElement?.selectedPointsIndices ?? [],
       );
@@ -4491,59 +4391,6 @@ 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,
@@ -4552,18 +4399,24 @@ class App extends React.Component<AppProps, AppState> {
 
     if (boundTextElement) {
       if (element.type === "arrow") {
-        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,
+            // 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);
+      return getElementShape(
+        boundTextElement,
+        this.scene.getNonDeletedElementsMap(),
+      );
     }
 
     return null;
@@ -4602,7 +4455,10 @@ class App extends React.Component<AppProps, AppState> {
         x,
         y,
         element: elementWithHighestZIndex,
-        shape: this.getElementShape(elementWithHighestZIndex),
+        shape: getElementShape(
+          elementWithHighestZIndex,
+          this.scene.getNonDeletedElementsMap(),
+        ),
         // when overlapping, we would like to be more precise
         // this also avoids the need to update past tests
         threshold: this.getElementHitThreshold() / 2,
@@ -4707,7 +4563,7 @@ class App extends React.Component<AppProps, AppState> {
       x,
       y,
       element,
-      shape: this.getElementShape(element),
+      shape: getElementShape(element, this.scene.getNonDeletedElementsMap()),
       threshold: this.getElementHitThreshold(),
       frameNameBound: isFrameLikeElement(element)
         ? this.frameNameBoundsCache.get(element)
@@ -4739,7 +4595,10 @@ class App extends React.Component<AppProps, AppState> {
           x,
           y,
           element: elements[index],
-          shape: this.getElementShape(elements[index]),
+          shape: getElementShape(
+            elements[index],
+            this.scene.getNonDeletedElementsMap(),
+          ),
           threshold: this.getElementHitThreshold(),
         })
       ) {
@@ -4997,7 +4856,10 @@ class App extends React.Component<AppProps, AppState> {
             x: sceneX,
             y: sceneY,
             element: container,
-            shape: this.getElementShape(container),
+            shape: getElementShape(
+              container,
+              this.scene.getNonDeletedElementsMap(),
+            ),
             threshold: this.getElementHitThreshold(),
           })
         ) {
@@ -5689,7 +5551,10 @@ class App extends React.Component<AppProps, AppState> {
           x: scenePointerX,
           y: scenePointerY,
           element,
-          shape: this.getElementShape(element),
+          shape: getElementShape(
+            element,
+            this.scene.getNonDeletedElementsMap(),
+          ),
         })
       ) {
         hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(
@@ -6808,7 +6673,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const boundElement = getHoveredElementForBinding(
       pointerDownState.origin,
-      this,
+      this.scene.getNonDeletedElementsMap(),
     );
     this.scene.insertElement(element);
     this.setState({
@@ -7070,7 +6935,7 @@ class App extends React.Component<AppProps, AppState> {
       });
       const boundElement = getHoveredElementForBinding(
         pointerDownState.origin,
-        this,
+        this.scene.getNonDeletedElementsMap(),
       );
 
       this.scene.insertElement(element);
@@ -7540,7 +7405,7 @@ class App extends React.Component<AppProps, AppState> {
           this.setState({
             suggestedBindings: getSuggestedBindingsForArrows(
               selectedElements,
-              this,
+              this.scene.getNonDeletedElementsMap(),
             ),
           });
 
@@ -8061,7 +7926,7 @@ class App extends React.Component<AppProps, AppState> {
               draggingElement,
               this.state,
               pointerCoords,
-              this,
+              this.scene.getNonDeletedElementsMap(),
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
@@ -8551,7 +8416,10 @@ class App extends React.Component<AppProps, AppState> {
               x: pointerDownState.origin.x,
               y: pointerDownState.origin.y,
               element: hitElement,
-              shape: this.getElementShape(hitElement),
+              shape: getElementShape(
+                hitElement,
+                this.scene.getNonDeletedElementsMap(),
+              ),
               threshold: this.getElementHitThreshold(),
               frameNameBound: isFrameLikeElement(hitElement)
                 ? this.frameNameBoundsCache.get(hitElement)
@@ -8619,7 +8487,7 @@ class App extends React.Component<AppProps, AppState> {
 
         bindOrUnbindLinearElements(
           linearElements,
-          this,
+          this.scene.getNonDeletedElementsMap(),
           isBindingEnabled(this.state),
           this.state.selectedLinearElement?.selectedPointsIndices ?? [],
         );
@@ -9107,7 +8975,7 @@ class App extends React.Component<AppProps, AppState> {
   }): void => {
     const hoveredBindableElement = getHoveredElementForBinding(
       pointerCoords,
-      this,
+      this.scene.getNonDeletedElementsMap(),
     );
     this.setState({
       suggestedBindings:
@@ -9134,7 +9002,7 @@ class App extends React.Component<AppProps, AppState> {
       (acc: NonDeleted<ExcalidrawBindableElement>[], coords) => {
         const hoveredBindableElement = getHoveredElementForBinding(
           coords,
-          this,
+          this.scene.getNonDeletedElementsMap(),
         );
         if (
           hoveredBindableElement != null &&
@@ -9666,7 +9534,7 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       const suggestedBindings = getSuggestedBindingsForArrows(
         selectedElements,
-        this,
+        this.scene.getNonDeletedElementsMap(),
       );
 
       const elementsToHighlight = new Set<ExcalidrawElement>();

packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from "react";
+import { useApp } from "../App";
+import type { GenerateDiagramToCode } from "../../types";
+
+export const DiagramToCodePlugin = (props: {
+  generate: GenerateDiagramToCode;
+}) => {
+  const app = useApp();
+
+  useLayoutEffect(() => {
+    app.setPlugins({
+      diagramToCode: { generate: props.generate },
+    });
+  }, [app, props.generate]);
+
+  return null;
+};

packages/excalidraw/components/LayerUI.tsx

@@ -60,7 +60,6 @@ import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserPointerButton";
-import { MagicSettings } from "./MagicSettings";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
@@ -85,14 +84,6 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
-  openAIKey: string | null;
-  isOpenAIKeyPersisted: boolean;
-  onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
-  onMagicSettingsConfirm: (
-    apiKey: string,
-    shouldPersist: boolean,
-    source: "tool" | "generation" | "settings",
-  ) => void;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -149,10 +140,6 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
-  openAIKey,
-  isOpenAIKeyPersisted,
-  onOpenAIAPIKeyChange,
-  onMagicSettingsConfirm,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -482,25 +469,6 @@ const LayerUI = ({
           }}
         />
       )}
-      {appState.openDialog?.name === "settings" && (
-        <MagicSettings
-          openAIKey={openAIKey}
-          isPersisted={isOpenAIKeyPersisted}
-          onChange={onOpenAIAPIKeyChange}
-          onConfirm={(apiKey, shouldPersist) => {
-            const source =
-              appState.openDialog?.name === "settings"
-                ? appState.openDialog?.source
-                : "settings";
-            setAppState({ openDialog: null }, () => {
-              onMagicSettingsConfirm(apiKey, shouldPersist, source);
-            });
-          }}
-          onClose={() => {
-            setAppState({ openDialog: null });
-          }}
-        />
-      )}
       <ActiveConfirmDialog />
       <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}

packages/excalidraw/components/MagicSettings.scss

@@ -1,18 +0,0 @@
-.excalidraw {
-  .MagicSettings {
-    .Island {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .MagicSettings-confirm {
-    padding: 0.5rem 1rem;
-  }
-
-  .MagicSettings__confirm {
-    margin-top: 2rem;
-    margin-right: auto;
-  }
-}

packages/excalidraw/components/MagicSettings.tsx

@@ -1,160 +0,0 @@
-import { useState } from "react";
-import { Dialog } from "./Dialog";
-import { TextField } from "./TextField";
-import { MagicIcon, OpenAIIcon } from "./icons";
-import { FilledButton } from "./FilledButton";
-import { CheckboxItem } from "./CheckboxItem";
-import { KEYS } from "../keys";
-import { useUIAppState } from "../context/ui-appState";
-import { InlineIcon } from "./InlineIcon";
-import { Paragraph } from "./Paragraph";
-
-import "./MagicSettings.scss";
-import TTDDialogTabs from "./TTDDialog/TTDDialogTabs";
-import { TTDDialogTab } from "./TTDDialog/TTDDialogTab";
-
-export const MagicSettings = (props: {
-  openAIKey: string | null;
-  isPersisted: boolean;
-  onChange: (key: string, shouldPersist: boolean) => void;
-  onConfirm: (key: string, shouldPersist: boolean) => void;
-  onClose: () => void;
-}) => {
-  const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
-  const [shouldPersist, setShouldPersist] = useState<boolean>(
-    props.isPersisted,
-  );
-
-  const appState = useUIAppState();
-
-  const onConfirm = () => {
-    props.onConfirm(keyInputValue.trim(), shouldPersist);
-  };
-
-  if (appState.openDialog?.name !== "settings") {
-    return null;
-  }
-
-  return (
-    <Dialog
-      onCloseRequest={() => {
-        props.onClose();
-        props.onConfirm(keyInputValue.trim(), shouldPersist);
-      }}
-      title={
-        <div style={{ display: "flex" }}>
-          Wireframe to Code (AI){" "}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "0.1rem 0.5rem",
-              marginLeft: "1rem",
-              fontSize: 14,
-              borderRadius: "12px",
-              background: "var(--color-promo)",
-              color: "var(--color-surface-lowest)",
-            }}
-          >
-            Experimental
-          </div>
-        </div>
-      }
-      className="MagicSettings"
-      autofocus={false}
-    >
-      {/*  <h2
-        style={{
-          margin: 0,
-          fontSize: "1.25rem",
-          paddingLeft: "2.5rem",
-        }}
-      >
-        AI Settings
-      </h2> */}
-      <TTDDialogTabs dialog="settings" tab={appState.openDialog.tab}>
-        {/* <TTDDialogTabTriggers>
-          <TTDDialogTabTrigger tab="text-to-diagram">
-            <InlineIcon icon={brainIcon} /> Text to diagram
-          </TTDDialogTabTrigger>
-          <TTDDialogTabTrigger tab="diagram-to-code">
-            <InlineIcon icon={MagicIcon} /> Wireframe to code
-          </TTDDialogTabTrigger>
-        </TTDDialogTabTriggers> */}
-        {/* <TTDDialogTab className="ttd-dialog-content" tab="text-to-diagram">
-          TODO
-        </TTDDialogTab> */}
-        <TTDDialogTab
-          //  className="ttd-dialog-content"
-          tab="diagram-to-code"
-        >
-          <Paragraph>
-            For the diagram-to-code feature we use{" "}
-            <InlineIcon icon={OpenAIIcon} />
-            OpenAI.
-          </Paragraph>
-          <Paragraph>
-            While the OpenAI API is in beta, its use is strictly limited — as
-            such we require you use your own API key. You can create an{" "}
-            <a
-              href="https://platform.openai.com/login?launch"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              OpenAI account
-            </a>
-            , add a small credit (5 USD minimum), and{" "}
-            <a
-              href="https://platform.openai.com/api-keys"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              generate your own API key
-            </a>
-            .
-          </Paragraph>
-          <Paragraph>
-            Your OpenAI key does not leave the browser, and you can also set
-            your own limit in your OpenAI account dashboard if needed.
-          </Paragraph>
-          <TextField
-            isRedacted
-            value={keyInputValue}
-            placeholder="Paste your API key here"
-            label="OpenAI API key"
-            onChange={(value) => {
-              setKeyInputValue(value);
-              props.onChange(value.trim(), shouldPersist);
-            }}
-            selectOnRender
-            onKeyDown={(event) => event.key === KEYS.ENTER && onConfirm()}
-          />
-          <Paragraph>
-            By default, your API token is not persisted anywhere so you'll need
-            to insert it again after reload. But, you can persist locally in
-            your browser below.
-          </Paragraph>
-
-          <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
-            Persist API key in browser storage
-          </CheckboxItem>
-
-          <Paragraph>
-            Once API key is set, you can use the <InlineIcon icon={MagicIcon} />{" "}
-            tool to wrap your elements in a frame that will then allow you to
-            turn it into code. This dialog can be accessed using the{" "}
-            <b>AI Settings</b> <InlineIcon icon={OpenAIIcon} />.
-          </Paragraph>
-
-          <FilledButton
-            className="MagicSettings__confirm"
-            size="large"
-            label="Confirm"
-            onClick={onConfirm}
-          />
-        </TTDDialogTab>
-      </TTDDialogTabs>
-    </Dialog>
-  );
-};

packages/excalidraw/components/Stats/Angle.tsx

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

packages/excalidraw/components/Stats/Dimension.tsx

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

packages/excalidraw/components/Stats/DragInput.tsx

@@ -3,43 +3,54 @@ 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";
 
-export type DragInputCallbackType = ({
-  accumulatedChange,
-  instantChange,
-  originalElements,
-  originalElementsMap,
-  shouldKeepAspectRatio,
-  shouldChangeByStepSize,
-  nextValue,
-}: {
+import "./DragInput.scss";
+import type { AppState } from "../../types";
+import { cloneJSON } from "../../utils";
+
+export type DragInputCallbackType<
+  P extends StatsInputProperty,
+  E = ExcalidrawElement,
+> = (props: {
   accumulatedChange: number;
   instantChange: number;
-  originalElements: readonly ExcalidrawElement[];
+  originalElements: readonly E[];
   originalElementsMap: ElementsMap;
   shouldKeepAspectRatio: boolean;
   shouldChangeByStepSize: boolean;
   nextValue?: number;
+  property: P;
+  scene: Scene;
+  originalAppState: AppState;
 }) => void;
 
-interface StatsDragInputProps {
+interface StatsDragInputProps<
+  T extends StatsInputProperty,
+  E = ExcalidrawElement,
+> {
   label: string | React.ReactNode;
   icon?: React.ReactNode;
   value: number | "Mixed";
-  elements: readonly ExcalidrawElement[];
+  elements: readonly E[];
   editable?: boolean;
   shouldKeepAspectRatio?: boolean;
-  dragInputCallback: DragInputCallbackType;
+  dragInputCallback: DragInputCallbackType<T, E>;
+  property: T;
+  scene: Scene;
+  appState: AppState;
 }
 
-const StatsDragInput = ({
+const StatsDragInput = <
+  T extends StatsInputProperty,
+  E extends ExcalidrawElement = ExcalidrawElement,
+>({
   label,
   icon,
   dragInputCallback,
@@ -47,19 +58,48 @@ const StatsDragInput = ({
   elements,
   editable = true,
   shouldKeepAspectRatio,
-}: StatsDragInputProps) => {
+  property,
+  scene,
+  appState,
+}: StatsDragInputProps<T, E>) => {
   const app = useApp();
   const inputRef = useRef<HTMLInputElement>(null);
   const labelRef = useRef<HTMLDivElement>(null);
 
   const [inputValue, setInputValue] = useState(value.toString());
 
-  useEffect(() => {
-    setInputValue(value.toString());
-  }, [value, elements]);
+  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,
+    };
+  }
 
-  const handleInputValue = (v: string) => {
-    const parsed = Number(v);
+  useEffect(() => {
+    const inputValue = value.toString();
+    setInputValue(inputValue);
+    stateRef.current.lastUpdatedValue = inputValue;
+  }, [value]);
+
+  const handleInputValue = (
+    updatedValue: string,
+    elements: readonly E[],
+    appState: AppState,
+  ) => {
+    if (!stateRef.current.updatePending) {
+      return false;
+    }
+    stateRef.current.updatePending = false;
+
+    const parsed = Number(updatedValue);
     if (isNaN(parsed)) {
       setInputValue(value.toString());
       return;
@@ -74,6 +114,7 @@ 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,
@@ -82,6 +123,9 @@ const StatsDragInput = ({
         shouldKeepAspectRatio: shouldKeepAspectRatio!!,
         shouldChangeByStepSize: false,
         nextValue: rounded,
+        property,
+        scene,
+        originalAppState: appState,
       });
       app.syncActionResult({ storeAction: StoreAction.CAPTURE });
     }
@@ -97,12 +141,28 @@ const StatsDragInput = ({
     return () => {
       const nextValue = input?.value;
       if (nextValue) {
-        handleInputValueRef.current(nextValue);
+        handleInputValueRef.current(
+          nextValue,
+          stateRef.current.originalElements,
+          stateRef.current.originalAppState,
+        );
       }
     };
-  }, []);
+  }, [
+    // 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,
+  ]);
 
-  return editable ? (
+  if (!editable) {
+    return null;
+  }
+
+  return (
     <div
       className={clsx("drag-input-container", !editable && "disabled")}
       data-testid={label}
@@ -122,30 +182,25 @@ const StatsDragInput = ({
               y: number;
             } | null = null;
 
-            let originalElements: ExcalidrawElement[] | null = null;
             let originalElementsMap: Map<string, ExcalidrawElement> | null =
-              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);
 
             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;
               }
@@ -153,6 +208,7 @@ const StatsDragInput = ({
               if (
                 lastPointer &&
                 originalElementsMap !== null &&
+                originalElements !== null &&
                 accumulatedChange !== null
               ) {
                 const instantChange = event.clientX - lastPointer.x;
@@ -165,6 +221,9 @@ const StatsDragInput = ({
                   originalElementsMap,
                   shouldKeepAspectRatio: shouldKeepAspectRatio!!,
                   shouldChangeByStepSize: event.shiftKey,
+                  property,
+                  scene,
+                  originalAppState,
                 });
               }
 
@@ -216,7 +275,7 @@ const StatsDragInput = ({
               eventTarget instanceof HTMLInputElement &&
               event.key === KEYS.ENTER
             ) {
-              handleInputValue(eventTarget.value);
+              handleInputValue(eventTarget.value, elements, appState);
               app.focusContainer();
             }
           }
@@ -224,23 +283,28 @@ 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);
+            handleInputValue(
+              event.target.value,
+              stateRef.current.originalElements,
+              stateRef.current.originalAppState,
+            );
           }
         }}
         disabled={!editable}
       />
     </div>
-  ) : (
-    <></>
   );
 };
 

packages/excalidraw/components/Stats/FontSize.tsx

@@ -1,73 +1,97 @@
-import type { ElementsMap, ExcalidrawTextElement } from "../../element/types";
-import { refreshTextDimensions } from "../../element/newElement";
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+} from "../../element/types";
 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: ExcalidrawTextElement;
-  elementsMap: ElementsMap;
+  element: ExcalidrawElement;
+  scene: Scene;
+  appState: AppState;
+  property: "fontSize";
 }
 
 const MIN_FONT_SIZE = 4;
 const STEP_SIZE = 4;
 
-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 handleFontSizeChange: DragInputCallbackType<
+  FontSizeProps["property"],
+  ExcalidrawTextElement
+> = ({
+  accumulatedChange,
+  originalElements,
+  shouldChangeByStepSize,
+  nextValue,
+  scene,
+}) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
 
-        const newElement = {
-          ...element,
-          fontSize: nextFontSize,
-        };
-        const updates = refreshTextDimensions(newElement, null, elementsMap);
-        mutateElement(element, {
-          ...updates,
-          fontSize: nextFontSize,
-        });
-        return;
-      }
+  const origElement = originalElements[0];
+  if (origElement) {
+    const latestElement = elementsMap.get(origElement.id);
+    if (!latestElement || !isTextElement(latestElement)) {
+      return;
+    }
 
-      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,
-        });
+    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 (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 { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type { ExcalidrawElement } from "../../element/types";
 import { isInGroup } from "../../groups";
 import { degreeToRadian, radianToDegree } from "../../math";
 import type Scene from "../../scene/Scene";
@@ -9,84 +9,102 @@ 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 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"),
-    );
+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),
+  );
 
-    if (nextValue !== undefined) {
-      const nextAngle = degreeToRadian(nextValue);
+  if (nextValue !== undefined) {
+    const nextAngle = degreeToRadian(nextValue);
 
-      for (const element of editableLatestIndividualElements) {
-        mutateElement(
-          element,
-          {
-            angle: nextAngle,
-          },
-          false,
-        );
-
-        const boundTextElement = getBoundTextElement(element, elementsMap);
-        if (boundTextElement && !isArrowElement(element)) {
-          mutateElement(boundTextElement, { angle: nextAngle }, false);
-        }
+    for (const element of editableLatestIndividualElements) {
+      if (!element) {
+        continue;
       }
-
-      scene.triggerUpdate();
-
-      return;
-    }
-
-    for (let i = 0; i < editableLatestIndividualElements.length; i++) {
-      const latestElement = editableLatestIndividualElements[i];
-      const originalElement = editableOriginalIndividualElements[i];
-      const originalAngleInDegrees =
-        Math.round(radianToDegree(originalElement.angle) * 100) / 100;
-      const changeInDegrees = Math.round(accumulatedChange);
-      let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
-      if (shouldChangeByStepSize) {
-        nextAngleInDegrees = getStepSizedValue(nextAngleInDegrees, STEP_SIZE);
-      }
-
-      nextAngleInDegrees =
-        nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
-
-      const nextAngle = degreeToRadian(nextAngleInDegrees);
-
       mutateElement(
-        latestElement,
+        element,
         {
           angle: nextAngle,
         },
         false,
       );
 
-      const boundTextElement = getBoundTextElement(latestElement, elementsMap);
-      if (boundTextElement && !isArrowElement(latestElement)) {
+      const boundTextElement = getBoundTextElement(element, elementsMap);
+      if (boundTextElement && !isArrowElement(element)) {
         mutateElement(boundTextElement, { angle: nextAngle }, false);
       }
     }
-    scene.triggerUpdate();
-  };
 
+    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"),
   );
@@ -107,6 +125,9 @@ const MultiAngle = ({ elements, elementsMap, scene }: MultiAngleProps) => {
       elements={elements}
       dragInputCallback={handleDegreeChange}
       editable={editable}
+      appState={appState}
+      scene={scene}
+      property={property}
     />
   );
 };

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -7,12 +7,16 @@ import {
   getBoundTextElement,
   handleBindTextResize,
 } from "../../element/textElement";
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "../../element/types";
 import type Scene from "../../scene/Scene";
-import type { Point } from "../../types";
+import type { AppState, Point } from "../../types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
+import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
@@ -20,9 +24,10 @@ import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
 interface MultiDimensionProps {
   property: "width" | "height";
   elements: readonly ExcalidrawElement[];
-  elementsMap: ElementsMap;
+  elementsMap: NonDeletedSceneElementsMap;
   atomicUnits: AtomicUnit[];
   scene: Scene;
+  appState: AppState;
 }
 
 const STEP_SIZE = 10;
@@ -59,7 +64,7 @@ const resizeElementInGroup = (
   scale: number,
   latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
+  elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
@@ -102,7 +107,7 @@ const resizeGroup = (
   property: MultiDimensionProps["property"],
   latestElements: ExcalidrawElement[],
   originalElements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
+  elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
 ) => {
   // keep aspect ratio for groups
@@ -131,12 +136,205 @@ 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(
     () =>
@@ -167,202 +365,6 @@ 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"}
@@ -370,6 +372,9 @@ 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, refreshTextDimensions } from "../../element";
+import { isTextElement, redrawTextBoundingBox } from "../../element";
 import { mutateElement } from "../../element/mutateElement";
-import { isBoundToContainer } from "../../element/typeChecks";
+import { hasBoundTextElement } from "../../element/typeChecks";
 import type {
-  ElementsMap,
   ExcalidrawElement,
   ExcalidrawTextElement,
+  NonDeletedSceneElementsMap,
 } from "../../element/types";
 import { isInGroup } from "../../groups";
 import type Scene from "../../scene/Scene";
@@ -12,62 +12,87 @@ 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 MultiFontSize = ({
-  elements,
-  elementsMap,
-  scene,
-}: MultiFontSizeProps) => {
-  const latestTextElements = elements.filter(
-    (el) => !isInGroup(el) && isTextElement(el) && !isBoundToContainer(el),
-  ) as ExcalidrawTextElement[];
-  const fontSizes = latestTextElements.map(
-    (textEl) => Math.round(textEl.fontSize * 10) / 10,
-  );
-  const value = new Set(fontSizes).size === 1 ? fontSizes[0] : "Mixed";
-  const editable = fontSizes.length > 0;
-
-  const handleFontSizeChange: DragInputCallbackType = ({
-    accumulatedChange,
-    originalElements,
-    shouldChangeByStepSize,
-    nextValue,
-  }) => {
-    if (nextValue) {
-      const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
-
-      for (const textElement of latestTextElements) {
-        const newElement = {
-          ...textElement,
-          fontSize: nextFontSize,
-        };
-        const updates = refreshTextDimensions(newElement, null, elementsMap);
-        mutateElement(
-          textElement,
-          {
-            ...updates,
-            fontSize: nextFontSize,
-          },
-          false,
-        );
+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;
+        }
       }
 
-      scene.triggerUpdate();
-      return;
+      return acc;
+    },
+
+    [],
+  );
+
+const handleFontSizeChange: DragInputCallbackType<
+  MultiFontSizeProps["property"],
+  ExcalidrawTextElement
+> = ({
+  accumulatedChange,
+  originalElements,
+  shouldChangeByStepSize,
+  nextValue,
+  scene,
+}) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
+  const latestTextElements = originalElements.map((el) =>
+    elementsMap.get(el.id),
+  ) as ExcalidrawTextElement[];
+
+  let nextFontSize;
+
+  if (nextValue) {
+    nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
+
+    for (const textElement of latestTextElements) {
+      mutateElement(
+        textElement,
+        {
+          fontSize: nextFontSize,
+        },
+        false,
+      );
+
+      redrawTextBoundingBox(
+        textElement,
+        scene.getContainerElement(textElement),
+        elementsMap,
+        false,
+      );
     }
 
-    const originalTextElements = originalElements.filter(
-      (el) => !isInGroup(el) && isTextElement(el) && !isBoundToContainer(el),
-    ) as ExcalidrawTextElement[];
+    scene.triggerUpdate();
+  } else {
+    const originalTextElements = originalElements as ExcalidrawTextElement[];
 
     for (let i = 0; i < latestTextElements.length; i++) {
       const latestElement = latestTextElements[i];
@@ -82,32 +107,56 @@ const MultiFontSize = ({
       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={elements}
+      elements={latestTextElements}
       dragInputCallback={handleFontSizeChange}
       value={value}
       editable={editable}
+      scene={scene}
+      property={property}
+      appState={appState}
     />
   );
 };

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -1,13 +1,18 @@
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "../../element/types";
 import { rotate } from "../../math";
 import type Scene from "../../scene/Scene";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
+import { getAtomicUnits, 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";
@@ -15,6 +20,7 @@ interface MultiPositionProps {
   elementsMap: ElementsMap;
   atomicUnits: AtomicUnit[];
   scene: Scene;
+  appState: AppState;
 }
 
 const STEP_SIZE = 10;
@@ -25,12 +31,11 @@ const moveElements = (
   changeInTopY: number,
   elements: readonly ExcalidrawElement[],
   originalElements: readonly ExcalidrawElement[],
-  elementsMap: ElementsMap,
+  elementsMap: NonDeletedSceneElementsMap,
   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,
@@ -53,7 +58,6 @@ const moveElements = (
     moveElement(
       newTopLeftX,
       newTopLeftY,
-      latestElement,
       origElement,
       elementsMap,
       originalElementsMap,
@@ -65,18 +69,22 @@ const moveElements = (
 const moveGroupTo = (
   nextX: number,
   nextY: number,
-  latestElements: ExcalidrawElement[],
   originalElements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
+  elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
+  scene: Scene,
 ) => {
   const [x1, y1, ,] = getCommonBounds(originalElements);
   const offsetX = nextX - x1;
   const offsetY = nextY - y1;
 
-  for (let i = 0; i < latestElements.length; i++) {
+  for (let i = 0; i < originalElements.length; i++) {
     const origElement = originalElements[i];
-    const latestElement = latestElements[i];
+
+    const latestElement = elementsMap.get(origElement.id);
+    if (!latestElement) {
+      continue;
+    }
 
     // bound texts are moved with their containers
     if (!isTextElement(latestElement) || !latestElement.containerId) {
@@ -96,7 +104,6 @@ const moveGroupTo = (
       moveElement(
         topLeftX + offsetX,
         topLeftY + offsetY,
-        latestElement,
         origElement,
         elementsMap,
         originalElementsMap,
@@ -106,12 +113,111 @@ 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(
     () =>
@@ -137,101 +243,15 @@ 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,16 +3,92 @@ 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 Position = ({ property, element, elementsMap }: PositionProps) => {
+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 [topLeftX, topLeftY] = rotate(
     element.x,
     element.y,
@@ -23,77 +99,15 @@ const Position = ({ property, element, elementsMap }: PositionProps) => {
   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,12 +11,7 @@ import Angle from "./Angle";
 
 import FontSize from "./FontSize";
 import MultiDimension from "./MultiDimension";
-import {
-  elementsAreInSameGroup,
-  getElementsInGroup,
-  getSelectedGroupIds,
-  isInGroup,
-} from "../../groups";
+import { elementsAreInSameGroup } from "../../groups";
 import MultiAngle from "./MultiAngle";
 import MultiFontSize from "./MultiFontSize";
 import Position from "./Position";
@@ -24,7 +19,7 @@ import MultiPosition from "./MultiPosition";
 import Collapsible from "./Collapsible";
 import type Scene from "../../scene/Scene";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
-import type { AtomicUnit } from "./utils";
+import { getAtomicUnits } from "./utils";
 import { STATS_PANELS } from "../../constants";
 
 interface StatsProps {
@@ -106,21 +101,7 @@ export const StatsInner = memo(
     );
 
     const atomicUnits = useMemo(() => {
-      const selectedGroupIds = getSelectedGroupIds(appState);
-      const _atomicUnits = selectedGroupIds.map((gid) => {
-        return getElementsInGroup(selectedElements, gid).reduce((acc, el) => {
-          acc[el.id] = true;
-          return acc;
-        }, {} as AtomicUnit);
-      });
-      selectedElements
-        .filter((el) => !isInGroup(el))
-        .forEach((el) => {
-          _atomicUnits.push({
-            [el.id]: true,
-          });
-        });
-      return _atomicUnits;
+      return getAtomicUnits(selectedElements, appState);
     }, [selectedElements, appState]);
 
     return (
@@ -206,32 +187,40 @@ 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}
-                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
                       />
                       <Dimension
                         property="height"
                         element={singleElement}
-                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
                       />
                       <Angle
+                        property="angle"
                         element={singleElement}
-                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <FontSize
+                        property="fontSize"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
                       />
-                      {singleElement.type === "text" && (
-                        <FontSize
-                          element={singleElement}
-                          elementsMap={elementsMap}
-                        />
-                      )}
                     </div>
                   </div>
                 )}
@@ -254,6 +243,7 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
+                        appState={appState}
                       />
                       <MultiPosition
                         property="y"
@@ -261,6 +251,7 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
+                        appState={appState}
                       />
                       <MultiDimension
                         property="width"
@@ -268,6 +259,7 @@ export const StatsInner = memo(
                         elementsMap={elementsMap}
                         atomicUnits={atomicUnits}
                         scene={scene}
+                        appState={appState}
                       />
                       <MultiDimension
                         property="height"
@@ -275,16 +267,20 @@ 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}
-                        elementsMap={elementsMap}
                         scene={scene}
+                        appState={appState}
+                        elementsMap={elementsMap}
                       />
                     </div>
                   </div>

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

@@ -11,10 +11,11 @@ import * as StaticScene from "../../renderer/staticScene";
 import { vi } from "vitest";
 import { reseed } from "../../random";
 import { setDateTimeForTests } from "../../utils";
-import { Excalidraw } from "../..";
+import { Excalidraw, mutateElement } from "../..";
 import { t } from "../../i18n";
 import type {
   ExcalidrawElement,
+  ExcalidrawLinearElement,
   ExcalidrawTextElement,
 } from "../../element/types";
 import { degreeToRadian, rotate } from "../../math";
@@ -23,6 +24,7 @@ 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");
@@ -30,11 +32,21 @@ 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}"]`,
+    return (
+      properties?.querySelector?.(
+        `.drag-input-container[data-testid="${label}"]`,
+      ) || null
     );
   }
 
@@ -51,11 +63,9 @@ const testInputProperty = (
   const input = getStatsProperty(label)?.querySelector(
     ".drag-input",
   ) as HTMLInputElement;
-  expect(input).not.toBeNull();
+  expect(input).toBeDefined();
   expect(input.value).toBe(initialValue.toString());
-  input?.focus();
-  input.value = nextValue.toString();
-  input?.blur();
+  editInput(input, String(nextValue));
   if (property === "angle") {
     expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
   } else if (property === "fontSize" && isTextElement(element)) {
@@ -91,6 +101,92 @@ 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 () => {
@@ -127,8 +223,8 @@ describe("stats for a generic element", () => {
   });
 
   it("should open stats", () => {
-    expect(stats).not.toBeNull();
-    expect(elementStats).not.toBeNull();
+    expect(stats).toBeDefined();
+    expect(elementStats).toBeDefined();
 
     // title
     const title = elementStats?.querySelector("h3");
@@ -136,18 +232,18 @@ describe("stats for a generic element", () => {
 
     // element type
     const elementType = elementStats?.querySelector(".elementType");
-    expect(elementType).not.toBeNull();
+    expect(elementType).toBeDefined();
     expect(elementType?.lastChild?.nodeValue).toBe(t("element.rectangle"));
 
     // properties
     const properties = elementStats?.querySelector(".statsItem");
-    expect(properties?.childNodes).not.toBeNull();
+    expect(properties?.childNodes).toBeDefined();
     ["X", "Y", "W", "H", "A"].forEach((label) => () => {
       expect(
         properties?.querySelector?.(
           `.drag-input-container[data-testid="${label}"]`,
         ),
-      ).not.toBeNull();
+      ).toBeDefined();
     });
   });
 
@@ -170,19 +266,15 @@ describe("stats for a generic element", () => {
     const input = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(input).not.toBeNull();
+    expect(input).toBeDefined();
     expect(input.value).toBe(rectangle.width.toString());
-    input?.focus();
-    input.value = "123.123";
-    input?.blur();
+    editInput(input, "123.123");
     expect(h.elements.length).toBe(1);
     expect(rectangle.id).toBe(rectangleId);
     expect(input.value).toBe("123.12");
     expect(rectangle.width).toBe(123.12);
 
-    input?.focus();
-    input.value = "88.98766";
-    input?.blur();
+    editInput(input, "88.98766");
     expect(input.value).toBe("88.99");
     expect(rectangle.width).toBe(88.99);
   });
@@ -333,11 +425,9 @@ describe("stats for a non-generic element", () => {
     const input = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(input).not.toBeNull();
+    expect(input).toBeDefined();
     expect(input.value).toBe(text.fontSize.toString());
-    input?.focus();
-    input.value = "36";
-    input?.blur();
+    editInput(input, "36");
     expect(text.fontSize).toBe(36);
 
     // cannot change width or height
@@ -347,9 +437,7 @@ describe("stats for a non-generic element", () => {
     expect(height).toBeUndefined();
 
     // min font size is 4
-    input.focus();
-    input.value = "0";
-    input.blur();
+    editInput(input, "0");
     expect(text.fontSize).not.toBe(0);
     expect(text.fontSize).toBe(4);
   });
@@ -370,7 +458,7 @@ describe("stats for a non-generic element", () => {
 
     elementStats = stats?.querySelector("#elementStats");
 
-    expect(elementStats).not.toBeNull();
+    expect(elementStats).toBeDefined();
 
     // cannot change angle
     const angle = getStatsProperty("A")?.querySelector(".drag-input");
@@ -391,7 +479,7 @@ describe("stats for a non-generic element", () => {
       },
     });
     elementStats = stats?.querySelector("#elementStats");
-    expect(elementStats).not.toBeNull();
+    expect(elementStats).toBeDefined();
     const widthToHeight = image.width / image.height;
 
     // when width or height is changed, the aspect ratio is preserved
@@ -403,6 +491,35 @@ 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
@@ -471,16 +588,12 @@ describe("stats for multiple elements", () => {
     ) as HTMLInputElement;
     expect(angle.value).toBe("0");
 
-    width.focus();
-    width.value = "250";
-    width.blur();
+    editInput(width, "250");
     h.elements.forEach((el) => {
       expect(el.width).toBe(250);
     });
 
-    height.focus();
-    height.value = "450";
-    height.blur();
+    editInput(height, "450");
     h.elements.forEach((el) => {
       expect(el.height).toBe(450);
     });
@@ -501,7 +614,6 @@ describe("stats for multiple elements", () => {
     mouse.up(200, 100);
 
     const frame = API.createElement({
-      id: "id0",
       type: "frame",
       x: 150,
       width: 150,
@@ -524,38 +636,34 @@ describe("stats for multiple elements", () => {
     const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(width).not.toBeNull();
+    expect(width).toBeDefined();
     expect(width.value).toBe("Mixed");
 
     const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(height).not.toBeNull();
+    expect(height).toBeDefined();
     expect(height.value).toBe("Mixed");
 
     const angle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(angle).not.toBeNull();
+    expect(angle).toBeDefined();
     expect(angle.value).toBe("0");
 
     const fontSize = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(fontSize).not.toBeNull();
+    expect(fontSize).toBeDefined();
 
     // changing width does not affect text
-    width.focus();
-    width.value = "200";
-    width.blur();
+    editInput(width, "200");
 
     expect(rectangle?.width).toBe(200);
     expect(frame.width).toBe(200);
     expect(text?.width).not.toBe(200);
 
-    angle.focus();
-    angle.value = "40";
-    angle.blur();
+    editInput(angle, "40");
 
     const angleInRadian = degreeToRadian(40);
     expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
@@ -592,12 +700,10 @@ describe("stats for multiple elements", () => {
       ".drag-input",
     ) as HTMLInputElement;
 
-    expect(x).not.toBeNull();
+    expect(x).toBeDefined();
     expect(Number(x.value)).toBe(x1);
 
-    x.focus();
-    x.value = "300";
-    x.blur();
+    editInput(x, "300");
 
     expect(h.elements[0].x).toBe(300);
     expect(h.elements[1].x).toBe(400);
@@ -607,12 +713,10 @@ describe("stats for multiple elements", () => {
       ".drag-input",
     ) as HTMLInputElement;
 
-    expect(y).not.toBeNull();
+    expect(y).toBeDefined();
     expect(Number(y.value)).toBe(y1);
 
-    y.focus();
-    y.value = "200";
-    y.blur();
+    editInput(y, "200");
 
     expect(h.elements[0].y).toBe(200);
     expect(h.elements[1].y).toBe(300);
@@ -621,35 +725,29 @@ describe("stats for multiple elements", () => {
     const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(width).not.toBeNull();
+    expect(width).toBeDefined();
     expect(Number(width.value)).toBe(200);
 
     const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
-    expect(height).not.toBeNull();
+    expect(height).toBeDefined();
     expect(Number(height.value)).toBe(200);
 
-    width.focus();
-    width.value = "400";
-    width.blur();
+    editInput(width, "400");
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     let newGroupWidth = x2 - x1;
 
     expect(newGroupWidth).toBeCloseTo(400, 4);
 
-    width.focus();
-    width.value = "300";
-    width.blur();
+    editInput(width, "300");
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     newGroupWidth = x2 - x1;
     expect(newGroupWidth).toBeCloseTo(300, 4);
 
-    height.focus();
-    height.value = "500";
-    height.blur();
+    editInput(height, "500");
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     const newGroupHeight = y2 - y1;

packages/excalidraw/components/Stats/utils.ts

@@ -1,4 +1,7 @@
-import { updateBoundElements } from "../../element/binding";
+import {
+  bindOrUnbindLinearElements,
+  updateBoundElements,
+} from "../../element/binding";
 import { mutateElement } from "../../element/mutateElement";
 import {
   measureFontSizeFromWidth,
@@ -11,15 +14,34 @@ import {
   getBoundTextMaxWidth,
   handleBindTextResize,
 } from "../../element/textElement";
-import { isFrameLikeElement, isTextElement } from "../../element/typeChecks";
+import {
+  isFrameLikeElement,
+  isLinearElement,
+  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 = (
@@ -100,12 +122,14 @@ export const resizeElement = (
   nextWidth: number,
   nextHeight: number,
   keepAspectRatio: boolean,
-  latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
-  originalElementsMap: Map<string, ExcalidrawElement>,
+  elementsMap: NonDeletedSceneElementsMap,
   shouldInformMutation = true,
 ) => {
+  const latestElement = elementsMap.get(origElement.id);
+  if (!latestElement) {
+    return;
+  }
   let boundTextFont: { fontSize?: number } = {};
   const boundTextElement = getBoundTextElement(latestElement, elementsMap);
 
@@ -140,6 +164,12 @@ export const resizeElement = (
     },
     shouldInformMutation,
   );
+  updateBindings(latestElement, elementsMap, {
+    newSize: {
+      width: nextWidth,
+      height: nextHeight,
+    },
+  });
 
   if (boundTextElement) {
     boundTextFont = {
@@ -163,13 +193,6 @@ export const resizeElement = (
     }
   }
 
-  updateBoundElements(latestElement, elementsMap, {
-    newSize: {
-      width: nextWidth,
-      height: nextHeight,
-    },
-  });
-
   if (boundTextElement && boundTextFont) {
     mutateElement(boundTextElement, {
       fontSize: boundTextFont.fontSize,
@@ -181,12 +204,15 @@ export const resizeElement = (
 export const moveElement = (
   newTopLeftX: number,
   newTopLeftY: number,
-  latestElement: ExcalidrawElement,
   originalElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
+  elementsMap: NonDeletedSceneElementsMap,
   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,
@@ -218,6 +244,7 @@ export const moveElement = (
     },
     shouldInformMutation,
   );
+  updateBindings(latestElement, elementsMap);
 
   const boundTextElement = getBoundTextElement(
     originalElement,
@@ -236,3 +263,39 @@ 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/TTDDialogTabs.tsx

@@ -7,10 +7,7 @@ import { isMemberOf } from "../../utils";
 const TTDDialogTabs = (
   props: {
     children: ReactNode;
-  } & (
-    | { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" }
-    | { dialog: "settings"; tab: "text-to-diagram" | "diagram-to-code" }
-  ),
+  } & { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" },
 ) => {
   const setAppState = useExcalidrawSetAppState();
 
@@ -39,13 +36,6 @@ const TTDDialogTabs = (
           }
         }
         if (
-          props.dialog === "settings" &&
-          isMemberOf(["text-to-diagram", "diagram-to-code"], tab)
-        ) {
-          setAppState({
-            openDialog: { name: props.dialog, tab, source: "settings" },
-          });
-        } else if (
           props.dialog === "ttd" &&
           isMemberOf(["text-to-diagram", "mermaid"], tab)
         ) {

packages/excalidraw/data/magic.ts

@@ -1,105 +0,0 @@
-import { THEME } from "../constants";
-import type { Theme } from "../element/types";
-import type { DataURL } from "../types";
-import type { OpenAIInput, OpenAIOutput } from "./ai/types";
-
-export type MagicCacheData =
-  | {
-      status: "pending";
-    }
-  | { status: "done"; html: string }
-  | {
-      status: "error";
-      message?: string;
-      code: "ERR_GENERATION_INTERRUPTED" | string;
-    };
-
-const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
-Your role is to transform low-fidelity wireframes into working front-end HTML code.
-
-YOU MUST FOLLOW FOLLOWING RULES:
-
-- Use HTML, CSS, JavaScript to build a responsive, accessible, polished prototype
-- Leverage Tailwind for styling and layout (import as script <script src="https://cdn.tailwindcss.com"></script>)
-- Inline JavaScript when needed
-- Fetch dependencies from CDNs when needed (using unpkg or skypack)
-- Source images from Unsplash or create applicable placeholders
-- Interpret annotations as intended vs literal UI
-- Fill gaps using your expertise in UX and business logic
-- generate primarily for desktop UI, but make it responsive.
-- Use grid and flexbox wherever applicable.
-- Convert the wireframe in its entirety, don't omit elements if possible.
-
-If the wireframes, diagrams, or text is unclear or unreadable, refer to provided text for clarification.
-
-Your goal is a production-ready prototype that brings the wireframes to life.
-
-Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
-
-export async function diagramToHTML({
-  image,
-  apiKey,
-  text,
-  theme = THEME.LIGHT,
-}: {
-  image: DataURL;
-  apiKey: string;
-  text: string;
-  theme?: Theme;
-}) {
-  const body: OpenAIInput.ChatCompletionCreateParamsBase = {
-    model: "gpt-4-vision-preview",
-    // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently
-    max_tokens: 4096,
-    temperature: 0.1,
-    messages: [
-      {
-        role: "system",
-        content: SYSTEM_PROMPT,
-      },
-      {
-        role: "user",
-        content: [
-          {
-            type: "image_url",
-            image_url: {
-              url: image,
-              detail: "high",
-            },
-          },
-          {
-            type: "text",
-            text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`,
-          },
-          {
-            type: "text",
-            text,
-          },
-        ],
-      },
-    ],
-  };
-
-  let result:
-    | ({ ok: true } & OpenAIOutput.ChatCompletion)
-    | ({ ok: false } & OpenAIOutput.APIError);
-
-  const resp = await fetch("https://api.openai.com/v1/chat/completions", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${apiKey}`,
-    },
-    body: JSON.stringify(body),
-  });
-
-  if (resp.ok) {
-    const json: OpenAIOutput.ChatCompletion = await resp.json();
-    result = { ...json, ok: true };
-  } else {
-    const json: OpenAIOutput.APIError = await resp.json();
-    result = { ...json, ok: false };
-  }
-
-  return result;
-}

packages/excalidraw/element/binding.ts

@@ -25,7 +25,7 @@ import type {
 } from "./types";
 
 import { getElementAbsoluteCoords } from "./bounds";
-import type { AppClassProperties, AppState, Point } from "../types";
+import type { AppState, Point } from "../types";
 import { isPointOnShape } from "../../utils/collision";
 import { getElementAtPosition } from "../scene";
 import {
@@ -43,6 +43,7 @@ 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>
@@ -179,9 +180,8 @@ const bindOrUnbindLinearElementEdge = (
 const getOriginalBindingIfStillCloseOfLinearElementEdge = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   edge: "start" | "end",
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): NonDeleted<ExcalidrawElement> | null => {
-  const elementsMap = app.scene.getNonDeletedElementsMap();
   const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
   const elementId =
     edge === "start"
@@ -189,7 +189,10 @@ const getOriginalBindingIfStillCloseOfLinearElementEdge = (
       : linearElement.endBinding?.elementId;
   if (elementId) {
     const element = elementsMap.get(elementId);
-    if (isBindableElement(element) && bindingBorderTest(element, coors, app)) {
+    if (
+      isBindableElement(element) &&
+      bindingBorderTest(element, coors, elementsMap)
+    ) {
       return element;
     }
   }
@@ -199,13 +202,13 @@ const getOriginalBindingIfStillCloseOfLinearElementEdge = (
 
 const getOriginalBindingsIfStillCloseToArrowEnds = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): (NonDeleted<ExcalidrawElement> | null)[] =>
   ["start", "end"].map((edge) =>
     getOriginalBindingIfStillCloseOfLinearElementEdge(
       linearElement,
       edge as "start" | "end",
-      app,
+      elementsMap,
     ),
   );
 
@@ -213,7 +216,7 @@ const getBindingStrategyForDraggingArrowEndpoints = (
   selectedElement: NonDeleted<ExcalidrawLinearElement>,
   isBindingEnabled: boolean,
   draggingPoints: readonly number[],
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): (NonDeleted<ExcalidrawBindableElement> | null | "keep")[] => {
   const startIdx = 0;
   const endIdx = selectedElement.points.length - 1;
@@ -221,37 +224,57 @@ const getBindingStrategyForDraggingArrowEndpoints = (
   const endDragged = draggingPoints.findIndex((i) => i === endIdx) > -1;
   const start = startDragged
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(selectedElement, "start", app)
+      ? getElligibleElementForBindingElement(
+          selectedElement,
+          "start",
+          elementsMap,
+        )
       : 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", app);
+      getElligibleElementForBindingElement(
+        selectedElement,
+        "start",
+        elementsMap,
+      );
   const end = endDragged
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(selectedElement, "end", app)
+      ? getElligibleElementForBindingElement(
+          selectedElement,
+          "end",
+          elementsMap,
+        )
       : 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", app);
+      getElligibleElementForBindingElement(selectedElement, "end", elementsMap);
 
   return [start, end];
 };
 
 const getBindingStrategyForDraggingArrowOrJoints = (
   selectedElement: NonDeleted<ExcalidrawLinearElement>,
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
   isBindingEnabled: boolean,
 ): (NonDeleted<ExcalidrawBindableElement> | null | "keep")[] => {
   const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(
     selectedElement,
-    app,
+    elementsMap,
   );
   const start = startIsClose
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(selectedElement, "start", app)
+      ? getElligibleElementForBindingElement(
+          selectedElement,
+          "start",
+          elementsMap,
+        )
       : null
     : null;
   const end = endIsClose
     ? isBindingEnabled
-      ? getElligibleElementForBindingElement(selectedElement, "end", app)
+      ? getElligibleElementForBindingElement(
+          selectedElement,
+          "end",
+          elementsMap,
+        )
       : null
     : null;
 
@@ -260,7 +283,7 @@ const getBindingStrategyForDraggingArrowOrJoints = (
 
 export const bindOrUnbindLinearElements = (
   selectedElements: NonDeleted<ExcalidrawLinearElement>[],
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
   isBindingEnabled: boolean,
   draggingPoints: readonly number[] | null,
 ): void => {
@@ -271,27 +294,22 @@ export const bindOrUnbindLinearElements = (
           selectedElement,
           isBindingEnabled,
           draggingPoints ?? [],
-          app,
+          elementsMap,
         )
       : // The arrow itself (the shaft) or the inner joins are dragged
         getBindingStrategyForDraggingArrowOrJoints(
           selectedElement,
-          app,
+          elementsMap,
           isBindingEnabled,
         );
 
-    bindOrUnbindLinearElement(
-      selectedElement,
-      start,
-      end,
-      app.scene.getNonDeletedElementsMap(),
-    );
+    bindOrUnbindLinearElement(selectedElement, start, end, elementsMap);
   });
 };
 
 export const getSuggestedBindingsForArrows = (
   selectedElements: NonDeleted<ExcalidrawElement>[],
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): SuggestedBinding[] => {
   // HOT PATH: Bail out if selected elements list is too large
   if (selectedElements.length > 50) {
@@ -302,7 +320,7 @@ export const getSuggestedBindingsForArrows = (
     selectedElements
       .filter(isLinearElement)
       .flatMap((element) =>
-        getOriginalBindingsIfStillCloseToArrowEnds(element, app),
+        getOriginalBindingsIfStillCloseToArrowEnds(element, elementsMap),
       )
       .filter(
         (element): element is NonDeleted<ExcalidrawBindableElement> =>
@@ -324,17 +342,20 @@ export const maybeBindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   appState: AppState,
   pointerCoords: { x: number; y: number },
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
   if (appState.startBoundElement != null) {
     bindLinearElement(
       linearElement,
       appState.startBoundElement,
       "start",
-      app.scene.getNonDeletedElementsMap(),
+      elementsMap,
     );
   }
-  const hoveredElement = getHoveredElementForBinding(pointerCoords, app);
+  const hoveredElement = getHoveredElementForBinding(
+    pointerCoords,
+    elementsMap,
+  );
   if (
     hoveredElement != null &&
     !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
@@ -343,12 +364,7 @@ export const maybeBindLinearElement = (
       "end",
     )
   ) {
-    bindLinearElement(
-      linearElement,
-      hoveredElement,
-      "end",
-      app.scene.getNonDeletedElementsMap(),
-    );
+    bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
   }
 };
 
@@ -432,13 +448,13 @@ export const getHoveredElementForBinding = (
     x: number;
     y: number;
   },
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
   const hoveredElement = getElementAtPosition(
-    app.scene.getNonDeletedElements(),
+    [...elementsMap].map(([_, value]) => value),
     (element) =>
       isBindableElement(element, false) &&
-      bindingBorderTest(element, pointerCoords, app),
+      bindingBorderTest(element, pointerCoords, elementsMap),
   );
   return hoveredElement as NonDeleted<ExcalidrawBindableElement> | null;
 };
@@ -662,15 +678,11 @@ const maybeCalculateNewGapWhenScaling = (
 const getElligibleElementForBindingElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   startOrEnd: "start" | "end",
-  app: AppClassProperties,
+  elementsMap: NonDeletedSceneElementsMap,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
   return getHoveredElementForBinding(
-    getLinearElementEdgeCoors(
-      linearElement,
-      startOrEnd,
-      app.scene.getNonDeletedElementsMap(),
-    ),
-    app,
+    getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
+    elementsMap,
   );
 };
 
@@ -707,6 +719,9 @@ 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) {
@@ -756,7 +771,11 @@ export const fixBindingsAfterDuplication = (
   sceneElements
     .filter(({ id }) => allBindableElementIds.has(id))
     .forEach((bindableElement) => {
-      const { boundElements } = bindableElement;
+      const oldElementId = duplicateIdToOldId.get(bindableElement.id);
+      const { boundElements } = sceneElements.find(
+        ({ id }) => id === oldElementId,
+      )!;
+
       if (boundElements != null && boundElements.length > 0) {
         mutateElement(bindableElement, {
           boundElements: boundElements.map((boundElement) =>
@@ -827,10 +846,10 @@ const newBoundElements = (
 const bindingBorderTest = (
   element: NonDeleted<ExcalidrawBindableElement>,
   { x, y }: { x: number; y: number },
-  app: AppClassProperties,
+  elementsMap: ElementsMap,
 ): boolean => {
   const threshold = maxBindingGap(element, element.width, element.height);
-  const shape = app.getElementShape(element);
+  const shape = getElementShape(element, elementsMap);
   return isPointOnShape([x, y], shape, threshold);
 };
 

packages/excalidraw/element/index.ts

@@ -45,7 +45,7 @@ export {
   dragNewElement,
 } from "./dragElements";
 export { isTextElement, isExcalidrawElement } from "./typeChecks";
-export { redrawTextBoundingBox } from "./textElement";
+export { redrawTextBoundingBox, getTextFromElements } from "./textElement";
 export {
   getPerfectElementSize,
   getLockedLinearCursorAlignSize,

packages/excalidraw/element/linearElementEditor.ts

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

packages/excalidraw/element/mutateElement.ts

@@ -107,8 +107,6 @@ 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) {
@@ -125,7 +123,7 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     }
   }
 
-  if (!didChange && !force) {
+  if (!didChange) {
     return element;
   }
 

packages/excalidraw/element/textElement.ts

@@ -945,3 +945,19 @@ export const getMinTextElementWidth = (
 ) => {
   return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
 };
+
+/** retrieves text from text elements and concatenates to a single string */
+export const getTextFromElements = (
+  elements: readonly ExcalidrawElement[],
+  separator = "\n\n",
+) => {
+  const text = elements
+    .reduce((acc: string[], element) => {
+      if (isTextElement(element)) {
+        acc.push(element.text);
+      }
+      return acc;
+    }, [])
+    .join(separator);
+  return text;
+};

packages/excalidraw/element/types.ts

@@ -7,7 +7,6 @@ import type {
   VERTICAL_ALIGN,
 } from "../constants";
 import type { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
-import type { MagicCacheData } from "../data/magic";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
@@ -96,11 +95,22 @@ export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase &
     type: "embeddable";
   }>;
 
+export type MagicGenerationData =
+  | {
+      status: "pending";
+    }
+  | { status: "done"; html: string }
+  | {
+      status: "error";
+      message?: string;
+      code: "ERR_GENERATION_INTERRUPTED" | string;
+    };
+
 export type ExcalidrawIframeElement = _ExcalidrawElementBase &
   Readonly<{
     type: "iframe";
     // TODO move later to AI-specific frame
-    customData?: { generationData?: MagicCacheData };
+    customData?: { generationData?: MagicGenerationData };
   }>;
 
 export type ExcalidrawIframeLikeElement =

packages/excalidraw/frame.ts

@@ -763,7 +763,7 @@ export const getFrameLikeTitle = (
   return element.name === null
     ? isFrameElement(element)
       ? `Frame ${frameIdx}`
-      : `AI Frame $${frameIdx}`
+      : `AI Frame ${frameIdx}`
     : element.name;
 };
 

packages/excalidraw/index.tsx

@@ -211,6 +211,7 @@ export {
   hashString,
   isInvisiblySmallElement,
   getNonDeletedElements,
+  getTextFromElements,
 } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export {
@@ -284,3 +285,5 @@ export {
   isElementInsideBBox,
   elementPartiallyOverlapsWithOrContainsBBox,
 } from "../utils/withinBounds";
+
+export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToCodePlugin";

packages/excalidraw/locales/en.json

@@ -267,8 +267,7 @@
     "laser": "Laser pointer",
     "hand": "Hand (panning tool)",
     "extraTools": "More tools",
-    "mermaidToExcalidraw": "Mermaid to Excalidraw",
-    "magicSettings": "AI settings"
+    "mermaidToExcalidraw": "Mermaid to Excalidraw"
   },
   "element": {
     "rectangle": "Rectangle",

packages/excalidraw/renderer/renderElement.ts

@@ -90,7 +90,7 @@ const shouldResetImageFilter = (
 };
 
 const getCanvasPadding = (element: ExcalidrawElement) =>
-  element.type === "freedraw" ? element.strokeWidth * 12 : 20;
+  element.type === "freedraw" ? element.strokeWidth * 12 : 200;
 
 export const getRenderOpacity = (
   element: ExcalidrawElement,

packages/excalidraw/scene/Fonts.ts

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

packages/excalidraw/scene/types.ts

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

packages/excalidraw/shapes.tsx

@@ -1,3 +1,11 @@
+import {
+  getClosedCurveShape,
+  getCurveShape,
+  getEllipseShape,
+  getFreedrawShape,
+  getPolygonShape,
+  type GeometricShape,
+} from "../utils/geometry/shape";
 import {
   ArrowIcon,
   DiamondIcon,
@@ -10,7 +18,11 @@ 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 = [
   {
@@ -97,3 +109,53 @@ 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 } from "../index";
+import { Excalidraw, isLinearElement } from "../index";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
@@ -433,4 +433,49 @@ 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,6 +27,7 @@ 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,
@@ -972,10 +973,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 () => {
@@ -1006,10 +1007,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 () => {
@@ -1349,4 +1350,27 @@ 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

@@ -294,14 +294,6 @@ export interface AppState {
   openDialog:
     | null
     | { name: "imageExport" | "help" | "jsonExport" }
-    | {
-        name: "settings";
-        source:
-          | "tool" // when magicframe tool is selected
-          | "generation" // when magicframe generate button is clicked
-          | "settings"; // when AI settings dialog is explicitly invoked
-        tab: "text-to-diagram" | "diagram-to-code";
-      }
     | { name: "ttd"; tab: "text-to-diagram" | "mermaid" }
     | { name: "commandPalette" };
   /**
@@ -614,8 +606,9 @@ export type AppClassProperties = {
   setOpenDialog: App["setOpenDialog"];
   insertEmbeddableElement: App["insertEmbeddableElement"];
   onMagicframeToolSelect: App["onMagicframeToolSelect"];
-  getElementShape: App["getElementShape"];
   getName: App["getName"];
+  setPlugins: App["setPlugins"];
+  plugins: App["plugins"];
 };
 
 export type PointerDownState = Readonly<{
@@ -796,3 +789,8 @@ export type EmbedsValidationStatus = Map<
 >;
 
 export type ElementsPendingErasure = Set<ExcalidrawElement["id"]>;
+
+export type GenerateDiagramToCode = (props: {
+  frame: ExcalidrawMagicFrameElement;
+  children: readonly ExcalidrawElement[];
+}) => MaybePromise<{ html: string }>;

packages/excalidraw/utils.ts

@@ -1124,3 +1124,11 @@ export const promiseTry = async <TValue, TArgs extends unknown[]>(
     resolve(fn(...args));
   });
 };
+
+export const safelyParseJSON = (json: string): Record<string, any> | null => {
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+};