Normalize indices on init

.dockerignore

@@ -8,7 +8,6 @@
 !package.json
 !public/
 !packages/
-!scripts/
 !tsconfig.json
 !yarn.lock
 

.eslintignore

@@ -6,5 +6,3 @@ firebase/
 dist/
 public/workbox
 packages/excalidraw/types
-examples/**/public
-dev-dist

.github/workflows/test.yml

@@ -1,6 +1,7 @@
 name: Tests
 
 on:
+  pull_request:
   push:
     branches: master
 

Dockerfile

@@ -12,7 +12,7 @@ ARG NODE_ENV=production
 
 RUN yarn build:app:docker
 
-FROM nginx:1.27-alpine
+FROM nginx:1.24-alpine
 
 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
 

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

@@ -9,9 +9,9 @@ All `props` are _optional_.
 | [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
 | [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
 | [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
-| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down events |
+| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down evenets |
 | [`onScrollChange`](#onscrollchange) | `function` | _ | This prop if passed gets triggered when scrolling the canvas. |
-| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when something is pasted into the scene |
+| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when the something is pasted in to the scene |
 | [`onLibraryChange`](#onlibrarychange) | `function` | _ | The callback if supplied is triggered when the library is updated and receives the library items. |
 | [`onLinkOpen`](#onlinkopen) | `function` | _ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
@@ -26,7 +26,7 @@ All `props` are _optional_.
 | [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
-| [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
+| [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |
 | [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |

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"
   },
 

dev-docs/package.json

@@ -18,13 +18,13 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.17.6",
+    "@excalidraw/excalidraw": "0.17.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",
     "prism-react-renderer": "^1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sass": "1.57.1"
   },
   "devDependencies": {

dev-docs/yarn.lock

@@ -1718,10 +1718,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.17.6":
-  version "0.17.6"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.6.tgz#5fd208ce69d33ca712d1804b50d7d06d5c46ac4d"
-  integrity sha512-fyCl+zG/Z5yhHDh5Fq2ZGmphcrALmuOdtITm8gN4d8w4ntnaopTXcTfnAAaU3VleDC6LhTkoLOTG6P5kgREiIg==
+"@excalidraw/excalidraw@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz#3c64aa8e36406ac171b008cfecbdce5bb0755725"
+  integrity sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"

examples/excalidraw/with-nextjs/package.json

@@ -13,13 +13,13 @@
   "dependencies": {
     "@excalidraw/excalidraw": "*",
     "next": "14.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "path2d-polyfill": "2.0.1",
     "typescript": "^5"
   }

excalidraw-app/App.tsx

@@ -22,9 +22,11 @@ import { t } from "../packages/excalidraw/i18n";
 import {
   Excalidraw,
   LiveCollaborationTrigger,
+  TTDDialog,
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
+  normalizeIndices,
 } from "../packages/excalidraw";
 import type {
   AppState,
@@ -120,7 +122,6 @@ import {
 import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
-import { AIComponents } from "./components/AI";
 
 polyfill();
 
@@ -305,14 +306,21 @@ const initializeScene = async (opts: {
       key: roomLinkData.roomKey,
     };
   } else if (scene) {
+    const normalizedScene = {
+      ...scene,
+      // non-collab scenes are always always normalized on init
+      // collab scenes are normalized only on "first-in-room" as part of collabAPI
+      elements: normalizeIndices(scene.elements),
+    };
+
     return isExternalScene && jsonBackendMatch
       ? {
-          scene,
+          scene: normalizedScene,
           isExternalScene,
           id: jsonBackendMatch[1],
           key: jsonBackendMatch[2],
         }
-      : { scene, isExternalScene: false };
+      : { scene: normalizedScene, isExternalScene: false };
   }
   return { scene: null, isExternalScene: false };
 };
@@ -846,8 +854,63 @@ const ExcalidrawWrapper = () => {
           )}
         </OverwriteConfirmDialog>
         <AppFooter />
-        {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
+        <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">

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/collab/Collab.tsx

@@ -18,6 +18,7 @@ import {
   restoreElements,
   zoomToFitBounds,
   reconcileElements,
+  normalizeIndices,
 } from "../../packages/excalidraw";
 import type { Collaborator, Gesture } from "../../packages/excalidraw/types";
 import {
@@ -637,7 +638,16 @@ class Collab extends PureComponent<CollabProps, CollabState> {
         fetchScene: true,
         roomLinkData: existingRoomLinkData,
       });
-      scenePromise.resolve(sceneData);
+
+      if (sceneData) {
+        scenePromise.resolve({
+          ...sceneData,
+          // normalize fractional indices on init for shared scenes, while making sure there are no other collaborators
+          elements: normalizeIndices([...sceneData.elements]),
+        });
+      } else {
+        scenePromise.resolve(null);
+      }
     });
 
     this.portal.socket.on(

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/data/index.ts

@@ -254,7 +254,7 @@ export const loadScene = async (
       await importFromBackend(id, privateKey),
       localDataState?.appState,
       localDataState?.elements,
-      { repairBindings: true, refreshDimensions: false },
+      { repairBindings: true },
     );
   } else {
     data = restore(localDataState || null, null, null, {

excalidraw-app/index.html

@@ -95,11 +95,6 @@
         color: #fff;
       }
     </style>
-
-    <!-- Warmup the connection for Google fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
     <!------------------------------------------------------------------------->
     <% if (typeof PROD != 'undefined' && PROD == true) { %>
     <script>
@@ -119,16 +114,52 @@
       ) {
         window.location.href = "https://app.excalidraw.com";
       }
+
+      // point into our CDN in prod
+      window.EXCALIDRAW_ASSET_PATH =
+        "https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/";
     </script>
-
-    <!-- Following placeholder is replaced during the build step -->
-    <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
-
     <% } else { %>
     <script>
       window.EXCALIDRAW_ASSET_PATH = window.origin;
     </script>
+    <% } %>
 
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+
+    <!-- Excalidraw version -->
+    <meta name="version" content="{version}" />
+
+    <!-- Warmup the connection for Google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <!-- Preload all default fonts and Virgil for backwards compatibility to avoid swap on init -->
+    <% if (typeof PROD != 'undefined' && PROD == true) { %>
+    <link
+      rel="preload"
+      href="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/Excalifont-Regular-C9eKQy_N.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/Virgil-Regular-hO16qHwV.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/ComicShanns-Regular-D0c8wzsC.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <% } else { %>
     <!-- in DEV we need to preload from the local server and without the hash -->
     <link
       rel="preload"
@@ -153,7 +184,7 @@
     />
     <% } %>
 
-    <!-- For Nunito only preload the latin range, which should be good enough for now -->
+    <!-- For Nunito only preload the latin range, which should be enough for now -->
     <link
       rel="preload"
       href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
@@ -169,13 +200,6 @@
       type="text/css"
     />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-
-    <!-- Excalidraw version -->
-    <meta name="version" content="{version}" />
-
     <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
     VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
     <script>

excalidraw-app/package.json

@@ -26,17 +26,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "firebase": "8.3.3",
-    "idb-keyval": "6.0.3",
-    "jotai": "1.13.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "vite-plugin-html": "3.2.2",
-    "@excalidraw/random-username": "1.0.0",
-    "@sentry/browser": "6.2.5",
-    "@sentry/integrations": "6.2.5",
-    "i18next-browser-languagedetector": "6.1.4",
-    "socket.io-client": "4.7.2"
+    "vite-plugin-html": "3.2.2"
   },
   "prettier": "@excalidraw/prettier-config",
   "scripts": {

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>

excalidraw-app/tests/collab.test.tsx

@@ -2,6 +2,7 @@ import { vi } from "vitest";
 import {
   act,
   render,
+  updateSceneData,
   waitFor,
 } from "../../packages/excalidraw/tests/test-utils";
 import ExcalidrawApp from "../App";
@@ -87,12 +88,12 @@ describe("collaboration", () => {
     const rect1 = API.createElement({ ...rect1Props });
     const rect2 = API.createElement({ ...rect2Props });
 
-    API.updateScene({
+    updateSceneData({
       elements: syncInvalidIndices([rect1, rect2]),
       storeAction: StoreAction.CAPTURE,
     });
 
-    API.updateScene({
+    updateSceneData({
       elements: syncInvalidIndices([
         rect1,
         newElementWith(h.elements[1], { isDeleted: true }),
@@ -142,7 +143,7 @@ describe("collaboration", () => {
     });
 
     // simulate force deleting the element remotely
-    API.updateScene({
+    updateSceneData({
       elements: syncInvalidIndices([rect1]),
       storeAction: StoreAction.UPDATE,
     });
@@ -177,7 +178,7 @@ describe("collaboration", () => {
     act(() => h.app.actionManager.executeAction(undoAction));
 
     // simulate local update
-    API.updateScene({
+    updateSceneData({
       elements: syncInvalidIndices([
         h.elements[0],
         newElementWith(h.elements[1], { x: 100 }),
@@ -215,7 +216,7 @@ describe("collaboration", () => {
     });
 
     // simulate force deleting the element remotely
-    API.updateScene({
+    updateSceneData({
       elements: syncInvalidIndices([rect1]),
       storeAction: StoreAction.UPDATE,
     });

excalidraw-app/vite.config.mts

@@ -26,10 +26,10 @@ export default defineConfig({
         assetFileNames(chunkInfo) {
           if (chunkInfo?.name?.endsWith(".woff2")) {
             // put on root so we are flexible about the CDN path
-            return "[name]-[hash][extname]";
+            return '[name]-[hash][extname]';
           }
 
-          return "assets/[name]-[hash][extname]";
+          return 'assets/[name]-[hash][extname]';
         },
         // Creating separate chunk for locales except for en and percentages.json so they
         // can be cached at runtime and not merged with
@@ -44,7 +44,7 @@ export default defineConfig({
             // Taking the substring after "locales/"
             return `locales/${id.substring(index + 8)}`;
           }
-        },
+        }
       },
     },
     sourcemap: true,

package.json

@@ -9,8 +9,19 @@
     "examples/excalidraw",
     "examples/excalidraw/*"
   ],
+  "dependencies": {
+    "@excalidraw/random-username": "1.0.0",
+    "@sentry/browser": "6.2.5",
+    "@sentry/integrations": "6.2.5",
+    "firebase": "8.3.3",
+    "i18next-browser-languagedetector": "6.1.4",
+    "idb-keyval": "6.0.3",
+    "jotai": "1.13.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "socket.io-client": "4.7.2"
+  },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@excalidraw/eslint-config": "1.0.3",
     "@excalidraw/prettier-config": "1.0.2",
     "@types/chai": "4.3.0",
@@ -40,7 +51,7 @@
     "vite-plugin-ejs": "1.7.0",
     "vite-plugin-pwa": "0.17.4",
     "vite-plugin-svgr": "2.4.0",
-    "vitest": "1.6.0",
+    "vitest": "1.5.3",
     "vitest-canvas-mock": "0.3.2"
   },
   "engines": {
@@ -76,12 +87,6 @@
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
     "build:preview": "yarn build && vite preview --port 5000",
-    "release:excalidraw": "node scripts/release.js",
-    "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/*/{build,dist}",
-    "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",
-    "clean-install": "yarn rm:node_modules && yarn install"
-  },
-  "resolutions": {
-    "@types/react": "18.2.0"
+    "release:excalidraw": "node scripts/release.js"
   }
 }

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

@@ -5,27 +5,20 @@ import { t } from "../i18n";
 import { register } from "./register";
 import { getNonDeletedElements } from "../element";
 import type { ExcalidrawElement } from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+import type { AppState } from "../types";
+import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import {
-  isBoundToContainer,
-  isElbowArrow,
-  isFrameLikeElement,
-} from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { mutateElbowArrow } from "../element/routing";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-  app: AppClassProperties,
 ) => {
-  const elementsMap = app.scene.getNonDeletedElementsMap();
   const framesToBeDeleted = new Set(
     getSelectedElements(
       elements.filter((el) => isFrameLikeElement(el)),
@@ -36,26 +29,6 @@ const deleteSelectedElements = (
   return {
     elements: elements.map((el) => {
       if (appState.selectedElementIds[el.id]) {
-        if (el.boundElements) {
-          el.boundElements.forEach((candidate) => {
-            const bound = app.scene
-              .getNonDeletedElementsMap()
-              .get(candidate.id);
-            if (bound && isElbowArrow(bound)) {
-              mutateElement(bound, {
-                startBinding:
-                  el.id === bound.startBinding?.elementId
-                    ? null
-                    : bound.startBinding,
-                endBinding:
-                  el.id === bound.endBinding?.elementId
-                    ? null
-                    : bound.endBinding,
-              });
-              mutateElbowArrow(bound, elementsMap, bound.points);
-            }
-          });
-        }
         return newElementWith(el, { isDeleted: true });
       }
 
@@ -157,11 +130,7 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(
-        element,
-        selectedPointsIndices,
-        elementsMap,
-      );
+      LinearElementEditor.deletePoints(element, selectedPointsIndices);
 
       return {
         elements,
@@ -180,7 +149,7 @@ export const actionDeleteSelected = register({
       };
     }
     let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState, app);
+      deleteSelectedElements(elements, appState);
     fixBindingsAfterDeletion(
       nextElements,
       elements.filter(({ id }) => appState.selectedElementIds[id]),

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,
@@ -40,11 +40,12 @@ export const actionDuplicateSelection = register({
   icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
     // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {
       const ret = LinearElementEditor.duplicateSelectedPoints(
         appState,
-        app.scene.getNonDeletedElementsMap(),
+        elementsMap,
       );
 
       if (!ret) {
@@ -99,8 +100,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/actionElementLock.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Excalidraw } from "../index";
 import { queryByTestId, fireEvent } from "@testing-library/react";
 import { render } from "../tests/test-utils";

packages/excalidraw/actions/actionFinalize.tsx

@@ -38,7 +38,6 @@ export const actionFinalize = register({
             startBindingElement,
             endBindingElement,
             elementsMap,
-            scene,
           );
         }
         return {
@@ -50,6 +49,7 @@ export const actionFinalize = register({
             ...appState,
             cursorButton: "up",
             editingLinearElement: null,
+            selectedLinearElement: null,
           },
           storeAction: StoreAction.CAPTURE,
         };
@@ -72,8 +72,8 @@ export const actionFinalize = register({
 
     const multiPointElement = appState.multiElement
       ? appState.multiElement
-      : appState.newElement?.type === "freedraw"
-      ? appState.newElement
+      : appState.editingElement?.type === "freedraw"
+      ? appState.editingElement
       : null;
 
     if (multiPointElement) {
@@ -136,7 +136,6 @@ export const actionFinalize = register({
           appState,
           { x, y },
           elementsMap,
-          elements,
         );
       }
     }
@@ -175,10 +174,9 @@ export const actionFinalize = register({
             ? appState.activeTool
             : activeTool,
         activeEmbeddable: null,
-        newElement: null,
-        selectionElement: null,
+        draggingElement: null,
         multiElement: null,
-        editingTextElement: null,
+        editingElement: null,
         startBoundElement: null,
         suggestedBindings: [],
         selectedElementIds:
@@ -204,7 +202,7 @@ export const actionFinalize = register({
   keyTest: (event, appState) =>
     (event.key === KEYS.ESCAPE &&
       (appState.editingLinearElement !== null ||
-        (!appState.newElement && appState.multiElement === null))) ||
+        (!appState.draggingElement && appState.multiElement === null))) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
   PanelComponent: ({ appState, updateData, data }) => (

packages/excalidraw/actions/actionFlip.ts

@@ -125,8 +125,6 @@ const flipElements = (
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
     elementsMap,
-    app.scene.getNonDeletedElements(),
-    app.scene,
     isBindingEnabled(appState),
     [],
   );

packages/excalidraw/actions/actionHistory.tsx

@@ -4,7 +4,7 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import type { History } from "../history";
 import { HistoryChangedEvent } from "../history";
-import type { AppClassProperties, AppState } from "../types";
+import type { AppState } from "../types";
 import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
@@ -13,19 +13,15 @@ import type { Store } from "../store";
 import { StoreAction } from "../store";
 import { useEmitter } from "../hooks/useEmitter";
 
-const executeHistoryAction = (
-  app: AppClassProperties,
+const writeData = (
   appState: Readonly<AppState>,
   updater: () => [SceneElementsMap, AppState] | void,
 ): ActionResult => {
   if (
     !appState.multiElement &&
     !appState.resizingElement &&
-    !appState.editingTextElement &&
-    !appState.newElement &&
-    !appState.selectedElementsAreBeingDragged &&
-    !appState.selectionElement &&
-    !app.flowChartCreator.isCreatingChart
+    !appState.editingElement &&
+    !appState.draggingElement
   ) {
     const result = updater();
 
@@ -54,8 +50,8 @@ export const createUndoAction: ActionCreator = (history, store) => ({
   icon: UndoIcon,
   trackEvent: { category: "history" },
   viewMode: false,
-  perform: (elements, appState, value, app) =>
-    executeHistoryAction(app, appState, () =>
+  perform: (elements, appState) =>
+    writeData(appState, () =>
       history.undo(
         arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
         appState,
@@ -95,8 +91,8 @@ export const createRedoAction: ActionCreator = (history, store) => ({
   icon: RedoIcon,
   trackEvent: { category: "history" },
   viewMode: false,
-  perform: (elements, appState, _, app) =>
-    executeHistoryAction(app, appState, () =>
+  perform: (elements, appState) =>
+    writeData(appState, () =>
       history.redo(
         arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
         appState,

packages/excalidraw/actions/actionLinearEditor.tsx

@@ -1,6 +1,6 @@
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { isElbowArrow, isLinearElement } from "../element/typeChecks";
+import { isLinearElement } from "../element/typeChecks";
 import type { ExcalidrawLinearElement } from "../element/types";
 import { StoreAction } from "../store";
 import { register } from "./register";
@@ -29,8 +29,7 @@ export const actionToggleLinearEditor = register({
     if (
       !appState.editingLinearElement &&
       selectedElements.length === 1 &&
-      isLinearElement(selectedElements[0]) &&
-      !isElbowArrow(selectedElements[0])
+      isLinearElement(selectedElements[0])
     ) {
       return true;
     }

packages/excalidraw/actions/actionProperties.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Excalidraw } from "../index";
 import { queryByTestId } from "@testing-library/react";
 import { render } from "../tests/test-utils";
@@ -7,6 +6,8 @@ import { API } from "../tests/helpers/api";
 import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
 import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
 
+const { h } = window;
+
 describe("element locking", () => {
   beforeEach(async () => {
     await render(<Excalidraw />);
@@ -21,7 +22,7 @@ describe("element locking", () => {
       // just in case we change it in the future
       expect(color).not.toBe(COLOR_PALETTE.transparent);
 
-      API.setAppState({
+      h.setState({
         currentItemBackgroundColor: color,
       });
       const activeColor = queryByTestId(
@@ -39,14 +40,14 @@ describe("element locking", () => {
       // just in case we change it in the future
       expect(color).not.toBe(COLOR_PALETTE.transparent);
 
-      API.setAppState({
+      h.setState({
         currentItemBackgroundColor: color,
         currentItemFillStyle: "hachure",
       });
       const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
 
       expect(hachureFillButton).toHaveClass("active");
-      API.setAppState({
+      h.setState({
         currentItemFillStyle: "solid",
       });
       const solidFillStyle = queryByTestId(document.body, `fill-solid`);
@@ -56,7 +57,7 @@ describe("element locking", () => {
     it("should not show fill style when background transparent", () => {
       UI.clickTool("rectangle");
 
-      API.setAppState({
+      h.setState({
         currentItemBackgroundColor: COLOR_PALETTE.transparent,
         currentItemFillStyle: "hachure",
       });
@@ -68,7 +69,7 @@ describe("element locking", () => {
     it("should show horizontal text align for text tool", () => {
       UI.clickTool("text");
 
-      API.setAppState({
+      h.setState({
         currentItemTextAlign: "right",
       });
 
@@ -84,7 +85,7 @@ describe("element locking", () => {
         backgroundColor: "red",
         fillStyle: "cross-hatch",
       });
-      API.setElements([rect]);
+      h.elements = [rect];
       API.setSelectedElements([rect]);
 
       const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
@@ -97,7 +98,7 @@ describe("element locking", () => {
         backgroundColor: COLOR_PALETTE.transparent,
         fillStyle: "cross-hatch",
       });
-      API.setElements([rect]);
+      h.elements = [rect];
       API.setSelectedElements([rect]);
 
       const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
@@ -113,7 +114,7 @@ describe("element locking", () => {
         type: "rectangle",
         strokeWidth: STROKE_WIDTH.thin,
       });
-      API.setElements([rect1, rect2]);
+      h.elements = [rect1, rect2];
       API.setSelectedElements([rect1, rect2]);
 
       const thinStrokeWidthButton = queryByTestId(
@@ -132,7 +133,7 @@ describe("element locking", () => {
         type: "rectangle",
         strokeWidth: STROKE_WIDTH.bold,
       });
-      API.setElements([rect1, rect2]);
+      h.elements = [rect1, rect2];
       API.setSelectedElements([rect1, rect2]);
 
       expect(queryByTestId(document.body, `strokeWidth-thin`)).not.toBe(null);
@@ -156,7 +157,7 @@ describe("element locking", () => {
         type: "text",
         fontFamily: FONT_FAMILY["Comic Shanns"],
       });
-      API.setElements([rect, text]);
+      h.elements = [rect, text];
       API.setSelectedElements([rect, text]);
 
       expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();

packages/excalidraw/actions/actionProperties.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { AppClassProperties, AppState, Point, Primitive } from "../types";
+import type { AppClassProperties, AppState, Primitive } from "../types";
 import type { StoreActionType } from "../store";
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
@@ -50,12 +50,8 @@ import {
   ArrowheadDiamondIcon,
   ArrowheadDiamondOutlineIcon,
   fontSizeIcon,
-  sharpArrowIcon,
-  roundArrowIcon,
-  elbowArrowIcon,
 } from "../components/icons";
 import {
-  ARROW_TYPE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
@@ -71,15 +67,12 @@ import {
 import { mutateElement, newElementWith } from "../element/mutateElement";
 import { getBoundTextElement } from "../element/textElement";
 import {
-  isArrowElement,
   isBoundToContainer,
-  isElbowArrow,
   isLinearElement,
   isUsingAdaptiveRadius,
 } from "../element/typeChecks";
 import type {
   Arrowhead,
-  ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
@@ -98,23 +91,10 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import {
-  arrayToMap,
-  getFontFamilyString,
-  getShortcutKey,
-  tupleToCoors,
-} from "../utils";
+import { arrayToMap, getFontFamilyString, getShortcutKey } from "../utils";
 import { register } from "./register";
 import { StoreAction } from "../store";
 import { Fonts, getLineHeight } from "../fonts";
-import {
-  bindLinearElement,
-  bindPointToSnapToElementOutline,
-  calculateFixedPointForElbowArrowBinding,
-  getHoveredElementForBinding,
-} from "../element/binding";
-import { mutateElbowArrow } from "../element/routing";
-import { LinearElementEditor } from "../element/linearElementEditor";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -133,7 +113,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 +128,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) {
@@ -1076,20 +1056,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,
                   ),
@@ -1325,12 +1304,8 @@ export const actionChangeRoundness = register({
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (isElbowArrow(el)) {
-          return el;
-        }
-
-        return newElementWith(el, {
+      elements: changeProperty(elements, appState, (el) =>
+        newElementWith(el, {
           roundness:
             value === "round"
               ? {
@@ -1339,8 +1314,8 @@ export const actionChangeRoundness = register({
                     : ROUNDNESS.PROPORTIONAL_RADIUS,
                 }
               : null,
-        });
-      }),
+        }),
+      ),
       appState: {
         ...appState,
         currentItemRoundness: value,
@@ -1380,8 +1355,7 @@ export const actionChangeRoundness = register({
             appState,
             (element) =>
               hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (element) =>
-              !isArrowElement(element) && element.hasOwnProperty("roundness"),
+            (element) => element.hasOwnProperty("roundness"),
             (hasSelection) =>
               hasSelection ? null : appState.currentItemRoundness,
           )}
@@ -1544,219 +1518,3 @@ export const actionChangeArrowhead = register({
     );
   },
 });
-
-export const actionChangeArrowType = register({
-  name: "changeArrowType",
-  label: "Change arrow types",
-  trackEvent: false,
-  perform: (elements, appState, value, app) => {
-    return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (!isArrowElement(el)) {
-          return el;
-        }
-        const newElement = newElementWith(el, {
-          roundness:
-            value === ARROW_TYPE.round
-              ? {
-                  type: ROUNDNESS.PROPORTIONAL_RADIUS,
-                }
-              : null,
-          elbowed: value === ARROW_TYPE.elbow,
-          points:
-            value === ARROW_TYPE.elbow || el.elbowed
-              ? [el.points[0], el.points[el.points.length - 1]]
-              : el.points,
-        });
-
-        if (isElbowArrow(newElement)) {
-          const elementsMap = app.scene.getNonDeletedElementsMap();
-
-          app.dismissLinearEditor();
-
-          const startGlobalPoint =
-            LinearElementEditor.getPointAtIndexGlobalCoordinates(
-              newElement,
-              0,
-              elementsMap,
-            );
-          const endGlobalPoint =
-            LinearElementEditor.getPointAtIndexGlobalCoordinates(
-              newElement,
-              -1,
-              elementsMap,
-            );
-          const startHoveredElement =
-            !newElement.startBinding &&
-            getHoveredElementForBinding(
-              tupleToCoors(startGlobalPoint),
-              elements,
-              elementsMap,
-              true,
-            );
-          const endHoveredElement =
-            !newElement.endBinding &&
-            getHoveredElementForBinding(
-              tupleToCoors(endGlobalPoint),
-              elements,
-              elementsMap,
-              true,
-            );
-          const startElement = startHoveredElement
-            ? startHoveredElement
-            : newElement.startBinding &&
-              (elementsMap.get(
-                newElement.startBinding.elementId,
-              ) as ExcalidrawBindableElement);
-          const endElement = endHoveredElement
-            ? endHoveredElement
-            : newElement.endBinding &&
-              (elementsMap.get(
-                newElement.endBinding.elementId,
-              ) as ExcalidrawBindableElement);
-
-          const finalStartPoint = startHoveredElement
-            ? bindPointToSnapToElementOutline(
-                startGlobalPoint,
-                endGlobalPoint,
-                startHoveredElement,
-                elementsMap,
-              )
-            : startGlobalPoint;
-          const finalEndPoint = endHoveredElement
-            ? bindPointToSnapToElementOutline(
-                endGlobalPoint,
-                startGlobalPoint,
-                endHoveredElement,
-                elementsMap,
-              )
-            : endGlobalPoint;
-
-          startHoveredElement &&
-            bindLinearElement(
-              newElement,
-              startHoveredElement,
-              "start",
-              elementsMap,
-            );
-          endHoveredElement &&
-            bindLinearElement(
-              newElement,
-              endHoveredElement,
-              "end",
-              elementsMap,
-            );
-
-          mutateElbowArrow(
-            newElement,
-            elementsMap,
-            [finalStartPoint, finalEndPoint].map(
-              (point) =>
-                [point[0] - newElement.x, point[1] - newElement.y] as Point,
-            ),
-            [0, 0],
-            {
-              ...(startElement && newElement.startBinding
-                ? {
-                    startBinding: {
-                      // @ts-ignore TS cannot discern check above
-                      ...newElement.startBinding!,
-                      ...calculateFixedPointForElbowArrowBinding(
-                        newElement,
-                        startElement,
-                        "start",
-                        elementsMap,
-                      ),
-                    },
-                  }
-                : {}),
-              ...(endElement && newElement.endBinding
-                ? {
-                    endBinding: {
-                      // @ts-ignore TS cannot discern check above
-                      ...newElement.endBinding,
-                      ...calculateFixedPointForElbowArrowBinding(
-                        newElement,
-                        endElement,
-                        "end",
-                        elementsMap,
-                      ),
-                    },
-                  }
-                : {}),
-            },
-          );
-        } else {
-          mutateElement(
-            newElement,
-            {
-              startBinding: newElement.startBinding
-                ? { ...newElement.startBinding, fixedPoint: null }
-                : null,
-              endBinding: newElement.endBinding
-                ? { ...newElement.endBinding, fixedPoint: null }
-                : null,
-            },
-            false,
-          );
-        }
-
-        return newElement;
-      }),
-      appState: {
-        ...appState,
-        currentItemArrowType: value,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <legend>{t("labels.arrowtypes")}</legend>
-        <ButtonIconSelect
-          group="arrowtypes"
-          options={[
-            {
-              value: ARROW_TYPE.sharp,
-              text: t("labels.arrowtype_sharp"),
-              icon: sharpArrowIcon,
-              testId: "sharp-arrow",
-            },
-            {
-              value: ARROW_TYPE.round,
-              text: t("labels.arrowtype_round"),
-              icon: roundArrowIcon,
-              testId: "round-arrow",
-            },
-            {
-              value: ARROW_TYPE.elbow,
-              text: t("labels.arrowtype_elbowed"),
-              icon: elbowArrowIcon,
-              testId: "elbow-arrow",
-            },
-          ]}
-          value={getFormValue(
-            elements,
-            appState,
-            (element) => {
-              if (isArrowElement(element)) {
-                return element.elbowed
-                  ? ARROW_TYPE.elbow
-                  : element.roundness
-                  ? ARROW_TYPE.round
-                  : ARROW_TYPE.sharp;
-              }
-
-              return null;
-            },
-            (element) => isArrowElement(element),
-            (hasSelection) =>
-              hasSelection ? null : appState.currentItemArrowType,
-          )}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
-});

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/actions/types.ts

@@ -70,7 +70,6 @@ export type ActionName =
   | "changeSloppiness"
   | "changeStrokeStyle"
   | "changeArrowhead"
-  | "changeArrowType"
   | "changeOpacity"
   | "changeFontSize"
   | "toggleCanvasMenu"

packages/excalidraw/appState.ts

@@ -1,15 +1,12 @@
 import { COLOR_PALETTE } from "./colors";
 import {
-  ARROW_TYPE,
   DEFAULT_ELEMENT_PROPS,
   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";
 
@@ -36,15 +33,14 @@ export const getDefaultAppState = (): Omit<
     currentItemStartArrowhead: null,
     currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
     currentItemRoundness: "round",
-    currentItemArrowType: ARROW_TYPE.round,
     currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
     currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
     currentHoveredFontFamily: null,
     cursorButton: "up",
     activeEmbeddable: null,
-    newElement: null,
-    editingTextElement: null,
+    draggingElement: null,
+    editingElement: null,
     editingGroupId: null,
     editingLinearElement: null,
     activeTool: {
@@ -61,9 +57,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,
@@ -149,11 +143,6 @@ const APP_STATE_STORAGE_CONF = (<
     export: false,
     server: false,
   },
-  currentItemArrowType: {
-    browser: true,
-    export: false,
-    server: false,
-  },
   currentItemOpacity: { browser: true, export: false, server: false },
   currentItemRoughness: { browser: true, export: false, server: false },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
@@ -164,8 +153,8 @@ const APP_STATE_STORAGE_CONF = (<
   currentHoveredFontFamily: { browser: false, export: false, server: false },
   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 },
+  draggingElement: { 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 +167,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/binaryheap.ts

@@ -1,105 +0,0 @@
-export default class BinaryHeap<T> {
-  private content: T[] = [];
-
-  constructor(private scoreFunction: (node: T) => number) {}
-
-  sinkDown(idx: number) {
-    const node = this.content[idx];
-    while (idx > 0) {
-      const parentN = ((idx + 1) >> 1) - 1;
-      const parent = this.content[parentN];
-      if (this.scoreFunction(node) < this.scoreFunction(parent)) {
-        this.content[parentN] = node;
-        this.content[idx] = parent;
-        idx = parentN; // TODO: Optimize
-      } else {
-        break;
-      }
-    }
-  }
-
-  bubbleUp(idx: number) {
-    const length = this.content.length;
-    const node = this.content[idx];
-    const score = this.scoreFunction(node);
-
-    while (true) {
-      const child2N = (idx + 1) << 1;
-      const child1N = child2N - 1;
-      let swap = null;
-      let child1Score = 0;
-
-      if (child1N < length) {
-        const child1 = this.content[child1N];
-        child1Score = this.scoreFunction(child1);
-        if (child1Score < score) {
-          swap = child1N;
-        }
-      }
-
-      if (child2N < length) {
-        const child2 = this.content[child2N];
-        const child2Score = this.scoreFunction(child2);
-        if (child2Score < (swap === null ? score : child1Score)) {
-          swap = child2N;
-        }
-      }
-
-      if (swap !== null) {
-        this.content[idx] = this.content[swap];
-        this.content[swap] = node;
-        idx = swap; // TODO: Optimize
-      } else {
-        break;
-      }
-    }
-  }
-
-  push(node: T) {
-    this.content.push(node);
-    this.sinkDown(this.content.length - 1);
-  }
-
-  pop(): T | null {
-    if (this.content.length === 0) {
-      return null;
-    }
-
-    const result = this.content[0];
-    const end = this.content.pop()!;
-
-    if (this.content.length > 0) {
-      this.content[0] = end;
-      this.bubbleUp(0);
-    }
-
-    return result;
-  }
-
-  remove(node: T) {
-    if (this.content.length === 0) {
-      return;
-    }
-
-    const i = this.content.indexOf(node);
-    const end = this.content.pop()!;
-
-    if (i < this.content.length) {
-      this.content[i] = end;
-
-      if (this.scoreFunction(end) < this.scoreFunction(node)) {
-        this.sinkDown(i);
-      } else {
-        this.bubbleUp(i);
-      }
-    }
-  }
-
-  size(): number {
-    return this.content.length;
-  }
-
-  rescoreElement(node: T) {
-    this.sinkDown(this.content.indexOf(node));
-  }
-}

packages/excalidraw/change.ts

@@ -1100,6 +1100,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
     try {
       // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state
       ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);
+      ElementsChange.redrawBoundArrows(nextElements, changedElements);
 
       // the following reorder performs also mutations, but only on new instances of changed elements
       // (unless something goes really bad and it fallbacks to fixing all invalid indices)
@@ -1108,9 +1109,6 @@ export class ElementsChange implements Change<SceneElementsMap> {
         changedElements,
         flags,
       );
-
-      // Need ordered nextElements to avoid z-index binding issues
-      ElementsChange.redrawBoundArrows(nextElements, changedElements);
     } catch (e) {
       console.error(
         `Couldn't mutate elements after applying elements change`,
@@ -1462,9 +1460,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
   ) {
     for (const element of changed.values()) {
       if (!element.isDeleted && isBindableElement(element)) {
-        updateBoundElements(element, elements, {
-          changedElements: changed,
-        });
+        updateBoundElements(element, elements);
       }
     }
   }

packages/excalidraw/charts.ts

@@ -257,6 +257,8 @@ const chartLines = (
     type: "line",
     x,
     y,
+    startArrowhead: null,
+    endArrowhead: null,
     width: chartWidth,
     points: [
       [0, 0],
@@ -271,6 +273,8 @@ const chartLines = (
     type: "line",
     x,
     y,
+    startArrowhead: null,
+    endArrowhead: null,
     height: chartHeight,
     points: [
       [0, 0],
@@ -285,6 +289,8 @@ const chartLines = (
     type: "line",
     x,
     y: y - BAR_HEIGHT - BAR_GAP,
+    startArrowhead: null,
+    endArrowhead: null,
     strokeStyle: "dotted",
     width: chartWidth,
     opacity: GRID_OPACITY,
@@ -412,6 +418,8 @@ const chartTypeLine = (
     type: "line",
     x: x + BAR_GAP + BAR_WIDTH / 2,
     y: y - BAR_GAP,
+    startArrowhead: null,
+    endArrowhead: null,
     height: maxY - minY,
     width: maxX - minX,
     strokeWidth: 2,
@@ -445,6 +453,8 @@ const chartTypeLine = (
       type: "line",
       x: x + cx + BAR_WIDTH / 2 + BAR_GAP / 2,
       y: y - cy,
+      startArrowhead: null,
+      endArrowhead: null,
       height: cy,
       strokeStyle: "dotted",
       opacity: GRID_OPACITY,

packages/excalidraw/components/Actions.tsx

@@ -21,11 +21,10 @@ import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
+import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import {
   hasBoundTextElement,
-  isElbowArrow,
   isLinearElement,
   isTextElement,
 } from "../element/typeChecks";
@@ -45,6 +44,7 @@ import {
   frameToolIcon,
   mermaidLogoIcon,
   laserPointerToolIcon,
+  OpenAIIcon,
   MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
@@ -103,9 +103,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";
 
@@ -123,8 +121,7 @@ export const SelectedShapeActions = ({
   const showLineEditorAction =
     !appState.editingLinearElement &&
     targetElements.length === 1 &&
-    isLinearElement(targetElements[0]) &&
-    !isElbowArrow(targetElements[0]);
+    isLinearElement(targetElements[0]);
 
   return (
     <div className="panelColumn">
@@ -158,11 +155,6 @@ export const SelectedShapeActions = ({
         <>{renderAction("changeRoundness")}</>
       )}
 
-      {(toolIsArrow(appState.activeTool.type) ||
-        targetElements.some((element) => toolIsArrow(element.type))) && (
-        <>{renderAction("changeArrowType")}</>
-      )}
-
       {(appState.activeTool.type === "text" ||
         targetElements.some(isTextElement)) && (
         <>
@@ -235,7 +227,7 @@ export const SelectedShapeActions = ({
           </div>
         </fieldset>
       )}
-      {!isEditingTextOrNewElement && targetElements.length > 0 && (
+      {!isEditing && targetElements.length > 0 && (
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
@@ -401,7 +393,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()}
@@ -411,6 +403,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>

packages/excalidraw/components/DefaultSidebar.test.tsx

@@ -9,7 +9,7 @@ import {
 import {
   assertExcalidrawWithSidebar,
   assertSidebarDockButton,
-} from "./Sidebar/siderbar.test.helpers";
+} from "./Sidebar/Sidebar.test";
 
 const { h } = window;
 

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

@@ -16,19 +16,11 @@
 
     .Spinner {
       --spinner-color: var(--color-surface-lowest);
-    }
-
-    .ExcButton__statusIcon {
-      visibility: visible;
       position: absolute;
-
-      width: 1rem;
-      height: 1rem;
-      font-size: 1rem;
+      visibility: visible;
     }
 
-    &.ExcButton--status-loading,
-    &.ExcButton--status-success {
+    &[disabled] {
       pointer-events: none;
 
       .ExcButton__contents {
@@ -36,10 +28,6 @@
       }
     }
 
-    &[disabled] {
-      pointer-events: none;
-    }
-
     &,
     &__contents {
       display: flex;
@@ -131,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/FontPicker/FontPickerList.tsx

@@ -63,15 +63,15 @@ export const FontPickerList = React.memo(
       () =>
         Array.from(Fonts.registered.entries())
           .filter(([_, { metadata }]) => !metadata.serverSide)
-          .map(([familyId, { metadata, fonts }]) => {
-            const fontDescriptor = {
+          .map(([familyId, { metadata, fontFaces }]) => {
+            const font = {
               value: familyId,
               icon: metadata.icon,
-              text: fonts[0].fontFace.family,
+              text: fontFaces[0].fontFace.family,
             };
 
             if (metadata.deprecated) {
-              Object.assign(fontDescriptor, {
+              Object.assign(font, {
                 deprecated: metadata.deprecated,
                 badge: {
                   type: DropDownMenuItemBadgeType.RED,
@@ -80,7 +80,7 @@ export const FontPickerList = React.memo(
               });
             }
 
-            return fontDescriptor as FontDescriptor;
+            return font as FontDescriptor;
           })
           .sort((a, b) =>
             a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1,
@@ -89,7 +89,7 @@ export const FontPickerList = React.memo(
     );
 
     const sceneFamilies = useMemo(
-      () => new Set(fonts.getSceneFontFamilies()),
+      () => new Set(fonts.sceneFamilies),
       // cache per selected font family, so hover re-render won't mess it up
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [selectedFontFamily],

packages/excalidraw/components/HelpDialog.tsx

@@ -304,16 +304,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             className="HelpDialog__island--editor"
             caption={t("helpDialog.editor")}
           >
-            <Shortcut
-              label={t("helpDialog.createFlowchart")}
-              shortcuts={[getShortcutKey(`CtrlOrCmd+Arrow Key`)]}
-              isOr={true}
-            />
-            <Shortcut
-              label={t("helpDialog.navigateFlowchart")}
-              shortcuts={[getShortcutKey(`Alt+Arrow Key`)]}
-              isOr={true}
-            />
             <Shortcut
               label={t("labels.moveCanvas")}
               shortcuts={[

packages/excalidraw/components/HintViewer.scss

@@ -9,7 +9,6 @@ $wide-viewport-width: 1000px;
     box-sizing: border-box;
     position: absolute;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     left: 0;
     top: 100%;

packages/excalidraw/components/HintViewer.tsx

@@ -1,7 +1,6 @@
 import { t } from "../i18n";
 import type { AppClassProperties, Device, UIAppState } from "../types";
 import {
-  isFlowchartNodeElement,
   isImageElement,
   isLinearElement,
   isTextBindableContainer,
@@ -11,8 +10,6 @@ import { getShortcutKey } from "../utils";
 import { isEraserActive } from "../appState";
 
 import "./HintViewer.scss";
-import { isNodeInFlowchart } from "../element/flowchart";
-import { isGridModeEnabled } from "../snapping";
 
 interface HintViewerProps {
   appState: UIAppState;
@@ -21,12 +18,7 @@ interface HintViewerProps {
   app: AppClassProperties;
 }
 
-const getHints = ({
-  appState,
-  isMobile,
-  device,
-  app,
-}: HintViewerProps): null | string | string[] => {
+const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
@@ -38,13 +30,10 @@ const getHints = ({
     return t("hints.eraserRevert");
   }
   if (activeTool.type === "arrow" || activeTool.type === "line") {
-    if (multiMode) {
-      return t("hints.linearElementMulti");
+    if (!multiMode) {
+      return t("hints.linearElement");
     }
-    if (activeTool.type === "arrow") {
-      return t("hints.arrowTool", { arrowShortcut: getShortcutKey("A") });
-    }
-    return t("hints.linearElement");
+    return t("hints.linearElementMulti");
   }
 
   if (activeTool.type === "freedraw") {
@@ -87,21 +76,21 @@ const getHints = ({
     return t("hints.text_selected");
   }
 
-  if (appState.editingTextElement) {
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
     return t("hints.text_editing");
   }
 
   if (activeTool.type === "selection") {
     if (
-      appState.selectionElement &&
+      appState.draggingElement?.type === "selection" &&
       !selectedElements.length &&
-      !appState.editingTextElement &&
+      !appState.editingElement &&
       !appState.editingLinearElement
     ) {
       return t("hints.deepBoxSelect");
     }
 
-    if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
+    if (appState.gridSize && appState.draggingElement) {
       return t("hints.disableSnapping");
     }
 
@@ -119,23 +108,9 @@ const getHints = ({
         return t("hints.lineEditor_info");
       }
       if (
-        !appState.newElement &&
-        !appState.selectedElementsAreBeingDragged &&
+        !appState.draggingElement &&
         isTextBindableContainer(selectedElements[0])
       ) {
-        if (isFlowchartNodeElement(selectedElements[0])) {
-          if (
-            isNodeInFlowchart(
-              selectedElements[0],
-              app.scene.getNonDeletedElementsMap(),
-            )
-          ) {
-            return [t("hints.bindTextToElement"), t("hints.createFlowchart")];
-          }
-
-          return [t("hints.bindTextToElement"), t("hints.createFlowchart")];
-        }
-
         return t("hints.bindTextToElement");
       }
     }
@@ -150,24 +125,17 @@ export const HintViewer = ({
   device,
   app,
 }: HintViewerProps) => {
-  const hints = getHints({
+  let hint = getHints({
     appState,
     isMobile,
     device,
     app,
   });
-
-  if (!hints) {
+  if (!hint) {
     return null;
   }
 
-  const hint = Array.isArray(hints)
-    ? hints
-        .map((hint) => {
-          return getShortcutKey(hint).replace(/\. ?$/, "");
-        })
-        .join(". ")
-    : getShortcutKey(hints);
+  hint = getShortcutKey(hint);
 
   return (
     <div className="HintViewer">

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,8 +89,6 @@ const ImageExportModal = ({
   const previewRef = useRef<HTMLDivElement>(null);
   const [renderError, setRenderError] = useState<Error | null>(null);
 
-  const { onCopy, copyStatus } = useCopyStatus();
-
   const { exportedElements, exportingFrame } = prepareElementsForExport(
     elementsSnapshot,
     appStateSnapshot,
@@ -297,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/Sidebar/Sidebar.test.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { DEFAULT_SIDEBAR } from "../../constants";
 import { Excalidraw, Sidebar } from "../../index";
 import {
-  act,
   fireEvent,
+  GlobalTestState,
   queryAllByTestId,
   queryByTestId,
   render,
@@ -11,17 +11,39 @@ import {
   withExcalidrawDimensions,
 } from "../../tests/test-utils";
 import { vi } from "vitest";
-import {
-  assertExcalidrawWithSidebar,
-  assertSidebarDockButton,
-} from "./siderbar.test.helpers";
 
-const toggleSidebar = (
-  ...args: Parameters<typeof window.h.app.toggleSidebar>
-): Promise<boolean> => {
-  return act(() => {
-    return window.h.app.toggleSidebar(...args);
-  });
+export const assertSidebarDockButton = async <T extends boolean>(
+  hasDockButton: T,
+): Promise<
+  T extends false
+    ? { dockButton: null; sidebar: HTMLElement }
+    : { dockButton: HTMLElement; sidebar: HTMLElement }
+> => {
+  const sidebar =
+    GlobalTestState.renderResult.container.querySelector<HTMLElement>(
+      ".sidebar",
+    );
+  expect(sidebar).not.toBe(null);
+  const dockButton = queryByTestId(sidebar!, "sidebar-dock");
+  if (hasDockButton) {
+    expect(dockButton).not.toBe(null);
+    return { dockButton: dockButton!, sidebar: sidebar! } as any;
+  }
+  expect(dockButton).toBe(null);
+  return { dockButton: null, sidebar: sidebar! } as any;
+};
+
+export const assertExcalidrawWithSidebar = async (
+  sidebar: React.ReactNode,
+  name: string,
+  test: () => void,
+) => {
+  await render(
+    <Excalidraw initialData={{ appState: { openSidebar: { name } } }}>
+      {sidebar}
+    </Excalidraw>,
+  );
+  await withExcalidrawDimensions({ width: 1920, height: 1080 }, test);
 };
 
 describe("Sidebar", () => {
@@ -81,7 +103,7 @@ describe("Sidebar", () => {
 
       // toggle sidebar on
       // -------------------------------------------------------------------------
-      expect(await toggleSidebar({ name: "customSidebar" })).toBe(true);
+      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
 
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
@@ -90,7 +112,7 @@ describe("Sidebar", () => {
 
       // toggle sidebar off
       // -------------------------------------------------------------------------
-      expect(await toggleSidebar({ name: "customSidebar" })).toBe(false);
+      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(false);
 
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
@@ -99,9 +121,9 @@ describe("Sidebar", () => {
 
       // force-toggle sidebar off (=> still hidden)
       // -------------------------------------------------------------------------
-      expect(await toggleSidebar({ name: "customSidebar", force: false })).toBe(
-        false,
-      );
+      expect(
+        window.h.app.toggleSidebar({ name: "customSidebar", force: false }),
+      ).toBe(false);
 
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
@@ -110,12 +132,12 @@ describe("Sidebar", () => {
 
       // force-toggle sidebar on
       // -------------------------------------------------------------------------
-      expect(await toggleSidebar({ name: "customSidebar", force: true })).toBe(
-        true,
-      );
-      expect(await toggleSidebar({ name: "customSidebar", force: true })).toBe(
-        true,
-      );
+      expect(
+        window.h.app.toggleSidebar({ name: "customSidebar", force: true }),
+      ).toBe(true);
+      expect(
+        window.h.app.toggleSidebar({ name: "customSidebar", force: true }),
+      ).toBe(true);
 
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
@@ -124,7 +146,9 @@ describe("Sidebar", () => {
 
       // toggle library (= hide custom sidebar)
       // -------------------------------------------------------------------------
-      expect(await toggleSidebar({ name: DEFAULT_SIDEBAR.name })).toBe(true);
+      expect(window.h.app.toggleSidebar({ name: DEFAULT_SIDEBAR.name })).toBe(
+        true,
+      );
 
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
@@ -137,13 +161,13 @@ describe("Sidebar", () => {
 
       // closing sidebar using `{ name: null }`
       // -------------------------------------------------------------------------
-      expect(await toggleSidebar({ name: "customSidebar" })).toBe(true);
+      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
         expect(node).not.toBe(null);
       });
 
-      expect(await toggleSidebar({ name: null })).toBe(false);
+      expect(window.h.app.toggleSidebar({ name: null })).toBe(false);
       await waitFor(() => {
         const node = container.querySelector("#test-sidebar-content");
         expect(node).toBe(null);
@@ -297,9 +321,6 @@ describe("Sidebar", () => {
     });
 
     it("shouldn't be user-dockable when only `onDock` supplied w/o `docked`", async () => {
-      // we expect warnings in this test and don't want to pollute stdout
-      const mock = jest.spyOn(console, "warn").mockImplementation(() => {});
-
       await render(
         <Excalidraw
           initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
@@ -320,8 +341,6 @@ describe("Sidebar", () => {
           await assertSidebarDockButton(false);
         },
       );
-
-      mock.mockRestore();
     });
   });
 
@@ -348,9 +367,9 @@ describe("Sidebar", () => {
           ).toBeNull();
 
           // open library sidebar
-          expect(await toggleSidebar({ name: "custom", tab: "library" })).toBe(
-            true,
-          );
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "library" }),
+          ).toBe(true);
           expect(
             container.querySelector<HTMLElement>(
               "[role=tabpanel][data-testid=library]",
@@ -358,9 +377,9 @@ describe("Sidebar", () => {
           ).not.toBeNull();
 
           // switch to comments tab
-          expect(await toggleSidebar({ name: "custom", tab: "comments" })).toBe(
-            true,
-          );
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+          ).toBe(true);
           expect(
             container.querySelector<HTMLElement>(
               "[role=tabpanel][data-testid=comments]",
@@ -368,9 +387,9 @@ describe("Sidebar", () => {
           ).not.toBeNull();
 
           // toggle sidebar closed
-          expect(await toggleSidebar({ name: "custom", tab: "comments" })).toBe(
-            false,
-          );
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+          ).toBe(false);
           expect(
             container.querySelector<HTMLElement>(
               "[role=tabpanel][data-testid=comments]",
@@ -378,9 +397,9 @@ describe("Sidebar", () => {
           ).toBeNull();
 
           // toggle sidebar open
-          expect(await toggleSidebar({ name: "custom", tab: "comments" })).toBe(
-            true,
-          );
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+          ).toBe(true);
           expect(
             container.querySelector<HTMLElement>(
               "[role=tabpanel][data-testid=comments]",

packages/excalidraw/components/Sidebar/siderbar.test.helpers.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { Excalidraw } from "../..";
-import {
-  GlobalTestState,
-  queryByTestId,
-  render,
-  withExcalidrawDimensions,
-} from "../../tests/test-utils";
-
-export const assertSidebarDockButton = async <T extends boolean>(
-  hasDockButton: T,
-): Promise<
-  T extends false
-    ? { dockButton: null; sidebar: HTMLElement }
-    : { dockButton: HTMLElement; sidebar: HTMLElement }
-> => {
-  const sidebar =
-    GlobalTestState.renderResult.container.querySelector<HTMLElement>(
-      ".sidebar",
-    );
-  expect(sidebar).not.toBe(null);
-  const dockButton = queryByTestId(sidebar!, "sidebar-dock");
-  if (hasDockButton) {
-    expect(dockButton).not.toBe(null);
-    return { dockButton: dockButton!, sidebar: sidebar! } as any;
-  }
-  expect(dockButton).toBe(null);
-  return { dockButton: null, sidebar: sidebar! } as any;
-};
-
-export const assertExcalidrawWithSidebar = async (
-  sidebar: React.ReactNode,
-  name: string,
-  test: () => void,
-) => {
-  await render(
-    <Excalidraw initialData={{ appState: { openSidebar: { name } } }}>
-      {sidebar}
-    </Excalidraw>,
-  );
-  await withExcalidrawDimensions({ width: 1920, height: 1080 }, test);
-};

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

@@ -1,6 +1,6 @@
 import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
+import { isArrowElement } from "../../element/typeChecks";
 import type { ExcalidrawElement } from "../../element/types";
 import { degreeToRadian, radianToDegree } from "../../math";
 import { angleIcon } from "../icons";
@@ -27,9 +27,8 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
   scene,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
-  if (origElement && !isElbowArrow(origElement)) {
+  if (origElement) {
     const latestElement = elementsMap.get(origElement.id);
     if (!latestElement) {
       return;
@@ -40,7 +39,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
       mutateElement(latestElement, {
         angle: nextAngle,
       });
-      updateBindings(latestElement, elementsMap, elements, scene);
+      updateBindings(latestElement, elementsMap);
 
       const boundTextElement = getBoundTextElement(latestElement, elementsMap);
       if (boundTextElement && !isArrowElement(latestElement)) {
@@ -66,7 +65,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
     mutateElement(latestElement, {
       angle: nextAngle,
     });
-    updateBindings(latestElement, elementsMap, elements, scene);
+    updateBindings(latestElement, elementsMap);
 
     const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement && !isArrowElement(latestElement)) {

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,
@@ -30,7 +31,6 @@ const handleDimensionChange: DragInputCallbackType<
   scene,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
   if (origElement) {
     const keepAspectRatio =
@@ -61,8 +61,6 @@ const handleDimensionChange: DragInputCallbackType<
         keepAspectRatio,
         origElement,
         elementsMap,
-        elements,
-        scene,
       );
 
       return;
@@ -105,8 +103,6 @@ const handleDimensionChange: DragInputCallbackType<
       keepAspectRatio,
       origElement,
       elementsMap,
-      elements,
-      scene,
     );
   }
 };

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

@@ -25,11 +25,10 @@ export type DragInputCallbackType<
   originalElementsMap: ElementsMap;
   shouldKeepAspectRatio: boolean;
   shouldChangeByStepSize: boolean;
-  scene: Scene;
   nextValue?: number;
   property: P;
+  scene: Scene;
   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);
@@ -126,53 +122,31 @@ const StatsDragInput = <
         originalElementsMap: app.scene.getNonDeletedElementsMap(),
         shouldKeepAspectRatio: shouldKeepAspectRatio!!,
         shouldChangeByStepSize: false,
-        scene,
         nextValue: rounded,
         property,
+        scene,
         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/MultiDimension.tsx

@@ -68,7 +68,6 @@ const resizeElementInGroup = (
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
-  const { width: oldWidth, height: oldHeight } = latestElement;
 
   mutateElement(latestElement, updates, false);
   const boundTextElement = getBoundTextElement(
@@ -78,7 +77,7 @@ const resizeElementInGroup = (
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
     updateBoundElements(latestElement, elementsMap, {
-      oldSize: { width: oldWidth, height: oldHeight },
+      newSize: { width: updates.width, height: updates.height },
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
@@ -150,7 +149,6 @@ const handleDimensionChange: DragInputCallbackType<
   property,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const atomicUnits = getAtomicUnits(originalElements, originalAppState);
   if (nextValue !== undefined) {
     for (const atomicUnit of atomicUnits) {
@@ -229,8 +227,6 @@ const handleDimensionChange: DragInputCallbackType<
             false,
             origElement,
             elementsMap,
-            elements,
-            scene,
             false,
           );
         }
@@ -324,15 +320,7 @@ const handleDimensionChange: DragInputCallbackType<
         nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
         nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
 
-        resizeElement(
-          nextWidth,
-          nextHeight,
-          false,
-          origElement,
-          elementsMap,
-          elements,
-          scene,
-        );
+        resizeElement(nextWidth, nextHeight, false, origElement, elementsMap);
       }
     }
   }

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -1,7 +1,6 @@
 import type {
   ElementsMap,
   ExcalidrawElement,
-  NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
 } from "../../element/types";
 import { rotate } from "../../math";
@@ -34,7 +33,6 @@ const moveElements = (
   originalElements: readonly ExcalidrawElement[],
   elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
-  scene: Scene,
 ) => {
   for (let i = 0; i < elements.length; i++) {
     const origElement = originalElements[i];
@@ -62,8 +60,6 @@ const moveElements = (
       newTopLeftY,
       origElement,
       elementsMap,
-      elements,
-      scene,
       originalElementsMap,
       false,
     );
@@ -75,7 +71,6 @@ const moveGroupTo = (
   nextY: number,
   originalElements: ExcalidrawElement[],
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
   originalElementsMap: ElementsMap,
   scene: Scene,
 ) => {
@@ -111,8 +106,6 @@ const moveGroupTo = (
         topLeftY + offsetY,
         origElement,
         elementsMap,
-        elements,
-        scene,
         originalElementsMap,
         false,
       );
@@ -133,7 +126,6 @@ const handlePositionChange: DragInputCallbackType<
   originalAppState,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
 
   if (nextValue !== undefined) {
     for (const atomicUnit of getAtomicUnits(
@@ -158,7 +150,6 @@ const handlePositionChange: DragInputCallbackType<
           newTopLeftY,
           elementsInUnit.map((el) => el.original),
           elementsMap,
-          elements,
           originalElementsMap,
           scene,
         );
@@ -189,8 +180,6 @@ const handlePositionChange: DragInputCallbackType<
             newTopLeftY,
             origElement,
             elementsMap,
-            elements,
-            scene,
             originalElementsMap,
             false,
           );
@@ -217,7 +206,6 @@ const handlePositionChange: DragInputCallbackType<
     originalElements,
     elementsMap,
     originalElementsMap,
-    scene,
   );
 
   scene.triggerUpdate();

packages/excalidraw/components/Stats/Position.tsx

@@ -26,7 +26,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
   scene,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
   const [cx, cy] = [
     origElement.x + origElement.width / 2,
@@ -48,8 +47,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
       newTopLeftY,
       origElement,
       elementsMap,
-      elements,
-      scene,
       originalElementsMap,
     );
     return;
@@ -81,8 +78,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     newTopLeftY,
     origElement,
     elementsMap,
-    elements,
-    scene,
     originalElementsMap,
   );
 };
@@ -109,9 +104,9 @@ const Position = ({
       label={property === "x" ? "X" : "Y"}
       elements={[element]}
       dragInputCallback={handlePositionChange}
-      scene={scene}
       value={value}
       property={property}
+      scene={scene}
       appState={appState}
     />
   );

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,13 @@ 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 +32,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 +44,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 +105,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 +120,7 @@ export const StatsInner = memo(
             openTrigger={() =>
               setAppState((state) => {
                 return {
+                  ...state,
                   stats: {
                     open: true,
                     panels: state.stats.panels ^ STATS_PANELS.generalStats,
@@ -185,36 +129,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 +166,7 @@ export const StatsInner = memo(
                 openTrigger={() =>
                   setAppState((state) => {
                     return {
+                      ...state,
                       stats: {
                         open: true,
                         panels:
@@ -241,139 +176,115 @@ 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>
-                      {!isElbowArrow(singleElement) && (
-                        <StatsRow>
-                          <Angle
-                            property="angle"
-                            element={singleElement}
-                            scene={scene}
-                            appState={appState}
-                          />
-                        </StatsRow>
-                      )}
-                      <StatsRow>
-                        <FontSize
-                          property="fontSize"
-                          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}
+                      />
+                      <Angle
+                        property="angle"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <FontSize
+                        property="fontSize"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
+                    </div>
+                  </div>
+                )}
 
-                  {multipleElements && (
-                    <>
-                      {elementsAreInSameGroup(multipleElements) && (
-                        <StatsRow heading>{t("element.group")}</StatsRow>
-                      )}
+                {multipleElements && (
+                  <div className="sectionContent">
+                    {elementsAreInSameGroup(multipleElements) && (
+                      <div className="elementType">{t("element.group")}</div>
+                    )}
 
-                      <StatsRow columns={2} style={{ margin: "0.3125rem 0" }}>
-                        <div>{t("stats.shapes")}</div>
-                        <div>{selectedElements.length}</div>
-                      </StatsRow>
+                    <div className="elementsCount">
+                      <div>{t("stats.elements")}</div>
+                      <div>{selectedElements.length}</div>
+                    </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="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 +296,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

@@ -1,5 +1,4 @@
-import React from "react";
-import { act, fireEvent, queryByTestId } from "@testing-library/react";
+import { fireEvent, queryByTestId } from "@testing-library/react";
 import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
 import { getStepSizedValue } from "./utils";
 import {
@@ -25,6 +24,7 @@ import { getCommonBounds, isTextElement } from "../../element";
 import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
+import React from "react";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -32,6 +32,27 @@ const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 let stats: HTMLElement | null = null;
 let elementStats: HTMLElement | null | undefined = null;
 
+const editInput = (input: HTMLInputElement, value: string) => {
+  input.focus();
+  fireEvent.change(input, { target: { value } });
+  input.blur();
+};
+
+const getStatsProperty = (label: string) => {
+  const elementStats = UI.queryStats()?.querySelector("#elementStats");
+
+  if (elementStats) {
+    const properties = elementStats?.querySelector(".statsItem");
+    return (
+      properties?.querySelector?.(
+        `.drag-input-container[data-testid="${label}"]`,
+      ) || null
+    );
+  }
+
+  return null;
+};
+
 const testInputProperty = (
   element: ExcalidrawElement,
   property: "x" | "y" | "width" | "height" | "angle" | "fontSize",
@@ -39,12 +60,12 @@ const testInputProperty = (
   initialValue: number,
   nextValue: number,
 ) => {
-  const input = UI.queryStatsProperty(label)?.querySelector(
+  const input = getStatsProperty(label)?.querySelector(
     ".drag-input",
   ) as HTMLInputElement;
   expect(input).toBeDefined();
   expect(input.value).toBe(initialValue.toString());
-  UI.updateInput(input, String(nextValue));
+  editInput(input, String(nextValue));
   if (property === "angle") {
     expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
   } else if (property === "fontSize" && isTextElement(element)) {
@@ -89,7 +110,7 @@ describe("binding with linear elements", () => {
 
     await render(<Excalidraw handleKeyboardGlobally={true} />);
 
-    API.setElements([]);
+    h.elements = [];
 
     fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
@@ -121,47 +142,47 @@ 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;
 
     expect(linear.startBinding).not.toBe(null);
     expect(inputX).not.toBeNull();
-    UI.updateInput(inputX, String("204"));
+    editInput(inputX, String("204"));
     expect(linear.startBinding).not.toBe(null);
   });
 
   it("should remain bound to linear element on small angle change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
     expect(linear.startBinding).not.toBe(null);
-    UI.updateInput(inputAngle, String("1"));
+    editInput(inputAngle, String("1"));
     expect(linear.startBinding).not.toBe(null);
   });
 
   it("should unbind linear element on large position change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = UI.queryStatsProperty("X")?.querySelector(
+    const inputX = getStatsProperty("X")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
     expect(linear.startBinding).not.toBe(null);
     expect(inputX).not.toBeNull();
-    UI.updateInput(inputX, String("254"));
+    editInput(inputX, String("254"));
     expect(linear.startBinding).toBe(null);
   });
 
   it("should remain bound to linear element on small angle change", async () => {
     const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
     expect(linear.startBinding).not.toBe(null);
-    UI.updateInput(inputAngle, String("45"));
+    editInput(inputAngle, String("45"));
     expect(linear.startBinding).toBe(null);
   });
 });
@@ -176,7 +197,7 @@ describe("stats for a generic element", () => {
 
     await render(<Excalidraw handleKeyboardGlobally={true} />);
 
-    API.setElements([]);
+    h.elements = [];
 
     fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
@@ -210,14 +231,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,18 +263,18 @@ 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();
     expect(input.value).toBe(rectangle.width.toString());
-    UI.updateInput(input, "123.123");
+    editInput(input, "123.123");
     expect(h.elements.length).toBe(1);
     expect(rectangle.id).toBe(rectangleId);
     expect(input.value).toBe("123.12");
     expect(rectangle.width).toBe(123.12);
 
-    UI.updateInput(input, "88.98766");
+    editInput(input, "88.98766");
     expect(input.value).toBe("88.99");
     expect(rectangle.width).toBe(88.99);
   });
@@ -268,11 +293,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;
 
@@ -362,7 +387,7 @@ describe("stats for a non-generic element", () => {
 
     await render(<Excalidraw handleKeyboardGlobally={true} />);
 
-    API.setElements([]);
+    h.elements = [];
 
     fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
@@ -387,10 +412,9 @@ describe("stats for a non-generic element", () => {
     mouse.clickAt(20, 30);
     const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
     const editor = await getTextEditor(textEditorSelector, true);
+    await new Promise((r) => setTimeout(r, 0));
     updateTextEditor(editor, "Hello!");
-    act(() => {
-      editor.blur();
-    });
+    editor.blur();
 
     const text = h.elements[0] as ExcalidrawTextElement;
     mouse.clickOn(text);
@@ -398,22 +422,22 @@ 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();
     expect(input.value).toBe(text.fontSize.toString());
-    UI.updateInput(input, "36");
+    editInput(input, "36");
     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
-    UI.updateInput(input, "0");
+    editInput(input, "0");
     expect(text.fontSize).not.toBe(0);
     expect(text.fontSize).toBe(4);
   });
@@ -425,8 +449,8 @@ describe("stats for a non-generic element", () => {
       x: 150,
       width: 150,
     });
-    API.setElements([frame]);
-    API.setAppState({
+    h.elements = [frame];
+    h.setState({
       selectedElementIds: {
         [frame.id]: true,
       },
@@ -437,7 +461,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
@@ -447,9 +471,9 @@ describe("stats for a non-generic element", () => {
 
   it("image element", () => {
     const image = API.createElement({ type: "image", width: 200, height: 100 });
-    API.setElements([image]);
+    h.elements = [image];
     mouse.clickOn(image);
-    API.setAppState({
+    h.setState({
       selectedElementIds: {
         [image.id]: true,
       },
@@ -484,15 +508,15 @@ describe("stats for a non-generic element", () => {
     mutateElement(container, {
       boundElements: [{ type: "text", id: text.id }],
     });
-    API.setElements([container, text]);
+    h.elements = [container, text];
 
     API.setSelectedElements([container]);
-    const fontSize = UI.queryStatsProperty("F")?.querySelector(
+    const fontSize = getStatsProperty("F")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
     expect(fontSize).toBeDefined();
 
-    UI.updateInput(fontSize, "40");
+    editInput(fontSize, "40");
 
     expect(text.fontSize).toBe(40);
   });
@@ -509,7 +533,7 @@ describe("stats for multiple elements", () => {
 
     await render(<Excalidraw handleKeyboardGlobally={true} />);
 
-    API.setElements([]);
+    h.elements = [];
 
     fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
@@ -542,7 +566,7 @@ describe("stats for multiple elements", () => {
     mouse.down(-100, -100);
     mouse.up(125, 145);
 
-    API.setAppState({
+    h.setState({
       selectedElementIds: h.elements.reduce((acc, el) => {
         acc[el.id] = true;
         return acc;
@@ -551,25 +575,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?.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");
 
-    UI.updateInput(width, "250");
+    editInput(width, "250");
     h.elements.forEach((el) => {
       expect(el.width).toBe(250);
     });
 
-    UI.updateInput(height, "450");
+    editInput(height, "450");
     h.elements.forEach((el) => {
       expect(el.height).toBe(450);
     });
@@ -581,10 +605,9 @@ describe("stats for multiple elements", () => {
     mouse.clickAt(20, 30);
     const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
     const editor = await getTextEditor(textEditorSelector, true);
+    await new Promise((r) => setTimeout(r, 0));
     updateTextEditor(editor, "Hello!");
-    act(() => {
-      editor.blur();
-    });
+    editor.blur();
 
     UI.clickTool("rectangle");
     mouse.down();
@@ -596,12 +619,12 @@ describe("stats for multiple elements", () => {
       width: 150,
     });
 
-    API.setElements([...h.elements, frame]);
+    h.elements = [...h.elements, frame];
 
     const text = h.elements.find((el) => el.type === "text");
     const rectangle = h.elements.find((el) => el.type === "rectangle");
 
-    API.setAppState({
+    h.setState({
       selectedElementIds: h.elements.reduce((acc, el) => {
         acc[el.id] = true;
         return acc;
@@ -610,37 +633,37 @@ 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();
 
     // changing width does not affect text
-    UI.updateInput(width, "200");
+    editInput(width, "200");
 
     expect(rectangle?.width).toBe(200);
     expect(frame.width).toBe(200);
     expect(text?.width).not.toBe(200);
 
-    UI.updateInput(angle, "40");
+    editInput(angle, "40");
 
     const angleInRadian = degreeToRadian(40);
     expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
@@ -663,7 +686,7 @@ describe("stats for multiple elements", () => {
         mouse.click();
       });
 
-      API.executeAction(actionGroup);
+      h.app.actionManager.executeAction(actionGroup);
     };
 
     createAndSelectGroup();
@@ -673,58 +696,58 @@ describe("stats for multiple elements", () => {
 
     elementStats = stats?.querySelector("#elementStats");
 
-    const x = UI.queryStatsProperty("X")?.querySelector(
+    const x = getStatsProperty("X")?.querySelector(
       ".drag-input",
     ) as HTMLInputElement;
 
     expect(x).toBeDefined();
     expect(Number(x.value)).toBe(x1);
 
-    UI.updateInput(x, "300");
+    editInput(x, "300");
 
     expect(h.elements[0].x).toBe(300);
     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;
 
     expect(y).toBeDefined();
     expect(Number(y.value)).toBe(y1);
 
-    UI.updateInput(y, "200");
+    editInput(y, "200");
 
     expect(h.elements[0].y).toBe(200);
     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();
     expect(Number(height.value)).toBe(200);
 
-    UI.updateInput(width, "400");
+    editInput(width, "400");
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     let newGroupWidth = x2 - x1;
 
     expect(newGroupWidth).toBeCloseTo(400, 4);
 
-    UI.updateInput(width, "300");
+    editInput(width, "300");
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     newGroupWidth = x2 - x1;
     expect(newGroupWidth).toBeCloseTo(300, 4);
 
-    UI.updateInput(height, "500");
+    editInput(height, "500");
 
     [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
     const newGroupHeight = y2 - y1;

packages/excalidraw/components/Stats/utils.ts

@@ -31,7 +31,6 @@ import {
   isInGroup,
 } from "../../groups";
 import { rotate } from "../../math";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 import { getFontString } from "../../utils";
 
@@ -41,8 +40,7 @@ export type StatsInputProperty =
   | "width"
   | "height"
   | "angle"
-  | "fontSize"
-  | "gridStep";
+  | "fontSize";
 
 export const SMALLEST_DELTA = 0.01;
 
@@ -126,8 +124,6 @@ export const resizeElement = (
   keepAspectRatio: boolean,
   origElement: ExcalidrawElement,
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
-  scene: Scene,
   shouldInformMutation = true,
 ) => {
   const latestElement = elementsMap.get(origElement.id);
@@ -150,8 +146,6 @@ export const resizeElement = (
     nextHeight = Math.max(nextHeight, minHeight);
   }
 
-  const { width: oldWidth, height: oldHeight } = latestElement;
-
   mutateElement(
     latestElement,
     {
@@ -170,7 +164,7 @@ export const resizeElement = (
     },
     shouldInformMutation,
   );
-  updateBindings(latestElement, elementsMap, elements, scene, {
+  updateBindings(latestElement, elementsMap, {
     newSize: {
       width: nextWidth,
       height: nextHeight,
@@ -199,10 +193,6 @@ export const resizeElement = (
     }
   }
 
-  updateBoundElements(latestElement, elementsMap, {
-    oldSize: { width: oldWidth, height: oldHeight },
-  });
-
   if (boundTextElement && boundTextFont) {
     mutateElement(boundTextElement, {
       fontSize: boundTextFont.fontSize,
@@ -216,8 +206,6 @@ export const moveElement = (
   newTopLeftY: number,
   originalElement: ExcalidrawElement,
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
-  scene: Scene,
   originalElementsMap: ElementsMap,
   shouldInformMutation = true,
 ) => {
@@ -256,7 +244,7 @@ export const moveElement = (
     },
     shouldInformMutation,
   );
-  updateBindings(latestElement, elementsMap, elements, scene);
+  updateBindings(latestElement, elementsMap);
 
   const boundTextElement = getBoundTextElement(
     originalElement,
@@ -300,22 +288,13 @@ export const getAtomicUnits = (
 export const updateBindings = (
   latestElement: ExcalidrawElement,
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
-  scene: Scene,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: { width: number; height: number };
   },
 ) => {
   if (isLinearElement(latestElement)) {
-    bindOrUnbindLinearElements(
-      [latestElement],
-      elementsMap,
-      elements,
-      scene,
-      true,
-      [],
-    );
+    bindOrUnbindLinearElements([latestElement], elementsMap, true, []);
   } else {
     updateBoundElements(latestElement, elementsMap, options);
   }

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/DropdownMenu.test.tsx

@@ -1,13 +1,7 @@
-import React from "react";
 import { Excalidraw } from "../../index";
 import { KEYS } from "../../keys";
 import { Keyboard } from "../../tests/helpers/ui";
-import {
-  render,
-  waitFor,
-  getByTestId,
-  fireEvent,
-} from "../../tests/test-utils";
+import { render, waitFor, getByTestId } from "../../tests/test-utils";
 
 describe("Test <DropdownMenu/>", () => {
   it("should", async () => {
@@ -15,7 +9,7 @@ describe("Test <DropdownMenu/>", () => {
 
     expect(window.h.state.openMenu).toBe(null);
 
-    fireEvent.click(getByTestId(container, "main-menu-trigger"));
+    getByTestId(container, "main-menu-trigger").click();
     expect(window.h.state.openMenu).toBe("canvas");
 
     await waitFor(() => {

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/components/hoc/withInternalFallback.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, queryAllByTestId } from "../../tests/test-utils";
 import { Excalidraw, MainMenu } from "../../index";
 

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -211,7 +211,7 @@ export const Hyperlink = ({
   const { x, y } = getCoordsForPopover(element, appState, elementsMap);
   if (
     appState.contextMenu ||
-    appState.selectedElementsAreBeingDragged ||
+    appState.draggingElement ||
     appState.resizingElement ||
     appState.isRotating ||
     appState.openMenu ||

packages/excalidraw/components/icons.tsx

@@ -2095,35 +2095,6 @@ export const lineEditorIcon = createIcon(
   tablerIconProps,
 );
 
-// arrow-up-right (modified)
-export const sharpArrowIcon = createIcon(
-  <g>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M6 18l12 -12" />
-    <path d="M18 10v-4h-4" />
-  </g>,
-  tablerIconProps,
-);
-
-// arrow-guide (modified)
-export const elbowArrowIcon = createIcon(
-  <g>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M4,19L10,19C11.097,19 12,18.097 12,17L12,9C12,7.903 12.903,7 14,7L21,7" />
-    <path d="M18 4l3 3l-3 3" />
-  </g>,
-  tablerIconProps,
-);
-
-// arrow-ramp-right-2 (heavily modified)
-export const roundArrowIcon = createIcon(
-  <g>
-    <path d="M16,12L20,9L16,6" />
-    <path d="M6 20c0 -6.075 4.925 -11 11 -11h3" />
-  </g>,
-  tablerIconProps,
-);
-
 export const collapseDownIcon = createIcon(
   <g>
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />

packages/excalidraw/constants.ts

@@ -1,5 +1,5 @@
 import cssVariables from "./css/variables.module.scss";
-import type { AppProps, AppState } from "./types";
+import type { AppProps } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 import { COLOR_PALETTE } from "./colors";
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
@@ -179,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",
@@ -235,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
@@ -422,9 +421,3 @@ export const DEFAULT_FILENAME = "Untitled";
 export const STATS_PANELS = { generalStats: 1, elementProperties: 2 } as const;
 
 export const MIN_WIDTH_OR_HEIGHT = 1;
-
-export const ARROW_TYPE: { [T in AppState["currentItemArrowType"]]: T } = {
-  sharp: "sharp",
-  round: "round",
-  elbow: "elbow",
-};

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/__snapshots__/transform.test.ts.snap

@@ -84,11 +84,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": null,
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "fixedPoint": null,
     "focus": -0.008153707962747813,
     "gap": 1,
   },
@@ -119,7 +117,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id47",
-    "fixedPoint": null,
     "focus": -0.08139534883720931,
     "gap": 1,
   },
@@ -142,11 +139,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": null,
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "fixedPoint": null,
     "focus": 0.10666666666666667,
     "gap": 3.834326468444573,
   },
@@ -177,7 +172,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "diamond-1",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -334,11 +328,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "text-2",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 205,
   },
@@ -369,7 +361,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "startArrowhead": null,
   "startBinding": {
     "elementId": "text-1",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -438,11 +429,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id40",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -473,7 +462,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id39",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -616,11 +604,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id44",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -651,7 +637,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id43",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -839,7 +824,6 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -887,7 +871,6 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "triangle",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1480,11 +1463,9 @@ exports[`Test Transform > should transform the elements correctly when linear el
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "Alice",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 5.299874999999986,
   },
@@ -1517,7 +1498,6 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -1545,11 +1525,9 @@ exports[`Test Transform > should transform the elements correctly when linear el
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "B",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -1578,7 +1556,6 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "fixedPoint": null,
     "focus": 0,
     "gap": 1,
   },
@@ -1860,7 +1837,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1913,7 +1889,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1966,7 +1941,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -2019,7 +1993,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
     },
   ],
   "customData": undefined,
-  "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",

packages/excalidraw/data/blob.ts

@@ -154,7 +154,11 @@ export const loadSceneOrLibraryFromBlob = async (
           },
           localAppState,
           localElements,
-          { repairBindings: true, refreshDimensions: false },
+          {
+            repairBindings: true,
+            normalizeIndices: true,
+            refreshDimensions: false,
+          },
         ),
       };
     } else if (isValidLibrary(data)) {

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

@@ -1,11 +1,5 @@
-import throttle from "lodash.throttle";
-import { ENV } from "../constants";
 import type { OrderedExcalidrawElement } from "../element/types";
-import {
-  orderByFractionalIndex,
-  syncInvalidIndices,
-  validateFractionalIndices,
-} from "../fractionalIndex";
+import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
 import type { AppState } from "../types";
 import type { MakeBrand } from "../utility-types";
 import { arrayToMap } from "../utils";
@@ -24,9 +18,9 @@ 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.id === localAppState.draggingElement?.id || // TODO: Is this still valid? As draggingElement is selection element, which is never part of the elements array
       // local element is newer
       local.version > remote.version ||
       // resolve conflicting edits deterministically by taking the one with
@@ -39,37 +33,6 @@ const shouldDiscardRemoteElement = (
   return false;
 };
 
-const validateIndicesThrottled = throttle(
-  (
-    orderedElements: readonly OrderedExcalidrawElement[],
-    localElements: readonly OrderedExcalidrawElement[],
-    remoteElements: readonly RemoteExcalidrawElement[],
-  ) => {
-    if (
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
-      // create new instances due to the mutation
-      const elements = syncInvalidIndices(
-        orderedElements.map((x) => ({ ...x })),
-      );
-
-      validateFractionalIndices(elements, {
-        // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
-        includeBoundTextValidation: true,
-        reconciliationContext: {
-          localElements,
-          remoteElements,
-        },
-      });
-    }
-  },
-  1000 * 60,
-  { leading: true, trailing: false },
-);
-
 export const reconcileElements = (
   localElements: readonly OrderedExcalidrawElement[],
   remoteElements: readonly RemoteExcalidrawElement[],
@@ -109,8 +72,6 @@ export const reconcileElements = (
 
   const orderedElements = orderByFractionalIndex(reconciledElements);
 
-  validateIndicesThrottled(orderedElements, localElements, remoteElements);
-
   // de-duplicate indices
   syncInvalidIndices(orderedElements);
 

packages/excalidraw/data/restore.ts

@@ -1,5 +1,4 @@
 import type {
-  ExcalidrawArrowElement,
   ExcalidrawElement,
   ExcalidrawElementType,
   ExcalidrawLinearElement,
@@ -10,7 +9,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,
@@ -20,7 +24,6 @@ import {
 } from "../element";
 import {
   isArrowElement,
-  isElbowArrow,
   isLinearElement,
   isTextElement,
   isUsingAdaptiveRadius,
@@ -34,30 +37,18 @@ 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";
 import { normalizeLink } from "./url";
-import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
 import { getLineHeight } from "../fonts";
-import { normalizeFixedPoint } from "../element/binding";
-import {
-  getNormalizedGridSize,
-  getNormalizedGridStep,
-  getNormalizedZoom,
-} from "../scene";
+import { normalizeIndices, syncInvalidIndices } from "../fractionalIndex";
 
 type RestoredAppState = Omit<
   AppState,
@@ -101,21 +92,11 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
   return DEFAULT_FONT_FAMILY;
 };
 
-const repairBinding = (
-  element: ExcalidrawLinearElement,
-  binding: PointBinding | null,
-): PointBinding | null => {
+const repairBinding = (binding: PointBinding | null) => {
   if (!binding) {
     return null;
   }
-
-  return {
-    ...binding,
-    focus: binding.focus || 0,
-    fixedPoint: isElbowArrow(element)
-      ? normalizeFixedPoint(binding.fixedPoint ?? [0, 0])
-      : null,
-  };
+  return { ...binding, focus: binding.focus || 0 };
 };
 
 const restoreElementWithProperties = <
@@ -261,7 +242,11 @@ const restoreElement = (
     // @ts-ignore LEGACY type
     // eslint-disable-next-line no-fallthrough
     case "draw":
-      const { startArrowhead = null, endArrowhead = null } = element;
+    case "arrow": {
+      const {
+        startArrowhead = null,
+        endArrowhead = element.type === "arrow" ? "arrow" : null,
+      } = element;
       let x = element.x;
       let y = element.y;
       let points = // migrate old arrow model to new one
@@ -281,8 +266,8 @@ const restoreElement = (
           (element.type as ExcalidrawElementType | "draw") === "draw"
             ? "line"
             : element.type,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
+        startBinding: repairBinding(element.startBinding),
+        endBinding: repairBinding(element.endBinding),
         lastCommittedPoint: null,
         startArrowhead,
         endArrowhead,
@@ -291,36 +276,6 @@ const restoreElement = (
         y,
         ...getSizeFromPoints(points),
       });
-    case "arrow": {
-      const { startArrowhead = null, endArrowhead = "arrow" } = element;
-      let x = element.x;
-      let y = element.y;
-      let points = // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2
-          ? [
-              [0, 0],
-              [element.width, element.height],
-            ]
-          : element.points;
-
-      if (points[0][0] !== 0 || points[0][1] !== 0) {
-        ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
-      }
-
-      // TODO: Separate arrow from linear element
-      return restoreElementWithProperties(element as ExcalidrawArrowElement, {
-        type: element.type,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
-        lastCommittedPoint: null,
-        startArrowhead,
-        endArrowhead,
-        points,
-        x,
-        y,
-        elbowed: (element as ExcalidrawArrowElement).elbowed,
-        ...getSizeFromPoints(points),
-      });
     }
 
     // generic elements
@@ -450,36 +405,41 @@ export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  opts?: { refreshDimensions?: boolean; repairBindings?: boolean } | undefined,
+  opts?:
+    | {
+        refreshDimensions?: boolean;
+        repairBindings?: boolean;
+        normalizeIndices?: boolean;
+      }
+    | undefined,
 ): OrderedExcalidrawElement[] => {
   // used to detect duplicate top-level element ids
   const existingIds = new Set<string>();
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
-  const restoredElements = syncInvalidIndices(
-    (elements || []).reduce((elements, element) => {
-      // filtering out selection, which is legacy, no longer kept in elements,
-      // and causing issues if retained
-      if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
-        let migratedElement: ExcalidrawElement | null = restoreElement(element);
-        if (migratedElement) {
-          const localElement = localElementsMap?.get(element.id);
-          if (localElement && localElement.version > migratedElement.version) {
-            migratedElement = bumpVersion(
-              migratedElement,
-              localElement.version,
-            );
-          }
-          if (existingIds.has(migratedElement.id)) {
-            migratedElement = { ...migratedElement, id: randomId() };
-          }
-          existingIds.add(migratedElement.id);
-
-          elements.push(migratedElement);
+  const restoredElementsTemp = (elements || []).reduce((elements, element) => {
+    // filtering out selection, which is legacy, no longer kept in elements,
+    // and causing issues if retained
+    if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
+      let migratedElement: ExcalidrawElement | null = restoreElement(element);
+      if (migratedElement) {
+        const localElement = localElementsMap?.get(element.id);
+        if (localElement && localElement.version > migratedElement.version) {
+          migratedElement = bumpVersion(migratedElement, localElement.version);
         }
+        if (existingIds.has(migratedElement.id)) {
+          migratedElement = { ...migratedElement, id: randomId() };
+        }
+        existingIds.add(migratedElement.id);
+
+        elements.push(migratedElement);
       }
-      return elements;
-    }, [] as ExcalidrawElement[]),
-  );
+    }
+    return elements;
+  }, [] as ExcalidrawElement[]);
+
+  const restoredElements = opts?.normalizeIndices
+    ? normalizeIndices(restoredElementsTemp)
+    : syncInvalidIndices(restoredElementsTemp);
 
   if (!opts?.repairBindings) {
     return restoredElements;
@@ -620,24 +580,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,
-    ),
   };
 };
 
@@ -651,7 +606,11 @@ export const restore = (
    */
   localAppState: Partial<AppState> | null | undefined,
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  elementsConfig?: { refreshDimensions?: boolean; repairBindings?: boolean },
+  elementsConfig?: {
+    refreshDimensions?: boolean;
+    repairBindings?: boolean;
+    normalizeIndices?: boolean;
+  },
 ): RestoredDataState => {
   return {
     elements: restoreElements(data?.elements, localElements, elementsConfig),

packages/excalidraw/data/transform.test.ts

@@ -771,7 +771,6 @@ describe("Test Transform", () => {
       const [arrow, rect] = excalidrawElements;
       expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
         elementId: "rect-1",
-        fixedPoint: null,
         focus: 0,
         gap: 205,
       });

packages/excalidraw/data/transform.ts

@@ -13,7 +13,6 @@ import {
 import { bindLinearElement } from "../element/binding";
 import type { ElementConstructorOpts } from "../element/newElement";
 import {
-  newArrowElement,
   newFrameElement,
   newImageElement,
   newMagicFrameElement,
@@ -52,7 +51,6 @@ import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getLineHeight } from "../fonts";
-import { isArrowElement } from "../element/typeChecks";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -547,7 +545,7 @@ export const convertToExcalidrawElements = (
       case "arrow": {
         const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
         const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
-        excalidrawElement = newArrowElement({
+        excalidrawElement = newLinearElement({
           width,
           height,
           endArrowhead: "arrow",
@@ -556,7 +554,6 @@ export const convertToExcalidrawElements = (
             [width, height],
           ],
           ...element,
-          type: "arrow",
         });
 
         Object.assign(
@@ -658,7 +655,7 @@ export const convertToExcalidrawElements = (
           elementStore.add(container);
           elementStore.add(text);
 
-          if (isArrowElement(container)) {
+          if (container.type === "arrow") {
             const originalStart =
               element.type === "arrow" ? element?.start : undefined;
             const originalEnd =
@@ -677,7 +674,7 @@ export const convertToExcalidrawElements = (
             }
             const { linearElement, startBoundElement, endBoundElement } =
               bindLinearElementToElement(
-                container,
+                container as ExcalidrawArrowElement,
                 originalStart,
                 originalEnd,
                 elementStore,

packages/excalidraw/element/ElementCanvasButtons.tsx

@@ -36,7 +36,7 @@ export const ElementCanvasButtons = ({
 
   if (
     appState.contextMenu ||
-    appState.newElement ||
+    appState.draggingElement ||
     appState.resizingElement ||
     appState.isRotating ||
     appState.openMenu ||

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,18 +4,12 @@ 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";
 import {
   isArrowElement,
-  isElbowArrow,
   isFrameLikeElement,
   isTextElement,
 } from "./typeChecks";
@@ -24,34 +18,16 @@ import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
-  _selectedElements: NonDeletedExcalidrawElement[],
+  selectedElements: NonDeletedExcalidrawElement[],
   offset: { x: number; y: number },
+  appState: AppState,
   scene: Scene,
   snapOffset: {
     x: number;
     y: number;
   },
-  gridSize: NullableGridSize,
+  gridSize: AppState["gridSize"],
 ) => {
-  if (
-    _selectedElements.length === 1 &&
-    isArrowElement(_selectedElements[0]) &&
-    isElbowArrow(_selectedElements[0]) &&
-    (_selectedElements[0].startBinding || _selectedElements[0].endBinding)
-  ) {
-    return;
-  }
-
-  const selectedElements = _selectedElements.filter(
-    (el) =>
-      !(
-        isArrowElement(el) &&
-        isElbowArrow(el) &&
-        el.startBinding &&
-        el.endBinding
-      ),
-  );
-
   // we do not want a frame and its elements to be selected at the same time
   // but when it happens (due to some bug), we want to avoid updating element
   // in the frame twice, hence the use of set
@@ -106,7 +82,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,43 +135,27 @@ 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 = (
+  draggingElement: 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;
-}) => {
-  if (shouldMaintainAspectRatio && newElement.type !== "selection") {
+  } | null = null,
+) => {
+  if (shouldMaintainAspectRatio && draggingElement.type !== "selection") {
     if (widthAspectRatio) {
       height = width / widthAspectRatio;
     } else {
@@ -234,14 +194,17 @@ export const dragNewElement = ({
 
   let textAutoResize = null;
 
-  if (isTextElement(newElement)) {
-    height = newElement.height;
+  // NOTE this should apply only to creating text elements, not existing
+  // (once we rewrite appState.draggingElement to actually mean dragging
+  // elements)
+  if (isTextElement(draggingElement)) {
+    height = draggingElement.height;
     const minWidth = getMinTextElementWidth(
       getFontString({
-        fontSize: newElement.fontSize,
-        fontFamily: newElement.fontFamily,
+        fontSize: draggingElement.fontSize,
+        fontFamily: draggingElement.fontFamily,
       }),
-      newElement.lineHeight,
+      draggingElement.lineHeight,
     );
     width = Math.max(width, minWidth);
 
@@ -258,16 +221,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(draggingElement, {
+      x: newX + (originOffset?.x ?? 0),
+      y: newY + (originOffset?.y ?? 0),
+      width,
+      height,
+      ...textAutoResize,
+    });
   }
 };

packages/excalidraw/element/flowchart.test.tsx

@@ -1,404 +0,0 @@
-import ReactDOM from "react-dom";
-import { render } from "../tests/test-utils";
-import { reseed } from "../random";
-import { UI, Keyboard, Pointer } from "../tests/helpers/ui";
-import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
-import { KEYS } from "../keys";
-
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-
-beforeEach(async () => {
-  localStorage.clear();
-  reseed(7);
-  mouse.reset();
-
-  await render(<Excalidraw handleKeyboardGlobally={true} />);
-  h.state.width = 1000;
-  h.state.height = 1000;
-
-  // The bounds of hand-drawn linear elements may change after flipping, so
-  // removing this style for testing
-  UI.clickTool("arrow");
-  UI.clickByTitle("Architect");
-  UI.clickTool("selection");
-});
-
-describe("flow chart creation", () => {
-  beforeEach(() => {
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-  });
-
-  // multiple at once
-  it("create multiple successor nodes at once", () => {
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(5);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(3);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(2);
-  });
-
-  it("when directions are changed, only the last same directions will apply", () => {
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-
-      Keyboard.keyPress(KEYS.ARROW_UP);
-      Keyboard.keyPress(KEYS.ARROW_UP);
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(7);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(4);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(3);
-  });
-
-  it("when escaped, no nodes will be created", () => {
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_UP);
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-
-    Keyboard.keyPress(KEYS.ESCAPE);
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(1);
-  });
-
-  it("create nodes one at a time", () => {
-    const initialNode = h.elements[0];
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(3);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(2);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(1);
-
-    const firstChildNode = h.elements.filter(
-      (el) => el.type === "rectangle" && el.id !== initialNode.id,
-    )[0];
-    expect(firstChildNode).not.toBe(null);
-    expect(firstChildNode.id).toBe(Object.keys(h.state.selectedElementIds)[0]);
-
-    API.setSelectedElements([initialNode]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(5);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(3);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(2);
-
-    const secondChildNode = h.elements.filter(
-      (el) =>
-        el.type === "rectangle" &&
-        el.id !== initialNode.id &&
-        el.id !== firstChildNode.id,
-    )[0];
-    expect(secondChildNode).not.toBe(null);
-    expect(secondChildNode.id).toBe(Object.keys(h.state.selectedElementIds)[0]);
-
-    API.setSelectedElements([initialNode]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(7);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(4);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(3);
-
-    const thirdChildNode = h.elements.filter(
-      (el) =>
-        el.type === "rectangle" &&
-        el.id !== initialNode.id &&
-        el.id !== firstChildNode.id &&
-        el.id !== secondChildNode.id,
-    )[0];
-
-    expect(thirdChildNode).not.toBe(null);
-    expect(thirdChildNode.id).toBe(Object.keys(h.state.selectedElementIds)[0]);
-
-    expect(firstChildNode.x).toBe(secondChildNode.x);
-    expect(secondChildNode.x).toBe(thirdChildNode.x);
-  });
-});
-
-describe("flow chart navigation", () => {
-  it("single node at each level", () => {
-    /**
-     * ▨ -> ▨ -> ▨ -> ▨ -> ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(5);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(4);
-
-    // all the way to the left, gets us to the first node
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-
-    // all the way to the right, gets us to the last node
-    const rightMostNode = h.elements[h.elements.length - 2];
-    expect(rightMostNode);
-    expect(rightMostNode.type).toBe("rectangle");
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-  });
-
-  it("multiple nodes at each level", () => {
-    /**
-     * from the perspective of the first node, there're four layers, and
-     * there are four nodes at the second layer
-     *
-     *   -> ▨
-     * ▨ -> ▨ -> ▨ -> ▨ -> ▨
-     *   -> ▨
-     *   -> ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    const secondNode = h.elements[1];
-    const rightMostNode = h.elements[h.elements.length - 2];
-
-    API.setSelectedElements([rectangle]);
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    API.setSelectedElements([rectangle]);
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    API.setSelectedElements([rectangle]);
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    API.setSelectedElements([rectangle]);
-
-    // because of same level cycling,
-    // going right five times should take us back to the second node again
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[secondNode.id]).toBe(true);
-
-    // from the second node, going right three times should take us to the rightmost node
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-  });
-
-  it("take the most obvious link when possible", () => {
-    /**
-     * ▨ → ▨   ▨ → ▨
-     *     ↓   ↑
-     *     ▨ → ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    // last node should be the one that's selected
-    const rightMostNode = h.elements[h.elements.length - 2];
-    expect(rightMostNode.type).toBe("rectangle");
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-
-    // going any direction takes us to the predecessor as well
-    const predecessorToRightMostNode = h.elements[h.elements.length - 4];
-    expect(predecessorToRightMostNode.type).toBe("rectangle");
-
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-  });
-});

packages/excalidraw/element/flowchart.ts

@@ -1,698 +0,0 @@
-import {
-  HEADING_DOWN,
-  HEADING_LEFT,
-  HEADING_RIGHT,
-  HEADING_UP,
-  compareHeading,
-  headingForPointFromElement,
-  type Heading,
-} from "./heading";
-import { bindLinearElement } from "./binding";
-import { LinearElementEditor } from "./linearElementEditor";
-import { newArrowElement, newElement } from "./newElement";
-import { aabbForElement } from "../math";
-import type {
-  ElementsMap,
-  ExcalidrawBindableElement,
-  ExcalidrawElement,
-  ExcalidrawFlowchartNodeElement,
-  NonDeletedSceneElementsMap,
-  OrderedExcalidrawElement,
-} from "./types";
-import { KEYS } from "../keys";
-import type { AppState, PendingExcalidrawElements, Point } from "../types";
-import { mutateElement } from "./mutateElement";
-import { elementOverlapsWithFrame, elementsAreInFrameBounds } from "../frame";
-import {
-  isBindableElement,
-  isElbowArrow,
-  isFrameElement,
-  isFlowchartNodeElement,
-} from "./typeChecks";
-import { invariant } from "../utils";
-
-type LinkDirection = "up" | "right" | "down" | "left";
-
-const VERTICAL_OFFSET = 100;
-const HORIZONTAL_OFFSET = 100;
-
-export const getLinkDirectionFromKey = (key: string): LinkDirection => {
-  switch (key) {
-    case KEYS.ARROW_UP:
-      return "up";
-    case KEYS.ARROW_DOWN:
-      return "down";
-    case KEYS.ARROW_RIGHT:
-      return "right";
-    case KEYS.ARROW_LEFT:
-      return "left";
-    default:
-      return "right";
-  }
-};
-
-const getNodeRelatives = (
-  type: "predecessors" | "successors",
-  node: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  direction: LinkDirection,
-) => {
-  const items = [...elementsMap.values()].reduce(
-    (acc: { relative: ExcalidrawBindableElement; heading: Heading }[], el) => {
-      let oppositeBinding;
-      if (
-        isElbowArrow(el) &&
-        // we want check existence of the opposite binding, in the direction
-        // we're interested in
-        (oppositeBinding =
-          el[type === "predecessors" ? "startBinding" : "endBinding"]) &&
-        // similarly, we need to filter only arrows bound to target node
-        el[type === "predecessors" ? "endBinding" : "startBinding"]
-          ?.elementId === node.id
-      ) {
-        const relative = elementsMap.get(oppositeBinding.elementId);
-
-        if (!relative) {
-          return acc;
-        }
-
-        invariant(
-          isBindableElement(relative),
-          "not an ExcalidrawBindableElement",
-        );
-
-        const edgePoint: Point =
-          type === "predecessors" ? el.points[el.points.length - 1] : [0, 0];
-
-        const heading = headingForPointFromElement(node, aabbForElement(node), [
-          edgePoint[0] + el.x,
-          edgePoint[1] + el.y,
-        ]);
-
-        acc.push({
-          relative,
-          heading,
-        });
-      }
-      return acc;
-    },
-    [],
-  );
-
-  switch (direction) {
-    case "up":
-      return items
-        .filter((item) => compareHeading(item.heading, HEADING_UP))
-        .map((item) => item.relative);
-    case "down":
-      return items
-        .filter((item) => compareHeading(item.heading, HEADING_DOWN))
-        .map((item) => item.relative);
-    case "right":
-      return items
-        .filter((item) => compareHeading(item.heading, HEADING_RIGHT))
-        .map((item) => item.relative);
-    case "left":
-      return items
-        .filter((item) => compareHeading(item.heading, HEADING_LEFT))
-        .map((item) => item.relative);
-  }
-};
-
-const getSuccessors = (
-  node: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  direction: LinkDirection,
-) => {
-  return getNodeRelatives("successors", node, elementsMap, direction);
-};
-
-export const getPredecessors = (
-  node: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  direction: LinkDirection,
-) => {
-  return getNodeRelatives("predecessors", node, elementsMap, direction);
-};
-
-const getOffsets = (
-  element: ExcalidrawFlowchartNodeElement,
-  linkedNodes: ExcalidrawElement[],
-  direction: LinkDirection,
-) => {
-  const _HORIZONTAL_OFFSET = HORIZONTAL_OFFSET + element.width;
-
-  // check if vertical space or horizontal space is available first
-  if (direction === "up" || direction === "down") {
-    const _VERTICAL_OFFSET = VERTICAL_OFFSET + element.height;
-    // check vertical space
-    const minX = element.x;
-    const maxX = element.x + element.width;
-
-    // vertical space is available
-    if (
-      linkedNodes.every(
-        (linkedNode) =>
-          linkedNode.x + linkedNode.width < minX || linkedNode.x > maxX,
-      )
-    ) {
-      return {
-        x: 0,
-        y: _VERTICAL_OFFSET * (direction === "up" ? -1 : 1),
-      };
-    }
-  } else if (direction === "right" || direction === "left") {
-    const minY = element.y;
-    const maxY = element.y + element.height;
-
-    if (
-      linkedNodes.every(
-        (linkedNode) =>
-          linkedNode.y + linkedNode.height < minY || linkedNode.y > maxY,
-      )
-    ) {
-      return {
-        x:
-          (HORIZONTAL_OFFSET + element.width) * (direction === "left" ? -1 : 1),
-        y: 0,
-      };
-    }
-  }
-
-  if (direction === "up" || direction === "down") {
-    const _VERTICAL_OFFSET = VERTICAL_OFFSET + element.height;
-    const y = linkedNodes.length === 0 ? _VERTICAL_OFFSET : _VERTICAL_OFFSET;
-    const x =
-      linkedNodes.length === 0
-        ? 0
-        : (linkedNodes.length + 1) % 2 === 0
-        ? ((linkedNodes.length + 1) / 2) * _HORIZONTAL_OFFSET
-        : (linkedNodes.length / 2) * _HORIZONTAL_OFFSET * -1;
-
-    if (direction === "up") {
-      return {
-        x,
-        y: y * -1,
-      };
-    }
-
-    return {
-      x,
-      y,
-    };
-  }
-
-  const _VERTICAL_OFFSET = VERTICAL_OFFSET + element.height;
-  const x =
-    (linkedNodes.length === 0 ? HORIZONTAL_OFFSET : HORIZONTAL_OFFSET) +
-    element.width;
-  const y =
-    linkedNodes.length === 0
-      ? 0
-      : (linkedNodes.length + 1) % 2 === 0
-      ? ((linkedNodes.length + 1) / 2) * _VERTICAL_OFFSET
-      : (linkedNodes.length / 2) * _VERTICAL_OFFSET * -1;
-
-  if (direction === "left") {
-    return {
-      x: x * -1,
-      y,
-    };
-  }
-  return {
-    x,
-    y,
-  };
-};
-
-const addNewNode = (
-  element: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
-  appState: AppState,
-  direction: LinkDirection,
-) => {
-  const successors = getSuccessors(element, elementsMap, direction);
-  const predeccessors = getPredecessors(element, elementsMap, direction);
-
-  const offsets = getOffsets(
-    element,
-    [...successors, ...predeccessors],
-    direction,
-  );
-
-  const nextNode = newElement({
-    type: element.type,
-    x: element.x + offsets.x,
-    y: element.y + offsets.y,
-    // TODO: extract this to a util
-    width: element.width,
-    height: element.height,
-    roundness: element.roundness,
-    roughness: element.roughness,
-    backgroundColor: element.backgroundColor,
-    strokeColor: element.strokeColor,
-    strokeWidth: element.strokeWidth,
-  });
-
-  invariant(
-    isFlowchartNodeElement(nextNode),
-    "not an ExcalidrawFlowchartNodeElement",
-  );
-
-  const bindingArrow = createBindingArrow(
-    element,
-    nextNode,
-    elementsMap,
-    direction,
-    appState,
-  );
-
-  return {
-    nextNode,
-    bindingArrow,
-  };
-};
-
-export const addNewNodes = (
-  startNode: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
-  appState: AppState,
-  direction: LinkDirection,
-  numberOfNodes: number,
-) => {
-  // always start from 0 and distribute evenly
-  const newNodes: ExcalidrawElement[] = [];
-
-  for (let i = 0; i < numberOfNodes; i++) {
-    let nextX: number;
-    let nextY: number;
-    if (direction === "left" || direction === "right") {
-      const totalHeight =
-        VERTICAL_OFFSET * (numberOfNodes - 1) +
-        numberOfNodes * startNode.height;
-
-      const startY = startNode.y + startNode.height / 2 - totalHeight / 2;
-
-      let offsetX = HORIZONTAL_OFFSET + startNode.width;
-      if (direction === "left") {
-        offsetX *= -1;
-      }
-      nextX = startNode.x + offsetX;
-      const offsetY = (VERTICAL_OFFSET + startNode.height) * i;
-      nextY = startY + offsetY;
-    } else {
-      const totalWidth =
-        HORIZONTAL_OFFSET * (numberOfNodes - 1) +
-        numberOfNodes * startNode.width;
-      const startX = startNode.x + startNode.width / 2 - totalWidth / 2;
-      let offsetY = VERTICAL_OFFSET + startNode.height;
-
-      if (direction === "up") {
-        offsetY *= -1;
-      }
-      nextY = startNode.y + offsetY;
-      const offsetX = (HORIZONTAL_OFFSET + startNode.width) * i;
-      nextX = startX + offsetX;
-    }
-
-    const nextNode = newElement({
-      type: startNode.type,
-      x: nextX,
-      y: nextY,
-      // TODO: extract this to a util
-      width: startNode.width,
-      height: startNode.height,
-      roundness: startNode.roundness,
-      roughness: startNode.roughness,
-      backgroundColor: startNode.backgroundColor,
-      strokeColor: startNode.strokeColor,
-      strokeWidth: startNode.strokeWidth,
-    });
-
-    invariant(
-      isFlowchartNodeElement(nextNode),
-      "not an ExcalidrawFlowchartNodeElement",
-    );
-
-    const bindingArrow = createBindingArrow(
-      startNode,
-      nextNode,
-      elementsMap,
-      direction,
-      appState,
-    );
-
-    newNodes.push(nextNode);
-    newNodes.push(bindingArrow);
-  }
-
-  return newNodes;
-};
-
-const createBindingArrow = (
-  startBindingElement: ExcalidrawFlowchartNodeElement,
-  endBindingElement: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
-  direction: LinkDirection,
-  appState: AppState,
-) => {
-  let startX: number;
-  let startY: number;
-
-  const PADDING = 6;
-
-  switch (direction) {
-    case "up": {
-      startX = startBindingElement.x + startBindingElement.width / 2;
-      startY = startBindingElement.y - PADDING;
-      break;
-    }
-    case "down": {
-      startX = startBindingElement.x + startBindingElement.width / 2;
-      startY = startBindingElement.y + startBindingElement.height + PADDING;
-      break;
-    }
-    case "right": {
-      startX = startBindingElement.x + startBindingElement.width + PADDING;
-      startY = startBindingElement.y + startBindingElement.height / 2;
-      break;
-    }
-    case "left": {
-      startX = startBindingElement.x - PADDING;
-      startY = startBindingElement.y + startBindingElement.height / 2;
-      break;
-    }
-  }
-
-  let endX: number;
-  let endY: number;
-
-  switch (direction) {
-    case "up": {
-      endX = endBindingElement.x + endBindingElement.width / 2 - startX;
-      endY = endBindingElement.y + endBindingElement.height - startY + PADDING;
-      break;
-    }
-    case "down": {
-      endX = endBindingElement.x + endBindingElement.width / 2 - startX;
-      endY = endBindingElement.y - startY - PADDING;
-      break;
-    }
-    case "right": {
-      endX = endBindingElement.x - startX - PADDING;
-      endY = endBindingElement.y - startY + endBindingElement.height / 2;
-      break;
-    }
-    case "left": {
-      endX = endBindingElement.x + endBindingElement.width - startX + PADDING;
-      endY = endBindingElement.y - startY + endBindingElement.height / 2;
-      break;
-    }
-  }
-
-  const bindingArrow = newArrowElement({
-    type: "arrow",
-    x: startX,
-    y: startY,
-    startArrowhead: appState.currentItemStartArrowhead,
-    endArrowhead: appState.currentItemEndArrowhead,
-    strokeColor: appState.currentItemStrokeColor,
-    strokeStyle: appState.currentItemStrokeStyle,
-    strokeWidth: appState.currentItemStrokeWidth,
-    points: [
-      [0, 0],
-      [endX, endY],
-    ],
-    elbowed: true,
-  });
-
-  bindLinearElement(
-    bindingArrow,
-    startBindingElement,
-    "start",
-    elementsMap as NonDeletedSceneElementsMap,
-  );
-  bindLinearElement(
-    bindingArrow,
-    endBindingElement,
-    "end",
-    elementsMap as NonDeletedSceneElementsMap,
-  );
-
-  const changedElements = new Map<string, OrderedExcalidrawElement>();
-  changedElements.set(
-    startBindingElement.id,
-    startBindingElement as OrderedExcalidrawElement,
-  );
-  changedElements.set(
-    endBindingElement.id,
-    endBindingElement as OrderedExcalidrawElement,
-  );
-  changedElements.set(
-    bindingArrow.id,
-    bindingArrow as OrderedExcalidrawElement,
-  );
-
-  LinearElementEditor.movePoints(
-    bindingArrow,
-    [
-      {
-        index: 1,
-        point: bindingArrow.points[1],
-      },
-    ],
-    elementsMap as NonDeletedSceneElementsMap,
-    undefined,
-    {
-      changedElements,
-    },
-  );
-
-  return bindingArrow;
-};
-
-export class FlowChartNavigator {
-  isExploring: boolean = false;
-  // nodes that are ONE link away (successor and predecessor both included)
-  private sameLevelNodes: ExcalidrawElement[] = [];
-  private sameLevelIndex: number = 0;
-  // set it to the opposite of the defalut creation direction
-  private direction: LinkDirection | null = null;
-  // for speedier navigation
-  private visitedNodes: Set<ExcalidrawElement["id"]> = new Set();
-
-  clear() {
-    this.isExploring = false;
-    this.sameLevelNodes = [];
-    this.sameLevelIndex = 0;
-    this.direction = null;
-    this.visitedNodes.clear();
-  }
-
-  exploreByDirection(
-    element: ExcalidrawElement,
-    elementsMap: ElementsMap,
-    direction: LinkDirection,
-  ): ExcalidrawElement["id"] | null {
-    if (!isBindableElement(element)) {
-      return null;
-    }
-
-    // clear if going at a different direction
-    if (direction !== this.direction) {
-      this.clear();
-    }
-
-    // add the current node to the visited
-    if (!this.visitedNodes.has(element.id)) {
-      this.visitedNodes.add(element.id);
-    }
-
-    /**
-     * CASE:
-     * - already started exploring, AND
-     * - there are multiple nodes at the same level, AND
-     * - still going at the same direction, AND
-     *
-     * RESULT:
-     * - loop through nodes at the same level
-     *
-     * WHY:
-     * - provides user the capability to loop through nodes at the same level
-     */
-    if (
-      this.isExploring &&
-      direction === this.direction &&
-      this.sameLevelNodes.length > 1
-    ) {
-      this.sameLevelIndex =
-        (this.sameLevelIndex + 1) % this.sameLevelNodes.length;
-
-      return this.sameLevelNodes[this.sameLevelIndex].id;
-    }
-
-    const nodes = [
-      ...getSuccessors(element, elementsMap, direction),
-      ...getPredecessors(element, elementsMap, direction),
-    ];
-
-    /**
-     * CASE:
-     * - just started exploring at the given direction
-     *
-     * RESULT:
-     * - go to the first node in the given direction
-     */
-    if (nodes.length > 0) {
-      this.sameLevelIndex = 0;
-      this.isExploring = true;
-      this.sameLevelNodes = nodes;
-      this.direction = direction;
-      this.visitedNodes.add(nodes[0].id);
-
-      return nodes[0].id;
-    }
-
-    /**
-     * CASE:
-     * - (just started exploring or still going at the same direction) OR
-     * - there're no nodes at the given direction
-     *
-     * RESULT:
-     * - go to some other unvisited linked node
-     *
-     * WHY:
-     * - provide a speedier navigation from a given node to some predecessor
-     *   without the user having to change arrow key
-     */
-    if (direction === this.direction || !this.isExploring) {
-      if (!this.isExploring) {
-        // just started and no other nodes at the given direction
-        // so the current node is technically the first visited node
-        // (this is needed so that we don't get stuck between looping through )
-        this.visitedNodes.add(element.id);
-      }
-
-      const otherDirections: LinkDirection[] = [
-        "up",
-        "right",
-        "down",
-        "left",
-      ].filter((dir): dir is LinkDirection => dir !== direction);
-
-      const otherLinkedNodes = otherDirections
-        .map((dir) => [
-          ...getSuccessors(element, elementsMap, dir),
-          ...getPredecessors(element, elementsMap, dir),
-        ])
-        .flat()
-        .filter((linkedNode) => !this.visitedNodes.has(linkedNode.id));
-
-      for (const linkedNode of otherLinkedNodes) {
-        if (!this.visitedNodes.has(linkedNode.id)) {
-          this.visitedNodes.add(linkedNode.id);
-          this.isExploring = true;
-          this.direction = direction;
-          return linkedNode.id;
-        }
-      }
-    }
-
-    return null;
-  }
-}
-
-export class FlowChartCreator {
-  isCreatingChart: boolean = false;
-  private numberOfNodes: number = 0;
-  private direction: LinkDirection | null = "right";
-  pendingNodes: PendingExcalidrawElements | null = null;
-
-  createNodes(
-    startNode: ExcalidrawFlowchartNodeElement,
-    elementsMap: ElementsMap,
-    appState: AppState,
-    direction: LinkDirection,
-  ) {
-    if (direction !== this.direction) {
-      const { nextNode, bindingArrow } = addNewNode(
-        startNode,
-        elementsMap,
-        appState,
-        direction,
-      );
-
-      this.numberOfNodes = 1;
-      this.isCreatingChart = true;
-      this.direction = direction;
-      this.pendingNodes = [nextNode, bindingArrow];
-    } else {
-      this.numberOfNodes += 1;
-      const newNodes = addNewNodes(
-        startNode,
-        elementsMap,
-        appState,
-        direction,
-        this.numberOfNodes,
-      );
-
-      this.isCreatingChart = true;
-      this.direction = direction;
-      this.pendingNodes = newNodes;
-    }
-
-    // add pending nodes to the same frame as the start node
-    // if every pending node is at least intersecting with the frame
-    if (startNode.frameId) {
-      const frame = elementsMap.get(startNode.frameId);
-
-      invariant(
-        frame && isFrameElement(frame),
-        "not an ExcalidrawFrameElement",
-      );
-
-      if (
-        frame &&
-        this.pendingNodes.every(
-          (node) =>
-            elementsAreInFrameBounds([node], frame, elementsMap) ||
-            elementOverlapsWithFrame(node, frame, elementsMap),
-        )
-      ) {
-        this.pendingNodes = this.pendingNodes.map((node) =>
-          mutateElement(
-            node,
-            {
-              frameId: startNode.frameId,
-            },
-            false,
-          ),
-        );
-      }
-    }
-  }
-
-  clear() {
-    this.isCreatingChart = false;
-    this.pendingNodes = null;
-    this.direction = null;
-    this.numberOfNodes = 0;
-  }
-}
-
-export const isNodeInFlowchart = (
-  element: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
-) => {
-  for (const [, el] of elementsMap) {
-    if (
-      el.type === "arrow" &&
-      (el.startBinding?.elementId === element.id ||
-        el.endBinding?.elementId === element.id)
-    ) {
-      return true;
-    }
-  }
-
-  return false;
-};