Remove wasm from pre-cache, but cache first in runtime

.env.development

@@ -17,6 +17,8 @@ VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","a
 # put these in your .env.local, or make sure you don't commit!
 # must be lowercase `true` when turned on
 #
+# whether to enable Service Workers in development
+VITE_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 VITE_APP_DEV_DISABLE_LIVE_RELOAD=

dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx

@@ -133,7 +133,7 @@ function App() {
 }
 ```
 
-Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/main-menu/DefaultItems.tsx) of the default items.
+Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/mainMenu/DefaultItems.tsx) of the default items.
 
 ### MainMenu.Group
 

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/api.mdx

@@ -14,7 +14,7 @@ This API receives the mermaid syntax as the input, and resolves to skeleton Exca
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
 try {
-  const { elements, files } = await parseMermaidToExcalidraw(mermaidSyntax: string, {
+  const { elements, files } = await parseMermaid(mermaidSyntax: string, {
     fontSize: number,
   });
   const excalidrawElements = convertToExcalidrawElements(elements);

dev-docs/docs/codebase/json-schema.mdx

@@ -43,7 +43,7 @@ When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`)
 
   // editor state (canvas config, preferences, ...)
   "appState": {
-    "gridSize": 20,
+    "gridSize": null,
     "viewBackgroundColor": "#ffffff"
   },
 

excalidraw-app/App.tsx

@@ -22,6 +22,7 @@ import { t } from "../packages/excalidraw/i18n";
 import {
   Excalidraw,
   LiveCollaborationTrigger,
+  TTDDialog,
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
@@ -120,12 +121,6 @@ import {
 import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
-import DebugCanvas, {
-  debugRenderer,
-  isVisualDebuggerEnabled,
-  loadSavedDebugState,
-} from "./components/DebugCanvas";
-import { AIComponents } from "./components/AI";
 
 polyfill();
 
@@ -342,8 +337,6 @@ const ExcalidrawWrapper = () => {
       resolvablePromise<ExcalidrawInitialDataState | null>();
   }
 
-  const debugCanvasRef = useRef<HTMLCanvasElement>(null);
-
   useEffect(() => {
     trackEvent("load", "frame", getFrame());
     // Delayed so that the app has a time to load the latest SW
@@ -369,23 +362,6 @@ const ExcalidrawWrapper = () => {
     migrationAdapter: LibraryLocalStorageMigrationAdapter,
   });
 
-  const [, forceRefresh] = useState(false);
-
-  useEffect(() => {
-    if (import.meta.env.DEV) {
-      const debugState = loadSavedDebugState();
-
-      if (debugState.enabled && !window.visualDebug) {
-        window.visualDebug = {
-          data: [],
-        };
-      } else {
-        delete window.visualDebug;
-      }
-      forceRefresh((prev) => !prev);
-    }
-  }, [excalidrawAPI]);
-
   useEffect(() => {
     if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
       return;
@@ -646,11 +622,6 @@ const ExcalidrawWrapper = () => {
         }
       });
     }
-
-    // Render the debug scene if the debug canvas is available
-    if (debugCanvasRef.current && excalidrawAPI) {
-      debugRenderer(debugCanvasRef.current, appState, window.devicePixelRatio);
-    }
   };
 
   const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
@@ -849,7 +820,6 @@ const ExcalidrawWrapper = () => {
           isCollabEnabled={!isCollabDisabled}
           theme={appTheme}
           setTheme={(theme) => setAppTheme(theme)}
-          refresh={() => forceRefresh((prev) => !prev)}
         />
         <AppWelcomeScreen
           onCollabDialogOpen={onCollabDialogOpen}
@@ -875,9 +845,64 @@ const ExcalidrawWrapper = () => {
             </OverwriteConfirmDialog.Action>
           )}
         </OverwriteConfirmDialog>
-        <AppFooter onChange={() => excalidrawAPI?.refresh()} />
-        {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
+        <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 }),
+                },
+              );
 
+              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">
@@ -1107,13 +1132,6 @@ const ExcalidrawWrapper = () => {
             },
           ]}
         />
-        {isVisualDebuggerEnabled() && excalidrawAPI && (
-          <DebugCanvas
-            appState={excalidrawAPI.getAppState()}
-            scale={window.devicePixelRatio}
-            ref={debugCanvasRef}
-          />
-        )}
       </Excalidraw>
     </div>
   );

excalidraw-app/CustomStats.tsx

@@ -9,7 +9,6 @@ import { t } from "../packages/excalidraw/i18n";
 import { copyTextToSystemClipboard } from "../packages/excalidraw/clipboard";
 import type { NonDeletedExcalidrawElement } from "../packages/excalidraw/element/types";
 import type { UIAppState } from "../packages/excalidraw/types";
-import { Stats } from "../packages/excalidraw";
 
 type StorageSizes = { scene: number; total: number };
 
@@ -52,33 +51,39 @@ const CustomStats = (props: Props) => {
   }
 
   return (
-    <Stats.StatsRows order={-1}>
-      <Stats.StatsRow heading>{t("stats.version")}</Stats.StatsRow>
-      <Stats.StatsRow
-        style={{ textAlign: "center", cursor: "pointer" }}
-        onClick={async () => {
-          try {
-            await copyTextToSystemClipboard(getVersion());
-            props.setToast(t("toast.copyToClipboard"));
-          } catch {}
-        }}
-        title={t("stats.versionCopy")}
-      >
-        {timestamp}
-        <br />
-        {hash}
-      </Stats.StatsRow>
-
-      <Stats.StatsRow heading>{t("stats.storage")}</Stats.StatsRow>
-      <Stats.StatsRow columns={2}>
-        <div>{t("stats.scene")}</div>
-        <div>{nFormatter(storageSizes.scene, 1)}</div>
-      </Stats.StatsRow>
-      <Stats.StatsRow columns={2}>
-        <div>{t("stats.total")}</div>
-        <div>{nFormatter(storageSizes.total, 1)}</div>
-      </Stats.StatsRow>
-    </Stats.StatsRows>
+    <>
+      <tr>
+        <th colSpan={2}>{t("stats.storage")}</th>
+      </tr>
+      <tr>
+        <td>{t("stats.scene")}</td>
+        <td>{nFormatter(storageSizes.scene, 1)}</td>
+      </tr>
+      <tr>
+        <td>{t("stats.total")}</td>
+        <td>{nFormatter(storageSizes.total, 1)}</td>
+      </tr>
+      <tr>
+        <th colSpan={2}>{t("stats.version")}</th>
+      </tr>
+      <tr>
+        <td
+          colSpan={2}
+          style={{ textAlign: "center", cursor: "pointer" }}
+          onClick={async () => {
+            try {
+              await copyTextToSystemClipboard(getVersion());
+              props.setToast(t("toast.copyToClipboard"));
+            } catch {}
+          }}
+          title={t("stats.versionCopy")}
+        >
+          {timestamp}
+          <br />
+          {hash}
+        </td>
+      </tr>
+    </>
   );
 };
 

excalidraw-app/app_constants.ts

@@ -40,7 +40,6 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_APP_STATE: "excalidraw-state",
   LOCAL_STORAGE_COLLAB: "excalidraw-collab",
   LOCAL_STORAGE_THEME: "excalidraw-theme",
-  LOCAL_STORAGE_DEBUG: "excalidraw-debug",
   VERSION_DATA_STATE: "version-dataState",
   VERSION_FILES: "version-files",
 

excalidraw-app/collab/Portal.tsx

@@ -116,26 +116,20 @@ class Portal {
       }
     }
 
-    let isChanged = false;
-    const newElements = this.collab.excalidrawAPI
-      .getSceneElementsIncludingDeleted()
-      .map((element) => {
-        if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
-          isChanged = true;
-          // this will signal collaborators to pull image data from server
-          // (using mutation instead of newElementWith otherwise it'd break
-          // in-progress dragging)
-          return newElementWith(element, { status: "saved" });
-        }
-        return element;
-      });
-
-    if (isChanged) {
-      this.collab.excalidrawAPI.updateScene({
-        elements: newElements,
-        storeAction: StoreAction.UPDATE,
-      });
-    }
+    this.collab.excalidrawAPI.updateScene({
+      elements: this.collab.excalidrawAPI
+        .getSceneElementsIncludingDeleted()
+        .map((element) => {
+          if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
+            // this will signal collaborators to pull image data from server
+            // (using mutation instead of newElementWith otherwise it'd break
+            // in-progress dragging)
+            return newElementWith(element, { status: "saved" });
+          }
+          return element;
+        }),
+      storeAction: StoreAction.UPDATE,
+    });
   }, FILE_UPLOAD_TIMEOUT);
 
   broadcastScene = async (

excalidraw-app/collab/RoomDialog.tsx

@@ -0,0 +1,218 @@
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
+import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
+import { trackEvent } from "../../packages/excalidraw/analytics";
+import { getFrame } from "../../packages/excalidraw/utils";
+import { useI18n } from "../../packages/excalidraw/i18n";
+import { KEYS } from "../../packages/excalidraw/keys";
+
+import { Dialog } from "../../packages/excalidraw/components/Dialog";
+import {
+  copyIcon,
+  playerPlayIcon,
+  playerStopFilledIcon,
+  share,
+  shareIOS,
+  shareWindows,
+  tablerCheckIcon,
+} from "../../packages/excalidraw/components/icons";
+import { TextField } from "../../packages/excalidraw/components/TextField";
+import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
+
+import { ReactComponent as CollabImage } from "../../packages/excalidraw/assets/lock.svg";
+import "./RoomDialog.scss";
+
+const getShareIcon = () => {
+  const navigator = window.navigator as any;
+  const isAppleBrowser = /Apple/.test(navigator.vendor);
+  const isWindowsBrowser = navigator.appVersion.indexOf("Win") !== -1;
+
+  if (isAppleBrowser) {
+    return shareIOS;
+  } else if (isWindowsBrowser) {
+    return shareWindows;
+  }
+
+  return share;
+};
+
+export type RoomModalProps = {
+  handleClose: () => void;
+  activeRoomLink: string;
+  username: string;
+  onUsernameChange: (username: string) => void;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
+  setErrorMessage: (message: string) => void;
+};
+
+export const RoomModal = ({
+  activeRoomLink,
+  onRoomCreate,
+  onRoomDestroy,
+  setErrorMessage,
+  username,
+  onUsernameChange,
+  handleClose,
+}: RoomModalProps) => {
+  const { t } = useI18n();
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+  const isShareSupported = "share" in navigator;
+
+  const copyRoomLink = async () => {
+    try {
+      await copyTextToSystemClipboard(activeRoomLink);
+    } catch (e) {
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
+    }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
+
+    ref.current?.select();
+  };
+
+  const shareRoomLink = async () => {
+    try {
+      await navigator.share({
+        title: t("roomDialog.shareTitle"),
+        text: t("roomDialog.shareTitle"),
+        url: activeRoomLink,
+      });
+    } catch (error: any) {
+      // Just ignore.
+    }
+  };
+
+  if (activeRoomLink) {
+    return (
+      <>
+        <h3 className="RoomDialog__active__header">
+          {t("labels.liveCollaboration")}
+        </h3>
+        <TextField
+          value={username}
+          placeholder="Your name"
+          label="Your name"
+          onChange={onUsernameChange}
+          onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
+        />
+        <div className="RoomDialog__active__linkRow">
+          <TextField
+            ref={ref}
+            label="Link"
+            readonly
+            fullWidth
+            value={activeRoomLink}
+          />
+          {isShareSupported && (
+            <FilledButton
+              size="large"
+              variant="icon"
+              label="Share"
+              icon={getShareIcon()}
+              className="RoomDialog__active__share"
+              onClick={shareRoomLink}
+            />
+          )}
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                icon={copyIcon}
+                onClick={copyRoomLink}
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="RoomDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="RoomDialog__active__description">
+          <p>
+            <span
+              role="img"
+              aria-hidden="true"
+              className="RoomDialog__active__description__emoji"
+            >
+              🔒{" "}
+            </span>
+            {t("roomDialog.desc_privacy")}
+          </p>
+          <p>{t("roomDialog.desc_exitSession")}</p>
+        </div>
+
+        <div className="RoomDialog__active__actions">
+          <FilledButton
+            size="large"
+            variant="outlined"
+            color="danger"
+            label={t("roomDialog.button_stopSession")}
+            icon={playerStopFilledIcon}
+            onClick={() => {
+              trackEvent("share", "room closed");
+              onRoomDestroy();
+            }}
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="RoomDialog__inactive__illustration">
+        <CollabImage />
+      </div>
+      <div className="RoomDialog__inactive__header">
+        {t("labels.liveCollaboration")}
+      </div>
+
+      <div className="RoomDialog__inactive__description">
+        <strong>{t("roomDialog.desc_intro")}</strong>
+        {t("roomDialog.desc_privacy")}
+      </div>
+
+      <div className="RoomDialog__inactive__start_session">
+        <FilledButton
+          size="large"
+          label={t("roomDialog.button_startSession")}
+          icon={playerPlayIcon}
+          onClick={() => {
+            trackEvent("share", "room creation", `ui (${getFrame()})`);
+            onRoomCreate();
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+const RoomDialog = (props: RoomModalProps) => {
+  return (
+    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
+      <div className="RoomDialog">
+        <RoomModal {...props} />
+      </div>
+    </Dialog>
+  );
+};
+
+export default RoomDialog;

excalidraw-app/components/AI.tsx

@@ -1,159 +0,0 @@
-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 errorJSON = safelyParseJSON(text);
-
-            if (!errorJSON) {
-              throw new Error(text);
-            }
-
-            if (errorJSON.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(errorJSON.message || text);
-          }
-
-          try {
-            const { html } = await response.json();
-
-            if (!html) {
-              throw new Error("Generation failed (invalid response)");
-            }
-            return {
-              html,
-            };
-          } catch (error: any) {
-            throw new Error("Generation failed (invalid response)");
-          }
-        }}
-      />
-
-      <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/AppFooter.tsx

@@ -3,27 +3,23 @@ import { Footer } from "../../packages/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 
-export const AppFooter = React.memo(
-  ({ onChange }: { onChange: () => void }) => {
-    return (
-      <Footer>
-        <div
-          style={{
-            display: "flex",
-            gap: ".5rem",
-            alignItems: "center",
-          }}
-        >
-          {isVisualDebuggerEnabled() && <DebugFooter onChange={onChange} />}
-          {isExcalidrawPlusSignedUser ? (
-            <ExcalidrawPlusAppLink />
-          ) : (
-            <EncryptedIcon />
-          )}
-        </div>
-      </Footer>
-    );
-  },
-);
+export const AppFooter = React.memo(() => {
+  return (
+    <Footer>
+      <div
+        style={{
+          display: "flex",
+          gap: ".5rem",
+          alignItems: "center",
+        }}
+      >
+        {isExcalidrawPlusSignedUser ? (
+          <ExcalidrawPlusAppLink />
+        ) : (
+          <EncryptedIcon />
+        )}
+      </div>
+    </Footer>
+  );
+});

excalidraw-app/components/AppMainMenu.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import {
   loginIcon,
   ExcalLogo,
-  eyeIcon,
 } from "../../packages/excalidraw/components/icons";
 import type { Theme } from "../../packages/excalidraw/element/types";
 import { MainMenu } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
 import { LanguageList } from "../app-language/LanguageList";
-import { saveDebugState } from "./DebugCanvas";
 
 export const AppMainMenu: React.FC<{
   onCollabDialogOpen: () => any;
@@ -16,7 +14,6 @@ export const AppMainMenu: React.FC<{
   isCollabEnabled: boolean;
   theme: Theme | "system";
   setTheme: (theme: Theme | "system") => void;
-  refresh: () => void;
 }> = React.memo((props) => {
   return (
     <MainMenu>
@@ -53,23 +50,6 @@ export const AppMainMenu: React.FC<{
       >
         {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
       </MainMenu.ItemLink>
-      {import.meta.env.DEV && (
-        <MainMenu.Item
-          icon={eyeIcon}
-          onClick={() => {
-            if (window.visualDebug) {
-              delete window.visualDebug;
-              saveDebugState({ enabled: false });
-            } else {
-              window.visualDebug = { data: [] };
-              saveDebugState({ enabled: true });
-            }
-            props?.refresh();
-          }}
-        >
-          Visual Debug
-        </MainMenu.Item>
-      )}
       <MainMenu.Separator />
       <MainMenu.DefaultItems.ToggleTheme
         allowSystemTheme

excalidraw-app/components/DebugCanvas.tsx

@@ -1,293 +0,0 @@
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-import { type AppState } from "../../packages/excalidraw/types";
-import { throttleRAF } from "../../packages/excalidraw/utils";
-import type { LineSegment } from "../../packages/utils";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "../../packages/excalidraw/renderer/helpers";
-import type { DebugElement } from "../../packages/excalidraw/visualdebug";
-import {
-  ArrowheadArrowIcon,
-  CloseIcon,
-  TrashIcon,
-} from "../../packages/excalidraw/components/icons";
-import { STORAGE_KEYS } from "../app_constants";
-import { isLineSegment } from "../../packages/excalidraw/element/typeChecks";
-
-const renderLine = (
-  context: CanvasRenderingContext2D,
-  zoom: number,
-  segment: LineSegment,
-  color: string,
-) => {
-  context.save();
-  context.strokeStyle = color;
-  context.beginPath();
-  context.moveTo(segment[0][0] * zoom, segment[0][1] * zoom);
-  context.lineTo(segment[1][0] * zoom, segment[1][1] * zoom);
-  context.stroke();
-  context.restore();
-};
-
-const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
-  context.strokeStyle = "#888";
-  context.save();
-  context.beginPath();
-  context.moveTo(-10 * zoom, -10 * zoom);
-  context.lineTo(10 * zoom, 10 * zoom);
-  context.moveTo(10 * zoom, -10 * zoom);
-  context.lineTo(-10 * zoom, 10 * zoom);
-  context.stroke();
-  context.save();
-};
-
-const render = (
-  frame: DebugElement[],
-  context: CanvasRenderingContext2D,
-  appState: AppState,
-) => {
-  frame.forEach((el) => {
-    switch (true) {
-      case isLineSegment(el.data):
-        renderLine(context, appState.zoom.value, el.data, el.color);
-        break;
-    }
-  });
-};
-
-const _debugRenderer = (
-  canvas: HTMLCanvasElement,
-  appState: AppState,
-  scale: number,
-) => {
-  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
-    canvas,
-    scale,
-  );
-
-  const context = bootstrapCanvas({
-    canvas,
-    scale,
-    normalizedWidth,
-    normalizedHeight,
-    viewBackgroundColor: "transparent",
-  });
-
-  // Apply zoom
-  context.save();
-  context.translate(
-    appState.scrollX * appState.zoom.value,
-    appState.scrollY * appState.zoom.value,
-  );
-
-  renderOrigin(context, appState.zoom.value);
-
-  if (
-    window.visualDebug?.currentFrame &&
-    window.visualDebug?.data &&
-    window.visualDebug.data.length > 0
-  ) {
-    // Render only one frame
-    const [idx] = debugFrameData();
-
-    render(window.visualDebug.data[idx], context, appState);
-  } else {
-    // Render all debug frames
-    window.visualDebug?.data.forEach((frame) => {
-      render(frame, context, appState);
-    });
-  }
-
-  if (window.visualDebug) {
-    window.visualDebug!.data =
-      window.visualDebug?.data.map((frame) =>
-        frame.filter((el) => el.permanent),
-      ) ?? [];
-  }
-};
-
-const debugFrameData = (): [number, number] => {
-  const currentFrame = window.visualDebug?.currentFrame ?? 0;
-  const frameCount = window.visualDebug?.data.length ?? 0;
-
-  if (frameCount > 0) {
-    return [currentFrame % frameCount, window.visualDebug?.currentFrame ?? 0];
-  }
-
-  return [0, 0];
-};
-
-export const saveDebugState = (debug: { enabled: boolean }) => {
-  try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-      JSON.stringify(debug),
-    );
-  } catch (error: any) {
-    console.error(error);
-  }
-};
-
-export const debugRenderer = throttleRAF(
-  (canvas: HTMLCanvasElement, appState: AppState, scale: number) => {
-    _debugRenderer(canvas, appState, scale);
-  },
-  { trailing: true },
-);
-
-export const loadSavedDebugState = () => {
-  let debug;
-  try {
-    const savedDebugState = localStorage.getItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-    );
-    if (savedDebugState) {
-      debug = JSON.parse(savedDebugState) as { enabled: boolean };
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  return debug ?? { enabled: false };
-};
-
-export const isVisualDebuggerEnabled = () =>
-  Array.isArray(window.visualDebug?.data);
-
-export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
-  const moveForward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1)
-    ) {
-      window.visualDebug!.currentFrame = 0;
-    }
-    window.visualDebug!.currentFrame += 1;
-    onChange();
-  }, [onChange]);
-  const moveBackward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1) ||
-      window.visualDebug?.currentFrame < 1
-    ) {
-      window.visualDebug!.currentFrame = 1;
-    }
-    window.visualDebug!.currentFrame -= 1;
-    onChange();
-  }, [onChange]);
-  const reset = useCallback(() => {
-    window.visualDebug!.currentFrame = undefined;
-    onChange();
-  }, [onChange]);
-  const trashFrames = useCallback(() => {
-    if (window.visualDebug) {
-      window.visualDebug.currentFrame = undefined;
-      window.visualDebug.data = [];
-    }
-    onChange();
-  }, [onChange]);
-
-  return (
-    <>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={trashFrames}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {TrashIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={moveBackward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon flip />
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={reset}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {CloseIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-backward"
-        aria-label="Move backward"
-        type="button"
-        onClick={moveForward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon />
-        </div>
-      </button>
-    </>
-  );
-};
-
-interface DebugCanvasProps {
-  appState: AppState;
-  scale: number;
-}
-
-const DebugCanvas = forwardRef<HTMLCanvasElement, DebugCanvasProps>(
-  ({ appState, scale }, ref) => {
-    const { width, height } = appState;
-
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>(
-      ref,
-      () => canvasRef.current,
-      [canvasRef],
-    );
-
-    return (
-      <canvas
-        style={{
-          width,
-          height,
-          position: "absolute",
-          zIndex: 2,
-          pointerEvents: "none",
-        }}
-        width={width * scale}
-        height={height * scale}
-        ref={canvasRef}
-      >
-        Debug Canvas
-      </canvas>
-    );
-  },
-);
-
-export default DebugCanvas;

excalidraw-app/share/ShareDialog.scss

@@ -58,8 +58,8 @@
       font-size: 0.75rem;
       line-height: 110%;
 
-      background: var(--color-success);
-      color: var(--color-success-text);
+      background: var(--color-success-lighter);
+      color: var(--color-success);
 
       & > svg {
         width: 0.875rem;

excalidraw-app/share/ShareDialog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
 import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
 import { trackEvent } from "../../packages/excalidraw/analytics";
 import { getFrame } from "../../packages/excalidraw/utils";
@@ -13,6 +14,7 @@ import {
   share,
   shareIOS,
   shareWindows,
+  tablerCheckIcon,
 } from "../../packages/excalidraw/components/icons";
 import { TextField } from "../../packages/excalidraw/components/TextField";
 import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
@@ -22,7 +24,6 @@ import { atom, useAtom, useAtomValue } from "jotai";
 
 import "./ShareDialog.scss";
 import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
-import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";
 
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
@@ -62,11 +63,10 @@ const ActiveRoomDialog = ({
   handleClose: () => void;
 }) => {
   const { t } = useI18n();
-  const [, setJustCopied] = useState(false);
+  const [justCopied, setJustCopied] = useState(false);
   const timerRef = useRef<number>(0);
   const ref = useRef<HTMLInputElement>(null);
   const isShareSupported = "share" in navigator;
-  const { onCopy, copyStatus } = useCopyStatus();
 
   const copyRoomLink = async () => {
     try {
@@ -130,16 +130,26 @@ const ActiveRoomDialog = ({
             onClick={shareRoomLink}
           />
         )}
-        <FilledButton
-          size="large"
-          label={t("buttons.copyLink")}
-          icon={copyIcon}
-          status={copyStatus}
-          onClick={() => {
-            copyRoomLink();
-            onCopy();
-          }}
-        />
+        <Popover.Root open={justCopied}>
+          <Popover.Trigger asChild>
+            <FilledButton
+              size="large"
+              label="Copy link"
+              icon={copyIcon}
+              onClick={copyRoomLink}
+            />
+          </Popover.Trigger>
+          <Popover.Content
+            onOpenAutoFocus={(event) => event.preventDefault()}
+            onCloseAutoFocus={(event) => event.preventDefault()}
+            className="ShareDialog__popover"
+            side="top"
+            align="end"
+            sideOffset={5.5}
+          >
+            {tablerCheckIcon} copied
+          </Popover.Content>
+        </Popover.Root>
       </div>
       <div className="ShareDialog__active__description">
         <p>

packages/excalidraw/CHANGELOG.md

@@ -39,8 +39,6 @@ Please add the latest change on the top under the correct section.
 
 ### Breaking Changes
 
-- Stats container CSS changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout.
-
 - `updateScene` API has changed due to the added `Store` component as part of the multiplayer undo / redo initiative. Specifically, `sceneData` property `commitToHistory: boolean` was replaced with `storeAction: StoreActionType`. Make sure to update all instances of `updateScene` according to the _before / after_ table below. [#7898](https://github.com/excalidraw/excalidraw/pull/7898)
 
 |  | Before `commitToHistory` | After `storeAction` | Notes |

packages/excalidraw/actions/actionCanvas.tsx

@@ -24,7 +24,7 @@ import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-import type { AppState } from "../types";
+import type { AppState, NormalizedZoomValue } from "../types";
 import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
@@ -38,7 +38,6 @@ import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import type { SceneBounds } from "../element/bounds";
 import { setCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { clamp } from "../math";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -105,8 +104,6 @@ export const actionClearCanvas = register({
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
         gridSize: appState.gridSize,
-        gridStep: appState.gridStep,
-        gridModeEnabled: appState.gridModeEnabled,
         stats: appState.stats,
         pasteDialog: appState.pasteDialog,
         activeTool:
@@ -247,7 +244,6 @@ export const actionResetZoom = register({
 const zoomValueToFitBoundsOnViewport = (
   bounds: SceneBounds,
   viewportDimensions: { width: number; height: number },
-  viewportZoomFactor: number = 1, // default to 1 if not provided
 ) => {
   const [x1, y1, x2, y2] = bounds;
   const commonBoundsWidth = x2 - x1;
@@ -255,21 +251,20 @@ const zoomValueToFitBoundsOnViewport = (
   const commonBoundsHeight = y2 - y1;
   const zoomValueForHeight = viewportDimensions.height / commonBoundsHeight;
   const smallestZoomValue = Math.min(zoomValueForWidth, zoomValueForHeight);
-
-  const adjustedZoomValue =
-    smallestZoomValue * clamp(viewportZoomFactor, 0.1, 1);
-
   const zoomAdjustedToSteps =
-    Math.floor(adjustedZoomValue / ZOOM_STEP) * ZOOM_STEP;
-
-  return getNormalizedZoom(Math.min(zoomAdjustedToSteps, 1));
+    Math.floor(smallestZoomValue / ZOOM_STEP) * ZOOM_STEP;
+  const clampedZoomValueToFitElements = Math.min(
+    Math.max(zoomAdjustedToSteps, MIN_ZOOM),
+    1,
+  );
+  return clampedZoomValueToFitElements as NormalizedZoomValue;
 };
 
 export const zoomToFitBounds = ({
   bounds,
   appState,
   fitToViewport = false,
-  viewportZoomFactor = 1,
+  viewportZoomFactor = 0.7,
 }: {
   bounds: SceneBounds;
   appState: Readonly<AppState>;
@@ -294,9 +289,13 @@ export const zoomToFitBounds = ({
       Math.min(
         appState.width / commonBoundsWidth,
         appState.height / commonBoundsHeight,
-      ) * clamp(viewportZoomFactor, 0.1, 1);
+      ) * Math.min(1, Math.max(viewportZoomFactor, 0.1));
 
-    newZoomValue = getNormalizedZoom(newZoomValue);
+    // Apply clamping to newZoomValue to be between 10% and 3000%
+    newZoomValue = Math.min(
+      Math.max(newZoomValue, MIN_ZOOM),
+      MAX_ZOOM,
+    ) as NormalizedZoomValue;
 
     let appStateWidth = appState.width;
 
@@ -315,14 +314,10 @@ export const zoomToFitBounds = ({
     scrollX = (appStateWidth / 2) * (1 / newZoomValue) - centerX;
     scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
   } else {
-    newZoomValue = zoomValueToFitBoundsOnViewport(
-      bounds,
-      {
-        width: appState.width,
-        height: appState.height,
-      },
-      viewportZoomFactor,
-    );
+    newZoomValue = zoomValueToFitBoundsOnViewport(bounds, {
+      width: appState.width,
+      height: appState.height,
+    });
 
     const centerScroll = centerScrollOn({
       scenePoint: { x: centerX, y: centerY },
@@ -413,7 +408,6 @@ export const actionZoomToFitSelection = register({
         userToFollow: null,
       },
       fitToViewport: true,
-      viewportZoomFactor: 0.7,
     });
   },
   // NOTE this action should use shift-2 per figma, alas

packages/excalidraw/actions/actionClipboard.tsx

@@ -10,7 +10,7 @@ import {
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { getTextFromElements, isTextElement } from "../element";
+import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -239,8 +239,16 @@ 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(getTextFromElements(selectedElements));
+      copyTextToSystemClipboard(text);
     } catch (e) {
       throw new Error(t("errors.copyToSystemClipboardFailed"));
     }

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -15,7 +15,7 @@ import {
 import type { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import type { ActionResult } from "./types";
-import { DEFAULT_GRID_SIZE } from "../constants";
+import { GRID_SIZE } from "../constants";
 import {
   bindTextToShapeAfterDuplication,
   getBoundTextElement,
@@ -99,8 +99,8 @@ const duplicateElements = (
       groupIdMap,
       element,
       {
-        x: element.x + DEFAULT_GRID_SIZE / 2,
-        y: element.y + DEFAULT_GRID_SIZE / 2,
+        x: element.x + GRID_SIZE / 2,
+        y: element.y + GRID_SIZE / 2,
       },
     );
     duplicatedElementsMap.set(newElement.id, newElement);

packages/excalidraw/actions/actionFinalize.tsx

@@ -50,6 +50,7 @@ export const actionFinalize = register({
             ...appState,
             cursorButton: "up",
             editingLinearElement: null,
+            selectedLinearElement: null,
           },
           storeAction: StoreAction.CAPTURE,
         };
@@ -178,7 +179,7 @@ export const actionFinalize = register({
         newElement: null,
         selectionElement: null,
         multiElement: null,
-        editingTextElement: null,
+        editingElement: null,
         startBoundElement: null,
         suggestedBindings: [],
         selectedElementIds:

packages/excalidraw/actions/actionHistory.tsx

@@ -21,7 +21,7 @@ const executeHistoryAction = (
   if (
     !appState.multiElement &&
     !appState.resizingElement &&
-    !appState.editingTextElement &&
+    !appState.editingElement &&
     !appState.newElement &&
     !appState.selectedElementsAreBeingDragged &&
     !appState.selectionElement &&

packages/excalidraw/actions/actionProperties.tsx

@@ -133,7 +133,7 @@ export const changeProperty = (
   return elements.map((element) => {
     if (
       selectedElementIds.get(element.id) ||
-      element.id === appState.editingTextElement?.id
+      element.id === appState.editingElement?.id
     ) {
       return callback(element);
     }
@@ -148,13 +148,13 @@ export const getFormValue = function <T extends Primitive>(
   isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
   defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
-  const editingTextElement = appState.editingTextElement;
+  const editingElement = appState.editingElement;
   const nonDeletedElements = getNonDeletedElements(elements);
 
   let ret: T | null = null;
 
-  if (editingTextElement) {
-    ret = getAttribute(editingTextElement);
+  if (editingElement) {
+    ret = getAttribute(editingElement);
   }
 
   if (!ret) {
@@ -1073,20 +1073,19 @@ export const actionChangeFontFamily = register({
               // open, populate the cache from scratch
               cachedElementsRef.current.clear();
 
-              const { editingTextElement } = appState;
+              const { editingElement } = appState;
 
-              // still check type to be safe
-              if (editingTextElement?.type === "text") {
-                // retrieve the latest version from the scene, as `editingTextElement` isn't mutated
-                const latesteditingTextElement = app.scene.getElement(
-                  editingTextElement.id,
+              if (editingElement?.type === "text") {
+                // retrieve the latest version from the scene, as `editingElement` isn't mutated
+                const latestEditingElement = app.scene.getElement(
+                  editingElement.id,
                 );
 
                 // inside the wysiwyg editor
                 cachedElementsRef.current.set(
-                  editingTextElement.id,
+                  editingElement.id,
                   newElementWith(
-                    latesteditingTextElement || editingTextElement,
+                    latestEditingElement || editingElement,
                     {},
                     true,
                   ),

packages/excalidraw/actions/actionToggleGridMode.tsx

@@ -1,5 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { GRID_SIZE } from "../constants";
 import type { AppState } from "../types";
 import { gridIcon } from "../components/icons";
 import { StoreAction } from "../store";
@@ -12,21 +13,21 @@ export const actionToggleGridMode = register({
   viewMode: true,
   trackEvent: {
     category: "canvas",
-    predicate: (appState) => appState.gridModeEnabled,
+    predicate: (appState) => !appState.gridSize,
   },
   perform(elements, appState) {
     return {
       appState: {
         ...appState,
-        gridModeEnabled: !this.checked!(appState),
+        gridSize: this.checked!(appState) ? null : GRID_SIZE,
         objectsSnapModeEnabled: false,
       },
       storeAction: StoreAction.NONE,
     };
   },
-  checked: (appState: AppState) => appState.gridModeEnabled,
+  checked: (appState: AppState) => appState.gridSize !== null,
   predicate: (element, appState, props) => {
-    return props.gridModeEnabled === undefined;
+    return typeof props.gridModeEnabled === "undefined";
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx

@@ -17,7 +17,7 @@ export const actionToggleObjectsSnapMode = register({
       appState: {
         ...appState,
         objectsSnapModeEnabled: !this.checked!(appState),
-        gridModeEnabled: false,
+        gridSize: null,
       },
       storeAction: StoreAction.NONE,
     };

packages/excalidraw/analytics.ts

@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette", "export"]);
+const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette"]);
 
 export const trackEvent = (
   category: string,

packages/excalidraw/appState.ts

@@ -5,11 +5,9 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
-  DEFAULT_GRID_SIZE,
   EXPORT_SCALES,
   STATS_PANELS,
   THEME,
-  DEFAULT_GRID_STEP,
 } from "./constants";
 import type { AppState, NormalizedZoomValue } from "./types";
 
@@ -44,7 +42,7 @@ export const getDefaultAppState = (): Omit<
     cursorButton: "up",
     activeEmbeddable: null,
     newElement: null,
-    editingTextElement: null,
+    editingElement: null,
     editingGroupId: null,
     editingLinearElement: null,
     activeTool: {
@@ -61,9 +59,7 @@ export const getDefaultAppState = (): Omit<
     exportEmbedScene: false,
     exportWithDarkMode: false,
     fileHandle: null,
-    gridSize: DEFAULT_GRID_SIZE,
-    gridStep: DEFAULT_GRID_STEP,
-    gridModeEnabled: false,
+    gridSize: null,
     isBindingEnabled: true,
     defaultSidebarDockedPreference: false,
     isLoading: false,
@@ -165,7 +161,7 @@ const APP_STATE_STORAGE_CONF = (<
   cursorButton: { browser: true, export: false, server: false },
   activeEmbeddable: { browser: false, export: false, server: false },
   newElement: { browser: false, export: false, server: false },
-  editingTextElement: { browser: false, export: false, server: false },
+  editingElement: { browser: false, export: false, server: false },
   editingGroupId: { browser: true, export: false, server: false },
   editingLinearElement: { browser: false, export: false, server: false },
   activeTool: { browser: true, export: false, server: false },
@@ -178,8 +174,6 @@ const APP_STATE_STORAGE_CONF = (<
   exportWithDarkMode: { browser: true, export: false, server: false },
   fileHandle: { browser: false, export: false, server: false },
   gridSize: { browser: true, export: true, server: true },
-  gridStep: { browser: true, export: true, server: true },
-  gridModeEnabled: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
   defaultSidebarDockedPreference: {

packages/excalidraw/components/Actions.tsx

@@ -45,11 +45,11 @@ import {
   frameToolIcon,
   mermaidLogoIcon,
   laserPointerToolIcon,
+  OpenAIIcon,
   MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
-import { CLASSES } from "../constants";
 
 export const canChangeStrokeColor = (
   appState: UIAppState,
@@ -104,9 +104,7 @@ export const SelectedShapeActions = ({
   ) {
     isSingleElementBoundContainer = true;
   }
-  const isEditingTextOrNewElement = Boolean(
-    appState.editingTextElement || appState.newElement,
-  );
+  const isEditing = Boolean(appState.editingElement);
   const device = useDevice();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
@@ -236,7 +234,7 @@ export const SelectedShapeActions = ({
           </div>
         </fieldset>
       )}
-      {!isEditingTextOrNewElement && targetElements.length > 0 && (
+      {!isEditing && targetElements.length > 0 && (
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
@@ -402,7 +400,7 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.mermaidToExcalidraw")}
           </DropdownMenu.Item>
-          {app.props.aiEnabled !== false && app.plugins.diagramToCode && (
+          {app.props.aiEnabled !== false && (
             <>
               <DropdownMenu.Item
                 onSelect={() => app.onMagicframeToolSelect()}
@@ -412,6 +410,20 @@ 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>
@@ -427,7 +439,7 @@ export const ZoomActions = ({
   renderAction: ActionManager["renderAction"];
   zoom: Zoom;
 }) => (
-  <Stack.Col gap={1} className={CLASSES.ZOOM_ACTIONS}>
+  <Stack.Col gap={1} className="zoom-actions">
     <Stack.Row align="center">
       {renderAction("zoomOut")}
       {renderAction("resetZoom")}

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -106,7 +106,7 @@ const ColorPickerPopupContent = ({
   return (
     <PropertiesPopover
       container={container}
-      style={{ maxWidth: "13rem" }}
+      style={{ maxWidth: "208px" }}
       onFocusOutside={(event) => {
         // refocus due to eye dropper
         focusPickerContent();

packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx

@@ -1,17 +0,0 @@
-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/FilledButton.scss

@@ -1,19 +1,5 @@
 @import "../css/variables.module.scss";
 
-@keyframes successStatusAnimation {
-  0% {
-    transform: scale(0.35);
-  }
-
-  50% {
-    transform: scale(1.25);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
 .excalidraw {
   .ExcButton {
     --text-color: transparent;
@@ -30,20 +16,11 @@
 
     .Spinner {
       --spinner-color: var(--color-surface-lowest);
-    }
-
-    .ExcButton__statusIcon {
-      visibility: visible;
       position: absolute;
-
-      width: 1.2rem;
-      height: 1.2rem;
-
-      animation: successStatusAnimation 0.5s cubic-bezier(0.3, 1, 0.6, 1);
+      visibility: visible;
     }
 
-    &.ExcButton--status-loading,
-    &.ExcButton--status-success {
+    &[disabled] {
       pointer-events: none;
 
       .ExcButton__contents {
@@ -51,10 +28,6 @@
       }
     }
 
-    &[disabled] {
-      pointer-events: none;
-    }
-
     &,
     &__contents {
       display: flex;
@@ -146,46 +119,6 @@
       }
     }
 
-    &--color-success {
-      &.ExcButton--variant-filled {
-        --text-color: var(--color-success-text);
-        --back-color: var(--color-success);
-
-        .Spinner {
-          --spinner-color: var(--color-success);
-        }
-
-        &:hover {
-          --back-color: var(--color-success-darker);
-        }
-
-        &:active {
-          --back-color: var(--color-success-darkest);
-        }
-      }
-
-      &.ExcButton--variant-outlined,
-      &.ExcButton--variant-icon {
-        --text-color: var(--color-success-contrast);
-        --border-color: var(--color-success-contrast);
-        --back-color: transparent;
-
-        .Spinner {
-          --spinner-color: var(--color-success-contrast);
-        }
-
-        &:hover {
-          --text-color: var(--color-success-contrast-hover);
-          --border-color: var(--color-success-contrast-hover);
-        }
-
-        &:active {
-          --text-color: var(--color-success-contrast-active);
-          --border-color: var(--color-success-contrast-active);
-        }
-      }
-    }
-
     &--color-muted {
       &.ExcButton--variant-filled {
         --text-color: var(--island-bg-color);

packages/excalidraw/components/FilledButton.tsx

@@ -5,15 +5,9 @@ import "./FilledButton.scss";
 import { AbortError } from "../errors";
 import Spinner from "./Spinner";
 import { isPromiseLike } from "../utils";
-import { tablerCheckIcon } from "./icons";
 
 export type ButtonVariant = "filled" | "outlined" | "icon";
-export type ButtonColor =
-  | "primary"
-  | "danger"
-  | "warning"
-  | "muted"
-  | "success";
+export type ButtonColor = "primary" | "danger" | "warning" | "muted";
 export type ButtonSize = "medium" | "large";
 
 export type FilledButtonProps = {
@@ -21,7 +15,6 @@ export type FilledButtonProps = {
 
   children?: React.ReactNode;
   onClick?: (event: React.MouseEvent) => void;
-  status?: null | "loading" | "success";
 
   variant?: ButtonVariant;
   color?: ButtonColor;
@@ -44,7 +37,6 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
       size = "medium",
       fullWidth,
       className,
-      status,
     },
     ref,
   ) => {
@@ -54,11 +46,8 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
       const ret = onClick?.(event);
 
       if (isPromiseLike(ret)) {
-        // delay loading state to prevent flicker in case of quick response
-        const timer = window.setTimeout(() => {
-          setIsLoading(true);
-        }, 50);
         try {
+          setIsLoading(true);
           await ret;
         } catch (error: any) {
           if (!(error instanceof AbortError)) {
@@ -67,15 +56,11 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
             console.warn(error);
           }
         } finally {
-          clearTimeout(timer);
           setIsLoading(false);
         }
       }
     };
 
-    const _status = isLoading ? "loading" : status;
-    color = _status === "success" ? "success" : color;
-
     return (
       <button
         className={clsx(
@@ -83,7 +68,6 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
           `ExcButton--color-${color}`,
           `ExcButton--variant-${variant}`,
           `ExcButton--size-${size}`,
-          `ExcButton--status-${_status}`,
           { "ExcButton--fullWidth": fullWidth },
           className,
         )}
@@ -91,16 +75,10 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
         type="button"
         aria-label={label}
         ref={ref}
-        disabled={_status === "loading" || _status === "success"}
+        disabled={isLoading}
       >
         <div className="ExcButton__contents">
-          {_status === "loading" ? (
-            <Spinner className="ExcButton__statusIcon" />
-          ) : (
-            _status === "success" && (
-              <div className="ExcButton__statusIcon">{tablerCheckIcon}</div>
-            )
-          )}
+          {isLoading && <Spinner />}
           {icon && (
             <div className="ExcButton__icon" aria-hidden>
               {icon}

packages/excalidraw/components/HintViewer.tsx

@@ -12,7 +12,6 @@ import { isEraserActive } from "../appState";
 
 import "./HintViewer.scss";
 import { isNodeInFlowchart } from "../element/flowchart";
-import { isGridModeEnabled } from "../snapping";
 
 interface HintViewerProps {
   appState: UIAppState;
@@ -87,7 +86,7 @@ const getHints = ({
     return t("hints.text_selected");
   }
 
-  if (appState.editingTextElement) {
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
     return t("hints.text_editing");
   }
 
@@ -95,13 +94,13 @@ const getHints = ({
     if (
       appState.selectionElement &&
       !selectedElements.length &&
-      !appState.editingTextElement &&
+      !appState.editingElement &&
       !appState.editingLinearElement
     ) {
       return t("hints.deepBoxSelect");
     }
 
-    if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
+    if (appState.gridSize && appState.selectedElementsAreBeingDragged) {
       return t("hints.disableSnapping");
     }
 

packages/excalidraw/components/ImageExportDialog.tsx

@@ -35,7 +35,6 @@ import "./ImageExportDialog.scss";
 import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
-import { useCopyStatus } from "../hooks/useCopiedIndicator";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -90,21 +89,6 @@ const ImageExportModal = ({
   const previewRef = useRef<HTMLDivElement>(null);
   const [renderError, setRenderError] = useState<Error | null>(null);
 
-  const { onCopy, copyStatus, resetCopyStatus } = useCopyStatus();
-
-  useEffect(() => {
-    // if user changes setting right after export to clipboard, reset the status
-    // so they don't have to wait for the timeout to click the button again
-    resetCopyStatus();
-  }, [
-    projectName,
-    exportWithBackground,
-    exportDarkMode,
-    exportScale,
-    embedScene,
-    resetCopyStatus,
-  ]);
-
   const { exportedElements, exportingFrame } = prepareElementsForExport(
     elementsSnapshot,
     appStateSnapshot,
@@ -121,7 +105,6 @@ const ImageExportModal = ({
     if (!maxWidth) {
       return;
     }
-
     exportToCanvas({
       elements: exportedElements,
       appState: {
@@ -311,17 +294,11 @@ const ImageExportModal = ({
             <FilledButton
               className="ImageExportModal__settings__buttons__button"
               label={t("imageExportDialog.title.copyPngToClipboard")}
-              status={copyStatus}
-              onClick={async () => {
-                await onExportImage(
-                  EXPORT_IMAGE_TYPES.clipboard,
-                  exportedElements,
-                  {
-                    exportingFrame,
-                  },
-                );
-                onCopy();
-              }}
+              onClick={() =>
+                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
+                  exportingFrame,
+                })
+              }
               icon={copyIcon}
             >
               {t("imageExportDialog.button.copyPngToClipboard")}

packages/excalidraw/components/LayerUI.scss

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

packages/excalidraw/components/LayerUI.tsx

@@ -60,6 +60,7 @@ 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";
@@ -84,6 +85,14 @@ 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<{
@@ -140,6 +149,10 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
+  openAIKey,
+  isOpenAIKeyPersisted,
+  onOpenAIAPIKeyChange,
+  onMagicSettingsConfirm,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -347,7 +360,7 @@ const LayerUI = ({
               )}
             {shouldShowStats && (
               <Stats
-                app={app}
+                scene={app.scene}
                 onClose={() => {
                   actionManager.executeAction(actionToggleStats);
                 }}
@@ -469,6 +482,25 @@ 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

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

@@ -0,0 +1,160 @@
+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/ShareableLinkDialog.scss

@@ -52,8 +52,8 @@
       font-size: 0.75rem;
       line-height: 110%;
 
-      background: var(--color-success);
-      color: var(--color-success-text);
+      background: var(--color-success-lighter);
+      color: var(--color-success);
 
       & > svg {
         width: 0.875rem;

packages/excalidraw/components/ShareableLinkDialog.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
 
 import { copyTextToSystemClipboard } from "../clipboard";
 import { useI18n } from "../i18n";
@@ -6,8 +7,7 @@ import { useI18n } from "../i18n";
 import { Dialog } from "./Dialog";
 import { TextField } from "./TextField";
 import { FilledButton } from "./FilledButton";
-import { useCopyStatus } from "../hooks/useCopiedIndicator";
-import { copyIcon } from "./icons";
+import { copyIcon, tablerCheckIcon } from "./icons";
 
 import "./ShareableLinkDialog.scss";
 
@@ -24,7 +24,7 @@ export const ShareableLinkDialog = ({
   setErrorMessage,
 }: ShareableLinkDialogProps) => {
   const { t } = useI18n();
-  const [, setJustCopied] = useState(false);
+  const [justCopied, setJustCopied] = useState(false);
   const timerRef = useRef<number>(0);
   const ref = useRef<HTMLInputElement>(null);
 
@@ -46,7 +46,7 @@ export const ShareableLinkDialog = ({
 
     ref.current?.select();
   };
-  const { onCopy, copyStatus } = useCopyStatus();
+
   return (
     <Dialog onCloseRequest={onCloseRequest} title={false} size="small">
       <div className="ShareableLinkDialog">
@@ -60,16 +60,26 @@ export const ShareableLinkDialog = ({
             value={link}
             selectOnRender
           />
-          <FilledButton
-            size="large"
-            label={t("buttons.copyLink")}
-            icon={copyIcon}
-            status={copyStatus}
-            onClick={() => {
-              onCopy();
-              copyRoomLink();
-            }}
-          />
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                icon={copyIcon}
+                onClick={copyRoomLink}
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="ShareableLinkDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
         </div>
         <div className="ShareableLinkDialog__description">
           🔒 {t("alerts.uploadedSecurly")}

packages/excalidraw/components/Spinner.tsx

@@ -6,18 +6,16 @@ const Spinner = ({
   size = "1em",
   circleWidth = 8,
   synchronized = false,
-  className = "",
 }: {
   size?: string | number;
   circleWidth?: number;
   synchronized?: boolean;
-  className?: string;
 }) => {
   const mountTime = React.useRef(Date.now());
   const mountDelay = -(mountTime.current % 1600);
 
   return (
-    <div className={`Spinner ${className}`}>
+    <div className="Spinner">
       <svg
         viewBox="0 0 100 100"
         style={{

packages/excalidraw/components/Stats/CanvasGrid.tsx

@@ -1,67 +0,0 @@
-import StatsDragInput from "./DragInput";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
-import { getStepSizedValue } from "./utils";
-import { getNormalizedGridStep } from "../../scene";
-
-interface PositionProps {
-  property: "gridStep";
-  scene: Scene;
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-}
-
-const STEP_SIZE = 5;
-
-const CanvasGrid = ({
-  property,
-  scene,
-  appState,
-  setAppState,
-}: PositionProps) => {
-  return (
-    <StatsDragInput
-      label="Grid step"
-      sensitivity={8}
-      elements={[]}
-      dragInputCallback={({
-        nextValue,
-        instantChange,
-        shouldChangeByStepSize,
-        setInputValue,
-      }) => {
-        setAppState((state) => {
-          let nextGridStep;
-
-          if (nextValue) {
-            nextGridStep = nextValue;
-          } else if (instantChange) {
-            nextGridStep = shouldChangeByStepSize
-              ? getStepSizedValue(
-                  state.gridStep + STEP_SIZE * Math.sign(instantChange),
-                  STEP_SIZE,
-                )
-              : state.gridStep + instantChange;
-          }
-
-          if (!nextGridStep) {
-            setInputValue(state.gridStep);
-            return null;
-          }
-
-          nextGridStep = getNormalizedGridStep(nextGridStep);
-          setInputValue(nextGridStep);
-          return {
-            gridStep: nextGridStep,
-          };
-        });
-      }}
-      scene={scene}
-      value={appState.gridStep}
-      property={property}
-      appState={appState}
-    />
-  );
-};
-
-export default CanvasGrid;

packages/excalidraw/components/Stats/Collapsible.tsx

@@ -31,11 +31,7 @@ const Collapsible = ({
         {label}
         <InlineIcon icon={open ? collapseUpIcon : collapseDownIcon} />
       </div>
-      {open && (
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          {children}
-        </div>
-      )}
+      {open && <>{children}</>}
     </>
   );
 };

packages/excalidraw/components/Stats/Dimension.tsx

@@ -23,6 +23,7 @@ const handleDimensionChange: DragInputCallbackType<
 > = ({
   accumulatedChange,
   originalElements,
+  originalElementsMap,
   shouldKeepAspectRatio,
   shouldChangeByStepSize,
   nextValue,

packages/excalidraw/components/Stats/DragInput.scss

@@ -5,7 +5,7 @@
 
     &:focus-within {
       box-shadow: 0 0 0 1px var(--color-primary-darkest);
-      border-radius: var(--border-radius-md);
+      border-radius: var(--border-radius-lg);
     }
   }
 
@@ -18,18 +18,17 @@
     flex-shrink: 0;
     border: 1px solid var(--default-border-color);
     border-right: 0;
-    padding: 0 0.5rem 0 0.75rem;
-    min-width: 1rem;
+    width: 2rem;
     height: 2rem;
     box-sizing: border-box;
     color: var(--popup-text-color);
 
     :root[dir="ltr"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
     }
 
     :root[dir="rtl"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
+      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
       border-right: 1px solid var(--default-border-color);
       border-left: 0;
     }
@@ -56,11 +55,11 @@
     letter-spacing: 0.4px;
 
     :root[dir="ltr"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
+      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
     }
 
     :root[dir="rtl"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
       border-left: 1px solid var(--default-border-color);
       border-right: 0;
     }

packages/excalidraw/components/Stats/DragInput.tsx

@@ -29,7 +29,6 @@ export type DragInputCallbackType<
   nextValue?: number;
   property: P;
   originalAppState: AppState;
-  setInputValue: (value: number) => void;
 }) => void;
 
 interface StatsDragInputProps<
@@ -46,8 +45,6 @@ interface StatsDragInputProps<
   property: T;
   scene: Scene;
   appState: AppState;
-  /** how many px you need to drag to get 1 unit change */
-  sensitivity?: number;
 }
 
 const StatsDragInput = <
@@ -64,7 +61,6 @@ const StatsDragInput = <
   property,
   scene,
   appState,
-  sensitivity = 1,
 }: StatsDragInputProps<T, E>) => {
   const app = useApp();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -130,49 +126,27 @@ const StatsDragInput = <
         nextValue: rounded,
         property,
         originalAppState: appState,
-        setInputValue: (value) => setInputValue(String(value)),
       });
       app.syncActionResult({ storeAction: StoreAction.CAPTURE });
     }
   };
 
-  const callbacksRef = useRef<
-    Partial<{
-      handleInputValue: typeof handleInputValue;
-      onPointerUp: (event: PointerEvent) => void;
-      onPointerMove: (event: PointerEvent) => void;
-    }>
-  >({});
-  callbacksRef.current.handleInputValue = handleInputValue;
+  const handleInputValueRef = useRef(handleInputValue);
+  handleInputValueRef.current = handleInputValue;
 
   // make sure that clicking on canvas (which umounts the component)
   // updates current input value (blur isn't triggered)
   useEffect(() => {
     const input = inputRef.current;
-    const callbacks = callbacksRef.current;
     return () => {
       const nextValue = input?.value;
       if (nextValue) {
-        callbacks.handleInputValue?.(
+        handleInputValueRef.current(
           nextValue,
           stateRef.current.originalElements,
           stateRef.current.originalAppState,
         );
       }
-
-      // generally not needed, but in case `pointerup` doesn't fire and
-      // we don't remove the listeners that way, we should at least remove
-      // on unmount
-      window.removeEventListener(
-        EVENT.POINTER_MOVE,
-        callbacks.onPointerMove!,
-        false,
-      );
-      window.removeEventListener(
-        EVENT.POINTER_UP,
-        callbacks.onPointerUp!,
-        false,
-      );
     };
   }, [
     // we need to track change of `editable` state as mount/unmount
@@ -198,8 +172,6 @@ const StatsDragInput = <
         ref={labelRef}
         onPointerDown={(event) => {
           if (inputRef.current && editable) {
-            document.body.classList.add("excalidraw-cursor-resize");
-
             let startValue = Number(inputRef.current.value);
             if (isNaN(startValue)) {
               startValue = 0;
@@ -224,43 +196,35 @@ const StatsDragInput = <
 
             const originalAppState: AppState = cloneJSON(appState);
 
-            let accumulatedChange = 0;
-            let stepChange = 0;
+            let accumulatedChange: number | null = null;
+
+            document.body.classList.add("excalidraw-cursor-resize");
 
             const onPointerMove = (event: PointerEvent) => {
+              if (!accumulatedChange) {
+                accumulatedChange = 0;
+              }
+
               if (
                 lastPointer &&
                 originalElementsMap !== null &&
-                originalElements !== null
+                originalElements !== null &&
+                accumulatedChange !== null
               ) {
                 const instantChange = event.clientX - lastPointer.x;
+                accumulatedChange += instantChange;
 
-                if (instantChange !== 0) {
-                  stepChange += instantChange;
-
-                  if (Math.abs(stepChange) >= sensitivity) {
-                    stepChange =
-                      Math.sign(stepChange) *
-                      Math.floor(Math.abs(stepChange) / sensitivity);
-
-                    accumulatedChange += stepChange;
-
-                    dragInputCallback({
-                      accumulatedChange,
-                      instantChange: stepChange,
-                      originalElements,
-                      originalElementsMap,
-                      shouldKeepAspectRatio: shouldKeepAspectRatio!!,
-                      shouldChangeByStepSize: event.shiftKey,
-                      property,
-                      scene,
-                      originalAppState,
-                      setInputValue: (value) => setInputValue(String(value)),
-                    });
-
-                    stepChange = 0;
-                  }
-                }
+                dragInputCallback({
+                  accumulatedChange,
+                  instantChange,
+                  originalElements,
+                  originalElementsMap,
+                  shouldKeepAspectRatio: shouldKeepAspectRatio!!,
+                  shouldChangeByStepSize: event.shiftKey,
+                  property,
+                  scene,
+                  originalAppState,
+                });
               }
 
               lastPointer = {
@@ -269,31 +233,27 @@ const StatsDragInput = <
               };
             };
 
-            const onPointerUp = () => {
-              window.removeEventListener(
-                EVENT.POINTER_MOVE,
-                onPointerMove,
-                false,
-              );
-
-              app.syncActionResult({ storeAction: StoreAction.CAPTURE });
-
-              lastPointer = null;
-              accumulatedChange = 0;
-              stepChange = 0;
-              originalElements = null;
-              originalElementsMap = null;
-
-              document.body.classList.remove("excalidraw-cursor-resize");
-
-              window.removeEventListener(EVENT.POINTER_UP, onPointerUp, false);
-            };
-
-            callbacksRef.current.onPointerMove = onPointerMove;
-            callbacksRef.current.onPointerUp = onPointerUp;
-
             window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
-            window.addEventListener(EVENT.POINTER_UP, onPointerUp, false);
+            window.addEventListener(
+              EVENT.POINTER_UP,
+              () => {
+                window.removeEventListener(
+                  EVENT.POINTER_MOVE,
+                  onPointerMove,
+                  false,
+                );
+
+                app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+
+                lastPointer = null;
+                accumulatedChange = null;
+                originalElements = null;
+                originalElementsMap = null;
+
+                document.body.classList.remove("excalidraw-cursor-resize");
+              },
+              false,
+            );
           }
         }}
         onPointerEnter={() => {

packages/excalidraw/components/Stats/Stats.scss

@@ -1,72 +0,0 @@
-.exc-stats {
-  width: 204px;
-  position: absolute;
-  top: 60px;
-  font-size: 12px;
-  z-index: var(--zIndex-layerUI);
-  pointer-events: var(--ui-pointerEvents);
-
-  :root[dir="rtl"] & {
-    left: 12px;
-    right: initial;
-  }
-
-  h2 {
-    font-size: 1.5em;
-    margin-block-start: 0.83em;
-    margin-block-end: 0.83em;
-    font-weight: bold;
-  }
-  h3 {
-    white-space: nowrap;
-    font-size: 1.17em;
-    margin: 0;
-    font-weight: bold;
-  }
-
-  &__rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3125rem;
-  }
-
-  &__row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    display: grid;
-    gap: 4px;
-
-    div + div {
-      text-align: right;
-    }
-  }
-
-  &__row--heading {
-    text-align: center;
-    font-weight: bold;
-    margin: 0.25rem 0;
-  }
-
-  .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-
-    h2 {
-      margin: 0;
-    }
-  }
-
-  .close {
-    height: 16px;
-    width: 16px;
-    cursor: pointer;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}

packages/excalidraw/components/Stats/index.tsx

@@ -2,16 +2,13 @@ import { useEffect, useMemo, useState, memo } from "react";
 import { getCommonBounds } from "../../element/bounds";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { t } from "../../i18n";
-import type {
-  AppClassProperties,
-  AppState,
-  ExcalidrawProps,
-} from "../../types";
+import type { AppState, ExcalidrawProps } from "../../types";
 import { CloseIcon } from "../icons";
 import { Island } from "../Island";
 import { throttle } from "lodash";
 import Dimension from "./Dimension";
 import Angle from "./Angle";
+
 import FontSize from "./FontSize";
 import MultiDimension from "./MultiDimension";
 import { elementsAreInSameGroup } from "../../groups";
@@ -20,18 +17,14 @@ import MultiFontSize from "./MultiFontSize";
 import Position from "./Position";
 import MultiPosition from "./MultiPosition";
 import Collapsible from "./Collapsible";
+import type Scene from "../../scene/Scene";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
 import { getAtomicUnits } from "./utils";
 import { STATS_PANELS } from "../../constants";
 import { isElbowArrow } from "../../element/typeChecks";
-import CanvasGrid from "./CanvasGrid";
-import clsx from "clsx";
-
-import "./Stats.scss";
-import { isGridModeEnabled } from "../../snapping";
 
 interface StatsProps {
-  app: AppClassProperties;
+  scene: Scene;
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }
@@ -40,12 +33,11 @@ const STATS_TIMEOUT = 50;
 
 export const Stats = (props: StatsProps) => {
   const appState = useExcalidrawAppState();
-  const sceneNonce = props.app.scene.getSceneNonce() || 1;
-  const selectedElements = props.app.scene.getSelectedElements({
+  const sceneNonce = props.scene.getSceneNonce() || 1;
+  const selectedElements = props.scene.getSelectedElements({
     selectedElementIds: appState.selectedElementIds,
     includeBoundTextElement: false,
   });
-  const gridModeEnabled = isGridModeEnabled(props.app);
 
   return (
     <StatsInner
@@ -53,71 +45,23 @@ export const Stats = (props: StatsProps) => {
       appState={appState}
       sceneNonce={sceneNonce}
       selectedElements={selectedElements}
-      gridModeEnabled={gridModeEnabled}
     />
   );
 };
 
-const StatsRow = ({
-  children,
-  columns = 1,
-  heading,
-  style,
-  ...rest
-}: {
-  children: React.ReactNode;
-  columns?: number;
-  heading?: boolean;
-  style?: React.CSSProperties;
-} & React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={clsx("exc-stats__row", { "exc-stats__row--heading": heading })}
-    style={{
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      ...style,
-    }}
-    {...rest}
-  >
-    {children}
-  </div>
-);
-StatsRow.displayName = "StatsRow";
-
-const StatsRows = ({
-  children,
-  order,
-  style,
-  ...rest
-}: {
-  children: React.ReactNode;
-  order?: number;
-  style?: React.CSSProperties;
-} & React.HTMLAttributes<HTMLDivElement>) => (
-  <div className="exc-stats__rows" style={{ order, ...style }} {...rest}>
-    {children}
-  </div>
-);
-StatsRows.displayName = "StatsRows";
-
-Stats.StatsRow = StatsRow;
-Stats.StatsRows = StatsRows;
-
 export const StatsInner = memo(
   ({
-    app,
+    scene,
     onClose,
     renderCustomStats,
     selectedElements,
     appState,
     sceneNonce,
-    gridModeEnabled,
   }: StatsProps & {
     sceneNonce: number;
     selectedElements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;
-    gridModeEnabled: boolean;
   }) => {
-    const scene = app.scene;
     const elements = scene.getNonDeletedElements();
     const elementsMap = scene.getNonDeletedElementsMap();
     const setAppState = useExcalidrawSetAppState();
@@ -162,7 +106,7 @@ export const StatsInner = memo(
     }, [selectedElements, appState]);
 
     return (
-      <div className="exc-stats">
+      <div className="Stats">
         <Island padding={3}>
           <div className="title">
             <h2>{t("stats.title")}</h2>
@@ -177,6 +121,7 @@ export const StatsInner = memo(
             openTrigger={() =>
               setAppState((state) => {
                 return {
+                  ...state,
                   stats: {
                     open: true,
                     panels: state.stats.panels ^ STATS_PANELS.generalStats,
@@ -185,36 +130,26 @@ export const StatsInner = memo(
               })
             }
           >
-            <StatsRows>
-              <StatsRow heading>{t("stats.scene")}</StatsRow>
-              <StatsRow columns={2}>
-                <div>{t("stats.shapes")}</div>
-                <div>{elements.length}</div>
-              </StatsRow>
-              <StatsRow columns={2}>
-                <div>{t("stats.width")}</div>
-                <div>{sceneDimension.width}</div>
-              </StatsRow>
-              <StatsRow columns={2}>
-                <div>{t("stats.height")}</div>
-                <div>{sceneDimension.height}</div>
-              </StatsRow>
-              {gridModeEnabled && (
-                <>
-                  <StatsRow heading>Canvas</StatsRow>
-                  <StatsRow>
-                    <CanvasGrid
-                      property="gridStep"
-                      scene={scene}
-                      appState={appState}
-                      setAppState={setAppState}
-                    />
-                  </StatsRow>
-                </>
-              )}
-            </StatsRows>
-
-            {renderCustomStats?.(elements, appState)}
+            <table>
+              <tbody>
+                <tr>
+                  <th colSpan={2}>{t("stats.scene")}</th>
+                </tr>
+                <tr>
+                  <td>{t("stats.elements")}</td>
+                  <td>{elements.length}</td>
+                </tr>
+                <tr>
+                  <td>{t("stats.width")}</td>
+                  <td>{sceneDimension.width}</td>
+                </tr>
+                <tr>
+                  <td>{t("stats.height")}</td>
+                  <td>{sceneDimension.height}</td>
+                </tr>
+                {renderCustomStats?.(elements, appState)}
+              </tbody>
+            </table>
           </Collapsible>
 
           {selectedElements.length > 0 && (
@@ -232,6 +167,7 @@ export const StatsInner = memo(
                 openTrigger={() =>
                   setAppState((state) => {
                     return {
+                      ...state,
                       stats: {
                         open: true,
                         panels:
@@ -241,139 +177,117 @@ export const StatsInner = memo(
                   })
                 }
               >
-                <StatsRows>
-                  {singleElement && (
-                    <>
-                      <StatsRow heading data-testid="stats-element-type">
-                        {t(`element.${singleElement.type}`)}
-                      </StatsRow>
+                {singleElement && (
+                  <div className="sectionContent">
+                    <div className="elementType">
+                      {t(`element.${singleElement.type}`)}
+                    </div>
 
-                      <StatsRow>
-                        <Position
-                          element={singleElement}
-                          property="x"
-                          elementsMap={elementsMap}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <Position
-                          element={singleElement}
-                          property="y"
-                          elementsMap={elementsMap}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <Dimension
-                          property="width"
-                          element={singleElement}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <Dimension
-                          property="height"
-                          element={singleElement}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
+                    <div className="statsItem">
+                      <Position
+                        element={singleElement}
+                        property="x"
+                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <Position
+                        element={singleElement}
+                        property="y"
+                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <Dimension
+                        property="width"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <Dimension
+                        property="height"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
                       {!isElbowArrow(singleElement) && (
-                        <StatsRow>
-                          <Angle
-                            property="angle"
-                            element={singleElement}
-                            scene={scene}
-                            appState={appState}
-                          />
-                        </StatsRow>
-                      )}
-                      <StatsRow>
-                        <FontSize
-                          property="fontSize"
+                        <Angle
+                          property="angle"
                           element={singleElement}
                           scene={scene}
                           appState={appState}
                         />
-                      </StatsRow>
-                    </>
-                  )}
-
-                  {multipleElements && (
-                    <>
-                      {elementsAreInSameGroup(multipleElements) && (
-                        <StatsRow heading>{t("element.group")}</StatsRow>
                       )}
+                      <FontSize
+                        property="fontSize"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
+                    </div>
+                  </div>
+                )}
 
-                      <StatsRow columns={2} style={{ margin: "0.3125rem 0" }}>
-                        <div>{t("stats.shapes")}</div>
-                        <div>{selectedElements.length}</div>
-                      </StatsRow>
+                {multipleElements && (
+                  <div className="sectionContent">
+                    {elementsAreInSameGroup(multipleElements) && (
+                      <div className="elementType">{t("element.group")}</div>
+                    )}
 
-                      <StatsRow>
-                        <MultiPosition
-                          property="x"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiPosition
-                          property="y"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiDimension
-                          property="width"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiDimension
-                          property="height"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiAngle
-                          property="angle"
-                          elements={multipleElements}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiFontSize
-                          property="fontSize"
-                          elements={multipleElements}
-                          scene={scene}
-                          appState={appState}
-                          elementsMap={elementsMap}
-                        />
-                      </StatsRow>
-                    </>
-                  )}
-                </StatsRows>
+                    <div className="elementsCount">
+                      <div>{t("stats.elements")}</div>
+                      <div>{selectedElements.length}</div>
+                    </div>
+
+                    <div className="statsItem">
+                      <MultiPosition
+                        property="x"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiPosition
+                        property="y"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiDimension
+                        property="width"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiDimension
+                        property="height"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiAngle
+                        property="angle"
+                        elements={multipleElements}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiFontSize
+                        property="fontSize"
+                        elements={multipleElements}
+                        scene={scene}
+                        appState={appState}
+                        elementsMap={elementsMap}
+                      />
+                    </div>
+                  </div>
+                )}
               </Collapsible>
             </div>
           )}
@@ -385,9 +299,7 @@ export const StatsInner = memo(
     return (
       prev.sceneNonce === next.sceneNonce &&
       prev.selectedElements === next.selectedElements &&
-      prev.appState.stats.panels === next.appState.stats.panels &&
-      prev.gridModeEnabled === next.gridModeEnabled &&
-      prev.appState.gridStep === next.appState.gridStep
+      prev.appState.stats.panels === next.appState.stats.panels
     );
   },
 );

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

@@ -32,6 +32,21 @@ const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 let stats: HTMLElement | null = null;
 let elementStats: HTMLElement | null | undefined = null;
 
+const getStatsProperty = (label: string) => {
+  const elementStats = UI.queryStats()?.querySelector("#elementStats");
+
+  if (elementStats) {
+    const properties = elementStats?.querySelector(".statsItem");
+    return (
+      properties?.querySelector?.(
+        `.drag-input-container[data-testid="${label}"]`,
+      ) || null
+    );
+  }
+
+  return null;
+};
+
 const testInputProperty = (
   element: ExcalidrawElement,
   property: "x" | "y" | "width" | "height" | "angle" | "fontSize",
@@ -39,7 +54,7 @@ const testInputProperty = (
   initialValue: number,
   nextValue: number,
 ) => {
-  const input = UI.queryStatsProperty(label)?.querySelector(
+  const input = getStatsProperty(label)?.querySelector(
     ".drag-input",
   ) as HTMLInputElement;
   expect(input).toBeDefined();
@@ -121,7 +136,7 @@ describe("binding with linear elements", () => {
 
   it("should remain bound to linear element on small position change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = UI.queryStatsProperty("X")?.querySelector(
+    const inputX = getStatsProperty("X")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -133,7 +148,7 @@ describe("binding with linear elements", () => {
 
   it("should remain bound to linear element on small angle change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -144,7 +159,7 @@ describe("binding with linear elements", () => {
 
   it("should unbind linear element on large position change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = UI.queryStatsProperty("X")?.querySelector(
+    const inputX = getStatsProperty("X")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -156,7 +171,7 @@ describe("binding with linear elements", () => {
 
   it("should remain bound to linear element on small angle change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -210,14 +225,18 @@ describe("stats for a generic element", () => {
     expect(title?.lastChild?.nodeValue)?.toBe(t("stats.elementProperties"));
 
     // element type
-    const elementType = queryByTestId(elementStats!, "stats-element-type");
+    const elementType = elementStats?.querySelector(".elementType");
     expect(elementType).toBeDefined();
     expect(elementType?.lastChild?.nodeValue).toBe(t("element.rectangle"));
 
     // properties
+    const properties = elementStats?.querySelector(".statsItem");
+    expect(properties?.childNodes).toBeDefined();
     ["X", "Y", "W", "H", "A"].forEach((label) => () => {
       expect(
-        stats!.querySelector?.(`.drag-input-container[data-testid="${label}"]`),
+        properties?.querySelector?.(
+          `.drag-input-container[data-testid="${label}"]`,
+        ),
       ).toBeDefined();
     });
   });
@@ -238,7 +257,7 @@ describe("stats for a generic element", () => {
     const rectangle = h.elements[0];
     const rectangleId = rectangle.id;
 
-    const input = UI.queryStatsProperty("W")?.querySelector(
+    const input = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(input).toBeDefined();
@@ -268,11 +287,11 @@ describe("stats for a generic element", () => {
       rectangle.angle,
     );
 
-    const xInput = UI.queryStatsProperty("X")?.querySelector(
+    const xInput = getStatsProperty("X")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
-    const yInput = UI.queryStatsProperty("Y")?.querySelector(
+    const yInput = getStatsProperty("Y")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -398,7 +417,7 @@ describe("stats for a non-generic element", () => {
     elementStats = stats?.querySelector("#elementStats");
 
     // can change font size
-    const input = UI.queryStatsProperty("F")?.querySelector(
+    const input = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(input).toBeDefined();
@@ -407,9 +426,9 @@ describe("stats for a non-generic element", () => {
     expect(text.fontSize).toBe(36);
 
     // cannot change width or height
-    const width = UI.queryStatsProperty("W")?.querySelector(".drag-input");
+    const width = getStatsProperty("W")?.querySelector(".drag-input");
     expect(width).toBeUndefined();
-    const height = UI.queryStatsProperty("H")?.querySelector(".drag-input");
+    const height = getStatsProperty("H")?.querySelector(".drag-input");
     expect(height).toBeUndefined();
 
     // min font size is 4
@@ -437,7 +456,7 @@ describe("stats for a non-generic element", () => {
     expect(elementStats).toBeDefined();
 
     // cannot change angle
-    const angle = UI.queryStatsProperty("A")?.querySelector(".drag-input");
+    const angle = getStatsProperty("A")?.querySelector(".drag-input");
     expect(angle).toBeUndefined();
 
     // can change width or height
@@ -487,7 +506,7 @@ describe("stats for a non-generic element", () => {
     API.setElements([container, text]);
 
     API.setSelectedElements([container]);
-    const fontSize = UI.queryStatsProperty("F")?.querySelector(
+    const fontSize = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(fontSize).toBeDefined();
@@ -551,15 +570,15 @@ describe("stats for multiple elements", () => {
 
     elementStats = stats?.querySelector("#elementStats");
 
-    const width = UI.queryStatsProperty("W")?.querySelector(
+    const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(width?.value).toBe("Mixed");
-    const height = UI.queryStatsProperty("H")?.querySelector(
+    const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(height?.value).toBe("Mixed");
-    const angle = UI.queryStatsProperty("A")?.querySelector(
+    const angle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(angle.value).toBe("0");
@@ -610,25 +629,25 @@ describe("stats for multiple elements", () => {
 
     elementStats = stats?.querySelector("#elementStats");
 
-    const width = UI.queryStatsProperty("W")?.querySelector(
+    const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(width).toBeDefined();
     expect(width.value).toBe("Mixed");
 
-    const height = UI.queryStatsProperty("H")?.querySelector(
+    const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(height).toBeDefined();
     expect(height.value).toBe("Mixed");
 
-    const angle = UI.queryStatsProperty("A")?.querySelector(
+    const angle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(angle).toBeDefined();
     expect(angle.value).toBe("0");
 
-    const fontSize = UI.queryStatsProperty("F")?.querySelector(
+    const fontSize = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(fontSize).toBeDefined();
@@ -673,7 +692,7 @@ describe("stats for multiple elements", () => {
 
     elementStats = stats?.querySelector("#elementStats");
 
-    const x = UI.queryStatsProperty("X")?.querySelector(
+    const x = getStatsProperty("X")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -686,7 +705,7 @@ describe("stats for multiple elements", () => {
     expect(h.elements[1].x).toBe(400);
     expect(x.value).toBe("300");
 
-    const y = UI.queryStatsProperty("Y")?.querySelector(
+    const y = getStatsProperty("Y")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
@@ -699,13 +718,13 @@ describe("stats for multiple elements", () => {
     expect(h.elements[1].y).toBe(300);
     expect(y.value).toBe("200");
 
-    const width = UI.queryStatsProperty("W")?.querySelector(
+    const width = getStatsProperty("W")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(width).toBeDefined();
     expect(Number(width.value)).toBe(200);
 
-    const height = UI.queryStatsProperty("H")?.querySelector(
+    const height = getStatsProperty("H")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(height).toBeDefined();

packages/excalidraw/components/Stats/utils.ts

@@ -41,8 +41,7 @@ export type StatsInputProperty =
   | "width"
   | "height"
   | "angle"
-  | "fontSize"
-  | "gridStep";
+  | "fontSize";
 
 export const SMALLEST_DELTA = 0.01;
 

packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx

@@ -7,7 +7,10 @@ import { isMemberOf } from "../../utils";
 const TTDDialogTabs = (
   props: {
     children: ReactNode;
-  } & { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" },
+  } & (
+    | { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" }
+    | { dialog: "settings"; tab: "text-to-diagram" | "diagram-to-code" }
+  ),
 ) => {
   const setAppState = useExcalidrawSetAppState();
 
@@ -36,6 +39,13 @@ 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/components/canvases/InteractiveCanvas.tsx

@@ -202,7 +202,7 @@ const getRelevantAppStateProps = (
   activeEmbeddable: appState.activeEmbeddable,
   snapLines: appState.snapLines,
   zenModeEnabled: appState.zenModeEnabled,
-  editingTextElement: appState.editingTextElement,
+  editingElement: appState.editingElement,
 });
 
 const areEqual = (

packages/excalidraw/components/canvases/NewElementCanvas.tsx

@@ -1,56 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { NonDeletedSceneElementsMap } from "../../element/types";
-import type { AppState } from "../../types";
-import type {
-  RenderableElementsMap,
-  StaticCanvasRenderConfig,
-} from "../../scene/types";
-import type { RoughCanvas } from "roughjs/bin/canvas";
-import { renderNewElementScene } from "../../renderer/renderNewElementScene";
-import { isRenderThrottlingEnabled } from "../../reactUtils";
-
-interface NewElementCanvasProps {
-  appState: AppState;
-  elementsMap: RenderableElementsMap;
-  allElementsMap: NonDeletedSceneElementsMap;
-  scale: number;
-  rc: RoughCanvas;
-  renderConfig: StaticCanvasRenderConfig;
-}
-
-const NewElementCanvas = (props: NewElementCanvasProps) => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  useEffect(() => {
-    if (!canvasRef.current) {
-      return;
-    }
-    renderNewElementScene(
-      {
-        canvas: canvasRef.current,
-        scale: props.scale,
-        newElement: props.appState.newElement,
-        elementsMap: props.elementsMap,
-        allElementsMap: props.allElementsMap,
-        rc: props.rc,
-        renderConfig: props.renderConfig,
-        appState: props.appState,
-      },
-      isRenderThrottlingEnabled(),
-    );
-  });
-
-  return (
-    <canvas
-      className="excalidraw__canvas"
-      style={{
-        width: props.appState.width,
-        height: props.appState.height,
-      }}
-      width={props.appState.width * props.scale}
-      height={props.appState.height * props.scale}
-      ref={canvasRef}
-    />
-  );
-};
-
-export default NewElementCanvas;

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -101,7 +101,6 @@ const getRelevantAppStateProps = (
   exportScale: appState.exportScale,
   selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
   gridSize: appState.gridSize,
-  gridStep: appState.gridStep,
   frameRendering: appState.frameRendering,
   selectedElementIds: appState.selectedElementIds,
   frameToHighlight: appState.frameToHighlight,

packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -13,7 +13,6 @@ const DropdownMenuItemLink = ({
   onSelect,
   className = "",
   selected,
-  rel = "noreferrer",
   ...rest
 }: {
   href: string;
@@ -23,7 +22,6 @@ const DropdownMenuItemLink = ({
   className?: string;
   selected?: boolean;
   onSelect?: (event: Event) => void;
-  rel?: string;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 

packages/excalidraw/constants.ts

@@ -112,7 +112,6 @@ export const ENV = {
 
 export const CLASSES = {
   SHAPE_ACTIONS_MENU: "App-menu__left",
-  ZOOM_ACTIONS: "zoom-actions",
 };
 
 /**
@@ -180,8 +179,7 @@ export const COLOR_VOICE_CALL = "#a2f1a6";
 
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
-export const DEFAULT_GRID_SIZE = 20;
-export const DEFAULT_GRID_STEP = 5;
+export const GRID_SIZE = 20; // TODO make it configurable?
 
 export const IMAGE_MIME_TYPES = {
   svg: "image/svg+xml",
@@ -236,7 +234,7 @@ export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
 export const MIN_ZOOM = 0.1;
-export const MAX_ZOOM = 30;
+export const MAX_ZOOM = 30.0;
 export const HYPERLINK_TOOLTIP_DELAY = 300;
 
 // Report a user inactive after IDLE_THRESHOLD milliseconds

packages/excalidraw/css/styles.scss

@@ -387,7 +387,7 @@ body.excalidraw-cursor-resize * {
   .App-menu__left {
     overflow-y: auto;
     padding: 0.75rem;
-    width: 12.5rem;
+    width: 200px;
     box-sizing: border-box;
     position: absolute;
   }

packages/excalidraw/css/theme.scss

@@ -129,14 +129,8 @@
   --color-muted-background-darker: var(--color-gray-100);
 
   --color-promo: var(--color-primary);
-
-  --color-success: #cafccc;
-  --color-success-darker: #bafabc;
-  --color-success-darkest: #a5eba8;
-  --color-success-text: #268029;
-  --color-success-contrast: #65bb6a;
-  --color-success-contrast-hover: #6bcf70;
-  --color-success-contrast-active: #6edf74;
+  --color-success: #268029;
+  --color-success-lighter: #cafccc;
 
   --color-logo-icon: var(--color-primary);
   --color-logo-text: #190064;

packages/excalidraw/data/magic.ts

@@ -0,0 +1,105 @@
+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/data/reconcile.ts

@@ -24,7 +24,7 @@ const shouldDiscardRemoteElement = (
   if (
     local &&
     // local element is being edited
-    (local.id === localAppState.editingTextElement?.id ||
+    (local.id === localAppState.editingElement?.id ||
       local.id === localAppState.resizingElement?.id ||
       local.id === localAppState.newElement?.id || // TODO: Is this still valid? As newElement is selection element, which is never part of the elements array
       // local element is newer

packages/excalidraw/data/restore.ts

@@ -10,7 +10,12 @@ import type {
   PointBinding,
   StrokeRoundness,
 } from "../element/types";
-import type { AppState, BinaryFiles, LibraryItem } from "../types";
+import type {
+  AppState,
+  BinaryFiles,
+  LibraryItem,
+  NormalizedZoomValue,
+} from "../types";
 import type { ImportedDataState, LegacyAppState } from "./types";
 import {
   getNonDeletedElements,
@@ -34,17 +39,11 @@ import {
   ROUNDNESS,
   DEFAULT_SIDEBAR,
   DEFAULT_ELEMENT_PROPS,
-  DEFAULT_GRID_SIZE,
-  DEFAULT_GRID_STEP,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import {
-  getUpdatedTimestamp,
-  isFiniteNumber,
-  updateActiveTool,
-} from "../utils";
+import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import type { MarkOptional, Mutable } from "../utility-types";
 import { detectLineHeight, getContainerElement } from "../element/textElement";
@@ -53,11 +52,6 @@ import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
 import { getLineHeight } from "../fonts";
 import { normalizeFixedPoint } from "../element/binding";
-import {
-  getNormalizedGridSize,
-  getNormalizedGridStep,
-  getNormalizedZoom,
-} from "../scene";
 
 type RestoredAppState = Omit<
   AppState,
@@ -620,24 +614,19 @@ export const restoreAppState = (
       locked: nextAppState.activeTool.locked ?? false,
     },
     // Migrates from previous version where appState.zoom was a number
-    zoom: {
-      value: getNormalizedZoom(
-        isFiniteNumber(appState.zoom)
-          ? appState.zoom
-          : appState.zoom?.value ?? defaultAppState.zoom.value,
-      ),
-    },
+    zoom:
+      typeof appState.zoom === "number"
+        ? {
+            value: appState.zoom as NormalizedZoomValue,
+          }
+        : appState.zoom?.value
+        ? appState.zoom
+        : defaultAppState.zoom,
     openSidebar:
       // string (legacy)
       typeof (appState.openSidebar as any as string) === "string"
         ? { name: DEFAULT_SIDEBAR.name }
         : nextAppState.openSidebar,
-    gridSize: getNormalizedGridSize(
-      isFiniteNumber(appState.gridSize) ? appState.gridSize : DEFAULT_GRID_SIZE,
-    ),
-    gridStep: getNormalizedGridStep(
-      isFiniteNumber(appState.gridStep) ? appState.gridStep : DEFAULT_GRID_STEP,
-    ),
   };
 };
 

packages/excalidraw/element/binding.ts

@@ -41,7 +41,6 @@ import {
   isElbowArrow,
   isFrameLikeElement,
   isLinearElement,
-  isRectangularElement,
   isTextElement,
 } from "./typeChecks";
 import type { ElementUpdate } from "./mutateElement";
@@ -72,7 +71,6 @@ import {
   vectorToHeading,
   type Heading,
 } from "./heading";
-import { segmentIntersectRectangleElement } from "../../utils/geometry/geometry";
 
 export type SuggestedBinding =
   | NonDeleted<ExcalidrawBindableElement>
@@ -753,8 +751,7 @@ export const bindPointToSnapToElementOutline = (
   const aabb = bindableElement && aabbForElement(bindableElement);
 
   if (bindableElement && aabb) {
-    // TODO: Dirty hacks until tangents are properly calculated
-    const heading = headingForPointFromElement(bindableElement, aabb, point);
+    // TODO: Dirty hack until tangents are properly calculated
     const intersections = [
       ...intersectElementWithLine(
         bindableElement,
@@ -762,6 +759,11 @@ export const bindPointToSnapToElementOutline = (
         [point[0], point[1] + 2 * bindableElement.height],
         FIXED_BINDING_DISTANCE,
         elementsMap,
+      ).map((i) =>
+        distanceToBindableElement(bindableElement, i, elementsMap) >=
+        bindableElement.height / 2
+          ? ([point[0], -1 * i[1]] as Point)
+          : ([point[0], i[1]] as Point),
       ),
       ...intersectElementWithLine(
         bindableElement,
@@ -769,15 +771,19 @@ export const bindPointToSnapToElementOutline = (
         [point[0] + 2 * bindableElement.width, point[1]],
         FIXED_BINDING_DISTANCE,
         elementsMap,
+      ).map((i) =>
+        distanceToBindableElement(bindableElement, i, elementsMap) >=
+        bindableElement.width / 2
+          ? ([-1 * i[0], point[1]] as Point)
+          : ([i[0], point[1]] as Point),
       ),
     ];
 
+    const heading = headingForPointFromElement(bindableElement, aabb, point);
     const isVertical =
       compareHeading(heading, HEADING_LEFT) ||
       compareHeading(heading, HEADING_RIGHT);
-    const dist = Math.abs(
-      distanceToBindableElement(bindableElement, point, elementsMap),
-    );
+    const dist = distanceToBindableElement(bindableElement, point, elementsMap);
     const isInner = isVertical
       ? dist < bindableElement.width * -0.1
       : dist < bindableElement.height * -0.1;
@@ -1604,10 +1610,6 @@ const intersectElementWithLine = (
   gap: number = 0,
   elementsMap: ElementsMap,
 ): Point[] => {
-  if (isRectangularElement(element)) {
-    return segmentIntersectRectangleElement(element, [a, b], gap);
-  }
-
   const relateToCenter = relativizationToElementCenter(element, elementsMap);
   const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
   const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));

packages/excalidraw/element/bounds.ts

@@ -738,7 +738,6 @@ export const getElementBounds = (
 
 export const getCommonBounds = (
   elements: readonly ExcalidrawElement[],
-  elementsMap?: ElementsMap,
 ): Bounds => {
   if (!elements.length) {
     return [0, 0, 0, 0];
@@ -749,10 +748,10 @@ export const getCommonBounds = (
   let minY = Infinity;
   let maxY = -Infinity;
 
-  const _elementsMap = elementsMap || arrayToMap(elements);
+  const elementsMap = arrayToMap(elements);
 
   elements.forEach((element) => {
-    const [x1, y1, x2, y2] = getElementBounds(element, _elementsMap);
+    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     minX = Math.min(minX, x1);
     minY = Math.min(minY, y1);
     maxX = Math.max(maxX, x2);

packages/excalidraw/element/dragElements.ts

@@ -4,12 +4,7 @@ import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import type { NonDeletedExcalidrawElement } from "./types";
-import type {
-  AppState,
-  NormalizedZoomValue,
-  NullableGridSize,
-  PointerDownState,
-} from "../types";
+import type { AppState, NormalizedZoomValue, PointerDownState } from "../types";
 import { getBoundTextElement, getMinTextElementWidth } from "./textElement";
 import { getGridPoint } from "../math";
 import type Scene from "../scene/Scene";
@@ -31,7 +26,7 @@ export const dragSelectedElements = (
     x: number;
     y: number;
   },
-  gridSize: NullableGridSize,
+  gridSize: AppState["gridSize"],
 ) => {
   if (
     _selectedElements.length === 1 &&
@@ -106,7 +101,7 @@ const calculateOffset = (
   commonBounds: Bounds,
   dragOffset: { x: number; y: number },
   snapOffset: { x: number; y: number },
-  gridSize: NullableGridSize,
+  gridSize: AppState["gridSize"],
 ): { x: number; y: number } => {
   const [x, y] = commonBounds;
   let nextX = x + dragOffset.x + snapOffset.x;
@@ -159,42 +154,26 @@ export const getDragOffsetXY = (
   return [x - x1, y - y1];
 };
 
-export const dragNewElement = ({
-  newElement,
-  elementType,
-  originX,
-  originY,
-  x,
-  y,
-  width,
-  height,
-  shouldMaintainAspectRatio,
-  shouldResizeFromCenter,
-  zoom,
-  widthAspectRatio = null,
-  originOffset = null,
-  informMutation = true,
-}: {
-  newElement: NonDeletedExcalidrawElement;
-  elementType: AppState["activeTool"]["type"];
-  originX: number;
-  originY: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  shouldMaintainAspectRatio: boolean;
-  shouldResizeFromCenter: boolean;
-  zoom: NormalizedZoomValue;
+export const dragNewElement = (
+  newElement: NonDeletedExcalidrawElement,
+  elementType: AppState["activeTool"]["type"],
+  originX: number,
+  originY: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  shouldMaintainAspectRatio: boolean,
+  shouldResizeFromCenter: boolean,
+  zoom: NormalizedZoomValue,
   /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
       true */
-  widthAspectRatio?: number | null;
-  originOffset?: {
+  widthAspectRatio?: number | null,
+  originOffset: {
     x: number;
     y: number;
-  } | null;
-  informMutation?: boolean;
-}) => {
+  } | null = null,
+) => {
   if (shouldMaintainAspectRatio && newElement.type !== "selection") {
     if (widthAspectRatio) {
       height = width / widthAspectRatio;
@@ -258,16 +237,12 @@ export const dragNewElement = ({
   }
 
   if (width !== 0 && height !== 0) {
-    mutateElement(
-      newElement,
-      {
-        x: newX + (originOffset?.x ?? 0),
-        y: newY + (originOffset?.y ?? 0),
-        width,
-        height,
-        ...textAutoResize,
-      },
-      informMutation,
-    );
+    mutateElement(newElement, {
+      x: newX + (originOffset?.x ?? 0),
+      y: newY + (originOffset?.y ?? 0),
+      width,
+      height,
+      ...textAutoResize,
+    });
   }
 };

packages/excalidraw/element/flowchart.test.tsx

@@ -36,7 +36,7 @@ describe("flow chart creation", () => {
       height: 100,
     });
 
-    API.setElements([rectangle]);
+    h.elements = [rectangle];
     API.setSelectedElements([rectangle]);
   });
 
@@ -166,7 +166,7 @@ describe("flow chart navigation", () => {
       height: 100,
     });
 
-    API.setElements([rectangle]);
+    h.elements = [rectangle];
     API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -234,7 +234,7 @@ describe("flow chart navigation", () => {
       height: 100,
     });
 
-    API.setElements([rectangle]);
+    h.elements = [rectangle];
     API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -325,7 +325,7 @@ describe("flow chart navigation", () => {
       height: 100,
     });
 
-    API.setElements([rectangle]);
+    h.elements = [rectangle];
     API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ ctrl: true }, () => {

packages/excalidraw/element/index.ts

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

packages/excalidraw/element/linearElementEditor.ts

@@ -36,8 +36,6 @@ import type {
   AppState,
   PointerCoords,
   InteractiveCanvasAppState,
-  AppClassProperties,
-  NullableGridSize,
 } from "../types";
 import { mutateElement } from "./mutateElement";
 
@@ -211,7 +209,7 @@ export class LinearElementEditor {
   /** @returns whether point was dragged */
   static handlePointDragging(
     event: PointerEvent,
-    app: AppClassProperties,
+    appState: AppState,
     scenePointerX: number,
     scenePointerY: number,
     maybeSuggestBinding: (
@@ -281,7 +279,7 @@ export class LinearElementEditor {
           elementsMap,
           referencePoint,
           [scenePointerX, scenePointerY],
-          event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
         );
 
         LinearElementEditor.movePoints(
@@ -301,7 +299,7 @@ export class LinearElementEditor {
           elementsMap,
           scenePointerX - linearElementEditor.pointerOffset.x,
           scenePointerY - linearElementEditor.pointerOffset.y,
-          event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
         );
 
         const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
@@ -317,7 +315,7 @@ export class LinearElementEditor {
                     elementsMap,
                     scenePointerX - linearElementEditor.pointerOffset.x,
                     scenePointerY - linearElementEditor.pointerOffset.y,
-                    event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+                    event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
                   )
                 : ([
                     element.points[pointIndex][0] + deltaX,
@@ -697,7 +695,7 @@ export class LinearElementEditor {
 
   static handlePointerDown(
     event: React.PointerEvent<HTMLElement>,
-    app: AppClassProperties,
+    appState: AppState,
     store: Store,
     scenePointer: { x: number; y: number },
     linearElementEditor: LinearElementEditor,
@@ -707,7 +705,6 @@ export class LinearElementEditor {
     hitElement: NonDeleted<ExcalidrawElement> | null;
     linearElementEditor: LinearElementEditor | null;
   } {
-    const appState = app.state;
     const elementsMap = scene.getNonDeletedElementsMap();
     const elements = scene.getNonDeletedElements();
 
@@ -755,7 +752,7 @@ export class LinearElementEditor {
               elementsMap,
               scenePointer.x,
               scenePointer.y,
-              event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+              event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
             ),
           ],
         });
@@ -879,10 +876,9 @@ export class LinearElementEditor {
     event: React.PointerEvent<HTMLCanvasElement>,
     scenePointerX: number,
     scenePointerY: number,
-    app: AppClassProperties,
+    appState: AppState,
     elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   ): LinearElementEditor | null {
-    const appState = app.state;
     if (!appState.editingLinearElement) {
       return null;
     }
@@ -919,7 +915,7 @@ export class LinearElementEditor {
         elementsMap,
         lastCommittedPoint,
         [scenePointerX, scenePointerY],
-        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
       );
 
       newPoint = [
@@ -934,7 +930,7 @@ export class LinearElementEditor {
         scenePointerY - appState.editingLinearElement.pointerOffset.y,
         event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
           ? null
-          : app.getEffectiveGridSize(),
+          : appState.gridSize,
       );
     }
 
@@ -1069,7 +1065,7 @@ export class LinearElementEditor {
     elementsMap: ElementsMap,
     scenePointerX: number,
     scenePointerY: number,
-    gridSize: NullableGridSize,
+    gridSize: number | null,
   ): Point {
     const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, gridSize);
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
@@ -1367,7 +1363,7 @@ export class LinearElementEditor {
   static addMidpoint(
     linearElementEditor: LinearElementEditor,
     pointerCoords: PointerCoords,
-    app: AppClassProperties,
+    appState: AppState,
     snapToGrid: boolean,
     elementsMap: ElementsMap,
   ) {
@@ -1392,7 +1388,7 @@ export class LinearElementEditor {
       elementsMap,
       pointerCoords.x,
       pointerCoords.y,
-      snapToGrid && !isElbowArrow(element) ? app.getEffectiveGridSize() : null,
+      snapToGrid && !isElbowArrow(element) ? appState.gridSize : null,
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index!),
@@ -1489,7 +1485,7 @@ export class LinearElementEditor {
     elementsMap: ElementsMap,
     referencePoint: Point,
     scenePointer: Point,
-    gridSize: NullableGridSize,
+    gridSize: number | null,
   ) {
     const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(
       element,

packages/excalidraw/element/newElement.ts

@@ -375,13 +375,12 @@ export const newFreeDrawElement = (
     type: "freedraw";
     points?: ExcalidrawFreeDrawElement["points"];
     simulatePressure: boolean;
-    pressures?: ExcalidrawFreeDrawElement["pressures"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFreeDrawElement> => {
   return {
     ..._newElementBase<ExcalidrawFreeDrawElement>(opts.type, opts),
     points: opts.points || [],
-    pressures: opts.pressures || [],
+    pressures: [],
     simulatePressure: opts.simulatePressure,
     lastCommittedPoint: null,
   };

packages/excalidraw/element/routing.test.tsx

@@ -22,6 +22,21 @@ const { h } = window;
 
 const mouse = new Pointer("mouse");
 
+const getStatsProperty = (label: string) => {
+  const elementStats = UI.queryStats()?.querySelector("#elementStats");
+
+  if (elementStats) {
+    const properties = elementStats?.querySelector(".statsItem");
+    return (
+      properties?.querySelector?.(
+        `.drag-input-container[data-testid="${label}"]`,
+      ) || null
+    );
+  }
+
+  return null;
+};
+
 describe("elbow arrow routing", () => {
   it("can properly generate orthogonal arrow points", () => {
     const scene = new Scene();
@@ -178,7 +193,7 @@ describe("elbow arrow ui", () => {
 
     mouse.click(51, 51);
 
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     UI.updateInput(inputAngle, String("40"));

packages/excalidraw/element/showSelectedShapeActions.ts

@@ -9,7 +9,7 @@ export const showSelectedShapeActions = (
   Boolean(
     !appState.viewModeEnabled &&
       ((appState.activeTool.type !== "custom" &&
-        (appState.editingTextElement ||
+        (appState.editingElement ||
           (appState.activeTool.type !== "selection" &&
             appState.activeTool.type !== "eraser" &&
             appState.activeTool.type !== "hand" &&

packages/excalidraw/element/sizeHelpers.ts

@@ -3,7 +3,7 @@ import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
 import type { AppState, Zoom } from "../types";
-import { getCommonBounds, getElementBounds } from "./bounds";
+import { getElementBounds } from "./bounds";
 import { viewportCoordsToSceneCoords } from "../utils";
 
 // TODO:  remove invisible elements consistently actions, so that invisible elements are not recorded by the store, exported, broadcasted or persisted
@@ -56,7 +56,7 @@ export const isElementInViewport = (
 };
 
 export const isElementCompletelyInViewport = (
-  elements: ExcalidrawElement[],
+  element: ExcalidrawElement,
   width: number,
   height: number,
   viewTransformations: {
@@ -67,25 +67,19 @@ export const isElementCompletelyInViewport = (
     scrollY: number;
   },
   elementsMap: ElementsMap,
-  padding?: Partial<{
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-  }>,
 ) => {
-  const [x1, y1, x2, y2] = getCommonBounds(elements, elementsMap); // scene coordinates
+  const [x1, y1, x2, y2] = getElementBounds(element, elementsMap); // scene coordinates
   const topLeftSceneCoords = viewportCoordsToSceneCoords(
     {
-      clientX: viewTransformations.offsetLeft + (padding?.left || 0),
-      clientY: viewTransformations.offsetTop + (padding?.top || 0),
+      clientX: viewTransformations.offsetLeft,
+      clientY: viewTransformations.offsetTop,
     },
     viewTransformations,
   );
   const bottomRightSceneCoords = viewportCoordsToSceneCoords(
     {
-      clientX: viewTransformations.offsetLeft + width - (padding?.right || 0),
-      clientY: viewTransformations.offsetTop + height - (padding?.bottom || 0),
+      clientX: viewTransformations.offsetLeft + width,
+      clientY: viewTransformations.offsetTop + height,
     },
     viewTransformations,
   );

packages/excalidraw/element/textElement.ts

@@ -886,19 +886,3 @@ 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/textWysiwyg.test.tsx

@@ -61,9 +61,9 @@ describe("textWysiwyg", () => {
 
       Keyboard.keyPress(KEYS.ENTER);
 
-      expect(h.state.editingTextElement?.id).toBe(text.id);
+      expect(h.state.editingElement?.id).toBe(text.id);
       expect(
-        (h.state.editingTextElement as ExcalidrawTextElement).containerId,
+        (h.state.editingElement as ExcalidrawTextElement).containerId,
       ).toBe(null);
     });
 
@@ -105,7 +105,7 @@ describe("textWysiwyg", () => {
 
       Keyboard.keyPress(KEYS.ENTER);
 
-      expect(h.state.editingTextElement?.id).toBe(boundText2.id);
+      expect(h.state.editingElement?.id).toBe(boundText2.id);
     });
 
     it("should not create bound text on ENTER if text exists at container center", () => {
@@ -133,7 +133,7 @@ describe("textWysiwyg", () => {
 
       Keyboard.keyPress(KEYS.ENTER);
 
-      expect(h.state.editingTextElement?.id).toBe(text.id);
+      expect(h.state.editingElement?.id).toBe(text.id);
     });
 
     it("should edit existing bound text on ENTER even if higher z-index unbound text exists at container center", () => {
@@ -174,7 +174,7 @@ describe("textWysiwyg", () => {
 
       Keyboard.keyPress(KEYS.ENTER);
 
-      expect(h.state.editingTextElement?.id).toBe(boundText.id);
+      expect(h.state.editingElement?.id).toBe(boundText.id);
     });
 
     it("should edit text under cursor when clicked with text tool", async () => {
@@ -195,7 +195,7 @@ describe("textWysiwyg", () => {
       const editor = await getTextEditor(textEditorSelector, false);
 
       expect(editor).not.toBe(null);
-      expect(h.state.editingTextElement?.id).toBe(text.id);
+      expect(h.state.editingElement?.id).toBe(text.id);
       expect(h.elements.length).toBe(1);
     });
 
@@ -217,7 +217,7 @@ describe("textWysiwyg", () => {
       const editor = await getTextEditor(textEditorSelector, false);
 
       expect(editor).not.toBe(null);
-      expect(h.state.editingTextElement?.id).toBe(text.id);
+      expect(h.state.editingElement?.id).toBe(text.id);
       expect(h.elements.length).toBe(1);
     });
 
@@ -286,7 +286,7 @@ describe("textWysiwyg", () => {
       mouse.doubleClickAt(text.x + text.width / 2, text.y + text.height / 2);
       const editor = await getTextEditor(textEditorSelector);
       expect(editor).not.toBe(null);
-      expect(h.state.editingTextElement?.id).toBe(text.id);
+      expect(h.state.editingElement?.id).toBe(text.id);
       expect(h.elements.length).toBe(1);
 
       const nextText = `${wrappedText} is great!`;
@@ -881,7 +881,7 @@ describe("textWysiwyg", () => {
 
       expect(await getTextEditor(textEditorSelector, false)).toBe(null);
 
-      expect(h.state.editingTextElement).toBe(null);
+      expect(h.state.editingElement).toBe(null);
 
       expect(text.fontFamily).toEqual(FONT_FAMILY.Excalifont);
 

packages/excalidraw/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isSafari, POINTER_BUTTON } from "../constants";
+import { CLASSES, isSafari } from "../constants";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -38,11 +38,7 @@ import {
   actionDecreaseFontSize,
   actionIncreaseFontSize,
 } from "../actions/actionProperties";
-import {
-  actionResetZoom,
-  actionZoomIn,
-  actionZoomOut,
-} from "../actions/actionCanvas";
+import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import type App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
@@ -361,16 +357,7 @@ export const textWysiwyg = ({
     };
 
     editable.oninput = () => {
-      const normalized = normalizeText(editable.value);
-      if (editable.value !== normalized) {
-        const selectionStart = editable.selectionStart;
-        editable.value = normalized;
-        // put the cursor at some position close to where it was before
-        // normalization (otherwise it'll end up at the end of the text)
-        editable.selectionStart = selectionStart;
-        editable.selectionEnd = selectionStart;
-      }
-      onChange(editable.value);
+      onChange(normalizeText(editable.value));
     };
   }
 
@@ -383,10 +370,6 @@ export const textWysiwyg = ({
       event.preventDefault();
       app.actionManager.executeAction(actionZoomOut);
       updateWysiwygStyle();
-    } else if (!event.shiftKey && actionResetZoom.keyTest(event)) {
-      event.preventDefault();
-      app.actionManager.executeAction(actionResetZoom);
-      updateWysiwygStyle();
     } else if (actionDecreaseFontSize.keyTest(event)) {
       app.actionManager.executeAction(actionDecreaseFontSize);
     } else if (actionIncreaseFontSize.keyTest(event)) {
@@ -601,7 +584,6 @@ export const textWysiwyg = ({
     window.removeEventListener("blur", handleSubmit);
     window.removeEventListener("beforeunload", handleSubmit);
     unbindUpdate();
-    unbindOnScroll();
 
     editable.remove();
   };
@@ -628,29 +610,10 @@ export const textWysiwyg = ({
     });
   };
 
-  const temporarilyDisableSubmit = () => {
-    editable.onblur = null;
-    window.addEventListener("pointerup", bindBlurEvent);
-    // handle edge-case where pointerup doesn't fire e.g. due to user
-    // alt-tabbing away
-    window.addEventListener("blur", handleSubmit);
-  };
-
   // prevent blur when changing properties from the menu
   const onPointerDown = (event: MouseEvent) => {
     const target = event?.target;
 
-    // panning canvas
-    if (event.button === POINTER_BUTTON.WHEEL) {
-      // trying to pan by clicking inside text area itself -> handle here
-      if (target instanceof HTMLTextAreaElement) {
-        event.preventDefault();
-        app.handleCanvasPanUsingWheelOrSpaceDrag(event);
-      }
-      temporarilyDisableSubmit();
-      return;
-    }
-
     const isPropertiesTrigger =
       target instanceof HTMLElement &&
       target.classList.contains("properties-trigger");
@@ -658,14 +621,17 @@ export const textWysiwyg = ({
     if (
       ((event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
-        event.target.closest(
-          `.${CLASSES.SHAPE_ACTIONS_MENU}, .${CLASSES.ZOOM_ACTIONS}`,
-        ) &&
+        event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
         !isWritableElement(event.target)) ||
       isPropertiesTrigger
     ) {
-      temporarilyDisableSubmit();
+      editable.onblur = null;
+      window.addEventListener("pointerup", bindBlurEvent);
+      // handle edge-case where pointerup doesn't fire e.g. due to user
+      // alt-tabbing away
+      window.addEventListener("blur", handleSubmit);
     } else if (
+      event.target instanceof HTMLElement &&
       event.target instanceof HTMLCanvasElement &&
       // Vitest simply ignores stopPropagation, capture-mode, or rAF
       // so without introducing crazier hacks, nothing we can do
@@ -684,7 +650,7 @@ export const textWysiwyg = ({
   };
 
   // handle updates of textElement properties of editing element
-  const unbindUpdate = app.scene.onUpdate(() => {
+  const unbindUpdate = Scene.getScene(element)!.onUpdate(() => {
     updateWysiwygStyle();
     const isPopupOpened = !!document.activeElement?.closest(
       ".properties-content",
@@ -694,10 +660,6 @@ export const textWysiwyg = ({
     }
   });
 
-  const unbindOnScroll = app.onScrollChangeEmitter.on(() => {
-    updateWysiwygStyle();
-  });
-
   // ---------------------------------------------------------------------------
 
   let isDestroyed = false;
@@ -728,6 +690,10 @@ export const textWysiwyg = ({
   requestAnimationFrame(() => {
     window.addEventListener("pointerdown", onPointerDown, { capture: true });
   });
+  window.addEventListener("wheel", stopEvent, {
+    passive: false,
+    capture: true,
+  });
   window.addEventListener("beforeunload", handleSubmit);
   excalidrawContainer
     ?.querySelector(".excalidraw-textEditorContainer")!

packages/excalidraw/element/typeChecks.ts

@@ -1,9 +1,7 @@
-import type { LineSegment } from "../../utils";
 import { ROUNDNESS } from "../constants";
-import type { ElementOrToolType, Point } from "../types";
+import type { ElementOrToolType } from "../types";
 import type { MarkNonNullable } from "../utility-types";
 import { assertNever } from "../utils";
-import type { Bounds } from "./bounds";
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
@@ -178,23 +176,6 @@ export const isRectanguloidElement = (
   );
 };
 
-// TODO: Remove this when proper distance calculation is introduced
-// @see binding.ts:distanceToBindableElement()
-export const isRectangularElement = (
-  element?: ExcalidrawElement | null,
-): element is ExcalidrawBindableElement => {
-  return (
-    element != null &&
-    (element.type === "rectangle" ||
-      element.type === "image" ||
-      element.type === "text" ||
-      element.type === "iframe" ||
-      element.type === "embeddable" ||
-      element.type === "frame" ||
-      element.type === "magicframe")
-  );
-};
-
 export const isTextBindableContainer = (
   element: ExcalidrawElement | null,
   includeLocked = true,
@@ -324,23 +305,3 @@ export const isFixedPointBinding = (
 ): binding is FixedPointBinding => {
   return binding.fixedPoint != null;
 };
-
-// TODO: Move this to @excalidraw/math
-export const isPoint = (point: unknown): point is Point =>
-  Array.isArray(point) && point.length === 2;
-
-// TODO: Move this to @excalidraw/math
-export const isBounds = (box: unknown): box is Bounds =>
-  Array.isArray(box) &&
-  box.length === 4 &&
-  typeof box[0] === "number" &&
-  typeof box[1] === "number" &&
-  typeof box[2] === "number" &&
-  typeof box[3] === "number";
-
-// TODO: Move this to @excalidraw/math
-export const isLineSegment = (segment: unknown): segment is LineSegment =>
-  Array.isArray(segment) &&
-  segment.length === 2 &&
-  isPoint(segment[0]) &&
-  isPoint(segment[0]);

packages/excalidraw/element/types.ts

@@ -12,6 +12,7 @@ import type {
   Merge,
   ValueOf,
 } from "../utility-types";
+import type { MagicCacheData } from "../data/magic";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
@@ -100,22 +101,11 @@ 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?: MagicGenerationData };
+    customData?: { generationData?: MagicCacheData };
   }>;
 
 export type ExcalidrawIframeLikeElement =

packages/excalidraw/fonts/wasm/hb-subset.loader.ts

@@ -10,41 +10,30 @@ const load = (): Promise<{
     codePoints: ReadonlySet<number>,
   ) => Uint8Array;
 }> => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const [binary, bindings] = await Promise.all([
-        import("./hb-subset.wasm"),
-        import("./hb-subset.bindings"),
-      ]);
+  return new Promise(async (resolve) => {
+    const [binary, bindings] = await Promise.all([
+      import("./hb-subset.wasm"),
+      import("./hb-subset.bindings"),
+    ]);
 
-      WebAssembly.instantiate(binary.default).then((module) => {
-        try {
-          const harfbuzzJsWasm = module.instance.exports;
-          // @ts-expect-error since `.buffer` is custom prop
-          const heapu8 = new Uint8Array(harfbuzzJsWasm.memory.buffer);
+    WebAssembly.instantiate(binary.default).then((module) => {
+      const harfbuzzJsWasm = module.instance.exports;
+      // @ts-expect-error since `.buffer` is custom prop
+      const heapu8 = new Uint8Array(harfbuzzJsWasm.memory.buffer);
 
-          const hbSubset = {
-            subset: (
-              fontBuffer: ArrayBuffer,
-              codePoints: ReadonlySet<number>,
-            ) => {
-              return bindings.default.subset(
-                harfbuzzJsWasm,
-                heapu8,
-                fontBuffer,
-                codePoints,
-              );
-            },
-          };
+      const hbSubset = {
+        subset: (fontBuffer: ArrayBuffer, codePoints: ReadonlySet<number>) => {
+          return bindings.default.subset(
+            harfbuzzJsWasm,
+            heapu8,
+            fontBuffer,
+            codePoints,
+          );
+        },
+      };
 
-          resolve(hbSubset);
-        } catch (e) {
-          reject(e);
-        }
-      });
-    } catch (error) {
-      reject(error);
-    }
+      resolve(hbSubset);
+    });
   });
 };
 

packages/excalidraw/fonts/wasm/woff2.loader.ts

@@ -10,53 +10,45 @@ const load = (): Promise<{
   compress: (buffer: ArrayBuffer) => Uint8Array;
   decompress: (buffer: ArrayBuffer) => Uint8Array;
 }> => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const [binary, bindings] = await Promise.all([
-        import("./woff2.wasm"),
-        import("./woff2.bindings"),
-      ]);
+  return new Promise(async (resolve) => {
+    const [binary, bindings] = await Promise.all([
+      import("./woff2.wasm"),
+      import("./woff2.bindings"),
+    ]);
 
-      // initializing the module manually, so that we could pass in the wasm binary
-      bindings
-        .default({ wasmBinary: binary.default })
-        .then(
-          (module: {
-            woff2Enc: (buffer: ArrayBuffer, byteLength: number) => Vector;
-            woff2Dec: (buffer: ArrayBuffer, byteLength: number) => Vector;
-          }) => {
-            try {
-              // re-map from internal vector into byte array
-              function convertFromVecToUint8Array(vector: Vector): Uint8Array {
-                const arr = [];
-                for (let i = 0, l = vector.size(); i < l; i++) {
-                  arr.push(vector.get(i));
-                }
-
-                return new Uint8Array(arr);
-              }
-
-              // re-exporting only compress and decompress functions (also avoids infinite loop inside emscripten bindings)
-              const woff2 = {
-                compress: (buffer: ArrayBuffer) =>
-                  convertFromVecToUint8Array(
-                    module.woff2Enc(buffer, buffer.byteLength),
-                  ),
-                decompress: (buffer: ArrayBuffer) =>
-                  convertFromVecToUint8Array(
-                    module.woff2Dec(buffer, buffer.byteLength),
-                  ),
-              };
-
-              resolve(woff2);
-            } catch (e) {
-              reject(e);
+    // initializing the module manually, so that we could pass in the wasm binary
+    bindings
+      .default({ wasmBinary: binary.default })
+      .then(
+        (module: {
+          woff2Enc: (buffer: ArrayBuffer, byteLength: number) => Vector;
+          woff2Dec: (buffer: ArrayBuffer, byteLength: number) => Vector;
+        }) => {
+          // re-map from internal vector into byte array
+          function convertFromVecToUint8Array(vector: Vector): Uint8Array {
+            const arr = [];
+            for (let i = 0, l = vector.size(); i < l; i++) {
+              arr.push(vector.get(i));
             }
-          },
-        );
-    } catch (e) {
-      reject(e);
-    }
+
+            return new Uint8Array(arr);
+          }
+
+          // re-exporting only compress and decompress functions (also avoids infinite loop inside emscripten bindings)
+          const woff2 = {
+            compress: (buffer: ArrayBuffer) =>
+              convertFromVecToUint8Array(
+                module.woff2Enc(buffer, buffer.byteLength),
+              ),
+            decompress: (buffer: ArrayBuffer) =>
+              convertFromVecToUint8Array(
+                module.woff2Dec(buffer, buffer.byteLength),
+              ),
+          };
+
+          resolve(woff2);
+        },
+      );
   });
 };
 

packages/excalidraw/hooks/useCopiedIndicator.ts

@@ -1,27 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-
-const TIMEOUT = 2000;
-
-export const useCopyStatus = () => {
-  const [copyStatus, setCopyStatus] = useState<"success" | null>(null);
-  const timeoutRef = useRef<number>(0);
-
-  const onCopy = () => {
-    clearTimeout(timeoutRef.current);
-    setCopyStatus("success");
-
-    timeoutRef.current = window.setTimeout(() => {
-      setCopyStatus(null);
-    }, TIMEOUT);
-  };
-
-  const resetCopyStatus = useCallback(() => {
-    setCopyStatus(null);
-  }, []);
-
-  return {
-    copyStatus,
-    resetCopyStatus,
-    onCopy,
-  };
-};

packages/excalidraw/index.tsx

@@ -213,7 +213,6 @@ export {
   hashString,
   isInvisiblySmallElement,
   getNonDeletedElements,
-  getTextFromElements,
 } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export {
@@ -272,7 +271,6 @@ export { MainMenu };
 export { useDevice } from "./components/App";
 export { WelcomeScreen };
 export { LiveCollaborationTrigger };
-export { Stats } from "./components/Stats";
 
 export { DefaultSidebar } from "./components/DefaultSidebar";
 export { TTDDialog } from "./components/TTDDialog/TTDDialog";
@@ -288,6 +286,3 @@ export {
   isElementInsideBBox,
   elementPartiallyOverlapsWithOrContainsBBox,
 } from "../utils/withinBounds";
-
-export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToCodePlugin";
-export { getDataURL } from "./data/blob";

packages/excalidraw/locales/en.json

@@ -168,7 +168,6 @@
     "exportImage": "Export image...",
     "export": "Save to...",
     "copyToClipboard": "Copy to clipboard",
-    "copyLink": "Copy link",
     "save": "Save to current file",
     "saveAs": "Save as",
     "load": "Open",
@@ -273,7 +272,8 @@
     "laser": "Laser pointer",
     "hand": "Hand (panning tool)",
     "extraTools": "More tools",
-    "mermaidToExcalidraw": "Mermaid to Excalidraw"
+    "mermaidToExcalidraw": "Mermaid to Excalidraw",
+    "magicSettings": "AI settings"
   },
   "element": {
     "rectangle": "Rectangle",
@@ -462,15 +462,16 @@
   },
   "stats": {
     "angle": "Angle",
-    "shapes": "Shapes",
+    "element": "Element",
+    "elements": "Elements",
     "height": "Height",
     "scene": "Scene",
     "selected": "Selected",
     "storage": "Storage",
-    "fullTitle": "Canvas & Shape properties",
-    "title": "Properties",
-    "generalStats": "General",
-    "elementProperties": "Shape properties",
+    "fullTitle": "Stats & Element properties",
+    "title": "Stats",
+    "generalStats": "General stats",
+    "elementProperties": "Element properties",
     "total": "Total",
     "version": "Version",
     "versionCopy": "Click to copy",

packages/excalidraw/math.ts

@@ -1,9 +1,4 @@
-import type {
-  NormalizedZoomValue,
-  NullableGridSize,
-  Point,
-  Zoom,
-} from "./types";
+import type { NormalizedZoomValue, Point, Zoom } from "./types";
 import {
   DEFAULT_ADAPTIVE_RADIUS,
   LINE_CONFIRM_THRESHOLD,
@@ -280,7 +275,7 @@ const doSegmentsIntersect = (p1: Point, q1: Point, p2: Point, q2: Point) => {
 export const getGridPoint = (
   x: number,
   y: number,
-  gridSize: NullableGridSize,
+  gridSize: number | null,
 ): [number, number] => {
   if (gridSize) {
     return [
@@ -708,8 +703,3 @@ export const aabbsOverlapping = (a: Bounds, b: Bounds) =>
 export const clamp = (value: number, min: number, max: number) => {
   return Math.min(Math.max(value, min), max);
 };
-
-export const round = (value: number, precision: number) => {
-  const multiplier = Math.pow(10, precision);
-  return Math.round((value + Number.EPSILON) * multiplier) / multiplier;
-};

packages/excalidraw/renderer/interactiveScene.ts

@@ -680,11 +680,8 @@ const _renderInteractiveScene = ({
     }
   }
 
-  if (
-    appState.editingTextElement &&
-    isTextElement(appState.editingTextElement)
-  ) {
-    const textElement = allElementsMap.get(appState.editingTextElement.id) as
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
+    const textElement = allElementsMap.get(appState.editingElement.id) as
       | ExcalidrawTextElement
       | undefined;
     if (textElement && !textElement.autoResize) {
@@ -897,7 +894,7 @@ const _renderInteractiveScene = ({
         !appState.viewModeEnabled &&
         showBoundingBox &&
         // do not show transform handles when text is being edited
-        !isTextElement(appState.editingTextElement)
+        !isTextElement(appState.editingElement)
       ) {
         renderTransformHandles(
           context,

packages/excalidraw/renderer/renderElement.ts

@@ -199,7 +199,7 @@ const generateElementCanvas = (
   zoom: Zoom,
   renderConfig: StaticCanvasRenderConfig,
   appState: StaticCanvasAppState,
-): ExcalidrawElementWithCanvas | null => {
+): ExcalidrawElementWithCanvas => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d")!;
   const padding = getCanvasPadding(element);
@@ -210,10 +210,6 @@ const generateElementCanvas = (
     zoom,
   );
 
-  if (!width || !height) {
-    return null;
-  }
-
   canvas.width = width;
   canvas.height = height;
 
@@ -544,10 +540,6 @@ const generateElementWithCanvas = (
       appState,
     );
 
-    if (!elementWithCanvas) {
-      return null;
-    }
-
     elementWithCanvasCache.set(element, elementWithCanvas);
 
     return elementWithCanvas;
@@ -750,10 +742,6 @@ export const renderElement = (
           renderConfig,
           appState,
         );
-        if (!elementWithCanvas) {
-          return;
-        }
-
         drawElementFromCanvas(
           elementWithCanvas,
           context,
@@ -893,10 +881,6 @@ export const renderElement = (
           appState,
         );
 
-        if (!elementWithCanvas) {
-          return;
-        }
-
         const currentImageSmoothingStatus = context.imageSmoothingEnabled;
 
         if (

packages/excalidraw/renderer/renderNewElementScene.ts

@@ -1,66 +0,0 @@
-import type { NewElementSceneRenderConfig } from "../scene/types";
-import { throttleRAF } from "../utils";
-import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
-import { renderElement } from "./renderElement";
-
-const _renderNewElementScene = ({
-  canvas,
-  rc,
-  newElement,
-  elementsMap,
-  allElementsMap,
-  scale,
-  appState,
-  renderConfig,
-}: NewElementSceneRenderConfig) => {
-  if (canvas) {
-    const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
-      canvas,
-      scale,
-    );
-
-    const context = bootstrapCanvas({
-      canvas,
-      scale,
-      normalizedWidth,
-      normalizedHeight,
-    });
-
-    // Apply zoom
-    context.save();
-    context.scale(appState.zoom.value, appState.zoom.value);
-
-    if (newElement && newElement.type !== "selection") {
-      renderElement(
-        newElement,
-        elementsMap,
-        allElementsMap,
-        rc,
-        context,
-        renderConfig,
-        appState,
-      );
-    } else {
-      context.clearRect(0, 0, normalizedWidth, normalizedHeight);
-    }
-  }
-};
-
-export const renderNewElementSceneThrottled = throttleRAF(
-  (config: NewElementSceneRenderConfig) => {
-    _renderNewElementScene(config);
-  },
-  { trailing: true },
-);
-
-export const renderNewElementScene = (
-  renderConfig: NewElementSceneRenderConfig,
-  throttle?: boolean,
-) => {
-  if (throttle) {
-    renderNewElementSceneThrottled(renderConfig);
-    return;
-  }
-
-  _renderNewElementScene(renderConfig);
-};

packages/excalidraw/renderer/staticScene.ts

@@ -31,77 +31,53 @@ import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 import { throttleRAF } from "../utils";
 import { getBoundTextElement } from "../element/textElement";
 
-const GridLineColor = {
-  Bold: "#dddddd",
-  Regular: "#e5e5e5",
-} as const;
-
 const strokeGrid = (
   context: CanvasRenderingContext2D,
-  /** grid cell pixel size */
   gridSize: number,
-  /** setting to 1 will disble bold lines */
-  gridStep: number,
   scrollX: number,
   scrollY: number,
   zoom: Zoom,
   width: number,
   height: number,
 ) => {
-  const offsetX = (scrollX % gridSize) - gridSize;
-  const offsetY = (scrollY % gridSize) - gridSize;
+  const BOLD_LINE_FREQUENCY = 5;
 
-  const actualGridSize = gridSize * zoom.value;
-
-  const spaceWidth = 1 / zoom.value;
-
-  context.save();
-
-  // Offset rendering by 0.5 to ensure that 1px wide lines are crisp.
-  // We only do this when zoomed to 100% because otherwise the offset is
-  // fractional, and also visibly offsets the elements.
-  // We also do this per-axis, as each axis may already be offset by 0.5.
-  if (zoom.value === 1) {
-    context.translate(offsetX % 1 ? 0 : 0.5, offsetY % 1 ? 0 : 0.5);
+  enum GridLineColor {
+    Bold = "#cccccc",
+    Regular = "#e5e5e5",
   }
 
-  // vertical lines
+  const offsetX =
+    -Math.round(zoom.value / gridSize) * gridSize + (scrollX % gridSize);
+  const offsetY =
+    -Math.round(zoom.value / gridSize) * gridSize + (scrollY % gridSize);
+
+  const lineWidth = Math.min(1 / zoom.value, 1);
+
+  const spaceWidth = 1 / zoom.value;
+  const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
+
+  context.save();
+  context.lineWidth = lineWidth;
+
   for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {
     const isBold =
-      gridStep > 1 && Math.round(x - scrollX) % (gridStep * gridSize) === 0;
-    // don't render regular lines when zoomed out and they're barely visible
-    if (!isBold && actualGridSize < 10) {
-      continue;
-    }
-
-    const lineWidth = Math.min(1 / zoom.value, isBold ? 4 : 1);
-    context.lineWidth = lineWidth;
-    const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
-
+      Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
     context.beginPath();
     context.setLineDash(isBold ? [] : lineDash);
     context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
     context.moveTo(x, offsetY - gridSize);
-    context.lineTo(x, Math.ceil(offsetY + height + gridSize * 2));
+    context.lineTo(x, offsetY + height + gridSize * 2);
     context.stroke();
   }
-
   for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {
     const isBold =
-      gridStep > 1 && Math.round(y - scrollY) % (gridStep * gridSize) === 0;
-    if (!isBold && actualGridSize < 10) {
-      continue;
-    }
-
-    const lineWidth = Math.min(1 / zoom.value, isBold ? 4 : 1);
-    context.lineWidth = lineWidth;
-    const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
-
+      Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
     context.beginPath();
     context.setLineDash(isBold ? [] : lineDash);
     context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
     context.moveTo(offsetX - gridSize, y);
-    context.lineTo(Math.ceil(offsetX + width + gridSize * 2), y);
+    context.lineTo(offsetX + width + gridSize * 2, y);
     context.stroke();
   }
   context.restore();
@@ -223,11 +199,10 @@ const _renderStaticScene = ({
   context.scale(appState.zoom.value, appState.zoom.value);
 
   // Grid
-  if (renderGrid) {
+  if (renderGrid && appState.gridSize) {
     strokeGrid(
       context,
       appState.gridSize,
-      appState.gridStep,
       appState.scrollX,
       appState.scrollY,
       appState.zoom,

packages/excalidraw/scene/Renderer.ts

@@ -1,7 +1,6 @@
 import { isElementInViewport } from "../element/sizeHelpers";
 import { isImageElement } from "../element/typeChecks";
 import type {
-  ExcalidrawElement,
   NonDeletedElementsMap,
   NonDeletedExcalidrawElement,
 } from "../element/types";
@@ -65,13 +64,11 @@ export class Renderer {
 
     const getRenderableElements = ({
       elements,
-      editingTextElement,
-      newElementId,
+      editingElement,
       pendingImageElementId,
     }: {
       elements: readonly NonDeletedExcalidrawElement[];
-      editingTextElement: AppState["editingTextElement"];
-      newElementId: ExcalidrawElement["id"] | undefined;
+      editingElement: AppState["editingElement"];
       pendingImageElementId: AppState["pendingImageElementId"];
     }) => {
       const elementsMap = toBrandedType<RenderableElementsMap>(new Map());
@@ -86,16 +83,12 @@ export class Renderer {
           }
         }
 
-        if (newElementId === element.id) {
-          continue;
-        }
-
         // we don't want to render text element that's being currently edited
         // (it's rendered on remote only)
         if (
-          !editingTextElement ||
-          editingTextElement.type !== "text" ||
-          element.id !== editingTextElement.id
+          !editingElement ||
+          editingElement.type !== "text" ||
+          element.id !== editingElement.id
         ) {
           elementsMap.set(element.id, element);
         }
@@ -112,8 +105,7 @@ export class Renderer {
         scrollY,
         height,
         width,
-        editingTextElement,
-        newElementId,
+        editingElement,
         pendingImageElementId,
         // cache-invalidation nonce
         sceneNonce: _sceneNonce,
@@ -125,10 +117,7 @@ export class Renderer {
         scrollY: AppState["scrollY"];
         height: AppState["height"];
         width: AppState["width"];
-        editingTextElement: AppState["editingTextElement"];
-        /** note: first render of newElement will always bust the cache
-         * (we'd have to prefilter elements outside of this function) */
-        newElementId: ExcalidrawElement["id"] | undefined;
+        editingElement: AppState["editingElement"];
         pendingImageElementId: AppState["pendingImageElementId"];
         sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
       }) => {
@@ -136,8 +125,7 @@ export class Renderer {
 
         const elementsMap = getRenderableElements({
           elements,
-          editingTextElement,
-          newElementId,
+          editingElement,
           pendingImageElementId,
         });
 

packages/excalidraw/scene/index.ts

@@ -15,8 +15,4 @@ export {
   getElementAtPosition,
   getElementsAtPosition,
 } from "./comparisons";
-export {
-  getNormalizedZoom,
-  getNormalizedGridSize,
-  getNormalizedGridStep,
-} from "./normalize";
+export { getNormalizedZoom } from "./zoom";

packages/excalidraw/scene/normalize.ts

@@ -1,15 +0,0 @@
-import { MAX_ZOOM, MIN_ZOOM } from "../constants";
-import { clamp, round } from "../math";
-import type { NormalizedZoomValue } from "../types";
-
-export const getNormalizedZoom = (zoom: number): NormalizedZoomValue => {
-  return clamp(round(zoom, 6), MIN_ZOOM, MAX_ZOOM) as NormalizedZoomValue;
-};
-
-export const getNormalizedGridSize = (gridStep: number) => {
-  return clamp(Math.round(gridStep), 1, 100);
-};
-
-export const getNormalizedGridStep = (gridStep: number) => {
-  return clamp(Math.round(gridStep), 1, 100);
-};

packages/excalidraw/scene/selection.ts

@@ -218,15 +218,10 @@ export const getSelectedElements = (
 
 export const getTargetElements = (
   elements: ElementsMapOrArray,
-  appState: Pick<
-    AppState,
-    "selectedElementIds" | "editingTextElement" | "newElement"
-  >,
+  appState: Pick<AppState, "selectedElementIds" | "editingElement">,
 ) =>
-  appState.editingTextElement
-    ? [appState.editingTextElement]
-    : appState.newElement
-    ? [appState.newElement]
+  appState.editingElement
+    ? [appState.editingElement]
     : getSelectedElements(elements, appState, {
         includeBoundTextElement: true,
       });

packages/excalidraw/scene/types.ts

@@ -92,17 +92,6 @@ export type InteractiveSceneRenderConfig = {
   callback: (data: RenderInteractiveSceneCallback) => void;
 };
 
-export type NewElementSceneRenderConfig = {
-  canvas: HTMLCanvasElement | null;
-  rc: RoughCanvas;
-  newElement: ExcalidrawElement | null;
-  elementsMap: RenderableElementsMap;
-  allElementsMap: NonDeletedSceneElementsMap;
-  scale: number;
-  appState: AppState;
-  renderConfig: StaticCanvasRenderConfig;
-};
-
 export type SceneScroll = {
   scrollX: number;
   scrollY: number;

packages/excalidraw/scene/zoom.ts

@@ -1,5 +1,10 @@
+import { MIN_ZOOM } from "../constants";
 import type { AppState, NormalizedZoomValue } from "../types";
 
+export const getNormalizedZoom = (zoom: number): NormalizedZoomValue => {
+  return Math.max(MIN_ZOOM, Math.min(zoom, 30)) as NormalizedZoomValue;
+};
+
 export const getStateForZoom = (
   {
     viewportX,

packages/excalidraw/snapping.ts

@@ -19,12 +19,7 @@ import {
   getSelectedElements,
   getVisibleAndNonSelectedElements,
 } from "./scene/selection";
-import type {
-  AppClassProperties,
-  AppState,
-  KeyboardModifiersObject,
-  Point,
-} from "./types";
+import type { AppState, KeyboardModifiersObject, Point } from "./types";
 
 const SNAP_DISTANCE = 8;
 
@@ -144,24 +139,21 @@ export class SnapCache {
 
 // -----------------------------------------------------------------------------
 
-export const isGridModeEnabled = (app: AppClassProperties): boolean =>
-  app.props.gridModeEnabled ?? app.state.gridModeEnabled;
-
 export const isSnappingEnabled = ({
   event,
-  app,
+  appState,
   selectedElements,
 }: {
-  app: AppClassProperties;
+  appState: AppState;
   event: KeyboardModifiersObject;
   selectedElements: NonDeletedExcalidrawElement[];
 }) => {
   if (event) {
     return (
-      (app.state.objectsSnapModeEnabled && !event[KEYS.CTRL_OR_CMD]) ||
-      (!app.state.objectsSnapModeEnabled &&
+      (appState.objectsSnapModeEnabled && !event[KEYS.CTRL_OR_CMD]) ||
+      (!appState.objectsSnapModeEnabled &&
         event[KEYS.CTRL_OR_CMD] &&
-        !isGridModeEnabled(app))
+        appState.gridSize === null)
     );
   }
 
@@ -169,7 +161,7 @@ export const isSnappingEnabled = ({
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
   }
-  return app.state.objectsSnapModeEnabled;
+  return appState.objectsSnapModeEnabled;
 };
 
 export const areRoughlyEqual = (a: number, b: number, precision = 0.01) => {
@@ -414,13 +406,13 @@ export const getVisibleGaps = (
 const getGapSnaps = (
   selectedElements: ExcalidrawElement[],
   dragOffset: Vector2D,
-  app: AppClassProperties,
+  appState: AppState,
   event: KeyboardModifiersObject,
   nearestSnapsX: Snaps,
   nearestSnapsY: Snaps,
   minOffset: Vector2D,
 ) => {
-  if (!isSnappingEnabled({ app, event, selectedElements })) {
+  if (!isSnappingEnabled({ appState, event, selectedElements })) {
     return [];
   }
 
@@ -604,14 +596,14 @@ export const getReferenceSnapPoints = (
 const getPointSnaps = (
   selectedElements: ExcalidrawElement[],
   selectionSnapPoints: Point[],
-  app: AppClassProperties,
+  appState: AppState,
   event: KeyboardModifiersObject,
   nearestSnapsX: Snaps,
   nearestSnapsY: Snaps,
   minOffset: Vector2D,
 ) => {
   if (
-    !isSnappingEnabled({ app, event, selectedElements }) ||
+    !isSnappingEnabled({ appState, event, selectedElements }) ||
     (selectedElements.length === 0 && selectionSnapPoints.length === 0)
   ) {
     return [];
@@ -660,14 +652,13 @@ const getPointSnaps = (
 export const snapDraggedElements = (
   elements: ExcalidrawElement[],
   dragOffset: Vector2D,
-  app: AppClassProperties,
+  appState: AppState,
   event: KeyboardModifiersObject,
   elementsMap: ElementsMap,
 ) => {
-  const appState = app.state;
   const selectedElements = getSelectedElements(elements, appState);
   if (
-    !isSnappingEnabled({ app, event, selectedElements }) ||
+    !isSnappingEnabled({ appState, event, selectedElements }) ||
     selectedElements.length === 0
   ) {
     return {
@@ -696,7 +687,7 @@ export const snapDraggedElements = (
   getPointSnaps(
     selectedElements,
     selectionPoints,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -706,7 +697,7 @@ export const snapDraggedElements = (
   getGapSnaps(
     selectedElements,
     dragOffset,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -741,7 +732,7 @@ export const snapDraggedElements = (
     getElementsCorners(selectedElements, elementsMap, {
       dragOffset: newDragOffset,
     }),
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -751,7 +742,7 @@ export const snapDraggedElements = (
   getGapSnaps(
     selectedElements,
     newDragOffset,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -1084,13 +1075,13 @@ export const snapResizingElements = (
   selectedElements: ExcalidrawElement[],
   // while using the original elements to appy dragOffset to calculate snaps
   selectedOriginalElements: ExcalidrawElement[],
-  app: AppClassProperties,
+  appState: AppState,
   event: KeyboardModifiersObject,
   dragOffset: Vector2D,
   transformHandle: MaybeTransformHandleType,
 ) => {
   if (
-    !isSnappingEnabled({ event, selectedElements, app }) ||
+    !isSnappingEnabled({ event, selectedElements, appState }) ||
     selectedElements.length === 0 ||
     (selectedElements.length === 1 &&
       !areRoughlyEqual(selectedElements[0].angle, 0))
@@ -1156,7 +1147,7 @@ export const snapResizingElements = (
     }
   }
 
-  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const snapDistance = getSnapDistance(appState.zoom.value);
 
   const minOffset = {
     x: snapDistance,
@@ -1169,7 +1160,7 @@ export const snapResizingElements = (
   getPointSnaps(
     selectedOriginalElements,
     selectionSnapPoints,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -1202,7 +1193,7 @@ export const snapResizingElements = (
   getPointSnaps(
     selectedElements,
     corners,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -1219,13 +1210,13 @@ export const snapResizingElements = (
 
 export const snapNewElement = (
   newElement: ExcalidrawElement,
-  app: AppClassProperties,
+  appState: AppState,
   event: KeyboardModifiersObject,
   origin: Vector2D,
   dragOffset: Vector2D,
   elementsMap: ElementsMap,
 ) => {
-  if (!isSnappingEnabled({ event, selectedElements: [newElement], app })) {
+  if (!isSnappingEnabled({ event, selectedElements: [newElement], appState })) {
     return {
       snapOffset: { x: 0, y: 0 },
       snapLines: [],
@@ -1236,7 +1227,7 @@ export const snapNewElement = (
     [origin.x + dragOffset.x, origin.y + dragOffset.y],
   ];
 
-  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const snapDistance = getSnapDistance(appState.zoom.value);
 
   const minOffset = {
     x: snapDistance,
@@ -1249,7 +1240,7 @@ export const snapNewElement = (
   getPointSnaps(
     [newElement],
     selectionSnapPoints,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -1274,7 +1265,7 @@ export const snapNewElement = (
   getPointSnaps(
     [newElement],
     corners,
-    app,
+    appState,
     event,
     nearestSnapsX,
     nearestSnapsY,
@@ -1291,12 +1282,12 @@ export const snapNewElement = (
 
 export const getSnapLinesAtPointer = (
   elements: readonly ExcalidrawElement[],
-  app: AppClassProperties,
+  appState: AppState,
   pointer: Vector2D,
   event: KeyboardModifiersObject,
   elementsMap: ElementsMap,
 ) => {
-  if (!isSnappingEnabled({ event, selectedElements: [], app })) {
+  if (!isSnappingEnabled({ event, selectedElements: [], appState })) {
     return {
       originOffset: { x: 0, y: 0 },
       snapLines: [],
@@ -1306,11 +1297,11 @@ export const getSnapLinesAtPointer = (
   const referenceElements = getVisibleAndNonSelectedElements(
     elements,
     [],
-    app.state,
+    appState,
     elementsMap,
   );
 
-  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const snapDistance = getSnapDistance(appState.zoom.value);
 
   const minOffset = {
     x: snapDistance,

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

@@ -812,10 +812,10 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -831,9 +831,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -1017,10 +1015,10 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -1036,9 +1034,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -1201,7 +1197,7 @@ History {
 
 exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of elements 1`] = `1`;
 
-exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of renders 1`] = `5`;
+exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of renders 1`] = `6`;
 
 exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] appState 1`] = `
 {
@@ -1232,10 +1228,10 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -1251,9 +1247,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -1531,7 +1525,7 @@ History {
 
 exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of renders 1`] = `10`;
+exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of renders 1`] = `12`;
 
 exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] appState 1`] = `
 {
@@ -1562,10 +1556,10 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -1581,9 +1575,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -1861,7 +1853,7 @@ History {
 
 exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of renders 1`] = `10`;
+exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of renders 1`] = `12`;
 
 exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] appState 1`] = `
 {
@@ -1892,10 +1884,10 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -1911,9 +1903,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2076,7 +2066,7 @@ History {
 
 exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of elements 1`] = `1`;
 
-exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `5`;
+exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `6`;
 
 exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] appState 1`] = `
 {
@@ -2107,10 +2097,10 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -2126,9 +2116,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2315,7 +2303,7 @@ History {
 
 exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of elements 1`] = `1`;
 
-exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `6`;
+exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `7`;
 
 exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] appState 1`] = `
 {
@@ -2346,10 +2334,10 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -2365,9 +2353,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2615,7 +2601,7 @@ History {
 
 exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `6`;
+exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `7`;
 
 exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] appState 1`] = `
 {
@@ -2646,10 +2632,10 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -2665,9 +2651,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2983,7 +2967,7 @@ History {
 
 exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `10`;
+exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `12`;
 
 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] appState 1`] = `
 {
@@ -3014,10 +2998,10 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -3033,9 +3017,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -3457,7 +3439,7 @@ History {
 
 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `16`;
+exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `18`;
 
 exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] appState 1`] = `
 {
@@ -3488,10 +3470,10 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -3507,9 +3489,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -3779,7 +3759,7 @@ History {
 
 exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of renders 1`] = `9`;
+exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of renders 1`] = `11`;
 
 exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] appState 1`] = `
 {
@@ -3810,10 +3790,10 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -3829,9 +3809,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -4101,7 +4079,7 @@ History {
 
 exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of renders 1`] = `9`;
+exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of renders 1`] = `11`;
 
 exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] appState 1`] = `
 {
@@ -4132,10 +4110,10 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -4151,9 +4129,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -4503,7 +4479,7 @@ History {
 
 exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `11`;
+exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `13`;
 
 exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] appState 1`] = `
 {
@@ -5317,10 +5293,10 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -5336,9 +5312,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -5629,7 +5603,7 @@ History {
 
 exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of renders 1`] = `10`;
+exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of renders 1`] = `12`;
 
 exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] appState 1`] = `
 {
@@ -6443,10 +6417,10 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -6462,9 +6436,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -6801,7 +6773,7 @@ History {
 
 exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of renders 1`] = `11`;
+exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of renders 1`] = `13`;
 
 exports[`contextMenu element > shows context menu for canvas > [end of test] appState 1`] = `
 {
@@ -7377,10 +7349,10 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -7396,9 +7368,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -8288,10 +8258,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -8307,9 +8277,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9181,10 +9149,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
+  "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
-  "editingTextElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
@@ -9200,9 +9168,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridModeEnabled": false,
-  "gridSize": 20,
-  "gridStep": 5,
+  "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9449,6 +9415,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] nu
 
 exports[`contextMenu element > shows context menu for element > [end of test] number of elements 2`] = `2`;
 
-exports[`contextMenu element > shows context menu for element > [end of test] number of renders 1`] = `5`;
+exports[`contextMenu element > shows context menu for element > [end of test] number of renders 1`] = `6`;
 
 exports[`contextMenu element > shows context menu for element > [end of test] number of renders 2`] = `6`;

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

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > arrow 3`] = `1`;
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > arrow 1`] = `1`;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > arrow 4`] = `
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > arrow 2`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -52,9 +52,9 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
 }
 `;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > diamond 3`] = `1`;
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > diamond 1`] = `1`;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > diamond 4`] = `
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > diamond 2`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -88,9 +88,9 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
 }
 `;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > ellipse 3`] = `1`;
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > ellipse 1`] = `1`;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > ellipse 4`] = `
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > ellipse 2`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -124,7 +124,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
 }
 `;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > line 3`] = `
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > line 1`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -173,9 +173,9 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
 }
 `;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > rectangle 3`] = `1`;
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > rectangle 1`] = `1`;
 
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > rectangle 4`] = `
+exports[`Test dragCreate > add element to the scene when pointer dragging long enough > rectangle 2`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",

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

@@ -134,7 +134,7 @@ exports[`move element > rectangles with binding arrow 5`] = `
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 1723083209,
+  "versionNonce": 760410951,
   "width": 100,
   "x": 0,
   "y": 0,

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

@@ -50,7 +50,7 @@ exports[`multi point mode in linear elements > arrow 3`] = `
   "type": "arrow",
   "updated": 1,
   "version": 8,
-  "versionNonce": 1604849351,
+  "versionNonce": 23633383,
   "width": 70,
   "x": 30,
   "y": 30,
@@ -106,7 +106,7 @@ exports[`multi point mode in linear elements > line 3`] = `
   "type": "line",
   "updated": 1,
   "version": 8,
-  "versionNonce": 1604849351,
+  "versionNonce": 23633383,
   "width": 70,
   "x": 30,
   "y": 30,

packages/excalidraw/tests/dragCreate.test.tsx

@@ -51,10 +51,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -85,10 +83,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
 
       expect(h.state.selectionElement).toBeNull();
 
@@ -120,10 +116,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -154,10 +148,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -192,10 +184,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -235,10 +225,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(5);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -257,10 +245,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(5);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -279,10 +265,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `5`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(5);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -308,10 +292,8 @@ describe("Test dragCreate", () => {
         key: KEYS.ENTER,
       });
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `6`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -337,10 +319,8 @@ describe("Test dragCreate", () => {
         key: KEYS.ENTER,
       });
 
-      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `6`,
-      );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });