Merge remote-tracking branch 'origin/master' into zsviczian-stickynote

.env.development

@@ -12,7 +12,7 @@ VITE_APP_WS_SERVER_URL=http://localhost:3002
 VITE_APP_PLUS_LP=https://plus.excalidraw.com
 VITE_APP_PLUS_APP=http://localhost:3000
 
-VITE_APP_AI_BACKEND=http://localhost:3016
+VITE_APP_AI_BACKEND=http://localhost:3015
 
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
 
@@ -27,7 +27,7 @@ VITE_APP_ENABLE_TRACKING=true
 FAST_REFRESH=false
 
 # The port the run the dev server
-VITE_APP_PORT=3001
+VITE_APP_PORT=3000
 
 #Debug flags
 

.github/workflows/autorelease-excalidraw.yml

@@ -12,10 +12,10 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 2
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Set up publish access
         run: |
           npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}

.github/workflows/lint.yml

@@ -9,10 +9,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Install and lint
         run: |

.github/workflows/locales-coverage.yml

@@ -14,10 +14,10 @@ jobs:
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Create report file
         run: |

.github/workflows/sentry-production.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Install and build
         run: |
           yarn --frozen-lockfile
@@ -28,7 +28,7 @@ jobs:
           export SENTRY_RELEASE=$(sentry-cli releases propose-version)
           sentry-cli releases new $SENTRY_RELEASE --project $SENTRY_PROJECT
           sentry-cli releases set-commits --auto $SENTRY_RELEASE
-          sentry-cli sourcemaps upload --release $SENTRY_RELEASE --no-rewrite ./build/static/js/ --url-prefix "~/static/js"
+          sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps --no-rewrite ./build/static/js/ --url-prefix "~/static/js"
           sentry-cli releases finalize $SENTRY_RELEASE
           sentry-cli releases deploys $SENTRY_RELEASE new -e production
         env:

.github/workflows/size-limit.yml

@@ -11,10 +11,10 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Install in packages/excalidraw
         run: yarn
         working-directory: packages/excalidraw

.github/workflows/test-coverage-pr.yml

@@ -14,7 +14,7 @@ jobs:
       - name: "Install Node"
         uses: actions/setup-node@v2
         with:
-          node-version: "20.x"
+          node-version: "18.x"
       - name: "Install Deps"
         run: yarn install
       - name: "Test Coverage"

.github/workflows/test.yml

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

excalidraw-app/App.tsx

@@ -48,11 +48,7 @@ import {
   youtubeIcon,
 } from "@excalidraw/excalidraw/components/icons";
 import { isElementLink } from "@excalidraw/element";
-import {
-  bumpElementVersions,
-  restoreAppState,
-  restoreElements,
-} from "@excalidraw/excalidraw/data/restore";
+import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
 import { newElementWith } from "@excalidraw/element";
 import { isInitializedImageElement } from "@excalidraw/element";
 import clsx from "clsx";
@@ -109,8 +105,8 @@ import { TopErrorBoundary } from "./components/TopErrorBoundary";
 import {
   exportToBackend,
   getCollaborationLinkData,
-  importFromBackend,
   isCollaborationLink,
+  loadScene,
 } from "./data";
 
 import { updateStaleImageStatuses } from "./data/FileManager";
@@ -228,20 +224,9 @@ const initializeScene = async (opts: {
 
   const localDataState = importFromLocalStorage();
 
-  let scene: Omit<
-    RestoredDataState,
-    // we're not storing files in the scene database/localStorage, and instead
-    // fetch them async from a different store
-    "files"
-  > & {
+  let scene: RestoredDataState & {
     scrollToContent?: boolean;
-  } = {
-    elements: restoreElements(localDataState?.elements, null, {
-      repairBindings: true,
-      deleteInvisibleElements: true,
-    }),
-    appState: restoreAppState(localDataState?.appState, null),
-  };
+  } = await loadScene(null, null, localDataState);
 
   let roomLinkData = getCollaborationLinkData(window.location.href);
   const isExternalScene = !!(id || jsonBackendMatch || roomLinkData);
@@ -255,26 +240,11 @@ const initializeScene = async (opts: {
       (await openConfirmModal(shareableLinkConfirmDialog))
     ) {
       if (jsonBackendMatch) {
-        const imported = await importFromBackend(
+        scene = await loadScene(
           jsonBackendMatch[1],
           jsonBackendMatch[2],
+          localDataState,
         );
-
-        scene = {
-          elements: bumpElementVersions(
-            restoreElements(imported.elements, null, {
-              repairBindings: true,
-              deleteInvisibleElements: true,
-            }),
-            localDataState?.elements,
-          ),
-          appState: restoreAppState(
-            imported.appState,
-            // local appState when importing from backend to ensure we restore
-            // localStorage user settings which we do not persist on server.
-            localDataState?.appState,
-          ),
-        };
       }
       scene.scrollToContent = true;
       if (!roomLinkData) {
@@ -526,10 +496,8 @@ const ExcalidrawWrapper = () => {
           loadImages(data);
           if (data.scene) {
             excalidrawAPI.updateScene({
-              elements: restoreElements(data.scene.elements, null, {
-                repairBindings: true,
-              }),
-              appState: restoreAppState(data.scene.appState, null),
+              ...data.scene,
+              ...restore(data.scene, null, null, { repairBindings: true }),
               captureUpdate: CaptureUpdateAction.IMMEDIATELY,
             });
           }

excalidraw-app/app_constants.ts

@@ -46,7 +46,6 @@ export const STORAGE_KEYS = {
   VERSION_FILES: "version-files",
 
   IDB_LIBRARY: "excalidraw-library",
-  IDB_TTD_CHATS: "excalidraw-ttd-chats",
 
   // do not use apart from migrations
   __LEGACY_LOCAL_STORAGE_LIBRARY: "excalidraw-library",

excalidraw-app/collab/Collab.tsx

@@ -6,7 +6,7 @@ import {
   reconcileElements,
 } from "@excalidraw/excalidraw";
 import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, cloneJSON, EVENT, toBrandedType } from "@excalidraw/common";
+import { APP_NAME, EVENT } from "@excalidraw/common";
 import {
   IDLE_THRESHOLD,
   ACTIVE_THRESHOLD,
@@ -29,8 +29,6 @@ import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
 
-import { bumpElementVersions } from "@excalidraw/excalidraw/data/restore";
-
 import type {
   ReconciledExcalidrawElement,
   RemoteExcalidrawElement,
@@ -313,7 +311,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   saveCollabRoomToFirebase = async (
     syncableElements: readonly SyncableExcalidrawElement[],
   ) => {
-    syncableElements = cloneJSON(syncableElements);
     try {
       const storedElements = await saveToFirebase(
         this.portal,
@@ -444,7 +441,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   };
 
   private decryptPayload = async (
-    iv: Uint8Array<ArrayBuffer>,
+    iv: Uint8Array,
     encryptedData: ArrayBuffer,
     decryptionKey: string,
   ): Promise<ValueOf<SocketUpdateDataSource>> => {
@@ -565,7 +562,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     // All socket listeners are moving to Portal
     this.portal.socket.on(
       "client-broadcast",
-      async (encryptedData: ArrayBuffer, iv: Uint8Array<ArrayBuffer>) => {
+      async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
         if (!this.portal.roomKey) {
           return;
         }
@@ -582,9 +579,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
           case WS_SUBTYPES.INIT: {
             if (!this.portal.socketInitialized) {
               this.initializeRoom({ fetchScene: false });
-              const remoteElements = toBrandedType<
-                readonly RemoteExcalidrawElement[]
-              >(decryptedData.payload.elements);
+              const remoteElements = decryptedData.payload.elements;
               const reconciledElements =
                 this._reconcileElements(remoteElements);
               this.handleRemoteSceneUpdate(reconciledElements);
@@ -598,11 +593,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
           }
           case WS_SUBTYPES.UPDATE:
             this.handleRemoteSceneUpdate(
-              this._reconcileElements(
-                toBrandedType<readonly RemoteExcalidrawElement[]>(
-                  decryptedData.payload.elements,
-                ),
-              ),
+              this._reconcileElements(decryptedData.payload.elements),
             );
             break;
           case WS_SUBTYPES.MOUSE_LOCATION: {
@@ -751,28 +742,17 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   };
 
   private _reconcileElements = (
-    remoteElements: readonly RemoteExcalidrawElement[],
+    remoteElements: readonly ExcalidrawElement[],
   ): ReconciledExcalidrawElement[] => {
+    const localElements = this.getSceneElementsIncludingDeleted();
     const appState = this.excalidrawAPI.getAppState();
-
-    const existingElements = this.getSceneElementsIncludingDeleted();
-
-    // NOTE ideally we restore _after_ reconciliation but we can't do that
-    // as we'd regenerate even elements such as appState.newElement which would
-    // break the state
-    remoteElements = restoreElements(remoteElements, existingElements);
-
-    let reconciledElements = reconcileElements(
-      existingElements,
-      remoteElements,
+    const restoredRemoteElements = restoreElements(remoteElements, null);
+    const reconciledElements = reconcileElements(
+      localElements,
+      restoredRemoteElements as RemoteExcalidrawElement[],
       appState,
     );
 
-    reconciledElements = bumpElementVersions(
-      reconciledElements,
-      existingElements,
-    );
-
     // Avoid broadcasting to the rest of the collaborators the scene
     // we just received!
     // Note: this needs to be set before updating the scene as it

excalidraw-app/components/AI.tsx

@@ -4,15 +4,12 @@ import {
   getTextFromElements,
   MIME_TYPES,
   TTDDialog,
-  TTDStreamFetch,
 } from "@excalidraw/excalidraw";
 import { getDataURL } from "@excalidraw/excalidraw/data/blob";
 import { safelyParseJSON } from "@excalidraw/common";
 
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 
-import { TTDIndexedDBAdapter } from "../data/TTDStorage";
-
 export const AIComponents = ({
   excalidrawAPI,
 }: {
@@ -102,23 +99,61 @@ export const AIComponents = ({
       />
 
       <TTDDialog
-        onTextSubmit={async (props) => {
-          const { onChunk, onStreamCreated, signal, messages } = props;
+        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 result = await TTDStreamFetch({
-            url: `${
-              import.meta.env.VITE_APP_AI_BACKEND
-            }/v1/ai/text-to-diagram/chat-streaming`,
-            messages,
-            onChunk,
-            onStreamCreated,
-            extractRateLimits: true,
-            signal,
-          });
+            const rateLimit = response.headers.has("X-Ratelimit-Limit")
+              ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
+              : undefined;
 
-          return result;
+            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");
+          }
         }}
-        persistenceAdapter={TTDIndexedDBAdapter}
       />
     </>
   );

excalidraw-app/components/AppMainMenu.tsx

@@ -62,7 +62,7 @@ export const AppMainMenu: React.FC<{
       {isDevEnv() && (
         <MainMenu.Item
           icon={eyeIcon}
-          onSelect={() => {
+          onClick={() => {
             if (window.visualDebug) {
               delete window.visualDebug;
               saveDebugState({ enabled: false });
@@ -77,7 +77,6 @@ export const AppMainMenu: React.FC<{
         </MainMenu.Item>
       )}
       <MainMenu.Separator />
-      <MainMenu.DefaultItems.Preferences />
       <MainMenu.DefaultItems.ToggleTheme
         allowSystemTheme
         theme={props.theme}

excalidraw-app/components/AppWelcomeScreen.tsx

@@ -33,15 +33,7 @@ export const AppWelcomeScreen: React.FC<{
         return bit;
       });
   } else {
-    headingContent = (
-      <>
-        {t("welcomeScreen.app.center_heading")}
-        <br />
-        {t("welcomeScreen.app.center_heading_line2")}
-        <br />
-        {t("welcomeScreen.app.center_heading_line3")}
-      </>
-    );
+    headingContent = t("welcomeScreen.app.center_heading");
   }
 
   return (

excalidraw-app/components/DebugCanvas.tsx

@@ -27,10 +27,7 @@ import { isCurve } from "@excalidraw/math/curve";
 import React from "react";
 
 import type { Curve } from "@excalidraw/math";
-import type {
-  DebugElement,
-  DebugPolygon,
-} from "@excalidraw/element/visualdebug";
+import type { DebugElement } from "@excalidraw/common";
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -78,44 +75,6 @@ const renderCubicBezier = (
   context.restore();
 };
 
-const renderPolygon = (
-  context: CanvasRenderingContext2D,
-  zoom: number,
-  polygon: DebugPolygon,
-  color: string,
-) => {
-  const { points, fill, close } = polygon;
-
-  if (points.length < 2) {
-    return;
-  }
-
-  context.save();
-  context.beginPath();
-  context.moveTo(points[0][0] * zoom, points[0][1] * zoom);
-  for (let i = 1; i < points.length; i += 1) {
-    context.lineTo(points[i][0] * zoom, points[i][1] * zoom);
-  }
-  if (close !== false) {
-    context.closePath();
-  }
-
-  if (fill) {
-    context.save();
-    context.globalAlpha = 0.15;
-    context.fillStyle = color;
-    context.fill();
-    context.restore();
-  }
-
-  context.strokeStyle = color;
-  context.stroke();
-  context.restore();
-};
-
-const isDebugPolygon = (data: DebugElement["data"]): data is DebugPolygon =>
-  (data as DebugPolygon).type === "polygon";
-
 const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
   context.strokeStyle = "#888";
   context.save();
@@ -321,9 +280,6 @@ const render = (
           el.color,
         );
         break;
-      case isDebugPolygon(el.data):
-        renderPolygon(context, appState.zoom.value, el.data, el.color);
-        break;
       default:
         throw new Error(`Unknown element type ${JSON.stringify(el)}`);
     }

excalidraw-app/components/GitHubCorner.tsx

@@ -0,0 +1,46 @@
+import { THEME } from "@excalidraw/common";
+import oc from "open-color";
+import React from "react";
+
+import type { Theme } from "@excalidraw/element/types";
+
+// https://github.com/tholman/github-corners
+export const GitHubCorner = React.memo(
+  ({ theme, dir }: { theme: Theme; dir: string }) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="40"
+      viewBox="0 0 250 250"
+      className="rtl-mirror"
+      style={{
+        marginTop: "calc(var(--space-factor) * -1)",
+        [dir === "rtl" ? "marginLeft" : "marginRight"]:
+          "calc(var(--space-factor) * -1)",
+      }}
+    >
+      <a
+        href="https://github.com/excalidraw/excalidraw"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="GitHub repository"
+      >
+        <path
+          d="M0 0l115 115h15l12 27 108 108V0z"
+          fill={theme === THEME.LIGHT ? oc.gray[6] : oc.gray[7]}
+        />
+        <path
+          className="octo-arm"
+          d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+          style={{ transformOrigin: "130px 106px" }}
+          fill={theme === THEME.LIGHT ? oc.white : "var(--default-bg-color)"}
+        />
+        <path
+          className="octo-body"
+          d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
+          fill={theme === THEME.LIGHT ? oc.white : "var(--default-bg-color)"}
+        />
+      </a>
+    </svg>
+  ),
+);

excalidraw-app/data/TTDStorage.ts

@@ -1,51 +0,0 @@
-import { createStore, get, set } from "idb-keyval";
-
-import type { SavedChats } from "@excalidraw/excalidraw/components/TTDDialog/types";
-
-import { STORAGE_KEYS } from "../app_constants";
-
-/**
- * IndexedDB adapter for TTD chat storage.
- * Implements TTDPersistenceAdapter interface.
- */
-export class TTDIndexedDBAdapter {
-  /** IndexedDB database name */
-  private static idb_name = STORAGE_KEYS.IDB_TTD_CHATS;
-  /** Store key for chat data */
-  private static key = "ttdChats";
-
-  private static store = createStore(
-    `${TTDIndexedDBAdapter.idb_name}-db`,
-    `${TTDIndexedDBAdapter.idb_name}-store`,
-  );
-
-  /**
-   * Load saved chats from IndexedDB.
-   * @returns Promise resolving to saved chats array (empty if none found)
-   */
-  static async loadChats(): Promise<SavedChats> {
-    try {
-      const data = await get<SavedChats>(
-        TTDIndexedDBAdapter.key,
-        TTDIndexedDBAdapter.store,
-      );
-      return data || [];
-    } catch (error) {
-      console.warn("Failed to load TTD chats from IndexedDB:", error);
-      return [];
-    }
-  }
-
-  /**
-   * Save chats to IndexedDB.
-   * @param chats - The chats array to persist
-   */
-  static async saveChats(chats: SavedChats): Promise<void> {
-    try {
-      await set(TTDIndexedDBAdapter.key, chats, TTDIndexedDBAdapter.store);
-    } catch (error) {
-      console.warn("Failed to save TTD chats to IndexedDB:", error);
-      throw error;
-    }
-  }
-}

excalidraw-app/data/firebase.ts

@@ -1,5 +1,5 @@
 import { reconcileElements } from "@excalidraw/excalidraw";
-import { MIME_TYPES, toBrandedType } from "@excalidraw/common";
+import { MIME_TYPES } from "@excalidraw/common";
 import { decompressData } from "@excalidraw/excalidraw/data/encode";
 import {
   encryptData,
@@ -105,8 +105,8 @@ const decryptElements = async (
   data: FirebaseStoredScene,
   roomKey: string,
 ): Promise<readonly ExcalidrawElement[]> => {
-  const ciphertext = data.ciphertext.toUint8Array() as Uint8Array<ArrayBuffer>;
-  const iv = data.iv.toUint8Array() as Uint8Array<ArrayBuffer>;
+  const ciphertext = data.ciphertext.toUint8Array();
+  const iv = data.iv.toUint8Array();
 
   const decrypted = await decryptData(iv, ciphertext, roomKey);
   const decodedData = new TextDecoder("utf-8").decode(
@@ -243,7 +243,7 @@ export const saveToFirebase = async (
 
   FirebaseSceneVersionCache.set(socket, storedElements);
 
-  return toBrandedType<RemoteExcalidrawElement[]>(storedElements);
+  return storedElements;
 };
 
 export const loadFromFirebase = async (

excalidraw-app/data/index.ts

@@ -8,6 +8,7 @@ import {
   IV_LENGTH_BYTES,
 } from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
+import { restore } from "@excalidraw/excalidraw/data/restore";
 import { isInvisiblySmallElement } from "@excalidraw/element";
 import { isInitializedImageElement } from "@excalidraw/element";
 import { t } from "@excalidraw/excalidraw/i18n";
@@ -83,13 +84,13 @@ export type SocketUpdateDataSource = {
   SCENE_INIT: {
     type: WS_SUBTYPES.INIT;
     payload: {
-      elements: readonly OrderedExcalidrawElement[];
+      elements: readonly ExcalidrawElement[];
     };
   };
   SCENE_UPDATE: {
     type: WS_SUBTYPES.UPDATE;
     payload: {
-      elements: readonly OrderedExcalidrawElement[];
+      elements: readonly ExcalidrawElement[];
     };
   };
   MOUSE_LOCATION: {
@@ -199,7 +200,7 @@ const legacy_decodeFromBackend = async ({
   };
 };
 
-export const importFromBackend = async (
+const importFromBackend = async (
   id: string,
   decryptionKey: string,
 ): Promise<ImportedDataState> => {
@@ -241,6 +242,45 @@ export const importFromBackend = async (
   }
 };
 
+export const loadScene = async (
+  id: string | null,
+  privateKey: string | null,
+  // Supply local state even if importing from backend to ensure we restore
+  // localStorage user settings which we do not persist on server.
+  // Non-optional so we don't forget to pass it even if `undefined`.
+  localDataState: ImportedDataState | undefined | null,
+) => {
+  let data;
+  if (id != null && privateKey != null) {
+    // the private key is used to decrypt the content from the server, take
+    // extra care not to leak it
+    data = restore(
+      await importFromBackend(id, privateKey),
+      localDataState?.appState,
+      localDataState?.elements,
+      {
+        repairBindings: true,
+        refreshDimensions: false,
+        deleteInvisibleElements: true,
+      },
+    );
+  } else {
+    data = restore(localDataState || null, null, null, {
+      repairBindings: true,
+      deleteInvisibleElements: true,
+    });
+  }
+
+  return {
+    elements: data.elements,
+    appState: data.appState,
+    // note: this will always be empty because we're not storing files
+    // in the scene database/localStorage, and instead fetch them async
+    // from a different database
+    files: data.files,
+  };
+};
+
 type ExportToBackendResult =
   | { url: null; errorMessage: string }
   | { url: string; errorMessage: null };

excalidraw-app/debug.ts

@@ -1,9 +1,17 @@
+declare global {
+  interface Window {
+    debug: typeof Debug;
+  }
+}
+
 const lessPrecise = (num: number, precision = 5) =>
   parseFloat(num.toPrecision(precision));
 
 const getAvgFrameTime = (times: number[]) =>
   lessPrecise(times.reduce((a, b) => a + b) / times.length);
 
+const getFps = (frametime: number) => lessPrecise(1000 / frametime);
+
 export class Debug {
   public static DEBUG_LOG_TIMES = true;
 
@@ -16,35 +24,34 @@ export class Debug {
   private static LAST_DEBUG_LOG_CALL = 0;
   private static DEBUG_LOG_INTERVAL_ID: null | number = null;
 
-  private static LAST_FRAME_TIMESTAMP = 0;
-  private static FRAME_COUNT = 0;
-  private static ANIMATION_FRAME_ID: null | number = null;
-
-  private static scheduleAnimationFrame = () => {
-    if (Debug.DEBUG_LOG_INTERVAL_ID !== null) {
-      Debug.ANIMATION_FRAME_ID = requestAnimationFrame((timestamp) => {
-        if (Debug.LAST_FRAME_TIMESTAMP !== timestamp) {
-          Debug.LAST_FRAME_TIMESTAMP = timestamp;
-          Debug.FRAME_COUNT++;
-        }
-
-        if (Debug.DEBUG_LOG_INTERVAL_ID !== null) {
-          Debug.scheduleAnimationFrame();
-        }
-      });
-    }
-  };
-
   private static setupInterval = () => {
     if (Debug.DEBUG_LOG_INTERVAL_ID === null) {
       console.info("%c(starting perf recording)", "color: lime");
       Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(Debug.debugLogger, 1000);
-      Debug.scheduleAnimationFrame();
     }
     Debug.LAST_DEBUG_LOG_CALL = Date.now();
   };
 
   private static debugLogger = () => {
+    if (
+      Date.now() - Debug.LAST_DEBUG_LOG_CALL > 600 &&
+      Debug.DEBUG_LOG_INTERVAL_ID !== null
+    ) {
+      window.clearInterval(Debug.DEBUG_LOG_INTERVAL_ID);
+      Debug.DEBUG_LOG_INTERVAL_ID = null;
+      for (const [name, { avg }] of Object.entries(Debug.TIMES_AVG)) {
+        if (avg != null) {
+          console.info(
+            `%c${name} run avg: ${avg}ms (${getFps(avg)} fps)`,
+            "color: blue",
+          );
+        }
+      }
+      console.info("%c(stopping perf recording)", "color: red");
+      Debug.TIMES_AGGR = {};
+      Debug.TIMES_AVG = {};
+      return;
+    }
     if (Debug.DEBUG_LOG_TIMES) {
       for (const [name, { t, times }] of Object.entries(Debug.TIMES_AGGR)) {
         if (times.length) {
@@ -58,18 +65,8 @@ export class Debug {
       }
       for (const [name, { t, times, avg }] of Object.entries(Debug.TIMES_AVG)) {
         if (times.length) {
-          // const avgFrameTime = getAvgFrameTime(times);
-          const totalTime = times.reduce((a, b) => a + b);
-          const avgFrameTime = lessPrecise(totalTime / Debug.FRAME_COUNT);
-          console.info(
-            name,
-            `- ${times.length} calls - ${avgFrameTime}ms/frame across ${
-              Debug.FRAME_COUNT
-            } frames (${lessPrecise(
-              (avgFrameTime / 16.67) * 100,
-              1,
-            )}% of frame budget)`,
-          );
+          const avgFrameTime = getAvgFrameTime(times);
+          console.info(name, `${avgFrameTime}ms (${getFps(avgFrameTime)} fps)`);
           Debug.TIMES_AVG[name] = {
             t,
             times: [],
@@ -79,24 +76,6 @@ export class Debug {
         }
       }
     }
-    Debug.FRAME_COUNT = 0;
-
-    // Check for stop condition after logging
-    if (
-      Date.now() - Debug.LAST_DEBUG_LOG_CALL > 600 &&
-      Debug.DEBUG_LOG_INTERVAL_ID !== null
-    ) {
-      console.info("%c(stopping perf recording)", "color: red");
-      window.clearInterval(Debug.DEBUG_LOG_INTERVAL_ID);
-      window.cancelAnimationFrame(Debug.ANIMATION_FRAME_ID!);
-      Debug.ANIMATION_FRAME_ID = null;
-      Debug.FRAME_COUNT = 0;
-      Debug.LAST_FRAME_TIMESTAMP = 0;
-
-      Debug.DEBUG_LOG_INTERVAL_ID = null;
-      Debug.TIMES_AGGR = {};
-      Debug.TIMES_AVG = {};
-    }
   };
 
   public static logTime = (time?: number, name = "default") => {
@@ -130,7 +109,7 @@ export class Debug {
       return (...args: T) => {
         const t0 = performance.now();
         const ret = fn(...args);
-        Debug[type](performance.now() - t0, name);
+        Debug.logTime(performance.now() - t0, name);
         return ret;
       };
     };
@@ -151,70 +130,6 @@ export class Debug {
       return ret;
     };
   };
-
-  private static CHANGED_CACHE: Record<string, Record<string, unknown>> = {};
-
-  public static logChanged(name: string, obj: Record<string, unknown>) {
-    const prev = Debug.CHANGED_CACHE[name];
-
-    Debug.CHANGED_CACHE[name] = obj;
-
-    if (!prev) {
-      return;
-    }
-
-    const allKeys = new Set([...Object.keys(prev), ...Object.keys(obj)]);
-    const changed: Record<string, { prev: unknown; next: unknown }> = {};
-
-    for (const key of allKeys) {
-      const prevVal = prev[key];
-      const nextVal = obj[key];
-      if (!deepEqual(prevVal, nextVal)) {
-        changed[key] = { prev: prevVal, next: nextVal };
-      }
-    }
-
-    if (Object.keys(changed).length > 0) {
-      console.info(`[${name}] changed:`, changed);
-    }
-  }
-}
-
-function deepEqual(a: unknown, b: unknown): boolean {
-  if (Object.is(a, b)) {
-    return true;
-  }
-
-  if (
-    a === null ||
-    b === null ||
-    typeof a !== "object" ||
-    typeof b !== "object"
-  ) {
-    return false;
-  }
-
-  if (Array.isArray(a) !== Array.isArray(b)) {
-    return false;
-  }
-
-  const keysA = Object.keys(a as Record<string, unknown>);
-  const keysB = Object.keys(b as Record<string, unknown>);
-
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-
-  for (const key of keysA) {
-    if (
-      !deepEqual(
-        (a as Record<string, unknown>)[key],
-        (b as Record<string, unknown>)[key],
-      )
-    ) {
-      return false;
-    }
-  }
-
-  return true;
 }
+//@ts-ignore
+window.debug = Debug;

excalidraw-app/package.json

@@ -36,7 +36,6 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "socket.io-client": "4.7.2",
-    "uqr": "0.1.2",
     "vite-plugin-html": "3.2.2"
   },
   "prettier": "@excalidraw/prettier-config",

excalidraw-app/share/QRCode.tsx

@@ -1,56 +0,0 @@
-import { useEffect, useState } from "react";
-import Spinner from "@excalidraw/excalidraw/components/Spinner";
-
-interface QRCodeProps {
-  value: string;
-}
-
-export const QRCode = ({ value }: QRCodeProps) => {
-  const [svgData, setSvgData] = useState<string | null>(null);
-  const [error, setError] = useState<boolean>(false);
-
-  useEffect(() => {
-    let mounted = true;
-
-    import("./qrcode.chunk")
-      .then(({ generateQRCodeSVG }) => {
-        if (mounted) {
-          try {
-            setSvgData(generateQRCodeSVG(value));
-          } catch {
-            setError(true);
-          }
-        }
-      })
-      .catch(() => {
-        if (mounted) {
-          setError(true);
-        }
-      });
-
-    return () => {
-      mounted = false;
-    };
-  }, [value]);
-
-  if (error) {
-    return null;
-  }
-
-  if (!svgData) {
-    return (
-      <div className="ShareDialog__active__qrcode ShareDialog__active__qrcode--loading">
-        <Spinner />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="ShareDialog__active__qrcode"
-      role="img"
-      aria-label="QR code for collaboration link"
-      dangerouslySetInnerHTML={{ __html: svgData }}
-    />
-  );
-};

excalidraw-app/share/ShareDialog.scss

@@ -140,31 +140,6 @@
         gap: 0.75rem;
       }
 
-      &__qrcode {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        align-self: center;
-        padding: 1rem;
-        background: #fff;
-        border-radius: 0.5rem;
-        border: 1px solid #e0e0e0;
-
-        $size: 150px;
-        width: $size;
-        height: $size;
-
-        & svg {
-          width: $size;
-          height: $size;
-        }
-
-        &--loading {
-          background: var(--island-bg-color);
-          border: 1px solid var(--dialog-border-color);
-        }
-      }
-
       &__description {
         border-top: 1px solid var(--color-gray-20);
 

excalidraw-app/share/ShareDialog.tsx

@@ -22,7 +22,6 @@ import { atom, useAtom, useAtomValue } from "../app-jotai";
 import { activeRoomLinkAtom } from "../collab/Collab";
 
 import "./ShareDialog.scss";
-import { QRCode } from "./QRCode";
 
 import type { CollabAPI } from "../collab/Collab";
 
@@ -143,7 +142,6 @@ const ActiveRoomDialog = ({
           }}
         />
       </div>
-      <QRCode value={activeRoomLink} />
       <div className="ShareDialog__active__description">
         <p>
           <span

excalidraw-app/share/qrcode.chunk.ts

@@ -1,5 +0,0 @@
-import { renderSVG } from "uqr";
-
-export const generateQRCodeSVG = (text: string): string => {
-  return renderSVG(text);
-};

excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap

@@ -50,11 +50,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
   <div
     class="welcome-screen-center__heading welcome-screen-decor excalifont"
   >
-    Your drawings are saved in your browser's storage.
-    <br />
-    Browser storage can be cleared unexpectedly.
-    <br />
-    Save your work to a file regularly to avoid losing it.
+    All your data is saved locally in your browser.
   </div>
   <div
     class="welcome-screen-menu"

excalidraw-app/vite.config.mts

@@ -102,10 +102,6 @@ export default defineConfig(({ mode }) => {
               // Taking the substring after "locales/"
               return `locales/${id.substring(index + 8)}`;
             }
-
-            if (id.includes("@excalidraw/mermaid-to-excalidraw")) {
-              return "mermaid-to-excalidraw";
-            }
           },
         },
       },
@@ -200,7 +196,6 @@ export default defineConfig(({ mode }) => {
               },
             },
           ],
-          maximumFileSizeToCacheInBytes: 2.3 * 1024 ** 2, // 2.3MB
         },
         manifest: {
           short_name: "Excalidraw",

package.json

@@ -34,7 +34,7 @@
     "prettier": "2.6.2",
     "rewire": "6.0.0",
     "rimraf": "^5.0.0",
-    "typescript": "5.9.3",
+    "typescript": "4.9.4",
     "vite": "5.0.12",
     "vite-plugin-checker": "0.7.2",
     "vite-plugin-ejs": "1.7.0",

packages/common/package.json

@@ -55,11 +55,5 @@
   "scripts": {
     "gen:types": "rimraf types && tsc",
     "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
-  },
-  "dependencies": {
-    "tinycolor2": "1.6.0"
-  },
-  "devDependencies": {
-    "@types/tinycolor2": "1.4.6"
   }
 }

packages/common/src/__snapshots__/colors.test.ts.snap

@@ -1,185 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`COLOR_PALETTE > color palette doesn't regress 1`] = `
-{
-  "black": "#1e1e1e",
-  "blue": [
-    "#e7f5ff",
-    "#a5d8ff",
-    "#4dabf7",
-    "#228be6",
-    "#1971c2",
-  ],
-  "bronze": [
-    "#f8f1ee",
-    "#eaddd7",
-    "#d2bab0",
-    "#a18072",
-    "#846358",
-  ],
-  "cyan": [
-    "#e3fafc",
-    "#99e9f2",
-    "#3bc9db",
-    "#15aabf",
-    "#0c8599",
-  ],
-  "grape": [
-    "#f8f0fc",
-    "#eebefa",
-    "#da77f2",
-    "#be4bdb",
-    "#9c36b5",
-  ],
-  "gray": [
-    "#f8f9fa",
-    "#e9ecef",
-    "#ced4da",
-    "#868e96",
-    "#343a40",
-  ],
-  "green": [
-    "#ebfbee",
-    "#b2f2bb",
-    "#69db7c",
-    "#40c057",
-    "#2f9e44",
-  ],
-  "orange": [
-    "#fff4e6",
-    "#ffd8a8",
-    "#ffa94d",
-    "#fd7e14",
-    "#e8590c",
-  ],
-  "pink": [
-    "#fff0f6",
-    "#fcc2d7",
-    "#f783ac",
-    "#e64980",
-    "#c2255c",
-  ],
-  "red": [
-    "#fff5f5",
-    "#ffc9c9",
-    "#ff8787",
-    "#fa5252",
-    "#e03131",
-  ],
-  "teal": [
-    "#e6fcf5",
-    "#96f2d7",
-    "#38d9a9",
-    "#12b886",
-    "#099268",
-  ],
-  "transparent": "transparent",
-  "violet": [
-    "#f3f0ff",
-    "#d0bfff",
-    "#9775fa",
-    "#7950f2",
-    "#6741d9",
-  ],
-  "white": "#ffffff",
-  "yellow": [
-    "#fff9db",
-    "#ffec99",
-    "#ffd43b",
-    "#fab005",
-    "#f08c00",
-  ],
-}
-`;
-
-exports[`applyDarkModeFilter > COLOR_PALETTE regression tests > matches snapshot for all palette colors 1`] = `
-{
-  "black": "#d3d3d3",
-  "blue": [
-    "#121e26",
-    "#154162",
-    "#2273b4",
-    "#3791e0",
-    "#56a2e8",
-  ],
-  "bronze": [
-    "#221c1a",
-    "#362b26",
-    "#5a463d",
-    "#917569",
-    "#a98d84",
-  ],
-  "cyan": [
-    "#0a1e20",
-    "#004149",
-    "#007281",
-    "#0f8fa1",
-    "#3da5b6",
-  ],
-  "grape": [
-    "#211a25",
-    "#5b3165",
-    "#a954be",
-    "#d471ed",
-    "#e28af8",
-  ],
-  "gray": [
-    "#161718",
-    "#202325",
-    "#33383d",
-    "#6e757c",
-    "#b7bcc1",
-  ],
-  "green": [
-    "#0f1d12",
-    "#043b0c",
-    "#056715",
-    "#16842a",
-    "#39994b",
-  ],
-  "orange": [
-    "#22190d",
-    "#4c2b01",
-    "#924800",
-    "#cd6005",
-    "#f17634",
-  ],
-  "pink": [
-    "#26191e",
-    "#602e40",
-    "#b04d70",
-    "#f56e9d",
-    "#ff8dbc",
-  ],
-  "red": [
-    "#1f1717",
-    "#5a2c2c",
-    "#b44d4d",
-    "#fa6969",
-    "#ff8383",
-  ],
-  "teal": [
-    "#0a1d17",
-    "#00422b",
-    "#00744b",
-    "#039267",
-    "#32a783",
-  ],
-  "transparent": "#ededed00",
-  "violet": [
-    "#1f1c29",
-    "#4a3b72",
-    "#8a6cdf",
-    "#a885ff",
-    "#b595ff",
-  ],
-  "white": "#121212",
-  "yellow": [
-    "#1e1900",
-    "#362600",
-    "#5f3a00",
-    "#905000",
-    "#b86200",
-  ],
-}
-`;

packages/common/src/bounds.ts

@@ -1,17 +0,0 @@
-/**
- * x and y position of top left corner, x and y position of bottom right corner
- */
-export type Bounds = readonly [
-  minX: number,
-  minY: number,
-  maxX: number,
-  maxY: number,
-];
-
-export const isBounds = (box: unknown): box is Bounds =>
-  Array.isArray(box) &&
-  box.length === 4 &&
-  typeof box[0] === "number" &&
-  typeof box[1] === "number" &&
-  typeof box[2] === "number" &&
-  typeof box[3] === "number";

packages/common/src/colors.test.ts

@@ -1,286 +0,0 @@
-import {
-  applyDarkModeFilter,
-  COLOR_PALETTE,
-  rgbToHex,
-} from "@excalidraw/common";
-
-describe("COLOR_PALETTE", () => {
-  it("color palette doesn't regress", () => {
-    expect(COLOR_PALETTE).toMatchSnapshot();
-  });
-});
-
-describe("applyDarkModeFilter", () => {
-  describe("basic transformations", () => {
-    it("transforms black to near-white", () => {
-      const result = applyDarkModeFilter("#000000");
-      // Black inverted 93% + hue rotate should be near white/light gray
-      expect(result).toBe("#ededed");
-    });
-
-    it("transforms white to near-black", () => {
-      const result = applyDarkModeFilter("#ffffff");
-      // White inverted 93% should be near black/dark gray
-      expect(result).toBe("#121212");
-    });
-
-    it("transforms pure red", () => {
-      const result = applyDarkModeFilter("#ff0000");
-      // Invert 93% + hue rotate 180deg produces a cyan-ish tint
-      expect(result).toBe("#ff9090");
-    });
-
-    it("transforms pure green", () => {
-      const result = applyDarkModeFilter("#00ff00");
-      // Invert 93% + hue rotate 180deg
-      expect(result).toBe("#008f00");
-    });
-
-    it("transforms pure blue", () => {
-      const result = applyDarkModeFilter("#0000ff");
-      // Invert 93% + hue rotate 180deg produces a light purple
-      expect(result).toBe("#cdcdff");
-    });
-  });
-
-  describe("color formats", () => {
-    it("handles hex with hash", () => {
-      const result = applyDarkModeFilter("#ff0000");
-      // Fully opaque colors return 6-char hex
-      expect(result).toMatch(/^#[0-9a-f]{6}$/);
-    });
-
-    it("handles named colors", () => {
-      const result = applyDarkModeFilter("red");
-      // "red" = #ff0000, fully opaque
-      expect(result).toBe("#ff9090");
-    });
-
-    it("handles rgb format", () => {
-      const result = applyDarkModeFilter("rgb(255, 0, 0)");
-      expect(result).toBe("#ff9090");
-    });
-
-    it("handles rgba format and preserves alpha", () => {
-      const result = applyDarkModeFilter("rgba(255, 0, 0, 0.5)");
-      expect(result).toMatch(/^#[0-9a-f]{8}$/);
-      // Alpha 0.5 = 128 in hex = 80
-      expect(result).toBe("#ff909080");
-    });
-
-    it("handles transparent", () => {
-      const result = applyDarkModeFilter("transparent");
-      // transparent = rgba(0,0,0,0), inverted should still have 0 alpha
-      expect(result).toBe("#ededed00");
-    });
-
-    it("handles shorthand hex", () => {
-      const result = applyDarkModeFilter("#f00");
-      expect(result).toBe("#ff9090");
-    });
-  });
-
-  describe("alpha preservation", () => {
-    it("omits alpha for full opacity", () => {
-      const result = applyDarkModeFilter("#ff0000ff");
-      // Full opacity returns 6-char hex (no alpha suffix)
-      expect(result).toBe("#ff9090");
-    });
-
-    it("preserves 50% opacity", () => {
-      const result = applyDarkModeFilter("#ff000080");
-      expect(result.slice(-2)).toBe("80");
-    });
-
-    it("preserves 0% opacity", () => {
-      const result = applyDarkModeFilter("#ff000000");
-      expect(result.slice(-2)).toBe("00");
-    });
-  });
-
-  describe("COLOR_PALETTE regression tests", () => {
-    it("transforms black from palette", () => {
-      // COLOR_PALETTE.black is #1e1e1e (not pure black)
-      const result = applyDarkModeFilter(COLOR_PALETTE.black);
-      expect(result).toBe("#d3d3d3");
-    });
-
-    it("transforms white from palette", () => {
-      const result = applyDarkModeFilter(COLOR_PALETTE.white);
-      expect(result).toBe("#121212");
-    });
-
-    it("transforms transparent from palette", () => {
-      const result = applyDarkModeFilter(COLOR_PALETTE.transparent);
-      expect(result).toBe("#ededed00");
-    });
-
-    // Test each color family from the palette (all opaque, so 6-char hex)
-    describe("red shades", () => {
-      const redShades = COLOR_PALETTE.red;
-      it.each(redShades.map((color, i) => [color, i]))(
-        "transforms red shade %s (index %d)",
-        (color) => {
-          const result = applyDarkModeFilter(color as string);
-          expect(result).toMatch(/^#[0-9a-f]{6}$/);
-        },
-      );
-    });
-
-    describe("blue shades", () => {
-      const blueShades = COLOR_PALETTE.blue;
-      it.each(blueShades.map((color, i) => [color, i]))(
-        "transforms blue shade %s (index %d)",
-        (color) => {
-          const result = applyDarkModeFilter(color as string);
-          expect(result).toMatch(/^#[0-9a-f]{6}$/);
-        },
-      );
-    });
-
-    describe("green shades", () => {
-      const greenShades = COLOR_PALETTE.green;
-      it.each(greenShades.map((color, i) => [color, i]))(
-        "transforms green shade %s (index %d)",
-        (color) => {
-          const result = applyDarkModeFilter(color as string);
-          expect(result).toMatch(/^#[0-9a-f]{6}$/);
-        },
-      );
-    });
-
-    describe("gray shades", () => {
-      const grayShades = COLOR_PALETTE.gray;
-      it.each(grayShades.map((color, i) => [color, i]))(
-        "transforms gray shade %s (index %d)",
-        (color) => {
-          const result = applyDarkModeFilter(color as string);
-          expect(result).toMatch(/^#[0-9a-f]{6}$/);
-        },
-      );
-    });
-
-    describe("bronze shades", () => {
-      const bronzeShades = COLOR_PALETTE.bronze;
-      it.each(bronzeShades.map((color, i) => [color, i]))(
-        "transforms bronze shade %s (index %d)",
-        (color) => {
-          const result = applyDarkModeFilter(color as string);
-          expect(result).toMatch(/^#[0-9a-f]{6}$/);
-        },
-      );
-    });
-
-    // Snapshot test for full palette to catch any regressions
-    it("matches snapshot for all palette colors", () => {
-      const transformedPalette: Record<string, string | string[]> = {};
-
-      transformedPalette.black = applyDarkModeFilter(COLOR_PALETTE.black);
-      transformedPalette.white = applyDarkModeFilter(COLOR_PALETTE.white);
-      transformedPalette.transparent = applyDarkModeFilter(
-        COLOR_PALETTE.transparent,
-      );
-
-      // Transform color arrays
-      for (const colorName of [
-        "gray",
-        "red",
-        "pink",
-        "grape",
-        "violet",
-        "blue",
-        "cyan",
-        "teal",
-        "green",
-        "yellow",
-        "orange",
-        "bronze",
-      ] as const) {
-        const shades = COLOR_PALETTE[colorName];
-        transformedPalette[colorName] = shades.map((shade) =>
-          applyDarkModeFilter(shade),
-        );
-      }
-
-      expect(transformedPalette).toMatchSnapshot();
-    });
-  });
-
-  describe("caching", () => {
-    it("returns same result for same input (cached)", () => {
-      const result1 = applyDarkModeFilter("#ff0000");
-      const result2 = applyDarkModeFilter("#ff0000");
-      expect(result1).toBe(result2);
-    });
-  });
-});
-
-describe("rgbToHex", () => {
-  describe("basic RGB conversion", () => {
-    it("converts black (0,0,0)", () => {
-      expect(rgbToHex(0, 0, 0)).toBe("#000000");
-    });
-
-    it("converts white (255,255,255)", () => {
-      expect(rgbToHex(255, 255, 255)).toBe("#ffffff");
-    });
-
-    it("converts red (255,0,0)", () => {
-      expect(rgbToHex(255, 0, 0)).toBe("#ff0000");
-    });
-
-    it("converts green (0,255,0)", () => {
-      expect(rgbToHex(0, 255, 0)).toBe("#00ff00");
-    });
-
-    it("converts blue (0,0,255)", () => {
-      expect(rgbToHex(0, 0, 255)).toBe("#0000ff");
-    });
-
-    it("converts arbitrary color", () => {
-      expect(rgbToHex(30, 30, 30)).toBe("#1e1e1e");
-    });
-  });
-
-  describe("leading zeros preservation", () => {
-    it("preserves leading zeros for low values", () => {
-      expect(rgbToHex(0, 0, 1)).toBe("#000001");
-      expect(rgbToHex(0, 1, 0)).toBe("#000100");
-      expect(rgbToHex(1, 0, 0)).toBe("#010000");
-    });
-
-    it("preserves zeros for single-digit hex values", () => {
-      expect(rgbToHex(15, 15, 15)).toBe("#0f0f0f");
-    });
-  });
-
-  describe("alpha handling", () => {
-    it("omits alpha when undefined", () => {
-      expect(rgbToHex(255, 0, 0)).toBe("#ff0000");
-      expect(rgbToHex(255, 0, 0, undefined)).toBe("#ff0000");
-    });
-
-    it("omits alpha when fully opaque (1)", () => {
-      expect(rgbToHex(255, 0, 0, 1)).toBe("#ff0000");
-    });
-
-    it("includes alpha for semi-transparent (0.5)", () => {
-      // 0.5 * 255 = 127.5 -> rounds to 128 = 0x80
-      expect(rgbToHex(255, 0, 0, 0.5)).toBe("#ff000080");
-    });
-
-    it("includes alpha for fully transparent (0)", () => {
-      expect(rgbToHex(255, 0, 0, 0)).toBe("#ff000000");
-    });
-
-    it("includes alpha for near-opaque (0.99)", () => {
-      // 0.99 * 255 = 252.45 -> rounds to 252 = 0xfc
-      expect(rgbToHex(255, 0, 0, 0.99)).toBe("#ff0000fc");
-    });
-
-    it("pads alpha with leading zero when needed", () => {
-      // 0.05 * 255 = 12.75 -> rounds to 13 = 0x0d
-      expect(rgbToHex(255, 0, 0, 0.05)).toBe("#ff00000d");
-    });
-  });
-});

packages/common/src/colors.ts

@@ -1,117 +1,8 @@
-import tinycolor from "tinycolor2";
+import oc from "open-color";
 
-import { clamp } from "@excalidraw/math";
-import { degreesToRadians } from "@excalidraw/math";
+import type { Merge } from "./utility-types";
 
-import type { Degrees } from "@excalidraw/math";
-
-// ---------------------------------------------------------------------------
-// Dark mode color transformation
-// ---------------------------------------------------------------------------
-
-// Browser-only cache to avoid memory leaks on server
-const DARK_MODE_COLORS_CACHE: Map<string, string> | null =
-  typeof window !== "undefined" ? new Map() : null;
-
-function cssHueRotate(
-  red: number,
-  green: number,
-  blue: number,
-  degrees: Degrees,
-): { r: number; g: number; b: number } {
-  // normalize
-  const r = red / 255;
-  const g = green / 255;
-  const b = blue / 255;
-
-  // Convert degrees to radians
-  const a = degreesToRadians(degrees);
-
-  const c = Math.cos(a);
-  const s = Math.sin(a);
-
-  // rotation matrix
-  const matrix = [
-    0.213 + c * 0.787 - s * 0.213,
-    0.715 - c * 0.715 - s * 0.715,
-    0.072 - c * 0.072 + s * 0.928,
-    0.213 - c * 0.213 + s * 0.143,
-    0.715 + c * 0.285 + s * 0.14,
-    0.072 - c * 0.072 - s * 0.283,
-    0.213 - c * 0.213 - s * 0.787,
-    0.715 - c * 0.715 + s * 0.715,
-    0.072 + c * 0.928 + s * 0.072,
-  ];
-
-  // transform
-  const newR = r * matrix[0] + g * matrix[1] + b * matrix[2];
-  const newG = r * matrix[3] + g * matrix[4] + b * matrix[5];
-  const newB = r * matrix[6] + g * matrix[7] + b * matrix[8];
-
-  // clamp the values to [0, 1] range and convert back to [0, 255]
-  return {
-    r: Math.round(Math.max(0, Math.min(1, newR)) * 255),
-    g: Math.round(Math.max(0, Math.min(1, newG)) * 255),
-    b: Math.round(Math.max(0, Math.min(1, newB)) * 255),
-  };
-}
-
-const cssInvert = (
-  r: number,
-  g: number,
-  b: number,
-  percent: number,
-): { r: number; g: number; b: number } => {
-  const p = clamp(percent, 0, 100) / 100;
-
-  // Function to invert a single color component
-  const invertComponent = (color: number): number => {
-    // Apply the invert formula
-    const inverted = color * (1 - p) + (255 - color) * p;
-    // Round to the nearest integer and clamp to [0, 255]
-    return Math.round(clamp(inverted, 0, 255));
-  };
-
-  // Calculate the inverted RGB components
-  const invertedR = invertComponent(r);
-  const invertedG = invertComponent(g);
-  const invertedB = invertComponent(b);
-
-  return { r: invertedR, g: invertedG, b: invertedB };
-};
-
-export const applyDarkModeFilter = (color: string): string => {
-  const cached = DARK_MODE_COLORS_CACHE?.get(color);
-  if (cached) {
-    return cached;
-  }
-
-  const tc = tinycolor(color);
-  const alpha = tc.getAlpha();
-
-  // order of operations matters
-  // (corresponds to "filter: invert(invertPercent) hue-rotate(hueDegrees)" in css)
-  const rgb = tc.toRgb();
-  const inverted = cssInvert(rgb.r, rgb.g, rgb.b, 93);
-  const rotated = cssHueRotate(
-    inverted.r,
-    inverted.g,
-    inverted.b,
-    180 as Degrees,
-  );
-
-  const result = rgbToHex(rotated.r, rotated.g, rotated.b, alpha);
-
-  if (DARK_MODE_COLORS_CACHE) {
-    DARK_MODE_COLORS_CACHE.set(color, result);
-  }
-
-  return result;
-};
-
-// ---------------------------------------------------------------------------
-// Color palette
-// ---------------------------------------------------------------------------
+export const COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
 
 // FIXME can't put to utils.ts rn because of circular dependency
 const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
@@ -126,7 +17,15 @@ const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
   }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
 };
 
+export type ColorPickerColor =
+  | Exclude<keyof oc, "indigo" | "lime">
+  | "transparent"
+  | "bronze";
 export type ColorTuple = readonly [string, string, string, string, string];
+export type ColorPalette = Merge<
+  Record<ColorPickerColor, ColorTuple>,
+  { black: "#1e1e1e"; white: "#ffffff"; transparent: "transparent" }
+>;
 
 // used general type instead of specific type (ColorPalette) to support custom colors
 export type ColorPaletteCustom = { [key: string]: ColorTuple | string };
@@ -139,30 +38,38 @@ export const DEFAULT_CHART_COLOR_INDEX = 4;
 
 export const DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
 export const DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
+export const ELEMENTS_PALETTE_SHADE_INDEXES = [0, 2, 4, 6, 8] as const;
+export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
+
+export const getSpecificColorShades = (
+  color: Exclude<
+    ColorPickerColor,
+    "transparent" | "white" | "black" | "bronze"
+  >,
+  indexArr: Readonly<ColorShadesIndexes>,
+) => {
+  return indexArr.map((index) => oc[color][index]) as any as ColorTuple;
+};
 
 export const COLOR_PALETTE = {
   transparent: "transparent",
   black: "#1e1e1e",
   white: "#ffffff",
-  // open-color from https://github.com/yeun/open-color/blob/master/open-color.js
-  // corresponds to indexes [0,2,4,6,8] (weights: 50, 200, 400, 600, 800)
-  gray: ["#f8f9fa", "#e9ecef", "#ced4da", "#868e96", "#343a40"],
-  red: ["#fff5f5", "#ffc9c9", "#ff8787", "#fa5252", "#e03131"],
-  pink: ["#fff0f6", "#fcc2d7", "#f783ac", "#e64980", "#c2255c"],
-  grape: ["#f8f0fc", "#eebefa", "#da77f2", "#be4bdb", "#9c36b5"],
-  violet: ["#f3f0ff", "#d0bfff", "#9775fa", "#7950f2", "#6741d9"],
-  blue: ["#e7f5ff", "#a5d8ff", "#4dabf7", "#228be6", "#1971c2"],
-  cyan: ["#e3fafc", "#99e9f2", "#3bc9db", "#15aabf", "#0c8599"],
-  teal: ["#e6fcf5", "#96f2d7", "#38d9a9", "#12b886", "#099268"],
-  green: ["#ebfbee", "#b2f2bb", "#69db7c", "#40c057", "#2f9e44"],
-  yellow: ["#fff9db", "#ffec99", "#ffd43b", "#fab005", "#f08c00"],
-  orange: ["#fff4e6", "#ffd8a8", "#ffa94d", "#fd7e14", "#e8590c"],
-  // radix bronze shades [3,5,7,9,11]
+  // open-colors
+  gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
+  red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
+  pink: getSpecificColorShades("pink", ELEMENTS_PALETTE_SHADE_INDEXES),
+  grape: getSpecificColorShades("grape", ELEMENTS_PALETTE_SHADE_INDEXES),
+  violet: getSpecificColorShades("violet", ELEMENTS_PALETTE_SHADE_INDEXES),
+  blue: getSpecificColorShades("blue", ELEMENTS_PALETTE_SHADE_INDEXES),
+  cyan: getSpecificColorShades("cyan", ELEMENTS_PALETTE_SHADE_INDEXES),
+  teal: getSpecificColorShades("teal", ELEMENTS_PALETTE_SHADE_INDEXES),
+  green: getSpecificColorShades("green", ELEMENTS_PALETTE_SHADE_INDEXES),
+  yellow: getSpecificColorShades("yellow", ELEMENTS_PALETTE_SHADE_INDEXES),
+  orange: getSpecificColorShades("orange", ELEMENTS_PALETTE_SHADE_INDEXES),
+  // radix bronze shades 3,5,7,9,11
   bronze: ["#f8f1ee", "#eaddd7", "#d2bab0", "#a18072", "#846358"],
-} as const;
-
-export type ColorPalette = typeof COLOR_PALETTE;
-export type ColorPickerColor = keyof typeof COLOR_PALETTE;
+} as ColorPalette;
 
 const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
   "cyan",
@@ -177,6 +84,7 @@ const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
   "red",
 ]);
 
+// -----------------------------------------------------------------------------
 // quick picks defaults
 // -----------------------------------------------------------------------------
 
@@ -211,6 +119,7 @@ export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
   "#fdf8f6",
 ] as ColorTuple;
 
+// -----------------------------------------------------------------------------
 // palette defaults
 // -----------------------------------------------------------------------------
 
@@ -236,120 +145,29 @@ export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
   ...COMMON_ELEMENT_SHADES,
 } as const;
 
-// color palette helpers
+// -----------------------------------------------------------------------------
+// helpers
 // -----------------------------------------------------------------------------
 
 // !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!!
-export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) => [
-  // 2nd row
-  COLOR_PALETTE.cyan[index],
-  COLOR_PALETTE.blue[index],
-  COLOR_PALETTE.violet[index],
-  COLOR_PALETTE.grape[index],
-  COLOR_PALETTE.pink[index],
+export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) =>
+  [
+    // 2nd row
+    COLOR_PALETTE.cyan[index],
+    COLOR_PALETTE.blue[index],
+    COLOR_PALETTE.violet[index],
+    COLOR_PALETTE.grape[index],
+    COLOR_PALETTE.pink[index],
 
-  // 3rd row
-  COLOR_PALETTE.green[index],
-  COLOR_PALETTE.teal[index],
-  COLOR_PALETTE.yellow[index],
-  COLOR_PALETTE.orange[index],
-  COLOR_PALETTE.red[index],
-];
+    // 3rd row
+    COLOR_PALETTE.green[index],
+    COLOR_PALETTE.teal[index],
+    COLOR_PALETTE.yellow[index],
+    COLOR_PALETTE.orange[index],
+    COLOR_PALETTE.red[index],
+  ] as const;
+
+export const rgbToHex = (r: number, g: number, b: number) =>
+  `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
 
 // -----------------------------------------------------------------------------
-// other helpers
-// -----------------------------------------------------------------------------
-
-export const rgbToHex = (r: number, g: number, b: number, a?: number) => {
-  // (1 << 24) adds 0x1000000 to ensure the hex string is always 7 chars,
-  // then slice(1) removes the leading "1" to get exactly 6 hex digits
-  // e.g. rgb(0,0,0) -> 0x1000000 -> "1000000" -> "000000"
-  const hex6 = `#${((1 << 24) + (r << 16) + (g << 8) + b)
-    .toString(16)
-    .slice(1)}`;
-  if (a !== undefined && a < 1) {
-    // convert alpha from 0-1 float to 0-255 int, then to 2-digit hex
-    // e.g. 0.5 -> 128 -> "80"
-    const alphaHex = Math.round(a * 255)
-      .toString(16)
-      .padStart(2, "0");
-    return `${hex6}${alphaHex}`;
-  }
-  return hex6;
-};
-
-/**
- * @returns #RRGGBB or #RRGGBBAA based on color containing non-opaque alpha,
- *  null if not valid color
- */
-export const colorToHex = (color: string): string | null => {
-  const tc = tinycolor(color);
-  if (!tc.isValid()) {
-    return null;
-  }
-  const { r, g, b, a } = tc.toRgb();
-  return rgbToHex(r, g, b, a);
-};
-
-export const isTransparent = (color: string) => {
-  return tinycolor(color).getAlpha() === 0;
-};
-
-// -----------------------------------------------------------------------------
-// color contract helpers
-// -----------------------------------------------------------------------------
-
-export const COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
-
-const calculateContrast = (r: number, g: number, b: number): number => {
-  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-  return yiq;
-};
-
-// YIQ algo, inspiration from https://stackoverflow.com/a/11868398
-export const isColorDark = (color: string, threshold = 160): boolean => {
-  // no color ("") -> assume it default to black
-  if (!color) {
-    return true;
-  }
-
-  if (isTransparent(color)) {
-    return false;
-  }
-
-  const tc = tinycolor(color);
-  if (!tc.isValid()) {
-    // invalid color -> assume it defaults to black
-    return true;
-  }
-
-  const { r, g, b } = tc.toRgb();
-  return calculateContrast(r, g, b) < threshold;
-};
-
-// -----------------------------------------------------------------------------
-// normalization
-// -----------------------------------------------------------------------------
-
-/**
- * tries to keep the input color as-is if it's valid, making minimal adjustments
- * (trimming whitespace or adding `#` to hex colors)
- */
-export const normalizeInputColor = (color: string): string | null => {
-  color = color.trim();
-  if (isTransparent(color)) {
-    return color;
-  }
-
-  const tc = tinycolor(color);
-  if (tc.isValid()) {
-    // testing for `#` first fixes a bug on Electron (more specfically, an
-    // Obsidian popout window), where a hex color without `#` is considered valid
-    if (["hex", "hex8"].includes(tc.getFormat()) && !color.startsWith("#")) {
-      return `#${color}`;
-    }
-    return color;
-  }
-
-  return null;
-};

packages/common/src/constants.ts

@@ -106,16 +106,8 @@ export const CLASSES = {
   CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
   SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
   FRAME_NAME: "frame-name",
-  DROPDOWN_MENU_EVENT_WRAPPER: "dropdown-menu-event-wrapper",
 };
 
-export const FONT_SIZES = {
-  sm: 16,
-  md: 20,
-  lg: 28,
-  xl: 36,
-} as const;
-
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
@@ -191,8 +183,6 @@ export const THEME = {
   DARK: "dark",
 } as const;
 
-export const DARK_THEME_FILTER = "invert(93%) hue-rotate(180deg)";
-
 export const FRAME_STYLE = {
   strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
   strokeWidth: 2 as ExcalidrawElement["strokeWidth"],
@@ -252,7 +242,6 @@ export const STRING_MIME_TYPES = {
   json: "application/json",
   // excalidraw data
   excalidraw: "application/vnd.excalidraw+json",
-  excalidrawClipboard: "application/vnd.excalidraw.clipboard+json",
   // LEGACY: fully-qualified library JSON data
   excalidrawlib: "application/vnd.excalidrawlib+json",
   // list of excalidraw library item ids
@@ -309,6 +298,9 @@ export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
 
+// duplicates --theme-filter, should be removed soon
+export const THEME_FILTER = "invert(93%) hue-rotate(180deg)";
+
 export const URL_QUERY_KEYS = {
   addLibrary: "addLibrary",
 } as const;
@@ -418,6 +410,7 @@ export const DEFAULT_ELEMENT_PROPS: {
   roughness: ExcalidrawElement["roughness"];
   opacity: ExcalidrawElement["opacity"];
   locked: ExcalidrawElement["locked"];
+  containerBehavior: ExcalidrawElement["containerBehavior"];
 } = {
   strokeColor: COLOR_PALETTE.black,
   backgroundColor: COLOR_PALETTE.transparent,
@@ -427,6 +420,10 @@ export const DEFAULT_ELEMENT_PROPS: {
   roughness: ROUGHNESS.artist,
   opacity: 100,
   locked: false,
+  containerBehavior: {
+    textFlow: "growing",
+    margin: BOUND_TEXT_PADDING,
+  },
 };
 
 export const LIBRARY_SIDEBAR_TAB = "library";

packages/common/src/editorInterface.ts

@@ -16,6 +16,7 @@ export type EditorInterface = Readonly<{
 const DESKTOP_UI_MODE_STORAGE_KEY = "excalidraw.desktopUIMode";
 
 // breakpoints
+// mobile: up to 699px
 export const MQ_MAX_MOBILE = 599;
 
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
@@ -23,9 +24,9 @@ export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
 
 // tablets
 export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
-export const MQ_MAX_TABLET = 1180; // ipad air
+export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
 
-// desktop/laptop (NOTE: not used for form factor detection)
+// desktop/laptop
 export const MQ_MIN_WIDTH_DESKTOP = 1440;
 
 // sidebar

packages/common/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./binary-heap";
-export * from "./bounds";
 export * from "./colors";
 export * from "./constants";
 export * from "./font-metadata";
@@ -11,5 +10,5 @@ export * from "./random";
 export * from "./url";
 export * from "./utils";
 export * from "./emitter";
+export * from "./visualdebug";
 export * from "./editorInterface";
-export { Debug } from "../debug";

packages/common/src/utils.ts

@@ -1,7 +1,5 @@
 import { average } from "@excalidraw/math";
 
-import type { GlobalCoord } from "@excalidraw/math";
-
 import type { FontFamilyValues, FontString } from "@excalidraw/element/types";
 
 import type {
@@ -12,6 +10,7 @@ import type {
   Zoom,
 } from "@excalidraw/excalidraw/types";
 
+import { COLOR_PALETTE } from "./colors";
 import {
   DEFAULT_VERSION,
   ENV,
@@ -443,7 +442,7 @@ export const viewportCoordsToSceneCoords = (
   const x = (clientX - offsetLeft) / zoom.value - scrollX;
   const y = (clientY - offsetTop) / zoom.value - scrollY;
 
-  return { x, y } as GlobalCoord;
+  return { x, y };
 };
 
 export const sceneCoordsToViewportCoords = (
@@ -549,6 +548,16 @@ export const mapFind = <T, K>(
   return undefined;
 };
 
+export const isTransparent = (color: string) => {
+  const isRGBTransparent = color.length === 5 && color.substr(4, 1) === "0";
+  const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === "00";
+  return (
+    isRGBTransparent ||
+    isRRGGBBTransparent ||
+    color === COLOR_PALETTE.transparent
+  );
+};
+
 export type ResolvablePromise<T> = Promise<T> & {
   resolve: [T] extends [undefined]
     ? (value?: MaybePromise<Awaited<T>>) => void
@@ -1148,69 +1157,39 @@ export const normalizeEOL = (str: string) => {
 };
 
 // -----------------------------------------------------------------------------
-export type HasBrand<T> = {
+type HasBrand<T> = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  [K in keyof T]: K extends `~brand${infer _}` | "_brand" ? true : never;
+  [K in keyof T]: K extends `~brand${infer _}` ? true : never;
 }[keyof T];
 
 type RemoveAllBrands<T> = HasBrand<T> extends true
   ? {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      [K in keyof T as K extends `~brand~${infer _}` | "_brand"
-        ? never
-        : K]: T[K];
+      [K in keyof T as K extends `~brand~${infer _}` ? never : K]: T[K];
     }
-  : T;
+  : never;
 
-// For accepting values - uses loose matching for branded types
-// Preserves readonly modifier: mutable array requires mutable input
-type UnbrandForValue<T> = T extends Map<infer E, infer F>
-  ? Map<UnbrandForValue<E>, UnbrandForValue<F>>
+// adapted from https://github.com/colinhacks/zod/discussions/1994#discussioncomment-6068940
+// currently does not cover all types (e.g. tuples, promises...)
+type Unbrand<T> = T extends Map<infer E, infer F>
+  ? Map<E, F>
   : T extends Set<infer E>
-  ? Set<UnbrandForValue<E>>
-  : T extends readonly any[]
-  ? T extends any[]
-    ? unknown[] // mutable array - require mutable input
-    : readonly unknown[] // readonly array - accept readonly input
+  ? Set<E>
+  : T extends Array<infer E>
+  ? Array<E>
   : RemoveAllBrands<T>;
 
-// For return types - preserves array element unbranding
-export type Unbrand<T> = T extends Map<infer E, infer F>
-  ? Map<Unbrand<E>, Unbrand<F>>
-  : T extends Set<infer E>
-  ? Set<Unbrand<E>>
-  : T extends readonly (infer E)[]
-  ? Array<Unbrand<E>>
-  : RemoveAllBrands<T>;
-
-export type CombineBrands<BrandedType, CurrentType> =
-  BrandedType extends readonly (infer BE)[]
-    ? CurrentType extends readonly (infer CE)[]
-      ? Array<CE & BE>
-      : CurrentType & BrandedType
-    : CurrentType & BrandedType;
-
-export type CombineBrandsIfNeeded<T, Required> = [T] extends [Required]
-  ? T[]
-  : HasBrand<T> extends true
-  ? CombineBrands<T, Required>[]
-  : Required[];
-
 /**
  * Makes type into a branded type, ensuring that value is assignable to
- * the base unbranded type. Optionally you can explicitly supply current value
+ * the base ubranded type. Optionally you can explicitly supply current value
  * type to combine both (useful for composite branded types. Make sure you
  * compose branded types which are not composite themselves.)
  */
-export function toBrandedType<BrandedType>(
-  value: UnbrandForValue<BrandedType>,
-): BrandedType;
-export function toBrandedType<BrandedType, CurrentType>(
-  value: CurrentType,
-): CombineBrands<BrandedType, CurrentType>;
-export function toBrandedType(value: unknown) {
-  return value;
-}
+export const toBrandedType = <BrandedType, CurrentType = BrandedType>(
+  value: Unbrand<BrandedType>,
+) => {
+  return value as CurrentType & BrandedType;
+};
 
 // -----------------------------------------------------------------------------
 
@@ -1332,10 +1311,3 @@ export const setFeatureFlag = <F extends keyof FEATURE_FLAGS>(
     console.error("unable to set feature flag", e);
   }
 };
-
-export const oneOf = <N extends string | number | symbol | null, H extends N>(
-  needle: N,
-  haystack: readonly H[],
-): needle is H => {
-  return haystack.includes(needle as any);
-};

packages/common/src/visualdebug.ts

@@ -1,24 +1,18 @@
 import {
   isLineSegment,
   lineSegment,
-  pointDistanceSq,
   pointFrom,
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
-import { type Bounds, isBounds } from "@excalidraw/common";
-import {
-  getElementBounds,
-  intersectElementWithLineSegment,
-  isFreeDrawElement,
-  isLinearElement,
-  isPathALoop,
-} from "@excalidraw/element";
 
-import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+import { isBounds } from "@excalidraw/element";
+
 import type { Curve } from "@excalidraw/math";
 import type { LineSegment } from "@excalidraw/utils";
 
+import type { Bounds } from "@excalidraw/element";
+
 // The global data holder to collect the debug operations
 declare global {
   interface Window {
@@ -31,69 +25,10 @@ declare global {
 
 export type DebugElement = {
   color: string;
-  data: LineSegment<GlobalPoint> | Curve<GlobalPoint> | DebugPolygon;
+  data: LineSegment<GlobalPoint> | Curve<GlobalPoint>;
   permanent: boolean;
 };
 
-export type DebugPolygon = {
-  type: "polygon";
-  points: GlobalPoint[];
-  fill?: boolean;
-  close?: boolean;
-};
-
-export const debugDrawHitVolume = (
-  element: ExcalidrawElement,
-  elementsMap: ElementsMap,
-  options?: {
-    rays?: number;
-    color?: string;
-    fill?: boolean;
-  },
-) => {
-  if (
-    (isLinearElement(element) || isFreeDrawElement(element)) &&
-    !isPathALoop(element.points)
-  ) {
-    return;
-  }
-
-  const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-  const center = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
-  const rays = options?.rays ?? 100;
-  const radius = Math.max(x2 - x1, y2 - y1) * 2;
-  const points: GlobalPoint[] = [];
-
-  for (let i = 0; i < rays; i += 1) {
-    const angle = (i / rays) * Math.PI * 2;
-    const end = pointFrom<GlobalPoint>(
-      center[0] + Math.cos(angle) * radius,
-      center[1] + Math.sin(angle) * radius,
-    );
-    const hits = intersectElementWithLineSegment(
-      element,
-      elementsMap,
-      lineSegment(center, end),
-    );
-    if (hits.length === 0) {
-      continue;
-    }
-    hits.sort(pointDistanceSq);
-    points.push(hits[0]);
-  }
-
-  if (points.length >= 3) {
-    debugDrawPolygon(points, {
-      color: options?.color ?? "orange",
-      fill: options?.fill ?? true,
-    });
-  } else {
-    console.warn(
-      `debugDrawHitVolume: could not compute hit volume for element ${element.id}`,
-    );
-  }
-};
-
 export const debugDrawCubicBezier = (
   c: Curve<GlobalPoint>,
   opts?: {
@@ -128,31 +63,6 @@ export const debugDrawLine = (
   );
 };
 
-export const debugDrawPolygon = (
-  points: GlobalPoint[],
-  opts?: {
-    color?: string;
-    permanent?: boolean;
-    fill?: boolean;
-    close?: boolean;
-  },
-) => {
-  if (points.length < 2) {
-    return;
-  }
-
-  addToCurrentFrame({
-    color: opts?.color ?? "orange",
-    permanent: !!opts?.permanent,
-    data: {
-      type: "polygon",
-      points,
-      fill: opts?.fill,
-      close: opts?.close,
-    },
-  });
-};
-
 export const debugDrawPoint = (
   p: GlobalPoint,
   opts?: {
@@ -193,7 +103,7 @@ export const debugDrawBounds = (
     permanent?: boolean;
   },
 ) => {
-  (isBounds(box) ? [box] : box).forEach((bbox: Bounds) =>
+  (isBounds(box) ? [box] : box).forEach((bbox) =>
     debugDrawLine(
       [
         lineSegment(

packages/element/package.json

@@ -17,12 +17,6 @@
       "development": "./dist/dev/index.js",
       "production": "./dist/prod/index.js",
       "default": "./dist/prod/index.js"
-    },
-    "./visualdebug": {
-      "types": "./dist/types/element/src/visualdebug.d.ts",
-      "development": "./dist/dev/visualdebug.js",
-      "production": "./dist/prod/visualdebug.js",
-      "default": "./dist/prod/visualdebug.js"
     }
   },
   "files": [

packages/element/src/Scene.ts

@@ -438,8 +438,6 @@ export class Scene {
     options: {
       informMutation: boolean;
       isDragging: boolean;
-      isBindingEnabled?: boolean;
-      isMidpointSnappingEnabled?: boolean;
     } = {
       informMutation: true,
       isDragging: false,

packages/element/src/arrows/focus.ts

@@ -1,558 +0,0 @@
-import { pointDistance, pointFrom, type GlobalPoint } from "@excalidraw/math";
-import { invariant } from "@excalidraw/common";
-
-import type { AppState, NullableGridSize } from "@excalidraw/excalidraw/types";
-
-import {
-  bindBindingElement,
-  calculateFixedPointForNonElbowArrowBinding,
-  FOCUS_POINT_SIZE,
-  getBindingGap,
-  getGlobalFixedPointForBindableElement,
-  isBindingEnabled,
-  maxBindingDistance_simple,
-  unbindBindingElement,
-  updateBoundPoint,
-} from "../binding";
-import {
-  isBindableElement,
-  isBindingElement,
-  isElbowArrow,
-} from "../typeChecks";
-import { LinearElementEditor } from "../linearElementEditor";
-import { getHoveredElementForFocusPoint, hitElementItself } from "../collision";
-import { moveArrowAboveBindable } from "../zindex";
-
-import type {
-  ElementsMap,
-  ExcalidrawArrowElement,
-  ExcalidrawBindableElement,
-  NonDeletedSceneElementsMap,
-  PointsPositionUpdates,
-} from "../types";
-
-import type { Scene } from "../Scene";
-
-export const isFocusPointVisible = (
-  focusPoint: GlobalPoint,
-  arrow: ExcalidrawArrowElement,
-  bindableElement: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  appState: {
-    isBindingEnabled: AppState["isBindingEnabled"];
-    zoom: AppState["zoom"];
-  },
-  startOrEnd: "start" | "end",
-  ignoreOverlap = false,
-): boolean => {
-  // No focus point management for elbow arrows, because elbow arrows
-  // always have their focus point at the arrow point itself
-  if (
-    isElbowArrow(arrow) ||
-    !isBindingEnabled(appState) ||
-    arrow.points.length !== 2
-  ) {
-    return false;
-  }
-
-  // Avoid showing the focus point indicator if the focus point is essentially
-  // on top of the arrow point it belongs to itself, if not ignoring specifically
-  if (!ignoreOverlap) {
-    const associatedPointIdx =
-      arrow.startBinding?.elementId === bindableElement.id
-        ? 0
-        : arrow.points.length - 1;
-    const associatedArrowPoint =
-      LinearElementEditor.getPointAtIndexGlobalCoordinates(
-        arrow,
-        associatedPointIdx,
-        elementsMap,
-      );
-
-    if (
-      pointDistance(focusPoint, associatedArrowPoint) <
-      (FOCUS_POINT_SIZE * 1.5) / appState.zoom.value
-    ) {
-      return false;
-    }
-  }
-
-  const arrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    arrow,
-    startOrEnd === "end" ? arrow.points.length - 1 : 0,
-    elementsMap,
-  );
-
-  // Check if the focus point is within the element's shape bounds
-  // Endpoint dragging takes precedence
-  return (
-    pointDistance(focusPoint, arrowPoint) >=
-      (FOCUS_POINT_SIZE * 1.5) / appState.zoom.value &&
-    hitElementItself({
-      element: bindableElement,
-      elementsMap,
-      point: focusPoint,
-      threshold: getBindingGap(bindableElement, arrow),
-      overrideShouldTestInside: true,
-    })
-  );
-};
-
-// Updates the arrow endpoints in "orbit" configuration
-const focusPointUpdate = (
-  arrow: ExcalidrawArrowElement,
-  bindableElement: ExcalidrawBindableElement | null,
-  isStartBinding: boolean,
-  elementsMap: NonDeletedSceneElementsMap,
-  scene: Scene,
-  appState: AppState,
-  switchToInsideBinding: boolean,
-) => {
-  const pointUpdates = new Map();
-
-  const bindingField = isStartBinding ? "startBinding" : "endBinding";
-  const adjacentBindingField = isStartBinding ? "endBinding" : "startBinding";
-  let currentBinding = arrow[bindingField];
-  let adjacentBinding = arrow[adjacentBindingField];
-
-  // Update the dragged focus point related end
-  if (currentBinding && bindableElement) {
-    // Update the targeted bindings
-    const boundToSameElement =
-      bindableElement &&
-      adjacentBinding &&
-      currentBinding.elementId === adjacentBinding.elementId;
-    if (switchToInsideBinding || boundToSameElement) {
-      currentBinding = {
-        ...currentBinding,
-        mode: "inside",
-      };
-    } else {
-      currentBinding = {
-        ...currentBinding,
-        mode: "orbit",
-      };
-    }
-
-    const pointIndex = isStartBinding ? 0 : arrow.points.length - 1;
-    const newPoint = updateBoundPoint(
-      arrow,
-      bindingField as "startBinding" | "endBinding",
-      currentBinding,
-      bindableElement,
-      elementsMap,
-      true,
-    );
-
-    if (newPoint) {
-      pointUpdates.set(pointIndex, { point: newPoint });
-    }
-  }
-
-  // Also update the adjacent end if it has a binding
-  if (adjacentBinding && adjacentBinding.mode === "orbit") {
-    const adjacentBindableElement = elementsMap.get(
-      adjacentBinding.elementId,
-    ) as ExcalidrawBindableElement;
-
-    if (
-      adjacentBindableElement &&
-      isBindableElement(adjacentBindableElement) &&
-      isBindingEnabled(appState)
-    ) {
-      // Same shape bound on both ends
-      const boundToSameElementAfterUpdate =
-        bindableElement && adjacentBinding.elementId === bindableElement.id;
-      if (switchToInsideBinding || boundToSameElementAfterUpdate) {
-        adjacentBinding = {
-          ...adjacentBinding,
-          mode: "inside",
-        };
-      } else {
-        adjacentBinding = {
-          ...adjacentBinding,
-          mode: "orbit",
-        };
-      }
-
-      const adjacentPointIndex = isStartBinding ? arrow.points.length - 1 : 0;
-      const adjacentNewPoint = updateBoundPoint(
-        arrow,
-        adjacentBindingField,
-        adjacentBinding,
-        adjacentBindableElement,
-        elementsMap,
-      );
-
-      if (adjacentNewPoint) {
-        pointUpdates.set(adjacentPointIndex, {
-          point: adjacentNewPoint,
-        });
-      }
-    }
-  }
-
-  if (pointUpdates.size > 0) {
-    LinearElementEditor.movePoints(arrow, scene, pointUpdates, {
-      [bindingField]: currentBinding,
-      [adjacentBindingField]: adjacentBinding,
-    });
-  }
-};
-
-export const handleFocusPointDrag = (
-  linearElementEditor: LinearElementEditor,
-  elementsMap: NonDeletedSceneElementsMap,
-  pointerCoords: { x: number; y: number },
-  scene: Scene,
-  appState: AppState,
-  gridSize: NullableGridSize,
-  switchToInsideBinding: boolean,
-) => {
-  const arrow = LinearElementEditor.getElement(
-    linearElementEditor.elementId,
-    elementsMap,
-  ) as any;
-
-  // Sanity checks
-  if (
-    !arrow ||
-    !isBindingElement(arrow) ||
-    isElbowArrow(arrow) ||
-    !linearElementEditor.hoveredFocusPointBinding ||
-    !linearElementEditor.draggedFocusPointBinding
-  ) {
-    return;
-  }
-
-  const isStartBinding =
-    linearElementEditor.draggedFocusPointBinding === "start";
-  const binding = isStartBinding ? arrow.startBinding : arrow.endBinding;
-  const { x: offsetX, y: offsetY } = linearElementEditor.pointerOffset;
-  const point = pointFrom<GlobalPoint>(
-    pointerCoords.x - offsetX,
-    pointerCoords.y - offsetY,
-  );
-  const bindingField = isStartBinding ? "startBinding" : "endBinding";
-  const hit = getHoveredElementForFocusPoint(
-    point,
-    arrow,
-    scene.getNonDeletedElements(),
-    elementsMap,
-    maxBindingDistance_simple(appState.zoom),
-  );
-
-  // Hovering a bindable element
-  if (hit && isBindingEnabled(appState)) {
-    // Break existing binding if bound to another shape or if binding is disabled
-    if (arrow[bindingField] && hit.id !== binding?.elementId) {
-      unbindBindingElement(
-        arrow,
-        linearElementEditor.draggedFocusPointBinding,
-        scene,
-      );
-    }
-
-    // Handle binding mode switch
-    const newMode =
-      switchToInsideBinding && arrow[bindingField]?.mode === "orbit"
-        ? "inside"
-        : !switchToInsideBinding && arrow[bindingField]?.mode === "inside"
-        ? "orbit"
-        : null;
-
-    // If no existing binding, create it
-    if (!arrow[bindingField] || newMode) {
-      // Create a new binding if none exists
-      bindBindingElement(
-        arrow,
-        hit,
-        newMode || "orbit",
-        linearElementEditor.draggedFocusPointBinding,
-        scene,
-        point,
-      );
-    }
-
-    // Update the binding's fixed point
-    scene.mutateElement(arrow, {
-      [bindingField]: {
-        ...arrow[bindingField],
-        elementId: hit.id,
-        mode: newMode || arrow[bindingField]?.mode || "orbit",
-        ...calculateFixedPointForNonElbowArrowBinding(
-          arrow,
-          hit,
-          linearElementEditor.draggedFocusPointBinding,
-          elementsMap,
-          point,
-        ),
-      },
-    });
-  } else {
-    // Not hovering any bindable element, move the arrow endpoint
-    const pointUpdates: PointsPositionUpdates = new Map();
-    const pointIndex = isStartBinding ? 0 : arrow.points.length - 1;
-    pointUpdates.set(pointIndex, {
-      point: LinearElementEditor.createPointAt(
-        arrow,
-        elementsMap,
-        point[0],
-        point[1],
-        gridSize,
-      ),
-    });
-    LinearElementEditor.movePoints(arrow, scene, pointUpdates);
-    if (arrow[bindingField]) {
-      unbindBindingElement(arrow, isStartBinding ? "start" : "end", scene);
-    }
-  }
-
-  // Update the arrow endpoints
-  focusPointUpdate(
-    arrow,
-    hit,
-    isStartBinding,
-    elementsMap,
-    scene,
-    appState,
-    switchToInsideBinding,
-  );
-
-  if (hit && isBindingEnabled(appState)) {
-    moveArrowAboveBindable(
-      point,
-      arrow,
-      scene.getElementsIncludingDeleted(),
-      elementsMap,
-      scene,
-      hit,
-    );
-  }
-};
-
-export const handleFocusPointPointerDown = (
-  arrow: ExcalidrawArrowElement,
-  pointerDownState: { origin: { x: number; y: number } },
-  elementsMap: NonDeletedSceneElementsMap,
-  appState: AppState,
-): {
-  hitFocusPoint: "start" | "end" | null;
-  pointerOffset: { x: number; y: number };
-} => {
-  const pointerPos = pointFrom(
-    pointerDownState.origin.x,
-    pointerDownState.origin.y,
-  );
-  const hitThreshold = (FOCUS_POINT_SIZE * 1.5) / appState.zoom.value;
-
-  // Check start binding focus point
-  if (arrow.startBinding?.elementId) {
-    const bindableElement = elementsMap.get(arrow.startBinding.elementId);
-    if (
-      bindableElement &&
-      isBindableElement(bindableElement) &&
-      !bindableElement.isDeleted
-    ) {
-      const focusPoint = getGlobalFixedPointForBindableElement(
-        arrow.startBinding.fixedPoint,
-        bindableElement,
-        elementsMap,
-      );
-      if (
-        isFocusPointVisible(
-          focusPoint,
-          arrow,
-          bindableElement,
-          elementsMap,
-          appState,
-          "start",
-        ) &&
-        pointDistance(pointerPos, focusPoint) <= hitThreshold
-      ) {
-        return {
-          hitFocusPoint: "start",
-          pointerOffset: {
-            x: pointerPos[0] - focusPoint[0],
-            y: pointerPos[1] - focusPoint[1],
-          },
-        };
-      }
-    }
-  }
-
-  // Check end binding focus point (only if start not already hit)
-  if (arrow.endBinding?.elementId) {
-    const bindableElement = elementsMap.get(arrow.endBinding.elementId);
-    if (
-      bindableElement &&
-      isBindableElement(bindableElement) &&
-      !bindableElement.isDeleted
-    ) {
-      const focusPoint = getGlobalFixedPointForBindableElement(
-        arrow.endBinding.fixedPoint,
-        bindableElement,
-        elementsMap,
-      );
-      if (
-        isFocusPointVisible(
-          focusPoint,
-          arrow,
-          bindableElement,
-          elementsMap,
-          appState,
-          "end",
-        ) &&
-        pointDistance(pointerPos, focusPoint) <= hitThreshold
-      ) {
-        return {
-          hitFocusPoint: "end",
-          pointerOffset: {
-            x: pointerPos[0] - focusPoint[0],
-            y: pointerPos[1] - focusPoint[1],
-          },
-        };
-      }
-    }
-  }
-
-  return {
-    hitFocusPoint: null,
-    pointerOffset: { x: 0, y: 0 },
-  };
-};
-
-export const handleFocusPointPointerUp = (
-  linearElementEditor: LinearElementEditor,
-  scene: Scene,
-) => {
-  invariant(
-    linearElementEditor.draggedFocusPointBinding,
-    "Must have a dragged focus point at pointer release",
-  );
-
-  const arrow = LinearElementEditor.getElement<ExcalidrawArrowElement>(
-    linearElementEditor.elementId,
-    scene.getNonDeletedElementsMap(),
-  );
-  invariant(arrow, "Arrow must be in the scene");
-
-  // Clean up
-  const bindingKey =
-    linearElementEditor.draggedFocusPointBinding === "start"
-      ? "startBinding"
-      : "endBinding";
-  const otherBindingKey =
-    linearElementEditor.draggedFocusPointBinding === "start"
-      ? "endBinding"
-      : "startBinding";
-  const boundElementId = arrow[bindingKey]?.elementId;
-  const otherBoundElementId = arrow[otherBindingKey]?.elementId;
-  const oldBoundElement =
-    boundElementId &&
-    scene
-      .getNonDeletedElements()
-      .find(
-        (element) =>
-          element.id !== boundElementId &&
-          element.id !== otherBoundElementId &&
-          isBindableElement(element) &&
-          element.boundElements?.find(({ id }) => id === arrow.id),
-      );
-  if (oldBoundElement) {
-    scene.mutateElement(oldBoundElement, {
-      boundElements: oldBoundElement.boundElements?.filter(
-        ({ id }) => id !== arrow.id,
-      ),
-    });
-  }
-
-  // Record the new bound element
-  const boundElement =
-    boundElementId && scene.getNonDeletedElementsMap().get(boundElementId);
-  if (boundElement) {
-    scene.mutateElement(boundElement, {
-      boundElements: [
-        ...(boundElement.boundElements || [])?.filter(
-          ({ id }) => id !== arrow.id,
-        ),
-        {
-          id: arrow.id,
-          type: "arrow",
-        },
-      ],
-    });
-  }
-};
-
-export const handleFocusPointHover = (
-  arrow: ExcalidrawArrowElement,
-  scenePointerX: number,
-  scenePointerY: number,
-  scene: Scene,
-  appState: AppState,
-): "start" | "end" | null => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const pointerPos = pointFrom(scenePointerX, scenePointerY);
-  const hitThreshold = (FOCUS_POINT_SIZE * 1.5) / appState.zoom.value;
-
-  // Check start binding focus point
-  if (arrow.startBinding?.elementId) {
-    const bindableElement = elementsMap.get(arrow.startBinding.elementId);
-    if (
-      bindableElement &&
-      isBindableElement(bindableElement) &&
-      !bindableElement.isDeleted
-    ) {
-      const focusPoint = getGlobalFixedPointForBindableElement(
-        arrow.startBinding.fixedPoint,
-        bindableElement,
-        elementsMap,
-      );
-      if (
-        isFocusPointVisible(
-          focusPoint,
-          arrow,
-          bindableElement,
-          elementsMap,
-          appState,
-          "start",
-        ) &&
-        pointDistance(pointerPos, focusPoint) <= hitThreshold
-      ) {
-        return "start";
-      }
-    }
-  }
-
-  // Check end binding focus point (only if start not already hovered)
-  if (arrow.endBinding?.elementId) {
-    const bindableElement = elementsMap.get(arrow.endBinding.elementId);
-    if (
-      bindableElement &&
-      isBindableElement(bindableElement) &&
-      !bindableElement.isDeleted
-    ) {
-      const focusPoint = getGlobalFixedPointForBindableElement(
-        arrow.endBinding.fixedPoint,
-        bindableElement,
-        elementsMap,
-      );
-      if (
-        isFocusPointVisible(
-          focusPoint,
-          arrow,
-          bindableElement,
-          elementsMap,
-          appState,
-          "end",
-        ) &&
-        pointDistance(pointerPos, focusPoint) <= hitThreshold
-      ) {
-        return "end";
-      }
-    }
-  }
-
-  return null;
-};

packages/element/src/arrows/helpers.ts

@@ -1,45 +0,0 @@
-import type { App } from "@excalidraw/excalidraw/types";
-
-import { LinearElementEditor } from "../linearElementEditor";
-
-import { handleFocusPointDrag } from "./focus";
-
-export const maybeHandleArrowPointlikeDrag = ({
-  app,
-  event,
-}: {
-  app: App;
-  event: KeyboardEvent | React.KeyboardEvent<Element> | PointerEvent;
-}): boolean => {
-  const appState = app.state;
-  if (appState.selectedLinearElement && app.lastPointerMoveCoords) {
-    // Update focus point status if the binding mode is changing
-    if (appState.selectedLinearElement.draggedFocusPointBinding) {
-      handleFocusPointDrag(
-        appState.selectedLinearElement,
-        app.scene.getNonDeletedElementsMap(),
-        app.lastPointerMoveCoords,
-        app.scene,
-        appState,
-        app.getEffectiveGridSize(),
-        event.altKey,
-      );
-      return true;
-    } else if (
-      appState.selectedLinearElement.hoverPointIndex !== null &&
-      app.lastPointerMoveEvent &&
-      appState.selectedLinearElement.initialState.lastClickedPoint >= 0 &&
-      appState.selectedLinearElement.isDragging
-    ) {
-      LinearElementEditor.handlePointDragging(
-        app.lastPointerMoveEvent,
-        app,
-        app.lastPointerMoveCoords.x,
-        app.lastPointerMoveCoords.y,
-        appState.selectedLinearElement,
-      );
-      return true;
-    }
-  }
-  return false;
-};

packages/element/src/bounds.ts

@@ -2,7 +2,6 @@ import rough from "roughjs/bin/rough";
 
 import {
   arrayToMap,
-  type Bounds,
   invariant,
   rescalePoints,
   sizeOf,
@@ -79,6 +78,16 @@ export type RectangleBox = {
 
 type MaybeQuadraticSolution = [number | null, number | null] | false;
 
+/**
+ * x and y position of top left corner, x and y position of bottom right corner
+ */
+export type Bounds = readonly [
+  minX: number,
+  minY: number,
+  maxX: number,
+  maxY: number,
+];
+
 export type SceneBounds = readonly [
   sceneX: number,
   sceneY: number,
@@ -897,7 +906,6 @@ export const getArrowheadPoints = (
   return [x2, y2, x3, y3, x4, y4];
 };
 
-// TODO reuse shape.ts
 const generateLinearElementShape = (
   element: ExcalidrawLinearElement,
 ): Drawable => {
@@ -955,7 +963,7 @@ const getLinearElementRotatedBounds = (
   }
 
   // first element is always the curve
-  const cachedShape = ShapeCache.get(element, null)?.[0];
+  const cachedShape = ShapeCache.get(element)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
   const transformXY = ([x, y]: GlobalPoint) =>

packages/element/src/collision.ts

@@ -1,4 +1,4 @@
-import { invariant, isTransparent, type Bounds } from "@excalidraw/common";
+import { invariant, isTransparent } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -29,6 +29,7 @@ import type { FrameNameBounds } from "@excalidraw/excalidraw/types";
 
 import { isPathALoop } from "./utils";
 import {
+  type Bounds,
   doBoundsIntersect,
   elementCenterPoint,
   getCenterForBounds,
@@ -59,11 +60,8 @@ import { LinearElementEditor } from "./linearElementEditor";
 
 import { distanceToElement } from "./distance";
 
-import { getBindingGap } from "./binding";
-
 import type {
   ElementsMap,
-  ExcalidrawArrowElement,
   ExcalidrawBindableElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
@@ -108,12 +106,6 @@ export type HitTestArgs = {
   overrideShouldTestInside?: boolean;
 };
 
-let cachedPoint: GlobalPoint | null = null;
-let cachedElement: WeakRef<ExcalidrawElement> | null = null;
-let cachedThreshold: number = Infinity;
-let cachedHit: boolean = false;
-let cachedOverrideShouldTestInside = false;
-
 export const hitElementItself = ({
   point,
   element,
@@ -122,24 +114,6 @@ export const hitElementItself = ({
   frameNameBound = null,
   overrideShouldTestInside = false,
 }: HitTestArgs) => {
-  // Return cached result if the same point and element version is tested again
-  if (
-    cachedPoint &&
-    pointsEqual(point, cachedPoint) &&
-    cachedThreshold <= threshold &&
-    overrideShouldTestInside === cachedOverrideShouldTestInside
-  ) {
-    const derefElement = cachedElement?.deref();
-    if (
-      derefElement &&
-      derefElement.id === element.id &&
-      derefElement.version === element.version &&
-      derefElement.versionNonce === element.versionNonce
-    ) {
-      return cachedHit;
-    }
-  }
-
   // Hit test against a frame's name
   const hitFrameName = frameNameBound
     ? isPointWithinBounds(
@@ -180,16 +154,7 @@ export const hitElementItself = ({
       isPointOnElementOutline(point, element, elementsMap, threshold)
     : isPointOnElementOutline(point, element, elementsMap, threshold);
 
-  const result = hitElement || hitFrameName;
-
-  // Cache end result
-  cachedPoint = point;
-  cachedElement = new WeakRef(element);
-  cachedThreshold = threshold;
-  cachedOverrideShouldTestInside = overrideShouldTestInside;
-  cachedHit = result;
-
-  return result;
+  return hitElement || hitFrameName;
 };
 
 export const hitElementBoundingBox = (
@@ -293,7 +258,7 @@ export const getAllHoveredElementAtPoint = (
   point: Readonly<GlobalPoint>,
   elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   elementsMap: NonDeletedSceneElementsMap,
-  tolerance?: number,
+  toleranceFn?: (element: ExcalidrawBindableElement) => number,
 ): NonDeleted<ExcalidrawBindableElement>[] => {
   const candidateElements: NonDeleted<ExcalidrawBindableElement>[] = [];
   // We need to to hit testing from front (end of the array) to back (beginning of the array)
@@ -309,7 +274,7 @@ export const getAllHoveredElementAtPoint = (
 
     if (
       isBindableElement(element, false) &&
-      bindingBorderTest(element, point, elementsMap, tolerance)
+      bindingBorderTest(element, point, elementsMap, toleranceFn?.(element))
     ) {
       candidateElements.push(element);
 
@@ -326,13 +291,13 @@ export const getHoveredElementForBinding = (
   point: Readonly<GlobalPoint>,
   elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   elementsMap: NonDeletedSceneElementsMap,
-  tolerance?: number,
+  toleranceFn?: (element: ExcalidrawBindableElement) => number,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
   const candidateElements = getAllHoveredElementAtPoint(
     point,
     elements,
     elementsMap,
-    tolerance,
+    toleranceFn,
   );
 
   if (!candidateElements || candidateElements.length === 0) {
@@ -351,56 +316,6 @@ export const getHoveredElementForBinding = (
     .pop() as NonDeleted<ExcalidrawBindableElement>;
 };
 
-export const getHoveredElementForFocusPoint = (
-  point: GlobalPoint,
-  arrow: ExcalidrawArrowElement,
-  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
-  elementsMap: NonDeletedSceneElementsMap,
-  tolerance?: number,
-): ExcalidrawBindableElement | null => {
-  const candidateElements: NonDeleted<ExcalidrawBindableElement>[] = [];
-  // We need to to hit testing from front (end of the array) to back (beginning of the array)
-  // because array is ordered from lower z-index to highest and we want element z-index
-  // with higher z-index
-  for (let index = elements.length - 1; index >= 0; --index) {
-    const element = elements[index];
-
-    invariant(
-      !element.isDeleted,
-      "Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements",
-    );
-
-    if (
-      isBindableElement(element, false) &&
-      bindingBorderTest(element, point, elementsMap, tolerance)
-    ) {
-      candidateElements.push(element);
-    }
-  }
-
-  if (!candidateElements || candidateElements.length === 0) {
-    return null;
-  }
-
-  if (candidateElements.length === 1) {
-    return candidateElements[0];
-  }
-
-  const distanceFilteredCandidateElements = candidateElements
-    // Resolve by distance
-    .filter(
-      (el) =>
-        distanceToElement(el, elementsMap, point) <= getBindingGap(el, arrow) ||
-        isPointInElement(point, el, elementsMap),
-    );
-
-  if (distanceFilteredCandidateElements.length === 0) {
-    return null;
-  }
-
-  return distanceFilteredCandidateElements[0] as NonDeleted<ExcalidrawBindableElement>;
-};
-
 /**
  * Intersect a line with an element for binding test
  *

packages/element/src/comparisons.ts

@@ -16,8 +16,7 @@ export const hasStrokeColor = (type: ElementOrToolType) =>
   type === "freedraw" ||
   type === "arrow" ||
   type === "line" ||
-  type === "text" ||
-  type === "embeddable";
+  type === "text";
 
 export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "rectangle" ||
@@ -46,6 +45,9 @@ export const canChangeRoundness = (type: ElementOrToolType) =>
   type === "diamond" ||
   type === "image";
 
+export const hasContainerBehavior = (type: ElementOrToolType) =>
+  type === "rectangle" || type === "diamond" || type === "ellipse";
+
 export const toolIsArrow = (type: ElementOrToolType) => type === "arrow";
 
 export const canHaveArrowheads = (type: ElementOrToolType) => type === "arrow";

packages/element/src/delta.ts

@@ -2056,11 +2056,14 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
     }
   }
 
-  private static stripIrrelevantProps(
-    partial: Partial<OrderedExcalidrawElement>,
-  ): ElementPartial {
-    const { id, updated, ...strippedPartial } = partial;
+  private static stripIrrelevantProps(partial: ElementPartial): ElementPartial {
+    const {
+      id: _id,
+      updated: _updated,
+      seed: _seed,
+      ...strippedPartial
+    } = partial as any;
 
-    return strippedPartial;
+    return strippedPartial as ElementPartial;
   }
 }

packages/element/src/distribute.ts

@@ -1,12 +1,10 @@
 import type { AppState } from "@excalidraw/excalidraw/types";
 
-import { updateBoundElements } from "./binding";
 import { getCommonBoundingBox } from "./bounds";
+import { newElementWith } from "./mutateElement";
 
 import { getSelectedElementsByGroup } from "./groups";
 
-import type { Scene } from "./Scene";
-
 import type { ElementsMap, ExcalidrawElement } from "./types";
 
 export interface Distribution {
@@ -19,7 +17,6 @@ export const distributeElements = (
   elementsMap: ElementsMap,
   distribution: Distribution,
   appState: Readonly<AppState>,
-  scene: Scene,
 ): ExcalidrawElement[] => {
   const [start, mid, end, extent] =
     distribution.axis === "x"
@@ -69,16 +66,12 @@ export const distributeElements = (
         translation[distribution.axis] = pos - box[mid];
       }
 
-      return group.map((element) => {
-        const updatedElement = scene.mutateElement(element, {
+      return group.map((element) =>
+        newElementWith(element, {
           x: element.x + translation.x,
           y: element.y + translation.y,
-        });
-        updateBoundElements(element, scene, {
-          simultaneouslyUpdated: group,
-        });
-        return updatedElement;
-      });
+        }),
+      );
     });
   }
 
@@ -97,15 +90,11 @@ export const distributeElements = (
     pos += step;
     pos += box[extent];
 
-    return group.map((element) => {
-      const updatedElement = scene.mutateElement(element, {
+    return group.map((element) =>
+      newElementWith(element, {
         x: element.x + translation.x,
         y: element.y + translation.y,
-      });
-      updateBoundElements(element, scene, {
-        simultaneouslyUpdated: group,
-      });
-      return updatedElement;
-    });
+      }),
+    );
   });
 };

packages/element/src/dragElements.ts

@@ -1,5 +1,4 @@
 import {
-  type Bounds,
   TEXT_AUTOWRAP_THRESHOLD,
   getGridPoint,
   getFontString,
@@ -30,6 +29,7 @@ import {
 
 import type { Scene } from "./Scene";
 
+import type { Bounds } from "./bounds";
 import type { ExcalidrawElement } from "./types";
 
 export const dragSelectedElements = (

packages/element/src/elbowArrow.ts

@@ -14,7 +14,6 @@ import {
 } from "@excalidraw/math";
 
 import {
-  type Bounds,
   BinaryHeap,
   invariant,
   isAnyTrue,
@@ -55,6 +54,7 @@ import {
 import { aabbForElement, pointInsideBounds } from "./bounds";
 import { getHoveredElementForBinding } from "./collision";
 
+import type { Bounds } from "./bounds";
 import type { Heading } from "./heading";
 import type {
   Arrowhead,
@@ -915,8 +915,6 @@ export const updateElbowArrowPoints = (
   },
   options?: {
     isDragging?: boolean;
-    isBindingEnabled?: boolean;
-    isMidpointSnappingEnabled?: boolean;
   },
 ): ElementUpdate<ExcalidrawElbowArrowElement> => {
   if (arrow.points.length < 2) {
@@ -1204,8 +1202,6 @@ const getElbowArrowData = (
   options?: {
     isDragging?: boolean;
     zoom?: AppState["zoom"];
-    isBindingEnabled?: boolean;
-    isMidpointSnappingEnabled?: boolean;
   },
 ) => {
   const origStartGlobalPoint: GlobalPoint = pointTranslate<
@@ -1219,7 +1215,7 @@ const getElbowArrowData = (
 
   let hoveredStartElement = null;
   let hoveredEndElement = null;
-  if (options?.isDragging && options?.isBindingEnabled !== false) {
+  if (options?.isDragging) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement =
       getHoveredElement(
@@ -1259,8 +1255,6 @@ const getElbowArrowData = (
     hoveredStartElement,
     elementsMap,
     options?.isDragging,
-    options?.isBindingEnabled,
-    options?.isMidpointSnappingEnabled,
   );
   const endGlobalPoint = getGlobalPoint(
     {
@@ -1276,8 +1270,6 @@ const getElbowArrowData = (
     hoveredEndElement,
     elementsMap,
     options?.isDragging,
-    options?.isBindingEnabled,
-    options?.isMidpointSnappingEnabled,
   );
   const startHeading = getBindPointHeading(
     startGlobalPoint,
@@ -2221,18 +2213,14 @@ const getGlobalPoint = (
   element?: ExcalidrawBindableElement | null,
   elementsMap?: ElementsMap,
   isDragging?: boolean,
-  isBindingEnabled = true,
-  isMidpointSnappingEnabled = true,
 ): GlobalPoint => {
   if (isDragging) {
-    if (isBindingEnabled && element && elementsMap) {
+    if (element && elementsMap) {
       return bindPointToSnapToElementOutline(
         arrow,
         element,
         startOrEnd,
         elementsMap,
-        undefined,
-        isMidpointSnappingEnabled,
       );
     }
 
@@ -2288,7 +2276,7 @@ const getHoveredElement = (
     origPoint,
     elements,
     elementsMap,
-    maxBindingDistance_simple(zoom),
+    (element) => maxBindingDistance_simple(zoom),
   );
 };
 

packages/element/src/embeddable.ts

@@ -56,7 +56,7 @@ const RE_REDDIT =
 const RE_REDDIT_EMBED =
   /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;
 
-const parseYouTubeLikeTimestamp = (url: string): number => {
+const parseYouTubeTimestamp = (url: string): number => {
   let timeParam: string | null | undefined;
 
   try {
@@ -85,57 +85,11 @@ const parseYouTubeLikeTimestamp = (url: string): number => {
   return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
 };
 
-const parseGoogleDriveVideoLink = (
-  url: string,
-): { fileId: string; resourceKey?: string; timestamp?: number } | null => {
-  try {
-    const urlObj = new URL(url.startsWith("http") ? url : `https://${url}`);
-    const hostname = urlObj.hostname.replace(/^www\./, "");
-    if (hostname !== "drive.google.com") {
-      return null;
-    }
-
-    let fileId: string | null = null;
-    const pathMatch = urlObj.pathname.match(/^\/file\/d\/([^/]+)(?:\/|$)/);
-    if (pathMatch?.[1]) {
-      fileId = pathMatch[1];
-    } else if (urlObj.pathname === "/open" || urlObj.pathname === "/uc") {
-      // Shared Drive links can be emitted as:
-      // - /open?id=<fileId> (common "open in Drive" format)
-      // - /uc?...&id=<fileId> (download/export endpoint often seen in copied links)
-      fileId = urlObj.searchParams.get("id");
-    }
-
-    if (!fileId || !/^[a-zA-Z0-9_-]+$/.test(fileId)) {
-      return null;
-    }
-
-    // Some Drive share links include `resourcekey` for access to link-shared
-    // files; preserve it in the preview URL so embeds keep working.
-    const resourceKey = urlObj.searchParams.get("resourcekey");
-    const timestamp = parseYouTubeLikeTimestamp(urlObj.toString());
-
-    return {
-      fileId,
-      resourceKey:
-        resourceKey && /^[a-zA-Z0-9_-]+$/.test(resourceKey)
-          ? resourceKey
-          : undefined,
-      // Drive accepts YouTube-like `t` formats (e.g. `t=90`, `t=1m30s`);
-      // normalize to seconds for a stable preview URL.
-      timestamp: timestamp > 0 ? timestamp : undefined,
-    };
-  } catch (error) {
-    return null;
-  }
-};
-
 const ALLOWED_DOMAINS = new Set([
   "youtube.com",
   "youtu.be",
   "vimeo.com",
   "player.vimeo.com",
-  "drive.google.com",
   "figma.com",
   "link.excalidraw.com",
   "gist.github.com",
@@ -154,7 +108,6 @@ const ALLOW_SAME_ORIGIN = new Set([
   "youtu.be",
   "vimeo.com",
   "player.vimeo.com",
-  "drive.google.com",
   "figma.com",
   "twitter.com",
   "x.com",
@@ -189,7 +142,7 @@ export const getEmbedLink = (
   let aspectRatio = { w: 560, h: 840 };
   const ytLink = link.match(RE_YOUTUBE);
   if (ytLink?.[2]) {
-    const startTime = parseYouTubeLikeTimestamp(originalLink);
+    const startTime = parseYouTubeTimestamp(originalLink);
     const time = startTime > 0 ? `&start=${startTime}` : ``;
     const isPortrait = link.includes("shorts");
     type = "video";
@@ -248,36 +201,6 @@ export const getEmbedLink = (
     };
   }
 
-  const googleDriveVideo = parseGoogleDriveVideoLink(link);
-  if (googleDriveVideo) {
-    type = "video";
-    const searchParams = new URLSearchParams();
-    if (googleDriveVideo.resourceKey) {
-      searchParams.set("resourcekey", googleDriveVideo.resourceKey);
-    }
-    if (googleDriveVideo.timestamp) {
-      searchParams.set("t", `${googleDriveVideo.timestamp}`);
-    }
-
-    const search = searchParams.toString();
-    link = `https://drive.google.com/file/d/${googleDriveVideo.fileId}/preview${
-      search ? `?${search}` : ""
-    }`;
-    aspectRatio = { w: 560, h: 315 };
-    embeddedLinkCache.set(originalLink, {
-      link,
-      intrinsicSize: aspectRatio,
-      type,
-      sandbox: { allowSameOrigin },
-    });
-    return {
-      link,
-      intrinsicSize: aspectRatio,
-      type,
-      sandbox: { allowSameOrigin },
-    };
-  }
-
   const figmaLink = link.match(RE_FIGMA);
   if (figmaLink) {
     type = "generic";

packages/element/src/flowchart.ts

@@ -268,6 +268,7 @@ const addNewNode = (
     opacity: element.opacity,
     fillStyle: element.fillStyle,
     strokeStyle: element.strokeStyle,
+    containerBehavior: element.containerBehavior,
   });
 
   invariant(
@@ -346,6 +347,7 @@ export const addNewNodes = (
       opacity: startNode.opacity,
       fillStyle: startNode.fillStyle,
       strokeStyle: startNode.strokeStyle,
+      containerBehavior: startNode.containerBehavior,
     });
 
     invariant(

packages/element/src/heading.ts

@@ -1,9 +1,4 @@
-import {
-  invariant,
-  isDevEnv,
-  isTestEnv,
-  type Bounds,
-} from "@excalidraw/common";
+import { invariant, isDevEnv, isTestEnv } from "@excalidraw/common";
 
 import {
   pointFrom,
@@ -24,7 +19,7 @@ import type {
   Vector,
 } from "@excalidraw/math";
 
-import { getCenterForBounds } from "./bounds";
+import { getCenterForBounds, type Bounds } from "./bounds";
 
 import type { ExcalidrawBindableElement } from "./types";
 

packages/element/src/index.ts

@@ -70,7 +70,6 @@ export * from "./elbowArrow";
 export * from "./elementLink";
 export * from "./embeddable";
 export * from "./flowchart";
-export * from "./arrows/focus";
 export * from "./fractionalIndex";
 export * from "./frame";
 export * from "./groups";
@@ -93,9 +92,7 @@ export * from "./store";
 export * from "./textElement";
 export * from "./textMeasurements";
 export * from "./textWrapping";
-export * from "./transform";
 export * from "./transformHandles";
 export * from "./typeChecks";
 export * from "./utils";
 export * from "./zindex";
-export * from "./arrows/helpers";

packages/element/src/linearElementEditor.ts

@@ -9,6 +9,7 @@ import {
   vectorFromPoint,
   curveLength,
   curvePointAtLength,
+  lineSegment,
 } from "@excalidraw/math";
 
 import { getCurvePathOps } from "@excalidraw/utils/shape";
@@ -25,7 +26,7 @@ import {
 
 import {
   deconstructLinearOrFreeDrawElement,
-  getSnapOutlineMidPoint,
+  getHoveredElementForBinding,
   isPathALoop,
   moveArrowAboveBindable,
   projectFixedPointOntoDiagonal,
@@ -42,13 +43,11 @@ import type {
   NullableGridSize,
   Zoom,
 } from "@excalidraw/excalidraw/types";
-import type { Bounds } from "@excalidraw/common";
 
 import {
   calculateFixedPointForNonElbowArrowBinding,
   getBindingStrategyForDraggingBindingElementEndpoints,
   isBindingEnabled,
-  snapToMid,
   updateBoundPoint,
 } from "./binding";
 import {
@@ -70,6 +69,7 @@ import { isLineElement } from "./typeChecks";
 
 import type { Scene } from "./Scene";
 
+import type { Bounds } from "./bounds";
 import type {
   NonDeleted,
   ExcalidrawLinearElement,
@@ -150,8 +150,6 @@ export class LinearElementEditor {
   public readonly pointerOffset: Readonly<{ x: number; y: number }>;
   public readonly hoverPointIndex: number;
   public readonly segmentMidPointHoveredCoords: GlobalPoint | null;
-  public readonly hoveredFocusPointBinding: "start" | "end" | null;
-  public readonly draggedFocusPointBinding: "start" | "end" | null;
   public readonly elbowed: boolean;
   public readonly customLineAngle: number | null;
   public readonly isEditing: boolean;
@@ -197,8 +195,6 @@ export class LinearElementEditor {
     };
     this.hoverPointIndex = -1;
     this.segmentMidPointHoveredCoords = null;
-    this.hoveredFocusPointBinding = null;
-    this.draggedFocusPointBinding = null;
     this.elbowed = isElbowArrow(element) && element.elbowed;
     this.customLineAngle = null;
     this.isEditing = isEditing;
@@ -310,11 +306,21 @@ export class LinearElementEditor {
     const customLineAngle =
       linearElementEditor.customLineAngle ??
       determineCustomLinearAngle(pivotPoint, element.points[idx]);
+    const hoveredElement = getHoveredElementForBinding(
+      pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
+      elements,
+      elementsMap,
+    );
 
     // Determine if point movement should happen and how much
     let deltaX = 0;
     let deltaY = 0;
-    if (shouldRotateWithDiscreteAngle(event)) {
+    if (
+      shouldRotateWithDiscreteAngle(event) &&
+      !hoveredElement &&
+      !element.startBinding &&
+      !element.endBinding
+    ) {
       const [width, height] = LinearElementEditor._getShiftLockedDelta(
         element,
         elementsMap,
@@ -348,31 +354,19 @@ export class LinearElementEditor {
       [idx],
       deltaX,
       deltaY,
-      scenePointerX,
-      scenePointerY,
       elementsMap,
       element,
       elements,
       app,
-      shouldRotateWithDiscreteAngle(event),
+      event.shiftKey,
       event.altKey,
-      linearElementEditor,
     );
 
-    LinearElementEditor.movePoints(
-      element,
-      app.scene,
-      positions,
-      {
-        startBinding: updates?.startBinding,
-        endBinding: updates?.endBinding,
-        moveMidPointsWithElement: updates?.moveMidPointsWithElement,
-      },
-      {
-        isBindingEnabled: app.state.isBindingEnabled,
-        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
-      },
-    );
+    LinearElementEditor.movePoints(element, app.scene, positions, {
+      startBinding: updates?.startBinding,
+      endBinding: updates?.endBinding,
+      moveMidPointsWithElement: updates?.moveMidPointsWithElement,
+    });
     // Set the suggested binding from the updates if available
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state)) {
@@ -419,15 +413,13 @@ export class LinearElementEditor {
         altFocusPoint:
           !linearElementEditor.initialState.altFocusPoint &&
           startBindingElement &&
-          updates?.suggestedBinding?.element.id !== startBindingElement.id
+          updates?.suggestedBinding?.id !== startBindingElement.id
             ? projectFixedPointOntoDiagonal(
                 element,
                 pointFrom<GlobalPoint>(element.x, element.y),
                 startBindingElement,
                 "start",
                 elementsMap,
-                app.state.zoom,
-                app.state.isMidpointSnappingEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -500,11 +492,22 @@ export class LinearElementEditor {
     const endIsSelected = selectedPointsIndices.includes(
       element.points.length - 1,
     );
+    const hoveredElement = getHoveredElementForBinding(
+      pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
+      elements,
+      elementsMap,
+    );
 
     // Determine if point movement should happen and how much
     let deltaX = 0;
     let deltaY = 0;
-    if (shouldRotateWithDiscreteAngle(event) && singlePointDragged) {
+    if (
+      shouldRotateWithDiscreteAngle(event) &&
+      singlePointDragged &&
+      !hoveredElement &&
+      !element.startBinding &&
+      !element.endBinding
+    ) {
       const [width, height] = LinearElementEditor._getShiftLockedDelta(
         element,
         elementsMap,
@@ -517,6 +520,7 @@ export class LinearElementEditor {
         width + pivotPoint[0],
         height + pivotPoint[1],
       );
+
       deltaX = target[0] - draggingPoint[0];
       deltaY = target[1] - draggingPoint[1];
     } else {
@@ -537,31 +541,19 @@ export class LinearElementEditor {
       selectedPointsIndices,
       deltaX,
       deltaY,
-      scenePointerX,
-      scenePointerY,
       elementsMap,
       element,
       elements,
       app,
-      shouldRotateWithDiscreteAngle(event) && singlePointDragged,
+      event.shiftKey,
       event.altKey,
-      linearElementEditor,
     );
 
-    LinearElementEditor.movePoints(
-      element,
-      app.scene,
-      positions,
-      {
-        startBinding: updates?.startBinding,
-        endBinding: updates?.endBinding,
-        moveMidPointsWithElement: updates?.moveMidPointsWithElement,
-      },
-      {
-        isBindingEnabled: app.state.isBindingEnabled,
-        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
-      },
-    );
+    LinearElementEditor.movePoints(element, app.scene, positions, {
+      startBinding: updates?.startBinding,
+      endBinding: updates?.endBinding,
+      moveMidPointsWithElement: updates?.moveMidPointsWithElement,
+    });
 
     // Set the suggested binding from the updates if available
     if (isBindingElement(element, false)) {
@@ -630,11 +622,11 @@ export class LinearElementEditor {
     const altFocusPointBindableElement =
       endIsSelected && // The "other" end (i.e. "end") is dragged
       startBindingElement &&
-      updates?.suggestedBinding?.element.id !== startBindingElement.id // The end point is not hovering the start bindable + it's binding gap
+      updates?.suggestedBinding?.id !== startBindingElement.id // The end point is not hovering the start bindable + it's binding gap
         ? startBindingElement
         : startIsSelected && // The "other" end (i.e. "start") is dragged
           endBindingElement &&
-          updates?.suggestedBinding?.element.id !== endBindingElement.id // The start point is not hovering the end bindable + it's binding gap
+          updates?.suggestedBinding?.id !== endBindingElement.id // The start point is not hovering the end bindable + it's binding gap
         ? endBindingElement
         : null;
 
@@ -654,8 +646,6 @@ export class LinearElementEditor {
                 altFocusPointBindableElement,
                 "start",
                 elementsMap,
-                app.state.zoom,
-                app.state.isMidpointSnappingEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -753,6 +743,7 @@ export class LinearElementEditor {
           ? [pointerDownState.lastClickedPoint]
           : selectedPointsIndices,
       isDragging: false,
+      pointerOffset: { x: 0, y: 0 },
       customLineAngle: null,
       initialState: {
         ...editingLinearElement.initialState,
@@ -1544,10 +1535,6 @@ export class LinearElementEditor {
       endBinding?: FixedPointBinding | null;
       moveMidPointsWithElement?: boolean | null;
     },
-    options?: {
-      isBindingEnabled?: boolean;
-      isMidpointSnappingEnabled?: boolean;
-    },
   ) {
     const { points } = element;
 
@@ -1616,8 +1603,6 @@ export class LinearElementEditor {
       otherUpdates,
       {
         isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging),
-        isBindingEnabled: options?.isBindingEnabled,
-        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled,
       },
     );
   }
@@ -1732,8 +1717,6 @@ export class LinearElementEditor {
       isDragging?: boolean;
       zoom?: AppState["zoom"];
       sceneElementsMap?: NonDeletedSceneElementsMap;
-      isBindingEnabled?: boolean;
-      isMidpointSnappingEnabled?: boolean;
     },
   ) {
     if (isElbowArrow(element)) {
@@ -1754,8 +1737,6 @@ export class LinearElementEditor {
       scene.mutateElement(element, updates, {
         informMutation: true,
         isDragging: options?.isDragging ?? false,
-        isBindingEnabled: options?.isBindingEnabled,
-        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled,
       });
     } else {
       // TODO do we need to get precise coords here just to calc centers?
@@ -2107,15 +2088,12 @@ const pointDraggingUpdates = (
   selectedPointsIndices: readonly number[],
   deltaX: number,
   deltaY: number,
-  scenePointerX: number,
-  scenePointerY: number,
   elementsMap: NonDeletedSceneElementsMap,
   element: NonDeleted<ExcalidrawLinearElement>,
   elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   app: AppClassProperties,
-  angleLocked: boolean,
+  shiftKey: boolean,
   altKey: boolean,
-  linearElementEditor: LinearElementEditor,
 ): {
   positions: PointsPositionUpdates;
   updates?: PointMoveOtherUpdates;
@@ -2150,104 +2128,29 @@ const pointDraggingUpdates = (
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
     element,
     naiveDraggingPoints,
-    scenePointerX,
-    scenePointerY,
     elementsMap,
     elements,
     app.state,
     {
       newArrow: !!app.state.newElement,
-      angleLocked,
+      shiftKey,
       altKey,
     },
   );
 
   if (isElbowArrow(element)) {
-    const suggestedBindingElement = startIsDragged
-      ? start.element
-      : endIsDragged
-      ? end.element
-      : null;
-
     return {
       positions: naiveDraggingPoints,
       updates: {
-        suggestedBinding: suggestedBindingElement
-          ? {
-              element: suggestedBindingElement,
-              midPoint: app.state.isMidpointSnappingEnabled
-                ? snapToMid(
-                    suggestedBindingElement,
-                    elementsMap,
-                    pointFrom<GlobalPoint>(
-                      scenePointerX - linearElementEditor.pointerOffset.x,
-                      scenePointerY - linearElementEditor.pointerOffset.y,
-                    ),
-                  )
-                : undefined,
-            }
+        suggestedBinding: startIsDragged
+          ? start.element
+          : endIsDragged
+          ? end.element
           : null,
       },
     };
   }
 
-  // Handle the case where neither endpoint is being dragged
-  // but we need to update bound endpoints
-  if (!startIsDragged && !endIsDragged) {
-    const nextArrow = {
-      ...element,
-      points: element.points.map((p, idx) => {
-        return naiveDraggingPoints.get(idx)?.point ?? p;
-      }),
-    };
-    const positions = new Map(naiveDraggingPoints);
-
-    if (element.startBinding) {
-      const startBindable = elementsMap.get(element.startBinding.elementId) as
-        | ExcalidrawBindableElement
-        | undefined;
-      if (startBindable) {
-        const startPoint =
-          updateBoundPoint(
-            nextArrow,
-            "startBinding",
-            element.startBinding,
-            startBindable,
-            elementsMap,
-          ) ?? null;
-        if (startPoint) {
-          positions.set(0, { point: startPoint, isDragging: true });
-        }
-      }
-    }
-
-    if (element.endBinding) {
-      const endBindable = elementsMap.get(element.endBinding.elementId) as
-        | ExcalidrawBindableElement
-        | undefined;
-      if (endBindable) {
-        const endPoint =
-          updateBoundPoint(
-            nextArrow,
-            "endBinding",
-            element.endBinding,
-            endBindable,
-            elementsMap,
-          ) ?? null;
-        if (endPoint) {
-          positions.set(element.points.length - 1, {
-            point: endPoint,
-            isDragging: true,
-          });
-        }
-      }
-    }
-
-    return {
-      positions,
-    };
-  }
-
   if (startIsDragged === endIsDragged) {
     return {
       positions: naiveDraggingPoints,
@@ -2278,20 +2181,7 @@ const pointDraggingUpdates = (
       (updates.startBinding.mode === "orbit" ||
         !getFeatureFlag("COMPLEX_BINDINGS"))
     ) {
-      updates.suggestedBinding = start.element
-        ? {
-            element: start.element,
-            midPoint: getSnapOutlineMidPoint(
-              pointFrom<GlobalPoint>(
-                scenePointerX - linearElementEditor.pointerOffset.x,
-                scenePointerY - linearElementEditor.pointerOffset.y,
-              ),
-              start.element,
-              elementsMap,
-              app.state.zoom,
-            ),
-          }
-        : null;
+      updates.suggestedBinding = start.element;
     }
   } else if (startIsDragged) {
     updates.suggestedBinding = app.state.suggestedBinding;
@@ -2317,20 +2207,7 @@ const pointDraggingUpdates = (
       (updates.endBinding.mode === "orbit" ||
         !getFeatureFlag("COMPLEX_BINDINGS"))
     ) {
-      updates.suggestedBinding = end.element
-        ? {
-            element: end.element,
-            midPoint: getSnapOutlineMidPoint(
-              pointFrom<GlobalPoint>(
-                scenePointerX - linearElementEditor.pointerOffset.x,
-                scenePointerY - linearElementEditor.pointerOffset.y,
-              ),
-              end.element,
-              elementsMap,
-              app.state.zoom,
-            ),
-          }
-        : null;
+      updates.suggestedBinding = end.element;
     }
   } else if (endIsDragged) {
     updates.suggestedBinding = app.state.suggestedBinding;
@@ -2370,6 +2247,14 @@ const pointDraggingUpdates = (
         : updates.endBinding,
   };
 
+  // We need to use a custom intersector to ensure that if there is a big "jump"
+  // in the arrow's position, we can position it with outline avoidance
+  // pixel-perfectly and avoid "dancing" arrows.
+  const customIntersector =
+    start.focusPoint && end.focusPoint
+      ? lineSegment(start.focusPoint, end.focusPoint)
+      : undefined;
+
   // Needed to handle a special case where an existing arrow is dragged over
   // the same element it is bound to on the other side
   const startIsDraggingOverEndElement =
@@ -2405,7 +2290,7 @@ const pointDraggingUpdates = (
         nextArrow.endBinding,
         endBindable,
         elementsMap,
-        endIsDragged,
+        customIntersector,
       ) || nextArrow.points[nextArrow.points.length - 1]
     : nextArrow.points[nextArrow.points.length - 1];
 
@@ -2428,7 +2313,7 @@ const pointDraggingUpdates = (
       : startIsDraggingOverEndElement &&
         app.state.bindMode !== "inside" &&
         getFeatureFlag("COMPLEX_BINDINGS")
-      ? endLocalPoint
+      ? nextArrow.points[nextArrow.points.length - 1]
       : startBindable
       ? updateBoundPoint(
           element,
@@ -2436,18 +2321,15 @@ const pointDraggingUpdates = (
           nextArrow.startBinding,
           startBindable,
           elementsMap,
-          startIsDragged,
+          customIntersector,
         ) || nextArrow.points[0]
       : nextArrow.points[0];
 
   const endChanged =
-    !startIsDraggingOverEndElement &&
-    !(
-      endIsDraggingOverStartElement &&
-      app.state.bindMode !== "inside" &&
-      getFeatureFlag("COMPLEX_BINDINGS")
-    ) &&
-    !!endBindable;
+    pointDistance(
+      endLocalPoint,
+      nextArrow.points[nextArrow.points.length - 1],
+    ) !== 0;
   const startChanged =
     pointDistance(startLocalPoint, nextArrow.points[0]) !== 0;
 
@@ -2461,7 +2343,13 @@ const pointDraggingUpdates = (
   const indices = Array.from(indicesSet);
 
   return {
-    updates,
+    updates:
+      updates.startBinding || updates.suggestedBinding
+        ? {
+            startBinding: updates.startBinding,
+            suggestedBinding: updates.suggestedBinding,
+          }
+        : undefined,
     positions: new Map(
       indices.map((idx) => {
         return [

packages/element/src/mutateElement.ts

@@ -40,8 +40,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   updates: ElementUpdate<TElement>,
   options?: {
     isDragging?: boolean;
-    isBindingEnabled?: boolean;
-    isMidpointSnappingEnabled?: boolean;
   },
 ) => {
   let didChange = false;

packages/element/src/newElement.ts

@@ -10,6 +10,7 @@ import {
   getFontString,
   getUpdatedTimestamp,
   getLineHeight,
+  BOUND_TEXT_PADDING,
 } from "@excalidraw/common";
 
 import type { Radians } from "@excalidraw/math";
@@ -21,11 +22,11 @@ import {
   getResizedElementAbsoluteCoords,
 } from "./bounds";
 import { newElementWith } from "./mutateElement";
-import { getBoundTextMaxWidth } from "./textElement";
+import { getBoundTextMaxWidth, getBoundTextMaxHeight } from "./textElement";
 import { normalizeText, measureText } from "./textMeasurements";
 import { wrapText } from "./textWrapping";
 
-import { isLineElement } from "./typeChecks";
+import { isFlowchartType, isLineElement } from "./typeChecks";
 
 import type {
   ExcalidrawElement,
@@ -48,6 +49,8 @@ import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawLineElement,
+  ExcalidrawFlowchartNodeElement,
+  ContainerBehavior,
 } from "./types";
 
 export type ElementConstructorOpts = MarkOptional<
@@ -158,9 +161,26 @@ const _newElementBase = <T extends ExcalidrawElement>(
 export const newElement = (
   opts: {
     type: ExcalidrawGenericElement["type"];
+    containerBehavior?: ContainerBehavior;
   } & ElementConstructorOpts,
-): NonDeleted<ExcalidrawGenericElement> =>
-  _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
+): NonDeleted<ExcalidrawGenericElement> => {
+  if (isFlowchartType(opts.type)) {
+    return {
+      ..._newElementBase<ExcalidrawFlowchartNodeElement>(
+        opts.type as ExcalidrawFlowchartNodeElement["type"],
+        opts,
+      ),
+      containerBehavior: {
+        textFlow: opts.containerBehavior?.textFlow ?? "growing",
+        margin: opts.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
+      },
+    } as NonDeleted<ExcalidrawFlowchartNodeElement>;
+  }
+  return _newElementBase<ExcalidrawGenericElement>(
+    opts.type,
+    opts,
+  ) as NonDeleted<ExcalidrawGenericElement>;
+};
 
 export const newEmbeddableElement = (
   opts: {
@@ -417,6 +437,96 @@ const adjustXYWithRotation = (
   return [x, y];
 };
 
+// Sticky note font sizing constants
+export const STICKY_NOTE_FONT_STEP = 2;
+export const STICKY_NOTE_MIN_FONT_SIZE = 8;
+export const STICKY_NOTE_MAX_FONT_SIZE = 72;
+
+export interface StickyNoteFontComputationResult {
+  fontSize: number;
+  width: number;
+  height: number;
+  wrappedText: string;
+}
+
+/**
+ * Computes the appropriate font size (snapped to step) so that the text fits
+ * inside the sticky note container without resizing the container.
+ * It first tries to shrink if overflowing, otherwise opportunistically enlarges
+ * (still snapped) while it fits. Width is constrained by wrap at container width.
+ */
+export const computeStickyNoteFontSize = (
+  text: string,
+  element: ExcalidrawTextElement,
+  container: ExcalidrawTextContainer,
+  maxGrowFontSize?: number,
+): StickyNoteFontComputationResult => {
+  const step = STICKY_NOTE_FONT_STEP;
+  const maxH = getBoundTextMaxHeight(container, element as any);
+  const maxW = getBoundTextMaxWidth(container, element);
+
+  const snap = (size: number) =>
+    Math.max(
+      STICKY_NOTE_MIN_FONT_SIZE,
+      Math.max(step, Math.floor(size / step) * step),
+    );
+
+  let size = snap(element.fontSize);
+  const growthCap = snap(
+    maxGrowFontSize != null ? maxGrowFontSize : STICKY_NOTE_MAX_FONT_SIZE,
+  );
+
+  const lineHeight = element.lineHeight;
+  const fontFamily = element.fontFamily;
+
+  const measure = (fontSize: number) => {
+    const font = getFontString({ fontFamily, fontSize });
+    const wrappedText = wrapText(text, font, maxW);
+    const metrics = measureText(wrappedText, font, lineHeight);
+    return {
+      wrappedText,
+      width: Math.min(metrics.width, maxW),
+      height: metrics.height,
+    };
+  };
+
+  let { wrappedText, width, height } = measure(size);
+
+  if (height > maxH) {
+    // shrink until fits or min
+    while (size > STICKY_NOTE_MIN_FONT_SIZE) {
+      const next = snap(size - step);
+      if (next === size) {
+        break;
+      }
+      size = next;
+      ({ wrappedText, width, height } = measure(size));
+      if (height <= maxH) {
+        break;
+      }
+    }
+  } else {
+    // grow back only up to growthCap (initial session font size)
+    while (size < growthCap) {
+      const next = snap(Math.min(size + step, growthCap));
+      if (next === size) {
+        break;
+      }
+      const m = measure(next);
+      if (m.height <= maxH) {
+        size = next;
+        wrappedText = m.wrappedText;
+        width = m.width;
+        height = m.height;
+      } else {
+        break;
+      }
+    }
+  }
+
+  return { fontSize: size, width, height, wrappedText };
+};
+
 export const refreshTextDimensions = (
   textElement: ExcalidrawTextElement,
   container: ExcalidrawTextContainer | null,

packages/element/src/renderElement.ts

@@ -1,4 +1,5 @@
 import rough from "roughjs/bin/rough";
+import { getStroke } from "perfect-freehand";
 
 import {
   type GlobalPoint,
@@ -14,7 +15,6 @@ import {
   DEFAULT_REDUCED_GLOBAL_ALPHA,
   ELEMENT_READY_TO_ERASE_OPACITY,
   FRAME_STYLE,
-  DARK_THEME_FILTER,
   MIME_TYPES,
   THEME,
   distance,
@@ -22,8 +22,6 @@ import {
   isRTL,
   getVerticalOffset,
   invariant,
-  applyDarkModeFilter,
-  isSafari,
 } from "@excalidraw/common";
 
 import type {
@@ -80,8 +78,16 @@ import type {
   ElementsMap,
 } from "./types";
 
+import type { StrokeOptions } from "perfect-freehand";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 
+// using a stronger invert (100% vs our regular 93%) and saturate
+// as a temp hack to make images in dark theme look closer to original
+// color scheme (it's still not quite there and the colors look slightly
+// desatured, alas...)
+export const IMAGE_INVERT_FILTER =
+  "invert(100%) hue-rotate(180deg) saturate(1.25)";
+
 const isPendingImageElement = (
   element: ExcalidrawElement,
   renderConfig: StaticCanvasRenderConfig,
@@ -89,6 +95,19 @@ const isPendingImageElement = (
   isInitializedImageElement(element) &&
   !renderConfig.imageCache.has(element.fileId);
 
+const shouldResetImageFilter = (
+  element: ExcalidrawElement,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState | InteractiveCanvasAppState,
+) => {
+  return (
+    appState.theme === THEME.DARK &&
+    isInitializedImageElement(element) &&
+    !isPendingImageElement(element, renderConfig) &&
+    renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg
+  );
+};
+
 const getCanvasPadding = (element: ExcalidrawElement) => {
   switch (element.type) {
     case "freedraw":
@@ -253,6 +272,11 @@ const generateElementCanvas = (
 
   const rc = rough.canvas(canvas);
 
+  // in dark theme, revert the image color filter
+  if (shouldResetImageFilter(element, renderConfig, appState)) {
+    context.filter = IMAGE_INVERT_FILTER;
+  }
+
   drawElementOnCanvas(element, rc, context, renderConfig);
 
   context.restore();
@@ -305,16 +329,24 @@ const generateElementCanvas = (
     boundTextCanvasContext.translate(-shiftX, -shiftY);
     // Clear the bound text area
     boundTextCanvasContext.clearRect(
-      -(boundTextElement.width / 2 + BOUND_TEXT_PADDING) *
+      -(
+        boundTextElement.width / 2 +
+        (element.containerBehavior?.margin ?? BOUND_TEXT_PADDING)
+      ) *
         window.devicePixelRatio *
         scale,
-      -(boundTextElement.height / 2 + BOUND_TEXT_PADDING) *
+      -(
+        boundTextElement.height / 2 +
+        (element.containerBehavior?.margin ?? BOUND_TEXT_PADDING)
+      ) *
         window.devicePixelRatio *
         scale,
-      (boundTextElement.width + BOUND_TEXT_PADDING * 2) *
+      (boundTextElement.width +
+        (element.containerBehavior?.margin ?? BOUND_TEXT_PADDING) * 2) *
         window.devicePixelRatio *
         scale,
-      (boundTextElement.height + BOUND_TEXT_PADDING * 2) *
+      (boundTextElement.height +
+        (element.containerBehavior?.margin ?? BOUND_TEXT_PADDING) * 2) *
         window.devicePixelRatio *
         scale,
     );
@@ -361,9 +393,8 @@ IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(
 const drawImagePlaceholder = (
   element: ExcalidrawImageElement,
   context: CanvasRenderingContext2D,
-  theme: StaticCanvasRenderConfig["theme"],
 ) => {
-  context.fillStyle = theme === THEME.DARK ? "#2E2E2E" : "#E7E7E7";
+  context.fillStyle = "#E7E7E7";
   context.fillRect(0, 0, element.width, element.height);
 
   const imageMinWidthOrHeight = Math.min(element.width, element.height);
@@ -398,8 +429,7 @@ const drawElementOnCanvas = (
     case "ellipse": {
       context.lineJoin = "round";
       context.lineCap = "round";
-
-      rc.draw(ShapeCache.generateElementShape(element, renderConfig));
+      rc.draw(ShapeCache.get(element)!);
       break;
     }
     case "arrow":
@@ -407,44 +437,33 @@ const drawElementOnCanvas = (
       context.lineJoin = "round";
       context.lineCap = "round";
 
-      ShapeCache.generateElementShape(element, renderConfig).forEach(
-        (shape) => {
-          rc.draw(shape);
-        },
-      );
+      ShapeCache.get(element)!.forEach((shape) => {
+        rc.draw(shape);
+      });
       break;
     }
     case "freedraw": {
       // Draw directly to canvas
       context.save();
+      context.fillStyle = element.strokeColor;
 
-      const shapes = ShapeCache.generateElementShape(element, renderConfig);
+      const path = getFreeDrawPath2D(element) as Path2D;
+      const fillShape = ShapeCache.get(element);
 
-      for (const shape of shapes) {
-        if (typeof shape === "string") {
-          context.fillStyle =
-            renderConfig.theme === THEME.DARK
-              ? applyDarkModeFilter(element.strokeColor)
-              : element.strokeColor;
-          context.fill(new Path2D(shape));
-        } else {
-          rc.draw(shape);
-        }
+      if (fillShape) {
+        rc.draw(fillShape);
       }
 
+      context.fillStyle = element.strokeColor;
+      context.fill(path);
+
       context.restore();
       break;
     }
     case "image": {
-      context.save();
-      const cacheEntry =
-        element.fileId !== null
-          ? renderConfig.imageCache.get(element.fileId)
-          : null;
       const img = isInitializedImageElement(element)
-        ? cacheEntry?.image
+        ? renderConfig.imageCache.get(element.fileId)?.image
         : undefined;
-
       if (img != null && !(img instanceof Promise)) {
         if (element.roundness && context.roundRect) {
           context.beginPath();
@@ -467,80 +486,20 @@ const drawElementOnCanvas = (
               height: img.naturalHeight,
             };
 
-        const shouldInvertImage =
-          renderConfig.theme === THEME.DARK &&
-          cacheEntry?.mimeType === MIME_TYPES.svg;
-
-        if (shouldInvertImage && isSafari) {
-          const devicePixelRatio = window.devicePixelRatio || 1;
-          const tempCanvas = document.createElement("canvas");
-          tempCanvas.width = element.width * devicePixelRatio;
-          tempCanvas.height = element.height * devicePixelRatio;
-          const tempContext = tempCanvas.getContext("2d");
-
-          if (tempContext) {
-            tempContext.scale(devicePixelRatio, devicePixelRatio);
-            tempContext.drawImage(
-              img,
-              x,
-              y,
-              width,
-              height,
-              0,
-              0,
-              element.width,
-              element.height,
-            );
-
-            const imageData = tempContext.getImageData(
-              0,
-              0,
-              tempCanvas.width,
-              tempCanvas.height,
-            );
-
-            const data = imageData.data;
-
-            for (let i = 0; i < data.length; i += 4) {
-              data[i] = 255 - data[i];
-              data[i + 1] = 255 - data[i + 1];
-              data[i + 2] = 255 - data[i + 2];
-            }
-
-            tempContext.putImageData(imageData, 0, 0);
-            context.drawImage(
-              tempCanvas,
-              0,
-              0,
-              tempCanvas.width,
-              tempCanvas.height,
-              0,
-              0,
-              element.width,
-              element.height,
-            );
-          }
-        } else {
-          if (shouldInvertImage) {
-            context.filter = DARK_THEME_FILTER;
-          }
-
-          context.drawImage(
-            img,
-            x,
-            y,
-            width,
-            height,
-            0 /* hardcoded for the selection box*/,
-            0,
-            element.width,
-            element.height,
-          );
-        }
+        context.drawImage(
+          img,
+          x,
+          y,
+          width,
+          height,
+          0 /* hardcoded for the selection box*/,
+          0,
+          element.width,
+          element.height,
+        );
       } else {
-        drawImagePlaceholder(element, context, renderConfig.theme);
+        drawImagePlaceholder(element, context);
       }
-      context.restore();
       break;
     }
     default: {
@@ -555,10 +514,7 @@ const drawElementOnCanvas = (
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString(element);
-        context.fillStyle =
-          renderConfig.theme === THEME.DARK
-            ? applyDarkModeFilter(element.strokeColor)
-            : element.strokeColor;
+        context.fillStyle = element.strokeColor;
         context.textAlign = element.textAlign as CanvasTextAlign;
 
         // Canvas does not support multiline text by default
@@ -811,17 +767,12 @@ export const renderElement = (
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle =
-          appState.theme === THEME.DARK
-            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
-            : FRAME_STYLE.strokeColor;
+        context.strokeStyle = FRAME_STYLE.strokeColor;
 
         // TODO change later to only affect AI frames
         if (isMagicFrameElement(element)) {
           context.strokeStyle =
-            appState.theme === THEME.LIGHT
-              ? "#7affd7"
-              : applyDarkModeFilter("#1d8264");
+            appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
         }
 
         if (FRAME_STYLE.radius && context.roundRect) {
@@ -844,6 +795,11 @@ export const renderElement = (
       break;
     }
     case "freedraw": {
+      // TODO investigate if we can do this in situ. Right now we need to call
+      // beforehand because math helpers (such as getElementAbsoluteCoords)
+      // rely on existing shapes
+      ShapeCache.generateElementShape(element, null);
+
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2 + appState.scrollX;
@@ -887,6 +843,10 @@ export const renderElement = (
     case "text":
     case "iframe":
     case "embeddable": {
+      // TODO investigate if we can do this in situ. Right now we need to call
+      // beforehand because math helpers (such as getElementAbsoluteCoords)
+      // rely on existing shapes
+      ShapeCache.generateElementShape(element, renderConfig);
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2 + appState.scrollX;
@@ -909,6 +869,9 @@ export const renderElement = (
         context.save();
         context.translate(cx, cy);
 
+        if (shouldResetImageFilter(element, renderConfig, appState)) {
+          context.filter = "none";
+        }
         const boundTextElement = getBoundTextElement(element, elementsMap);
 
         if (isArrowElement(element) && boundTextElement) {
@@ -1071,6 +1034,23 @@ export const renderElement = (
   context.globalAlpha = 1;
 };
 
+export const pathsCache = new WeakMap<ExcalidrawFreeDrawElement, Path2D>([]);
+
+export function generateFreeDrawShape(element: ExcalidrawFreeDrawElement) {
+  const svgPathData = getFreeDrawSvgPath(element);
+  const path = new Path2D(svgPathData);
+  pathsCache.set(element, path);
+  return path;
+}
+
+export function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement) {
+  return pathsCache.get(element);
+}
+
+export function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) {
+  return getSvgPathFromStroke(getFreedrawOutlinePoints(element));
+}
+
 export function getFreedrawOutlineAsSegments(
   element: ExcalidrawFreeDrawElement,
   points: [number, number][],
@@ -1126,3 +1106,57 @@ export function getFreedrawOutlineAsSegments(
     ],
   );
 }
+
+export function getFreedrawOutlinePoints(element: ExcalidrawFreeDrawElement) {
+  // If input points are empty (should they ever be?) return a dot
+  const inputPoints = element.simulatePressure
+    ? element.points
+    : element.points.length
+    ? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
+    : [[0, 0, 0.5]];
+
+  // Consider changing the options for simulated pressure vs real pressure
+  const options: StrokeOptions = {
+    simulatePressure: element.simulatePressure,
+    size: element.strokeWidth * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
+    last: true,
+  };
+
+  return getStroke(inputPoints as number[][], options) as [number, number][];
+}
+
+function med(A: number[], B: number[]) {
+  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
+}
+
+// Trim SVG path data so number are each two decimal points. This
+// improves SVG exports, and prevents rendering errors on points
+// with long decimals.
+const TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
+
+function getSvgPathFromStroke(points: number[][]): string {
+  if (!points.length) {
+    return "";
+  }
+
+  const max = points.length - 1;
+
+  return points
+    .reduce(
+      (acc, point, i, arr) => {
+        if (i === max) {
+          acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
+        } else {
+          acc.push(point, med(point, arr[i + 1]));
+        }
+        return acc;
+      },
+      ["M", points[0], "Q"],
+    )
+    .join(" ")
+    .replace(TO_FIXED_PRECISION, "$1");
+}

packages/element/src/resizeElements.ts

@@ -12,6 +12,7 @@ import {
   SHIFT_LOCKING_ANGLE,
   rescalePoints,
   getFontString,
+  BOUND_TEXT_PADDING,
 } from "@excalidraw/common";
 
 import type { GlobalPoint } from "@excalidraw/math";
@@ -784,10 +785,12 @@ export const resizeSingleElement = (
       const minWidth = getApproxMinLineWidth(
         getFontString(boundTextElement),
         boundTextElement.lineHeight,
+        latestElement.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
       );
       const minHeight = getApproxMinLineHeight(
         boundTextElement.fontSize,
         boundTextElement.lineHeight,
+        latestElement.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
       );
       nextWidth = Math.max(nextWidth, minWidth);
       nextHeight = Math.max(nextHeight, minHeight);

packages/element/src/resizeTest.ts

@@ -13,7 +13,6 @@ import {
 import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
 
 import type { AppState, Zoom } from "@excalidraw/excalidraw/types";
-import type { Bounds } from "@excalidraw/common";
 
 import { getElementAbsoluteCoords } from "./bounds";
 import {
@@ -24,6 +23,7 @@ import {
 } from "./transformHandles";
 import { isImageElement, isLinearElement } from "./typeChecks";
 
+import type { Bounds } from "./bounds";
 import type {
   TransformHandleType,
   TransformHandle,

packages/element/src/shape.ts

@@ -1,5 +1,4 @@
 import { simplify } from "points-on-curve";
-import { getStroke } from "perfect-freehand";
 
 import {
   type GeometricShape,
@@ -18,12 +17,10 @@ import {
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
-  THEME,
   isTransparent,
   assertNever,
   COLOR_PALETTE,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
-  applyDarkModeFilter,
 } from "@excalidraw/common";
 
 import { RoughGenerator } from "roughjs/bin/generator";
@@ -39,7 +36,6 @@ import type {
 import type {
   ElementShape,
   ElementShapes,
-  SVGPathString,
 } from "@excalidraw/excalidraw/scene/types";
 
 import { elementWithCanvasCache } from "./renderElement";
@@ -56,6 +52,7 @@ import { getCornerRadius, isPathALoop } from "./utils";
 import { headingForPointIsHorizontal } from "./heading";
 
 import { canChangeRoundness } from "./comparisons";
+import { generateFreeDrawShape } from "./renderElement";
 import {
   getArrowheadPoints,
   getCenterForBounds,
@@ -80,32 +77,29 @@ import type { Point as RoughPoint } from "roughjs/bin/geometry";
 
 export class ShapeCache {
   private static rg = new RoughGenerator();
-  private static cache = new WeakMap<
-    ExcalidrawElement,
-    { shape: ElementShape; theme: AppState["theme"] }
-  >();
+  private static cache = new WeakMap<ExcalidrawElement, ElementShape>();
 
   /**
    * Retrieves shape from cache if available. Use this only if shape
    * is optional and you have a fallback in case it's not cached.
    */
-  public static get = <T extends ExcalidrawElement>(
-    element: T,
-    theme: AppState["theme"] | null,
-  ) => {
-    const cached = ShapeCache.cache.get(element);
-    if (cached && (theme === null || cached.theme === theme)) {
-      return cached.shape as T["type"] extends keyof ElementShapes
-        ? ElementShapes[T["type"]] | undefined
-        : ElementShape | undefined;
-    }
-    return undefined;
+  public static get = <T extends ExcalidrawElement>(element: T) => {
+    return ShapeCache.cache.get(
+      element,
+    ) as T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]] | undefined
+      : ElementShape | undefined;
   };
 
-  public static delete = (element: ExcalidrawElement) => {
+  public static set = <T extends ExcalidrawElement>(
+    element: T,
+    shape: T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]]
+      : Drawable,
+  ) => ShapeCache.cache.set(element, shape);
+
+  public static delete = (element: ExcalidrawElement) =>
     ShapeCache.cache.delete(element);
-    elementWithCanvasCache.delete(element);
-  };
 
   public static destroy = () => {
     ShapeCache.cache = new WeakMap();
@@ -123,13 +117,12 @@ export class ShapeCache {
       isExporting: boolean;
       canvasBackgroundColor: AppState["viewBackgroundColor"];
       embedsValidationStatus: EmbedsValidationStatus;
-      theme: AppState["theme"];
     } | null,
   ) => {
     // when exporting, always regenerated to guarantee the latest shape
     const cachedShape = renderConfig?.isExporting
       ? undefined
-      : ShapeCache.get(element, renderConfig ? renderConfig.theme : null);
+      : ShapeCache.get(element);
 
     // `null` indicates no rc shape applicable for this element type,
     // but it's considered a valid cache value (= do not regenerate)
@@ -139,25 +132,19 @@ export class ShapeCache {
 
     elementWithCanvasCache.delete(element);
 
-    const shape = _generateElementShape(
+    const shape = generateElementShape(
       element,
       ShapeCache.rg,
       renderConfig || {
         isExporting: false,
         canvasBackgroundColor: COLOR_PALETTE.white,
         embedsValidationStatus: null,
-        theme: THEME.LIGHT,
       },
     ) as T["type"] extends keyof ElementShapes
       ? ElementShapes[T["type"]]
       : Drawable | null;
 
-    if (!renderConfig?.isExporting) {
-      ShapeCache.cache.set(element, {
-        shape,
-        theme: renderConfig?.theme || THEME.LIGHT,
-      });
-    }
+    ShapeCache.cache.set(element, shape);
 
     return shape;
   };
@@ -193,7 +180,6 @@ function adjustRoughness(element: ExcalidrawElement): number {
 export const generateRoughOptions = (
   element: ExcalidrawElement,
   continuousPath = false,
-  isDarkMode: boolean = false,
 ): Options => {
   const options: Options = {
     seed: element.seed,
@@ -218,9 +204,7 @@ export const generateRoughOptions = (
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: isDarkMode
-      ? applyDarkModeFilter(element.strokeColor)
-      : element.strokeColor,
+    stroke: element.strokeColor,
     preserveVertices:
       continuousPath || element.roughness < ROUGHNESS.cartoonist,
   };
@@ -234,8 +218,6 @@ export const generateRoughOptions = (
       options.fillStyle = element.fillStyle;
       options.fill = isTransparent(element.backgroundColor)
         ? undefined
-        : isDarkMode
-        ? applyDarkModeFilter(element.backgroundColor)
         : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
@@ -249,8 +231,6 @@ export const generateRoughOptions = (
         options.fill =
           element.backgroundColor === "transparent"
             ? undefined
-            : isDarkMode
-            ? applyDarkModeFilter(element.backgroundColor)
             : element.backgroundColor;
       }
       return options;
@@ -304,7 +284,6 @@ const getArrowheadShapes = (
   generator: RoughGenerator,
   options: Options,
   canvasBackgroundColor: string,
-  isDarkMode: boolean,
 ) => {
   const arrowheadPoints = getArrowheadPoints(
     element,
@@ -330,10 +309,6 @@ const getArrowheadShapes = (
     return [generator.line(x3, y3, x4, y4, options)];
   };
 
-  const strokeColor = isDarkMode
-    ? applyDarkModeFilter(element.strokeColor)
-    : element.strokeColor;
-
   switch (arrowhead) {
     case "dot":
     case "circle":
@@ -349,10 +324,10 @@ const getArrowheadShapes = (
           fill:
             arrowhead === "circle_outline"
               ? canvasBackgroundColor
-              : strokeColor,
+              : element.strokeColor,
 
           fillStyle: "solid",
-          stroke: strokeColor,
+          stroke: element.strokeColor,
           roughness: Math.min(0.5, options.roughness || 0),
         }),
       ];
@@ -377,7 +352,7 @@ const getArrowheadShapes = (
             fill:
               arrowhead === "triangle_outline"
                 ? canvasBackgroundColor
-                : strokeColor,
+                : element.strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0),
           },
@@ -405,7 +380,7 @@ const getArrowheadShapes = (
             fill:
               arrowhead === "diamond_outline"
                 ? canvasBackgroundColor
-                : strokeColor,
+                : element.strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0),
           },
@@ -627,22 +602,19 @@ export const generateLinearCollisionShape = (
  *
  * @private
  */
-const _generateElementShape = (
+const generateElementShape = (
   element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>,
   generator: RoughGenerator,
   {
     isExporting,
     canvasBackgroundColor,
     embedsValidationStatus,
-    theme,
   }: {
     isExporting: boolean;
     canvasBackgroundColor: string;
     embedsValidationStatus: EmbedsValidationStatus | null;
-    theme?: AppState["theme"];
   },
-): ElementShape => {
-  const isDarkMode = theme === THEME.DARK;
+): Drawable | Drawable[] | null => {
   switch (element.type) {
     case "rectangle":
     case "iframe":
@@ -668,7 +640,6 @@ const _generateElementShape = (
               embedsValidationStatus,
             ),
             true,
-            isDarkMode,
           ),
         );
       } else {
@@ -684,7 +655,6 @@ const _generateElementShape = (
               embedsValidationStatus,
             ),
             false,
-            isDarkMode,
           ),
         );
       }
@@ -722,7 +692,7 @@ const _generateElementShape = (
             C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${
             topY + horizontalRadius
           }`,
-          generateRoughOptions(element, true, isDarkMode),
+          generateRoughOptions(element, true),
         );
       } else {
         shape = generator.polygon(
@@ -732,7 +702,7 @@ const _generateElementShape = (
             [bottomX, bottomY],
             [leftX, leftY],
           ],
-          generateRoughOptions(element, false, isDarkMode),
+          generateRoughOptions(element),
         );
       }
       return shape;
@@ -743,14 +713,14 @@ const _generateElementShape = (
         element.height / 2,
         element.width,
         element.height,
-        generateRoughOptions(element, false, isDarkMode),
+        generateRoughOptions(element),
       );
       return shape;
     }
     case "line":
     case "arrow": {
       let shape: ElementShapes[typeof element.type];
-      const options = generateRoughOptions(element, false, isDarkMode);
+      const options = generateRoughOptions(element);
 
       // points array can be empty in the beginning, so it is important to add
       // initial position to it
@@ -775,7 +745,7 @@ const _generateElementShape = (
           shape = [
             generator.path(
               generateElbowArrowShape(points, 16),
-              generateRoughOptions(element, true, isDarkMode),
+              generateRoughOptions(element, true),
             ),
           ];
         }
@@ -808,7 +778,6 @@ const _generateElementShape = (
             generator,
             options,
             canvasBackgroundColor,
-            isDarkMode,
           );
           shape.push(...shapes);
         }
@@ -826,7 +795,6 @@ const _generateElementShape = (
             generator,
             options,
             canvasBackgroundColor,
-            isDarkMode,
           );
           shape.push(...shapes);
         }
@@ -834,28 +802,23 @@ const _generateElementShape = (
       return shape;
     }
     case "freedraw": {
-      // oredered in terms of z-index [background, stroke]
-      const shapes: ElementShapes[typeof element.type] = [];
+      let shape: ElementShapes[typeof element.type];
+      generateFreeDrawShape(element);
 
-      // (1) background fill (rc shape), optional
       if (isPathALoop(element.points)) {
         // generate rough polygon to fill freedraw shape
         const simplifiedPoints = simplify(
           element.points as Mutable<LocalPoint[]>,
           0.75,
         );
-        shapes.push(
-          generator.curve(simplifiedPoints as [number, number][], {
-            ...generateRoughOptions(element, false, isDarkMode),
-            stroke: "none",
-          }),
-        );
+        shape = generator.curve(simplifiedPoints as [number, number][], {
+          ...generateRoughOptions(element),
+          stroke: "none",
+        });
+      } else {
+        shape = null;
       }
-
-      // (2) stroke
-      shapes.push(getFreeDrawSvgPath(element));
-
-      return shapes;
+      return shape;
     }
     case "frame":
     case "magicframe":
@@ -962,7 +925,9 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
       return getPolygonShape(element);
     case "arrow":
     case "line": {
-      const roughShape = ShapeCache.generateElementShape(element, null)[0];
+      const roughShape =
+        ShapeCache.get(element)?.[0] ??
+        ShapeCache.generateElementShape(element, null)[0];
       const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
 
       return shouldTestInside(element)
@@ -1038,69 +1003,3 @@ export const toggleLinePolygonState = (
 
   return ret;
 };
-
-// -----------------------------------------------------------------------------
-//                         freedraw shape helper
-// -----------------------------------------------------------------------------
-
-// NOTE not cached (-> for SVG export)
-const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
-  return getSvgPathFromStroke(
-    getFreedrawOutlinePoints(element),
-  ) as SVGPathString;
-};
-
-export const getFreedrawOutlinePoints = (
-  element: ExcalidrawFreeDrawElement,
-) => {
-  // If input points are empty (should they ever be?) return a dot
-  const inputPoints = element.simulatePressure
-    ? element.points
-    : element.points.length
-    ? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
-    : [[0, 0, 0.5]];
-
-  return getStroke(inputPoints as number[][], {
-    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
-    easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
-    last: true,
-  }) as [number, number][];
-};
-
-const med = (A: number[], B: number[]) => {
-  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
-};
-
-// Trim SVG path data so number are each two decimal points. This
-// improves SVG exports, and prevents rendering errors on points
-// with long decimals.
-const TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
-
-const getSvgPathFromStroke = (points: number[][]): string => {
-  if (!points.length) {
-    return "";
-  }
-
-  const max = points.length - 1;
-
-  return points
-    .reduce(
-      (acc, point, i, arr) => {
-        if (i === max) {
-          acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
-        } else {
-          acc.push(point, med(point, arr[i + 1]));
-        }
-        return acc;
-      },
-      ["M", points[0], "Q"],
-    )
-    .join(" ")
-    .replace(TO_FIXED_PRECISION, "$1");
-};
-
-// -----------------------------------------------------------------------------

packages/element/src/textElement.ts

@@ -108,6 +108,7 @@ export const redrawTextBoundingBox = (
       const nextHeight = computeContainerDimensionForBoundText(
         metrics.height,
         container.type,
+        container.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
       );
       scene.mutateElement(container, { height: nextHeight });
       updateOriginalContainerCache(container.id, nextHeight);
@@ -117,6 +118,7 @@ export const redrawTextBoundingBox = (
       const nextWidth = computeContainerDimensionForBoundText(
         metrics.width,
         container.type,
+        container.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
       );
       scene.mutateElement(container, { width: nextWidth });
     }
@@ -187,6 +189,7 @@ export const handleBindTextResize = (
       containerHeight = computeContainerDimensionForBoundText(
         nextHeight,
         container.type,
+        container.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
       );
 
       const diff = containerHeight - container.height;
@@ -353,8 +356,8 @@ export const getContainerCenter = (
 };
 
 export const getContainerCoords = (container: NonDeletedExcalidrawElement) => {
-  let offsetX = BOUND_TEXT_PADDING;
-  let offsetY = BOUND_TEXT_PADDING;
+  let offsetX = container.containerBehavior?.margin ?? BOUND_TEXT_PADDING;
+  let offsetY = container.containerBehavior?.margin ?? BOUND_TEXT_PADDING;
 
   if (container.type === "ellipse") {
     // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6172
@@ -446,9 +449,10 @@ export const isValidTextContainer = (element: {
 export const computeContainerDimensionForBoundText = (
   dimension: number,
   containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>,
+  boundTextPadding: number,
 ) => {
   dimension = Math.ceil(dimension);
-  const padding = BOUND_TEXT_PADDING * 2;
+  const padding = boundTextPadding * 2;
 
   if (containerType === "ellipse") {
     return Math.round(((dimension + padding) / Math.sqrt(2)) * 2);
@@ -467,6 +471,8 @@ export const getBoundTextMaxWidth = (
   boundTextElement: ExcalidrawTextElement | null,
 ) => {
   const { width } = container;
+  const boundTextPadding =
+    container.containerBehavior?.margin ?? BOUND_TEXT_PADDING;
   if (isArrowElement(container)) {
     const minWidth =
       (boundTextElement?.fontSize ?? DEFAULT_FONT_SIZE) *
@@ -477,14 +483,14 @@ export const getBoundTextMaxWidth = (
     // The width of the largest rectangle inscribed inside an ellipse is
     // Math.round((ellipse.width / 2) * Math.sqrt(2)) which is derived from
     // equation of an ellipse -https://github.com/excalidraw/excalidraw/pull/6172
-    return Math.round((width / 2) * Math.sqrt(2)) - BOUND_TEXT_PADDING * 2;
+    return Math.round((width / 2) * Math.sqrt(2)) - boundTextPadding * 2;
   }
   if (container.type === "diamond") {
     // The width of the largest rectangle inscribed inside a rhombus is
     // Math.round(width / 2) - https://github.com/excalidraw/excalidraw/pull/6265
-    return Math.round(width / 2) - BOUND_TEXT_PADDING * 2;
+    return Math.round(width / 2) - boundTextPadding * 2;
   }
-  return width - BOUND_TEXT_PADDING * 2;
+  return width - boundTextPadding * 2;
 };
 
 export const getBoundTextMaxHeight = (
@@ -492,8 +498,10 @@ export const getBoundTextMaxHeight = (
   boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
   const { height } = container;
+  const boundTextPadding =
+    container.containerBehavior?.margin ?? BOUND_TEXT_PADDING;
   if (isArrowElement(container)) {
-    const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
+    const containerHeight = height - boundTextPadding * 8 * 2;
     if (containerHeight <= 0) {
       return boundTextElement.height;
     }
@@ -503,14 +511,14 @@ export const getBoundTextMaxHeight = (
     // The height of the largest rectangle inscribed inside an ellipse is
     // Math.round((ellipse.height / 2) * Math.sqrt(2)) which is derived from
     // equation of an ellipse - https://github.com/excalidraw/excalidraw/pull/6172
-    return Math.round((height / 2) * Math.sqrt(2)) - BOUND_TEXT_PADDING * 2;
+    return Math.round((height / 2) * Math.sqrt(2)) - boundTextPadding * 2;
   }
   if (container.type === "diamond") {
     // The height of the largest rectangle inscribed inside a rhombus is
     // Math.round(height / 2) - https://github.com/excalidraw/excalidraw/pull/6265
-    return Math.round(height / 2) - BOUND_TEXT_PADDING * 2;
+    return Math.round(height / 2) - boundTextPadding * 2;
   }
-  return height - BOUND_TEXT_PADDING * 2;
+  return height - boundTextPadding * 2;
 };
 
 /** retrieves text from text elements and concatenates to a single string */

packages/element/src/textMeasurements.ts

@@ -32,22 +32,24 @@ const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
 export const getApproxMinLineWidth = (
   font: FontString,
   lineHeight: ExcalidrawTextElement["lineHeight"],
+  boundTextPadding: number = BOUND_TEXT_PADDING,
 ) => {
   const maxCharWidth = getMaxCharWidth(font);
   if (maxCharWidth === 0) {
     return (
       measureText(DUMMY_TEXT.split("").join("\n"), font, lineHeight).width +
-      BOUND_TEXT_PADDING * 2
+      boundTextPadding * 2
     );
   }
-  return maxCharWidth + BOUND_TEXT_PADDING * 2;
+  return maxCharWidth + boundTextPadding * 2;
 };
 
 export const getMinTextElementWidth = (
   font: FontString,
   lineHeight: ExcalidrawTextElement["lineHeight"],
+  boundTextPadding: number = BOUND_TEXT_PADDING,
 ) => {
-  return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
+  return measureText("", font, lineHeight).width + boundTextPadding * 2;
 };
 
 export const isMeasureTextSupported = () => {
@@ -99,8 +101,9 @@ export const getLineHeightInPx = (
 export const getApproxMinLineHeight = (
   fontSize: ExcalidrawTextElement["fontSize"],
   lineHeight: ExcalidrawTextElement["lineHeight"],
+  boundTextPadding: number = BOUND_TEXT_PADDING,
 ) => {
-  return getLineHeightInPx(fontSize, lineHeight) + BOUND_TEXT_PADDING * 2;
+  return getLineHeightInPx(fontSize, lineHeight) + boundTextPadding * 2;
 };
 
 let textMetricsProvider: TextMetricsProvider | undefined;

packages/element/src/transformHandles.ts

@@ -11,7 +11,6 @@ import type {
   InteractiveCanvasAppState,
   Zoom,
 } from "@excalidraw/excalidraw/types";
-import type { Bounds } from "@excalidraw/common";
 
 import { getElementAbsoluteCoords } from "./bounds";
 import {
@@ -21,6 +20,7 @@ import {
   isLinearElement,
 } from "./typeChecks";
 
+import type { Bounds } from "./bounds";
 import type {
   ElementsMap,
   ExcalidrawElement,

packages/element/src/typeChecks.ts

@@ -6,6 +6,7 @@ import type { ElementOrToolType } from "@excalidraw/excalidraw/types";
 
 import type { MarkNonNullable } from "@excalidraw/common/utility-types";
 
+import type { Bounds } from "./bounds";
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
@@ -271,15 +272,12 @@ export const isExcalidrawElement = (
   }
 };
 
+export const isFlowchartType = (type: string): boolean =>
+  ["rectangle", "ellipse", "diamond"].includes(type);
+
 export const isFlowchartNodeElement = (
   element: ExcalidrawElement,
-): element is ExcalidrawFlowchartNodeElement => {
-  return (
-    element.type === "rectangle" ||
-    element.type === "ellipse" ||
-    element.type === "diamond"
-  );
-};
+): element is ExcalidrawFlowchartNodeElement => isFlowchartType(element.type);
 
 export const hasBoundTextElement = (
   element: ExcalidrawElement | null,
@@ -355,6 +353,15 @@ export const getDefaultRoundnessTypeForElement = (
   return null;
 };
 
+// TODO: Move this to @excalidraw/math
+export const isBounds = (box: unknown): box is Bounds =>
+  Array.isArray(box) &&
+  box.length === 4 &&
+  typeof box[0] === "number" &&
+  typeof box[1] === "number" &&
+  typeof box[2] === "number" &&
+  typeof box[3] === "number";
+
 export const getLinearElementSubType = (
   element: ExcalidrawLinearElement,
 ): ExcalidrawLinearElementSubType => {

packages/element/src/types.ts

@@ -15,7 +15,7 @@ import type {
   ValueOf,
 } from "@excalidraw/common/utility-types";
 
-export type ChartType = "bar" | "line" | "radar";
+export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export type FontFamilyKeys = keyof typeof FONT_FAMILY;
 export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
@@ -27,6 +27,10 @@ export type StrokeRoundness = "round" | "sharp";
 export type RoundnessType = ValueOf<typeof ROUNDNESS>;
 export type StrokeStyle = "solid" | "dashed" | "dotted";
 export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
+export type ContainerBehavior = {
+  textFlow: "growing" | "fixed";
+  margin?: number;
+};
 
 type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
 export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
@@ -79,21 +83,26 @@ type _ExcalidrawElementBase = Readonly<{
   link: string | null;
   locked: boolean;
   customData?: Record<string, any>;
+  containerBehavior?: ContainerBehavior;
 }>;
 
 export type ExcalidrawSelectionElement = _ExcalidrawElementBase & {
   type: "selection";
 };
 
-export type ExcalidrawRectangleElement = _ExcalidrawElementBase & {
+type _ExcalidrawStickyNoteContainer = _ExcalidrawElementBase & {
+  containerBehavior: ContainerBehavior;
+};
+
+export type ExcalidrawRectangleElement = _ExcalidrawStickyNoteContainer & {
   type: "rectangle";
 };
 
-export type ExcalidrawDiamondElement = _ExcalidrawElementBase & {
+export type ExcalidrawDiamondElement = _ExcalidrawStickyNoteContainer & {
   type: "diamond";
 };
 
-export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
+export type ExcalidrawEllipseElement = _ExcalidrawStickyNoteContainer & {
   type: "ellipse";
 };
 

packages/element/src/utils.ts

@@ -7,7 +7,6 @@ import {
 } from "@excalidraw/common";
 
 import {
-  bezierEquation,
   curve,
   curveCatmullRomCubicApproxPoints,
   curveOffsetPoints,
@@ -28,30 +27,19 @@ import {
 
 import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";
 
-import type {
-  AppState,
-  NormalizedZoomValue,
-  Zoom,
-} from "@excalidraw/excalidraw/types";
+import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types";
 
 import { elementCenterPoint, getDiamondPoints } from "./bounds";
 
 import { generateLinearCollisionShape } from "./shape";
 
-import { hitElementItself, isPointInElement } from "./collision";
+import { isPointInElement } from "./collision";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isRectangularElement } from "./typeChecks";
-import { maxBindingDistance_simple } from "./binding";
-
-import {
-  getGlobalFixedPointForBindableElement,
-  normalizeFixedPoint,
-} from "./binding";
 
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
-  ExcalidrawBindableElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
   ExcalidrawFreeDrawElement,
@@ -341,10 +329,24 @@ export function deconstructRectanguloidElement(
   return shape;
 }
 
-export function getDiamondBaseCorners(
+/**
+ * Get the **unrotated** building components of a diamond element
+ * in the form of line segments and curves as a tuple, in this order.
+ *
+ * @param element The element to deconstruct
+ * @param offset An optional offset
+ * @returns Tuple of line **unrotated** segments (0) and curves (1)
+ */
+export function deconstructDiamondElement(
   element: ExcalidrawDiamondElement,
   offset: number = 0,
-): Curve<GlobalPoint>[] {
+): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
+  const cachedShape = getElementShapesCacheEntry(element, offset);
+
+  if (cachedShape) {
+    return cachedShape;
+  }
+
   const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
     getDiamondPoints(element);
   const verticalRadius = element.roundness
@@ -361,7 +363,7 @@ export function getDiamondBaseCorners(
     pointFrom(element.x + leftX, element.y + leftY),
   ];
 
-  return [
+  const baseCorners = [
     curve(
       pointFrom<GlobalPoint>(
         right[0] - verticalRadius,
@@ -411,27 +413,6 @@ export function getDiamondBaseCorners(
       ),
     ), // TOP
   ];
-}
-
-/**
- * Get the **unrotated** building components of a diamond element
- * in the form of line segments and curves as a tuple, in this order.
- *
- * @param element The element to deconstruct
- * @param offset An optional offset
- * @returns Tuple of line **unrotated** segments (0) and curves (1)
- */
-export function deconstructDiamondElement(
-  element: ExcalidrawDiamondElement,
-  offset: number = 0,
-): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
-  const cachedShape = getElementShapesCacheEntry(element, offset);
-
-  if (cachedShape) {
-    return cachedShape;
-  }
-
-  const baseCorners = getDiamondBaseCorners(element, offset);
 
   const corners = baseCorners.map(
     (corner) =>
@@ -589,131 +570,28 @@ const getDiagonalsForBindableElement = (
   return [diagonalOne, diagonalTwo];
 };
 
-export const getSnapOutlineMidPoint = (
-  point: GlobalPoint,
-  element: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  zoom: AppState["zoom"],
-) => {
-  const center = elementCenterPoint(element, elementsMap);
-  const sideMidpoints =
-    element.type === "diamond"
-      ? getDiamondBaseCorners(element).map((curve) => {
-          const point = bezierEquation(curve, 0.5);
-          const rotatedPoint = pointRotateRads(point, center, element.angle);
-
-          return pointFrom<GlobalPoint>(rotatedPoint[0], rotatedPoint[1]);
-        })
-      : [
-          // RIGHT midpoint
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              element.x + element.width,
-              element.y + element.height / 2,
-            ),
-            center,
-            element.angle,
-          ),
-          // BOTTOM midpoint
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              element.x + element.width / 2,
-              element.y + element.height,
-            ),
-            center,
-            element.angle,
-          ),
-          // LEFT midpoint
-          pointRotateRads(
-            pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
-            center,
-            element.angle,
-          ),
-          // TOP midpoint
-          pointRotateRads(
-            pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
-            center,
-            element.angle,
-          ),
-        ];
-  const candidate = sideMidpoints.find(
-    (midpoint) =>
-      pointDistance(point, midpoint) <=
-        maxBindingDistance_simple(zoom) + element.strokeWidth / 2 &&
-      !hitElementItself({
-        point,
-        element,
-        threshold: 0,
-        elementsMap,
-        overrideShouldTestInside: true,
-      }),
-  );
-
-  return candidate;
-};
-
 export const projectFixedPointOntoDiagonal = (
   arrow: ExcalidrawArrowElement,
   point: GlobalPoint,
-  element: ExcalidrawBindableElement,
+  element: ExcalidrawElement,
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
-  zoom: AppState["zoom"],
-  isMidpointSnappingEnabled: boolean = true,
 ): GlobalPoint | null => {
   invariant(arrow.points.length >= 2, "Arrow must have at least two points");
   if (arrow.width < 3 && arrow.height < 3) {
     return null;
   }
 
-  if (isMidpointSnappingEnabled) {
-    const sideMidPoint = getSnapOutlineMidPoint(
-      point,
-      element,
-      elementsMap,
-      zoom,
-    );
-    if (sideMidPoint) {
-      return sideMidPoint;
-    }
-  }
-
-  // Do the projection onto the diagonals (or center lines
-  // for non-rectangular shapes)
   const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
     element,
     elementsMap,
   );
 
-  // To avoid working with stale arrow state, we use the opposite focus point
-  // of the current endpoint, which will always be unchanged during moving of
-  // the endpoint. This is only needed when the arrow has only two points.
-  let a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+  const a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrow,
     startOrEnd === "start" ? 1 : arrow.points.length - 2,
     elementsMap,
   );
-  if (arrow.points.length === 2) {
-    const otherBinding =
-      startOrEnd === "start" ? arrow.endBinding : arrow.startBinding;
-    const otherBindable =
-      otherBinding &&
-      (elementsMap.get(otherBinding.elementId) as
-        | ExcalidrawBindableElement
-        | undefined);
-    const otherFocusPoint =
-      otherBinding &&
-      otherBindable &&
-      getGlobalFixedPointForBindableElement(
-        normalizeFixedPoint(otherBinding.fixedPoint),
-        otherBindable,
-        elementsMap,
-      );
-    if (otherFocusPoint) {
-      a = otherFocusPoint;
-    }
-  }
-
   const b = pointFromVector<GlobalPoint>(
     vectorScale(
       vectorFromPoint(point, a),
@@ -725,22 +603,18 @@ export const projectFixedPointOntoDiagonal = (
     ),
     a,
   );
-  const intersector = lineSegment<GlobalPoint>(b, a);
+  const intersector = lineSegment<GlobalPoint>(point, b);
   const p1 = lineSegmentIntersectionPoints(diagonalOne, intersector);
   const p2 = lineSegmentIntersectionPoints(diagonalTwo, intersector);
   const d1 = p1 && pointDistance(a, p1);
   const d2 = p2 && pointDistance(a, p2);
 
-  let projection = null;
+  let p = null;
   if (d1 != null && d2 != null) {
-    projection = d1 < d2 ? p1 : p2;
+    p = d1 < d2 ? p1 : p2;
   } else {
-    projection = p1 || p2 || null;
+    p = p1 || p2 || null;
   }
 
-  if (projection && isPointInElement(projection, element, elementsMap)) {
-    return projection;
-  }
-
-  return null;
+  return p && isPointInElement(p, element, elementsMap) ? p : null;
 };

packages/element/src/zindex.ts

@@ -156,11 +156,12 @@ export const moveArrowAboveBindable = (
   elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   elementsMap: NonDeletedSceneElementsMap,
   scene: Scene,
-  hit?: NonDeletedExcalidrawElement,
 ): readonly OrderedExcalidrawElement[] => {
-  const hoveredElement = hit
-    ? hit
-    : getHoveredElementForBinding(point, elements, elementsMap);
+  const hoveredElement = getHoveredElementForBinding(
+    point,
+    elements,
+    elementsMap,
+  );
 
   if (!hoveredElement) {
     return elements;

packages/element/tests/__snapshots__/linearElementEditor.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Test Linear Elements > Test bound text element > should match styles fo
   class="excalidraw-wysiwyg"
   data-type="wysiwyg"
   dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 26.25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Excalifont, Xiaolai, sans-serif, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 26.25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Excalifont, Xiaolai, sans-serif, Segoe UI Emoji;"
   tabindex="0"
   wrap="off"
 />

packages/element/tests/binding.test.tsx

@@ -493,7 +493,6 @@ describe("binding for simple arrows", () => {
       expect(arrow.endBinding?.elementId).toBe(rectRight.id);
 
       mouse.downAt(-100, -100);
-      mouse.moveTo(0, 0);
       mouse.moveTo(650, 750);
       mouse.up(0, 0);
 

packages/element/tests/collision.test.tsx

@@ -1,12 +1,9 @@
-import { arrayToMap } from "@excalidraw/common";
 import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
 import "@excalidraw/utils/test-utils";
 import { render } from "@excalidraw/excalidraw/tests/test-utils";
 
-import * as distance from "../src/distance";
 import { hitElementItself } from "../src/collision";
 
 describe("check rotated elements can be hit:", () => {
@@ -28,6 +25,8 @@ describe("check rotated elements can be hit:", () => {
         [-4, -302],
       ] as LocalPoint[],
     });
+    //const p = [120, -211];
+    //const p = [0, 13];
     const hit = hitElementItself({
       point: pointFrom<GlobalPoint>(88, -68),
       element: window.h.elements[0],
@@ -37,182 +36,3 @@ describe("check rotated elements can be hit:", () => {
     expect(hit).toBe(true);
   });
 });
-
-describe("hitElementItself cache", () => {
-  beforeEach(async () => {
-    // reset cache
-    hitElementItself({
-      point: pointFrom<GlobalPoint>(50, 50),
-      element: API.createElement({
-        type: "rectangle",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        backgroundColor: "#ffffff",
-      }),
-      threshold: Infinity,
-      elementsMap: new Map([]),
-    });
-
-    localStorage.clear();
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-  });
-
-  it("reuses cached result when threshold increases", () => {
-    const element = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "#ffffff",
-    });
-    const elementsMap = arrayToMap([element]);
-    const point = pointFrom<GlobalPoint>(100.5, 50);
-
-    const distanceSpy = jest.spyOn(distance, "distanceToElement");
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 1,
-        elementsMap,
-      }),
-    ).toBe(true);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(1);
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 10,
-        elementsMap,
-      }),
-    ).toBe(true);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(1);
-
-    distanceSpy.mockRestore();
-  });
-
-  it("does not reuse cache when threshold decreases", () => {
-    const element = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-    });
-    const elementsMap = arrayToMap([element]);
-    const point = pointFrom<GlobalPoint>(105, 50);
-
-    const distanceSpy = jest.spyOn(distance, "distanceToElement");
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 10,
-        elementsMap,
-      }),
-    ).toBe(true);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(1);
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 6,
-        elementsMap,
-      }),
-    ).toBe(true);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(2);
-    distanceSpy.mockRestore();
-  });
-
-  it("invalidates cache when element version changes", () => {
-    const element = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "#ffffff",
-    });
-    const elementsMap = arrayToMap([element]);
-    const point = pointFrom<GlobalPoint>(100.5, 50);
-
-    const distanceSpy = jest.spyOn(distance, "distanceToElement");
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 1,
-        elementsMap,
-      }),
-    ).toBe(true);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(1);
-
-    const movedElement = {
-      ...element,
-      version: element.version + 1,
-      versionNonce: element.versionNonce + 1,
-    };
-
-    expect(
-      hitElementItself({
-        point,
-        element: movedElement,
-        threshold: 1,
-        elementsMap,
-      }),
-    ).toBe(true);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(2);
-    distanceSpy.mockRestore();
-  });
-
-  it("override does not affect caching", () => {
-    const element = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-    });
-    const elementsMap = arrayToMap([element]);
-    const point = pointFrom<GlobalPoint>(50, 50);
-
-    const distanceSpy = jest.spyOn(distance, "distanceToElement");
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 10,
-        elementsMap,
-      }),
-    ).toBe(false);
-
-    expect(distanceSpy).toHaveBeenCalledTimes(1);
-
-    expect(
-      hitElementItself({
-        point,
-        element,
-        threshold: 10,
-        elementsMap,
-        overrideShouldTestInside: true,
-      }),
-    ).toBe(true);
-  });
-});

packages/element/tests/embeddable.test.ts

@@ -1,4 +1,4 @@
-import { embeddableURLValidator, getEmbedLink } from "../src/embeddable";
+import { getEmbedLink } from "../src/embeddable";
 
 describe("YouTube timestamp parsing", () => {
   it("should parse YouTube URLs with timestamp in seconds", () => {
@@ -151,83 +151,3 @@ describe("YouTube timestamp parsing", () => {
     }
   });
 });
-
-describe("Google Drive video embedding", () => {
-  it.each([
-    {
-      url: "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?usp=sharing",
-      expectedLink:
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
-    },
-    {
-      url: "https://drive.google.com/open?id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456",
-      expectedLink:
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
-    },
-    {
-      url: "https://drive.google.com/uc?export=download&id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456",
-      expectedLink:
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
-    },
-  ])("should normalize Google Drive link: $url", ({ url, expectedLink }) => {
-    const result = getEmbedLink(url);
-
-    expect(result).toBeTruthy();
-    expect(result?.type).toBe("video");
-    if (result?.type === "video" || result?.type === "generic") {
-      expect(result.link).toBe(expectedLink);
-    }
-    expect(result?.intrinsicSize).toEqual({ w: 560, h: 315 });
-  });
-
-  it("should preserve resourcekey when available", () => {
-    const url =
-      "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456";
-    const result = getEmbedLink(url);
-
-    expect(result).toBeTruthy();
-    expect(result?.type).toBe("video");
-    if (result?.type === "video" || result?.type === "generic") {
-      expect(result.link).toBe(
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456",
-      );
-    }
-  });
-
-  it("should preserve timestamp when available", () => {
-    const url =
-      "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?t=9";
-    const result = getEmbedLink(url);
-
-    expect(result).toBeTruthy();
-    expect(result?.type).toBe("video");
-    if (result?.type === "video" || result?.type === "generic") {
-      expect(result.link).toBe(
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?t=9",
-      );
-    }
-  });
-
-  it("should preserve resourcekey and timestamp together", () => {
-    const url =
-      "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456&t=9";
-    const result = getEmbedLink(url);
-
-    expect(result).toBeTruthy();
-    expect(result?.type).toBe("video");
-    if (result?.type === "video" || result?.type === "generic") {
-      expect(result.link).toBe(
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456&t=9",
-      );
-    }
-  });
-
-  it("should validate Google Drive domain by default", () => {
-    expect(
-      embeddableURLValidator(
-        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view",
-        undefined,
-      ),
-    ).toBe(true);
-  });
-});

packages/element/tests/linearElementEditor.test.tsx

@@ -218,7 +218,7 @@ describe("Test Linear Elements", () => {
     // drag line from midpoint
     drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`8`);
-    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
     expect(line.points.length).toEqual(3);
     expect(line.points).toMatchInlineSnapshot(`
       [
@@ -378,7 +378,7 @@ describe("Test Linear Elements", () => {
       // drag line from midpoint
       drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `12`,
+        `11`,
       );
       expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
@@ -419,7 +419,7 @@ describe("Test Linear Elements", () => {
       fireEvent.click(screen.getByTitle("Round"));
 
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `10`,
+        `9`,
       );
       expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
@@ -480,7 +480,7 @@ describe("Test Linear Elements", () => {
       drag(startPoint, endPoint);
 
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `12`,
+        `11`,
       );
       expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
@@ -548,7 +548,7 @@ describe("Test Linear Elements", () => {
         );
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `15`,
+          `14`,
         );
         expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
 
@@ -599,7 +599,7 @@ describe("Test Linear Elements", () => {
         drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `12`,
+          `11`,
         );
         expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
@@ -640,7 +640,7 @@ describe("Test Linear Elements", () => {
         drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `12`,
+          `11`,
         );
         expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
@@ -688,7 +688,7 @@ describe("Test Linear Elements", () => {
         deletePoint(points[2]);
         expect(line.points.length).toEqual(3);
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `18`,
+          `17`,
         );
         expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`10`);
 
@@ -746,7 +746,7 @@ describe("Test Linear Elements", () => {
           ),
         );
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `15`,
+          `14`,
         );
         expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
         expect(line.points.length).toEqual(5);
@@ -844,7 +844,7 @@ describe("Test Linear Elements", () => {
         drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `12`,
+          `11`,
         );
         expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
@@ -1317,7 +1317,7 @@ describe("Test Linear Elements", () => {
       const textElement = h.elements[2] as ExcalidrawTextElementWithContainer;
 
       expect(arrow.endBinding?.elementId).toBe(rect.id);
-      expect(arrow.width).toBeCloseTo(404);
+      expect(arrow.width).toBeCloseTo(399);
       expect(rect.x).toBe(400);
       expect(rect.y).toBe(0);
       expect(
@@ -1336,7 +1336,7 @@ describe("Test Linear Elements", () => {
       mouse.downAt(rect.x, rect.y);
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
-      expect(arrow.width).toBeCloseTo(204);
+      expect(arrow.width).toBeCloseTo(199);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

packages/element/tests/resize.test.tsx

@@ -2,7 +2,6 @@ import { pointFrom } from "@excalidraw/math";
 
 import { Excalidraw } from "@excalidraw/excalidraw";
 import {
-  type Bounds,
   KEYS,
   getSizeFromPoints,
   reseed,
@@ -23,6 +22,7 @@ import { resizeSingleElement } from "../src/resizeElements";
 import { LinearElementEditor } from "../src/linearElementEditor";
 import { getElementPointsCoords } from "../src/bounds";
 
+import type { Bounds } from "../src/bounds";
 import type {
   ExcalidrawElbowArrowElement,
   ExcalidrawFreeDrawElement,
@@ -1350,8 +1350,8 @@ describe("multiple selection", () => {
 
     expect(boundArrow.x).toBeCloseTo(380 * scaleX);
     expect(boundArrow.y).toBeCloseTo(240 * scaleY);
-    expect(boundArrow.points[1][0]).toBeCloseTo(63.40354208105561);
-    expect(boundArrow.points[1][1]).toBeCloseTo(-84.53805610807356);
+    expect(boundArrow.points[1][0]).toBeCloseTo(59.7979);
+    expect(boundArrow.points[1][1]).toBeCloseTo(-79.7305);
 
     expect(arrowLabelPos.x + arrowLabel.width / 2).toBeCloseTo(
       boundArrow.x + boundArrow.points[1][0] / 2,

packages/element/tests/textElement.test.ts

@@ -1,4 +1,4 @@
-import { getLineHeight } from "@excalidraw/common";
+import { BOUND_TEXT_PADDING, getLineHeight } from "@excalidraw/common";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
 import { FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN } from "@excalidraw/common";
@@ -63,9 +63,13 @@ describe("Test measureText", () => {
         type: "rectangle",
         ...params,
       });
-      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
-        160,
-      );
+      expect(
+        computeContainerDimensionForBoundText(
+          150,
+          element.type,
+          BOUND_TEXT_PADDING,
+        ),
+      ).toEqual(160);
     });
 
     it("should compute container height correctly for ellipse", () => {
@@ -73,9 +77,13 @@ describe("Test measureText", () => {
         type: "ellipse",
         ...params,
       });
-      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
-        226,
-      );
+      expect(
+        computeContainerDimensionForBoundText(
+          150,
+          element.type,
+          BOUND_TEXT_PADDING,
+        ),
+      ).toEqual(226);
     });
 
     it("should compute container height correctly for diamond", () => {
@@ -83,9 +91,13 @@ describe("Test measureText", () => {
         type: "diamond",
         ...params,
       });
-      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
-        320,
-      );
+      expect(
+        computeContainerDimensionForBoundText(
+          150,
+          element.type,
+          BOUND_TEXT_PADDING,
+        ),
+      ).toEqual(320);
     });
   });
 

packages/excalidraw/actions/actionBoundText.tsx

@@ -236,6 +236,9 @@ export const actionWrapTextInContainer = register({
     let updatedElements: readonly ExcalidrawElement[] = elements.slice();
     const containerIds: Mutable<AppState["selectedElementIds"]> = {};
 
+    const boundTextPadding =
+      appState.currentItemContainerBehavior?.margin ?? BOUND_TEXT_PADDING;
+
     for (const textElement of selectedElements) {
       if (isTextElement(textElement) && !isBoundToContainer(textElement)) {
         const container = newElement({
@@ -261,18 +264,21 @@ export const actionWrapTextInContainer = register({
               : null,
           opacity: 100,
           locked: false,
-          x: textElement.x - BOUND_TEXT_PADDING,
-          y: textElement.y - BOUND_TEXT_PADDING,
+          x: textElement.x - boundTextPadding,
+          y: textElement.y - boundTextPadding,
           width: computeContainerDimensionForBoundText(
             textElement.width,
             "rectangle",
+            boundTextPadding,
           ),
           height: computeContainerDimensionForBoundText(
             textElement.height,
             "rectangle",
+            boundTextPadding,
           ),
           groupIds: textElement.groupIds,
           frameId: textElement.frameId,
+          containerBehavior: appState.currentItemContainerBehavior,
         });
 
         // update bindings

packages/excalidraw/actions/actionCanvas.tsx

@@ -118,6 +118,7 @@ export const actionClearCanvas = register({
         gridStep: appState.gridStep,
         gridModeEnabled: appState.gridModeEnabled,
         stats: appState.stats,
+        pasteDialog: appState.pasteDialog,
         activeTool:
           appState.activeTool.type === "image"
             ? {

packages/excalidraw/actions/actionDistribute.tsx

@@ -58,7 +58,6 @@ const distributeSelectedElements = (
     app.scene.getNonDeletedElementsMap(),
     distribution,
     appState,
-    app.scene,
   );
 
   const updatedElementsMap = arrayToMap(updatedElements);

packages/excalidraw/actions/actionFinalize.tsx

@@ -18,7 +18,6 @@ import {
   KEYS,
   arrayToMap,
   invariant,
-  shouldRotateWithDiscreteAngle,
   updateActiveTool,
 } from "@excalidraw/common";
 import { isPathALoop } from "@excalidraw/element";
@@ -82,10 +81,7 @@ export const actionFinalize = register<FormData>({
         app.scene,
       );
 
-      if (
-        isBindingElement(element) &&
-        !appState.selectedLinearElement.segmentMidPointHoveredCoords
-      ) {
+      if (isBindingElement(element)) {
         const newArrow = !!appState.newElement;
 
         const selectedPointsIndices =
@@ -98,29 +94,18 @@ export const actionFinalize = register<FormData>({
             map.set(index, {
               point: LinearElementEditor.pointFromAbsoluteCoords(
                 element,
-                pointFrom<GlobalPoint>(
-                  sceneCoords.x - linearElementEditor.pointerOffset.x,
-                  sceneCoords.y - linearElementEditor.pointerOffset.y,
-                ),
+                pointFrom<GlobalPoint>(sceneCoords.x, sceneCoords.y),
                 elementsMap,
               ),
             });
 
             return map;
           }, new Map()) ?? new Map();
-        bindOrUnbindBindingElement(
-          element,
-          draggedPoints,
-          sceneCoords.x - linearElementEditor.pointerOffset.x,
-          sceneCoords.y - linearElementEditor.pointerOffset.y,
-          scene,
-          appState,
-          {
-            newArrow,
-            altKey: event.altKey,
-            angleLocked: shouldRotateWithDiscreteAngle(event),
-          },
-        );
+
+        bindOrUnbindBindingElement(element, draggedPoints, scene, appState, {
+          newArrow,
+          altKey: event.altKey,
+        });
       } else if (isLineElement(element)) {
         if (
           appState.selectedLinearElement?.isEditing &&
@@ -175,7 +160,6 @@ export const actionFinalize = register<FormData>({
                     ...linearElementEditor.initialState,
                     lastClickedPoint: -1,
                   },
-                  pointerOffset: { x: 0, y: 0 },
                 },
             selectionElement: null,
             suggestedBinding: null,

packages/excalidraw/actions/actionProperties.tsx

@@ -21,11 +21,16 @@ import {
   getLineHeight,
   isTransparent,
   reduceToCommonValue,
+  BOUND_TEXT_PADDING,
   invariant,
-  FONT_SIZES,
 } from "@excalidraw/common";
 
-import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
+import {
+  canBecomePolygon,
+  getNonDeletedElements,
+  hasContainerBehavior,
+  isFlowchartNodeElement,
+} from "@excalidraw/element";
 
 import {
   bindBindingElement,
@@ -66,6 +71,7 @@ import type { LocalPoint, Radians } from "@excalidraw/math";
 
 import type {
   Arrowhead,
+  ContainerBehavior,
   ElementsMap,
   ExcalidrawBindableElement,
   ExcalidrawElement,
@@ -127,6 +133,11 @@ import {
   ArrowheadCrowfootIcon,
   ArrowheadCrowfootOneIcon,
   ArrowheadCrowfootOneOrManyIcon,
+  stickyNoteIcon,
+  growingContainerIcon,
+  marginLargeIcon,
+  marginMediumIcon,
+  marginSmallIcon,
 } from "../components/icons";
 
 import { Fonts } from "../fonts";
@@ -759,25 +770,25 @@ export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
               group="font-size"
               options={[
                 {
-                  value: FONT_SIZES.sm,
+                  value: 16,
                   text: t("labels.small"),
                   icon: FontSizeSmallIcon,
                   testId: "fontSize-small",
                 },
                 {
-                  value: FONT_SIZES.md,
+                  value: 20,
                   text: t("labels.medium"),
                   icon: FontSizeMediumIcon,
                   testId: "fontSize-medium",
                 },
                 {
-                  value: FONT_SIZES.lg,
+                  value: 28,
                   text: t("labels.large"),
                   icon: FontSizeLargeIcon,
                   testId: "fontSize-large",
                 },
                 {
-                  value: FONT_SIZES.xl,
+                  value: 36,
                   text: t("labels.veryLarge"),
                   icon: FontSizeExtraLargeIcon,
                   testId: "fontSize-veryLarge",
@@ -1549,13 +1560,282 @@ export const actionChangeRoundness = register<"sharp" | "round">({
   },
 });
 
+const getMargin = (value: "small" | "medium" | "large") => {
+  switch (value) {
+    case "small":
+      return BOUND_TEXT_PADDING;
+    case "medium":
+      return 15;
+    case "large":
+      return 25;
+    default:
+      return BOUND_TEXT_PADDING;
+  }
+};
+
+const getMarginValue = (margin: number | null) => {
+  if (margin === null) {
+    return null;
+  }
+  switch (margin) {
+    case BOUND_TEXT_PADDING:
+      return "small";
+    case 15:
+      return "medium";
+    case 25:
+      return "large";
+    default:
+      return null;
+  }
+};
+
+export const actionChangeContainerBehavior = register<
+  | { textFlow: ContainerBehavior["textFlow"] }
+  | { margin: NonNullable<ReturnType<typeof getMarginValue>> }
+>({
+  name: "changeContainerBehavior",
+  label: "labels.container",
+  trackEvent: false,
+  perform: (elements, appState, value, app) => {
+    invariant(value, "actionChangeContainerBehavior: value must be defined");
+    const elementsMap = app.scene.getNonDeletedElementsMap();
+    let selected = getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+    });
+
+    if (selected.length === 0 && appState.editingTextElement) {
+      selected = [appState.editingTextElement];
+    }
+
+    const containerIdsToUpdate = new Set<string>();
+
+    // collect directly selected eligible containers
+    for (const el of selected) {
+      if (isFlowchartNodeElement(el)) {
+        containerIdsToUpdate.add(el.id);
+      }
+    }
+
+    // if none, and exactly one selected text element -> use its container if eligible
+    if (
+      containerIdsToUpdate.size === 0 &&
+      selected.length === 1 &&
+      isTextElement(selected[0]) &&
+      selected[0].containerId
+    ) {
+      const container = elementsMap.get(selected[0].containerId);
+      if (
+        container &&
+        isFlowchartNodeElement(container) &&
+        getBoundTextElement(container, elementsMap)
+      ) {
+        containerIdsToUpdate.add(container.id);
+      }
+    }
+
+    if ("margin" in value) {
+      const marginSize = getMargin(value.margin);
+      if (containerIdsToUpdate.size === 0) {
+        return {
+          appState: {
+            ...appState,
+            currentItemContainerBehavior: {
+              textFlow:
+                appState.currentItemContainerBehavior?.textFlow ?? "growing",
+              margin: marginSize,
+            },
+          },
+          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+        };
+      }
+      const nextElements = elements.map((el) =>
+        containerIdsToUpdate.has(el.id)
+          ? newElementWith(el, {
+              containerBehavior: {
+                textFlow: el.containerBehavior?.textFlow ?? "growing",
+                margin: marginSize,
+              },
+            })
+          : el,
+      );
+      // Invalidate containers to trigger re-render
+      containerIdsToUpdate.forEach((id) => {
+        const container = nextElements.find((el) => el.id === id);
+        if (container) {
+          const boundText = getBoundTextElement(
+            container,
+            arrayToMap(nextElements),
+          );
+          if (boundText) {
+            redrawTextBoundingBox(boundText, container, app.scene);
+          }
+        }
+      });
+
+      return {
+        elements: nextElements,
+        appState: {
+          ...appState,
+          currentItemContainerBehavior: {
+            textFlow:
+              appState.currentItemContainerBehavior?.textFlow ?? "growing",
+            margin: marginSize,
+          },
+        },
+        captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      };
+    }
+    const textFlow = value.textFlow;
+    const nextElements = elements.map((el) =>
+      containerIdsToUpdate.has(el.id)
+        ? newElementWith(el, {
+            containerBehavior: {
+              textFlow,
+              margin: el.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
+            },
+          })
+        : el,
+    );
+    return {
+      elements: nextElements,
+      appState: {
+        ...appState,
+        currentItemContainerBehavior: {
+          textFlow,
+          margin:
+            appState.currentItemContainerBehavior?.margin ?? BOUND_TEXT_PADDING,
+        },
+      },
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    };
+  },
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
+    let selected = getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+    });
+
+    if (selected.length === 0 && appState.editingTextElement) {
+      selected = [appState.editingTextElement];
+    }
+
+    let targetContainers: ExcalidrawElement[] = [];
+
+    // case 1: one text element selected -> target its container if eligible
+    if (
+      selected.length === 1 &&
+      isTextElement(selected[0]) &&
+      selected[0].containerId
+    ) {
+      const container = elementsMap.get(selected[0].containerId);
+      if (
+        container &&
+        isFlowchartNodeElement(container) &&
+        getBoundTextElement(container, elementsMap)
+      ) {
+        targetContainers = [container];
+      }
+    } else {
+      // case 2: any eligible containers directly selected
+      targetContainers = selected.filter((el) => isFlowchartNodeElement(el));
+    }
+
+    if (
+      targetContainers.length === 0 &&
+      !hasContainerBehavior(appState.activeTool.type)
+    ) {
+      return null;
+    }
+
+    const textFlow =
+      targetContainers.length === 0
+        ? appState.currentItemContainerBehavior?.textFlow ?? "growing"
+        : reduceToCommonValue(
+            targetContainers,
+            (el) => el.containerBehavior?.textFlow ?? "growing",
+          ) ??
+          // mixed selection -> show null so nothing appears selected
+          null;
+
+    const marginValue =
+      targetContainers.length === 0
+        ? appState.currentItemContainerBehavior?.margin ?? BOUND_TEXT_PADDING
+        : reduceToCommonValue(
+            targetContainers,
+            (el) => el.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
+          ) ??
+          // mixed selection -> show null so nothing appears selected
+          null;
+
+    return (
+      <fieldset>
+        <legend>{t("labels.container")}</legend>
+        <div className="buttonList">
+          <RadioSelection
+            group="container"
+            options={[
+              {
+                value: "growing",
+                text: t("labels.container_growing"),
+                icon: growingContainerIcon,
+              },
+              {
+                value: "fixed",
+                text: t("labels.container_fixed"),
+                icon: stickyNoteIcon,
+              },
+            ]}
+            value={
+              textFlow ??
+              (targetContainers.length
+                ? null
+                : appState.currentItemContainerBehavior?.textFlow ?? "growing")
+            }
+            onChange={(val) => updateData({ textFlow: val })}
+          />
+        </div>
+        <div className="buttonList">
+          <RadioSelection
+            group="container"
+            options={[
+              {
+                value: "small",
+                text: t("labels.container_margin_small"),
+                icon: marginSmallIcon,
+              },
+              {
+                value: "medium",
+                text: t("labels.container_margin_medium"),
+                icon: marginMediumIcon,
+              },
+              {
+                value: "large",
+                text: t("labels.container_margin_large"),
+                icon: marginLargeIcon,
+              },
+            ]}
+            value={getMarginValue(
+              marginValue ??
+                (targetContainers.length
+                  ? null
+                  : appState.currentItemContainerBehavior?.margin ??
+                    BOUND_TEXT_PADDING),
+            )}
+            onChange={(val) => updateData({ margin: val })}
+          />
+        </div>
+      </fieldset>
+    );
+  },
+});
+
 const getArrowheadOptions = (flip: boolean) => {
   return [
     {
       value: null,
       text: t("labels.arrowhead_none"),
       keyBinding: "q",
-      icon: <ArrowheadNoneIcon flip={flip} />,
+      icon: ArrowheadNoneIcon,
     },
     {
       value: "arrow",
@@ -1683,8 +1963,7 @@ export const actionChangeArrowhead = register<{
                   ? element.startArrowhead
                   : appState.currentItemStartArrowhead,
               true,
-              (hasSelection) =>
-                hasSelection ? null : appState.currentItemStartArrowhead,
+              appState.currentItemStartArrowhead,
             )}
             onChange={(value) => updateData({ position: "start", type: value })}
             numberOfOptionsToAlwaysShow={4}
@@ -1701,8 +1980,7 @@ export const actionChangeArrowhead = register<{
                   ? element.endArrowhead
                   : appState.currentItemEndArrowhead,
               true,
-              (hasSelection) =>
-                hasSelection ? null : appState.currentItemEndArrowhead,
+              appState.currentItemEndArrowhead,
             )}
             onChange={(value) => updateData({ position: "end", type: value })}
             numberOfOptionsToAlwaysShow={4}
@@ -1830,7 +2108,6 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
                   startElement,
                   "start",
                   elementsMap,
-                  appState.isBindingEnabled,
                 ),
               }
             : null;
@@ -1844,7 +2121,6 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
                   endElement,
                   "end",
                   elementsMap,
-                  appState.isBindingEnabled,
                 ),
               }
             : null;

packages/excalidraw/actions/actionToggleArrowBinding.tsx

@@ -1,26 +0,0 @@
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { register } from "./register";
-
-export const actionToggleArrowBinding = register({
-  name: "arrowBinding",
-  label: "labels.arrowBinding",
-  viewMode: false,
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => appState.bindingPreference === "disabled",
-  },
-  perform(elements, appState) {
-    const newPreference =
-      appState.bindingPreference === "enabled" ? "disabled" : "enabled";
-    return {
-      appState: {
-        ...appState,
-        bindingPreference: newPreference,
-        isBindingEnabled: newPreference === "enabled",
-      },
-      captureUpdate: CaptureUpdateAction.NEVER,
-    };
-  },
-  checked: (appState) => appState.bindingPreference === "enabled",
-});

packages/excalidraw/actions/actionToggleMidpointSnapping.tsx

@@ -1,23 +0,0 @@
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { register } from "./register";
-
-export const actionToggleMidpointSnapping = register({
-  name: "midpointSnapping",
-  label: "labels.midpointSnapping",
-  viewMode: false,
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.isMidpointSnappingEnabled,
-  },
-  perform(elements, appState) {
-    return {
-      appState: {
-        ...appState,
-        isMidpointSnappingEnabled: !this.checked!(appState),
-      },
-      captureUpdate: CaptureUpdateAction.NEVER,
-    };
-  },
-  checked: (appState) => appState.isMidpointSnappingEnabled,
-});

packages/excalidraw/actions/index.ts

@@ -19,6 +19,7 @@ export {
   actionChangeTextAlign,
   actionChangeVerticalAlign,
   actionChangeArrowProperties,
+  actionChangeContainerBehavior,
 } from "./actionProperties";
 
 export {
@@ -79,8 +80,6 @@ export {
 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";
 export { actionToggleObjectsSnapMode } from "./actionToggleObjectsSnapMode";
-export { actionToggleArrowBinding } from "./actionToggleArrowBinding";
-export { actionToggleMidpointSnapping } from "./actionToggleMidpointSnapping";
 
 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";

packages/excalidraw/actions/shortcuts.ts

@@ -55,8 +55,7 @@ export type ShortcutName =
   | "saveScene"
   | "imageExport"
   | "commandPalette"
-  | "searchMenu"
-  | "toolLock";
+  | "searchMenu";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   toggleTheme: [getShortcutKey("Shift+Alt+D")],
@@ -118,7 +117,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   toggleShortcuts: [getShortcutKey("?")],
   searchMenu: [getShortcutKey("CtrlOrCmd+F")],
   wrapSelectionInFrame: [],
-  toolLock: [getShortcutKey("Q")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName, idx = 0) => {

packages/excalidraw/actions/types.ts

@@ -59,8 +59,6 @@ export type ActionName =
   | "gridMode"
   | "zenMode"
   | "objectsSnapMode"
-  | "arrowBinding"
-  | "midpointSnapping"
   | "stats"
   | "changeStrokeColor"
   | "changeBackgroundColor"
@@ -69,6 +67,7 @@ export type ActionName =
   | "changeStrokeShape"
   | "changeSloppiness"
   | "changeStrokeStyle"
+  | "changeContainerBehavior"
   | "changeArrowhead"
   | "changeArrowType"
   | "changeArrowProperties"

packages/excalidraw/appState.ts

@@ -27,6 +27,7 @@ export const getDefaultAppState = (): Omit<
     showWelcomeScreen: false,
     theme: THEME.LIGHT,
     collaborators: new Map(),
+    currentChartType: "bar",
     currentItemBackgroundColor: DEFAULT_ELEMENT_PROPS.backgroundColor,
     currentItemEndArrowhead: "arrow",
     currentItemFillStyle: DEFAULT_ELEMENT_PROPS.fillStyle,
@@ -41,6 +42,7 @@ export const getDefaultAppState = (): Omit<
     currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
     currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
+    currentItemContainerBehavior: DEFAULT_ELEMENT_PROPS.containerBehavior,
     currentHoveredFontFamily: null,
     cursorButton: "up",
     activeEmbeddable: null,
@@ -70,8 +72,6 @@ export const getDefaultAppState = (): Omit<
     gridStep: DEFAULT_GRID_STEP,
     gridModeEnabled: false,
     isBindingEnabled: true,
-    bindingPreference: "enabled",
-    isMidpointSnappingEnabled: true,
     defaultSidebarDockedPreference: false,
     isLoading: false,
     isResizing: false,
@@ -84,6 +84,7 @@ export const getDefaultAppState = (): Omit<
     openPopup: null,
     openSidebar: null,
     openDialog: null,
+    pasteDialog: { shown: false, data: null },
     previousSelectedElementIds: {},
     resizingElement: null,
     scrolledOutside: false,
@@ -150,6 +151,7 @@ const APP_STATE_STORAGE_CONF = (<
   showWelcomeScreen: { browser: true, export: false, server: false },
   theme: { browser: true, export: false, server: false },
   collaborators: { browser: false, export: false, server: false },
+  currentChartType: { browser: true, export: false, server: false },
   currentItemBackgroundColor: { browser: true, export: false, server: false },
   currentItemEndArrowhead: { browser: true, export: false, server: false },
   currentItemFillStyle: { browser: true, export: false, server: false },
@@ -172,6 +174,7 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidth: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
+  currentItemContainerBehavior: { browser: true, export: false, server: false },
   currentHoveredFontFamily: { browser: false, export: false, server: false },
   cursorButton: { browser: true, export: false, server: false },
   activeEmbeddable: { browser: false, export: false, server: false },
@@ -192,9 +195,7 @@ const APP_STATE_STORAGE_CONF = (<
   gridStep: { browser: true, export: true, server: true },
   gridModeEnabled: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
-  isBindingEnabled: { browser: true, export: false, server: false },
-  bindingPreference: { browser: true, export: false, server: false },
-  isMidpointSnappingEnabled: { browser: true, export: false, server: false },
+  isBindingEnabled: { browser: false, export: false, server: false },
   defaultSidebarDockedPreference: {
     browser: true,
     export: false,
@@ -213,6 +214,7 @@ const APP_STATE_STORAGE_CONF = (<
   openPopup: { browser: false, export: false, server: false },
   openSidebar: { browser: true, export: false, server: false },
   openDialog: { browser: false, export: false, server: false },
+  pasteDialog: { browser: false, export: false, server: false },
   previousSelectedElementIds: { browser: true, export: false, server: false },
   resizingElement: { browser: false, export: false, server: false },
   scrolledOutside: { browser: true, export: false, server: false },

packages/excalidraw/charts.ts

@@ -0,0 +1,493 @@
+import { pointFrom } from "@excalidraw/math";
+
+import {
+  COLOR_PALETTE,
+  DEFAULT_CHART_COLOR_INDEX,
+  getAllColorsSpecificShade,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  VERTICAL_ALIGN,
+  randomId,
+  isDevEnv,
+  BOUND_TEXT_PADDING,
+} from "@excalidraw/common";
+
+import {
+  newTextElement,
+  newLinearElement,
+  newElement,
+} from "@excalidraw/element";
+
+import type { Radians } from "@excalidraw/math";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
+export type ChartElements = readonly NonDeletedExcalidrawElement[];
+
+const BAR_WIDTH = 32;
+const BAR_GAP = 12;
+const BAR_HEIGHT = 256;
+const GRID_OPACITY = 50;
+
+export interface Spreadsheet {
+  title: string | null;
+  labels: string[] | null;
+  values: number[];
+}
+
+export const NOT_SPREADSHEET = "NOT_SPREADSHEET";
+export const VALID_SPREADSHEET = "VALID_SPREADSHEET";
+
+type ParseSpreadsheetResult =
+  | { type: typeof NOT_SPREADSHEET; reason: string }
+  | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };
+
+/**
+ * @private exported for testing
+ */
+export const tryParseNumber = (s: string): number | null => {
+  const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s);
+  if (!match) {
+    return null;
+  }
+  return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
+};
+
+const isNumericColumn = (lines: string[][], columnIndex: number) =>
+  lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
+
+/**
+ * @private exported for testing
+ */
+export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
+  const numCols = cells[0].length;
+
+  if (numCols > 2) {
+    return { type: NOT_SPREADSHEET, reason: "More than 2 columns" };
+  }
+
+  if (numCols === 1) {
+    if (!isNumericColumn(cells, 0)) {
+      return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
+    }
+
+    const hasHeader = tryParseNumber(cells[0][0]) === null;
+    const values = (hasHeader ? cells.slice(1) : cells).map((line) =>
+      tryParseNumber(line[0]),
+    );
+
+    if (values.length < 2) {
+      return { type: NOT_SPREADSHEET, reason: "Less than two rows" };
+    }
+
+    return {
+      type: VALID_SPREADSHEET,
+      spreadsheet: {
+        title: hasHeader ? cells[0][0] : null,
+        labels: null,
+        values: values as number[],
+      },
+    };
+  }
+
+  const labelColumnNumeric = isNumericColumn(cells, 0);
+  const valueColumnNumeric = isNumericColumn(cells, 1);
+
+  if (!labelColumnNumeric && !valueColumnNumeric) {
+    return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
+  }
+
+  const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric
+    ? [0, 1]
+    : [1, 0];
+  const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null;
+  const rows = hasHeader ? cells.slice(1) : cells;
+
+  if (rows.length < 2) {
+    return { type: NOT_SPREADSHEET, reason: "Less than 2 rows" };
+  }
+
+  return {
+    type: VALID_SPREADSHEET,
+    spreadsheet: {
+      title: hasHeader ? cells[0][valueColumnIndex] : null,
+      labels: rows.map((row) => row[labelColumnIndex]),
+      values: rows.map((row) => tryParseNumber(row[valueColumnIndex])!),
+    },
+  };
+};
+
+const transposeCells = (cells: string[][]) => {
+  const nextCells: string[][] = [];
+  for (let col = 0; col < cells[0].length; col++) {
+    const nextCellRow: string[] = [];
+    for (let row = 0; row < cells.length; row++) {
+      nextCellRow.push(cells[row][col]);
+    }
+    nextCells.push(nextCellRow);
+  }
+  return nextCells;
+};
+
+export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
+  // Copy/paste from excel, spreadsheets, tsv, csv.
+  // For now we only accept 2 columns with an optional header
+
+  // Check for tab separated values
+  let lines = text
+    .trim()
+    .split("\n")
+    .map((line) => line.trim().split("\t"));
+
+  // Check for comma separated files
+  if (lines.length && lines[0].length !== 2) {
+    lines = text
+      .trim()
+      .split("\n")
+      .map((line) => line.trim().split(","));
+  }
+
+  if (lines.length === 0) {
+    return { type: NOT_SPREADSHEET, reason: "No values" };
+  }
+
+  const numColsFirstLine = lines[0].length;
+  const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine);
+
+  if (!isSpreadsheet) {
+    return {
+      type: NOT_SPREADSHEET,
+      reason: "All rows don't have same number of columns",
+    };
+  }
+
+  const result = tryParseCells(lines);
+  if (result.type !== VALID_SPREADSHEET) {
+    const transposedResults = tryParseCells(transposeCells(lines));
+    if (transposedResults.type === VALID_SPREADSHEET) {
+      return transposedResults;
+    }
+  }
+  return result;
+};
+
+const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX);
+
+// Put all the common properties here so when the whole chart is selected
+// the properties dialog shows the correct selected values
+const commonProps = {
+  fillStyle: "hachure",
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontSize: DEFAULT_FONT_SIZE,
+  opacity: 100,
+  roughness: 1,
+  strokeColor: COLOR_PALETTE.black,
+  roundness: null,
+  strokeStyle: "solid",
+  strokeWidth: 1,
+  verticalAlign: VERTICAL_ALIGN.MIDDLE,
+  locked: false,
+} as const;
+
+const getChartDimensions = (spreadsheet: Spreadsheet) => {
+  const chartWidth =
+    (BAR_WIDTH + BAR_GAP) * spreadsheet.values.length + BAR_GAP;
+  const chartHeight = BAR_HEIGHT + BAR_GAP * 2;
+  return { chartWidth, chartHeight };
+};
+
+const chartXLabels = (
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+  groupId: string,
+  backgroundColor: string,
+): ChartElements => {
+  return (
+    spreadsheet.labels?.map((label, index) => {
+      return newTextElement({
+        groupIds: [groupId],
+        backgroundColor,
+        ...commonProps,
+        text: label.length > 8 ? `${label.slice(0, 5)}...` : label,
+        x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
+        y: y + BAR_GAP / 2,
+        width: BAR_WIDTH,
+        angle: 5.87 as Radians,
+        fontSize: 16,
+        textAlign: "center",
+        verticalAlign: "top",
+      });
+    }) || []
+  );
+};
+
+const chartYLabels = (
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+  groupId: string,
+  backgroundColor: string,
+): ChartElements => {
+  const minYLabel = newTextElement({
+    groupIds: [groupId],
+    backgroundColor,
+    ...commonProps,
+    x: x - BAR_GAP,
+    y: y - BAR_GAP,
+    text: "0",
+    textAlign: "right",
+  });
+
+  const maxYLabel = newTextElement({
+    groupIds: [groupId],
+    backgroundColor,
+    ...commonProps,
+    x: x - BAR_GAP,
+    y: y - BAR_HEIGHT - minYLabel.height / 2,
+    text: Math.max(...spreadsheet.values).toLocaleString(),
+    textAlign: "right",
+  });
+
+  return [minYLabel, maxYLabel];
+};
+
+const chartLines = (
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+  groupId: string,
+  backgroundColor: string,
+): ChartElements => {
+  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
+  const xLine = newLinearElement({
+    backgroundColor,
+    groupIds: [groupId],
+    ...commonProps,
+    type: "line",
+    x,
+    y,
+    width: chartWidth,
+    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+  });
+
+  const yLine = newLinearElement({
+    backgroundColor,
+    groupIds: [groupId],
+    ...commonProps,
+    type: "line",
+    x,
+    y,
+    height: chartHeight,
+    points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
+  });
+
+  const maxLine = newLinearElement({
+    backgroundColor,
+    groupIds: [groupId],
+    ...commonProps,
+    type: "line",
+    x,
+    y: y - BAR_HEIGHT - BAR_GAP,
+    strokeStyle: "dotted",
+    width: chartWidth,
+    opacity: GRID_OPACITY,
+    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+  });
+
+  return [xLine, yLine, maxLine];
+};
+
+// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g
+const chartBaseElements = (
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+  groupId: string,
+  backgroundColor: string,
+  debug?: boolean,
+): ChartElements => {
+  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
+
+  const title = spreadsheet.title
+    ? newTextElement({
+        backgroundColor,
+        groupIds: [groupId],
+        ...commonProps,
+        text: spreadsheet.title,
+        x: x + chartWidth / 2,
+        y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
+        roundness: null,
+        textAlign: "center",
+      })
+    : null;
+
+  const debugRect = debug
+    ? newElement({
+        backgroundColor,
+        groupIds: [groupId],
+        ...commonProps,
+        type: "rectangle",
+        x,
+        y: y - chartHeight,
+        width: chartWidth,
+        height: chartHeight,
+        strokeColor: COLOR_PALETTE.black,
+        fillStyle: "solid",
+        opacity: 6,
+        containerBehavior: {
+          textFlow: "growing",
+          margin: BOUND_TEXT_PADDING,
+        },
+      })
+    : null;
+
+  return [
+    ...(debugRect ? [debugRect] : []),
+    ...(title ? [title] : []),
+    ...chartXLabels(spreadsheet, x, y, groupId, backgroundColor),
+    ...chartYLabels(spreadsheet, x, y, groupId, backgroundColor),
+    ...chartLines(spreadsheet, x, y, groupId, backgroundColor),
+  ];
+};
+
+const chartTypeBar = (
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+): ChartElements => {
+  const max = Math.max(...spreadsheet.values);
+  const groupId = randomId();
+  const backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];
+
+  const bars = spreadsheet.values.map((value, index) => {
+    const barHeight = (value / max) * BAR_HEIGHT;
+    return newElement({
+      backgroundColor,
+      groupIds: [groupId],
+      ...commonProps,
+      type: "rectangle",
+      x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP,
+      y: y - barHeight - BAR_GAP,
+      width: BAR_WIDTH,
+      height: barHeight,
+      containerBehavior: {
+        textFlow: "growing",
+        margin: BOUND_TEXT_PADDING,
+      },
+    });
+  });
+
+  return [
+    ...bars,
+    ...chartBaseElements(
+      spreadsheet,
+      x,
+      y,
+      groupId,
+      backgroundColor,
+      isDevEnv(),
+    ),
+  ];
+};
+
+const chartTypeLine = (
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+): ChartElements => {
+  const max = Math.max(...spreadsheet.values);
+  const groupId = randomId();
+  const backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];
+
+  let index = 0;
+  const points = [];
+  for (const value of spreadsheet.values) {
+    const cx = index * (BAR_WIDTH + BAR_GAP);
+    const cy = -(value / max) * BAR_HEIGHT;
+    points.push([cx, cy]);
+    index++;
+  }
+
+  const maxX = Math.max(...points.map((element) => element[0]));
+  const maxY = Math.max(...points.map((element) => element[1]));
+  const minX = Math.min(...points.map((element) => element[0]));
+  const minY = Math.min(...points.map((element) => element[1]));
+
+  const line = newLinearElement({
+    backgroundColor,
+    groupIds: [groupId],
+    ...commonProps,
+    type: "line",
+    x: x + BAR_GAP + BAR_WIDTH / 2,
+    y: y - BAR_GAP,
+    height: maxY - minY,
+    width: maxX - minX,
+    strokeWidth: 2,
+    points: points as any,
+  });
+
+  const dots = spreadsheet.values.map((value, index) => {
+    const cx = index * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2;
+    const cy = -(value / max) * BAR_HEIGHT + BAR_GAP / 2;
+    return newElement({
+      backgroundColor,
+      groupIds: [groupId],
+      ...commonProps,
+      fillStyle: "solid",
+      strokeWidth: 2,
+      type: "ellipse",
+      x: x + cx + BAR_WIDTH / 2,
+      y: y + cy - BAR_GAP * 2,
+      width: BAR_GAP,
+      height: BAR_GAP,
+      containerBehavior: {
+        textFlow: "growing",
+        margin: BOUND_TEXT_PADDING,
+      },
+    });
+  });
+
+  const lines = spreadsheet.values.map((value, index) => {
+    const cx = index * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2;
+    const cy = (value / max) * BAR_HEIGHT + BAR_GAP / 2 + BAR_GAP;
+    return newLinearElement({
+      backgroundColor,
+      groupIds: [groupId],
+      ...commonProps,
+      type: "line",
+      x: x + cx + BAR_WIDTH / 2 + BAR_GAP / 2,
+      y: y - cy,
+      height: cy,
+      strokeStyle: "dotted",
+      opacity: GRID_OPACITY,
+      points: [pointFrom(0, 0), pointFrom(0, cy)],
+    });
+  });
+
+  return [
+    ...chartBaseElements(
+      spreadsheet,
+      x,
+      y,
+      groupId,
+      backgroundColor,
+      isDevEnv(),
+    ),
+    line,
+    ...lines,
+    ...dots,
+  ];
+};
+
+export const renderSpreadsheet = (
+  chartType: string,
+  spreadsheet: Spreadsheet,
+  x: number,
+  y: number,
+): ChartElements => {
+  if (chartType === "line") {
+    return chartTypeLine(spreadsheet, x, y);
+  }
+  return chartTypeBar(spreadsheet, x, y);
+};

packages/excalidraw/charts/charts.bar.ts

@@ -1,103 +0,0 @@
-import { isDevEnv } from "@excalidraw/common";
-
-import { newElement } from "@excalidraw/element";
-
-import { commonProps } from "./charts.constants";
-import {
-  chartBaseElements,
-  chartXLabels,
-  createSeriesLegend,
-  getBackgroundColor,
-  getCartesianChartLayout,
-  getChartDimensions,
-  getColorOffset,
-  getRotatedTextElementBottom,
-  getSeriesColors,
-} from "./charts.helpers";
-
-import type { ChartElements, Spreadsheet } from "./charts.types";
-
-export const renderBarChart = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  colorSeed?: number,
-): ChartElements => {
-  const series = spreadsheet.series;
-  const layout = getCartesianChartLayout("bar", series.length);
-  const max = Math.max(
-    1,
-    ...series.flatMap((seriesData) =>
-      seriesData.values.map((value) => Math.max(0, value)),
-    ),
-  );
-  const colorOffset = getColorOffset(colorSeed);
-  const backgroundColor = getBackgroundColor(colorOffset);
-  const seriesColors = getSeriesColors(series.length, colorOffset);
-  const interBarGap =
-    series.length > 1
-      ? Math.max(1, Math.floor(layout.gap / (series.length + 1)))
-      : 0;
-  const barWidth =
-    series.length > 1
-      ? Math.max(
-          2,
-          (layout.slotWidth - interBarGap * (series.length - 1)) /
-            series.length,
-        )
-      : layout.slotWidth;
-  const clusterWidth =
-    series.length * barWidth + interBarGap * (series.length - 1);
-  const clusterOffset = (layout.slotWidth - clusterWidth) / 2;
-
-  const bars = series[0].values.flatMap((_, categoryIndex) =>
-    series.map((seriesData, seriesIndex) => {
-      const value = Math.max(0, seriesData.values[categoryIndex] ?? 0);
-      const barHeight = (value / max) * layout.chartHeight;
-      const barColor =
-        series.length > 1 ? seriesColors[seriesIndex] : backgroundColor;
-      return newElement({
-        backgroundColor: barColor,
-        ...commonProps,
-        type: "rectangle",
-        fillStyle: series.length > 1 ? "solid" : commonProps.fillStyle,
-        strokeColor: series.length > 1 ? barColor : commonProps.strokeColor,
-        x:
-          x +
-          categoryIndex * (layout.slotWidth + layout.gap) +
-          layout.gap +
-          clusterOffset +
-          seriesIndex * (barWidth + interBarGap),
-        y: y - barHeight - layout.gap,
-        width: barWidth,
-        height: barHeight,
-      });
-    }),
-  );
-
-  const baseElements = chartBaseElements(
-    spreadsheet,
-    x,
-    y,
-    backgroundColor,
-    layout,
-    max,
-    isDevEnv(),
-  );
-  const xLabels = chartXLabels(spreadsheet, x, y, backgroundColor, layout);
-  const xLabelsBottomY = Math.max(
-    y + layout.gap / 2,
-    ...xLabels.map((label) => getRotatedTextElementBottom(label)),
-  );
-  const { chartWidth } = getChartDimensions(spreadsheet, layout);
-  const seriesLegend = createSeriesLegend(
-    series,
-    seriesColors,
-    x + chartWidth / 2,
-    xLabelsBottomY,
-    y + layout.gap * 5,
-    backgroundColor,
-  );
-
-  return [...baseElements, ...bars, ...seriesLegend];
-};

packages/excalidraw/charts/charts.constants.ts

@@ -1,63 +0,0 @@
-import {
-  COLOR_PALETTE,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  VERTICAL_ALIGN,
-} from "@excalidraw/common";
-
-import type { Radians } from "@excalidraw/math";
-
-export const CARTESIAN_BASE_SLOT_WIDTH = 44;
-export const CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES = 22;
-export const CARTESIAN_BAR_SLOT_EXTRA_MAX = 66;
-export const CARTESIAN_LINE_SLOT_WIDTH = 48;
-export const CARTESIAN_GAP = 14;
-export const CARTESIAN_BAR_HEIGHT = 304;
-export const CARTESIAN_LINE_HEIGHT = 320;
-export const CARTESIAN_LABEL_ROTATION = 5.87 as Radians;
-export const CARTESIAN_LABEL_MIN_WIDTH = 28;
-export const CARTESIAN_LABEL_SLOT_PADDING = 4;
-export const CARTESIAN_LABEL_AXIS_CLEARANCE = 2;
-export const CARTESIAN_LABEL_MAX_WIDTH_BUFFER = 10;
-export const CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER = 10;
-export const CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER = 8;
-
-export const BAR_GAP = 12;
-export const BAR_HEIGHT = 256;
-export const GRID_OPACITY = 10;
-
-export const RADAR_GRID_LEVELS = 4;
-export const RADAR_LABEL_OFFSET = BAR_GAP * 2;
-export const RADAR_PADDING = BAR_GAP * 2;
-export const RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD = 100;
-export const RADAR_AXIS_LABEL_MAX_WIDTH = 140;
-export const RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD = 0.35;
-export const RADAR_AXIS_LABEL_CLEARANCE = BAR_GAP / 2;
-export const RADAR_LEGEND_SWATCH_SIZE = 20;
-export const RADAR_LEGEND_ITEM_GAP = BAR_GAP * 2;
-export const RADAR_LEGEND_TEXT_GAP = BAR_GAP;
-
-// Put all common chart element properties here so properties dialog
-// shows stable values when selecting chart groups.
-export const commonProps = {
-  fillStyle: "hachure",
-  fontFamily: DEFAULT_FONT_FAMILY,
-  fontSize: DEFAULT_FONT_SIZE,
-  opacity: 100,
-  roughness: 1,
-  strokeColor: COLOR_PALETTE.black,
-  roundness: null,
-  strokeStyle: "solid",
-  strokeWidth: 1,
-  verticalAlign: VERTICAL_ALIGN.MIDDLE,
-  locked: false,
-} as const;
-
-export type CartesianChartType = "bar" | "line";
-
-export type CartesianChartLayout = {
-  slotWidth: number;
-  gap: number;
-  chartHeight: number;
-  xLabelMaxWidth: number;
-};

packages/excalidraw/charts/charts.helpers.ts

@@ -1,865 +0,0 @@
-import { pointFrom } from "@excalidraw/math";
-
-import {
-  COLOR_PALETTE,
-  DEFAULT_CHART_COLOR_INDEX,
-  FONT_FAMILY,
-  FONT_SIZES,
-  ROUNDNESS,
-  DEFAULT_FONT_SIZE,
-  getAllColorsSpecificShade,
-  getFontString,
-  getLineHeight,
-  ROUGHNESS,
-} from "@excalidraw/common";
-
-import {
-  getApproxMinLineWidth,
-  measureText,
-  newElement,
-  newLinearElement,
-  newTextElement,
-  wrapText,
-} from "@excalidraw/element";
-
-import type {
-  ChartType,
-  ExcalidrawTextElement,
-} from "@excalidraw/element/types";
-import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-
-import {
-  BAR_GAP,
-  CARTESIAN_BAR_HEIGHT,
-  CARTESIAN_BASE_SLOT_WIDTH,
-  CARTESIAN_BAR_SLOT_EXTRA_MAX,
-  CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES,
-  CARTESIAN_GAP,
-  CARTESIAN_LABEL_AXIS_CLEARANCE,
-  CARTESIAN_LABEL_MAX_WIDTH_BUFFER,
-  CARTESIAN_LABEL_MIN_WIDTH,
-  CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER,
-  CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER,
-  CARTESIAN_LABEL_ROTATION,
-  CARTESIAN_LABEL_SLOT_PADDING,
-  CARTESIAN_LINE_HEIGHT,
-  CARTESIAN_LINE_SLOT_WIDTH,
-  GRID_OPACITY,
-  RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD,
-  RADAR_AXIS_LABEL_CLEARANCE,
-  RADAR_AXIS_LABEL_MAX_WIDTH,
-  RADAR_LABEL_OFFSET,
-  RADAR_LEGEND_ITEM_GAP,
-  RADAR_LEGEND_SWATCH_SIZE,
-  RADAR_LEGEND_TEXT_GAP,
-  RADAR_PADDING,
-  RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD,
-  BAR_HEIGHT,
-  commonProps,
-  type CartesianChartLayout,
-  type CartesianChartType,
-} from "./charts.constants";
-
-import type {
-  ChartElements,
-  Spreadsheet,
-  SpreadsheetSeries,
-} from "./charts.types";
-
-const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX);
-
-const getSpreadsheetDimensionCount = (spreadsheet: Spreadsheet) =>
-  spreadsheet.labels?.length ?? spreadsheet.series[0]?.values.length ?? 0;
-
-export const isSpreadsheetValidForChartType = (
-  spreadsheet: Spreadsheet | null,
-  chartType: ChartType,
-) => {
-  if (!spreadsheet) {
-    return false;
-  }
-
-  const dimensionCount = getSpreadsheetDimensionCount(spreadsheet);
-  if (dimensionCount < 2) {
-    return false;
-  }
-
-  if (chartType === "radar") {
-    return dimensionCount >= 3;
-  }
-
-  return true;
-};
-
-const getSeriesAwareSlotWidth = (
-  baseSlotWidth: number,
-  seriesCount: number,
-) => {
-  const extraSlotWidth =
-    seriesCount <= 1
-      ? 0
-      : Math.min(
-          CARTESIAN_BAR_SLOT_EXTRA_MAX,
-          (seriesCount - 1) * CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES,
-        );
-  return baseSlotWidth + extraSlotWidth;
-};
-
-export const getCartesianChartLayout = (
-  chartType: CartesianChartType,
-  seriesCount: number,
-): CartesianChartLayout => {
-  if (chartType === "line") {
-    const slotWidth = getSeriesAwareSlotWidth(
-      CARTESIAN_LINE_SLOT_WIDTH,
-      seriesCount,
-    );
-    return {
-      slotWidth,
-      gap: CARTESIAN_GAP,
-      chartHeight: CARTESIAN_LINE_HEIGHT,
-      xLabelMaxWidth:
-        slotWidth + CARTESIAN_GAP * 3 + CARTESIAN_LABEL_MAX_WIDTH_BUFFER,
-    };
-  }
-
-  const slotWidth = getSeriesAwareSlotWidth(
-    CARTESIAN_BASE_SLOT_WIDTH,
-    seriesCount,
-  );
-  return {
-    slotWidth,
-    gap: CARTESIAN_GAP,
-    chartHeight: CARTESIAN_BAR_HEIGHT,
-    xLabelMaxWidth:
-      slotWidth + CARTESIAN_GAP * 3 + CARTESIAN_LABEL_MAX_WIDTH_BUFFER,
-  };
-};
-
-export const getChartDimensions = (
-  spreadsheet: Spreadsheet,
-  layout: CartesianChartLayout,
-) => {
-  const chartWidth =
-    (layout.slotWidth + layout.gap) * spreadsheet.series[0].values.length +
-    layout.gap;
-  const chartHeight = layout.chartHeight + layout.gap * 2;
-  return { chartWidth, chartHeight };
-};
-
-export const getRadarDimensions = () => {
-  const chartWidth = BAR_HEIGHT + RADAR_PADDING * 2;
-  const chartHeight = BAR_HEIGHT + RADAR_PADDING * 2;
-  return { chartWidth, chartHeight };
-};
-
-const getCircularDistance = (
-  firstIndex: number,
-  secondIndex: number,
-  paletteSize: number,
-) => {
-  const absoluteDistance = Math.abs(firstIndex - secondIndex);
-  return Math.min(absoluteDistance, paletteSize - absoluteDistance);
-};
-
-export const getSeriesColors = (
-  seriesCount: number,
-  colorOffset: number,
-): readonly string[] => {
-  if (seriesCount <= 0 || bgColors.length === 0) {
-    return [];
-  }
-
-  const paletteSize = bgColors.length;
-  const startIndex = ((colorOffset % paletteSize) + paletteSize) % paletteSize;
-  const selectedIndices = [startIndex];
-  const maxUniqueColors = Math.min(seriesCount, paletteSize);
-  const availableIndices = new Set(
-    Array.from({ length: paletteSize }, (_, index) => index).filter(
-      (index) => index !== startIndex,
-    ),
-  );
-
-  while (selectedIndices.length < maxUniqueColors) {
-    let bestIndex = -1;
-    let bestMinDistance = -1;
-    let bestAverageDistance = -1;
-
-    for (const candidateIndex of availableIndices) {
-      const distances = selectedIndices.map((selectedIndex) =>
-        getCircularDistance(candidateIndex, selectedIndex, paletteSize),
-      );
-      const minDistance = Math.min(...distances);
-      const averageDistance =
-        distances.reduce((total, distance) => total + distance, 0) /
-        distances.length;
-
-      if (
-        minDistance > bestMinDistance ||
-        (minDistance === bestMinDistance &&
-          averageDistance > bestAverageDistance)
-      ) {
-        bestIndex = candidateIndex;
-        bestMinDistance = minDistance;
-        bestAverageDistance = averageDistance;
-      }
-    }
-
-    selectedIndices.push(bestIndex);
-    availableIndices.delete(bestIndex);
-  }
-
-  return Array.from(
-    { length: seriesCount },
-    (_, index) => bgColors[selectedIndices[index % selectedIndices.length]],
-  );
-};
-
-export const getColorOffset = (colorSeed?: number) => {
-  if (bgColors.length === 0) {
-    return 0;
-  }
-
-  if (typeof colorSeed !== "number" || !Number.isFinite(colorSeed)) {
-    return Math.floor(Math.random() * bgColors.length);
-  }
-
-  const seedText = colorSeed.toString();
-  let hash = 0;
-  for (let index = 0; index < seedText.length; index++) {
-    hash = (hash * 31 + seedText.charCodeAt(index)) | 0;
-  }
-  return Math.abs(hash) % bgColors.length;
-};
-
-export const getBackgroundColor = (colorOffset: number) =>
-  bgColors[colorOffset];
-
-export const getRadarValueScale = (
-  series: SpreadsheetSeries[],
-  _labelsLength: number,
-) => {
-  const allValues = series.flatMap((s) =>
-    s.values.map((value) => Math.max(0, value)),
-  );
-  const positiveValues = allValues.filter((value) => value > 0);
-  const max = Math.max(1, ...allValues);
-  const minPositive =
-    positiveValues.length > 0 ? Math.min(...positiveValues) : 1;
-  const useLogScale =
-    series.length === 1 &&
-    minPositive > 0 &&
-    max / minPositive >= RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD;
-
-  return {
-    renderSteps: false,
-    normalize: (value: number, _axisIndex: number) => {
-      const safeValue = Math.max(0, value);
-      return useLogScale
-        ? Math.log10(safeValue + 1) / Math.log10(max + 1)
-        : safeValue / max;
-    },
-  };
-};
-
-const shouldWrapRadarText = (text: string) => /\s/.test(text.trim());
-
-export const getRadarDisplayText = (
-  text: string,
-  fontString: ReturnType<typeof getFontString>,
-  maxWidth: number,
-) => {
-  return shouldWrapRadarText(text)
-    ? wrapText(text, fontString, maxWidth)
-    : text;
-};
-
-export const createRadarAxisLabels = (
-  labels: readonly string[],
-  angles: readonly number[],
-  centerX: number,
-  centerY: number,
-  radius: number,
-  backgroundColor: string,
-): {
-  axisLabels: ChartElements;
-  axisLabelTopY: number;
-  axisLabelBottomY: number;
-} => {
-  const fontFamily = FONT_FAMILY.Excalifont;
-  const fontSize = FONT_SIZES.sm;
-  const lineHeight = getLineHeight(fontFamily);
-  const fontString = getFontString({ fontFamily, fontSize });
-  const baseLabelWidth = Math.min(
-    RADAR_AXIS_LABEL_MAX_WIDTH,
-    radius * (labels.length > 8 ? 0.56 : 0.72),
-  );
-  const minLabelWidth = getApproxMinLineWidth(fontString, lineHeight);
-
-  const axisLabels = labels.map((label, index) => {
-    const angle = angles[index];
-    const longestWordWidth = Math.max(
-      0,
-      ...label
-        .trim()
-        .split(/\s+/)
-        .filter(Boolean)
-        .map((word) => measureText(word, fontString, lineHeight).width),
-    );
-    const maxLabelWidth = Math.max(
-      minLabelWidth,
-      baseLabelWidth,
-      longestWordWidth,
-    );
-    const displayLabel = getRadarDisplayText(label, fontString, maxLabelWidth);
-    const metrics = measureText(displayLabel, fontString, lineHeight);
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-
-    const textAlign: "left" | "center" | "right" =
-      cos > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
-        ? "left"
-        : cos < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
-        ? "right"
-        : "center";
-
-    // Keep labels outside the radar ring by projecting text extents
-    // onto the axis direction.
-    const centerAlignedXExtent = textAlign === "center" ? metrics.width / 2 : 0;
-    const projectedExtent =
-      Math.abs(cos) * centerAlignedXExtent +
-      Math.abs(sin) * (metrics.height / 2);
-    const radialOffset =
-      RADAR_LABEL_OFFSET + projectedExtent + RADAR_AXIS_LABEL_CLEARANCE;
-    const anchorX = centerX + cos * (radius + radialOffset);
-    const anchorY = centerY + sin * (radius + radialOffset);
-
-    const yNudge =
-      sin > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
-        ? BAR_GAP / 3
-        : sin < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
-        ? -BAR_GAP / 3
-        : 0;
-
-    return newTextElement({
-      backgroundColor,
-      ...commonProps,
-      text: displayLabel,
-      originalText: label,
-      x: anchorX,
-      y: anchorY + yNudge,
-      fontFamily,
-      fontSize,
-      lineHeight,
-      textAlign,
-      verticalAlign: "middle",
-    });
-  });
-
-  const axisLabelTopY = Math.min(...axisLabels.map((axisLabel) => axisLabel.y));
-  const axisLabelBottomY = Math.max(
-    ...axisLabels.map((axisLabel) => axisLabel.y + axisLabel.height),
-  );
-  return { axisLabels, axisLabelTopY, axisLabelBottomY };
-};
-
-export const createSeriesLegend = (
-  series: SpreadsheetSeries[],
-  seriesColors: readonly string[],
-  centerX: number,
-  minLegendTopY: number,
-  fallbackLegendY: number,
-  backgroundColor: string,
-): ChartElements => {
-  if (series.length <= 1) {
-    return [];
-  }
-
-  const fontFamily = FONT_FAMILY["Lilita One"];
-  const fontSize = FONT_SIZES.lg;
-  const lineHeight = getLineHeight(fontFamily);
-  const fontString = getFontString({ fontFamily, fontSize });
-  const legendItems = series.map((seriesItem, index) => {
-    const label = seriesItem.title?.trim() || `Series ${index + 1}`;
-    const displayLabel = getRadarDisplayText(label, fontString, BAR_HEIGHT);
-    const metrics = measureText(displayLabel, fontString, lineHeight);
-    const itemWidth =
-      RADAR_LEGEND_SWATCH_SIZE + RADAR_LEGEND_TEXT_GAP + metrics.width;
-    return {
-      label,
-      displayLabel,
-      color: seriesColors[index],
-      width: itemWidth,
-      height: metrics.height,
-    };
-  });
-  const maxLegendHalfHeight = Math.max(
-    RADAR_LEGEND_SWATCH_SIZE / 2,
-    ...legendItems.map((item) => item.height / 2),
-  );
-  const legendY = Math.max(
-    fallbackLegendY,
-    minLegendTopY + maxLegendHalfHeight + RADAR_LABEL_OFFSET,
-  );
-
-  const pillPaddingX = RADAR_LEGEND_ITEM_GAP;
-  const pillPaddingY = RADAR_LEGEND_SWATCH_SIZE * 0.6;
-  const totalLegendWidth =
-    legendItems.reduce((total, item) => total + item.width, 0) +
-    RADAR_LEGEND_ITEM_GAP * Math.max(0, legendItems.length - 1);
-  const pillWidth = totalLegendWidth + pillPaddingX * 2;
-  const pillHeight = maxLegendHalfHeight * 2 + pillPaddingY * 2;
-
-  const legendElements: NonDeletedExcalidrawElement[] = [];
-
-  // rounded pill background
-  legendElements.push(
-    newElement({
-      ...commonProps,
-      backgroundColor: "transparent",
-      type: "rectangle",
-      fillStyle: "solid",
-      strokeColor: COLOR_PALETTE.black,
-      x: centerX - pillWidth / 2,
-      y: legendY - pillHeight / 2,
-      width: pillWidth,
-      height: pillHeight,
-      roughness: ROUGHNESS.architect,
-      roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-    }),
-  );
-
-  let cursorX = centerX - totalLegendWidth / 2;
-
-  legendItems.forEach((item) => {
-    // solid filled swatch
-    legendElements.push(
-      newElement({
-        ...commonProps,
-        backgroundColor: item.color,
-        type: "rectangle",
-        x: cursorX,
-        y: legendY - RADAR_LEGEND_SWATCH_SIZE / 2,
-        width: RADAR_LEGEND_SWATCH_SIZE,
-        height: RADAR_LEGEND_SWATCH_SIZE,
-        fillStyle: "solid",
-        strokeColor: item.color,
-        roughness: ROUGHNESS.architect,
-        roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-      }),
-    );
-
-    // label in default (black) color
-    legendElements.push(
-      newTextElement({
-        ...commonProps,
-        text: item.displayLabel,
-        originalText: item.label,
-        autoResize: false,
-        x: cursorX + RADAR_LEGEND_SWATCH_SIZE + RADAR_LEGEND_TEXT_GAP,
-        y: legendY,
-        fontFamily,
-        fontSize,
-        lineHeight,
-        textAlign: "left",
-        verticalAlign: "middle",
-      }),
-    );
-
-    cursorX += item.width + RADAR_LEGEND_ITEM_GAP;
-  });
-
-  return legendElements;
-};
-
-const ellipsifyTextToWidth = (
-  text: string,
-  maxWidth: number,
-  fontString: ReturnType<typeof getFontString>,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
-  if (measureText(text, fontString, lineHeight).width <= maxWidth) {
-    return text;
-  }
-
-  let end = text.length;
-  while (end > 1) {
-    const candidate = `${text.slice(0, end)}...`;
-    if (measureText(candidate, fontString, lineHeight).width <= maxWidth) {
-      return candidate;
-    }
-    end--;
-  }
-
-  return text[0] ? `${text[0]}...` : text;
-};
-
-const wrapOrEllipsifyTextToWidth = (
-  text: string,
-  maxWidth: number,
-  fontString: ReturnType<typeof getFontString>,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
-  if (measureText(text, fontString, lineHeight).width <= maxWidth) {
-    return { wrapped: false, text };
-  }
-
-  const words = text.trim().split(/\s+/).filter(Boolean);
-  if (words.length > 1) {
-    const hasLongWord = words.some((word) => {
-      return measureText(word, fontString, lineHeight).width > maxWidth;
-    });
-    if (
-      !hasLongWord &&
-      maxWidth >= getApproxMinLineWidth(fontString, lineHeight)
-    ) {
-      return { wrapped: true, text: wrapText(text, fontString, maxWidth) };
-    }
-  }
-
-  return {
-    wrapped: false,
-    text: ellipsifyTextToWidth(text, maxWidth, fontString, lineHeight),
-  };
-};
-
-const getRotatedBoundingBox = (
-  width: number,
-  height: number,
-  angle: number,
-) => {
-  const cos = Math.abs(Math.cos(angle));
-  const sin = Math.abs(Math.sin(angle));
-  return {
-    width: width * cos + height * sin,
-    height: width * sin + height * cos,
-  };
-};
-
-type CartesianAxisLabelSpec = {
-  originalText: string;
-  text: string;
-  wrapped: boolean;
-  metrics: ReturnType<typeof measureText>;
-  rotatedWidth: number;
-  rotatedHeight: number;
-};
-
-const isEllipsifiedLabel = (text: string) => text.includes("...");
-
-const getCartesianAxisLabelSpec = (
-  label: string,
-  maxLabelWidth: number,
-  maxRotatedWidth: number,
-  fontString: ReturnType<typeof getFontString>,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-): CartesianAxisLabelSpec => {
-  const minWidth = Math.max(
-    CARTESIAN_LABEL_MIN_WIDTH,
-    Math.ceil(getApproxMinLineWidth(fontString, lineHeight)),
-  );
-  const maxWidth = Math.max(minWidth, Math.floor(maxLabelWidth));
-  const candidateWidths: number[] = [];
-  for (let width = maxWidth; width >= minWidth; width -= 4) {
-    candidateWidths.push(width);
-  }
-  if (candidateWidths[candidateWidths.length - 1] !== minWidth) {
-    candidateWidths.push(minWidth);
-  }
-
-  const getRank = (spec: CartesianAxisLabelSpec) => {
-    const ellipsified = isEllipsifiedLabel(spec.text);
-    const visibleChars = spec.text
-      .replace(/\.\.\./g, "")
-      .replace(/\n/g, "").length;
-    const lineCount = spec.text.split("\n").length;
-    return {
-      ellipsified,
-      visibleChars,
-      lineCount,
-    };
-  };
-
-  const shouldPrefer = (
-    candidate: CartesianAxisLabelSpec,
-    current: CartesianAxisLabelSpec,
-  ) => {
-    const candidateRank = getRank(candidate);
-    const currentRank = getRank(current);
-    if (candidateRank.ellipsified !== currentRank.ellipsified) {
-      return !candidateRank.ellipsified;
-    }
-    if (candidateRank.visibleChars !== currentRank.visibleChars) {
-      return candidateRank.visibleChars > currentRank.visibleChars;
-    }
-    if (candidateRank.lineCount !== currentRank.lineCount) {
-      return candidateRank.lineCount < currentRank.lineCount;
-    }
-    return candidate.rotatedHeight < current.rotatedHeight;
-  };
-
-  let bestFit: CartesianAxisLabelSpec | null = null;
-  let bestOverflowAny: {
-    overflow: number;
-    spec: CartesianAxisLabelSpec;
-  } | null = null;
-  let bestOverflowNonEllipsified: {
-    overflow: number;
-    spec: CartesianAxisLabelSpec;
-  } | null = null;
-
-  for (const width of candidateWidths) {
-    const { wrapped, text } = wrapOrEllipsifyTextToWidth(
-      label,
-      width,
-      fontString,
-      lineHeight,
-    );
-    const metrics = measureText(text, fontString, lineHeight);
-    const rotated = getRotatedBoundingBox(
-      metrics.width,
-      metrics.height,
-      CARTESIAN_LABEL_ROTATION,
-    );
-    const spec = {
-      originalText: label,
-      text,
-      metrics,
-      rotatedWidth: rotated.width,
-      rotatedHeight: rotated.height,
-      wrapped,
-    };
-    const overflow = rotated.width - maxRotatedWidth;
-    if (overflow <= 0) {
-      if (!bestFit || shouldPrefer(spec, bestFit)) {
-        bestFit = spec;
-      }
-      continue;
-    }
-    if (
-      !bestOverflowAny ||
-      overflow < bestOverflowAny.overflow ||
-      (overflow === bestOverflowAny.overflow &&
-        shouldPrefer(spec, bestOverflowAny.spec))
-    ) {
-      bestOverflowAny = { overflow, spec };
-    }
-    if (
-      !isEllipsifiedLabel(spec.text) &&
-      (!bestOverflowNonEllipsified ||
-        overflow < bestOverflowNonEllipsified.overflow ||
-        (overflow === bestOverflowNonEllipsified.overflow &&
-          shouldPrefer(spec, bestOverflowNonEllipsified.spec)))
-    ) {
-      bestOverflowNonEllipsified = { overflow, spec };
-    }
-  }
-
-  if (bestFit) {
-    return bestFit;
-  }
-
-  if (
-    bestOverflowNonEllipsified &&
-    bestOverflowAny &&
-    bestOverflowNonEllipsified.overflow <=
-      bestOverflowAny.overflow + CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER
-  ) {
-    return bestOverflowNonEllipsified.spec;
-  }
-
-  return bestOverflowAny!.spec;
-};
-
-export const getRotatedTextElementBottom = (
-  element: NonDeletedExcalidrawElement,
-) => {
-  if (element.type !== "text") {
-    return element.y + element.height;
-  }
-  const rotated = getRotatedBoundingBox(
-    element.width,
-    element.height,
-    element.angle,
-  );
-  return element.y + element.height / 2 + rotated.height / 2;
-};
-
-export const chartXLabels = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  backgroundColor: string,
-  layout: CartesianChartLayout,
-): ChartElements => {
-  const fontFamily = commonProps.fontFamily;
-  const fontSize = FONT_SIZES.sm;
-  const lineHeight = getLineHeight(fontFamily);
-  const fontString = getFontString({ fontFamily, fontSize });
-  const maxRotatedWidth = Math.max(
-    1,
-    layout.slotWidth +
-      layout.gap -
-      CARTESIAN_LABEL_SLOT_PADDING * 2 +
-      CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER,
-  );
-  const axisY = y;
-
-  return (
-    spreadsheet.labels?.map((label, index) => {
-      const labelSpec = getCartesianAxisLabelSpec(
-        label,
-        layout.xLabelMaxWidth,
-        maxRotatedWidth,
-        fontString,
-        lineHeight,
-      );
-      const centerX =
-        x +
-        index * (layout.slotWidth + layout.gap) +
-        layout.gap +
-        layout.slotWidth / 2;
-      const labelY =
-        axisY +
-        CARTESIAN_LABEL_AXIS_CLEARANCE +
-        (labelSpec.rotatedHeight - labelSpec.metrics.height) / 2;
-
-      return newTextElement({
-        backgroundColor,
-        ...commonProps,
-        text: labelSpec.text,
-        originalText: labelSpec.wrapped ? label : labelSpec.text,
-        autoResize: !labelSpec.wrapped,
-        x: centerX,
-        y: labelY,
-        angle: CARTESIAN_LABEL_ROTATION,
-        fontSize,
-        lineHeight,
-        textAlign: "center",
-        verticalAlign: "top",
-      });
-    }) || []
-  );
-};
-
-const chartYLabels = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  backgroundColor: string,
-  layout: CartesianChartLayout,
-  maxValue = Math.max(...spreadsheet.series[0].values),
-): ChartElements => {
-  const minYLabel = newTextElement({
-    backgroundColor,
-    ...commonProps,
-    x: x - layout.gap,
-    y: y - layout.gap,
-    text: "0",
-    textAlign: "right",
-  });
-
-  const maxYLabel = newTextElement({
-    backgroundColor,
-    ...commonProps,
-    x: x - layout.gap,
-    y: y - layout.chartHeight - minYLabel.height / 2,
-    text: maxValue.toLocaleString(),
-    textAlign: "right",
-  });
-
-  return [minYLabel, maxYLabel];
-};
-
-const chartLines = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  backgroundColor: string,
-  layout: CartesianChartLayout,
-): ChartElements => {
-  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet, layout);
-  const xLine = newLinearElement({
-    backgroundColor,
-    ...commonProps,
-    type: "line",
-    x,
-    y,
-    width: chartWidth,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
-  });
-
-  const yLine = newLinearElement({
-    backgroundColor,
-    ...commonProps,
-    type: "line",
-    x,
-    y,
-    height: chartHeight,
-    points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
-  });
-
-  const maxLine = newLinearElement({
-    backgroundColor,
-    ...commonProps,
-    type: "line",
-    x,
-    y: y - layout.chartHeight - layout.gap,
-    strokeStyle: "dotted",
-    width: chartWidth,
-    opacity: GRID_OPACITY,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
-  });
-
-  return [xLine, yLine, maxLine];
-};
-
-// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g
-export const chartBaseElements = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  backgroundColor: string,
-  layout: CartesianChartLayout,
-  maxValue = Math.max(...spreadsheet.series[0].values),
-  debug?: boolean,
-): ChartElements => {
-  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet, layout);
-
-  const title = spreadsheet.title
-    ? newTextElement({
-        backgroundColor,
-        ...commonProps,
-        text: spreadsheet.title,
-        x: x + chartWidth / 2,
-        y: y - layout.chartHeight - layout.gap * 2 - DEFAULT_FONT_SIZE,
-        roundness: null,
-        textAlign: "center",
-        fontSize: FONT_SIZES.xl,
-        fontFamily: FONT_FAMILY["Lilita One"],
-      })
-    : null;
-
-  const debugRect = debug
-    ? newElement({
-        backgroundColor,
-        ...commonProps,
-        type: "rectangle",
-        x,
-        y: y - chartHeight,
-        width: chartWidth,
-        height: chartHeight,
-        strokeColor: COLOR_PALETTE.black,
-        fillStyle: "solid",
-        opacity: 6,
-      })
-    : null;
-
-  return [
-    ...(debugRect ? [debugRect] : []),
-    ...(title ? [title] : []),
-    ...chartXLabels(spreadsheet, x, y, backgroundColor, layout),
-    ...chartYLabels(spreadsheet, x, y, backgroundColor, layout, maxValue),
-    ...chartLines(spreadsheet, x, y, backgroundColor, layout),
-  ];
-};

packages/excalidraw/charts/charts.line.ts

@@ -1,130 +0,0 @@
-import { pointFrom } from "@excalidraw/math";
-
-import { isDevEnv } from "@excalidraw/common";
-
-import { newElement, newLinearElement } from "@excalidraw/element";
-
-import type { LocalPoint } from "@excalidraw/math";
-
-import { GRID_OPACITY, commonProps } from "./charts.constants";
-import {
-  chartBaseElements,
-  chartXLabels,
-  createSeriesLegend,
-  getBackgroundColor,
-  getCartesianChartLayout,
-  getChartDimensions,
-  getColorOffset,
-  getRotatedTextElementBottom,
-  getSeriesColors,
-} from "./charts.helpers";
-
-import type { ChartElements, Spreadsheet } from "./charts.types";
-
-export const renderLineChart = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  colorSeed?: number,
-): ChartElements => {
-  const series = spreadsheet.series;
-  const layout = getCartesianChartLayout("line", series.length);
-  const max = Math.max(1, ...series.flatMap((seriesData) => seriesData.values));
-  const colorOffset = getColorOffset(colorSeed);
-  const backgroundColor = getBackgroundColor(colorOffset);
-  const seriesColors = getSeriesColors(series.length, colorOffset);
-
-  const lines = series.map((seriesData, seriesIndex) => {
-    const points = seriesData.values.map((value, valueIndex) =>
-      pointFrom<LocalPoint>(
-        valueIndex * (layout.slotWidth + layout.gap),
-        -(value / max) * layout.chartHeight,
-      ),
-    );
-
-    const maxX = Math.max(...points.map((point) => point[0]));
-    const maxY = Math.max(...points.map((point) => point[1]));
-    const minX = Math.min(...points.map((point) => point[0]));
-    const minY = Math.min(...points.map((point) => point[1]));
-
-    return newLinearElement({
-      backgroundColor: "transparent",
-      ...commonProps,
-      type: "line",
-      x: x + layout.gap + layout.slotWidth / 2,
-      y: y - layout.gap,
-      height: maxY - minY,
-      width: maxX - minX,
-      strokeColor: seriesColors[seriesIndex],
-      strokeWidth: 2,
-      points,
-    });
-  });
-
-  const dots = series.flatMap((seriesData, seriesIndex) =>
-    seriesData.values.map((value, valueIndex) => {
-      const cx = valueIndex * (layout.slotWidth + layout.gap) + layout.gap / 2;
-      const cy = -(value / max) * layout.chartHeight + layout.gap / 2;
-      return newElement({
-        backgroundColor: seriesColors[seriesIndex],
-        ...commonProps,
-        fillStyle: "solid",
-        strokeColor: seriesColors[seriesIndex],
-        strokeWidth: 2,
-        type: "ellipse",
-        x: x + cx + layout.slotWidth / 2,
-        y: y + cy - layout.gap * 2,
-        width: layout.gap,
-        height: layout.gap,
-      });
-    }),
-  );
-
-  const guideValues = series[0].values.map((_, valueIndex) =>
-    Math.max(
-      0,
-      ...series.map((seriesData) => seriesData.values[valueIndex] ?? 0),
-    ),
-  );
-  const guides = guideValues.map((value, valueIndex) => {
-    const cx = valueIndex * (layout.slotWidth + layout.gap) + layout.gap / 2;
-    const cy = (value / max) * layout.chartHeight + layout.gap / 2 + layout.gap;
-    return newLinearElement({
-      backgroundColor,
-      ...commonProps,
-      type: "line",
-      x: x + cx + layout.slotWidth / 2 + layout.gap / 2,
-      y: y - cy,
-      height: cy,
-      strokeStyle: "dotted",
-      opacity: GRID_OPACITY,
-      points: [pointFrom(0, 0), pointFrom(0, cy)],
-    });
-  });
-
-  const baseElements = chartBaseElements(
-    spreadsheet,
-    x,
-    y,
-    backgroundColor,
-    layout,
-    max,
-    isDevEnv(),
-  );
-  const xLabels = chartXLabels(spreadsheet, x, y, backgroundColor, layout);
-  const xLabelsBottomY = Math.max(
-    y + layout.gap / 2,
-    ...xLabels.map((label) => getRotatedTextElementBottom(label)),
-  );
-  const { chartWidth } = getChartDimensions(spreadsheet, layout);
-  const seriesLegend = createSeriesLegend(
-    series,
-    seriesColors,
-    x + chartWidth / 2,
-    xLabelsBottomY,
-    y + layout.gap * 5,
-    backgroundColor,
-  );
-
-  return [...baseElements, ...lines, ...guides, ...dots, ...seriesLegend];
-};

packages/excalidraw/charts/charts.parse.ts

@@ -1,174 +0,0 @@
-import { type ParseSpreadsheetResult } from "./charts.types";
-
-/**
- * @private exported for testing
- */
-export const tryParseNumber = (s: string): number | null => {
-  const match =
-    /^([-+]?)[$\u20AC\u00A3\u00A5\u20A9]?([-+]?)([\d.,]+)[%]?$/.exec(s);
-  if (!match) {
-    return null;
-  }
-  return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
-};
-
-const isNumericColumn = (lines: string[][], columnIndex: number) =>
-  lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
-
-/**
- * @private exported for testing
- */
-export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
-  const numCols = cells[0].length;
-
-  if (numCols > 2) {
-    const hasHeader = cells[0].every((cell) => tryParseNumber(cell) === null);
-    const rows = hasHeader ? cells.slice(1) : cells;
-
-    if (rows.length < 1) {
-      return { ok: false, reason: "No data rows" };
-    }
-
-    const invalidNumericColumn = rows.some((row) =>
-      row.slice(1).some((value) => tryParseNumber(value) === null),
-    );
-    if (invalidNumericColumn) {
-      return { ok: false, reason: "Value is not numeric" };
-    }
-
-    // When there are more value columns than data rows, the data is in
-    // "wide" format — transpose so columns become labels (dimensions)
-    // and rows become series. This enables e.g. radar charts for wide data.
-    const numValueCols = numCols - 1;
-    if (numValueCols > rows.length) {
-      const labels = hasHeader ? cells[0].slice(1).map((h) => h.trim()) : null;
-      const series = rows.map((row) => ({
-        title: row[0]?.trim() || null,
-        values: row.slice(1).map((v) => tryParseNumber(v)!),
-      }));
-      const title =
-        series.length === 1
-          ? series[0].title
-          : hasHeader
-          ? cells[0][0].trim() || null
-          : null;
-      return {
-        ok: true,
-        data: { title, labels, series },
-      };
-    }
-
-    const series = cells[0].slice(1).map((seriesTitle, index) => {
-      const valueColumnIndex = index + 1;
-      const fallbackTitle = `Series ${valueColumnIndex}`;
-      return {
-        title: hasHeader ? seriesTitle.trim() || fallbackTitle : fallbackTitle,
-        values: rows.map((row) => tryParseNumber(row[valueColumnIndex])!),
-      };
-    });
-
-    return {
-      ok: true,
-      data: {
-        title: hasHeader ? cells[0][0].trim() || null : null,
-        labels: rows.map((row) => row[0]),
-        series,
-      },
-    };
-  }
-
-  if (numCols === 1) {
-    if (!isNumericColumn(cells, 0)) {
-      return { ok: false, reason: "Value is not numeric" };
-    }
-
-    const hasHeader = tryParseNumber(cells[0][0]) === null;
-    const title = hasHeader ? cells[0][0] : null;
-    const values = (hasHeader ? cells.slice(1) : cells).map((line) =>
-      tryParseNumber(line[0]),
-    );
-
-    if (values.length < 2) {
-      return { ok: false, reason: "Less than two rows" };
-    }
-
-    return {
-      ok: true,
-      data: {
-        title,
-        labels: null,
-        series: [{ title, values: values as number[] }],
-      },
-    };
-  }
-
-  const hasHeader = tryParseNumber(cells[0][1]) === null;
-  const rows = hasHeader ? cells.slice(1) : cells;
-
-  if (rows.length < 2) {
-    return { ok: false, reason: "Less than 2 rows" };
-  }
-
-  const invalidNumericColumn = rows.some(
-    (row) => tryParseNumber(row[1]) === null,
-  );
-  if (invalidNumericColumn) {
-    return { ok: false, reason: "Value is not numeric" };
-  }
-
-  const title = hasHeader ? cells[0][1] : null;
-
-  return {
-    ok: true,
-    data: {
-      title,
-      labels: rows.map((row) => row[0]),
-      series: [{ title, values: rows.map((row) => tryParseNumber(row[1])!) }],
-    },
-  };
-};
-
-export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
-  // Copy/paste from excel, spreadsheets, TSV, CSV, semicolon-separated.
-  const parseDelimitedLines = (delimiter: "\t" | "," | ";") =>
-    text
-      .replace(/\r\n?/g, "\n")
-      .split("\n")
-      .filter((line) => line.trim().length > 0)
-      .map((line) => line.split(delimiter).map((cell) => cell.trim()));
-
-  // Score each delimiter: prefer consistent column counts with the most columns.
-  // A delimiter that produces all single-column rows likely isn't the right one.
-  const candidates = (["\t", ",", ";"] as const).map((delimiter) => {
-    const parsed = parseDelimitedLines(delimiter);
-    const numCols = parsed[0]?.length ?? 0;
-    const isConsistent =
-      parsed.length > 0 && parsed.every((line) => line.length === numCols);
-    return { delimiter, parsed, numCols, isConsistent };
-  });
-
-  // Prefer: consistent + most columns. Among ties, tab > comma > semicolon
-  // (the array order already encodes this priority).
-  const best =
-    candidates.find((c) => c.isConsistent && c.numCols > 1) ??
-    candidates.find((c) => c.isConsistent) ??
-    candidates[0];
-
-  const lines = best.parsed;
-
-  if (lines.length === 0) {
-    return { ok: false, reason: "No values" };
-  }
-
-  const numColsFirstLine = lines[0].length;
-  const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine);
-
-  if (!isSpreadsheet) {
-    return {
-      ok: false,
-      reason: "All rows don't have same number of columns",
-    };
-  }
-
-  return tryParseCells(lines);
-};

packages/excalidraw/charts/charts.radar.ts

@@ -1,199 +0,0 @@
-import { pointFrom } from "@excalidraw/math";
-
-import {
-  FONT_FAMILY,
-  FONT_SIZES,
-  getFontString,
-  getLineHeight,
-  ROUGHNESS,
-} from "@excalidraw/common";
-
-import {
-  measureText,
-  newLinearElement,
-  newTextElement,
-} from "@excalidraw/element";
-
-import type { LocalPoint } from "@excalidraw/math";
-
-import {
-  BAR_GAP,
-  BAR_HEIGHT,
-  GRID_OPACITY,
-  RADAR_GRID_LEVELS,
-  RADAR_LABEL_OFFSET,
-  commonProps,
-} from "./charts.constants";
-import {
-  createRadarAxisLabels,
-  createSeriesLegend,
-  getBackgroundColor,
-  getColorOffset,
-  getRadarDimensions,
-  getRadarDisplayText,
-  getRadarValueScale,
-  getSeriesColors,
-  isSpreadsheetValidForChartType,
-} from "./charts.helpers";
-
-import type { ChartElements, Spreadsheet } from "./charts.types";
-
-export const renderRadarChart = (
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  colorSeed?: number,
-): ChartElements | null => {
-  if (!isSpreadsheetValidForChartType(spreadsheet, "radar")) {
-    return null;
-  }
-
-  const labels =
-    spreadsheet.labels ??
-    spreadsheet.series[0].values.map((_, index) => `Value ${index + 1}`);
-
-  const series = spreadsheet.series;
-  const { normalize, renderSteps } = getRadarValueScale(series, labels.length);
-  const colorOffset = getColorOffset(colorSeed);
-  const backgroundColor = getBackgroundColor(colorOffset);
-  const seriesColors = getSeriesColors(series.length, colorOffset);
-  const { chartWidth, chartHeight } = getRadarDimensions();
-  const centerX = x + chartWidth / 2;
-  const centerY = y - chartHeight / 2;
-  const radius = BAR_HEIGHT / 2;
-  const angles = labels.map(
-    (_, index) => -Math.PI / 2 + (Math.PI * 2 * index) / labels.length,
-  );
-
-  const { axisLabels, axisLabelTopY, axisLabelBottomY } = createRadarAxisLabels(
-    labels,
-    angles,
-    centerX,
-    centerY,
-    radius,
-    backgroundColor,
-  );
-
-  const titleFontFamily = FONT_FAMILY["Lilita One"];
-  const titleFontSize = FONT_SIZES.xl;
-  const titleLineHeight = getLineHeight(titleFontFamily);
-  const titleFontString = getFontString({
-    fontFamily: titleFontFamily,
-    fontSize: titleFontSize,
-  });
-  const titleText = spreadsheet.title
-    ? getRadarDisplayText(
-        spreadsheet.title,
-        titleFontString,
-        chartWidth + RADAR_LABEL_OFFSET * 2,
-      )
-    : null;
-  const titleTextMetrics = titleText
-    ? measureText(titleText, titleFontString, titleLineHeight)
-    : null;
-  const title = titleText
-    ? newTextElement({
-        backgroundColor,
-        ...commonProps,
-        text: titleText,
-        originalText: spreadsheet.title ?? titleText,
-        x: x + chartWidth / 2,
-        y: axisLabelTopY - RADAR_LABEL_OFFSET - titleTextMetrics!.height / 2,
-        fontFamily: titleFontFamily,
-        fontSize: titleFontSize,
-        lineHeight: titleLineHeight,
-        textAlign: "center",
-      })
-    : null;
-
-  const radarGridLines = renderSteps
-    ? Array.from({ length: RADAR_GRID_LEVELS }, (_, levelIndex) => {
-        const levelRatio = (levelIndex + 1) / RADAR_GRID_LEVELS;
-        const levelRadius = radius * levelRatio;
-        const points = angles.map((angle) =>
-          pointFrom<LocalPoint>(
-            Math.cos(angle) * levelRadius,
-            Math.sin(angle) * levelRadius,
-          ),
-        );
-        points.push(pointFrom(points[0][0], points[0][1]));
-
-        return newLinearElement({
-          backgroundColor: "transparent",
-          ...commonProps,
-          type: "line",
-          x: centerX,
-          y: centerY,
-          width: levelRadius * 2,
-          height: levelRadius * 2,
-          strokeStyle: "solid",
-          roughness: ROUGHNESS.architect,
-          opacity: GRID_OPACITY,
-          polygon: true,
-          points,
-        });
-      })
-    : [];
-
-  const spokes = angles.map((angle) => {
-    const px = Math.cos(angle) * radius;
-    const py = Math.sin(angle) * radius;
-    return newLinearElement({
-      backgroundColor: "transparent",
-      ...commonProps,
-      type: "line",
-      x: centerX,
-      y: centerY,
-      width: Math.abs(px),
-      height: Math.abs(py),
-      strokeStyle: "solid",
-      roughness: ROUGHNESS.architect,
-      opacity: GRID_OPACITY,
-      points: [pointFrom(0, 0), pointFrom(px, py)],
-    });
-  });
-
-  const seriesPolygons = series.map((seriesData, index) => {
-    const points = angles.map((angle, axisIndex) => {
-      const value = seriesData.values[axisIndex] ?? 0;
-      const pointRadius = normalize(value, axisIndex) * radius;
-      return pointFrom<LocalPoint>(
-        Math.cos(angle) * pointRadius,
-        Math.sin(angle) * pointRadius,
-      );
-    });
-    points.push(pointFrom(points[0][0], points[0][1]));
-
-    return newLinearElement({
-      backgroundColor: "transparent",
-      ...commonProps,
-      type: "line",
-      x: centerX,
-      y: centerY,
-      width: radius * 2,
-      height: radius * 2,
-      strokeColor: seriesColors[index],
-      strokeWidth: 2,
-      polygon: true,
-      points,
-    });
-  });
-
-  const seriesLegend = createSeriesLegend(
-    series,
-    seriesColors,
-    centerX,
-    axisLabelBottomY,
-    y + BAR_GAP * 5,
-    backgroundColor,
-  );
-
-  return [
-    ...(title ? [title] : []),
-    ...axisLabels,
-    ...radarGridLines,
-    ...spokes,
-    ...seriesPolygons,
-    ...seriesLegend,
-  ];
-};

packages/excalidraw/charts/charts.types.ts

@@ -1,18 +0,0 @@
-import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-
-export type ChartElements = readonly NonDeletedExcalidrawElement[];
-
-export interface Spreadsheet {
-  title: string | null;
-  labels: string[] | null;
-  series: SpreadsheetSeries[];
-}
-
-export interface SpreadsheetSeries {
-  title: string | null;
-  values: number[];
-}
-
-export type ParseSpreadsheetResult =
-  | { ok: false; reason: string }
-  | { ok: true; data: Spreadsheet };

packages/excalidraw/charts/index.ts

@@ -1,38 +0,0 @@
-import type { ChartType } from "@excalidraw/element/types";
-
-import { renderBarChart } from "./charts.bar";
-import { renderLineChart } from "./charts.line";
-import {
-  tryParseCells,
-  tryParseNumber,
-  tryParseSpreadsheet,
-} from "./charts.parse";
-import { renderRadarChart } from "./charts.radar";
-
-import type { ChartElements, Spreadsheet } from "./charts.types";
-
-export {
-  type ParseSpreadsheetResult,
-  type Spreadsheet,
-  type SpreadsheetSeries,
-  type ChartElements,
-} from "./charts.types";
-
-export { isSpreadsheetValidForChartType } from "./charts.helpers";
-export { tryParseCells, tryParseNumber, tryParseSpreadsheet };
-
-export const renderSpreadsheet = (
-  chartType: ChartType,
-  spreadsheet: Spreadsheet,
-  x: number,
-  y: number,
-  colorSeed?: number,
-): ChartElements | null => {
-  if (chartType === "line") {
-    return renderLineChart(spreadsheet, x, y, colorSeed);
-  }
-  if (chartType === "radar") {
-    return renderRadarChart(spreadsheet, x, y, colorSeed);
-  }
-  return renderBarChart(spreadsheet, x, y, colorSeed);
-};

packages/excalidraw/clipboard.test.ts

@@ -155,4 +155,67 @@ describe("parseClipboard()", () => {
       },
     ]);
   });
+
+  it("should parse spreadsheet from either text/plain and text/html", async () => {
+    let clipboardData;
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      await parseDataTransferEvent(
+        createPasteEvent({
+          types: {
+            "text/plain": `a	b
+            1	2
+            4	5
+            7	10`,
+          },
+        }),
+      ),
+    );
+    expect(clipboardData.spreadsheet).toEqual({
+      title: "b",
+      labels: ["1", "4", "7"],
+      values: [2, 5, 10],
+    });
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      await parseDataTransferEvent(
+        createPasteEvent({
+          types: {
+            "text/html": `a	b
+            1	2
+            4	5
+            7	10`,
+          },
+        }),
+      ),
+    );
+    expect(clipboardData.spreadsheet).toEqual({
+      title: "b",
+      labels: ["1", "4", "7"],
+      values: [2, 5, 10],
+    });
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      await parseDataTransferEvent(
+        createPasteEvent({
+          types: {
+            "text/html": `<html>
+            <body>
+            <!--StartFragment--><google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;a&quot;}">a</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;b&quot;}">b</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:1}">1</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:2}">2</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:4}">4</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:5}">5</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:7}">7</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:10}">10</td></tr></tbody></table><!--EndFragment-->
+            </body>
+            </html>`,
+            "text/plain": `a	b
+            1	2
+            4	5
+            7	10`,
+          },
+        }),
+      ),
+    );
+    expect(clipboardData.spreadsheet).toEqual({
+      title: "b",
+      labels: ["1", "4", "7"],
+      values: [2, 5, 10],
+    });
+  });
 });

packages/excalidraw/clipboard.ts

@@ -33,8 +33,12 @@ import {
   normalizeFile,
 } from "./data/blob";
 
+import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
+
 import type { FileSystemHandle } from "./data/filesystem";
 
+import type { Spreadsheet } from "./charts";
+
 import type { BinaryFiles } from "./types";
 
 type ElementsClipboard = {
@@ -46,6 +50,7 @@ type ElementsClipboard = {
 export type PastedMixedContent = { type: "text" | "imageUrl"; value: string }[];
 
 export interface ClipboardData {
+  spreadsheet?: Spreadsheet;
   elements?: readonly ExcalidrawElement[];
   files?: BinaryFiles;
   text?: string;
@@ -108,6 +113,7 @@ export const createPasteEvent = ({
       if (typeof value !== "string") {
         files = files || [];
         files.push(value);
+        event.clipboardData?.items.add(value);
         continue;
       }
       try {
@@ -199,17 +205,22 @@ export const copyToClipboard = async (
   /** supply if available to make the operation more certain to succeed */
   clipboardEvent?: ClipboardEvent | null,
 ) => {
-  const json = serializeAsClipboardJSON({ elements, files });
-
   await copyTextToSystemClipboard(
-    {
-      [MIME_TYPES.excalidrawClipboard]: json,
-      [MIME_TYPES.text]: json,
-    },
+    serializeAsClipboardJSON({ elements, files }),
     clipboardEvent,
   );
 };
 
+const parsePotentialSpreadsheet = (
+  text: string,
+): { spreadsheet: Spreadsheet } | { errorMessage: string } | null => {
+  const result = tryParseSpreadsheet(text);
+  if (result.type === VALID_SPREADSHEET) {
+    return { spreadsheet: result.spreadsheet };
+  }
+  return null;
+};
+
 /** internal, specific to parsing paste events. Do not reuse. */
 function parseHTMLTree(el: ChildNode) {
   let result: PastedMixedContent = [];
@@ -391,7 +402,7 @@ export type ParsedDataTransferFile = Extract<
   { kind: "file" }
 >;
 
-export type ParsedDataTranferList = ParsedDataTransferItem[] & {
+type ParsedDataTranferList = ParsedDataTransferItem[] & {
   /**
    * Only allows filtering by known `string` data types, since `file`
    * types can have multiple items of the same type (e.g. multiple image files)
@@ -442,29 +453,6 @@ const getDataTransferFiles = function (
   );
 };
 
-/** @returns list of MIME types, synchronously */
-export const parseDataTransferEventMimeTypes = (
-  event: ClipboardEvent | DragEvent | React.DragEvent<HTMLDivElement>,
-): Set<string> => {
-  let items: DataTransferItemList | undefined = undefined;
-
-  if (isClipboardEvent(event)) {
-    items = event.clipboardData?.items;
-  } else {
-    items = event.dataTransfer?.items;
-  }
-
-  const types: Set<string> = new Set();
-
-  for (const item of Array.from(items || [])) {
-    if (!types.has(item.type)) {
-      types.add(item.type);
-    }
-  }
-
-  return types;
-};
-
 export const parseDataTransferEvent = async (
   event: ClipboardEvent | DragEvent | React.DragEvent<HTMLDivElement>,
 ): Promise<ParsedDataTranferList> => {
@@ -473,7 +461,8 @@ export const parseDataTransferEvent = async (
   if (isClipboardEvent(event)) {
     items = event.clipboardData?.items;
   } else {
-    items = event.dataTransfer?.items;
+    const dragEvent = event;
+    items = dragEvent.dataTransfer?.items;
   }
 
   const dataItems = (
@@ -536,6 +525,19 @@ export const parseClipboard = async (
     };
   }
 
+  try {
+    // if system clipboard contains spreadsheet, use it even though it's
+    // technically possible it's staler than in-app clipboard
+    const spreadsheetResult =
+      !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value);
+
+    if (spreadsheetResult) {
+      return spreadsheetResult;
+    }
+  } catch (error: any) {
+    console.error(error);
+  }
+
   try {
     const systemClipboardData = JSON.parse(parsedEventData.value);
     const programmaticAPI =
@@ -566,7 +568,7 @@ export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
     // ClipboardItem constructor, but throws on an unrelated MIME type error.
     // So we need to await this and fallback to awaiting the blob if applicable.
     await navigator.clipboard.write([
-      new ClipboardItem({
+      new window.ClipboardItem({
         [MIME_TYPES.png]: blob,
       }),
     ]);
@@ -575,7 +577,7 @@ export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
     // with resolution value instead
     if (isPromiseLike(blob)) {
       await navigator.clipboard.write([
-        new ClipboardItem({
+        new window.ClipboardItem({
           [MIME_TYPES.png]: await blob,
         }),
       ]);
@@ -585,27 +587,28 @@ export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
   }
 };
 
-export const copyTextToSystemClipboard = async <
-  MimeType extends ValueOf<typeof STRING_MIME_TYPES>,
->(
-  text: string | { [K in MimeType]: string } | null,
+export const copyTextToSystemClipboard = async (
+  text: string | null,
   clipboardEvent?: ClipboardEvent | null,
 ) => {
-  text = text || "";
+  // (1) first try using Async Clipboard API
+  if (probablySupportsClipboardWriteText) {
+    try {
+      // NOTE: doesn't work on FF on non-HTTPS domains, or when document
+      // not focused
+      await navigator.clipboard.writeText(text || "");
+      return;
+    } catch (error: any) {
+      console.error(error);
+    }
+  }
 
-  const entries = Object.entries(
-    typeof text === "string" ? { [MIME_TYPES.text]: text } : text,
-  );
-
-  // (1) if we have clipboardEvent, try using it first as it's the most
-  // versatile
+  // (2) if fails and we have access to ClipboardEvent, use plain old setData()
   try {
     if (clipboardEvent) {
-      for (const [mimeType, value] of entries) {
-        clipboardEvent.clipboardData?.setData(mimeType, value);
-        if (clipboardEvent.clipboardData?.getData(mimeType) !== value) {
-          throw new Error("Failed to setData on clipboardEvent");
-        }
+      clipboardEvent.clipboardData?.setData(MIME_TYPES.text, text || "");
+      if (clipboardEvent.clipboardData?.getData(MIME_TYPES.text) !== text) {
+        throw new Error("Failed to setData on clipboardEvent");
       }
       return;
     }
@@ -613,26 +616,8 @@ export const copyTextToSystemClipboard = async <
     console.error(error);
   }
 
-  const plainTextEntry = entries.find(
-    ([mimeType]) => mimeType === MIME_TYPES.text,
-  );
-
-  // (2) if we don't have access to clipboardEvent, or that fails,
-  // at least try setting text/plain via navigator.clipboard.writeText
-  // (navigator.clipboard.write doesn't work with non-standard mime types)
-  if (probablySupportsClipboardWriteText && plainTextEntry) {
-    try {
-      // NOTE: doesn't work on FF on non-HTTPS domains, or when document
-      // not focused
-      await navigator.clipboard.writeText(plainTextEntry[1]);
-      return;
-    } catch (error: any) {
-      console.error(error);
-    }
-  }
-
-  // (3) if previous fails, use document.execCommand
-  if (plainTextEntry && !copyTextViaExecCommand(plainTextEntry[1])) {
+  // (3) if that fails, use document.execCommand
+  if (!copyTextViaExecCommand(text)) {
     throw new Error("Error copying to clipboard.");
   }
 };

packages/excalidraw/components/Actions.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { useRef, useState } from "react";
-import { Popover } from "radix-ui";
+import * as Popover from "@radix-ui/react-popover";
 
 import {
   CLASSES,
@@ -10,6 +10,9 @@ import {
 } from "@excalidraw/common";
 
 import {
+  getContainerElement,
+  hasContainerBehavior,
+  isFlowchartNodeElement,
   shouldAllowVerticalAlign,
   suppportsHorizontalAlign,
   hasBoundTextElement,
@@ -155,6 +158,15 @@ export const SelectedShapeActions = ({
   ) {
     isSingleElementBoundContainer = true;
   }
+
+  const textContainer =
+    targetElements.length === 1 && isTextElement(targetElements[0])
+      ? getContainerElement(targetElements[0], elementsMap)
+      : null;
+
+  const isStickyNoteContainer =
+    textContainer && isFlowchartNodeElement(textContainer);
+
   const isEditingTextOrNewElement = Boolean(
     appState.editingTextElement || appState.newElement,
   );
@@ -218,6 +230,11 @@ export const SelectedShapeActions = ({
         <>{renderAction("changeRoundness")}</>
       )}
 
+      {(hasContainerBehavior(appState.activeTool.type) ||
+        targetElements.some((element) => isFlowchartNodeElement(element))) && (
+        <>{renderAction("changeContainerBehavior")}</>
+      )}
+
       {(toolIsArrow(appState.activeTool.type) ||
         targetElements.some((element) => toolIsArrow(element.type))) && (
         <>{renderAction("changeArrowType")}</>
@@ -226,7 +243,7 @@ export const SelectedShapeActions = ({
       {(appState.activeTool.type === "text" ||
         targetElements.some(isTextElement)) && (
         <>
-          <fieldset>{renderAction("changeFontFamily")}</fieldset>
+          {renderAction("changeFontFamily")}
           {renderAction("changeFontSize")}
           {(appState.activeTool.type === "text" ||
             suppportsHorizontalAlign(targetElements, elementsMap)) &&
@@ -241,6 +258,8 @@ export const SelectedShapeActions = ({
         <>{renderAction("changeArrowhead")}</>
       )}
 
+      {isStickyNoteContainer && <>{renderAction("changeContainerBehavior")}</>}
+
       {renderAction("changeOpacity")}
 
       <fieldset>
@@ -408,6 +427,10 @@ const CombinedShapeProperties = ({
                   canChangeRoundness(element.type),
                 )) &&
                 renderAction("changeRoundness")}
+              {(hasContainerBehavior(appState.activeTool.type) ||
+                targetElements.some((element) =>
+                  isFlowchartNodeElement(element),
+                )) && <>{renderAction("changeContainerBehavior")}</>}
               {renderAction("changeOpacity")}
             </div>
           </PropertiesPopover>
@@ -532,6 +555,14 @@ const CombinedTextProperties = ({
   const { saveCaretPosition, restoreCaretPosition } = useTextEditorFocus();
   const isOpen = appState.openPopup === "compactTextProperties";
 
+  const textContainer =
+    targetElements.length === 1 && isTextElement(targetElements[0])
+      ? getContainerElement(targetElements[0], elementsMap)
+      : null;
+
+  const isStickyNoteContainer =
+    textContainer && isFlowchartNodeElement(textContainer);
+
   return (
     <div className="compact-action-item">
       <Popover.Root
@@ -597,6 +628,9 @@ const CombinedTextProperties = ({
                 renderAction("changeTextAlign")}
               {shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign")}
+              {isStickyNoteContainer && (
+                <>{renderAction("changeContainerBehavior")}</>
+              )}
             </div>
           </PropertiesPopover>
         )}
@@ -1081,9 +1115,8 @@ export const ShapesSwitcher = ({
   return (
     <>
       {getToolbarTools(app).map(
-        ({ value, icon, key, numericKey, fillable, toolbar }) => {
+        ({ value, icon, key, numericKey, fillable }, index) => {
           if (
-            toolbar === false ||
             UIOptions.tools?.[
               value as Extract<
                 typeof value,
@@ -1100,9 +1133,6 @@ export const ShapesSwitcher = ({
           const shortcut = letter
             ? `${letter} ${t("helpDialog.or")} ${numericKey}`
             : `${numericKey}`;
-          const keybindingLabel =
-            value === "hand" ? undefined : numericKey || letter;
-
           // when in compact styles panel mode (tablet)
           // use a ToolPopover for selection/lasso toggle as well
           if (
@@ -1147,7 +1177,7 @@ export const ShapesSwitcher = ({
               checked={activeTool.type === value}
               name="editor-current-shape"
               title={`${capitalizeString(label)} — ${shortcut}`}
-              keyBindingLabel={keybindingLabel}
+              keyBindingLabel={numericKey || letter}
               aria-label={capitalizeString(label)}
               aria-keyshortcuts={shortcut}
               data-testid={`toolbar-${value}`}
@@ -1267,9 +1297,9 @@ export const ShapesSwitcher = ({
               onSelect={() => app.onMagicframeToolSelect()}
               icon={MagicIcon}
               data-testid="toolbar-magicframe"
-              badge={<DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>}
             >
               {t("toolBar.magicframe")}
+              <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
             </DropdownMenu.Item>
           )}
         </DropdownMenu.Content>