Fix lint

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

.env.development

@@ -8,7 +8,7 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 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_PLUS_APP=https://app.excalidraw.com
 
 VITE_APP_AI_BACKEND=http://localhost:3015
 
@@ -37,14 +37,3 @@ VITE_APP_COLLAPSE_OVERLAY=true
 
 # Set this flag to false to disable eslint
 VITE_APP_ENABLE_ESLINT=true
-
-# Enable PWA in dev server
-VITE_APP_ENABLE_PWA=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0
-7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij
-ba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y
-UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
-s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
-kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
-HQIDAQAB'

.env.production

@@ -15,18 +15,3 @@ VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
 VITE_APP_ENABLE_TRACKING=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApQ0jM9Qz8TdFLzcuAZZX
-/WvuKSOJxiw6AR/ZcE3eFQWM/mbFdhQgyK8eHGkKQifKzH1xUZjCxyXcxW6ZO02t
-kPOPxhz+nxUrIoWCD/V4NGmUA1lxwHuO21HN1gzKrN3xHg5EGjyouR9vibT9VDGF
-gq6+4Ic/kJX+AD2MM7Yre2+FsOdysrmuW2Fu3ahuC1uQE7pOe1j0k7auNP0y1q53
-PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
-iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
-PQIDAQAB'
-
-# Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when  running the build command
-VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
-VITE_APP_COLLAPSE_OVERLAY=false
-# Enable eslint in dev server
-VITE_APP_ENABLE_ESLINT=false
-

.github/workflows/locales-coverage.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 

.github/workflows/semantic-pr-title.yml

@@ -11,6 +11,6 @@ jobs:
   semantic:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@v3.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx

@@ -31,7 +31,7 @@ The welcome screen consists of two main groups of subcomponents:
 
 <img
   src={require("@site/static/img/welcome-screen-overview.png").default}
-  alt="Excalidraw logo: Sketch hand-drawn like diagrams."
+  alt="Excalidraw logo: Sketch handrawn like diagrams."
 />
 
 ### Center

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

@@ -12,7 +12,7 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";
 
 | Font Family | Description            |
 | ----------- | ---------------------- |
-| `Virgil`    | The `Hand-drawn` font |
+| `Virgil`    | The `handwritten` font |
 | `Helvetica` | The `Normal` Font      |
 | `Cascadia`  | The `Code` Font        |
 

dev-docs/yarn.lock

@@ -3278,9 +3278,9 @@ cross-fetch@^3.1.5:
     node-fetch "2.6.7"
 
 cross-spawn@^7.0.3:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
-  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"

examples/excalidraw/with-nextjs/.gitignore

@@ -36,4 +36,4 @@ yarn-error.log*
 next-env.d.ts
 
 # copied assets
-public/**/*.woff2
+public/*.woff2

examples/excalidraw/with-nextjs/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
     "dev": "yarn build:workspace && next dev -p 3005",
     "build": "yarn build:workspace && next build",
     "start": "next start -p 3006",

examples/excalidraw/with-script-in-browser/.gitignore

@@ -1,2 +1,2 @@
 # copied assets
-public/**/*.woff2
+public/*.woff2

examples/excalidraw/with-script-in-browser/package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
     "start": "yarn build:workspace && vite",
     "build": "yarn build:workspace && vite build",
     "build:preview": "yarn build && vite preview --port 5002"

excalidraw-app/App.tsx

@@ -126,7 +126,8 @@ import DebugCanvas, {
   loadSavedDebugState,
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
-import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
+import type { SaveWarningRef } from "./components/SaveWarning";
+import { SaveWarning } from "./components/SaveWarning";
 
 polyfill();
 
@@ -332,6 +333,8 @@ const ExcalidrawWrapper = () => {
 
   const [langCode, setLangCode] = useAppLangCode();
 
+  const activityRef = useRef<SaveWarningRef | null>(null);
+
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -616,6 +619,8 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
+    activityRef.current?.activity();
+
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -857,6 +862,7 @@ const ExcalidrawWrapper = () => {
           setTheme={(theme) => setAppTheme(theme)}
           refresh={() => forceRefresh((prev) => !prev)}
         />
+        <SaveWarning ref={activityRef} />
         <AppWelcomeScreen
           onCollabDialogOpen={onCollabDialogOpen}
           isCollabEnabled={!isCollabDisabled}
@@ -1126,12 +1132,6 @@ const ExcalidrawWrapper = () => {
 };
 
 const ExcalidrawApp = () => {
-  const isCloudExportWindow =
-    window.location.pathname === "/excalidraw-plus-export";
-  if (isCloudExportWindow) {
-    return <ExcalidrawPlusIframeExport />;
-  }
-
   return (
     <TopErrorBoundary>
       <Provider unstable_createStore={() => appJotaiStore}>

excalidraw-app/ExcalidrawPlusIframeExport.tsx

@@ -1,222 +0,0 @@
-import { useLayoutEffect, useRef } from "react";
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
-import type {
-  FileId,
-  OrderedExcalidrawElement,
-} from "../packages/excalidraw/element/types";
-import type { AppState, BinaryFileData } from "../packages/excalidraw/types";
-import { ExcalidrawError } from "../packages/excalidraw/errors";
-import { base64urlToString } from "../packages/excalidraw/data/encode";
-
-const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
-
-const EXCALIDRAW_PLUS_ORIGIN = import.meta.env.VITE_APP_PLUS_APP;
-
-// -----------------------------------------------------------------------------
-// outgoing message
-// -----------------------------------------------------------------------------
-type MESSAGE_REQUEST_SCENE = {
-  type: "REQUEST_SCENE";
-  jwt: string;
-};
-
-type MESSAGE_FROM_PLUS = MESSAGE_REQUEST_SCENE;
-
-// incoming messages
-// -----------------------------------------------------------------------------
-type MESSAGE_READY = { type: "READY" };
-type MESSAGE_ERROR = { type: "ERROR"; message: string };
-type MESSAGE_SCENE_DATA = {
-  type: "SCENE_DATA";
-  elements: OrderedExcalidrawElement[];
-  appState: Pick<AppState, "viewBackgroundColor">;
-  files: { loadedFiles: BinaryFileData[]; erroredFiles: Map<FileId, true> };
-};
-
-type MESSAGE_FROM_EDITOR = MESSAGE_ERROR | MESSAGE_SCENE_DATA | MESSAGE_READY;
-// -----------------------------------------------------------------------------
-
-const parseSceneData = async ({
-  rawElementsString,
-  rawAppStateString,
-}: {
-  rawElementsString: string | null;
-  rawAppStateString: string | null;
-}): Promise<MESSAGE_SCENE_DATA> => {
-  if (!rawElementsString || !rawAppStateString) {
-    throw new ExcalidrawError("Elements or appstate is missing.");
-  }
-
-  try {
-    const elements = JSON.parse(
-      rawElementsString,
-    ) as OrderedExcalidrawElement[];
-
-    if (!elements.length) {
-      throw new ExcalidrawError("Scene is empty, nothing to export.");
-    }
-
-    const appState = JSON.parse(rawAppStateString) as Pick<
-      AppState,
-      "viewBackgroundColor"
-    >;
-
-    const fileIds = elements.reduce((acc, el) => {
-      if ("fileId" in el && el.fileId) {
-        acc.push(el.fileId);
-      }
-      return acc;
-    }, [] as FileId[]);
-
-    const files = await LocalData.fileStorage.getFiles(fileIds);
-
-    return {
-      type: "SCENE_DATA",
-      elements,
-      appState,
-      files,
-    };
-  } catch (error: any) {
-    throw error instanceof ExcalidrawError
-      ? error
-      : new ExcalidrawError("Failed to parse scene data.");
-  }
-};
-
-const verifyJWT = async ({
-  token,
-  publicKey,
-}: {
-  token: string;
-  publicKey: string;
-}) => {
-  try {
-    if (!publicKey) {
-      throw new ExcalidrawError("Public key is undefined");
-    }
-
-    const [header, payload, signature] = token.split(".");
-
-    if (!header || !payload || !signature) {
-      throw new ExcalidrawError("Invalid JWT format");
-    }
-
-    // JWT is using Base64URL encoding
-    const decodedPayload = base64urlToString(payload);
-    const decodedSignature = base64urlToString(signature);
-
-    const data = `${header}.${payload}`;
-    const signatureArrayBuffer = Uint8Array.from(decodedSignature, (c) =>
-      c.charCodeAt(0),
-    );
-
-    const keyData = publicKey.replace(/-----\w+ PUBLIC KEY-----/g, "");
-    const keyArrayBuffer = Uint8Array.from(atob(keyData), (c) =>
-      c.charCodeAt(0),
-    );
-
-    const key = await crypto.subtle.importKey(
-      "spki",
-      keyArrayBuffer,
-      { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
-      true,
-      ["verify"],
-    );
-
-    const isValid = await crypto.subtle.verify(
-      "RSASSA-PKCS1-v1_5",
-      key,
-      signatureArrayBuffer,
-      new TextEncoder().encode(data),
-    );
-
-    if (!isValid) {
-      throw new Error("Invalid JWT");
-    }
-
-    const parsedPayload = JSON.parse(decodedPayload);
-
-    // Check for expiration
-    const currentTime = Math.floor(Date.now() / 1000);
-    if (parsedPayload.exp && parsedPayload.exp < currentTime) {
-      throw new Error("JWT has expired");
-    }
-  } catch (error) {
-    console.error("Failed to verify JWT:", error);
-    throw new Error(error instanceof Error ? error.message : "Invalid JWT");
-  }
-};
-
-export const ExcalidrawPlusIframeExport = () => {
-  const readyRef = useRef(false);
-
-  useLayoutEffect(() => {
-    const handleMessage = async (event: MessageEvent<MESSAGE_FROM_PLUS>) => {
-      if (event.origin !== EXCALIDRAW_PLUS_ORIGIN) {
-        throw new ExcalidrawError("Invalid origin");
-      }
-
-      if (event.data.type === EVENT_REQUEST_SCENE) {
-        if (!event.data.jwt) {
-          throw new ExcalidrawError("JWT is missing");
-        }
-
-        try {
-          try {
-            await verifyJWT({
-              token: event.data.jwt,
-              publicKey: import.meta.env.VITE_APP_PLUS_EXPORT_PUBLIC_KEY,
-            });
-          } catch (error: any) {
-            console.error(`Failed to verify JWT: ${error.message}`);
-            throw new ExcalidrawError("Failed to verify JWT");
-          }
-
-          const parsedSceneData: MESSAGE_SCENE_DATA = await parseSceneData({
-            rawAppStateString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-            ),
-            rawElementsString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-            ),
-          });
-
-          event.source!.postMessage(parsedSceneData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        } catch (error) {
-          const responseData: MESSAGE_ERROR = {
-            type: "ERROR",
-            message:
-              error instanceof ExcalidrawError
-                ? error.message
-                : "Failed to export scene data",
-          };
-          event.source!.postMessage(responseData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        }
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    // so we don't send twice in StrictMode
-    if (!readyRef.current) {
-      readyRef.current = true;
-      const message: MESSAGE_FROM_EDITOR = { type: "READY" };
-      window.parent.postMessage(message, EXCALIDRAW_PLUS_ORIGIN);
-    }
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-
-  // Since this component is expected to run in a hidden iframe on Excaildraw+,
-  // it doesn't need to render anything. All the data we need is available in
-  // LocalStorage and IndexedDB. It only needs to handle the messaging between
-  // the parent window and the iframe with the relevant data.
-  return null;
-};

excalidraw-app/collab/Collab.tsx

@@ -1,7 +1,6 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
 import type {
-  BinaryFileData,
   ExcalidrawImperativeAPI,
   SocketId,
 } from "../../packages/excalidraw/types";
@@ -10,7 +9,6 @@ import { APP_NAME, ENV, EVENT } from "../../packages/excalidraw/constants";
 import type { ImportedDataState } from "../../packages/excalidraw/data/types";
 import type {
   ExcalidrawElement,
-  FileId,
   InitializedExcalidrawImageElement,
   OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
@@ -159,7 +157,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
           throw new AbortError();
         }
 
-        const { savedFiles, erroredFiles } = await saveFilesToFirebase({
+        return saveFilesToFirebase({
           prefix: `${FIREBASE_STORAGE_PREFIXES.collabFiles}/${roomId}`,
           files: await encodeFilesForUpload({
             files: addedFiles,
@@ -167,29 +165,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
             maxBytes: FILE_UPLOAD_MAX_BYTES,
           }),
         });
-
-        return {
-          savedFiles: savedFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-          erroredFiles: erroredFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-        };
       },
     });
     this.excalidrawAPI = props.excalidrawAPI;
@@ -419,7 +394,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       .filter((element) => {
         return (
           isInitializedImageElement(element) &&
-          !this.fileManager.isFileTracked(element.fileId) &&
+          !this.fileManager.isFileHandled(element.fileId) &&
           !element.isDeleted &&
           (opts.forceFetchFiles
             ? element.status !== "pending" ||

excalidraw-app/components/SaveWarning.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { t } from "../../packages/excalidraw/i18n";
+import { getShortcutKey } from "../../packages/excalidraw/utils";
+
+export type SaveWarningRef = {
+  activity: () => Promise<void>;
+};
+
+export const SaveWarning = forwardRef<SaveWarningRef, {}>((props, ref) => {
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * Call this API method via the ref to hide warning message
+     * and start an idle timer again.
+     */
+    activity: async () => {
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+        dialogRef.current?.classList.remove("animate");
+      }
+
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        dialogRef.current?.classList.add("animate");
+      }, 5000);
+    },
+  }));
+
+  return (
+    <div ref={dialogRef} className="alert-save">
+      <div className="dialog">
+        {t("alerts.saveYourContent", {
+          shortcut: getShortcutKey("CtrlOrCmd + S"),
+        })}
+      </div>
+    </div>
+  );
+});

excalidraw-app/data/FileManager.ts

@@ -16,26 +16,14 @@ import type {
   BinaryFiles,
 } from "../../packages/excalidraw/types";
 
-type FileVersion = Required<BinaryFileData>["version"];
-
 export class FileManager {
   /** files being fetched */
   private fetchingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
-  private erroredFiles_fetch = new Map<
-    ExcalidrawImageElement["fileId"],
-    true
-  >();
   /** files being saved */
-  private savingFiles = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
   /* files already saved to persistent storage */
-  private savedFiles = new Map<ExcalidrawImageElement["fileId"], FileVersion>();
-  private erroredFiles_save = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savedFiles = new Map<ExcalidrawImageElement["fileId"], true>();
+  private erroredFiles = new Map<ExcalidrawImageElement["fileId"], true>();
 
   private _getFiles;
   private _saveFiles;
@@ -49,8 +37,8 @@ export class FileManager {
       erroredFiles: Map<FileId, true>;
     }>;
     saveFiles: (data: { addedFiles: Map<FileId, BinaryFileData> }) => Promise<{
-      savedFiles: Map<FileId, BinaryFileData>;
-      erroredFiles: Map<FileId, BinaryFileData>;
+      savedFiles: Map<FileId, true>;
+      erroredFiles: Map<FileId, true>;
     }>;
   }) {
     this._getFiles = getFiles;
@@ -58,28 +46,19 @@ export class FileManager {
   }
 
   /**
-   * returns whether file is saved/errored, or being processed
+   * returns whether file is already saved or being processed
    */
-  isFileTracked = (id: FileId) => {
+  isFileHandled = (id: FileId) => {
     return (
       this.savedFiles.has(id) ||
-      this.savingFiles.has(id) ||
       this.fetchingFiles.has(id) ||
-      this.erroredFiles_fetch.has(id) ||
-      this.erroredFiles_save.has(id)
+      this.savingFiles.has(id) ||
+      this.erroredFiles.has(id)
     );
   };
 
-  isFileSavedOrBeingSaved = (file: BinaryFileData) => {
-    const fileVersion = this.getFileVersion(file);
-    return (
-      this.savedFiles.get(file.id) === fileVersion ||
-      this.savingFiles.get(file.id) === fileVersion
-    );
-  };
-
-  getFileVersion = (file: BinaryFileData) => {
-    return file.version ?? 1;
+  isFileSaved = (id: FileId) => {
+    return this.savedFiles.has(id);
   };
 
   saveFiles = async ({
@@ -92,16 +71,13 @@ export class FileManager {
     const addedFiles: Map<FileId, BinaryFileData> = new Map();
 
     for (const element of elements) {
-      const fileData =
-        isInitializedImageElement(element) && files[element.fileId];
-
       if (
-        fileData &&
-        // NOTE if errored during save, won't retry due to this check
-        !this.isFileSavedOrBeingSaved(fileData)
+        isInitializedImageElement(element) &&
+        files[element.fileId] &&
+        !this.isFileHandled(element.fileId)
       ) {
         addedFiles.set(element.fileId, files[element.fileId]);
-        this.savingFiles.set(element.fileId, this.getFileVersion(fileData));
+        this.savingFiles.set(element.fileId, true);
       }
     }
 
@@ -110,12 +86,8 @@ export class FileManager {
         addedFiles,
       });
 
-      for (const [fileId, fileData] of savedFiles) {
-        this.savedFiles.set(fileId, this.getFileVersion(fileData));
-      }
-
-      for (const [fileId, fileData] of erroredFiles) {
-        this.erroredFiles_save.set(fileId, this.getFileVersion(fileData));
+      for (const [fileId] of savedFiles) {
+        this.savedFiles.set(fileId, true);
       }
 
       return {
@@ -149,10 +121,10 @@ export class FileManager {
       const { loadedFiles, erroredFiles } = await this._getFiles(ids);
 
       for (const file of loadedFiles) {
-        this.savedFiles.set(file.id, this.getFileVersion(file));
+        this.savedFiles.set(file.id, true);
       }
       for (const [fileId] of erroredFiles) {
-        this.erroredFiles_fetch.set(fileId, true);
+        this.erroredFiles.set(fileId, true);
       }
 
       return { loadedFiles, erroredFiles };
@@ -188,7 +160,7 @@ export class FileManager {
   ): element is InitializedExcalidrawImageElement => {
     return (
       isInitializedImageElement(element) &&
-      this.savedFiles.has(element.fileId) &&
+      this.isFileSaved(element.fileId) &&
       element.status === "pending"
     );
   };
@@ -197,8 +169,7 @@ export class FileManager {
     this.fetchingFiles.clear();
     this.savingFiles.clear();
     this.savedFiles.clear();
-    this.erroredFiles_fetch.clear();
-    this.erroredFiles_save.clear();
+    this.erroredFiles.clear();
   }
 }
 

excalidraw-app/data/LocalData.ts

@@ -183,8 +183,8 @@ export class LocalData {
       );
     },
     async saveFiles({ addedFiles }) {
-      const savedFiles = new Map<FileId, BinaryFileData>();
-      const erroredFiles = new Map<FileId, BinaryFileData>();
+      const savedFiles = new Map<FileId, true>();
+      const erroredFiles = new Map<FileId, true>();
 
       // before we use `storage` event synchronization, let's update the flag
       // optimistically. Hopefully nothing fails, and an IDB read executed
@@ -195,10 +195,10 @@ export class LocalData {
         [...addedFiles].map(async ([id, fileData]) => {
           try {
             await set(id, fileData, filesStore);
-            savedFiles.set(id, fileData);
+            savedFiles.set(id, true);
           } catch (error: any) {
             console.error(error);
-            erroredFiles.set(id, fileData);
+            erroredFiles.set(id, true);
           }
         }),
       );

excalidraw-app/data/firebase.ts

@@ -177,8 +177,8 @@ export const saveFilesToFirebase = async ({
 }) => {
   const firebase = await loadFirebaseStorage();
 
-  const erroredFiles: FileId[] = [];
-  const savedFiles: FileId[] = [];
+  const erroredFiles = new Map<FileId, true>();
+  const savedFiles = new Map<FileId, true>();
 
   await Promise.all(
     files.map(async ({ id, buffer }) => {
@@ -194,9 +194,9 @@ export const saveFilesToFirebase = async ({
               cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`,
             },
           );
-        savedFiles.push(id);
+        savedFiles.set(id, true);
       } catch (error: any) {
-        erroredFiles.push(id);
+        erroredFiles.set(id, true);
       }
     }),
   );

excalidraw-app/index.html

@@ -54,6 +54,12 @@
       content="https://excalidraw.com/og-image-3.png"
     />
 
+    <!-- General tags -->
+    <meta
+      name="description"
+      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
+    />
+
     <!------------------------------------------------------------------------->
     <!--   to minimize white flash on load when user has dark mode enabled   -->
     <script>
@@ -118,19 +124,28 @@
     <!-- Following placeholder is replaced during the build step -->
     <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
 
-    <!-- Register Assistant as the UI font, before the scene inits -->
-    <link
-      rel="stylesheet"
-      href="../packages/excalidraw/fonts/fonts.css"
-      type="text/css"
-    />
-
     <% } else { %>
     <script>
       window.EXCALIDRAW_ASSET_PATH = window.origin;
     </script>
     <% } %>
 
+    <!-- For Nunito only preload the latin range, which should be good enough for now -->
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <!-- Register Assistant as the UI font, before the scene inits -->
+    <link
+      rel="stylesheet"
+      href="../packages/excalidraw/fonts/assets/fonts.css"
+      type="text/css"
+    />
+
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -212,7 +227,6 @@
     </header>
     <div id="root"></div>
     <script type="module" src="index.tsx"></script>
-    <% if (typeof PROD != 'undefined' && PROD == true) { %>
     <!-- 100% privacy friendly analytics -->
     <script>
       // need to load this script dynamically bcs. of iframe embed tracking
@@ -245,6 +259,5 @@
       }
     </script>
     <!-- end LEGACY GOOGLE ANALYTICS -->
-    <% } %>
   </body>
 </html>

excalidraw-app/index.scss

@@ -18,6 +18,43 @@
     margin-inline-start: auto;
   }
 
+  .alert-save {
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    right: 0;
+    bottom: 10vh;
+    margin-inline: auto;
+    width: fit-content;
+
+    opacity: 0;
+    transition: all 0s;
+
+    &.animate {
+      opacity: 1;
+      transition: all 0.2s ease-in;
+    }
+
+    .dialog {
+      margin-inline: 10px;
+      padding: 1rem;
+      padding-inline: 1.25rem;
+
+      resize: none;
+      white-space: pre-wrap;
+      box-sizing: border-box;
+
+      background-color: var(--color-warning);
+      border-radius: var(--border-radius-md);
+      border: 1px solid var(--dialog-border-color);
+
+      font-size: 0.875rem;
+      text-align: center;
+      line-height: 1.5;
+      color: var(--color-text-warning);
+    }
+  }
+
   .encrypted-icon {
     border-radius: var(--space-factor);
     color: var(--color-primary);

excalidraw-app/package.json

@@ -23,20 +23,20 @@
     ]
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": ">=18.0.0"
   },
   "dependencies": {
-    "@excalidraw/random-username": "1.0.0",
-    "@sentry/browser": "6.2.5",
-    "@sentry/integrations": "6.2.5",
     "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "jotai": "1.13.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "socket.io-client": "4.7.2",
-    "vite-plugin-html": "3.2.2"
+    "vite-plugin-html": "3.2.2",
+    "@excalidraw/random-username": "1.0.0",
+    "@sentry/browser": "6.2.5",
+    "@sentry/integrations": "6.2.5",
+    "i18next-browser-languagedetector": "6.1.4",
+    "socket.io-client": "4.7.2"
   },
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
@@ -49,8 +49,5 @@
     "start:production": "yarn build && yarn serve",
     "serve": "npx http-server build -a localhost -p 5001 -o",
     "build:preview": "yarn build && vite preview --port 5000"
-  },
-  "devDependencies": {
-    "vite-plugin-sitemap": "0.7.1"
   }
 }

excalidraw-app/vite-env.d.ts

@@ -29,9 +29,6 @@ interface ImportMetaEnv {
   // Enable eslint in dev server
   VITE_APP_ENABLE_ESLINT: string;
 
-  // Enable PWA in dev server
-  VITE_APP_ENABLE_PWA: string;
-
   VITE_APP_PLUS_LP: string;
 
   VITE_APP_PLUS_APP: string;

excalidraw-app/vite.config.mts

@@ -5,237 +5,215 @@ import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import { createHtmlPlugin } from "vite-plugin-html";
-import Sitemap from "vite-plugin-sitemap";
 import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
 
-export default defineConfig(({ mode }) => {
-  // To load .env variables
-  const envVars = loadEnv(mode, `../`);
-  // https://vitejs.dev/config/
-  return {
-    server: {
-      port: Number(envVars.VITE_APP_PORT || 3000),
-      // open the browser
-      open: true,
-    },
-    // We need to specify the envDir since now there are no
-    //more located in parallel with the vite.config.ts file but in parent dir
-    envDir: "../",
-    build: {
-      outDir: "build",
-      rollupOptions: {
-        output: {
-          assetFileNames(chunkInfo) {
-            if (chunkInfo?.name?.endsWith(".woff2")) {
-              const family = chunkInfo.name.split("-")[0];
-              return `fonts/${family}/[name][extname]`;
-            }
+// To load .env.local variables
+const envVars = loadEnv("", `../`);
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: Number(envVars.VITE_APP_PORT || 3000),
+    // open the browser
+    open: true,
+  },
+  // We need to specify the envDir since now there are no
+  //more located in parallel with the vite.config.ts file but in parent dir
+  envDir: "../",
+  build: {
+    outDir: "build",
+    rollupOptions: {
+      output: {
+        assetFileNames(chunkInfo) {
+          if (chunkInfo?.name?.endsWith(".woff2")) {
+            // put on root so we are flexible about the CDN path
+            return "[name]-[hash][extname]";
+          }
 
-            return "assets/[name]-[hash][extname]";
-          },
-          // Creating separate chunk for locales except for en and percentages.json so they
-          // can be cached at runtime and not merged with
-          // app precache. en.json and percentages.json are needed for first load
-          // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
-          manualChunks(id) {
-            if (
-              id.includes("packages/excalidraw/locales") &&
-              id.match(/en.json|percentages.json/) === null
-            ) {
-              const index = id.indexOf("locales/");
-              // Taking the substring after "locales/"
-              return `locales/${id.substring(index + 8)}`;
-            }
-          },
+          return "assets/[name]-[hash][extname]";
+        },
+        // Creating separate chunk for locales except for en and percentages.json so they
+        // can be cached at runtime and not merged with
+        // app precache. en.json and percentages.json are needed for first load
+        // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
+        manualChunks(id) {
+          if (
+            id.includes("packages/excalidraw/locales") &&
+            id.match(/en.json|percentages.json/) === null
+          ) {
+            const index = id.indexOf("locales/");
+            // Taking the substring after "locales/"
+            return `locales/${id.substring(index + 8)}`;
+          }
         },
       },
-      sourcemap: true,
-      // don't auto-inline small assets (i.e. fonts hosted on CDN)
-      assetsInlineLimit: 0,
     },
-    plugins: [
-      Sitemap({
-        hostname: "https://excalidraw.com",
-        outDir: "build",
-        changefreq: "monthly",
-        // its static in public folder
-        generateRobotsTxt: false,
-      }),
-      woff2BrowserPlugin(),
-      react(),
-      checker({
-        typescript: true,
-        eslint:
-          envVars.VITE_APP_ENABLE_ESLINT === "false"
-            ? undefined
-            : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
-        overlay: {
-          initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
-          badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
-        },
-      }),
-      svgrPlugin(),
-      ViteEjsPlugin(),
-      VitePWA({
-        registerType: "autoUpdate",
-        devOptions: {
-          /* set this flag to true to enable in Development mode */
-          enabled: envVars.VITE_APP_ENABLE_PWA === "true",
-        },
+    sourcemap: true,
+  },
+  plugins: [
+    woff2BrowserPlugin(),
+    react(),
+    checker({
+      typescript: true,
+      eslint:
+        envVars.VITE_APP_ENABLE_ESLINT === "false"
+          ? undefined
+          : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
+      overlay: {
+        initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
+        badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
+      },
+    }),
+    svgrPlugin(),
+    ViteEjsPlugin(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        /* set this flag to true to enable in Development mode */
+        enabled: false,
+      },
 
-        workbox: {
-          // don't precache fonts, locales and separate chunks
-          globIgnores: [
-            "fonts.css",
-            "**/locales/**",
-            "service-worker.js",
-            "**/*.chunk-*.js",
-          ],
-          runtimeCaching: [
-            {
-              urlPattern: new RegExp(".+.woff2"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 1000,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
-                },
-                cacheableResponse: {
-                  // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
-                  statuses: [0, 200],
-                },
+      workbox: {
+        // Don't push fonts, locales and wasm to app precache
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js", "**/*.wasm-*.js"],
+        runtimeCaching: [
+          {
+            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
               },
             },
-            {
-              urlPattern: new RegExp("fonts.css"),
-              handler: "StaleWhileRevalidate",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 50,
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp("locales/[^/]+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "locales",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp(".chunk-.+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "chunk",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-                },
-              },
-            },
-          ],
-        },
-        manifest: {
-          short_name: "Excalidraw",
-          name: "Excalidraw",
-          description:
-            "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
-          icons: [
-            {
-              src: "android-chrome-192x192.png",
-              sizes: "192x192",
-              type: "image/png",
-            },
-            {
-              src: "apple-touch-icon.png",
-              type: "image/png",
-              sizes: "180x180",
-            },
-            {
-              src: "favicon-32x32.png",
-              sizes: "32x32",
-              type: "image/png",
-            },
-            {
-              src: "favicon-16x16.png",
-              sizes: "16x16",
-              type: "image/png",
-            },
-          ],
-          start_url: "/",
-          id:"excalidraw",
-          display: "standalone",
-          theme_color: "#121212",
-          background_color: "#ffffff",
-          file_handlers: [
-            {
-              action: "/",
-              accept: {
-                "application/vnd.excalidraw+json": [".excalidraw"],
-              },
-            },
-          ],
-          share_target: {
-            action: "/web-share-target",
-            method: "POST",
-            enctype: "multipart/form-data",
-            params: {
-              files: [
-                {
-                  name: "file",
-                  accept: [
-                    "application/vnd.excalidraw+json",
-                    "application/json",
-                    ".excalidraw",
-                  ],
-                },
-              ],
-            },
           },
-          screenshots: [
-            {
-              src: "/screenshots/virtual-whiteboard.png",
-              type: "image/png",
-              sizes: "462x945",
+          {
+            urlPattern: new RegExp("fonts.css"),
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+              },
             },
-            {
-              src: "/screenshots/wireframe.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp("locales/[^/]+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "locales",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
+              },
             },
-            {
-              src: "/screenshots/illustration.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp(".wasm-.+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "wasm",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
+              },
             },
-            {
-              src: "/screenshots/shapes.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+        ],
+      },
+      manifest: {
+        short_name: "Excalidraw",
+        name: "Excalidraw",
+        description:
+          "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
+        icons: [
+          {
+            src: "android-chrome-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "apple-touch-icon.png",
+            type: "image/png",
+            sizes: "180x180",
+          },
+          {
+            src: "favicon-32x32.png",
+            sizes: "32x32",
+            type: "image/png",
+          },
+          {
+            src: "favicon-16x16.png",
+            sizes: "16x16",
+            type: "image/png",
+          },
+        ],
+        start_url: "/",
+        display: "standalone",
+        theme_color: "#121212",
+        background_color: "#ffffff",
+        file_handlers: [
+          {
+            action: "/",
+            accept: {
+              "application/vnd.excalidraw+json": [".excalidraw"],
             },
-            {
-              src: "/screenshots/collaboration.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-            {
-              src: "/screenshots/export.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-          ],
+          },
+        ],
+        share_target: {
+          action: "/web-share-target",
+          method: "POST",
+          enctype: "multipart/form-data",
+          params: {
+            files: [
+              {
+                name: "file",
+                accept: [
+                  "application/vnd.excalidraw+json",
+                  "application/json",
+                  ".excalidraw",
+                ],
+              },
+            ],
+          },
         },
-      }),
-      createHtmlPlugin({
-        minify: true,
-      }),
-    ],
-    publicDir: "../public",
-  };
+        screenshots: [
+          {
+            src: "/screenshots/virtual-whiteboard.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/wireframe.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/illustration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/shapes.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/collaboration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/export.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+        ],
+      },
+    }),
+    createHtmlPlugin({
+      minify: true,
+    }),
+  ],
+  publicDir: "../public",
 });

package.json

@@ -45,7 +45,7 @@
     "vitest-canvas-mock": "0.3.3"
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": "18.0.0 - 20.x.x"
   },
   "homepage": ".",
   "prettier": "@excalidraw/prettier-config",
@@ -55,9 +55,15 @@
     "build:app": "yarn --cwd ./excalidraw-app build:app",
     "build:version": "yarn --cwd ./excalidraw-app build:version",
     "build": "yarn --cwd ./excalidraw-app build",
-    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
+    "fix:code": "yarn test:code --fix",
+    "fix:other": "yarn prettier --write",
+    "fix": "yarn fix:other && yarn fix:code",
+    "locales-coverage": "node scripts/build-locales-coverage.js",
+    "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "prepare": "husky install",
+    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "yarn --cwd ./excalidraw-app start",
-    "start:production": "yarn --cwd ./excalidraw-app start:production",
+    "start:app:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
     "test:app": "vitest",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
@@ -68,15 +74,9 @@
     "test:coverage": "vitest --coverage",
     "test:coverage:watch": "vitest --coverage --watch",
     "test:ui": "yarn test --ui --coverage.enabled=true",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
-    "locales-coverage": "node scripts/build-locales-coverage.js",
-    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "prepare": "husky install",
-    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
+    "build:preview": "yarn build && vite preview --port 5000",
     "release:excalidraw": "node scripts/release.js",
     "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/*/{build,dist}",
     "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",

packages/excalidraw/CHANGELOG.md

@@ -15,10 +15,6 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Added hand-drawn font for Chinese, Japanese and Korean (CJK) as a fallback for Excalifont. Improved overal text wrapping algorithm, not only accounting for CJK, but covering various edge cases with white spaces and text-align center/right. Added support for multi-codepoint emojis wrapping. Offloaded SVG export to Web Workers, with an automatic fallback to the main thread if not supported or not desired.[#8530](https://github.com/excalidraw/excalidraw/pull/8530)
-
-- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
-
 - `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
 
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)

packages/excalidraw/actions/actionClipboard.tsx

@@ -147,32 +147,14 @@ export const actionCopyAsSvg = register({
           name: app.getName(),
         },
       );
-
-      const selectedElements = app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      });
-
       return {
-        appState: {
-          toast: {
-            message: t("toast.copyToClipboardAsSvg", {
-              exportSelection: selectedElements.length
-                ? t("toast.selection")
-                : t("toast.canvas"),
-              exportColorScheme: appState.exportWithDarkMode
-                ? t("buttons.darkMode")
-                : t("buttons.lightMode"),
-            }),
-          },
-        },
         storeAction: StoreAction.NONE,
       };
     } catch (error: any) {
       console.error(error);
       return {
         appState: {
+          ...appState,
           errorMessage: error.message,
         },
         storeAction: StoreAction.NONE,

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,55 +0,0 @@
-import { register } from "./register";
-import { cropIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { isImageElement } from "../element/typeChecks";
-import type { ExcalidrawImageElement } from "../element/types";
-
-export const actionToggleCropEditor = register({
-  name: "cropEditor",
-  label: "helpDialog.cropStart",
-  icon: cropIcon,
-  viewMode: true,
-  trackEvent: { category: "menu" },
-  keywords: ["image", "crop"],
-  perform(elements, appState, _, app) {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    })[0] as ExcalidrawImageElement;
-
-    return {
-      appState: {
-        ...appState,
-        isCropping: false,
-        croppingElementId: selectedElement.id,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    if (
-      !appState.croppingElementId &&
-      selectedElements.length === 1 &&
-      isImageElement(selectedElements[0])
-    ) {
-      return true;
-    }
-    return false;
-  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const label = t("helpDialog.cropStart");
-
-    return (
-      <ToolButton
-        type="button"
-        icon={cropIcon}
-        title={label}
-        aria-label={label}
-        onClick={() => updateData(null)}
-      />
-    );
-  },
-});

packages/excalidraw/actions/actionFinalize.tsx

@@ -15,7 +15,7 @@ import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
 import { resetCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { isPathALoop } from "../shapes";
 
 export const actionFinalize = register({
@@ -115,7 +115,7 @@ export const actionFinalize = register({
           mutateElement(multiPointElement, {
             points: linePoints.map((p, index) =>
               index === linePoints.length - 1
-                ? pointFrom(firstPoint[0], firstPoint[1])
+                ? point(firstPoint[0], firstPoint[1])
                 : p,
             ),
           });

packages/excalidraw/actions/actionFlip.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Excalidraw } from "../index";
 import { render } from "../tests/test-utils";
 import { API } from "../tests/helpers/api";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
 
 const { h } = window;
@@ -50,11 +50,11 @@ describe("flipping re-centers selection", () => {
         startArrowhead: null,
         endArrowhead: "arrow",
         points: [
-          pointFrom(0, 0),
-          pointFrom(0, -35),
-          pointFrom(-90.9, -35),
-          pointFrom(-90.9, 204.9),
-          pointFrom(65.1, 204.9),
+          point(0, 0),
+          point(0, -35),
+          point(-90.9, -35),
+          point(-90.9, 204.9),
+          point(65.1, 204.9),
         ],
         elbowed: true,
       }),

packages/excalidraw/actions/actionHistory.tsx

@@ -5,7 +5,7 @@ import { t } from "../i18n";
 import type { History } from "../history";
 import { HistoryChangedEvent } from "../history";
 import type { AppClassProperties, AppState } from "../types";
-import { KEYS, matchKey } from "../keys";
+import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
 import type { SceneElementsMap } from "../element/types";
@@ -63,7 +63,9 @@ export const createUndoAction: ActionCreator = (history, store) => ({
       ),
     ),
   keyTest: (event) =>
-    event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
+    event[KEYS.CTRL_OR_CMD] &&
+    event.key.toLowerCase() === KEYS.Z &&
+    !event.shiftKey,
   PanelComponent: ({ updateData, data }) => {
     const { isUndoStackEmpty } = useEmitter<HistoryChangedEvent>(
       history.onHistoryChangedEmitter,
@@ -102,8 +104,10 @@ export const createRedoAction: ActionCreator = (history, store) => ({
       ),
     ),
   keyTest: (event) =>
-    (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
-    (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
+    (event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      event.key.toLowerCase() === KEYS.Z) ||
+    (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
   PanelComponent: ({ updateData, data }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,

packages/excalidraw/actions/actionProperties.tsx

@@ -116,7 +116,7 @@ import {
 import { mutateElbowArrow } from "../element/routing";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { LocalPoint } from "../../math";
-import { pointFrom, vector } from "../../math";
+import { point, vector } from "../../math";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -1651,7 +1651,7 @@ export const actionChangeArrowType = register({
             elementsMap,
             [finalStartPoint, finalEndPoint].map(
               (p): LocalPoint =>
-                pointFrom(p[0] - newElement.x, p[1] - newElement.y),
+                point(p[0] - newElement.x, p[1] - newElement.y),
             ),
             vector(0, 0),
             {

packages/excalidraw/actions/index.ts

@@ -88,5 +88,3 @@ export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
 
 export { actionToggleSearchMenu } from "./actionToggleSearchMenu";
-
-export { actionToggleCropEditor } from "./actionCropEditor";

packages/excalidraw/actions/shortcuts.ts

@@ -23,6 +23,7 @@ export type ShortcutName =
       | "sendToBack"
       | "bringToFront"
       | "copyAsPng"
+      | "copyAsSvg"
       | "group"
       | "ungroup"
       | "gridMode"
@@ -87,6 +88,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
       : getShortcutKey("CtrlOrCmd+Shift+]"),
   ],
   copyAsPng: [getShortcutKey("Shift+Alt+C")],
+  copyAsSvg: [],
   group: [getShortcutKey("CtrlOrCmd+G")],
   ungroup: [getShortcutKey("CtrlOrCmd+Shift+G")],
   gridMode: [getShortcutKey("CtrlOrCmd+'")],

packages/excalidraw/actions/types.ts

@@ -10,6 +10,7 @@ import type {
   BinaryFiles,
   UIAppState,
 } from "../types";
+import type { MarkOptional } from "../utility-types";
 import type { StoreActionType } from "../store";
 
 export type ActionSource =
@@ -23,7 +24,10 @@ export type ActionSource =
 export type ActionResult =
   | {
       elements?: readonly ExcalidrawElement[] | null;
-      appState?: Partial<AppState> | null;
+      appState?: MarkOptional<
+        AppState,
+        "offsetTop" | "offsetLeft" | "width" | "height"
+      > | null;
       files?: BinaryFiles | null;
       storeAction: StoreActionType;
       replaceFiles?: boolean;
@@ -134,8 +138,7 @@ export type ActionName =
   | "commandPalette"
   | "autoResize"
   | "elementStats"
-  | "searchMenu"
-  | "cropEditor";
+  | "searchMenu";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

packages/excalidraw/appState.ts

@@ -116,8 +116,6 @@ export const getDefaultAppState = (): Omit<
     objectsSnapModeEnabled: false,
     userToFollow: null,
     followedBy: new Set(),
-    isCropping: false,
-    croppingElementId: null,
     searchMatches: [],
   };
 };
@@ -239,8 +237,6 @@ const APP_STATE_STORAGE_CONF = (<
   objectsSnapModeEnabled: { browser: true, export: false, server: false },
   userToFollow: { browser: false, export: false, server: false },
   followedBy: { browser: false, export: false, server: false },
-  isCropping: { browser: false, export: false, server: false },
-  croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },
 });
 

packages/excalidraw/change.ts

@@ -17,16 +17,13 @@ import {
   hasBoundTextElement,
   isBindableElement,
   isBoundToContainer,
-  isImageElement,
   isTextElement,
 } from "./element/typeChecks";
 import type {
   ExcalidrawElement,
-  ExcalidrawImageElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
   NonDeleted,
-  Ordered,
   OrderedExcalidrawElement,
   SceneElementsMap,
 } from "./element/types";
@@ -629,18 +626,6 @@ export class AppStateChange implements Change<AppState> {
             );
 
             break;
-          case "croppingElementId": {
-            const croppingElementId = nextAppState[key];
-            const element =
-              croppingElementId && nextElements.get(croppingElementId);
-
-            if (element && !element.isDeleted) {
-              visibleDifferenceFlag.value = true;
-            } else {
-              nextAppState[key] = null;
-            }
-            break;
-          }
           case "editingGroupId":
             const editingGroupId = nextAppState[key];
 
@@ -771,7 +756,6 @@ export class AppStateChange implements Change<AppState> {
       selectedElementIds,
       editingLinearElementId,
       selectedLinearElementId,
-      croppingElementId,
       ...standaloneProps
     } = delta as ObservedAppState;
 
@@ -795,10 +779,7 @@ export class AppStateChange implements Change<AppState> {
   }
 }
 
-type ElementPartial<T extends ExcalidrawElement = ExcalidrawElement> = Omit<
-  ElementUpdate<Ordered<T>>,
-  "seed"
->;
+type ElementPartial = Omit<ElementUpdate<OrderedExcalidrawElement>, "seed">;
 
 /**
  * Elements change is a low level primitive to capture a change between two sets of elements.
@@ -1235,18 +1216,6 @@ export class ElementsChange implements Change<SceneElementsMap> {
       });
     }
 
-    if (isImageElement(element)) {
-      const _delta = delta as Delta<ElementPartial<ExcalidrawImageElement>>;
-      // we want to override `crop` only if modified so that we don't reset
-      // when undoing/redoing unrelated change
-      if (_delta.deleted.crop || _delta.inserted.crop) {
-        Object.assign(directlyApplicablePartial, {
-          // apply change verbatim
-          crop: _delta.inserted.crop ?? null,
-        });
-      }
-    }
-
     if (!flags.containsVisibleDifference) {
       // strip away fractional as even if it would be different, it doesn't have to result in visible change
       const { index, ...rest } = directlyApplicablePartial;

packages/excalidraw/charts.ts

@@ -1,5 +1,5 @@
 import type { Radians } from "../math";
-import { pointFrom } from "../math";
+import { point } from "../math";
 import {
   COLOR_PALETTE,
   DEFAULT_CHART_COLOR_INDEX,
@@ -260,7 +260,7 @@ const chartLines = (
     x,
     y,
     width: chartWidth,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    points: [point(0, 0), point(chartWidth, 0)],
   });
 
   const yLine = newLinearElement({
@@ -271,7 +271,7 @@ const chartLines = (
     x,
     y,
     height: chartHeight,
-    points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
+    points: [point(0, 0), point(0, -chartHeight)],
   });
 
   const maxLine = newLinearElement({
@@ -284,7 +284,7 @@ const chartLines = (
     strokeStyle: "dotted",
     width: chartWidth,
     opacity: GRID_OPACITY,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    points: [point(0, 0), point(chartWidth, 0)],
   });
 
   return [xLine, yLine, maxLine];
@@ -441,7 +441,7 @@ const chartTypeLine = (
       height: cy,
       strokeStyle: "dotted",
       opacity: GRID_OPACITY,
-      points: [pointFrom(0, 0), pointFrom(0, cy)],
+      points: [point(0, 0), point(0, cy)],
     });
   });
 

packages/excalidraw/components/Actions.tsx

@@ -26,7 +26,6 @@ import { trackEvent } from "../analytics";
 import {
   hasBoundTextElement,
   isElbowArrow,
-  isImageElement,
   isLinearElement,
   isTextElement,
 } from "../element/typeChecks";
@@ -128,11 +127,6 @@ export const SelectedShapeActions = ({
     isLinearElement(targetElements[0]) &&
     !isElbowArrow(targetElements[0]);
 
-  const showCropEditorAction =
-    !appState.croppingElementId &&
-    targetElements.length === 1 &&
-    isImageElement(targetElements[0]);
-
   return (
     <div className="panelColumn">
       <div>
@@ -251,7 +245,6 @@ export const SelectedShapeActions = ({
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
-            {showCropEditorAction && renderAction("cropEditor")}
             {showLineEditorAction && renderAction("toggleLinearEditor")}
           </div>
         </fieldset>

packages/excalidraw/components/App.tsx

@@ -35,7 +35,6 @@ import {
   actionToggleElementLock,
   actionToggleLinearEditor,
   actionToggleObjectsSnapMode,
-  actionToggleCropEditor,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
@@ -49,7 +48,7 @@ import {
 } from "../appState";
 import type { PastedMixedContent } from "../clipboard";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
-import { ARROW_TYPE, isSafari, type EXPORT_IMAGE_TYPES } from "../constants";
+import { ARROW_TYPE, type EXPORT_IMAGE_TYPES } from "../constants";
 import {
   APP_NAME,
   CURSOR_TYPE,
@@ -304,10 +303,8 @@ import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
 import {
   dataURLToFile,
-  dataURLToString,
   generateIdFromFile,
   getDataURL,
-  getDataURL_sync,
   getFileFromEvent,
   ImageURLToFile,
   isImageFileHandle,
@@ -340,6 +337,7 @@ import {
   isValidTextContainer,
   measureText,
   normalizeText,
+  wrapText,
 } from "../element/textElement";
 import {
   showHyperlinkTooltip,
@@ -447,20 +445,7 @@ import {
 } from "../element/flowchart";
 import { searchItemInFocusAtom } from "./SearchMenu";
 import type { LocalPoint, Radians } from "../../math";
-import {
-  clamp,
-  pointFrom,
-  pointDistance,
-  vector,
-  pointRotateRads,
-  vectorScale,
-  vectorFromPoint,
-  vectorSubtract,
-  vectorDot,
-  vectorNormalize,
-} from "../../math";
-import { cropElement } from "../element/cropElement";
-import { wrapText } from "../element/textWrapping";
+import { point, pointDistance, vector } from "../../math";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -604,7 +589,6 @@ class App extends React.Component<AppProps, AppState> {
   lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
     null;
   lastPointerMoveEvent: PointerEvent | null = null;
-  lastPointerMoveCoords: { x: number; y: number } | null = null;
   lastViewportPosition = { x: 0, y: 0 };
 
   animationFrameHandler = new AnimationFrameHandler();
@@ -752,7 +736,7 @@ class App extends React.Component<AppProps, AppState> {
       id: this.id,
     };
 
-    this.fonts = new Fonts(this.scene);
+    this.fonts = new Fonts({ scene: this.scene });
     this.history = new History();
 
     this.actionManager.registerAll(actions);
@@ -2124,7 +2108,9 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     if (actionResult.files) {
-      this.addMissingFiles(actionResult.files, actionResult.replaceFiles);
+      this.files = actionResult.replaceFiles
+        ? actionResult.files
+        : { ...this.files, ...actionResult.files };
       this.addNewImagesToImageCache();
     }
 
@@ -2164,12 +2150,11 @@ class App extends React.Component<AppProps, AppState> {
         editingTextElement = null;
       }
 
-      this.setState((prevAppState) => {
-        const actionAppState = actionResult.appState || {};
-
-        return {
-          ...prevAppState,
-          ...actionAppState,
+      this.setState((state) => {
+        // using Object.assign instead of spread to fool TS 4.2.2+ into
+        // regarding the resulting type as not containing undefined
+        // (which the following expression will never contain)
+        return Object.assign(actionResult.appState || {}, {
           // NOTE this will prevent opening context menu using an action
           // or programmatically from the host, so it will need to be
           // rewritten later
@@ -2180,7 +2165,7 @@ class App extends React.Component<AppProps, AppState> {
           theme,
           name,
           errorMessage,
-        };
+        });
       });
 
       didUpdate = true;
@@ -2320,11 +2305,11 @@ class App extends React.Component<AppProps, AppState> {
     // clear the shape and image cache so that any images in initialData
     // can be loaded fresh
     this.clearImageShapeCache();
-
-    // manually loading the font faces seems faster even in browsers that do fire the loadingdone event
-    this.fonts.loadSceneFonts().then((fontFaces) => {
-      this.fonts.onLoaded(fontFaces);
-    });
+    // FontFaceSet loadingdone event we listen on may not always
+    // fire (looking at you Safari), so on init we manually load all
+    // fonts and rerender scene text elements once done. This also
+    // seems faster even in browsers that do fire the loadingdone event.
+    this.fonts.loadSceneFonts();
   };
 
   private isMobileBreakpoint = (width: number, height: number) => {
@@ -2485,7 +2470,7 @@ class App extends React.Component<AppProps, AppState> {
     this.renderer.destroy();
     this.scene.destroy();
     this.scene = new Scene();
-    this.fonts = new Fonts(this.scene);
+    this.fonts = new Fonts({ scene: this.scene });
     this.renderer = new Renderer(this.scene);
     this.files = {};
     this.imageCache.clear();
@@ -2567,8 +2552,8 @@ class App extends React.Component<AppProps, AppState> {
       ),
       // rerender text elements on font load to fix #637 && #1553
       addEventListener(document.fonts, "loadingdone", (event) => {
-        const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
-        this.fonts.onLoaded(fontFaces);
+        const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;
+        this.fonts.onLoaded(loadedFontFaces);
       }),
       // Safari-only desktop pinch zoom
       addEventListener(
@@ -3236,15 +3221,8 @@ class App extends React.Component<AppProps, AppState> {
       }
     });
 
-    // paste event may not fire FontFace loadingdone event in Safari, hence loading font faces manually
-    if (isSafari) {
-      Fonts.loadElementsFonts(newElements).then((fontFaces) => {
-        this.fonts.onLoaded(fontFaces);
-      });
-    }
-
     if (opts.files) {
-      this.addMissingFiles(opts.files);
+      this.files = { ...this.files, ...opts.files };
     }
 
     this.store.shouldCaptureIncrement();
@@ -3753,56 +3731,23 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  /**
-   * adds supplied files to existing files in the appState.
-   * NOTE if file already exists in editor state, the file data is not updated
-   * */
+  /** adds supplied files to existing files in the appState */
   public addFiles: ExcalidrawImperativeAPI["addFiles"] = withBatchedUpdates(
     (files) => {
-      const { addedFiles } = this.addMissingFiles(files);
+      const filesMap = files.reduce((acc, fileData) => {
+        acc.set(fileData.id, fileData);
+        return acc;
+      }, new Map<FileId, BinaryFileData>());
 
-      this.clearImageShapeCache(addedFiles);
+      this.files = { ...this.files, ...Object.fromEntries(filesMap) };
+
+      this.clearImageShapeCache(Object.fromEntries(filesMap));
       this.scene.triggerUpdate();
 
       this.addNewImagesToImageCache();
     },
   );
 
-  private addMissingFiles = (
-    files: BinaryFiles | BinaryFileData[],
-    replace = false,
-  ) => {
-    const nextFiles = replace ? {} : { ...this.files };
-    const addedFiles: BinaryFiles = {};
-
-    const _files = Array.isArray(files) ? files : Object.values(files);
-
-    for (const fileData of _files) {
-      if (nextFiles[fileData.id]) {
-        continue;
-      }
-
-      addedFiles[fileData.id] = fileData;
-      nextFiles[fileData.id] = fileData;
-
-      if (fileData.mimeType === MIME_TYPES.svg) {
-        const restoredDataURL = getDataURL_sync(
-          normalizeSVG(dataURLToString(fileData.dataURL)),
-          MIME_TYPES.svg,
-        );
-        if (fileData.dataURL !== restoredDataURL) {
-          // bump version so persistence layer can update the store
-          fileData.version = (fileData.version ?? 1) + 1;
-          fileData.dataURL = restoredDataURL;
-        }
-      }
-    }
-
-    this.files = nextFiles;
-
-    return { addedFiles };
-  };
-
   public updateScene = withBatchedUpdates(
     <K extends keyof AppState>(sceneData: {
       elements?: SceneData["elements"];
@@ -3978,28 +3923,6 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (!isInputLike(event.target)) {
-        if (
-          (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
-          this.state.croppingElementId
-        ) {
-          this.finishImageCropping();
-          return;
-        }
-
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElementsMap(),
-          this.state,
-        );
-
-        if (
-          selectedElements.length === 1 &&
-          isImageElement(selectedElements[0]) &&
-          event.key === KEYS.ENTER
-        ) {
-          this.startImageCropping(selectedElements[0]);
-          return;
-        }
-
         if (
           event.key === KEYS.ESCAPE &&
           this.flowChartCreator.isCreatingChart
@@ -4814,13 +4737,10 @@ class App extends React.Component<AppProps, AppState> {
           this.store.shouldCaptureIncrement();
         }
 
-        flushSync(() => {
-          this.setState({
-            newElement: null,
-            editingTextElement: null,
-          });
+        this.setState({
+          newElement: null,
+          editingTextElement: null,
         });
-
         if (this.state.activeTool.locked) {
           setCursorForShape(this.interactiveCanvas, this.state);
         }
@@ -4987,10 +4907,10 @@ class App extends React.Component<AppProps, AppState> {
       const selectionShape = getSelectionBoxShape(
         element,
         this.scene.getNonDeletedElementsMap(),
-        isImageElement(element) ? 0 : this.getElementHitThreshold(),
+        this.getElementHitThreshold(),
       );
 
-      return isPointInShape(pointFrom(x, y), selectionShape);
+      return isPointInShape(point(x, y), selectionShape);
     }
 
     // take bound text element into consideration for hit collision as well
@@ -5216,22 +5136,6 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private startImageCropping = (image: ExcalidrawImageElement) => {
-    this.store.shouldCaptureIncrement();
-    this.setState({
-      croppingElementId: image.id,
-    });
-  };
-
-  private finishImageCropping = () => {
-    if (this.state.croppingElementId) {
-      this.store.shouldCaptureIncrement();
-      this.setState({
-        croppingElementId: null,
-      });
-    }
-  };
-
   private handleCanvasDoubleClick = (
     event: React.MouseEvent<HTMLCanvasElement>,
   ) => {
@@ -5263,11 +5167,6 @@ class App extends React.Component<AppProps, AppState> {
       }
     }
 
-    if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
-      this.startImageCropping(selectedElements[0]);
-      return;
-    }
-
     resetCursor(this.interactiveCanvas);
 
     let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
@@ -5370,7 +5269,7 @@ class App extends React.Component<AppProps, AppState> {
           element,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom(scenePointer.x, scenePointer.y),
+          point(scenePointer.x, scenePointer.y),
           this.device.editor.isMobile,
         )
       );
@@ -5382,14 +5281,11 @@ class App extends React.Component<AppProps, AppState> {
     isTouchScreen: boolean,
   ) => {
     const draggedDistance = pointDistance(
-      pointFrom(
+      point(
         this.lastPointerDownEvent!.clientX,
         this.lastPointerDownEvent!.clientY,
       ),
-      pointFrom(
-        this.lastPointerUpEvent!.clientX,
-        this.lastPointerUpEvent!.clientY,
-      ),
+      point(this.lastPointerUpEvent!.clientX, this.lastPointerUpEvent!.clientY),
     );
     if (
       !this.hitLinkElement ||
@@ -5408,7 +5304,7 @@ class App extends React.Component<AppProps, AppState> {
       this.hitLinkElement,
       elementsMap,
       this.state,
-      pointFrom(lastPointerDownCoords.x, lastPointerDownCoords.y),
+      point(lastPointerDownCoords.x, lastPointerDownCoords.y),
       this.device.editor.isMobile,
     );
     const lastPointerUpCoords = viewportCoordsToSceneCoords(
@@ -5419,7 +5315,7 @@ class App extends React.Component<AppProps, AppState> {
       this.hitLinkElement,
       elementsMap,
       this.state,
-      pointFrom(lastPointerUpCoords.x, lastPointerUpCoords.y),
+      point(lastPointerUpCoords.x, lastPointerUpCoords.y),
       this.device.editor.isMobile,
     );
     if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
@@ -5669,7 +5565,7 @@ class App extends React.Component<AppProps, AppState> {
         // threshold, add a point
         if (
           pointDistance(
-            pointFrom(scenePointerX - rx, scenePointerY - ry),
+            point(scenePointerX - rx, scenePointerY - ry),
             lastPoint,
           ) >= LINE_CONFIRM_THRESHOLD
         ) {
@@ -5678,7 +5574,7 @@ class App extends React.Component<AppProps, AppState> {
             {
               points: [
                 ...points,
-                pointFrom<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
+                point<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
               ],
             },
             false,
@@ -5692,7 +5588,7 @@ class App extends React.Component<AppProps, AppState> {
         points.length > 2 &&
         lastCommittedPoint &&
         pointDistance(
-          pointFrom(scenePointerX - rx, scenePointerY - ry),
+          point(scenePointerX - rx, scenePointerY - ry),
           lastCommittedPoint,
         ) < LINE_CONFIRM_THRESHOLD
       ) {
@@ -5740,7 +5636,7 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
             [
               ...points.slice(0, -1),
-              pointFrom<LocalPoint>(
+              point<LocalPoint>(
                 lastCommittedX + dxFromLastCommitted,
                 lastCommittedY + dyFromLastCommitted,
               ),
@@ -5759,7 +5655,7 @@ class App extends React.Component<AppProps, AppState> {
             {
               points: [
                 ...points.slice(0, -1),
-                pointFrom<LocalPoint>(
+                point<LocalPoint>(
                   lastCommittedX + dxFromLastCommitted,
                   lastCommittedY + dyFromLastCommitted,
                 ),
@@ -5988,8 +5884,8 @@ class App extends React.Component<AppProps, AppState> {
     };
 
     const distance = pointDistance(
-      pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-      pointFrom(scenePointer.x, scenePointer.y),
+      point(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
+      point(scenePointer.x, scenePointer.y),
     );
     const threshold = this.getElementHitThreshold();
     const p = { ...pointerDownState.lastCoords };
@@ -6501,7 +6397,7 @@ class App extends React.Component<AppProps, AppState> {
           this.hitLinkElement,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom(scenePointer.x, scenePointer.y),
+          point(scenePointer.x, scenePointer.y),
         )
       ) {
         this.handleEmbeddableCenterClick(this.hitLinkElement);
@@ -6837,24 +6733,11 @@ class App extends React.Component<AppProps, AppState> {
             this.device,
           );
         if (elementWithTransformHandleType != null) {
-          if (
-            elementWithTransformHandleType.transformHandleType === "rotation"
-          ) {
-            this.setState({
-              resizingElement: elementWithTransformHandleType.element,
-            });
-            pointerDownState.resize.handleType =
-              elementWithTransformHandleType.transformHandleType;
-          } else if (this.state.croppingElementId) {
-            pointerDownState.resize.handleType =
-              elementWithTransformHandleType.transformHandleType;
-          } else {
-            this.setState({
-              resizingElement: elementWithTransformHandleType.element,
-            });
-            pointerDownState.resize.handleType =
-              elementWithTransformHandleType.transformHandleType;
-          }
+          this.setState({
+            resizingElement: elementWithTransformHandleType.element,
+          });
+          pointerDownState.resize.handleType =
+            elementWithTransformHandleType.transformHandleType;
         }
       } else if (selectedElements.length > 1) {
         pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(
@@ -6921,13 +6804,6 @@ class App extends React.Component<AppProps, AppState> {
             pointerDownState.origin.y,
           );
 
-        if (
-          this.state.croppingElementId &&
-          pointerDownState.hit.element?.id !== this.state.croppingElementId
-        ) {
-          this.finishImageCropping();
-        }
-
         if (pointerDownState.hit.element) {
           // Early return if pointer is hitting link icon
           const hitLinkElement = this.getElementLinkAtPosition(
@@ -7212,7 +7088,7 @@ class App extends React.Component<AppProps, AppState> {
       simulatePressure,
       locked: false,
       frameId: topLayerFrame ? topLayerFrame.id : null,
-      points: [pointFrom<LocalPoint>(0, 0)],
+      points: [point<LocalPoint>(0, 0)],
       pressures: simulatePressure ? [] : [event.pressure],
     });
 
@@ -7421,10 +7297,7 @@ class App extends React.Component<AppProps, AppState> {
         multiElement.points.length > 1 &&
         lastCommittedPoint &&
         pointDistance(
-          pointFrom(
-            pointerDownState.origin.x - rx,
-            pointerDownState.origin.y - ry,
-          ),
+          point(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry),
           lastCommittedPoint,
         ) < LINE_CONFIRM_THRESHOLD
       ) {
@@ -7526,7 +7399,7 @@ class App extends React.Component<AppProps, AppState> {
         };
       });
       mutateElement(element, {
-        points: [...element.points, pointFrom<LocalPoint>(0, 0)],
+        points: [...element.points, point<LocalPoint>(0, 0)],
       });
       const boundElement = getHoveredElementForBinding(
         pointerDownState.origin,
@@ -7729,11 +7602,6 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
   ) {
     return withBatchedUpdatesThrottled((event: PointerEvent) => {
-      const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
-      const lastPointerCoords =
-        this.lastPointerMoveCoords ?? pointerDownState.origin;
-      this.lastPointerMoveCoords = pointerCoords;
-
       // We need to initialize dragOffsetXY only after we've updated
       // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove
       // event handler should hopefully ensure we're already working with
@@ -7756,6 +7624,8 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
+      const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
+
       if (isEraserActive(this.state)) {
         this.handleEraser(event, pointerDownState, pointerCoords);
         return;
@@ -7782,8 +7652,8 @@ class App extends React.Component<AppProps, AppState> {
       ) {
         if (
           pointDistance(
-            pointFrom(pointerCoords.x, pointerCoords.y),
-            pointFrom(pointerDownState.origin.x, pointerDownState.origin.y),
+            point(pointerCoords.x, pointerCoords.y),
+            point(pointerDownState.origin.x, pointerDownState.origin.y),
           ) < DRAGGING_THRESHOLD
         ) {
           return;
@@ -7792,9 +7662,6 @@ class App extends React.Component<AppProps, AppState> {
       if (pointerDownState.resize.isResizing) {
         pointerDownState.lastCoords.x = pointerCoords.x;
         pointerDownState.lastCoords.y = pointerCoords.y;
-        if (this.maybeHandleCrop(pointerDownState, event)) {
-          return true;
-        }
         if (this.maybeHandleResize(pointerDownState, event)) {
           return true;
         }
@@ -7968,96 +7835,6 @@ class App extends React.Component<AppProps, AppState> {
             }
           }
 
-          // #region move crop region
-          if (this.state.croppingElementId) {
-            const croppingElement = this.scene
-              .getNonDeletedElementsMap()
-              .get(this.state.croppingElementId);
-
-            if (
-              croppingElement &&
-              isImageElement(croppingElement) &&
-              croppingElement.crop !== null &&
-              pointerDownState.hit.element === croppingElement
-            ) {
-              const crop = croppingElement.crop;
-              const image =
-                isInitializedImageElement(croppingElement) &&
-                this.imageCache.get(croppingElement.fileId)?.image;
-
-              if (image && !(image instanceof Promise)) {
-                const instantDragOffset = vectorScale(
-                  vector(
-                    pointerCoords.x - lastPointerCoords.x,
-                    pointerCoords.y - lastPointerCoords.y,
-                  ),
-                  Math.max(this.state.zoom.value, 2),
-                );
-
-                const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
-                  croppingElement,
-                  elementsMap,
-                );
-
-                const topLeft = vectorFromPoint(
-                  pointRotateRads(
-                    pointFrom(x1, y1),
-                    pointFrom(cx, cy),
-                    croppingElement.angle,
-                  ),
-                );
-                const topRight = vectorFromPoint(
-                  pointRotateRads(
-                    pointFrom(x2, y1),
-                    pointFrom(cx, cy),
-                    croppingElement.angle,
-                  ),
-                );
-                const bottomLeft = vectorFromPoint(
-                  pointRotateRads(
-                    pointFrom(x1, y2),
-                    pointFrom(cx, cy),
-                    croppingElement.angle,
-                  ),
-                );
-                const topEdge = vectorNormalize(
-                  vectorSubtract(topRight, topLeft),
-                );
-                const leftEdge = vectorNormalize(
-                  vectorSubtract(bottomLeft, topLeft),
-                );
-
-                // project instantDrafOffset onto leftEdge and topEdge to decompose
-                const offsetVector = vector(
-                  vectorDot(instantDragOffset, topEdge),
-                  vectorDot(instantDragOffset, leftEdge),
-                );
-
-                const nextCrop = {
-                  ...crop,
-                  x: clamp(
-                    crop.x -
-                      offsetVector[0] * Math.sign(croppingElement.scale[0]),
-                    0,
-                    image.naturalWidth - crop.width,
-                  ),
-                  y: clamp(
-                    crop.y -
-                      offsetVector[1] * Math.sign(croppingElement.scale[1]),
-                    0,
-                    image.naturalHeight - crop.height,
-                  ),
-                };
-
-                mutateElement(croppingElement, {
-                  crop: nextCrop,
-                });
-
-                return;
-              }
-            }
-          }
-
           // Snap cache *must* be synchronously popuplated before initial drag,
           // otherwise the first drag even will not snap, causing a jump before
           // it snaps to its position if previously snapped already.
@@ -8191,7 +7968,6 @@ class App extends React.Component<AppProps, AppState> {
             this.maybeCacheVisibleGaps(event, selectedElements, true);
             this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
           }
-
           return;
         }
       }
@@ -8226,7 +8002,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points, pointFrom<LocalPoint>(dx, dy)],
+                points: [...points, point<LocalPoint>(dx, dy)],
                 pressures,
               },
               false,
@@ -8255,7 +8031,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points, pointFrom<LocalPoint>(dx, dy)],
+                points: [...points, point<LocalPoint>(dx, dy)],
               },
               false,
             );
@@ -8263,7 +8039,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElbowArrow(
               newElement,
               elementsMap,
-              [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
+              [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
               vector(0, 0),
               undefined,
               {
@@ -8275,7 +8051,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
+                points: [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
               },
               false,
             );
@@ -8440,18 +8216,15 @@ class App extends React.Component<AppProps, AppState> {
       const {
         newElement,
         resizingElement,
-        croppingElementId,
         multiElement,
         activeTool,
         isResizing,
         isRotating,
-        isCropping,
       } = this.state;
 
       this.setState((prevState) => ({
         isResizing: false,
         isRotating: false,
-        isCropping: false,
         resizingElement: null,
         selectionElement: null,
         frameToHighlight: null,
@@ -8461,8 +8234,6 @@ class App extends React.Component<AppProps, AppState> {
         originSnapOffset: null,
       }));
 
-      this.lastPointerMoveCoords = null;
-
       SnapCache.setReferenceSnapPoints(null);
       SnapCache.setVisibleGaps(null);
 
@@ -8589,9 +8360,9 @@ class App extends React.Component<AppProps, AppState> {
           : [...newElement.pressures, childEvent.pressure];
 
         mutateElement(newElement, {
-          points: [...points, pointFrom<LocalPoint>(dx, dy)],
+          points: [...points, point<LocalPoint>(dx, dy)],
           pressures,
-          lastCommittedPoint: pointFrom<LocalPoint>(dx, dy),
+          lastCommittedPoint: point<LocalPoint>(dx, dy),
         });
 
         this.actionManager.executeAction(actionFinalize);
@@ -8638,7 +8409,7 @@ class App extends React.Component<AppProps, AppState> {
           mutateElement(newElement, {
             points: [
               ...newElement.points,
-              pointFrom<LocalPoint>(
+              point<LocalPoint>(
                 pointerCoords.x - newElement.x,
                 pointerCoords.y - newElement.y,
               ),
@@ -8945,20 +8716,6 @@ class App extends React.Component<AppProps, AppState> {
         }
       }
 
-      // click outside the cropping region to exit
-      if (
-        // not in the cropping mode at all
-        !croppingElementId ||
-        // in the cropping mode
-        (croppingElementId &&
-          // not cropping and no hit element
-          ((!hitElement && !isCropping) ||
-            // hitting something else
-            (hitElement && hitElement.id !== croppingElementId)))
-      ) {
-        this.finishImageCropping();
-      }
-
       const pointerStart = this.lastPointerDownEvent;
       const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;
 
@@ -8966,8 +8723,8 @@ class App extends React.Component<AppProps, AppState> {
         this.eraserTrail.endPath();
 
         const draggedDistance = pointDistance(
-          pointFrom(pointerStart.clientX, pointerStart.clientY),
-          pointFrom(pointerEnd.clientX, pointerEnd.clientY),
+          point(pointerStart.clientX, pointerStart.clientY),
+          point(pointerEnd.clientX, pointerEnd.clientY),
         );
 
         if (draggedDistance === 0) {
@@ -9214,12 +8971,7 @@ class App extends React.Component<AppProps, AppState> {
         this.store.shouldCaptureIncrement();
       }
 
-      if (
-        pointerDownState.drag.hasOccurred ||
-        isResizing ||
-        isRotating ||
-        isCropping
-      ) {
+      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
         // We only allow binding via linear elements, specifically via dragging
         // the endpoints ("start" or "end").
         const linearElements = this.scene
@@ -9325,7 +9077,7 @@ class App extends React.Component<AppProps, AppState> {
     if (mimeType === MIME_TYPES.svg) {
       try {
         imageFile = SVGStringToFile(
-          normalizeSVG(await imageFile.text()),
+          await normalizeSVG(await imageFile.text()),
           imageFile.name,
         );
       } catch (error: any) {
@@ -9393,15 +9145,16 @@ class App extends React.Component<AppProps, AppState> {
     return new Promise<NonDeleted<InitializedExcalidrawImageElement>>(
       async (resolve, reject) => {
         try {
-          this.addMissingFiles([
-            {
+          this.files = {
+            ...this.files,
+            [fileId]: {
               mimeType,
               id: fileId,
               dataURL,
               created: Date.now(),
               lastRetrieved: Date.now(),
             },
-          ]);
+          };
           const cachedImageData = this.imageCache.get(fileId);
           if (!cachedImageData) {
             this.addNewImagesToImageCache();
@@ -9432,7 +9185,7 @@ class App extends React.Component<AppProps, AppState> {
   /**
    * inserts image into elements array and rerenders
    */
-  insertImageElement = async (
+  private insertImageElement = async (
     imageElement: ExcalidrawImageElement,
     imageFile: File,
     showCursorImagePreview?: boolean,
@@ -9585,7 +9338,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  initializeImageDimensions = (
+  private initializeImageDimensions = (
     imageElement: ExcalidrawImageElement,
     forceNaturalSize = false,
   ) => {
@@ -9633,13 +9386,7 @@ class App extends React.Component<AppProps, AppState> {
       const x = imageElement.x + imageElement.width / 2 - width / 2;
       const y = imageElement.y + imageElement.height / 2 - height / 2;
 
-      mutateElement(imageElement, {
-        x,
-        y,
-        width,
-        height,
-        crop: null,
-      });
+      mutateElement(imageElement, { x, y, width, height });
     }
   };
 
@@ -10178,83 +9925,6 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private maybeHandleCrop = (
-    pointerDownState: PointerDownState,
-    event: MouseEvent | KeyboardEvent,
-  ): boolean => {
-    // to crop, we must already be in the cropping mode, where croppingElement has been set
-    if (!this.state.croppingElementId) {
-      return false;
-    }
-
-    const transformHandleType = pointerDownState.resize.handleType;
-    const pointerCoords = pointerDownState.lastCoords;
-    const [x, y] = getGridPoint(
-      pointerCoords.x - pointerDownState.resize.offset.x,
-      pointerCoords.y - pointerDownState.resize.offset.y,
-      this.getEffectiveGridSize(),
-    );
-
-    const croppingElement = this.scene
-      .getNonDeletedElementsMap()
-      .get(this.state.croppingElementId);
-
-    if (
-      transformHandleType &&
-      croppingElement &&
-      isImageElement(croppingElement)
-    ) {
-      const croppingAtStateStart = pointerDownState.originalElements.get(
-        croppingElement.id,
-      );
-
-      const image =
-        isInitializedImageElement(croppingElement) &&
-        this.imageCache.get(croppingElement.fileId)?.image;
-
-      if (
-        croppingAtStateStart &&
-        isImageElement(croppingAtStateStart) &&
-        image &&
-        !(image instanceof Promise)
-      ) {
-        mutateElement(
-          croppingElement,
-          cropElement(
-            croppingElement,
-            transformHandleType,
-            image.naturalWidth,
-            image.naturalHeight,
-            x,
-            y,
-            event.shiftKey
-              ? croppingAtStateStart.width / croppingAtStateStart.height
-              : undefined,
-          ),
-        );
-
-        updateBoundElements(
-          croppingElement,
-          this.scene.getNonDeletedElementsMap(),
-          {
-            oldSize: {
-              width: croppingElement.width,
-              height: croppingElement.height,
-            },
-          },
-        );
-
-        this.setState({
-          isCropping: transformHandleType && transformHandleType !== "rotation",
-        });
-      }
-
-      return true;
-    }
-
-    return false;
-  };
-
   private maybeHandleResize = (
     pointerDownState: PointerDownState,
     event: MouseEvent | KeyboardEvent,
@@ -10271,9 +9941,7 @@ class App extends React.Component<AppProps, AppState> {
       // Frames cannot be rotated.
       (selectedFrames.length > 0 && transformHandleType === "rotation") ||
       // Elbow arrows cannot be transformed (resized or rotated).
-      (selectedElements.length === 1 && isElbowArrow(selectedElements[0])) ||
-      // Do not resize when in crop mode
-      this.state.croppingElementId
+      (selectedElements.length === 1 && isElbowArrow(selectedElements[0]))
     ) {
       return false;
     }
@@ -10448,8 +10116,6 @@ class App extends React.Component<AppProps, AppState> {
       actionSelectAllElementsInFrame,
       actionRemoveAllElementsFromFrame,
       CONTEXT_MENU_SEPARATOR,
-      actionToggleCropEditor,
-      CONTEXT_MENU_SEPARATOR,
       ...options,
       CONTEXT_MENU_SEPARATOR,
       actionCopyStyles,

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -279,7 +279,6 @@ function CommandPaletteInner({
         actionManager.actions.increaseFontSize,
         actionManager.actions.decreaseFontSize,
         actionManager.actions.toggleLinearEditor,
-        actionManager.actions.cropEditor,
         actionLink,
       ].map((action: Action) =>
         actionToCommand(

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -21,7 +21,7 @@ export const DEFAULT_FONTS = [
     value: FONT_FAMILY.Excalifont,
     icon: FreedrawIcon,
     text: t("labels.handDrawn"),
-    testId: "font-family-hand-drawn",
+    testId: "font-family-handrawn",
   },
   {
     value: FONT_FAMILY.Nunito,

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -21,7 +21,6 @@ import { t } from "../../i18n";
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 import { Fonts } from "../../fonts";
 import type { ValueOf } from "../../utility-types";
-import { FontFamilyNormalIcon } from "../icons";
 
 export interface FontDescriptor {
   value: number;
@@ -63,14 +62,12 @@ export const FontPickerList = React.memo(
     const allFonts = useMemo(
       () =>
         Array.from(Fonts.registered.entries())
-          .filter(
-            ([_, { metadata }]) => !metadata.serverSide && !metadata.fallback,
-          )
-          .map(([familyId, { metadata, fontFaces }]) => {
+          .filter(([_, { metadata }]) => !metadata.serverSide)
+          .map(([familyId, { metadata, fonts }]) => {
             const fontDescriptor = {
               value: familyId,
-              icon: metadata.icon ?? FontFamilyNormalIcon,
-              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
+              icon: metadata.icon,
+              text: fonts[0].fontFace.family,
             };
 
             if (metadata.deprecated) {
@@ -92,7 +89,7 @@ export const FontPickerList = React.memo(
     );
 
     const sceneFamilies = useMemo(
-      () => new Set(fonts.getSceneFamilies()),
+      () => new Set(fonts.getSceneFontFamilies()),
       // cache per selected font family, so hover re-render won't mess it up
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [selectedFontFamily],

packages/excalidraw/components/HelpDialog.tsx

@@ -22,7 +22,7 @@ const Header = () => (
     </a>
     <a
       className="HelpDialog__btn"
-      href="https://plus.excalidraw.com/blog"
+      href="https://blog.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -222,16 +222,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               ]}
               isOr={false}
             />
-            <Shortcut
-              label={t("helpDialog.cropStart")}
-              shortcuts={[t("helpDialog.doubleClick"), getShortcutKey("Enter")]}
-              isOr={true}
-            />
-            <Shortcut
-              label={t("helpDialog.cropFinish")}
-              shortcuts={[getShortcutKey("Enter"), getShortcutKey("Escape")]}
-              isOr={true}
-            />
             <Shortcut label={t("toolBar.lock")} shortcuts={[KEYS.Q]} />
             <Shortcut
               label={t("helpDialog.preventBinding")}

packages/excalidraw/components/HintViewer.tsx

@@ -100,14 +100,6 @@ const getHints = ({
     return t("hints.text_editing");
   }
 
-  if (appState.croppingElementId) {
-    return t("hints.leaveCropEditor");
-  }
-
-  if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
-    return t("hints.enterCropEditor");
-  }
-
   if (activeTool.type === "selection") {
     if (
       appState.selectionElement &&

packages/excalidraw/components/PasteChartDialog.tsx

@@ -48,9 +48,6 @@ const ChartPreviewBtn = (props: {
           viewBackgroundColor: oc.white,
         },
         null, // files
-        {
-          skipInliningFonts: true,
-        },
       );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -20,7 +20,7 @@ import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { pointFrom, type GlobalPoint } from "../../../math";
+import { point, type GlobalPoint } from "../../../math";
 
 interface MultiDimensionProps {
   property: "width" | "height";
@@ -182,7 +182,7 @@ const handleDimensionChange: DragInputCallbackType<
           nextHeight,
           initialHeight,
           aspectRatio,
-          pointFrom(x1, y1),
+          point(x1, y1),
           property,
           latestElements,
           originalElements,
@@ -287,7 +287,7 @@ const handleDimensionChange: DragInputCallbackType<
         nextHeight,
         initialHeight,
         aspectRatio,
-        pointFrom(x1, y1),
+        point(x1, y1),
         property,
         latestElements,
         originalElements,

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -13,7 +13,7 @@ import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import type { AppState } from "../../types";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 
 interface MultiPositionProps {
   property: "x" | "y";
@@ -44,8 +44,8 @@ const moveElements = (
       origElement.y + origElement.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(origElement.x, origElement.y),
-      pointFrom(cx, cy),
+      point(origElement.x, origElement.y),
+      point(cx, cy),
       origElement.angle,
     );
 
@@ -97,8 +97,8 @@ const moveGroupTo = (
       ];
 
       const [topLeftX, topLeftY] = pointRotateRads(
-        pointFrom(latestElement.x, latestElement.y),
-        pointFrom(cx, cy),
+        point(latestElement.x, latestElement.y),
+        point(cx, cy),
         latestElement.angle,
       );
 
@@ -171,8 +171,8 @@ const handlePositionChange: DragInputCallbackType<
             origElement.y + origElement.height / 2,
           ];
           const [topLeftX, topLeftY] = pointRotateRads(
-            pointFrom(origElement.x, origElement.y),
-            pointFrom(cx, cy),
+            point(origElement.x, origElement.y),
+            point(cx, cy),
             origElement.angle,
           );
 
@@ -241,8 +241,8 @@ const MultiPosition = ({
         const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
 
         const [topLeftX, topLeftY] = pointRotateRads(
-          pointFrom(el.x, el.y),
-          pointFrom(cx, cy),
+          point(el.x, el.y),
+          point(cx, cy),
           el.angle,
         );
 

packages/excalidraw/components/Stats/Position.tsx

@@ -4,7 +4,7 @@ import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 
 interface PositionProps {
   property: "x" | "y";
@@ -33,8 +33,8 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     origElement.y + origElement.height / 2,
   ];
   const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(origElement.x, origElement.y),
-    pointFrom(cx, cy),
+    point(origElement.x, origElement.y),
+    point(cx, cy),
     origElement.angle,
   );
 
@@ -93,8 +93,8 @@ const Position = ({
   appState,
 }: PositionProps) => {
   const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(element.x, element.y),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
+    point(element.x, element.y),
+    point(element.x + element.width / 2, element.y + element.height / 2),
     element.angle,
   );
   const value =

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

@@ -25,7 +25,7 @@ import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
 import type { Degrees } from "../../../math";
-import { degreesToRadians, pointFrom, pointRotateRads } from "../../../math";
+import { degreesToRadians, point, pointRotateRads } from "../../../math";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -264,8 +264,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -283,8 +283,8 @@ describe("stats for a generic element", () => {
     testInputProperty(rectangle, "angle", "A", 0, 45);
 
     let [newTopLeftX, newTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -294,8 +294,8 @@ describe("stats for a generic element", () => {
     testInputProperty(rectangle, "angle", "A", 45, 66);
 
     [newTopLeftX, newTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@@ -311,8 +311,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@@ -321,8 +321,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@@ -334,8 +334,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 

packages/excalidraw/components/Stats/utils.ts

@@ -1,5 +1,5 @@
 import type { Radians } from "../../../math";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
@@ -231,8 +231,8 @@ export const moveElement = (
     originalElement.y + originalElement.height / 2,
   ];
   const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(originalElement.x, originalElement.y),
-    pointFrom(cx, cy),
+    point(originalElement.x, originalElement.y),
+    point(cx, cy),
     originalElement.angle,
   );
 
@@ -240,8 +240,8 @@ export const moveElement = (
   const changeInY = newTopLeftY - topLeftY;
 
   const [x, y] = pointRotateRads(
-    pointFrom(newTopLeftX, newTopLeftY),
-    pointFrom(cx + changeInX, cy + changeInY),
+    point(newTopLeftX, newTopLeftY),
+    point(cx + changeInX, cy + changeInY),
     -originalElement.angle as Radians,
   );
 

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -203,8 +203,6 @@ const getRelevantAppStateProps = (
   snapLines: appState.snapLines,
   zenModeEnabled: appState.zenModeEnabled,
   editingTextElement: appState.editingTextElement,
-  isCropping: appState.isCropping,
-  croppingElementId: appState.croppingElementId,
   searchMatches: appState.searchMatches,
 });
 

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -107,7 +107,6 @@ const getRelevantAppStateProps = (
   frameToHighlight: appState.frameToHighlight,
   editingGroupId: appState.editingGroupId,
   currentHoveredFontFamily: appState.currentHoveredFontFamily,
-  croppingElementId: appState.croppingElementId,
 });
 
 const areEqual = (

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -36,7 +36,7 @@ import { trackEvent } from "../../analytics";
 import { useAppProps, useExcalidrawAppState } from "../App";
 import { isEmbeddableElement } from "../../element/typeChecks";
 import { getLinkHandleFromCoords } from "./helpers";
-import { pointFrom, type GlobalPoint } from "../../../math";
+import { point, type GlobalPoint } from "../../../math";
 
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -181,7 +181,7 @@ export const Hyperlink = ({
         element,
         elementsMap,
         appState,
-        pointFrom(event.clientX, event.clientY),
+        point(event.clientX, event.clientY),
       ) as boolean;
       if (shouldHide) {
         timeoutId = window.setTimeout(() => {

packages/excalidraw/components/hyperlink/helpers.ts

@@ -1,5 +1,5 @@
 import type { GlobalPoint, Radians } from "../../../math";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 import { MIME_TYPES } from "../../constants";
 import type { Bounds } from "../../element/bounds";
 import { getElementAbsoluteCoords } from "../../element/bounds";
@@ -35,8 +35,8 @@ export const getLinkHandleFromCoords = (
   const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
 
   const [rotatedX, rotatedY] = pointRotateRads(
-    pointFrom(x + linkWidth / 2, y + linkHeight / 2),
-    pointFrom(centerX, centerY),
+    point(x + linkWidth / 2, y + linkHeight / 2),
+    point(centerX, centerY),
     angle,
   );
   return [
@@ -85,10 +85,5 @@ export const isPointHittingLink = (
   ) {
     return true;
   }
-  return isPointHittingLinkIcon(
-    element,
-    elementsMap,
-    appState,
-    pointFrom(x, y),
-  );
+  return isPointHittingLinkIcon(element, elementsMap, appState, point(x, y));
 };

packages/excalidraw/components/icons.tsx

@@ -2147,12 +2147,3 @@ export const upIcon = createIcon(
   </g>,
   tablerIconProps,
 );
-
-export const cropIcon = createIcon(
-  <g strokeWidth="1.25">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M8 5v10a1 1 0 0 0 1 1h10" />
-    <path d="M5 8h10a1 1 0 0 1 1 1v10" />
-  </g>,
-  tablerIconProps,
-);

packages/excalidraw/constants.ts

@@ -2,7 +2,6 @@ import cssVariables from "./css/variables.module.scss";
 import type { AppProps, AppState } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 import { COLOR_PALETTE } from "./colors";
-
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
 export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
@@ -117,9 +116,6 @@ export const CLASSES = {
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
 };
 
-export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
-export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
-
 /**
  * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
  *
@@ -140,22 +136,6 @@ export const FONT_FAMILY = {
   "Liberation Sans": 9,
 };
 
-export const FONT_FAMILY_FALLBACKS = {
-  [CJK_HAND_DRAWN_FALLBACK_FONT]: 100,
-  [WINDOWS_EMOJI_FALLBACK_FONT]: 1000,
-};
-
-export const getFontFamilyFallbacks = (
-  fontFamily: number,
-): Array<keyof typeof FONT_FAMILY_FALLBACKS> => {
-  switch (fontFamily) {
-    case FONT_FAMILY.Excalifont:
-      return [CJK_HAND_DRAWN_FALLBACK_FONT, WINDOWS_EMOJI_FALLBACK_FONT];
-    default:
-      return [WINDOWS_EMOJI_FALLBACK_FONT];
-  }
-};
-
 export const THEME = {
   LIGHT: "light",
   DARK: "dark",
@@ -177,6 +157,8 @@ export const FRAME_STYLE = {
   nameLineHeight: 1.25,
 };
 
+export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
+
 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
 export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Excalifont;

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "#d8f5a2",
   "boundElements": [
     {
-      "id": "id47",
+      "id": "id45",
       "type": "arrow",
     },
     {
-      "id": "id48",
+      "id": "id46",
       "type": "arrow",
     },
   ],
@@ -47,7 +47,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id48",
+      "id": "id46",
       "type": "arrow",
     },
   ],
@@ -118,7 +118,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id49",
+    "elementId": "id47",
     "fixedPoint": null,
     "focus": -0.08139534883720931,
     "gap": 1,
@@ -200,7 +200,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id47",
+      "id": "id45",
       "type": "arrow",
     },
   ],
@@ -238,7 +238,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id50",
+      "id": "id48",
       "type": "arrow",
     },
   ],
@@ -284,7 +284,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id50",
+      "id": "id48",
       "type": "arrow",
     },
   ],
@@ -329,7 +329,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id51",
+      "id": "id49",
       "type": "text",
     },
   ],
@@ -392,7 +392,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id50",
+  "containerId": "id48",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -433,7 +433,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id40",
+      "id": "id38",
       "type": "text",
     },
   ],
@@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id42",
+    "elementId": "id40",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -472,7 +472,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id41",
+    "elementId": "id39",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -496,7 +496,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id39",
+  "containerId": "id37",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -537,7 +537,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id39",
+      "id": "id37",
       "type": "arrow",
     },
   ],
@@ -574,7 +574,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id39",
+      "id": "id37",
       "type": "arrow",
     },
   ],
@@ -611,7 +611,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id44",
+      "id": "id42",
       "type": "text",
     },
   ],
@@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id46",
+    "elementId": "id44",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -650,7 +650,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id45",
+    "elementId": "id43",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -674,7 +674,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id43",
+  "containerId": "id41",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -716,7 +716,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id43",
+      "id": "id41",
       "type": "arrow",
     },
   ],
@@ -762,7 +762,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id43",
+      "id": "id41",
       "type": "arrow",
     },
   ],
@@ -1303,7 +1303,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id56",
+      "id": "id54",
       "type": "text",
     },
     {
@@ -1346,7 +1346,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id57",
+      "id": "id55",
       "type": "text",
     },
   ],
@@ -1385,7 +1385,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id58",
+      "id": "id56",
       "type": "text",
     },
     {
@@ -1428,7 +1428,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id59",
+      "id": "id57",
       "type": "text",
     },
     {
@@ -1475,7 +1475,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id60",
+      "id": "id58",
       "type": "text",
     },
   ],
@@ -1540,7 +1540,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id61",
+      "id": "id59",
       "type": "text",
     },
   ],
@@ -2171,7 +2171,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "strokeColor": "#1098ad",
   "strokeStyle": "solid",
   "strokeWidth": 2,
-  "text": "ANOTHER STYLED
+  "text": "ANOTHER STYLED 
 LABELLED ARROW",
   "textAlign": "center",
   "type": "text",
@@ -2179,8 +2179,8 @@ LABELLED ARROW",
   "version": 3,
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
-  "width": 140,
-  "x": 80,
+  "width": 150,
+  "x": 75,
   "y": 275,
 }
 `;
@@ -2213,7 +2213,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "strokeColor": "#099268",
   "strokeStyle": "solid",
   "strokeWidth": 2,
-  "text": "ANOTHER STYLED
+  "text": "ANOTHER STYLED 
 LABELLED ARROW",
   "textAlign": "center",
   "type": "text",
@@ -2221,8 +2221,8 @@ LABELLED ARROW",
   "version": 3,
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
-  "width": 140,
-  "x": 80,
+  "width": 150,
+  "x": 75,
   "y": 375,
 }
 `;
@@ -2518,7 +2518,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
-  "text": "ELLIPSE TEXT
+  "text": "ELLIPSE TEXT 
 CONTAINER",
   "textAlign": "center",
   "type": "text",
@@ -2526,8 +2526,8 @@ CONTAINER",
   "version": 3,
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
-  "width": 120,
-  "x": 539.7893218813452,
+  "width": 130,
+  "x": 534.7893218813452,
   "y": 117.44796179957173,
 }
 `;
@@ -2562,7 +2562,7 @@ TEXT CONTAINER",
   "strokeStyle": "solid",
   "strokeWidth": 2,
   "text": "DIAMOND
-TEXT
+TEXT 
 CONTAINER",
   "textAlign": "center",
   "type": "text",
@@ -2646,8 +2646,8 @@ exports[`Test Transform > should transform to text containers when label provide
   "strokeColor": "#c2255c",
   "strokeStyle": "solid",
   "strokeWidth": 2,
-  "text": "TOP LEFT ALIGNED
-RECTANGLE TEXT
+  "text": "TOP LEFT ALIGNED 
+RECTANGLE TEXT 
 CONTAINER",
   "textAlign": "left",
   "type": "text",
@@ -2655,7 +2655,7 @@ CONTAINER",
   "version": 3,
   "versionNonce": Any<Number>,
   "verticalAlign": "top",
-  "width": 160,
+  "width": 170,
   "x": 505,
   "y": 305,
 }
@@ -2689,8 +2689,8 @@ exports[`Test Transform > should transform to text containers when label provide
   "strokeColor": "#c2255c",
   "strokeStyle": "solid",
   "strokeWidth": 2,
-  "text": "STYLED
-ELLIPSE TEXT
+  "text": "STYLED 
+ELLIPSE TEXT 
 CONTAINER",
   "textAlign": "center",
   "type": "text",
@@ -2698,8 +2698,8 @@ CONTAINER",
   "version": 3,
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
-  "width": 120,
-  "x": 539.7893218813452,
+  "width": 130,
+  "x": 534.7893218813452,
   "y": 522.5735931288071,
 }
 `;

packages/excalidraw/data/blob.ts

@@ -8,14 +8,13 @@ import { calculateScrollCenter } from "../scene";
 import type { AppState, DataURL, LibraryItem } from "../types";
 import type { ValueOf } from "../utility-types";
 import { bytesToHexString, isPromiseLike } from "../utils";
-import { base64ToString, stringToBase64, toByteString } from "./encode";
 import type { FileSystemHandle } from "./filesystem";
 import { nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
 import type { ImportedLibraryData } from "./types";
 
-const parseFileContents = async (blob: Blob | File): Promise<string> => {
+const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
 
   if (blob.type === MIME_TYPES.png) {
@@ -47,7 +46,9 @@ const parseFileContents = async (blob: Blob | File): Promise<string> => {
     }
     if (blob.type === MIME_TYPES.svg) {
       try {
-        return (await import("./image")).decodeSvgMetadata({
+        return await (
+          await import("./image")
+        ).decodeSvgMetadata({
           svg: contents,
         });
       } catch (error: any) {
@@ -248,7 +249,6 @@ export const generateIdFromFile = async (file: File): Promise<FileId> => {
   }
 };
 
-/** async. For sync variant, use getDataURL_sync */
 export const getDataURL = async (file: Blob | File): Promise<DataURL> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -261,16 +261,6 @@ export const getDataURL = async (file: Blob | File): Promise<DataURL> => {
   });
 };
 
-export const getDataURL_sync = (
-  data: string | Uint8Array | ArrayBuffer,
-  mimeType: ValueOf<typeof MIME_TYPES>,
-): DataURL => {
-  return `data:${mimeType};base64,${stringToBase64(
-    toByteString(data),
-    true,
-  )}` as DataURL;
-};
-
 export const dataURLToFile = (dataURL: DataURL, filename = "") => {
   const dataIndexStart = dataURL.indexOf(",");
   const byteString = atob(dataURL.slice(dataIndexStart + 1));
@@ -284,10 +274,6 @@ export const dataURLToFile = (dataURL: DataURL, filename = "") => {
   return new File([ab], filename, { type: mimeType });
 };
 
-export const dataURLToString = (dataURL: DataURL) => {
-  return base64ToString(dataURL.slice(dataURL.indexOf(",") + 1));
-};
-
 export const resizeImageFile = async (
   file: File,
   opts: {

packages/excalidraw/data/encode.ts

@@ -5,23 +5,24 @@ import { encryptData, decryptData } from "./encryption";
 // byte (binary) strings
 // -----------------------------------------------------------------------------
 
-// Buffer-compatible implem.
-//
-// Note that in V8, spreading the uint8array (by chunks) into
-// `String.fromCharCode(...uint8array)` tends to be faster for large
-// strings/buffers, in case perf is needed in the future.
-export const toByteString = (data: string | Uint8Array | ArrayBuffer) => {
-  const bytes =
-    typeof data === "string"
-      ? new TextEncoder().encode(data)
-      : data instanceof Uint8Array
-      ? data
-      : new Uint8Array(data);
-  let bstring = "";
-  for (const byte of bytes) {
-    bstring += String.fromCharCode(byte);
-  }
-  return bstring;
+// fast, Buffer-compatible implem
+export const toByteString = (
+  data: string | Uint8Array | ArrayBuffer,
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const blob =
+      typeof data === "string"
+        ? new Blob([new TextEncoder().encode(data)])
+        : new Blob([data instanceof Uint8Array ? data : new Uint8Array(data)]);
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (!event.target || typeof event.target.result !== "string") {
+        return reject(new Error("couldn't convert to byte string"));
+      }
+      resolve(event.target.result);
+    };
+    reader.readAsBinaryString(blob);
+  });
 };
 
 const byteStringToArrayBuffer = (byteString: string) => {
@@ -45,12 +46,12 @@ const byteStringToString = (byteString: string) => {
  * @param isByteString set to true if already byte string to prevent bloat
  *  due to reencoding
  */
-export const stringToBase64 = (str: string, isByteString = false) => {
-  return isByteString ? window.btoa(str) : window.btoa(toByteString(str));
+export const stringToBase64 = async (str: string, isByteString = false) => {
+  return isByteString ? window.btoa(str) : window.btoa(await toByteString(str));
 };
 
 // async to align with stringToBase64
-export const base64ToString = (base64: string, isByteString = false) => {
+export const base64ToString = async (base64: string, isByteString = false) => {
   return isByteString
     ? window.atob(base64)
     : byteStringToString(window.atob(base64));
@@ -65,20 +66,6 @@ export const base64ToArrayBuffer = (base64: string): ArrayBuffer => {
   return byteStringToArrayBuffer(atob(base64));
 };
 
-// -----------------------------------------------------------------------------
-// base64url
-// -----------------------------------------------------------------------------
-
-export const base64urlToString = (str: string) => {
-  return window.atob(
-    // normalize base64URL to base64
-    str
-      .replace(/-/g, "+")
-      .replace(/_/g, "/")
-      .padEnd(str.length + ((4 - (str.length % 4)) % 4), "="),
-  );
-};
-
 // -----------------------------------------------------------------------------
 // text encoding
 // -----------------------------------------------------------------------------
@@ -95,18 +82,18 @@ type EncodedData = {
 /**
  * Encodes (and potentially compresses via zlib) text to byte string
  */
-export const encode = ({
+export const encode = async ({
   text,
   compress,
 }: {
   text: string;
   /** defaults to `true`. If compression fails, falls back to bstring alone. */
   compress?: boolean;
-}): EncodedData => {
+}): Promise<EncodedData> => {
   let deflated!: string;
   if (compress !== false) {
     try {
-      deflated = toByteString(deflate(text));
+      deflated = await toByteString(deflate(text));
     } catch (error: any) {
       console.error("encode: cannot deflate", error);
     }
@@ -115,11 +102,11 @@ export const encode = ({
     version: "1",
     encoding: "bstring",
     compressed: !!deflated,
-    encoded: deflated || toByteString(text),
+    encoded: deflated || (await toByteString(text)),
   };
 };
 
-export const decode = (data: EncodedData): string => {
+export const decode = async (data: EncodedData): Promise<string> => {
   let decoded: string;
 
   switch (data.encoding) {
@@ -127,7 +114,7 @@ export const decode = (data: EncodedData): string => {
       // if compressed, do not double decode the bstring
       decoded = data.compressed
         ? data.encoded
-        : byteStringToString(data.encoded);
+        : await byteStringToString(data.encoded);
       break;
     default:
       throw new Error(`decode: unknown encoding "${data.encoding}"`);

packages/excalidraw/data/image.ts

@@ -32,7 +32,7 @@ export const encodePngMetadata = async ({
   const metadataChunk = tEXt.encode(
     MIME_TYPES.excalidraw,
     JSON.stringify(
-      encode({
+      await encode({
         text: metadata,
         compress: true,
       }),
@@ -59,7 +59,7 @@ export const decodePngMetadata = async (blob: Blob) => {
         }
         throw new Error("FAILED");
       }
-      return decode(encodedData);
+      return await decode(encodedData);
     } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
@@ -72,9 +72,9 @@ export const decodePngMetadata = async (blob: Blob) => {
 // SVG
 // -----------------------------------------------------------------------------
 
-export const encodeSvgMetadata = ({ text }: { text: string }) => {
-  const base64 = stringToBase64(
-    JSON.stringify(encode({ text })),
+export const encodeSvgMetadata = async ({ text }: { text: string }) => {
+  const base64 = await stringToBase64(
+    JSON.stringify(await encode({ text })),
     true /* is already byte string */,
   );
 
@@ -87,7 +87,7 @@ export const encodeSvgMetadata = ({ text }: { text: string }) => {
   return metadata;
 };
 
-export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
+export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
   if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
     const match = svg.match(
       /<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/,
@@ -100,7 +100,7 @@ export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
     const isByteString = version !== "1";
 
     try {
-      const json = base64ToString(match[1], isByteString);
+      const json = await base64ToString(match[1], isByteString);
       const encodedData = JSON.parse(json);
       if (!("encoded" in encodedData)) {
         // legacy, un-encoded scene JSON
@@ -112,7 +112,7 @@ export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
         }
         throw new Error("FAILED");
       }
-      return decode(encodedData);
+      return await decode(encodedData);
     } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");

packages/excalidraw/data/restore.ts

@@ -57,7 +57,7 @@ import {
   getNormalizedZoom,
 } from "../scene";
 import type { LocalPoint, Radians } from "../../math";
-import { isFiniteNumber, pointFrom } from "../../math";
+import { isFiniteNumber, point } from "../../math";
 
 type RestoredAppState = Omit<
   AppState,
@@ -190,10 +190,6 @@ const restoreElementWithProperties = <
   }
 
   return {
-    // spread the original element properties to not lose unknown ones
-    // for forward-compatibility
-    ...element,
-    // normalized properties
     ...base,
     ...getNormalizedDimensions(base),
     ...extra,
@@ -262,7 +258,6 @@ const restoreElement = (
         status: element.status || "pending",
         fileId: element.fileId,
         scale: element.scale || [1, 1],
-        crop: element.crop ?? null,
       });
     case "line":
     // @ts-ignore LEGACY type
@@ -273,7 +268,7 @@ const restoreElement = (
       let y = element.y;
       let points = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
+          ? [point(0, 0), point(element.width, element.height)]
           : element.points;
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -301,7 +296,7 @@ const restoreElement = (
       let y: number | undefined = element.y;
       let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
+          ? [point(0, 0), point(element.width, element.height)]
           : element.points;
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {

packages/excalidraw/data/transform.test.ts

@@ -2,7 +2,7 @@ import { vi } from "vitest";
 import type { ExcalidrawElementSkeleton } from "./transform";
 import { convertToExcalidrawElements } from "./transform";
 import type { ExcalidrawArrowElement } from "../element/types";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 
 const opts = { regenerateIds: false };
 
@@ -309,32 +309,28 @@ describe("Test Transform", () => {
   });
 
   describe("Test Frames", () => {
-    const elements: ExcalidrawElementSkeleton[] = [
-      {
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        strokeWidth: 2,
-        id: "1",
-      },
-      {
-        type: "diamond",
-        x: 120,
-        y: 20,
-        backgroundColor: "#fff3bf",
-        strokeWidth: 2,
-        label: {
-          text: "HELLO EXCALIDRAW",
-          strokeColor: "#099268",
-          fontSize: 30,
-        },
-        id: "2",
-      },
-    ];
-
     it("should transform frames and update frame ids when regenerated", () => {
       const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
         {
           type: "frame",
           children: ["1", "2"],
@@ -356,9 +352,28 @@ describe("Test Transform", () => {
       });
     });
 
-    it("should consider user defined frame dimensions over calculated when provided", () => {
+    it("should consider max of calculated and frame dimensions when provided", () => {
       const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
         {
           type: "frame",
           children: ["1", "2"],
@@ -373,27 +388,7 @@ describe("Test Transform", () => {
       );
       const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
       expect(frame.width).toBe(800);
-      expect(frame.height).toBe(100);
-    });
-
-    it("should consider user defined frame coordinates calculated when provided", () => {
-      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
-        {
-          type: "frame",
-          children: ["1", "2"],
-          name: "My frame",
-          x: 100,
-          y: 300,
-        },
-      ];
-      const excalidrawElements = convertToExcalidrawElements(
-        elementsSkeleton,
-        opts,
-      );
-      const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
-      expect(frame.x).toBe(100);
-      expect(frame.y).toBe(300);
+      expect(frame.height).toBe(126);
     });
   });
 
@@ -917,7 +912,7 @@ describe("Test Transform", () => {
         x: 111.262,
         y: 57,
         strokeWidth: 2,
-        points: [pointFrom(0, 0), pointFrom(272.985, 0)],
+        points: [point(0, 0), point(272.985, 0)],
         label: {
           text: "How are you?",
           fontSize: 20,
@@ -940,7 +935,7 @@ describe("Test Transform", () => {
         x: 77.017,
         y: 79,
         strokeWidth: 2,
-        points: [pointFrom(0, 0)],
+        points: [point(0, 0)],
         label: {
           text: "Friendship",
           fontSize: 20,

packages/excalidraw/data/transform.ts

@@ -46,7 +46,6 @@ import {
   assertNever,
   cloneJSON,
   getFontString,
-  isDevEnv,
   toBrandedType,
 } from "../utils";
 import { getSizeFromPoints } from "../points";
@@ -54,7 +53,7 @@ import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getLineHeight } from "../fonts";
 import { isArrowElement } from "../element/typeChecks";
-import { pointFrom, type LocalPoint } from "../../math";
+import { point, type LocalPoint } from "../../math";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -537,7 +536,7 @@ export const convertToExcalidrawElements = (
         excalidrawElement = newLinearElement({
           width,
           height,
-          points: [pointFrom(0, 0), pointFrom(width, height)],
+          points: [point(0, 0), point(width, height)],
           ...element,
         });
 
@@ -550,7 +549,7 @@ export const convertToExcalidrawElements = (
           width,
           height,
           endArrowhead: "arrow",
-          points: [pointFrom(0, 0), pointFrom(width, height)],
+          points: [point(0, 0), point(width, height)],
           ...element,
           type: "arrow",
         });
@@ -718,7 +717,7 @@ export const convertToExcalidrawElements = (
   }
 
   // Once all the excalidraw elements are created, we can add frames since we
-  // need to calculate coordinates and dimensions of frame which is possible after all
+  // need to calculate coordinates and dimensions of frame which is possibe after all
   // frame children are processed.
   for (const [id, element] of elementsWithIds) {
     if (element.type !== "frame" && element.type !== "magicframe") {
@@ -765,26 +764,10 @@ export const convertToExcalidrawElements = (
     maxX = maxX + PADDING;
     maxY = maxY + PADDING;
 
-    const frameX = frame?.x || minX;
-    const frameY = frame?.y || minY;
-    const frameWidth = frame?.width || maxX - minX;
-    const frameHeight = frame?.height || maxY - minY;
-
-    Object.assign(frame, {
-      x: frameX,
-      y: frameY,
-      width: frameWidth,
-      height: frameHeight,
-    });
-    if (
-      isDevEnv() &&
-      element.children.length &&
-      (frame?.x || frame?.y || frame?.width || frame?.height)
-    ) {
-      console.info(
-        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically",
-      );
-    }
+    // Take the max of calculated and provided frame dimensions, whichever is higher
+    const width = Math.max(frame?.width, maxX - minX);
+    const height = Math.max(frame?.height, maxY - minY);
+    Object.assign(frame, { x: minX, y: minY, width, height });
   }
 
   return elementStore.getElements();

packages/excalidraw/element/binding.ts

@@ -66,7 +66,7 @@ import {
 import type { LocalPoint, Radians } from "../../math";
 import {
   lineSegment,
-  pointFrom,
+  point,
   pointRotateRads,
   type GlobalPoint,
   vectorFromPoint,
@@ -720,7 +720,7 @@ export const getHeadingForElbowArrowSnap = (
     return vectorToHeading(
       vectorFromPoint(
         p,
-        pointFrom<GlobalPoint>(
+        point<GlobalPoint>(
           bindableElement.x + bindableElement.width / 2,
           bindableElement.y + bindableElement.height / 2,
         ),
@@ -766,15 +766,15 @@ export const bindPointToSnapToElementOutline = (
     const intersections = [
       ...(intersectElementWithLine(
         bindableElement,
-        pointFrom(p[0], p[1] - 2 * bindableElement.height),
-        pointFrom(p[0], p[1] + 2 * bindableElement.height),
+        point(p[0], p[1] - 2 * bindableElement.height),
+        point(p[0], p[1] + 2 * bindableElement.height),
         FIXED_BINDING_DISTANCE,
         elementsMap,
       ) ?? []),
       ...(intersectElementWithLine(
         bindableElement,
-        pointFrom(p[0] - 2 * bindableElement.width, p[1]),
-        pointFrom(p[0] + 2 * bindableElement.width, p[1]),
+        point(p[0] - 2 * bindableElement.width, p[1]),
+        point(p[0] + 2 * bindableElement.width, p[1]),
         FIXED_BINDING_DISTANCE,
         elementsMap,
       ) ?? []),
@@ -815,25 +815,25 @@ const headingToMidBindPoint = (
   switch (true) {
     case compareHeading(heading, HEADING_UP):
       return pointRotateRads(
-        pointFrom((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
+        point((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
         center,
         bindableElement.angle,
       );
     case compareHeading(heading, HEADING_RIGHT):
       return pointRotateRads(
-        pointFrom(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
+        point(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
         center,
         bindableElement.angle,
       );
     case compareHeading(heading, HEADING_DOWN):
       return pointRotateRads(
-        pointFrom((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
+        point((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
         center,
         bindableElement.angle,
       );
     default:
       return pointRotateRads(
-        pointFrom(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
+        point(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
         center,
         bindableElement.angle,
       );
@@ -844,7 +844,7 @@ export const avoidRectangularCorner = (
   element: ExcalidrawBindableElement,
   p: GlobalPoint,
 ): GlobalPoint => {
-  const center = pointFrom<GlobalPoint>(
+  const center = point<GlobalPoint>(
     element.x + element.width / 2,
     element.y + element.height / 2,
   );
@@ -854,13 +854,13 @@ export const avoidRectangularCorner = (
     // Top left
     if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
       return pointRotateRads<GlobalPoint>(
-        pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y),
+        point(element.x - FIXED_BINDING_DISTANCE, element.y),
         center,
         element.angle,
       );
     }
     return pointRotateRads(
-      pointFrom(element.x, element.y - FIXED_BINDING_DISTANCE),
+      point(element.x, element.y - FIXED_BINDING_DISTANCE),
       center,
       element.angle,
     );
@@ -871,16 +871,13 @@ export const avoidRectangularCorner = (
     // Bottom left
     if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
       return pointRotateRads(
-        pointFrom(
-          element.x,
-          element.y + element.height + FIXED_BINDING_DISTANCE,
-        ),
+        point(element.x, element.y + element.height + FIXED_BINDING_DISTANCE),
         center,
         element.angle,
       );
     }
     return pointRotateRads(
-      pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
+      point(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
       center,
       element.angle,
     );
@@ -894,7 +891,7 @@ export const avoidRectangularCorner = (
       element.width + FIXED_BINDING_DISTANCE
     ) {
       return pointRotateRads(
-        pointFrom(
+        point(
           element.x + element.width,
           element.y + element.height + FIXED_BINDING_DISTANCE,
         ),
@@ -903,7 +900,7 @@ export const avoidRectangularCorner = (
       );
     }
     return pointRotateRads(
-      pointFrom(
+      point(
         element.x + element.width + FIXED_BINDING_DISTANCE,
         element.y + element.height,
       ),
@@ -920,16 +917,13 @@ export const avoidRectangularCorner = (
       element.width + FIXED_BINDING_DISTANCE
     ) {
       return pointRotateRads(
-        pointFrom(
-          element.x + element.width,
-          element.y - FIXED_BINDING_DISTANCE,
-        ),
+        point(element.x + element.width, element.y - FIXED_BINDING_DISTANCE),
         center,
         element.angle,
       );
     }
     return pointRotateRads(
-      pointFrom(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
+      point(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
       center,
       element.angle,
     );
@@ -944,10 +938,7 @@ export const snapToMid = (
   tolerance: number = 0.05,
 ): GlobalPoint => {
   const { x, y, width, height, angle } = element;
-  const center = pointFrom<GlobalPoint>(
-    x + width / 2 - 0.1,
-    y + height / 2 - 0.1,
-  );
+  const center = point<GlobalPoint>(x + width / 2 - 0.1, y + height / 2 - 0.1);
   const nonRotated = pointRotateRads(p, center, -angle as Radians);
 
   // snap-to-center point is adaptive to element size, but we don't want to go
@@ -962,7 +953,7 @@ export const snapToMid = (
   ) {
     // LEFT
     return pointRotateRads(
-      pointFrom(x - FIXED_BINDING_DISTANCE, center[1]),
+      point(x - FIXED_BINDING_DISTANCE, center[1]),
       center,
       angle,
     );
@@ -973,7 +964,7 @@ export const snapToMid = (
   ) {
     // TOP
     return pointRotateRads(
-      pointFrom(center[0], y - FIXED_BINDING_DISTANCE),
+      point(center[0], y - FIXED_BINDING_DISTANCE),
       center,
       angle,
     );
@@ -984,7 +975,7 @@ export const snapToMid = (
   ) {
     // RIGHT
     return pointRotateRads(
-      pointFrom(x + width + FIXED_BINDING_DISTANCE, center[1]),
+      point(x + width + FIXED_BINDING_DISTANCE, center[1]),
       center,
       angle,
     );
@@ -995,7 +986,7 @@ export const snapToMid = (
   ) {
     // DOWN
     return pointRotateRads(
-      pointFrom(center[0], y + height + FIXED_BINDING_DISTANCE),
+      point(center[0], y + height + FIXED_BINDING_DISTANCE),
       center,
       angle,
     );
@@ -1032,11 +1023,11 @@ const updateBoundPoint = (
         startOrEnd === "startBinding" ? "start" : "end",
         elementsMap,
       ).fixedPoint;
-    const globalMidPoint = pointFrom<GlobalPoint>(
+    const globalMidPoint = point<GlobalPoint>(
       bindableElement.x + bindableElement.width / 2,
       bindableElement.y + bindableElement.height / 2,
     );
-    const global = pointFrom<GlobalPoint>(
+    const global = point<GlobalPoint>(
       bindableElement.x + fixedPoint[0] * bindableElement.width,
       bindableElement.y + fixedPoint[1] * bindableElement.height,
     );
@@ -1127,7 +1118,7 @@ export const calculateFixedPointForElbowArrowBinding = (
     hoveredElement,
     elementsMap,
   );
-  const globalMidPoint = pointFrom(
+  const globalMidPoint = point(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
     bounds[1] + (bounds[3] - bounds[1]) / 2,
   );
@@ -1346,9 +1337,9 @@ export const bindingBorderTest = (
   const threshold = maxBindingGap(element, element.width, element.height);
   const shape = getElementShape(element, elementsMap);
   return (
-    isPointOnShape(pointFrom(x, y), shape, threshold) ||
+    isPointOnShape(point(x, y), shape, threshold) ||
     (fullShape === true &&
-      pointInsideBounds(pointFrom(x, y), aabbForElement(element)))
+      pointInsideBounds(point(x, y), aabbForElement(element)))
   );
 };
 
@@ -2206,11 +2197,11 @@ export const getGlobalFixedPointForBindableElement = (
   const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);
 
   return pointRotateRads(
-    pointFrom(
+    point(
       element.x + element.width * fixedX,
       element.y + element.height * fixedY,
     ),
-    pointFrom<GlobalPoint>(
+    point<GlobalPoint>(
       element.x + element.width / 2,
       element.y + element.height / 2,
     ),
@@ -2238,7 +2229,7 @@ const getGlobalFixedPoints = (
           arrow.startBinding.fixedPoint,
           startElement as ExcalidrawBindableElement,
         )
-      : pointFrom<GlobalPoint>(
+      : point<GlobalPoint>(
           arrow.x + arrow.points[0][0],
           arrow.y + arrow.points[0][1],
         );
@@ -2248,7 +2239,7 @@ const getGlobalFixedPoints = (
           arrow.endBinding.fixedPoint,
           endElement as ExcalidrawBindableElement,
         )
-      : pointFrom<GlobalPoint>(
+      : point<GlobalPoint>(
           arrow.x + arrow.points[arrow.points.length - 1][0],
           arrow.y + arrow.points[arrow.points.length - 1][1],
         );

packages/excalidraw/element/bounds.test.ts

@@ -1,5 +1,5 @@
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { ROUNDNESS } from "../constants";
 import { arrayToMap } from "../utils";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
@@ -125,9 +125,9 @@ describe("getElementBounds", () => {
         a: 0.6447741904932416,
       }),
       points: [
-        pointFrom<LocalPoint>(0, 0),
-        pointFrom<LocalPoint>(67.33984375, 92.48828125),
-        pointFrom<LocalPoint>(-102.7890625, 52.15625),
+        point<LocalPoint>(0, 0),
+        point<LocalPoint>(67.33984375, 92.48828125),
+        point<LocalPoint>(-102.7890625, 52.15625),
       ],
     } as ExcalidrawLinearElement;
 

packages/excalidraw/element/bounds.ts

@@ -34,7 +34,7 @@ import type {
 import {
   degreesToRadians,
   lineSegment,
-  pointFrom,
+  point,
   pointDistance,
   pointFromArray,
   pointRotateRads,
@@ -113,8 +113,8 @@ export class ElementBounds {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(([x, y]) =>
           pointRotateRads(
-            pointFrom(x, y),
-            pointFrom(cx - element.x, cy - element.y),
+            point(x, y),
+            point(cx - element.x, cy - element.y),
             element.angle,
           ),
         ),
@@ -130,23 +130,23 @@ export class ElementBounds {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
       const [x11, y11] = pointRotateRads(
-        pointFrom(cx, y1),
-        pointFrom(cx, cy),
+        point(cx, y1),
+        point(cx, cy),
         element.angle,
       );
       const [x12, y12] = pointRotateRads(
-        pointFrom(cx, y2),
-        pointFrom(cx, cy),
+        point(cx, y2),
+        point(cx, cy),
         element.angle,
       );
       const [x22, y22] = pointRotateRads(
-        pointFrom(x1, cy),
-        pointFrom(cx, cy),
+        point(x1, cy),
+        point(cx, cy),
         element.angle,
       );
       const [x21, y21] = pointRotateRads(
-        pointFrom(x2, cy),
-        pointFrom(cx, cy),
+        point(x2, cy),
+        point(cx, cy),
         element.angle,
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -164,23 +164,23 @@ export class ElementBounds {
       bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
     } else {
       const [x11, y11] = pointRotateRads(
-        pointFrom(x1, y1),
-        pointFrom(cx, cy),
+        point(x1, y1),
+        point(cx, cy),
         element.angle,
       );
       const [x12, y12] = pointRotateRads(
-        pointFrom(x1, y2),
-        pointFrom(cx, cy),
+        point(x1, y2),
+        point(cx, cy),
         element.angle,
       );
       const [x22, y22] = pointRotateRads(
-        pointFrom(x2, y2),
-        pointFrom(cx, cy),
+        point(x2, y2),
+        point(cx, cy),
         element.angle,
       );
       const [x21, y21] = pointRotateRads(
-        pointFrom(x2, y1),
-        pointFrom(cx, cy),
+        point(x2, y1),
+        point(cx, cy),
         element.angle,
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -255,7 +255,7 @@ export const getElementLineSegments = (
     elementsMap,
   );
 
-  const center: GlobalPoint = pointFrom(cx, cy);
+  const center: GlobalPoint = point(cx, cy);
 
   if (isLinearElement(element) || isFreeDrawElement(element)) {
     const segments: LineSegment<GlobalPoint>[] = [];
@@ -266,7 +266,7 @@ export const getElementLineSegments = (
       segments.push(
         lineSegment(
           pointRotateRads(
-            pointFrom(
+            point(
               element.points[i][0] + element.x,
               element.points[i][1] + element.y,
             ),
@@ -274,7 +274,7 @@ export const getElementLineSegments = (
             element.angle,
           ),
           pointRotateRads(
-            pointFrom(
+            point(
               element.points[i + 1][0] + element.x,
               element.points[i + 1][1] + element.y,
             ),
@@ -470,7 +470,7 @@ export const getMinMaxXYFromCurvePathOps = (
   ops: Op[],
   transformXY?: (p: GlobalPoint) => GlobalPoint,
 ): Bounds => {
-  let currentP: GlobalPoint = pointFrom(0, 0);
+  let currentP: GlobalPoint = point(0, 0);
 
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
@@ -484,9 +484,9 @@ export const getMinMaxXYFromCurvePathOps = (
         // move operation does not draw anything; so, it always
         // returns false
       } else if (op === "bcurveTo") {
-        const _p1 = pointFrom<GlobalPoint>(data[0], data[1]);
-        const _p2 = pointFrom<GlobalPoint>(data[2], data[3]);
-        const _p3 = pointFrom<GlobalPoint>(data[4], data[5]);
+        const _p1 = point<GlobalPoint>(data[0], data[1]);
+        const _p2 = point<GlobalPoint>(data[2], data[3]);
+        const _p3 = point<GlobalPoint>(data[4], data[5]);
 
         const p1 = transformXY ? transformXY(_p1) : _p1;
         const p2 = transformXY ? transformXY(_p2) : _p2;
@@ -591,21 +591,21 @@ export const getArrowheadPoints = (
 
   invariant(data.length === 6, "Op data length is not 6");
 
-  const p3 = pointFrom(data[4], data[5]);
-  const p2 = pointFrom(data[2], data[3]);
-  const p1 = pointFrom(data[0], data[1]);
+  const p3 = point(data[4], data[5]);
+  const p2 = point(data[2], data[3]);
+  const p1 = point(data[0], data[1]);
 
   // We need to find p0 of the bezier curve.
   // It is typically the last point of the previous
   // curve; it can also be the position of moveTo operation.
   const prevOp = ops[index - 1];
-  let p0 = pointFrom(0, 0);
+  let p0 = point(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray(prevOp.data);
     invariant(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom(prevOp.data[4], prevOp.data[5]);
+    p0 = point(prevOp.data[4], prevOp.data[5]);
   }
 
   // B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
@@ -671,13 +671,13 @@ export const getArrowheadPoints = (
 
   // Return points
   const [x3, y3] = pointRotateRads(
-    pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    point(xs, ys),
+    point(x2, y2),
     ((-angle * Math.PI) / 180) as Radians,
   );
   const [x4, y4] = pointRotateRads(
-    pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    point(xs, ys),
+    point(x2, y2),
     degreesToRadians(angle),
   );
 
@@ -690,8 +690,8 @@ export const getArrowheadPoints = (
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 + minSize * 2, y2),
-        pointFrom(x2, y2),
+        point(x2 + minSize * 2, y2),
+        point(x2, y2),
         Math.atan2(py - y2, px - x2) as Radians,
       );
     } else {
@@ -701,8 +701,8 @@ export const getArrowheadPoints = (
           : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
-        pointFrom(x2, y2),
+        point(x2 - minSize * 2, y2),
+        point(x2, y2),
         Math.atan2(y2 - py, x2 - px) as Radians,
       );
     }
@@ -746,8 +746,8 @@ const getLinearElementRotatedBounds = (
   if (element.points.length < 2) {
     const [pointX, pointY] = element.points[0];
     const [x, y] = pointRotateRads(
-      pointFrom(element.x + pointX, element.y + pointY),
-      pointFrom(cx, cy),
+      point(element.x + pointX, element.y + pointY),
+      point(cx, cy),
       element.angle,
     );
 
@@ -775,8 +775,8 @@ const getLinearElementRotatedBounds = (
   const ops = getCurvePathOps(shape);
   const transformXY = ([x, y]: GlobalPoint) =>
     pointRotateRads<GlobalPoint>(
-      pointFrom(element.x + x, element.y + y),
-      pointFrom(cx, cy),
+      point(element.x + x, element.y + y),
+      point(cx, cy),
       element.angle,
     );
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -931,8 +931,8 @@ export const getClosestElementBounds = (
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance = pointDistance(
-      pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom(from.x, from.y),
+      point((x1 + x2) / 2, (y1 + y2) / 2),
+      point(from.x, from.y),
     );
 
     if (distance < minDistance) {
@@ -990,7 +990,7 @@ export const getVisibleSceneBounds = ({
 };
 
 export const getCenterForBounds = (bounds: Bounds): GlobalPoint =>
-  pointFrom(
+  point(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
     bounds[1] + (bounds[3] - bounds[1]) / 2,
   );

packages/excalidraw/element/collision.ts

@@ -17,7 +17,7 @@ import {
 } from "./typeChecks";
 import { getBoundTextShape, isPathALoop } from "../shapes";
 import type { GlobalPoint, LocalPoint, Polygon } from "../../math";
-import { isPointWithinBounds, pointFrom } from "../../math";
+import { isPointWithinBounds, point } from "../../math";
 
 export const shouldTestInside = (element: ExcalidrawElement) => {
   if (element.type === "arrow") {
@@ -61,13 +61,13 @@ export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
   let hit = shouldTestInside(element)
     ? // Since `inShape` tests STRICTLY againt the insides of a shape
       // we would need `onShape` as well to include the "borders"
-      isPointInShape(pointFrom(x, y), shape) ||
-      isPointOnShape(pointFrom(x, y), shape, threshold)
-    : isPointOnShape(pointFrom(x, y), shape, threshold);
+      isPointInShape(point(x, y), shape) ||
+      isPointOnShape(point(x, y), shape, threshold)
+    : isPointOnShape(point(x, y), shape, threshold);
 
   // hit test against a frame's name
   if (!hit && frameNameBound) {
-    hit = isPointInShape(pointFrom(x, y), {
+    hit = isPointInShape(point(x, y), {
       type: "polygon",
       data: getPolygonShape(frameNameBound as ExcalidrawRectangleElement)
         .data as Polygon<Point>,
@@ -89,11 +89,7 @@ export const hitElementBoundingBox = (
   y1 -= tolerance;
   x2 += tolerance;
   y2 += tolerance;
-  return isPointWithinBounds(
-    pointFrom(x1, y1),
-    pointFrom(x, y),
-    pointFrom(x2, y2),
-  );
+  return isPointWithinBounds(point(x1, y1), point(x, y), point(x2, y2));
 };
 
 export const hitElementBoundingBoxOnly = <
@@ -119,5 +115,5 @@ export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
   y: number,
   textShape: GeometricShape<Point> | null,
 ): boolean => {
-  return !!textShape && isPointInShape(pointFrom(x, y), textShape);
+  return !!textShape && isPointInShape(point(x, y), textShape);
 };

packages/excalidraw/element/cropElement.ts

@@ -1,587 +0,0 @@
-import { type Point } from "points-on-curve";
-import {
-  type Radians,
-  pointFrom,
-  pointCenter,
-  pointRotateRads,
-  vectorFromPoint,
-  vectorNormalize,
-  vectorSubtract,
-  vectorAdd,
-  vectorScale,
-  pointFromVector,
-  clamp,
-  isCloseTo,
-} from "../../math";
-import type { TransformHandleType } from "./transformHandles";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  ExcalidrawImageElement,
-  ImageCrop,
-  NonDeleted,
-} from "./types";
-import {
-  getElementAbsoluteCoords,
-  getResizedElementAbsoluteCoords,
-} from "./bounds";
-
-const MINIMAL_CROP_SIZE = 10;
-
-export const cropElement = (
-  element: ExcalidrawImageElement,
-  transformHandle: TransformHandleType,
-  naturalWidth: number,
-  naturalHeight: number,
-  pointerX: number,
-  pointerY: number,
-  widthAspectRatio?: number,
-) => {
-  const { width: uncroppedWidth, height: uncroppedHeight } =
-    getUncroppedWidthAndHeight(element);
-
-  const naturalWidthToUncropped = naturalWidth / uncroppedWidth;
-  const naturalHeightToUncropped = naturalHeight / uncroppedHeight;
-
-  const croppedLeft = (element.crop?.x ?? 0) / naturalWidthToUncropped;
-  const croppedTop = (element.crop?.y ?? 0) / naturalHeightToUncropped;
-
-  /**
-   *      uncropped width
-   * *––––––––––––––––––––––––*
-   * |     (x,y) (natural)    |
-   * |       *–––––––*        |
-   * |       |///////| height | uncropped height
-   * |       *–––––––*        |
-   * |    width (natural)     |
-   * *––––––––––––––––––––––––*
-   */
-
-  const rotatedPointer = pointRotateRads(
-    pointFrom(pointerX, pointerY),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
-    -element.angle as Radians,
-  );
-
-  pointerX = rotatedPointer[0];
-  pointerY = rotatedPointer[1];
-
-  let nextWidth = element.width;
-  let nextHeight = element.height;
-
-  let crop: ImageCrop | null = element.crop ?? {
-    x: 0,
-    y: 0,
-    width: naturalWidth,
-    height: naturalHeight,
-    naturalWidth,
-    naturalHeight,
-  };
-
-  const previousCropHeight = crop.height;
-  const previousCropWidth = crop.width;
-
-  const isFlippedByX = element.scale[0] === -1;
-  const isFlippedByY = element.scale[1] === -1;
-
-  let changeInHeight = pointerY - element.y;
-  let changeInWidth = pointerX - element.x;
-
-  if (transformHandle.includes("n")) {
-    nextHeight = clamp(
-      element.height - changeInHeight,
-      MINIMAL_CROP_SIZE,
-      isFlippedByY ? uncroppedHeight - croppedTop : element.height + croppedTop,
-    );
-  }
-
-  if (transformHandle.includes("s")) {
-    changeInHeight = pointerY - element.y - element.height;
-    nextHeight = clamp(
-      element.height + changeInHeight,
-      MINIMAL_CROP_SIZE,
-      isFlippedByY ? element.height + croppedTop : uncroppedHeight - croppedTop,
-    );
-  }
-
-  if (transformHandle.includes("e")) {
-    changeInWidth = pointerX - element.x - element.width;
-
-    nextWidth = clamp(
-      element.width + changeInWidth,
-      MINIMAL_CROP_SIZE,
-      isFlippedByX ? element.width + croppedLeft : uncroppedWidth - croppedLeft,
-    );
-  }
-
-  if (transformHandle.includes("w")) {
-    nextWidth = clamp(
-      element.width - changeInWidth,
-      MINIMAL_CROP_SIZE,
-      isFlippedByX ? uncroppedWidth - croppedLeft : element.width + croppedLeft,
-    );
-  }
-
-  const updateCropWidthAndHeight = (crop: ImageCrop) => {
-    crop.height = nextHeight * naturalHeightToUncropped;
-    crop.width = nextWidth * naturalWidthToUncropped;
-  };
-
-  updateCropWidthAndHeight(crop);
-
-  const adjustFlipForHandle = (
-    handle: TransformHandleType,
-    crop: ImageCrop,
-  ) => {
-    updateCropWidthAndHeight(crop);
-    if (handle.includes("n")) {
-      if (!isFlippedByY) {
-        crop.y += previousCropHeight - crop.height;
-      }
-    }
-    if (handle.includes("s")) {
-      if (isFlippedByY) {
-        crop.y += previousCropHeight - crop.height;
-      }
-    }
-    if (handle.includes("e")) {
-      if (isFlippedByX) {
-        crop.x += previousCropWidth - crop.width;
-      }
-    }
-    if (handle.includes("w")) {
-      if (!isFlippedByX) {
-        crop.x += previousCropWidth - crop.width;
-      }
-    }
-  };
-
-  switch (transformHandle) {
-    case "n": {
-      if (widthAspectRatio) {
-        const distanceToLeft = croppedLeft + element.width / 2;
-        const distanceToRight =
-          uncroppedWidth - croppedLeft - element.width / 2;
-
-        const MAX_WIDTH = Math.min(distanceToLeft, distanceToRight) * 2;
-
-        nextWidth = clamp(
-          nextHeight * widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_WIDTH,
-        );
-        nextHeight = nextWidth / widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.x += (previousCropWidth - crop.width) / 2;
-      }
-
-      break;
-    }
-    case "s": {
-      if (widthAspectRatio) {
-        const distanceToLeft = croppedLeft + element.width / 2;
-        const distanceToRight =
-          uncroppedWidth - croppedLeft - element.width / 2;
-
-        const MAX_WIDTH = Math.min(distanceToLeft, distanceToRight) * 2;
-
-        nextWidth = clamp(
-          nextHeight * widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_WIDTH,
-        );
-        nextHeight = nextWidth / widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.x += (previousCropWidth - crop.width) / 2;
-      }
-
-      break;
-    }
-    case "w": {
-      if (widthAspectRatio) {
-        const distanceToTop = croppedTop + element.height / 2;
-        const distanceToBottom =
-          uncroppedHeight - croppedTop - element.height / 2;
-
-        const MAX_HEIGHT = Math.min(distanceToTop, distanceToBottom) * 2;
-
-        nextHeight = clamp(
-          nextWidth / widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_HEIGHT,
-        );
-        nextWidth = nextHeight * widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.y += (previousCropHeight - crop.height) / 2;
-      }
-
-      break;
-    }
-    case "e": {
-      if (widthAspectRatio) {
-        const distanceToTop = croppedTop + element.height / 2;
-        const distanceToBottom =
-          uncroppedHeight - croppedTop - element.height / 2;
-
-        const MAX_HEIGHT = Math.min(distanceToTop, distanceToBottom) * 2;
-
-        nextHeight = clamp(
-          nextWidth / widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_HEIGHT,
-        );
-        nextWidth = nextHeight * widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.y += (previousCropHeight - crop.height) / 2;
-      }
-
-      break;
-    }
-    case "ne": {
-      if (widthAspectRatio) {
-        if (changeInWidth > -changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? uncroppedHeight - croppedTop
-            : croppedTop + element.height;
-
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? croppedLeft + element.width
-            : uncroppedWidth - croppedLeft;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    case "nw": {
-      if (widthAspectRatio) {
-        if (changeInWidth < changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? uncroppedHeight - croppedTop
-            : croppedTop + element.height;
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? uncroppedWidth - croppedLeft
-            : croppedLeft + element.width;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    case "se": {
-      if (widthAspectRatio) {
-        if (changeInWidth > changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? croppedTop + element.height
-            : uncroppedHeight - croppedTop;
-
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? croppedLeft + element.width
-            : uncroppedWidth - croppedLeft;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    case "sw": {
-      if (widthAspectRatio) {
-        if (-changeInWidth > changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? croppedTop + element.height
-            : uncroppedHeight - croppedTop;
-
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? uncroppedWidth - croppedLeft
-            : croppedLeft + element.width;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    default:
-      break;
-  }
-
-  const newOrigin = recomputeOrigin(
-    element,
-    transformHandle,
-    nextWidth,
-    nextHeight,
-    !!widthAspectRatio,
-  );
-
-  // reset crop to null if we're back to orig size
-  if (
-    isCloseTo(crop.width, crop.naturalWidth) &&
-    isCloseTo(crop.height, crop.naturalHeight)
-  ) {
-    crop = null;
-  }
-
-  return {
-    x: newOrigin[0],
-    y: newOrigin[1],
-    width: nextWidth,
-    height: nextHeight,
-    crop,
-  };
-};
-
-const recomputeOrigin = (
-  stateAtCropStart: NonDeleted<ExcalidrawElement>,
-  transformHandle: TransformHandleType,
-  width: number,
-  height: number,
-  shouldMaintainAspectRatio?: boolean,
-) => {
-  const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
-    stateAtCropStart,
-    stateAtCropStart.width,
-    stateAtCropStart.height,
-    true,
-  );
-  const startTopLeft = pointFrom(x1, y1);
-  const startBottomRight = pointFrom(x2, y2);
-  const startCenter: any = pointCenter(startTopLeft, startBottomRight);
-
-  const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
-    getResizedElementAbsoluteCoords(stateAtCropStart, width, height, true);
-  const newBoundsWidth = newBoundsX2 - newBoundsX1;
-  const newBoundsHeight = newBoundsY2 - newBoundsY1;
-
-  // Calculate new topLeft based on fixed corner during resize
-  let newTopLeft = [...startTopLeft] as [number, number];
-
-  if (["n", "w", "nw"].includes(transformHandle)) {
-    newTopLeft = [
-      startBottomRight[0] - Math.abs(newBoundsWidth),
-      startBottomRight[1] - Math.abs(newBoundsHeight),
-    ];
-  }
-  if (transformHandle === "ne") {
-    const bottomLeft = [startTopLeft[0], startBottomRight[1]];
-    newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(newBoundsHeight)];
-  }
-  if (transformHandle === "sw") {
-    const topRight = [startBottomRight[0], startTopLeft[1]];
-    newTopLeft = [topRight[0] - Math.abs(newBoundsWidth), topRight[1]];
-  }
-
-  if (shouldMaintainAspectRatio) {
-    if (["s", "n"].includes(transformHandle)) {
-      newTopLeft[0] = startCenter[0] - newBoundsWidth / 2;
-    }
-    if (["e", "w"].includes(transformHandle)) {
-      newTopLeft[1] = startCenter[1] - newBoundsHeight / 2;
-    }
-  }
-
-  // adjust topLeft to new rotation point
-  const angle = stateAtCropStart.angle;
-  const rotatedTopLeft = pointRotateRads(newTopLeft, startCenter, angle);
-  const newCenter: Point = [
-    newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
-    newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
-  ];
-  const rotatedNewCenter = pointRotateRads(newCenter, startCenter, angle);
-  newTopLeft = pointRotateRads(
-    rotatedTopLeft,
-    rotatedNewCenter,
-    -angle as Radians,
-  );
-
-  const newOrigin = [...newTopLeft];
-  newOrigin[0] += stateAtCropStart.x - newBoundsX1;
-  newOrigin[1] += stateAtCropStart.y - newBoundsY1;
-
-  return newOrigin;
-};
-
-// refer to https://link.excalidraw.com/l/6rfy1007QOo/6stx5PmRn0k
-export const getUncroppedImageElement = (
-  element: ExcalidrawImageElement,
-  elementsMap: ElementsMap,
-) => {
-  if (element.crop) {
-    const { width, height } = getUncroppedWidthAndHeight(element);
-
-    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
-      element,
-      elementsMap,
-    );
-
-    const topLeftVector = vectorFromPoint(
-      pointRotateRads(pointFrom(x1, y1), pointFrom(cx, cy), element.angle),
-    );
-    const topRightVector = vectorFromPoint(
-      pointRotateRads(pointFrom(x2, y1), pointFrom(cx, cy), element.angle),
-    );
-    const topEdgeNormalized = vectorNormalize(
-      vectorSubtract(topRightVector, topLeftVector),
-    );
-    const bottomLeftVector = vectorFromPoint(
-      pointRotateRads(pointFrom(x1, y2), pointFrom(cx, cy), element.angle),
-    );
-    const leftEdgeVector = vectorSubtract(bottomLeftVector, topLeftVector);
-    const leftEdgeNormalized = vectorNormalize(leftEdgeVector);
-
-    const { cropX, cropY } = adjustCropPosition(element.crop, element.scale);
-
-    const rotatedTopLeft = vectorAdd(
-      vectorAdd(
-        topLeftVector,
-        vectorScale(
-          topEdgeNormalized,
-          (-cropX * width) / element.crop.naturalWidth,
-        ),
-      ),
-      vectorScale(
-        leftEdgeNormalized,
-        (-cropY * height) / element.crop.naturalHeight,
-      ),
-    );
-
-    const center = pointFromVector(
-      vectorAdd(
-        vectorAdd(rotatedTopLeft, vectorScale(topEdgeNormalized, width / 2)),
-        vectorScale(leftEdgeNormalized, height / 2),
-      ),
-    );
-
-    const unrotatedTopLeft = pointRotateRads(
-      pointFromVector(rotatedTopLeft),
-      center,
-      -element.angle as Radians,
-    );
-
-    const uncroppedElement: ExcalidrawImageElement = {
-      ...element,
-      x: unrotatedTopLeft[0],
-      y: unrotatedTopLeft[1],
-      width,
-      height,
-      crop: null,
-    };
-
-    return uncroppedElement;
-  }
-
-  return element;
-};
-
-export const getUncroppedWidthAndHeight = (element: ExcalidrawImageElement) => {
-  if (element.crop) {
-    const width =
-      element.width / (element.crop.width / element.crop.naturalWidth);
-    const height =
-      element.height / (element.crop.height / element.crop.naturalHeight);
-
-    return {
-      width,
-      height,
-    };
-  }
-
-  return {
-    width: element.width,
-    height: element.height,
-  };
-};
-
-const adjustCropPosition = (
-  crop: ImageCrop,
-  scale: ExcalidrawImageElement["scale"],
-) => {
-  let cropX = crop.x;
-  let cropY = crop.y;
-
-  const flipX = scale[0] === -1;
-  const flipY = scale[1] === -1;
-
-  if (flipX) {
-    cropX = crop.naturalWidth - Math.abs(cropX) - crop.width;
-  }
-
-  if (flipY) {
-    cropY = crop.naturalHeight - Math.abs(cropY) - crop.height;
-  }
-
-  return {
-    cropX,
-    cropY,
-  };
-};

packages/excalidraw/element/dragElements.ts

@@ -16,7 +16,6 @@ import {
   isArrowElement,
   isElbowArrow,
   isFrameLikeElement,
-  isImageElement,
   isTextElement,
 } from "./typeChecks";
 import { getFontString } from "../utils";
@@ -252,14 +251,6 @@ export const dragNewElement = ({
   }
 
   if (width !== 0 && height !== 0) {
-    let imageInitialDimension = null;
-    if (isImageElement(newElement)) {
-      imageInitialDimension = {
-        initialWidth: width,
-        initialHeight: height,
-      };
-    }
-
     mutateElement(
       newElement,
       {
@@ -268,7 +259,6 @@ export const dragNewElement = ({
         width,
         height,
         ...textAutoResize,
-        ...imageInitialDimension,
       },
       informMutation,
     );

packages/excalidraw/element/embeddable.ts

@@ -4,7 +4,7 @@ import type { ExcalidrawProps } from "../types";
 import { getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
-import { wrapText } from "./textWrapping";
+import { wrapText } from "./textElement";
 import { isIframeElement } from "./typeChecks";
 import type {
   ExcalidrawElement,
@@ -45,12 +45,6 @@ const RE_GENERIC_EMBED =
 const RE_GIPHY =
   /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
 
-const RE_REDDIT =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?reddit\.com\/r\/([a-zA-Z0-9_]+)\/comments\/([a-zA-Z0-9_]+)\/([a-zA-Z0-9_]+)\/?(?:\?[^#\s]*)?(?:#[^\s]*)?$/;
-
-const RE_REDDIT_EMBED =
-  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;
-
 const ALLOWED_DOMAINS = new Set([
   "youtube.com",
   "youtu.be",
@@ -65,7 +59,6 @@ const ALLOWED_DOMAINS = new Set([
   "stackblitz.com",
   "val.town",
   "giphy.com",
-  "reddit.com",
 ]);
 
 const ALLOW_SAME_ORIGIN = new Set([
@@ -78,7 +71,6 @@ const ALLOW_SAME_ORIGIN = new Set([
   "x.com",
   "*.simplepdf.eu",
   "stackblitz.com",
-  "reddit.com",
 ]);
 
 export const createSrcDoc = (body: string) => {
@@ -226,24 +218,6 @@ export const getEmbedLink = (
     return ret;
   }
 
-  if (RE_REDDIT.test(link)) {
-    const [, page, postId, title] = link.match(RE_REDDIT)!;
-    const safeURL = sanitizeHTMLAttribute(
-      `https://reddit.com/r/${page}/comments/${postId}/${title}`,
-    );
-    const ret: IframeDataWithSandbox = {
-      type: "document",
-      srcdoc: (theme: string) =>
-        createSrcDoc(
-          `<blockquote class="reddit-embed-bq" data-embed-theme="${theme}"><a href="${safeURL}"></a><br></blockquote><script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>`,
-        ),
-      intrinsicSize: { w: 480, h: 480 },
-      sandbox: { allowSameOrigin },
-    };
-    embeddedLinkCache.set(originalLink, ret);
-    return ret;
-  }
-
   if (RE_GH_GIST.test(link)) {
     const [, user, gistId] = link.match(RE_GH_GIST)!;
     const safeURL = sanitizeHTMLAttribute(
@@ -387,11 +361,6 @@ export const maybeParseEmbedSrc = (str: string): string => {
     return twitterMatch[1];
   }
 
-  const redditMatch = str.match(RE_REDDIT_EMBED);
-  if (redditMatch && redditMatch.length === 2) {
-    return redditMatch[1];
-  }
-
   const gistMatch = str.match(RE_GH_GIST_EMBED);
   if (gistMatch && gistMatch.length === 2) {
     return gistMatch[1];

packages/excalidraw/element/flowchart.ts

@@ -29,7 +29,7 @@ import {
   isFlowchartNodeElement,
 } from "./typeChecks";
 import { invariant } from "../utils";
-import { pointFrom, type LocalPoint } from "../../math";
+import { point, type LocalPoint } from "../../math";
 import { aabbForElement } from "../shapes";
 
 type LinkDirection = "up" | "right" | "down" | "left";
@@ -421,7 +421,7 @@ const createBindingArrow = (
     strokeColor: appState.currentItemStrokeColor,
     strokeStyle: appState.currentItemStrokeStyle,
     strokeWidth: appState.currentItemStrokeWidth,
-    points: [pointFrom(0, 0), pointFrom(endX, endY)],
+    points: [point(0, 0), point(endX, endY)],
     elbowed: true,
   });
 

packages/excalidraw/element/heading.ts

@@ -6,7 +6,7 @@ import type {
   Radians,
 } from "../../math";
 import {
-  pointFrom,
+  point,
   pointRotateRads,
   pointScaleFromOrigin,
   radiansToDegrees,
@@ -82,7 +82,7 @@ export const headingForPointFromElement = <
 
     const top = pointRotateRads(
       pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y),
+        point(element.x + element.width / 2, element.y),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -91,7 +91,7 @@ export const headingForPointFromElement = <
     );
     const right = pointRotateRads(
       pointScaleFromOrigin(
-        pointFrom(element.x + element.width, element.y + element.height / 2),
+        point(element.x + element.width, element.y + element.height / 2),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -100,7 +100,7 @@ export const headingForPointFromElement = <
     );
     const bottom = pointRotateRads(
       pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y + element.height),
+        point(element.x + element.width / 2, element.y + element.height),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -109,7 +109,7 @@ export const headingForPointFromElement = <
     );
     const left = pointRotateRads(
       pointScaleFromOrigin(
-        pointFrom(element.x, element.y + element.height / 2),
+        point(element.x, element.y + element.height / 2),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -133,22 +133,22 @@ export const headingForPointFromElement = <
   }
 
   const topLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[1]),
+    point(aabb[0], aabb[1]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
   const topRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[1]),
+    point(aabb[2], aabb[1]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
   const bottomLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[3]),
+    point(aabb[0], aabb[3]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
   const bottomRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[3]),
+    point(aabb[2], aabb[3]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;

packages/excalidraw/element/image.ts

@@ -94,7 +94,7 @@ export const isHTMLSVGElement = (node: Node | null): node is SVGElement => {
   return node?.nodeName.toLowerCase() === "svg";
 };
 
-export const normalizeSVG = (SVGString: string) => {
+export const normalizeSVG = async (SVGString: string) => {
   const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES.svg);
   const svg = doc.querySelector("svg");
   const errorNode = doc.querySelector("parsererror");

packages/excalidraw/element/linearElementEditor.ts

@@ -49,7 +49,7 @@ import type Scene from "../scene/Scene";
 import type { Radians } from "../../math";
 import {
   pointCenter,
-  pointFrom,
+  point,
   pointRotateRads,
   pointsEqual,
   vector,
@@ -108,7 +108,7 @@ export class LinearElementEditor {
     this.elementId = element.id as string & {
       _brand: "excalidrawLinearElementId";
     };
-    if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
+    if (!pointsEqual(element.points[0], point(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
     }
 
@@ -287,7 +287,7 @@ export class LinearElementEditor {
           element,
           elementsMap,
           referencePoint,
-          pointFrom(scenePointerX, scenePointerY),
+          point(scenePointerX, scenePointerY),
           event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         );
 
@@ -296,7 +296,7 @@ export class LinearElementEditor {
           [
             {
               index: selectedIndex,
-              point: pointFrom(
+              point: point(
                 width + referencePoint[0],
                 height + referencePoint[1],
               ),
@@ -329,7 +329,7 @@ export class LinearElementEditor {
                     scenePointerY - linearElementEditor.pointerOffset.y,
                     event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
                   )
-                : pointFrom(
+                : point(
                     element.points[pointIndex][0] + deltaX,
                     element.points[pointIndex][1] + deltaY,
                   );
@@ -590,11 +590,11 @@ export class LinearElementEditor {
       linearElementEditor.segmentMidPointHoveredCoords;
     if (existingSegmentMidpointHitCoords) {
       const distance = pointDistance(
-        pointFrom(
+        point(
           existingSegmentMidpointHitCoords[0],
           existingSegmentMidpointHitCoords[1],
         ),
-        pointFrom(scenePointer.x, scenePointer.y),
+        point(scenePointer.x, scenePointer.y),
       );
       if (distance <= threshold) {
         return existingSegmentMidpointHitCoords;
@@ -606,8 +606,8 @@ export class LinearElementEditor {
     while (index < midPoints.length) {
       if (midPoints[index] !== null) {
         const distance = pointDistance(
-          pointFrom(midPoints[index]![0], midPoints[index]![1]),
-          pointFrom(scenePointer.x, scenePointer.y),
+          point(midPoints[index]![0], midPoints[index]![1]),
+          point(scenePointer.x, scenePointer.y),
         );
         if (distance <= threshold) {
           return midPoints[index];
@@ -626,8 +626,8 @@ export class LinearElementEditor {
     zoom: AppState["zoom"],
   ) {
     let distance = pointDistance(
-      pointFrom(startPoint[0], startPoint[1]),
-      pointFrom(endPoint[0], endPoint[1]),
+      point(startPoint[0], startPoint[1]),
+      point(endPoint[0], endPoint[1]),
     );
     if (element.points.length > 2 && element.roundness) {
       distance = getBezierCurveLength(element, endPoint);
@@ -829,11 +829,11 @@ export class LinearElementEditor {
     const targetPoint =
       clickedPointIndex > -1 &&
       pointRotateRads(
-        pointFrom(
+        point(
           element.x + element.points[clickedPointIndex][0],
           element.y + element.points[clickedPointIndex][1],
         ),
-        pointFrom(cx, cy),
+        point(cx, cy),
         element.angle,
       );
 
@@ -928,11 +928,11 @@ export class LinearElementEditor {
         element,
         elementsMap,
         lastCommittedPoint,
-        pointFrom(scenePointerX, scenePointerY),
+        point(scenePointerX, scenePointerY),
         event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
       );
 
-      newPoint = pointFrom(
+      newPoint = point(
         width + lastCommittedPoint[0],
         height + lastCommittedPoint[1],
       );
@@ -984,8 +984,8 @@ export class LinearElementEditor {
 
     const { x, y } = element;
     return pointRotateRads(
-      pointFrom(x + p[0], y + p[1]),
-      pointFrom(cx, cy),
+      point(x + p[0], y + p[1]),
+      point(cx, cy),
       element.angle,
     );
   }
@@ -1001,8 +1001,8 @@ export class LinearElementEditor {
     return element.points.map((p) => {
       const { x, y } = element;
       return pointRotateRads(
-        pointFrom(x + p[0], y + p[1]),
-        pointFrom(cx, cy),
+        point(x + p[0], y + p[1]),
+        point(cx, cy),
         element.angle,
       );
     });
@@ -1025,12 +1025,8 @@ export class LinearElementEditor {
     const { x, y } = element;
 
     return p
-      ? pointRotateRads(
-          pointFrom(x + p[0], y + p[1]),
-          pointFrom(cx, cy),
-          element.angle,
-        )
-      : pointRotateRads(pointFrom(x, y), pointFrom(cx, cy), element.angle);
+      ? pointRotateRads(point(x + p[0], y + p[1]), point(cx, cy), element.angle)
+      : pointRotateRads(point(x, y), point(cx, cy), element.angle);
   }
 
   static pointFromAbsoluteCoords(
@@ -1040,7 +1036,7 @@ export class LinearElementEditor {
   ): LocalPoint {
     if (isElbowArrow(element)) {
       // No rotation for elbow arrows
-      return pointFrom(
+      return point(
         absoluteCoords[0] - element.x,
         absoluteCoords[1] - element.y,
       );
@@ -1050,11 +1046,11 @@ export class LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const [x, y] = pointRotateRads(
-      pointFrom(absoluteCoords[0], absoluteCoords[1]),
-      pointFrom(cx, cy),
+      point(absoluteCoords[0], absoluteCoords[1]),
+      point(cx, cy),
       -element.angle as Radians,
     );
-    return pointFrom(x - element.x, y - element.y);
+    return point(x - element.x, y - element.y);
   }
 
   static getPointIndexUnderCursor(
@@ -1075,7 +1071,7 @@ export class LinearElementEditor {
     while (--idx > -1) {
       const p = pointHandles[idx];
       if (
-        pointDistance(pointFrom(x, y), pointFrom(p[0], p[1])) * zoom.value <
+        pointDistance(point(x, y), point(p[0], p[1])) * zoom.value <
         // +1px to account for outline stroke
         LinearElementEditor.POINT_HANDLE_SIZE + 1
       ) {
@@ -1097,12 +1093,12 @@ export class LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const [rotatedX, rotatedY] = pointRotateRads(
-      pointFrom(pointerOnGrid[0], pointerOnGrid[1]),
-      pointFrom(cx, cy),
+      point(pointerOnGrid[0], pointerOnGrid[1]),
+      point(cx, cy),
       -element.angle as Radians,
     );
 
-    return pointFrom(rotatedX - element.x, rotatedY - element.y);
+    return point(rotatedX - element.x, rotatedY - element.y);
   }
 
   /**
@@ -1122,7 +1118,7 @@ export class LinearElementEditor {
 
     return {
       points: points.map((p) => {
-        return pointFrom(p[0] - offsetX, p[1] - offsetY);
+        return point(p[0] - offsetX, p[1] - offsetY);
       }),
       x: element.x + offsetX,
       y: element.y + offsetY,
@@ -1176,8 +1172,8 @@ export class LinearElementEditor {
         }
         acc.push(
           nextPoint
-            ? pointFrom((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
-            : pointFrom(p[0], p[1]),
+            ? point((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
+            : point(p[0], p[1]),
         );
 
         nextSelectedIndices.push(indexCursor + 1);
@@ -1198,7 +1194,7 @@ export class LinearElementEditor {
         [
           {
             index: element.points.length - 1,
-            point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
+            point: point(lastPoint[0] + 30, lastPoint[1] + 30),
           },
         ],
         elementsMap,
@@ -1239,9 +1235,7 @@ export class LinearElementEditor {
     const nextPoints = element.points.reduce((acc: LocalPoint[], p, idx) => {
       if (!pointIndices.includes(idx)) {
         acc.push(
-          !acc.length
-            ? pointFrom(0, 0)
-            : pointFrom(p[0] - offsetX, p[1] - offsetY),
+          !acc.length ? point(0, 0) : point(p[0] - offsetX, p[1] - offsetY),
         );
       }
       return acc;
@@ -1318,9 +1312,9 @@ export class LinearElementEditor {
         const deltaY =
           selectedPointData.point[1] - points[selectedPointData.index][1];
 
-        return pointFrom(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
+        return point(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
       }
-      return offsetX || offsetY ? pointFrom(p[0] - offsetX, p[1] - offsetY) : p;
+      return offsetX || offsetY ? point(p[0] - offsetX, p[1] - offsetY) : p;
     });
 
     LinearElementEditor._updatePoints(
@@ -1374,8 +1368,8 @@ export class LinearElementEditor {
 
     const origin = linearElementEditor.pointerDownState.origin!;
     const dist = pointDistance(
-      pointFrom(origin.x, origin.y),
-      pointFrom(pointerCoords.x, pointerCoords.y),
+      point(origin.x, origin.y),
+      point(pointerCoords.x, pointerCoords.y),
     );
     if (
       !appState.editingLinearElement &&
@@ -1499,8 +1493,8 @@ export class LinearElementEditor {
       const dX = prevCenterX - nextCenterX;
       const dY = prevCenterY - nextCenterY;
       const rotated = pointRotateRads(
-        pointFrom(offsetX, offsetY),
-        pointFrom(dX, dY),
+        point(offsetX, offsetY),
+        point(dX, dY),
         element.angle,
       );
       mutateElement(element, {
@@ -1546,8 +1540,8 @@ export class LinearElementEditor {
     );
 
     return pointRotateRads(
-      pointFrom(width, height),
-      pointFrom(0, 0),
+      point(width, height),
+      point(0, 0),
       -element.angle as Radians,
     );
   }
@@ -1617,36 +1611,36 @@ export class LinearElementEditor {
       );
     const boundTextX2 = boundTextX1 + boundTextElement.width;
     const boundTextY2 = boundTextY1 + boundTextElement.height;
-    const centerPoint = pointFrom(cx, cy);
+    const centerPoint = point(cx, cy);
 
     const topLeftRotatedPoint = pointRotateRads(
-      pointFrom(x1, y1),
+      point(x1, y1),
       centerPoint,
       element.angle,
     );
     const topRightRotatedPoint = pointRotateRads(
-      pointFrom(x2, y1),
+      point(x2, y1),
       centerPoint,
       element.angle,
     );
 
     const counterRotateBoundTextTopLeft = pointRotateRads(
-      pointFrom(boundTextX1, boundTextY1),
+      point(boundTextX1, boundTextY1),
       centerPoint,
       -element.angle as Radians,
     );
     const counterRotateBoundTextTopRight = pointRotateRads(
-      pointFrom(boundTextX2, boundTextY1),
+      point(boundTextX2, boundTextY1),
       centerPoint,
       -element.angle as Radians,
     );
     const counterRotateBoundTextBottomLeft = pointRotateRads(
-      pointFrom(boundTextX1, boundTextY2),
+      point(boundTextX1, boundTextY2),
       centerPoint,
       -element.angle as Radians,
     );
     const counterRotateBoundTextBottomRight = pointRotateRads(
-      pointFrom(boundTextX2, boundTextY2),
+      point(boundTextX2, boundTextY2),
       centerPoint,
       -element.angle as Radians,
     );

packages/excalidraw/element/newElement.test.ts

@@ -5,7 +5,7 @@ import { FONT_FAMILY, ROUNDNESS } from "../constants";
 import { isPrimitive } from "../utils";
 import type { ExcalidrawLinearElement } from "./types";
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 
 const assertCloneObjects = (source: any, clone: any) => {
   for (const key in clone) {
@@ -38,7 +38,7 @@ describe("duplicating single elements", () => {
     element.__proto__ = { hello: "world" };
 
     mutateElement(element, {
-      points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
+      points: [point<LocalPoint>(1, 2), point<LocalPoint>(3, 4)],
     });
 
     const copy = duplicateElement(null, new Map(), element);

packages/excalidraw/element/newElement.ts

@@ -34,9 +34,9 @@ import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
   measureText,
   normalizeText,
+  wrapText,
   getBoundTextMaxWidth,
 } from "./textElement";
-import { wrapText } from "./textWrapping";
 import {
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
@@ -477,7 +477,6 @@ export const newImageElement = (
     status?: ExcalidrawImageElement["status"];
     fileId?: ExcalidrawImageElement["fileId"];
     scale?: ExcalidrawImageElement["scale"];
-    crop?: ExcalidrawImageElement["crop"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawImageElement> => {
   return {
@@ -488,7 +487,6 @@ export const newImageElement = (
     status: opts.status ?? "pending",
     fileId: opts.fileId ?? null,
     scale: opts.scale ?? [1, 1],
-    crop: opts.crop ?? null,
   };
 };
 

packages/excalidraw/element/resizeElements.ts

@@ -47,10 +47,10 @@ import {
   handleBindTextResize,
   getBoundTextMaxWidth,
   getApproxMinLineHeight,
+  wrapText,
   measureText,
   getMinTextElementWidth,
 } from "./textElement";
-import { wrapText } from "./textWrapping";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
 import { mutateElbowArrow } from "./routing";
@@ -58,7 +58,7 @@ import type { GlobalPoint } from "../../math";
 import {
   pointCenter,
   normalizeRadians,
-  pointFrom,
+  point,
   pointFromPair,
   pointRotateRads,
   type Radians,
@@ -240,8 +240,8 @@ const resizeSingleTextElement = (
   );
   // rotation pointer with reverse angle
   const [rotatedX, rotatedY] = pointRotateRads(
-    pointFrom(pointerX, pointerY),
-    pointFrom(cx, cy),
+    point(pointerX, pointerY),
+    point(cx, cy),
     -element.angle as Radians,
   );
   let scaleX = 0;
@@ -276,23 +276,23 @@ const resizeSingleTextElement = (
     const startBottomRight = [x2, y2];
     const startCenter = [cx, cy];
 
-    let newTopLeft = pointFrom<GlobalPoint>(x1, y1);
+    let newTopLeft = point<GlobalPoint>(x1, y1);
     if (["n", "w", "nw"].includes(transformHandleType)) {
-      newTopLeft = pointFrom<GlobalPoint>(
+      newTopLeft = point<GlobalPoint>(
         startBottomRight[0] - Math.abs(nextWidth),
         startBottomRight[1] - Math.abs(nextHeight),
       );
     }
     if (transformHandleType === "ne") {
       const bottomLeft = [startTopLeft[0], startBottomRight[1]];
-      newTopLeft = pointFrom<GlobalPoint>(
+      newTopLeft = point<GlobalPoint>(
         bottomLeft[0],
         bottomLeft[1] - Math.abs(nextHeight),
       );
     }
     if (transformHandleType === "sw") {
       const topRight = [startBottomRight[0], startTopLeft[1]];
-      newTopLeft = pointFrom<GlobalPoint>(
+      newTopLeft = point<GlobalPoint>(
         topRight[0] - Math.abs(nextWidth),
         topRight[1],
       );
@@ -311,20 +311,12 @@ const resizeSingleTextElement = (
     }
 
     const angle = element.angle;
-    const rotatedTopLeft = pointRotateRads(
-      newTopLeft,
-      pointFrom(cx, cy),
-      angle,
-    );
-    const newCenter = pointFrom<GlobalPoint>(
+    const rotatedTopLeft = pointRotateRads(newTopLeft, point(cx, cy), angle);
+    const newCenter = point<GlobalPoint>(
       newTopLeft[0] + Math.abs(nextWidth) / 2,
       newTopLeft[1] + Math.abs(nextHeight) / 2,
     );
-    const rotatedNewCenter = pointRotateRads(
-      newCenter,
-      pointFrom(cx, cy),
-      angle,
-    );
+    const rotatedNewCenter = pointRotateRads(newCenter, point(cx, cy), angle);
     newTopLeft = pointRotateRads(
       rotatedTopLeft,
       rotatedNewCenter,
@@ -349,12 +341,12 @@ const resizeSingleTextElement = (
       stateAtResizeStart.height,
       true,
     );
-    const startTopLeft = pointFrom<GlobalPoint>(x1, y1);
-    const startBottomRight = pointFrom<GlobalPoint>(x2, y2);
+    const startTopLeft = point<GlobalPoint>(x1, y1);
+    const startBottomRight = point<GlobalPoint>(x2, y2);
     const startCenter = pointCenter(startTopLeft, startBottomRight);
 
     const rotatedPointer = pointRotateRads(
-      pointFrom(pointerX, pointerY),
+      point(pointerX, pointerY),
       startCenter,
       -stateAtResizeStart.angle as Radians,
     );
@@ -427,7 +419,7 @@ const resizeSingleTextElement = (
       startCenter,
       angle,
     );
-    const newCenter = pointFrom(
+    const newCenter = point(
       newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
       newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
     );
@@ -469,13 +461,13 @@ export const resizeSingleElement = (
     stateAtResizeStart.height,
     true,
   );
-  const startTopLeft = pointFrom(x1, y1);
-  const startBottomRight = pointFrom(x2, y2);
+  const startTopLeft = point(x1, y1);
+  const startBottomRight = point(x2, y2);
   const startCenter = pointCenter(startTopLeft, startBottomRight);
 
   // Calculate new dimensions based on cursor position
   const rotatedPointer = pointRotateRads(
-    pointFrom(pointerX, pointerY),
+    point(pointerX, pointerY),
     startCenter,
     -stateAtResizeStart.angle as Radians,
   );
@@ -656,7 +648,7 @@ export const resizeSingleElement = (
     startCenter,
     angle,
   );
-  const newCenter = pointFrom(
+  const newCenter = point(
     newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
     newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
   );
@@ -825,20 +817,20 @@ export const resizeMultipleElements = (
   const direction = transformHandleType;
 
   const anchorsMap: Record<TransformHandleDirection, GlobalPoint> = {
-    ne: pointFrom(minX, maxY),
-    se: pointFrom(minX, minY),
-    sw: pointFrom(maxX, minY),
-    nw: pointFrom(maxX, maxY),
-    e: pointFrom(minX, minY + height / 2),
-    w: pointFrom(maxX, minY + height / 2),
-    n: pointFrom(minX + width / 2, maxY),
-    s: pointFrom(minX + width / 2, minY),
+    ne: point(minX, maxY),
+    se: point(minX, minY),
+    sw: point(maxX, minY),
+    nw: point(maxX, maxY),
+    e: point(minX, minY + height / 2),
+    w: point(maxX, minY + height / 2),
+    n: point(minX + width / 2, maxY),
+    s: point(minX + width / 2, minY),
   };
 
   // anchor point must be on the opposite side of the dragged selection handle
   // or be the center of the selection if shouldResizeFromCenter
   const [anchorX, anchorY] = shouldResizeFromCenter
-    ? pointFrom(midX, midY)
+    ? point(midX, midY)
     : anchorsMap[direction];
 
   const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;
@@ -1052,8 +1044,8 @@ const rotateMultipleElements = (
       const origAngle =
         originalElements.get(element.id)?.angle ?? element.angle;
       const [rotatedCX, rotatedCY] = pointRotateRads(
-        pointFrom(cx, cy),
-        pointFrom(centerX, centerY),
+        point(cx, cy),
+        point(centerX, centerY),
         (centerAngle + origAngle - element.angle) as Radians,
       );
 
@@ -1109,44 +1101,40 @@ export const getResizeOffsetXY = (
   const angle = (
     selectedElements.length === 1 ? selectedElements[0].angle : 0
   ) as Radians;
-  [x, y] = pointRotateRads(
-    pointFrom(x, y),
-    pointFrom(cx, cy),
-    -angle as Radians,
-  );
+  [x, y] = pointRotateRads(point(x, y), point(cx, cy), -angle as Radians);
   switch (transformHandleType) {
     case "n":
       return pointRotateRads(
-        pointFrom(x - (x1 + x2) / 2, y - y1),
-        pointFrom(0, 0),
+        point(x - (x1 + x2) / 2, y - y1),
+        point(0, 0),
         angle,
       );
     case "s":
       return pointRotateRads(
-        pointFrom(x - (x1 + x2) / 2, y - y2),
-        pointFrom(0, 0),
+        point(x - (x1 + x2) / 2, y - y2),
+        point(0, 0),
         angle,
       );
     case "w":
       return pointRotateRads(
-        pointFrom(x - x1, y - (y1 + y2) / 2),
-        pointFrom(0, 0),
+        point(x - x1, y - (y1 + y2) / 2),
+        point(0, 0),
         angle,
       );
     case "e":
       return pointRotateRads(
-        pointFrom(x - x2, y - (y1 + y2) / 2),
-        pointFrom(0, 0),
+        point(x - x2, y - (y1 + y2) / 2),
+        point(0, 0),
         angle,
       );
     case "nw":
-      return pointRotateRads(pointFrom(x - x1, y - y1), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x1, y - y1), point(0, 0), angle);
     case "ne":
-      return pointRotateRads(pointFrom(x - x2, y - y1), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x2, y - y1), point(0, 0), angle);
     case "sw":
-      return pointRotateRads(pointFrom(x - x1, y - y2), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x1, y - y2), point(0, 0), angle);
     case "se":
-      return pointRotateRads(pointFrom(x - x2, y - y2), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x2, y - y2), point(0, 0), angle);
     default:
       return [0, 0];
   }

packages/excalidraw/element/resizeTest.ts

@@ -20,10 +20,10 @@ import type { AppState, Device, Zoom } from "../types";
 import type { Bounds } from "./bounds";
 import { getElementAbsoluteCoords } from "./bounds";
 import { SIDE_RESIZING_THRESHOLD } from "../constants";
-import { isImageElement, isLinearElement } from "./typeChecks";
+import { isLinearElement } from "./typeChecks";
 import type { GlobalPoint, LineSegment, LocalPoint } from "../../math";
 import {
-  pointFrom,
+  point,
   pointOnLineSegment,
   pointRotateRads,
   type Radians,
@@ -90,26 +90,18 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
 
     // do not resize from the sides for linear elements with only two points
     if (!(isLinearElement(element) && element.points.length <= 2)) {
-      const SPACING = isImageElement(element)
-        ? 0
-        : SIDE_RESIZING_THRESHOLD / zoom.value;
-      const ZOOMED_SIDE_RESIZING_THRESHOLD =
-        SIDE_RESIZING_THRESHOLD / zoom.value;
+      const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        pointFrom(x1 - SPACING, y1 - SPACING),
-        pointFrom(x2 + SPACING, y2 + SPACING),
-        pointFrom(cx, cy),
+        point(x1 - SPACING, y1 - SPACING),
+        point(x2 + SPACING, y2 + SPACING),
+        point(cx, cy),
         element.angle,
       );
 
       for (const [dir, side] of Object.entries(sides)) {
         // test to see if x, y are on the line segment
         if (
-          pointOnLineSegment(
-            pointFrom(x, y),
-            side as LineSegment<Point>,
-            ZOOMED_SIDE_RESIZING_THRESHOLD,
-          )
+          pointOnLineSegment(point(x, y), side as LineSegment<Point>, SPACING)
         ) {
           return dir as TransformHandleType;
         }
@@ -186,9 +178,9 @@ export const getTransformHandleTypeFromCoords = <
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
 
     const sides = getSelectionBorders(
-      pointFrom(x1 - SPACING, y1 - SPACING),
-      pointFrom(x2 + SPACING, y2 + SPACING),
-      pointFrom(cx, cy),
+      point(x1 - SPACING, y1 - SPACING),
+      point(x2 + SPACING, y2 + SPACING),
+      point(cx, cy),
       0 as Radians,
     );
 
@@ -196,7 +188,7 @@ export const getTransformHandleTypeFromCoords = <
       // test to see if x, y are on the line segment
       if (
         pointOnLineSegment(
-          pointFrom(scenePointerX, scenePointerY),
+          point(scenePointerX, scenePointerY),
           side as LineSegment<Point>,
           SPACING,
         )
@@ -273,10 +265,10 @@ const getSelectionBorders = <Point extends LocalPoint | GlobalPoint>(
   center: Point,
   angle: Radians,
 ) => {
-  const topLeft = pointRotateRads(pointFrom(x1, y1), center, angle);
-  const topRight = pointRotateRads(pointFrom(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads(pointFrom(x1, y2), center, angle);
-  const bottomRight = pointRotateRads(pointFrom(x2, y2), center, angle);
+  const topLeft = pointRotateRads(point(x1, y1), center, angle);
+  const topRight = pointRotateRads(point(x2, y1), center, angle);
+  const bottomLeft = pointRotateRads(point(x1, y2), center, angle);
+  const bottomRight = pointRotateRads(point(x2, y2), center, angle);
 
   return {
     n: [topLeft, topRight],

packages/excalidraw/element/routing.test.tsx

@@ -17,7 +17,7 @@ import type {
   ExcalidrawElbowArrowElement,
 } from "./types";
 import { ARROW_TYPE } from "../constants";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 
 const { h } = window;
 
@@ -32,8 +32,8 @@ describe("elbow arrow routing", () => {
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(arrow);
     mutateElbowArrow(arrow, scene.getNonDeletedElementsMap(), [
-      pointFrom(-45 - arrow.x, -100.1 - arrow.y),
-      pointFrom(45 - arrow.x, 99.9 - arrow.y),
+      point(-45 - arrow.x, -100.1 - arrow.y),
+      point(45 - arrow.x, 99.9 - arrow.y),
     ]);
     expect(arrow.points).toEqual([
       [0, 0],
@@ -69,7 +69,7 @@ describe("elbow arrow routing", () => {
       y: -100.1,
       width: 90,
       height: 200,
-      points: [pointFrom(0, 0), pointFrom(90, 200)],
+      points: [point(0, 0), point(90, 200)],
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(rectangle1);
     scene.insertElement(rectangle2);
@@ -81,7 +81,7 @@ describe("elbow arrow routing", () => {
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    mutateElbowArrow(arrow, elementsMap, [pointFrom(0, 0), pointFrom(90, 200)]);
+    mutateElbowArrow(arrow, elementsMap, [point(0, 0), point(90, 200)]);
 
     expect(arrow.points).toEqual([
       [0, 0],

packages/excalidraw/element/routing.ts

@@ -1,6 +1,6 @@
 import type { Radians } from "../../math";
 import {
-  pointFrom,
+  point,
   pointScaleFromOrigin,
   pointTranslate,
   vector,
@@ -743,13 +743,13 @@ const getDonglePosition = (
 ): GlobalPoint => {
   switch (heading) {
     case HEADING_UP:
-      return pointFrom(p[0], bounds[1]);
+      return point(p[0], bounds[1]);
     case HEADING_RIGHT:
-      return pointFrom(bounds[2], p[1]);
+      return point(bounds[2], p[1]);
     case HEADING_DOWN:
-      return pointFrom(p[0], bounds[3]);
+      return point(p[0], bounds[3]);
   }
-  return pointFrom(bounds[0], p[1]);
+  return point(bounds[0], p[1]);
 };
 
 const estimateSegmentCount = (

packages/excalidraw/element/textElement.test.ts

@@ -1,4 +1,4 @@
-import { FONT_FAMILY } from "../constants";
+import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
 import { getLineHeight } from "../fonts";
 import { API } from "../tests/helpers/api";
 import {
@@ -6,10 +6,235 @@ import {
   getContainerCoords,
   getBoundTextMaxWidth,
   getBoundTextMaxHeight,
+  wrapText,
   detectLineHeight,
   getLineHeightInPx,
+  parseTokens,
 } from "./textElement";
-import type { ExcalidrawTextElementWithContainer } from "./types";
+import type { ExcalidrawTextElementWithContainer, FontString } from "./types";
+
+describe("Test wrapText", () => {
+  const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
+
+  it("shouldn't add new lines for trailing spaces", () => {
+    const text = "Hello whats up     ";
+    const maxWidth = 200 - BOUND_TEXT_PADDING * 2;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe(text);
+  });
+
+  it("should work with emojis", () => {
+    const text = "😀";
+    const maxWidth = 1;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("😀");
+  });
+
+  it("should show the text correctly when max width reached", () => {
+    const text = "Hello😀";
+    const maxWidth = 10;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("H\ne\nl\nl\no\n😀");
+  });
+
+  describe("When text doesn't contain new lines", () => {
+    const text = "Hello whats up";
+
+    [
+      {
+        desc: "break all words when width of each word is less than container width",
+        width: 80,
+        res: `Hello \nwhats \nup`,
+      },
+      {
+        desc: "break all characters when width of each character is less than container width",
+        width: 25,
+        res: `H
+e
+l
+l
+o
+w
+h
+a
+t
+s
+u
+p`,
+      },
+      {
+        desc: "break words as per the width",
+
+        width: 140,
+        res: `Hello whats \nup`,
+      },
+      {
+        desc: "fit the container",
+
+        width: 250,
+        res: "Hello whats up",
+      },
+      {
+        desc: "should push the word if its equal to max width",
+        width: 60,
+        res: `Hello
+whats
+up`,
+      },
+    ].forEach((data) => {
+      it(`should ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+
+  describe("When text contain new lines", () => {
+    const text = `Hello
+whats up`;
+    [
+      {
+        desc: "break all words when width of each word is less than container width",
+        width: 80,
+        res: `Hello\nwhats \nup`,
+      },
+      {
+        desc: "break all characters when width of each character is less than container width",
+        width: 25,
+        res: `H
+e
+l
+l
+o
+w
+h
+a
+t
+s
+u
+p`,
+      },
+      {
+        desc: "break words as per the width",
+
+        width: 150,
+        res: `Hello
+whats up`,
+      },
+      {
+        desc: "fit the container",
+
+        width: 250,
+        res: `Hello
+whats up`,
+      },
+    ].forEach((data) => {
+      it(`should respect new lines and ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+
+  describe("When text is long", () => {
+    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
+    [
+      {
+        desc: "fit characters of long string as per container width",
+        width: 170,
+        res: `hellolongtextth\nisiswhatsupwith\nyouIamtypingggg\ngandtypinggg \nbreak it now`,
+      },
+
+      {
+        desc: "fit characters of long string as per container width and break words as per the width",
+
+        width: 130,
+        res: `hellolongte
+xtthisiswha
+tsupwithyou
+Iamtypinggg
+ggandtyping
+gg break it
+now`,
+      },
+      {
+        desc: "fit the long text when container width is greater than text length and move the rest to next line",
+
+        width: 600,
+        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg \nbreak it now`,
+      },
+    ].forEach((data) => {
+      it(`should ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+
+  it("should wrap the text correctly when word length is exactly equal to max width", () => {
+    const text = "Hello Excalidraw";
+    // Length of "Excalidraw" is 100 and exacty equal to max width
+    const res = wrapText(text, font, 100);
+    expect(res).toEqual(`Hello \nExcalidraw`);
+  });
+
+  it("should return the text as is if max width is invalid", () => {
+    const text = "Hello Excalidraw";
+    expect(wrapText(text, font, NaN)).toEqual(text);
+    expect(wrapText(text, font, -1)).toEqual(text);
+    expect(wrapText(text, font, Infinity)).toEqual(text);
+  });
+
+  it("should wrap the text correctly when text contains hyphen", () => {
+    let text =
+      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
+    const res = wrapText(text, font, 110);
+    expect(res).toBe(
+      `Wikipedia \nis hosted \nby \nWikimedia-\nFoundation,\na non-\nprofit \norganizati\non that \nalso hosts\na range-of\nother \nprojects`,
+    );
+
+    text = "Hello thereusing-now";
+    expect(wrapText(text, font, 100)).toEqual("Hello \nthereusin\ng-now");
+  });
+});
+
+describe("Test parseTokens", () => {
+  it("should split into tokens correctly", () => {
+    let text = "Excalidraw is a virtual collaborative whiteboard";
+    expect(parseTokens(text)).toEqual([
+      "Excalidraw",
+      "is",
+      "a",
+      "virtual",
+      "collaborative",
+      "whiteboard",
+    ]);
+
+    text =
+      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
+    expect(parseTokens(text)).toEqual([
+      "Wikipedia",
+      "is",
+      "hosted",
+      "by",
+      "Wikimedia-",
+      "",
+      "Foundation,",
+      "a",
+      "non-",
+      "profit",
+      "organization",
+      "that",
+      "also",
+      "hosts",
+      "a",
+      "range-",
+      "of",
+      "other",
+      "projects",
+    ]);
+  });
+});
 
 describe("Test measureText", () => {
   describe("Test getContainerCoords", () => {

packages/excalidraw/element/textElement.ts

@@ -21,7 +21,6 @@ import {
 } from "../constants";
 import type { MaybeTransformHandleType } from "./transformHandles";
 import { isTextElement } from ".";
-import { wrapText } from "./textWrapping";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
 import type { AppState } from "../types";
@@ -344,7 +343,7 @@ let canvas: HTMLCanvasElement | undefined;
  *
  * `Math.ceil` of the final width adds additional buffer which stabilizes slight wrapping incosistencies.
  */
-export const getLineWidth = (
+const getLineWidth = (
   text: string,
   font: FontString,
   forceAdvanceWidth?: true,
@@ -409,34 +408,193 @@ export const getTextHeight = (
   return getLineHeightInPx(fontSize, lineHeight) * lineCount;
 };
 
+export const parseTokens = (text: string) => {
+  // Splitting words containing "-" as those are treated as separate words
+  // by css wrapping algorithm eg non-profit => non-, profit
+  const words = text.split("-");
+  if (words.length > 1) {
+    // non-proft org => ['non-', 'profit org']
+    words.forEach((word, index) => {
+      if (index !== words.length - 1) {
+        words[index] = word += "-";
+      }
+    });
+  }
+  // Joining the words with space and splitting them again with space to get the
+  // final list of tokens
+  // ['non-', 'profit org'] =>,'non- proft org' => ['non-','profit','org']
+  return words.join(" ").split(" ");
+};
+
+export const wrapText = (
+  text: string,
+  font: FontString,
+  maxWidth: number,
+): string => {
+  // if maxWidth is not finite or NaN which can happen in case of bugs in
+  // computation, we need to make sure we don't continue as we'll end up
+  // in an infinite loop
+  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
+    return text;
+  }
+
+  const lines: Array<string> = [];
+  const originalLines = text.split("\n");
+  const spaceAdvanceWidth = getLineWidth(" ", font, true);
+
+  let currentLine = "";
+  let currentLineWidthTillNow = 0;
+
+  const push = (str: string) => {
+    if (str.trim()) {
+      lines.push(str);
+    }
+  };
+
+  const resetParams = () => {
+    currentLine = "";
+    currentLineWidthTillNow = 0;
+  };
+
+  for (const originalLine of originalLines) {
+    const currentLineWidth = getLineWidth(originalLine, font, true);
+
+    // Push the line if its <= maxWidth
+    if (currentLineWidth <= maxWidth) {
+      lines.push(originalLine);
+      continue;
+    }
+
+    const words = parseTokens(originalLine);
+    resetParams();
+
+    let index = 0;
+
+    while (index < words.length) {
+      const currentWordWidth = getLineWidth(words[index], font, true);
+
+      // This will only happen when single word takes entire width
+      if (currentWordWidth === maxWidth) {
+        push(words[index]);
+        index++;
+      }
+
+      // Start breaking longer words exceeding max width
+      else if (currentWordWidth > maxWidth) {
+        // push current line since the current word exceeds the max width
+        // so will be appended in next line
+        push(currentLine);
+
+        resetParams();
+
+        while (words[index].length > 0) {
+          const currentChar = String.fromCodePoint(
+            words[index].codePointAt(0)!,
+          );
+
+          const line = currentLine + currentChar;
+          // use advance width instead of the actual width as it's closest to the browser wapping algo
+          // use width of the whole line instead of calculating individual chars to accomodate for kerning
+          const lineAdvanceWidth = getLineWidth(line, font, true);
+          const charAdvanceWidth = charWidth.calculate(currentChar, font);
+
+          currentLineWidthTillNow = lineAdvanceWidth;
+          words[index] = words[index].slice(currentChar.length);
+
+          if (currentLineWidthTillNow >= maxWidth) {
+            push(currentLine);
+            currentLine = currentChar;
+            currentLineWidthTillNow = charAdvanceWidth;
+          } else {
+            currentLine = line;
+          }
+        }
+        // push current line if appending space exceeds max width
+        if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
+          push(currentLine);
+          resetParams();
+          // space needs to be appended before next word
+          // as currentLine contains chars which couldn't be appended
+          // to previous line unless the line ends with hyphen to sync
+          // with css word-wrap
+        } else if (!currentLine.endsWith("-")) {
+          currentLine += " ";
+          currentLineWidthTillNow += spaceAdvanceWidth;
+        }
+        index++;
+      } else {
+        // Start appending words in a line till max width reached
+        while (currentLineWidthTillNow < maxWidth && index < words.length) {
+          const word = words[index];
+          currentLineWidthTillNow = getLineWidth(
+            currentLine + word,
+            font,
+            true,
+          );
+
+          if (currentLineWidthTillNow > maxWidth) {
+            push(currentLine);
+            resetParams();
+
+            break;
+          }
+          index++;
+
+          // if word ends with "-" then we don't need to add space
+          // to sync with css word-wrap
+          const shouldAppendSpace = !word.endsWith("-");
+          currentLine += word;
+
+          if (shouldAppendSpace) {
+            currentLine += " ";
+          }
+
+          // Push the word if appending space exceeds max width
+          if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
+            if (shouldAppendSpace) {
+              lines.push(currentLine.slice(0, -1));
+            } else {
+              lines.push(currentLine);
+            }
+            resetParams();
+            break;
+          }
+        }
+      }
+    }
+
+    if (currentLine.slice(-1) === " ") {
+      // only remove last trailing space which we have added when joining words
+      currentLine = currentLine.slice(0, -1);
+      push(currentLine);
+    }
+  }
+
+  return lines.join("\n");
+};
+
 export const charWidth = (() => {
   const cachedCharWidth: { [key: FontString]: Array<number> } = {};
 
   const calculate = (char: string, font: FontString) => {
-    const unicode = char.charCodeAt(0);
+    const ascii = char.charCodeAt(0);
     if (!cachedCharWidth[font]) {
       cachedCharWidth[font] = [];
     }
-    if (!cachedCharWidth[font][unicode]) {
+    if (!cachedCharWidth[font][ascii]) {
       const width = getLineWidth(char, font, true);
-      cachedCharWidth[font][unicode] = width;
+      cachedCharWidth[font][ascii] = width;
     }
 
-    return cachedCharWidth[font][unicode];
+    return cachedCharWidth[font][ascii];
   };
 
   const getCache = (font: FontString) => {
     return cachedCharWidth[font];
   };
-
-  const clearCache = (font: FontString) => {
-    cachedCharWidth[font] = [];
-  };
-
   return {
     calculate,
     getCache,
-    clearCache,
   };
 })();
 

packages/excalidraw/element/textWrapping.test.ts

@@ -1,633 +0,0 @@
-import { wrapText, parseTokens } from "./textWrapping";
-import type { FontString } from "./types";
-
-describe("Test wrapText", () => {
-  // font is irrelevant as jsdom does not support FontFace API
-  // `measureText` width is mocked to return `text.length` by `jest-canvas-mock`
-  // https://github.com/hustcc/jest-canvas-mock/blob/master/src/classes/TextMetrics.js
-  const font = "10px Cascadia, Segoe UI Emoji" as FontString;
-
-  it("should wrap the text correctly when word length is exactly equal to max width", () => {
-    const text = "Hello Excalidraw";
-    // Length of "Excalidraw" is 100 and exacty equal to max width
-    const res = wrapText(text, font, 100);
-    expect(res).toEqual(`Hello\nExcalidraw`);
-  });
-
-  it("should return the text as is if max width is invalid", () => {
-    const text = "Hello Excalidraw";
-    expect(wrapText(text, font, NaN)).toEqual(text);
-    expect(wrapText(text, font, -1)).toEqual(text);
-    expect(wrapText(text, font, Infinity)).toEqual(text);
-  });
-
-  it("should show the text correctly when max width reached", () => {
-    const text = "Hello😀";
-    const maxWidth = 10;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("H\ne\nl\nl\no\n😀");
-  });
-
-  it("should not wrap number when wrapping line", () => {
-    const text = "don't wrap this number 99,100.99";
-    const maxWidth = 300;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("don't wrap this number\n99,100.99");
-  });
-
-  it("should trim all trailing whitespaces", () => {
-    const text = "Hello     ";
-    const maxWidth = 50;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello");
-  });
-
-  it("should trim all but one trailing whitespaces", () => {
-    const text = "Hello     ";
-    const maxWidth = 60;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello ");
-  });
-
-  it("should keep preceding whitespaces and trim all trailing whitespaces", () => {
-    const text = "  Hello  World";
-    const maxWidth = 90;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("  Hello\nWorld");
-  });
-
-  it("should keep some preceding whitespaces, trim trailing whitespaces, but kep those that fit in the trailing line", () => {
-    const text = "   Hello  World            ";
-    const maxWidth = 90;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("   Hello\nWorld    ");
-  });
-
-  it("should trim keep those whitespace that fit in the trailing line", () => {
-    const text = "Hello   Wo rl  d                     ";
-    const maxWidth = 100;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello   Wo\nrl  d     ");
-  });
-
-  it("should support multiple (multi-codepoint) emojis", () => {
-    const text = "😀🗺🔥👩🏽‍🦰👨‍👩‍👧‍👦🇨🇿";
-    const maxWidth = 1;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("😀\n🗺\n🔥\n👩🏽‍🦰\n👨‍👩‍👧‍👦\n🇨🇿");
-  });
-
-  it("should wrap the text correctly when text contains hyphen", () => {
-    let text =
-      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
-    const res = wrapText(text, font, 110);
-    expect(res).toBe(
-      `Wikipedia\nis hosted\nby\nWikimedia-\nFoundation,\na non-\nprofit\norganizatio\nn that also\nhosts a\nrange-of\nother\nprojects`,
-    );
-
-    text = "Hello thereusing-now";
-    expect(wrapText(text, font, 100)).toEqual("Hello\nthereusing\n-now");
-  });
-
-  it("should support wrapping nested lists", () => {
-    const text = `\tA) one tab\t\t- two tabs        - 8 spaces`;
-
-    const maxWidth = 100;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe(`\tA) one\ntab\t\t- two\ntabs\n- 8 spaces`);
-
-    const maxWidth2 = 50;
-    const res2 = wrapText(text, font, maxWidth2);
-    expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
-  });
-
-  describe("When text is CJK", () => {
-    it("should break each CJK character when width is very small", () => {
-      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
-      const text = "안녕하세요こんにちは世界ｺﾝﾆﾁハ你好";
-      const maxWidth = 10;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe(
-        "안\n녕\n하\n세\n요\nこ\nん\nに\nち\nは\n世\n界\nｺ\nﾝ\nﾆ\nﾁ\nハ\n你\n好",
-      );
-    });
-
-    it("should break CJK text into longer segments when width is larger", () => {
-      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
-      const text = "안녕하세요こんにちは世界ｺﾝﾆﾁハ你好";
-      const maxWidth = 30;
-      const res = wrapText(text, font, maxWidth);
-
-      // measureText is mocked, so it's not precisely what would happen in prod
-      expect(res).toBe("안녕하\n세요こ\nんにち\nは世界\nｺﾝﾆ\nﾁハ你\n好");
-    });
-
-    it("should handle a combination of CJK, latin, emojis and whitespaces", () => {
-      const text = `a醫 醫      bb  你好  world-i-😀🗺🔥`;
-
-      const maxWidth = 150;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe(`a醫 醫      bb  你\n好  world-i-😀🗺\n🔥`);
-
-      const maxWidth2 = 50;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`a醫 醫\nbb  你\n好\nworld\n-i-😀\n🗺🔥`);
-
-      const maxWidth3 = 30;
-      const res3 = wrapText(text, font, maxWidth3);
-      expect(res3).toBe(`a醫\n醫\nbb\n你好\nwor\nld-\ni-\n😀\n🗺\n🔥`);
-    });
-
-    it("should break before and after a regular CJK character", () => {
-      const text = "HelloたWorld";
-      const maxWidth1 = 50;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe("Hello\nた\nWorld");
-
-      const maxWidth2 = 60;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe("Helloた\nWorld");
-    });
-
-    it("should break before and after certain CJK symbols", () => {
-      const text = "こんにちは〃世界";
-      const maxWidth1 = 50;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe("こんにちは\n〃世界");
-
-      const maxWidth2 = 60;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe("こんにちは〃\n世界");
-    });
-
-    it("should break after, not before for certain CJK pairs", () => {
-      const text = "Hello た。";
-      const maxWidth = 70;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hello\nた。");
-    });
-
-    it("should break before, not after for certain CJK pairs", () => {
-      const text = "Hello「たWorld」";
-      const maxWidth = 60;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hello\n「た\nWorld」");
-    });
-
-    it("should break after, not before for certain CJK character pairs", () => {
-      const text = "「Helloた」World";
-      const maxWidth = 70;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("「Hello\nた」World");
-    });
-
-    it("should break Chinese sentences", () => {
-      const text = `中国你好！这是一个测试。
-我们来看看：人民币¥1234「很贵」
-（括号）、逗号，句号。空格 换行　全角符号…—`;
-
-      const maxWidth1 = 80;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe(`中国你好！这是一\n个测试。
-我们来看看：人民\n币¥1234「很\n贵」
-（括号）、逗号，\n句号。空格 换行\n全角符号…—`);
-
-      const maxWidth2 = 50;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`中国你好！\n这是一个测\n试。
-我们来看\n看：人民币\n¥1234\n「很贵」
-（括号）、\n逗号，句\n号。空格\n换行　全角\n符号…—`);
-    });
-
-    it("should break Japanese sentences", () => {
-      const text = `日本こんにちは！これはテストです。
-  見てみましょう：円￥1234「高い」
-  （括弧）、読点、句点。
-  空白 改行　全角記号…ー`;
-
-      const maxWidth1 = 80;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe(`日本こんにちは！\nこれはテストで\nす。
-  見てみましょ\nう：円￥1234\n「高い」
-  （括弧）、読\n点、句点。
-  空白 改行\n全角記号…ー`);
-
-      const maxWidth2 = 50;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`日本こんに\nちは！これ\nはテストで\nす。
-  見てみ\nましょう：\n円\n￥1234\n「高い」
-  （括\n弧）、読\n点、句点。
-  空白\n改行　全角\n記号…ー`);
-    });
-
-    it("should break Korean sentences", () => {
-      const text = `한국 안녕하세요! 이것은 테스트입니다.
-우리 보자: 원화₩1234「비싸다」
-(괄호), 쉼표, 마침표.
-공백 줄바꿈　전각기호…—`;
-
-      const maxWidth1 = 80;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe(`한국 안녕하세\n요! 이것은 테\n스트입니다.
-우리 보자: 원\n화₩1234「비\n싸다」
-(괄호), 쉼\n표, 마침표.
-공백 줄바꿈　전\n각기호…—`);
-
-      const maxWidth2 = 60;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`한국 안녕하\n세요! 이것\n은 테스트입\n니다.
-우리 보자:\n원화\n₩1234\n「비싸다」
-(괄호),\n쉼표, 마침\n표.
-공백 줄바꿈\n전각기호…—`);
-    });
-  });
-
-  describe("When text contains leading whitespaces", () => {
-    const text = "  \t   Hello world";
-
-    it("should preserve leading whitespaces", () => {
-      const maxWidth = 120;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("  \t   Hello\nworld");
-    });
-
-    it("should break and collapse leading whitespaces when line breaks", () => {
-      const maxWidth = 60;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("\nHello\nworld");
-    });
-
-    it("should break and collapse leading whitespaces whe words break", () => {
-      const maxWidth = 30;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("\nHel\nlo\nwor\nld");
-    });
-  });
-
-  describe("When text contains trailing whitespaces", () => {
-    it("shouldn't add new lines for trailing spaces", () => {
-      const text = "Hello whats up     ";
-      const maxWidth = 190;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe(text);
-    });
-
-    it("should ignore trailing whitespaces when line breaks", () => {
-      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
-      const maxWidth = 400;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hippopotomonstrosesquippedaliophobia\n??????");
-    });
-
-    it("should not ignore trailing whitespaces when word breaks", () => {
-      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
-      const maxWidth = 300;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hippopotomonstrosesquippedalio\nphobia        ??????");
-    });
-
-    it("should ignore trailing whitespaces when word breaks and line breaks", () => {
-      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
-      const maxWidth = 180;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hippopotomonstrose\nsquippedaliophobia\n??????");
-    });
-  });
-
-  describe("When text doesn't contain new lines", () => {
-    const text = "Hello whats up";
-
-    [
-      {
-        desc: "break all words when width of each word is less than container width",
-        width: 70,
-        res: `Hello\nwhats\nup`,
-      },
-      {
-        desc: "break all characters when width of each character is less than container width",
-        width: 15,
-        res: `H\ne\nl\nl\no\nw\nh\na\nt\ns\nu\np`,
-      },
-      {
-        desc: "break words as per the width",
-
-        width: 130,
-        res: `Hello whats\nup`,
-      },
-      {
-        desc: "fit the container",
-
-        width: 240,
-        res: "Hello whats up",
-      },
-      {
-        desc: "push the word if its equal to max width",
-        width: 50,
-        res: `Hello\nwhats\nup`,
-      },
-    ].forEach((data) => {
-      it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-
-  describe("When text contain new lines", () => {
-    const text = `Hello\n  whats up`;
-    [
-      {
-        desc: "break all words when width of each word is less than container width",
-        width: 70,
-        res: `Hello\n  whats\nup`,
-      },
-      {
-        desc: "break all characters when width of each character is less than container width",
-        width: 15,
-        res: `H\ne\nl\nl\no\n\nw\nh\na\nt\ns\nu\np`,
-      },
-      {
-        desc: "break words as per the width",
-        width: 140,
-        res: `Hello\n  whats up`,
-      },
-    ].forEach((data) => {
-      it(`should respect new lines and ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-
-  describe("When text is long", () => {
-    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
-    [
-      {
-        desc: "fit characters of long string as per container width",
-        width: 160,
-        res: `hellolongtextthi\nsiswhatsupwithyo\nuIamtypingggggan\ndtypinggg break\nit now`,
-      },
-      {
-        desc: "fit characters of long string as per container width and break words as per the width",
-
-        width: 120,
-        res: `hellolongtex\ntthisiswhats\nupwithyouIam\ntypingggggan\ndtypinggg\nbreak it now`,
-      },
-      {
-        desc: "fit the long text when container width is greater than text length and move the rest to next line",
-
-        width: 590,
-        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg\nbreak it now`,
-      },
-    ].forEach((data) => {
-      it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-
-  describe("Test parseTokens", () => {
-    it("should tokenize latin", () => {
-      let text = "Excalidraw is a virtual collaborative whiteboard";
-
-      expect(parseTokens(text)).toEqual([
-        "Excalidraw",
-        " ",
-        "is",
-        " ",
-        "a",
-        " ",
-        "virtual",
-        " ",
-        "collaborative",
-        " ",
-        "whiteboard",
-      ]);
-
-      text =
-        "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
-      expect(parseTokens(text)).toEqual([
-        "Wikipedia",
-        " ",
-        "is",
-        " ",
-        "hosted",
-        " ",
-        "by",
-        " ",
-        "Wikimedia-",
-        " ",
-        "Foundation,",
-        " ",
-        "a",
-        " ",
-        "non-",
-        "profit",
-        " ",
-        "organization",
-        " ",
-        "that",
-        " ",
-        "also",
-        " ",
-        "hosts",
-        " ",
-        "a",
-        " ",
-        "range-",
-        "of",
-        " ",
-        "other",
-        " ",
-        "projects",
-      ]);
-    });
-
-    it("should not tokenize number", () => {
-      const text = "99,100.99";
-      const tokens = parseTokens(text);
-      expect(tokens).toEqual(["99,100.99"]);
-    });
-
-    it("should tokenize joined emojis", () => {
-      const text = `😬🌍🗺🔥☂️👩🏽‍🦰👨‍👩‍👧‍👦👩🏾‍🔬🏳️‍🌈🧔‍♀️🧑‍🤝‍🧑🙅🏽‍♂️✅0️⃣🇨🇿🦅`;
-      const tokens = parseTokens(text);
-
-      expect(tokens).toEqual([
-        "😬",
-        "🌍",
-        "🗺",
-        "🔥",
-        "☂️",
-        "👩🏽‍🦰",
-        "👨‍👩‍👧‍👦",
-        "👩🏾‍🔬",
-        "🏳️‍🌈",
-        "🧔‍♀️",
-        "🧑‍🤝‍🧑",
-        "🙅🏽‍♂️",
-        "✅",
-        "0️⃣",
-        "🇨🇿",
-        "🦅",
-      ]);
-    });
-
-    it("should tokenize emojis mixed with mixed text", () => {
-      const text = `😬a🌍b🗺c🔥d☂️《👩🏽‍🦰》👨‍👩‍👧‍👦德👩🏾‍🔬こ🏳️‍🌈안🧔‍♀️g🧑‍🤝‍🧑h🙅🏽‍♂️e✅f0️⃣g🇨🇿10🦅#hash`;
-      const tokens = parseTokens(text);
-
-      expect(tokens).toEqual([
-        "😬",
-        "a",
-        "🌍",
-        "b",
-        "🗺",
-        "c",
-        "🔥",
-        "d",
-        "☂️",
-        "《",
-        "👩🏽‍🦰",
-        "》",
-        "👨‍👩‍👧‍👦",
-        "德",
-        "👩🏾‍🔬",
-        "こ",
-        "🏳️‍🌈",
-        "안",
-        "🧔‍♀️",
-        "g",
-        "🧑‍🤝‍🧑",
-        "h",
-        "🙅🏽‍♂️",
-        "e",
-        "✅",
-        "f0️⃣g", // bummer, but ok, as we traded kecaps not breaking (less common) for hash and numbers not breaking (more common)
-        "🇨🇿",
-        "10", // nice! do not break the number, as it's by default matched by \p{Emoji}
-        "🦅",
-        "#hash", // nice! do not break the hash, as it's by default matched by \p{Emoji}
-      ]);
-    });
-
-    it("should tokenize decomposed chars into their composed variants", () => {
-      // each input character is in a decomposed form
-      const text = "čでäぴέ다й한";
-      expect(text.normalize("NFC").length).toEqual(8);
-      expect(text).toEqual(text.normalize("NFD"));
-
-      const tokens = parseTokens(text);
-      expect(tokens.length).toEqual(8);
-      expect(tokens).toEqual(["č", "で", "ä", "ぴ", "έ", "다", "й", "한"]);
-    });
-
-    it("should tokenize artificial CJK", () => {
-      const text = `《道德經》醫-醫こんにちは世界！안녕하세요세계；요』,다.다...원/달(((다)))[[1]]〚({((한))>)〛(「た」)た…[Hello] \t　World？ニューヨーク・￥3700.55す。090-1234-5678￥1,000〜＄5,000「素晴らしい！」〔重要〕＃１：Taro君30％は、（たなばた）〰￥110±￥570で20℃〜9:30〜10:00【一番】`;
-      // [
-      //   '《道',      '德',        '經》',           '醫-',
-      //   '醫',        'こ',        'ん',             'に',
-      //   'ち',        'は',        '世',             '界！',
-      //   '안',        '녕',        '하',             '세',
-      //   '요',        '세',        '계；',           '요』,',
-      //   '다.',       '다...',     '원/',            '달',
-      //   '(((다)))',  '[[1]]',     '〚({((한))>)〛', '(「た」)',
-      //   'た…',       '[Hello]',   ' ',              '\t',
-      //   '　',        'World？',   'ニ',             'ュ',
-      //   'ー',        'ヨ',        'ー',             'ク・',
-      //   '￥3700.55', 'す。',      '090-',           '1234-',
-      //   '5678',      '￥1,000〜', '＄5,000',        '「素',
-      //   '晴',        'ら',        'し',             'い！」',
-      //   '〔重',      '要〕',      '＃',             '１：',
-      //   'Taro',      '君',        '30％',           'は、',
-      //   '（た',      'な',        'ば',             'た）',
-      //   '〰',        '￥110±',    '￥570',          'で',
-      //   '20℃〜',     '9:30〜',    '10:00',          '【一',
-      //   '番】'
-      // ]
-      const tokens = parseTokens(text);
-
-      // Latin
-      expect(tokens).toContain("[[1]]");
-      expect(tokens).toContain("[Hello]");
-      expect(tokens).toContain("World？");
-      expect(tokens).toContain("Taro");
-
-      // Chinese
-      expect(tokens).toContain("《道");
-      expect(tokens).toContain("德");
-      expect(tokens).toContain("經》");
-      expect(tokens).toContain("醫-");
-      expect(tokens).toContain("醫");
-
-      // Japanese
-      expect(tokens).toContain("こ");
-      expect(tokens).toContain("ん");
-      expect(tokens).toContain("に");
-      expect(tokens).toContain("ち");
-      expect(tokens).toContain("は");
-      expect(tokens).toContain("世");
-      expect(tokens).toContain("ク・");
-      expect(tokens).toContain("界！");
-      expect(tokens).toContain("た…");
-      expect(tokens).toContain("す。");
-      expect(tokens).toContain("ュ");
-      expect(tokens).toContain("「素");
-      expect(tokens).toContain("晴");
-      expect(tokens).toContain("ら");
-      expect(tokens).toContain("し");
-      expect(tokens).toContain("い！」");
-      expect(tokens).toContain("君");
-      expect(tokens).toContain("は、");
-      expect(tokens).toContain("（た");
-      expect(tokens).toContain("な");
-      expect(tokens).toContain("ば");
-      expect(tokens).toContain("た）");
-      expect(tokens).toContain("で");
-      expect(tokens).toContain("【一");
-      expect(tokens).toContain("番】");
-
-      // Check for Korean
-      expect(tokens).toContain("안");
-      expect(tokens).toContain("녕");
-      expect(tokens).toContain("하");
-      expect(tokens).toContain("세");
-      expect(tokens).toContain("요");
-      expect(tokens).toContain("세");
-      expect(tokens).toContain("계；");
-      expect(tokens).toContain("요』,");
-      expect(tokens).toContain("다.");
-      expect(tokens).toContain("다...");
-      expect(tokens).toContain("원/");
-      expect(tokens).toContain("달");
-      expect(tokens).toContain("(((다)))");
-      expect(tokens).toContain("〚({((한))>)〛");
-      expect(tokens).toContain("(「た」)");
-
-      // Numbers and units
-      expect(tokens).toContain("￥3700.55");
-      expect(tokens).toContain("090-");
-      expect(tokens).toContain("1234-");
-      expect(tokens).toContain("5678");
-      expect(tokens).toContain("￥1,000〜");
-      expect(tokens).toContain("＄5,000");
-      expect(tokens).toContain("１：");
-      expect(tokens).toContain("30％");
-      expect(tokens).toContain("￥110±");
-      expect(tokens).toContain("20℃〜");
-      expect(tokens).toContain("9:30〜");
-      expect(tokens).toContain("10:00");
-
-      // Punctuation and symbols
-      expect(tokens).toContain(" ");
-      expect(tokens).toContain("\t");
-      expect(tokens).toContain("　");
-      expect(tokens).toContain("ニ");
-      expect(tokens).toContain("ー");
-      expect(tokens).toContain("ヨ");
-      expect(tokens).toContain("〰");
-      expect(tokens).toContain("＃");
-    });
-  });
-});

packages/excalidraw/element/textWrapping.ts

@@ -1,568 +0,0 @@
-import { ENV } from "../constants";
-import { charWidth, getLineWidth } from "./textElement";
-import type { FontString } from "./types";
-
-let cachedCjkRegex: RegExp | undefined;
-let cachedLineBreakRegex: RegExp | undefined;
-let cachedEmojiRegex: RegExp | undefined;
-
-/**
- * Test if a given text contains any CJK characters (including symbols, punctuation, etc,).
- */
-export const containsCJK = (text: string) => {
-  if (!cachedCjkRegex) {
-    cachedCjkRegex = Regex.class(...Object.values(CJK));
-  }
-
-  return cachedCjkRegex.test(text);
-};
-
-const getLineBreakRegex = () => {
-  if (!cachedLineBreakRegex) {
-    try {
-      cachedLineBreakRegex = getLineBreakRegexAdvanced();
-    } catch {
-      cachedLineBreakRegex = getLineBreakRegexSimple();
-    }
-  }
-
-  return cachedLineBreakRegex;
-};
-
-const getEmojiRegex = () => {
-  if (!cachedEmojiRegex) {
-    cachedEmojiRegex = getEmojiRegexUnicode();
-  }
-
-  return cachedEmojiRegex;
-};
-
-/**
- * Common symbols used across different languages.
- */
-const COMMON = {
-  /**
-   * Natural breaking points for any grammars.
-   *
-   * Hello world
-   *      ↑ BREAK ALWAYS " " → ["Hello", " ", "world"]
-   * Hello-world
-   *       ↑ BREAK AFTER "-" → ["Hello-", "world"]
-   */
-  WHITESPACE: /\s/u,
-  HYPHEN: /-/u,
-  /**
-   * Generally do not break, unless closed symbol is followed by an opening symbol.
-   *
-   * Also, western punctation is often used in modern Korean and expects to be treated
-   * similarly to the CJK opening and closing symbols.
-   *
-   * Hello(한글)→ ["Hello", "(한", "글)"]
-   *      ↑ BREAK BEFORE "("
-   *          ↑ BREAK AFTER ")"
-   */
-  OPENING: /<\(\[\{/u,
-  CLOSING: />\)\]\}.,:;!\?…\//u,
-};
-
-/**
- * Characters and symbols used in Chinese, Japanese and Korean.
- */
-const CJK = {
-  /**
-   * Every CJK breaks before and after, unless it's paired with an opening or closing symbol.
-   *
-   * Does not include every possible char used in CJK texts, such as currency, parentheses or punctuation.
-   */
-  CHAR: /\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}｀＇＾〃〰〆＃＆＊＋－ー／＼＝｜￤〒￢￣/u,
-  /**
-   * Opening and closing CJK punctuation breaks before and after all such characters (in case of many),
-   * and creates pairs with neighboring characters.
-   *
-   * Hello た。→ ["Hello", "た。"]
-   *        ↑ DON'T BREAK "た。"
-   * * Hello「た」 World → ["Hello", "「た」", "World"]
-   *       ↑ DON'T BREAK "「た"
-   *        ↑ DON'T BREAK "た"
-   *      ↑ BREAK BEFORE "「"
-   *         ↑ BREAK AFTER "」"
-   */
-  // eslint-disable-next-line prettier/prettier
-  OPENING:/（［｛〈《｟｢「『【〖〔〘〚＜〝/u,
-  CLOSING: /）］｝〉》｠｣」』】〗〕〙〛＞。．，、〟‥？！：；・〜〞/u,
-  /**
-   * Currency symbols break before, not after
-   *
-   * Price￥100 → ["Price", "￥100"]
-   *      ↑ BREAK BEFORE "￥"
-   */
-  CURRENCY: /￥￦￡￠＄/u,
-};
-
-const EMOJI = {
-  FLAG: /\p{RI}\p{RI}/u,
-  JOINER:
-    /(?:\p{Emoji_Modifier}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?/u,
-  ZWJ: /\u200D/u,
-  ANY: /[\p{Emoji}]/u,
-  MOST: /[\p{Extended_Pictographic}\p{Emoji_Presentation}]/u,
-};
-
-/**
- * Simple fallback for browsers (mainly Safari < 16.4) that don't support "Lookbehind assertion".
- *
- * Browser support as of 10/2024:
- * - 91% Lookbehind assertion https://caniuse.com/mdn-javascript_regular_expressions_lookbehind_assertion
- * - 94% Unicode character class escape https://caniuse.com/mdn-javascript_regular_expressions_unicode_character_class_escape
- *
- * Does not include advanced CJK breaking rules, but covers most of the core cases, especially for latin.
- */
-const getLineBreakRegexSimple = () =>
-  Regex.or(
-    getEmojiRegex(),
-    Break.On(COMMON.HYPHEN, COMMON.WHITESPACE, CJK.CHAR),
-  );
-
-/**
- * Specifies the line breaking rules based for alphabetic-based languages,
- * Chinese, Japanese, Korean and Emojis.
- *
- * "Hello-world" → ["Hello-", "world"]
- * "Hello 「世界。」🌎🗺" → ["Hello", " ", "「世", "界。」", "🌎", "🗺"]
- */
-const getLineBreakRegexAdvanced = () =>
-  Regex.or(
-    // Unicode-defined regex for (multi-codepoint) Emojis
-    getEmojiRegex(),
-    // Rules for whitespace and hyphen
-    Break.Before(COMMON.WHITESPACE).Build(),
-    Break.After(COMMON.WHITESPACE, COMMON.HYPHEN).Build(),
-    // Rules for CJK (chars, symbols, currency)
-    Break.Before(CJK.CHAR, CJK.CURRENCY)
-      .NotPrecededBy(COMMON.OPENING, CJK.OPENING)
-      .Build(),
-    Break.After(CJK.CHAR)
-      .NotFollowedBy(COMMON.HYPHEN, COMMON.CLOSING, CJK.CLOSING)
-      .Build(),
-    // Rules for opening and closing punctuation
-    Break.BeforeMany(CJK.OPENING).NotPrecededBy(COMMON.OPENING).Build(),
-    Break.AfterMany(CJK.CLOSING).NotFollowedBy(COMMON.CLOSING).Build(),
-    Break.AfterMany(COMMON.CLOSING).FollowedBy(COMMON.OPENING).Build(),
-  );
-
-/**
- * Matches various emoji types.
- *
- * 1. basic emojis (😀, 🌍)
- * 2. flags (🇨🇿)
- * 3. multi-codepoint emojis:
- *    - skin tones (👍🏽)
- *    - variation selectors (☂️)
- *    - keycaps (1️⃣)
- *    - tag sequences (🏴󠁧󠁢󠁥󠁮󠁧󠁿)
- *    - emoji sequences (👨‍👩‍👧‍👦, 👩‍🚀, 🏳️‍🌈)
- *
- * Unicode points:
- * - \uFE0F: presentation selector
- * - \u20E3: enclosing keycap
- * - \u200D: zero width joiner
- * - \u{E0020}-\u{E007E}: tags
- * - \u{E007F}: cancel tag
- *
- * @see https://unicode.org/reports/tr51/#EBNF_and_Regex, with changes:
- * - replaced \p{Emoji} with [\p{Extended_Pictographic}\p{Emoji_Presentation}], see more in `should tokenize emojis mixed with mixed text` test
- * - replaced \p{Emod} with \p{Emoji_Modifier} as some engines do not understand the abbreviation (i.e. https://devina.io/redos-checker)
- */
-const getEmojiRegexUnicode = () =>
-  Regex.group(
-    Regex.or(
-      EMOJI.FLAG,
-      Regex.and(
-        EMOJI.MOST,
-        EMOJI.JOINER,
-        Regex.build(
-          `(?:${EMOJI.ZWJ.source}(?:${EMOJI.FLAG.source}|${EMOJI.ANY.source}${EMOJI.JOINER.source}))*`,
-        ),
-      ),
-    ),
-  );
-
-/**
- * Regex utilities for unicode character classes.
- */
-const Regex = {
-  /**
-   * Builds a regex from a string.
-   */
-  build: (regex: string): RegExp => new RegExp(regex, "u"),
-  /**
-   * Joins regexes into a single string.
-   */
-  join: (...regexes: RegExp[]): string => regexes.map((x) => x.source).join(""),
-  /**
-   * Joins regexes into a single regex as with "and" operator.
-   */
-  and: (...regexes: RegExp[]): RegExp => Regex.build(Regex.join(...regexes)),
-  /**
-   * Joins regexes into a single regex with "or" operator.
-   */
-  or: (...regexes: RegExp[]): RegExp =>
-    Regex.build(regexes.map((x) => x.source).join("|")),
-  /**
-   * Puts regexes into a matching group.
-   */
-  group: (...regexes: RegExp[]): RegExp =>
-    Regex.build(`(${Regex.join(...regexes)})`),
-  /**
-   * Puts regexes into a character class.
-   */
-  class: (...regexes: RegExp[]): RegExp =>
-    Regex.build(`[${Regex.join(...regexes)}]`),
-};
-
-/**
- * Human-readable lookahead and lookbehind utilities for defining line break
- * opportunities between pairs of character classes.
- */
-const Break = {
-  /**
-   * Break on the given class of characters.
-   */
-  On: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    return Regex.build(`([${joined}])`);
-  },
-  /**
-   * Break before the given class of characters.
-   */
-  Before: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?=[${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "FollowedBy"
-    >;
-  },
-  /**
-   * Break after the given class of characters.
-   */
-  After: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<=[${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "PreceededBy"
-    >;
-  },
-  /**
-   * Break before one or multiple characters of the same class.
-   */
-  BeforeMany: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<![${joined}])(?=[${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "FollowedBy"
-    >;
-  },
-  /**
-   * Break after one or multiple character from the same class.
-   */
-  AfterMany: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<=[${joined}])(?![${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "PreceededBy"
-    >;
-  },
-  /**
-   * Do not break before the given class of characters.
-   */
-  NotBefore: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?![${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "NotFollowedBy"
-    >;
-  },
-  /**
-   * Do not break after the given class of characters.
-   */
-  NotAfter: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<![${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "NotPrecededBy"
-    >;
-  },
-  Chain: (rootBuilder: () => RegExp) => ({
-    /**
-     * Build the root regex.
-     */
-    Build: rootBuilder,
-    /**
-     * Specify additional class of characters that should precede the root regex.
-     */
-    PreceededBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const preceeded = Break.After(...regexes).Build();
-      const builder = () => Regex.and(preceeded, root);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "PreceededBy"
-      >;
-    },
-    /**
-     * Specify additional class of characters that should follow the root regex.
-     */
-    FollowedBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const followed = Break.Before(...regexes).Build();
-      const builder = () => Regex.and(root, followed);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "FollowedBy"
-      >;
-    },
-    /**
-     * Specify additional class of characters that should not precede the root regex.
-     */
-    NotPrecededBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const notPreceeded = Break.NotAfter(...regexes).Build();
-      const builder = () => Regex.and(notPreceeded, root);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "NotPrecededBy"
-      >;
-    },
-    /**
-     * Specify additional class of characters that should not follow the root regex.
-     */
-    NotFollowedBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const notFollowed = Break.NotBefore(...regexes).Build();
-      const builder = () => Regex.and(root, notFollowed);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "NotFollowedBy"
-      >;
-    },
-  }),
-};
-
-/**
- * Breaks the line into the tokens based on the found line break opporutnities.
- */
-export const parseTokens = (line: string) => {
-  const breakLineRegex = getLineBreakRegex();
-
-  // normalizing to single-codepoint composed chars due to canonical equivalence
-  // of multi-codepoint versions for chars like č, で (~ so that we don't break a line in between c and ˇ)
-  // filtering due to multi-codepoint chars like 👨‍👩‍👧‍👦, 👩🏽‍🦰
-  return line.normalize("NFC").split(breakLineRegex).filter(Boolean);
-};
-
-/**
- * Wraps the original text into the lines based on the given width.
- */
-export const wrapText = (
-  text: string,
-  font: FontString,
-  maxWidth: number,
-): string => {
-  // if maxWidth is not finite or NaN which can happen in case of bugs in
-  // computation, we need to make sure we don't continue as we'll end up
-  // in an infinite loop
-  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
-  }
-
-  const lines: Array<string> = [];
-  const originalLines = text.split("\n");
-
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font, true);
-
-    if (currentLineWidth <= maxWidth) {
-      lines.push(originalLine);
-      continue;
-    }
-
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
-    lines.push(...wrappedLine);
-  }
-
-  return lines.join("\n");
-};
-
-/**
- * Wraps the original line into the lines based on the given width.
- */
-const wrapLine = (
-  line: string,
-  font: FontString,
-  maxWidth: number,
-): string[] => {
-  const lines: Array<string> = [];
-  const tokens = parseTokens(line);
-  const tokenIterator = tokens[Symbol.iterator]();
-
-  let currentLine = "";
-  let currentLineWidth = 0;
-
-  let iterator = tokenIterator.next();
-
-  while (!iterator.done) {
-    const token = iterator.value;
-    const testLine = currentLine + token;
-
-    // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
-    const testLineWidth = isSingleCharacter(token)
-      ? currentLineWidth + charWidth.calculate(token, font)
-      : getLineWidth(testLine, font, true);
-
-    // build up the current line, skipping length check for possibly trailing whitespaces
-    if (/\s/.test(token) || testLineWidth <= maxWidth) {
-      currentLine = testLine;
-      currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
-      continue;
-    }
-
-    // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
-    if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
-      const precedingLines = wrappedWord.slice(0, -1);
-
-      lines.push(...precedingLines);
-
-      // trailing line of the wrapped word might still be joined with next token/s
-      currentLine = trailingLine;
-      currentLineWidth = getLineWidth(trailingLine, font, true);
-      iterator = tokenIterator.next();
-    } else {
-      // push & reset, but don't iterate on the next token, as we didn't use it yet!
-      lines.push(currentLine.trimEnd());
-
-      // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
-      currentLine = "";
-      currentLineWidth = 0;
-    }
-  }
-
-  // iterator done, push the trailing line if exists
-  if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
-    lines.push(trailingLine);
-  }
-
-  return lines;
-};
-
-/**
- * Wraps the word into the lines based on the given width.
- */
-const wrapWord = (
-  word: string,
-  font: FontString,
-  maxWidth: number,
-): Array<string> => {
-  // multi-codepoint emojis are already broken apart and shouldn't be broken further
-  if (getEmojiRegex().test(word)) {
-    return [word];
-  }
-
-  satisfiesWordInvariant(word);
-
-  const lines: Array<string> = [];
-  const chars = Array.from(word);
-
-  let currentLine = "";
-  let currentLineWidth = 0;
-
-  for (const char of chars) {
-    const _charWidth = charWidth.calculate(char, font);
-    const testLineWidth = currentLineWidth + _charWidth;
-
-    if (testLineWidth <= maxWidth) {
-      currentLine = currentLine + char;
-      currentLineWidth = testLineWidth;
-      continue;
-    }
-
-    if (currentLine) {
-      lines.push(currentLine);
-    }
-
-    currentLine = char;
-    currentLineWidth = _charWidth;
-  }
-
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-
-  return lines;
-};
-
-/**
- * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`.
- */
-const trimLine = (line: string, font: FontString, maxWidth: number) => {
-  const shouldTrimWhitespaces = getLineWidth(line, font, true) > maxWidth;
-
-  if (!shouldTrimWhitespaces) {
-    return line;
-  }
-
-  // defensively default to `trimeEnd` in case the regex does not match
-  let [, trimmedLine, whitespaces] = line.match(/^(.+?)(\s+)$/) ?? [
-    line,
-    line.trimEnd(),
-    "",
-  ];
-
-  let trimmedLineWidth = getLineWidth(trimmedLine, font, true);
-
-  for (const whitespace of Array.from(whitespaces)) {
-    const _charWidth = charWidth.calculate(whitespace, font);
-    const testLineWidth = trimmedLineWidth + _charWidth;
-
-    if (testLineWidth > maxWidth) {
-      break;
-    }
-
-    trimmedLine = trimmedLine + whitespace;
-    trimmedLineWidth = testLineWidth;
-  }
-
-  return trimmedLine;
-};
-
-/**
- * Check if the given string is a single character.
- *
- * Handles multi-byte chars (é, 中) and purposefully does not handle multi-codepoint char (👨‍👩‍👧‍👦, 👩🏽‍🦰).
- */
-const isSingleCharacter = (maybeSingleCharacter: string) => {
-  return (
-    maybeSingleCharacter.codePointAt(0) !== undefined &&
-    maybeSingleCharacter.codePointAt(1) === undefined
-  );
-};
-
-/**
- * Invariant for the word wrapping algorithm.
- */
-const satisfiesWordInvariant = (word: string) => {
-  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
-    if (/\s/.test(word)) {
-      throw new Error("Word should not contain any whitespaces!");
-    }
-  }
-};

packages/excalidraw/element/textWysiwyg.test.tsx

@@ -19,7 +19,7 @@ import type {
 import { API } from "../tests/helpers/api";
 import { getOriginalContainerHeightFromCache } from "./containerCache";
 import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -42,7 +42,7 @@ describe("textWysiwyg", () => {
         type: "line",
         width: 100,
         height: 0,
-        points: [pointFrom(0, 0), pointFrom(100, 0)],
+        points: [point(0, 0), point(100, 0)],
       });
       const textSize = 20;
       const text = API.createElement({
@@ -917,7 +917,7 @@ describe("textWysiwyg", () => {
 
       Keyboard.exitTextEditor(editor);
       text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.text).toBe("Hello\nWorld!");
+      expect(text.text).toBe("Hello \nWorld!");
       expect(text.originalText).toBe("Hello World!");
       expect(text.y).toBe(
         rectangle.y + h.elements[0].height / 2 - text.height / 2,
@@ -1220,7 +1220,7 @@ describe("textWysiwyg", () => {
       );
 
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text).toBe(
-        "Online\nwhiteboa\nrd\ncollabor\nation\nmade\neasy",
+        "Online \nwhitebo\nard \ncollabo\nration \nmade \neasy",
       );
       fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
         button: 2,

packages/excalidraw/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, POINTER_BUTTON } from "../constants";
+import { CLASSES, isSafari, POINTER_BUTTON } from "../constants";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -27,13 +27,13 @@ import {
   getTextWidth,
   normalizeText,
   redrawTextBoundingBox,
+  wrapText,
   getBoundTextMaxHeight,
   getBoundTextMaxWidth,
   computeContainerDimensionForBoundText,
   computeBoundTextPosition,
   getBoundTextElement,
 } from "./textElement";
-import { wrapText } from "./textWrapping";
 import {
   actionDecreaseFontSize,
   actionIncreaseFontSize,
@@ -245,6 +245,11 @@ export const textWysiwyg = ({
 
       const font = getFontString(updatedTextElement);
 
+      // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)
+      const padding = !isSafari
+        ? Math.ceil(updatedTextElement.fontSize / appState.zoom.value / 2)
+        : 0;
+
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
@@ -254,7 +259,7 @@ export const textWysiwyg = ({
         lineHeight: updatedTextElement.lineHeight,
         width: `${width}px`,
         height: `${height}px`,
-        left: `${viewportX}px`,
+        left: `${viewportX - padding}px`,
         top: `${viewportY}px`,
         transform: getTransform(
           width,
@@ -264,6 +269,7 @@ export const textWysiwyg = ({
           maxWidth,
           editorMaxHeight,
         ),
+        padding: `0 ${padding}px`,
         textAlign,
         verticalAlign,
         color: updatedTextElement.strokeColor,
@@ -304,7 +310,6 @@ export const textWysiwyg = ({
     minHeight: "1em",
     backfaceVisibility: "hidden",
     margin: 0,
-    padding: 0,
     border: 0,
     outline: 0,
     resize: "none",

packages/excalidraw/element/transformHandles.ts

@@ -11,7 +11,6 @@ import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 import {
   isElbowArrow,
   isFrameLikeElement,
-  isImageElement,
   isLinearElement,
 } from "./typeChecks";
 import {
@@ -20,7 +19,7 @@ import {
   isIOS,
 } from "../constants";
 import type { Radians } from "../../math";
-import { pointFrom, pointRotateRads } from "../../math";
+import { point, pointRotateRads } from "../../math";
 
 export type TransformHandleDirection =
   | "n"
@@ -96,8 +95,8 @@ const generateTransformHandle = (
   angle: Radians,
 ): TransformHandle => {
   const [xx, yy] = pointRotateRads(
-    pointFrom(x + width / 2, y + height / 2),
-    pointFrom(cx, cy),
+    point(x + width / 2, y + height / 2),
+    point(cx, cy),
     angle,
   );
   return [xx - width / 2, yy - height / 2, width, height];
@@ -130,7 +129,6 @@ export const getTransformHandlesFromCoords = (
   pointerType: PointerType,
   omitSides: { [T in TransformHandleType]?: boolean } = {},
   margin = 4,
-  spacing = DEFAULT_TRANSFORM_HANDLE_SPACING,
 ): TransformHandles => {
   const size = transformHandleSizes[pointerType];
   const handleWidth = size / zoom.value;
@@ -142,7 +140,8 @@ export const getTransformHandlesFromCoords = (
   const width = x2 - x1;
   const height = y2 - y1;
   const dashedLineMargin = margin / zoom.value;
-  const centeringOffset = (size - spacing * 2) / (2 * zoom.value);
+  const centeringOffset =
+    (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value);
 
   const transformHandles: TransformHandles = {
     nw: omitSides.nw
@@ -302,10 +301,8 @@ export const getTransformHandles = (
       rotation: true,
     };
   }
-  const margin = isLinearElement(element)
+  const dashedLineMargin = isLinearElement(element)
     ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8
-    : isImageElement(element)
-    ? 0
     : DEFAULT_TRANSFORM_HANDLE_SPACING;
   return getTransformHandlesFromCoords(
     getElementAbsoluteCoords(element, elementsMap, true),
@@ -313,8 +310,7 @@ export const getTransformHandles = (
     zoom,
     pointerType,
     omitSides,
-    margin,
-    isImageElement(element) ? 0 : undefined,
+    dashedLineMargin,
   );
 };
 

packages/excalidraw/element/types.ts

@@ -132,15 +132,6 @@ export type IframeData =
       | { type: "document"; srcdoc: (theme: Theme) => string }
     );
 
-export type ImageCrop = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  naturalWidth: number;
-  naturalHeight: number;
-};
-
 export type ExcalidrawImageElement = _ExcalidrawElementBase &
   Readonly<{
     type: "image";
@@ -149,8 +140,6 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase &
     status: "pending" | "saved" | "error";
     /** X and Y scale factors <-1, 1>, used for image axis flipping */
     scale: [number, number];
-    /** whether an element is cropped */
-    crop: ImageCrop | null;
   }>;
 
 export type InitializedExcalidrawImageElement = MarkNonNullable<

packages/excalidraw/errors.ts

@@ -36,40 +36,3 @@ export class ImageSceneDataError extends Error {
 export class InvalidFractionalIndexError extends Error {
   public code = "ELEMENT_HAS_INVALID_INDEX" as const;
 }
-
-type WorkerErrorCodes = "WORKER_URL_NOT_DEFINED" | "WORKER_IN_THE_MAIN_CHUNK";
-
-export class WorkerUrlNotDefinedError extends Error {
-  public code;
-  constructor(
-    message = "Worker URL is not defined!",
-    code: WorkerErrorCodes = "WORKER_URL_NOT_DEFINED",
-  ) {
-    super(message);
-    this.name = "WorkerUrlNotDefinedError";
-    this.code = code;
-  }
-}
-
-export class WorkerInTheMainChunkError extends Error {
-  public code;
-  constructor(
-    message = "Worker has to be in a separate chunk!",
-    code: WorkerErrorCodes = "WORKER_IN_THE_MAIN_CHUNK",
-  ) {
-    super(message);
-    this.name = "WorkerInTheMainChunkError";
-    this.code = code;
-  }
-}
-
-/**
- * Use this for generic, handled errors, so you can check against them
- * and rethrow if needed
- */
-export class ExcalidrawError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "ExcalidrawError";
-  }
-}

packages/excalidraw/fonts/Cascadia/index.ts

@@ -1,9 +0,0 @@
-import CascadiaCodeRegular from "./CascadiaCode-Regular.woff2";
-
-import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
-
-export const CascadiaFontFaces: ExcalidrawFontFaceDescriptor[] = [
-  {
-    uri: CascadiaCodeRegular,
-  },
-];

packages/excalidraw/fonts/ComicShanns/index.ts

@@ -1,96 +0,0 @@
-// The following file content was generated with https://chinese-font.netlify.app/online-split,
-// but has been manully rewritten from `@font-face` rules into TS while leveraging FontFace API.
-
-import _0 from "./ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2";
-import _1 from "./ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2";
-import _2 from "./ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2";
-import _3 from "./ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2";
-
-import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
-
-/* Generated By cn-font-split@5.2.2 https://www.npmjs.com/package/cn-font-split
-CreateTime: Thu, 17 Oct 2024 09:57:51 GMT;
-Origin File Name Table:
-copyright: MIT License
-
-Copyright (c) 2018 Shannon Miwa
-Copyright (c) 2023 Jesus Gonzalez
-Copyright (c) 2023 Rodrigo Batista de Moraes
-Copyright (c) 2024 Fini Jastrow
-Copyright (c) 2024 Kyle Beechly
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-fontFamily: Comic Shanns Mono-Regular
-fontSubfamily: Regular
-uniqueID: FontForge 2.0 : Comic Shanns Mono Regular : 17-10-2024
-fullName: Comic Shanns Mono Regular
-version: 1.3.0
-postScriptName: ComicShannsMono-Regular
-license: MIT License
-
-Copyright (c) 2018 Shannon Miwa
-Copyright (c) 2023 Jesus Gonzalez
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-preferredFamily: Comic Shanns Mono
- */
-
-export const ComicShannsFontFaces: ExcalidrawFontFaceDescriptor[] = [
-  {
-    uri: _0,
-    descriptors: {
-      unicodeRange:
-        "U+20-7e,U+a1-a6,U+a8,U+ab-ac,U+af-b1,U+b4,U+b8,U+bb-bc,U+bf-cf,U+d1-d7,U+d9-de,U+e0-ef,U+f1-f7,U+f9-ff,U+131,U+152-153,U+2c6,U+2da,U+2dc,U+2013-2014,U+2018-201a,U+201c-201d,U+2020-2022,U+2026,U+2039-203a,U+2044,U+20ac,U+2191,U+2193,U+2212",
-    },
-  },
-  {
-    uri: _1,
-    descriptors: {
-      unicodeRange:
-        "U+100-10f,U+112-125,U+128-130,U+134-137,U+139-13c,U+141-148,U+14c-151,U+154-161,U+164-165,U+168-17f,U+1bf,U+1f7,U+218-21b,U+237,U+1e80-1e85,U+1ef2-1ef3,U+a75b",
-    },
-  },
-  {
-    uri: _2,
-    descriptors: {
-      unicodeRange:
-        "U+2c7,U+2d8-2d9,U+2db,U+2dd,U+315,U+2190,U+2192,U+2200,U+2203-2204,U+2264-2265,U+f6c3",
-    },
-  },
-  {
-    uri: _3,
-    descriptors: { unicodeRange: "U+3bb" },
-  },
-];

packages/excalidraw/fonts/Emoji/index.ts

@@ -1,9 +0,0 @@
-import { LOCAL_FONT_PROTOCOL } from "../FontMetadata";
-
-import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
-
-export const EmojiFontFaces: ExcalidrawFontFaceDescriptor[] = [
-  {
-    uri: LOCAL_FONT_PROTOCOL,
-  },
-];

packages/excalidraw/fonts/ExcalidrawFont.ts

@@ -0,0 +1,214 @@
+import {
+  base64ToArrayBuffer,
+  stringToBase64,
+  toByteString,
+} from "../data/encode";
+import { LOCAL_FONT_PROTOCOL } from "./metadata";
+import loadWoff2 from "./wasm/woff2.loader";
+import loadHbSubset from "./wasm/hb-subset.loader";
+
+export interface Font {
+  urls: URL[];
+  fontFace: FontFace;
+  getContent(codePoints: ReadonlySet<number>): Promise<string>;
+}
+export const UNPKG_FALLBACK_URL = `https://unpkg.com/${
+  import.meta.env.VITE_PKG_NAME
+    ? `${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}` // should be provided by vite during package build
+    : "@excalidraw/excalidraw" // fallback to latest package version (i.e. for app)
+}/dist/prod/`;
+
+export class ExcalidrawFont implements Font {
+  public readonly urls: URL[];
+  public readonly fontFace: FontFace;
+
+  constructor(family: string, uri: string, descriptors?: FontFaceDescriptors) {
+    this.urls = ExcalidrawFont.createUrls(uri);
+
+    const sources = this.urls
+      .map((url) => `url(${url}) ${ExcalidrawFont.getFormat(url)}`)
+      .join(", ");
+
+    this.fontFace = new FontFace(family, sources, {
+      display: "swap",
+      style: "normal",
+      weight: "400",
+      ...descriptors,
+    });
+  }
+
+  /**
+   * Tries to fetch woff2 content, based on the registered urls (from first to last, treated as fallbacks).
+   *
+   * NOTE: assumes usage of `dataurl` outside the browser environment
+   *
+   * @returns base64 with subsetted glyphs based on the passed codepoint, last defined url otherwise
+   */
+  public async getContent(codePoints: ReadonlySet<number>): Promise<string> {
+    let i = 0;
+    const errorMessages = [];
+
+    while (i < this.urls.length) {
+      const url = this.urls[i];
+
+      // it's dataurl (server), the font is inlined as base64, no need to fetch
+      if (url.protocol === "data:") {
+        const arrayBuffer = base64ToArrayBuffer(url.toString().split(",")[1]);
+
+        const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(
+          arrayBuffer,
+          codePoints,
+        );
+
+        return base64;
+      }
+
+      try {
+        const response = await fetch(url, {
+          headers: {
+            Accept: "font/woff2",
+          },
+        });
+
+        if (response.ok) {
+          const arrayBuffer = await response.arrayBuffer();
+          const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(
+            arrayBuffer,
+            codePoints,
+          );
+
+          return base64;
+        }
+
+        // response not ok, try to continue
+        errorMessages.push(
+          `"${url.toString()}" returned status "${response.status}"`,
+        );
+      } catch (e) {
+        errorMessages.push(`"${url.toString()}" returned error "${e}"`);
+      }
+
+      i++;
+    }
+
+    console.error(
+      `Failed to fetch font "${
+        this.fontFace.family
+      }" from urls "${this.urls.toString()}`,
+      JSON.stringify(errorMessages, undefined, 2),
+    );
+
+    // in case of issues, at least return the last url as a content
+    // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others
+    return this.urls.length ? this.urls[this.urls.length - 1].toString() : "";
+  }
+
+  /**
+   * Tries to subset glyphs in a font based on the used codepoints, returning the font as daturl.
+   *
+   * @param arrayBuffer font data buffer, preferrably in the woff2 format, though others should work as well
+   * @param codePoints codepoints used to subset the glyphs
+   *
+   * @returns font with subsetted glyphs (all glyphs in case of errors) converted into a dataurl
+   */
+  private static async subsetGlyphsByCodePoints(
+    arrayBuffer: ArrayBuffer,
+    codePoints: ReadonlySet<number>,
+  ): Promise<string> {
+    try {
+      // lazy loaded wasm modules to avoid multiple initializations in case of concurrent triggers
+      const { compress, decompress } = await loadWoff2();
+      const { subset } = await loadHbSubset();
+
+      const decompressedBinary = decompress(arrayBuffer).buffer;
+      const subsetSnft = subset(decompressedBinary, codePoints);
+      const compressedBinary = compress(subsetSnft.buffer);
+
+      return ExcalidrawFont.toBase64(compressedBinary.buffer);
+    } catch (e) {
+      console.error("Skipped glyph subsetting", e);
+      // Fallback to encoding whole font in case of errors
+      return ExcalidrawFont.toBase64(arrayBuffer);
+    }
+  }
+
+  private static async toBase64(arrayBuffer: ArrayBuffer) {
+    let base64: string;
+
+    if (typeof Buffer !== "undefined") {
+      // node + server-side
+      base64 = Buffer.from(arrayBuffer).toString("base64");
+    } else {
+      base64 = await stringToBase64(await toByteString(arrayBuffer), true);
+    }
+
+    return `data:font/woff2;base64,${base64}`;
+  }
+
+  private static createUrls(uri: string): URL[] {
+    if (uri.startsWith(LOCAL_FONT_PROTOCOL)) {
+      // no url for local fonts
+      return [];
+    }
+
+    if (uri.startsWith("http") || uri.startsWith("data")) {
+      // one url for http imports or data url
+      return [new URL(uri)];
+    }
+
+    // absolute assets paths, which are found in tests and excalidraw-app build, won't work with base url, so we are stripping initial slash away
+    const assetUrl: string = uri.replace(/^\/+/, "");
+    const urls: URL[] = [];
+
+    if (typeof window.EXCALIDRAW_ASSET_PATH === "string") {
+      const normalizedBaseUrl = this.normalizeBaseUrl(
+        window.EXCALIDRAW_ASSET_PATH,
+      );
+
+      urls.push(new URL(assetUrl, normalizedBaseUrl));
+    } else if (Array.isArray(window.EXCALIDRAW_ASSET_PATH)) {
+      window.EXCALIDRAW_ASSET_PATH.forEach((path) => {
+        const normalizedBaseUrl = this.normalizeBaseUrl(path);
+        urls.push(new URL(assetUrl, normalizedBaseUrl));
+      });
+    }
+
+    // fallback url for bundled fonts
+    urls.push(new URL(assetUrl, UNPKG_FALLBACK_URL));
+
+    return urls;
+  }
+
+  private static getFormat(url: URL) {
+    try {
+      const parts = new URL(url).pathname.split(".");
+
+      if (parts.length === 1) {
+        return "";
+      }
+
+      return `format('${parts.pop()}')`;
+    } catch (error) {
+      return "";
+    }
+  }
+
+  private static normalizeBaseUrl(baseUrl: string) {
+    let result = baseUrl;
+
+    // in case user passed a root-relative url (~absolute path),
+    // like "/" or "/some/path", or relative (starts with "./"),
+    // prepend it with `location.origin`
+    if (/^\.?\//.test(result)) {
+      result = new URL(
+        result.replace(/^\.?\/+/, ""),
+        window?.location?.origin,
+      ).toString();
+    }
+
+    // ensure there is a trailing slash, otherwise url won't be correctly concatenated
+    result = `${result.replace(/\/+$/, "")}/`;
+
+    return result;
+  }
+}

packages/excalidraw/fonts/ExcalidrawFontFace.ts

@@ -1,209 +0,0 @@
-import { promiseTry } from "../utils";
-import { LOCAL_FONT_PROTOCOL } from "./FontMetadata";
-import { subsetWoff2GlyphsByCodepoints } from "../subset/subset-main";
-
-type DataURL = string;
-
-export class ExcalidrawFontFace {
-  public readonly urls: URL[] | DataURL[];
-  public readonly fontFace: FontFace;
-
-  private static readonly UNPKG_FALLBACK_URL = `https://unpkg.com/${
-    import.meta.env.VITE_PKG_NAME
-      ? `${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}` // should be provided by vite during package build
-      : "@excalidraw/excalidraw" // fallback to latest package version (i.e. for app)
-  }/dist/prod/`;
-
-  constructor(family: string, uri: string, descriptors?: FontFaceDescriptors) {
-    this.urls = ExcalidrawFontFace.createUrls(uri);
-
-    const sources = this.urls
-      .map((url) => `url(${url}) ${ExcalidrawFontFace.getFormat(url)}`)
-      .join(", ");
-
-    this.fontFace = new FontFace(family, sources, {
-      display: "swap",
-      style: "normal",
-      weight: "400",
-      ...descriptors,
-    });
-  }
-
-  /**
-   * Generates CSS `@font-face` definition with the (subsetted) font source as a data url for the characters within the unicode range.
-   *
-   * Retrieves `undefined` otherwise.
-   */
-  public toCSS(characters: string): Promise<string> | undefined {
-    // quick exit in case the characters are not within this font face's unicode range
-    if (!this.getUnicodeRangeRegex().test(characters)) {
-      return;
-    }
-
-    const codepoints = Array.from(characters).map(
-      (char) => char.codePointAt(0)!,
-    );
-
-    return this.getContent(codepoints).then(
-      (content) =>
-        `@font-face { font-family: ${this.fontFace.family}; src: url(${content}); }`,
-    );
-  }
-
-  /**
-   * Tries to fetch woff2 content, based on the registered urls (from first to last, treated as fallbacks).
-   *
-   * @returns base64 with subsetted glyphs based on the passed codepoint, last defined url otherwise
-   */
-  public async getContent(codePoints: Array<number>): Promise<string> {
-    let i = 0;
-    const errorMessages = [];
-
-    while (i < this.urls.length) {
-      const url = this.urls[i];
-
-      try {
-        const arrayBuffer = await this.fetchFont(url);
-        const base64 = await subsetWoff2GlyphsByCodepoints(
-          arrayBuffer,
-          codePoints,
-        );
-
-        return base64;
-      } catch (e) {
-        errorMessages.push(`"${url.toString()}" returned error "${e}"`);
-      }
-
-      i++;
-    }
-
-    console.error(
-      `Failed to fetch font family "${this.fontFace.family}"`,
-      JSON.stringify(errorMessages, undefined, 2),
-    );
-
-    // in case of issues, at least return the last url as a content
-    // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others
-    return this.urls.length ? this.urls[this.urls.length - 1].toString() : "";
-  }
-
-  public fetchFont(url: URL | DataURL): Promise<ArrayBuffer> {
-    return promiseTry(async () => {
-      const response = await fetch(url, {
-        // always prefer cache (even stale), otherwise it always triggers an unnecessary validation request
-        // which we don't need as we are controlling freshness of the fonts with the stable hash suffix in the url
-        // https://developer.mozilla.org/en-US/docs/Web/API/Request/cache
-        cache: "force-cache",
-        headers: {
-          Accept: "font/woff2",
-        },
-      });
-
-      if (!response.ok) {
-        const urlString = url instanceof URL ? url.toString() : "dataurl";
-        throw new Error(
-          `Failed to fetch "${urlString}": ${response.statusText}`,
-        );
-      }
-
-      const arrayBuffer = await response.arrayBuffer();
-      return arrayBuffer;
-    });
-  }
-
-  private getUnicodeRangeRegex() {
-    // using \u{h} or \u{hhhhh} to match any number of hex digits,
-    // otherwise we would get an "Invalid Unicode escape" error
-    // e.g. U+0-1007F -> \u{0}-\u{1007F}
-    const unicodeRangeRegex = this.fontFace.unicodeRange
-      .split(/,\s*/)
-      .map((range) => {
-        const [start, end] = range.replace("U+", "").split("-");
-        if (end) {
-          return `\\u{${start}}-\\u{${end}}`;
-        }
-
-        return `\\u{${start}}`;
-      })
-      .join("");
-
-    return new RegExp(`[${unicodeRangeRegex}]`, "u");
-  }
-
-  private static createUrls(uri: string): URL[] | DataURL[] {
-    if (uri.startsWith("data")) {
-      // don't create the URL instance, as parsing the huge dataurl string is expensive
-      return [uri];
-    }
-
-    if (uri.startsWith(LOCAL_FONT_PROTOCOL)) {
-      // no url for local fonts
-      return [];
-    }
-
-    if (uri.startsWith("http")) {
-      // one url for http imports or data url
-      return [new URL(uri)];
-    }
-
-    // absolute assets paths, which are found in tests and excalidraw-app build, won't work with base url, so we are stripping initial slash away
-    const assetUrl: string = uri.replace(/^\/+/, "");
-    const urls: URL[] = [];
-
-    if (typeof window.EXCALIDRAW_ASSET_PATH === "string") {
-      const normalizedBaseUrl = this.normalizeBaseUrl(
-        window.EXCALIDRAW_ASSET_PATH,
-      );
-
-      urls.push(new URL(assetUrl, normalizedBaseUrl));
-    } else if (Array.isArray(window.EXCALIDRAW_ASSET_PATH)) {
-      window.EXCALIDRAW_ASSET_PATH.forEach((path) => {
-        const normalizedBaseUrl = this.normalizeBaseUrl(path);
-        urls.push(new URL(assetUrl, normalizedBaseUrl));
-      });
-    }
-
-    // fallback url for bundled fonts
-    urls.push(new URL(assetUrl, ExcalidrawFontFace.UNPKG_FALLBACK_URL));
-
-    return urls;
-  }
-
-  private static getFormat(url: URL | DataURL) {
-    if (!(url instanceof URL)) {
-      // format is irrelevant for data url
-      return "";
-    }
-
-    try {
-      const parts = new URL(url).pathname.split(".");
-
-      if (parts.length === 1) {
-        return "";
-      }
-
-      return `format('${parts.pop()}')`;
-    } catch (error) {
-      return "";
-    }
-  }
-
-  private static normalizeBaseUrl(baseUrl: string) {
-    let result = baseUrl;
-
-    // in case user passed a root-relative url (~absolute path),
-    // like "/" or "/some/path", or relative (starts with "./"),
-    // prepend it with `location.origin`
-    if (/^\.?\//.test(result)) {
-      result = new URL(
-        result.replace(/^\.?\/+/, ""),
-        window?.location?.origin,
-      ).toString();
-    }
-
-    // ensure there is a trailing slash, otherwise url won't be correctly concatenated
-    result = `${result.replace(/\/+$/, "")}/`;
-
-    return result;
-  }
-}