.env.development

@@ -48,6 +48,3 @@ UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
 s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
 kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
 HQIDAQAB'
-
-# set to true in .env.development.local to disable the prevent unload dialog
-VITE_APP_DISABLE_PREVENT_UNLOAD=

.env.production

@@ -1,5 +1,5 @@
-VITE_APP_BACKEND_V2_GET_URL=https://ex.dylanbanta.com/api/v2/scenes/
-VITE_APP_BACKEND_V2_POST_URL=https://ex.dylanbanta.com/api/v2/scenes/
+VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 
 VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
 VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

.eslintrc.json

@@ -1,21 +1,6 @@
 {
   "extends": ["@excalidraw/eslint-config", "react-app"],
   "rules": {
-    "import/order": [
-      "warn",
-      {
-        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
-        "pathGroups": [
-          {
-            "pattern": "@excalidraw/**",
-            "group": "external",
-            "position": "after"
-          }
-        ],
-        "newlines-between": "always-and-inside-groups",
-        "warnOnUnassignedImports": true
-      }
-    ],
     "import/no-anonymous-default-export": "off",
     "no-restricted-globals": "off",
     "@typescript-eslint/consistent-type-imports": [
@@ -32,12 +17,6 @@
         "name": "jotai",
         "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
       }
-    ],
-    "react/jsx-no-target-blank": [
-      "error",
-      {
-        "allowReferrer": true
-      }
     ]
   }
 }

README.md

@@ -63,7 +63,7 @@ The Excalidraw editor (npm package) supports:
 - 🏗️ Customizable.
 - 📷 Image support.
 - 😀 Shape libraries support.
-- 🌐 Localization (i18n) support.
+- 👅 Localization (i18n) support.
 - 🖼️ Export to PNG, SVG & clipboard.
 - 💾 Open format - export drawings as an `.excalidraw` json file.
 - ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...

dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx

@@ -2,7 +2,7 @@
 
 Earlier we were using `renderFooter` prop to render custom footer which was removed in [#5970](https://github.com/excalidraw/excalidraw/pull/5970). Now you can pass a `Footer` component instead to render the custom UI for footer.
 
-You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should be a valid React Node.
+You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should a valid React Node.
 
 **Usage**
 
@@ -25,7 +25,7 @@ function App() {
 }
 ```
 
-This will only work for `Desktop` devices.
+This will only for `Desktop` devices.
 
 For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
 
@@ -65,4 +65,4 @@ const App = () => (
 // Need to render when code is span across multiple components
 // in Live Code blocks editor
 render(<App />);
-```
+```

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

@@ -3,7 +3,7 @@
 All `props` are _optional_.
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
 | [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
 | [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
 | [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
@@ -13,7 +13,7 @@ All `props` are _optional_.
 | [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
 | [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
 | [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`generateLinkForSelection`](#generatelinkforselection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
+| [`generateLinkForSelection`](#generateLinkForSelection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
 | [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
 | [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
@@ -29,9 +29,8 @@ All `props` are _optional_.
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
 | [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
-| [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| <code>((link: string) => boolean &#124; undefined)</code> | \_ | use for custom src url validation |
+| [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
-| [`renderScrollbars`] | `boolean`| | `false` | Indicates whether scrollbars will be shown
 
 ### Storing custom data on Excalidraw elements
 

dev-docs/src/components/Homepage/index.js

@@ -1,6 +1,5 @@
-import clsx from "clsx";
 import React from "react";
-
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 const FeatureList = [

dev-docs/src/components/Homepage/index.tsx

@@ -1,6 +1,5 @@
-import clsx from "clsx";
 import React from "react";
-
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 type FeatureItem = {

dev-docs/src/pages/index.tsx

@@ -1,11 +1,10 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import HomepageFeatures from "@site/src/components/Homepage";
-import Layout from "@theme/Layout";
-import clsx from "clsx";
-import React from "react";
-
 import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/Homepage";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();

dev-docs/src/theme/MDXComponents.js

@@ -1,6 +1,6 @@
 // Import the original mapper
-import Highlight from "@site/src/components/Highlight";
 import MDXComponents from "@theme-original/MDXComponents";
+import Highlight from "@site/src/components/Highlight";
 
 export default {
   // Re-use the default mapping

docker-compose.yml

@@ -19,7 +19,7 @@ services:
       - ./:/opt/node_app/app:delegated
       - ./package.json:/opt/node_app/package.json
       - ./yarn.lock:/opt/node_app/yarn.lock
-#       - notused:/opt/node_app/app/node_modules
+      - notused:/opt/node_app/app/node_modules
 
-# volumes:
-#   notused:
+volumes:
+  notused:

examples/with-nextjs/src/app/page.tsx

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic";
 import Script from "next/script";
-
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically

examples/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,11 +1,10 @@
 "use client";
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
+import App from "../../with-script-in-browser/components/ExampleApp";
 
 import "@excalidraw/excalidraw/index.css";
 
-import App from "../../with-script-in-browser/components/ExampleApp";
-
 const ExcalidrawWrapper: React.FC = () => {
   return (
     <>

examples/with-nextjs/src/pages/excalidraw-in-pages.tsx

@@ -1,5 +1,4 @@
 import dynamic from "next/dynamic";
-
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically

examples/with-script-in-browser/components/CustomFooter.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 

examples/with-script-in-browser/components/ExampleApp.scss

@@ -52,7 +52,7 @@
   transform: none;
 }
 
-.excalidraw .selected-shape-actions {
+.excalidraw .panelColumn {
   text-align: left;
 }
 

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from "nanoid";
 import React, {
   useEffect,
   useState,
@@ -7,24 +6,13 @@ import React, {
   Children,
   cloneElement,
 } from "react";
+import ExampleSidebar from "./sidebar/ExampleSidebar";
 
 import type * as TExcalidraw from "@excalidraw/excalidraw";
-import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
-import type {
-  NonDeletedExcalidrawElement,
-  Theme,
-} from "@excalidraw/excalidraw/element/types";
-import type {
-  AppState,
-  BinaryFileData,
-  ExcalidrawImperativeAPI,
-  ExcalidrawInitialDataState,
-  Gesture,
-  LibraryItems,
-  PointerDownState as ExcalidrawPointerDownState,
-} from "@excalidraw/excalidraw/types";
 
-import initialData from "../initialData";
+import { nanoid } from "nanoid";
+
+import type { ResolvablePromise } from "../utils";
 import {
   resolvablePromise,
   distance2d,
@@ -35,12 +23,25 @@ import {
 
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
-import ExampleSidebar from "./sidebar/ExampleSidebar";
+import initialData from "../initialData";
+
+import type {
+  AppState,
+  BinaryFileData,
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState,
+  Gesture,
+  LibraryItems,
+  PointerDownState as ExcalidrawPointerDownState,
+} from "@excalidraw/excalidraw/types";
+import type {
+  NonDeletedExcalidrawElement,
+  Theme,
+} from "@excalidraw/excalidraw/element/types";
+import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
 
 import "./ExampleApp.scss";
 
-import type { ResolvablePromise } from "../utils";
-
 type Comment = {
   x: number;
   y: number;
@@ -104,7 +105,6 @@ export default function ExampleApp({
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
-  const [renderScrollbars, setRenderScrollbars] = useState(false);
   const [blobUrl, setBlobUrl] = useState<string>("");
   const [canvasUrl, setCanvasUrl] = useState<string>("");
   const [exportWithDarkMode, setExportWithDarkMode] = useState(false);
@@ -193,7 +193,6 @@ export default function ExampleApp({
         }) => setPointerData(payload),
         viewModeEnabled,
         zenModeEnabled,
-        renderScrollbars,
         gridModeEnabled,
         theme,
         name: "Custom name of drawing",
@@ -712,14 +711,6 @@ export default function ExampleApp({
             />
             Grid mode
           </label>
-          <label>
-            <input
-              type="checkbox"
-              checked={renderScrollbars}
-              onChange={() => setRenderScrollbars(!renderScrollbars)}
-            />
-            Render scrollbars
-          </label>
           <label>
             <input
               type="checkbox"

examples/with-script-in-browser/components/MobileFooter.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-
-import type * as TExcalidraw from "@excalidraw/excalidraw";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-
 import CustomFooter from "./CustomFooter";
+import type * as TExcalidraw from "@excalidraw/excalidraw";
 
 const MobileFooter = ({
   excalidrawAPI,

examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-
 import "./ExampleSidebar.scss";
 
 export default function Sidebar({ children }: { children: React.ReactNode }) {

examples/with-script-in-browser/index.tsx

@@ -1,11 +1,10 @@
+import App from "./components/ExampleApp";
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import "@excalidraw/excalidraw/index.css";
-
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 
-import App from "./components/ExampleApp";
+import "@excalidraw/excalidraw/index.css";
 
 declare global {
   interface Window {

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

@@ -15,8 +15,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 5002",
-    "build:preview": "yarn build && yarn preview",
+    "build:preview": "yarn build && vite preview --port 5002",
     "build:package": "yarn workspace @excalidraw/excalidraw run build:esm"
   }
 }

examples/with-script-in-browser/utils.ts

@@ -1,6 +1,6 @@
-import { MIME_TYPES } from "@excalidraw/excalidraw";
-import { fileOpen as _fileOpen } from "browser-fs-access";
 import { unstable_batchedUpdates } from "react-dom";
+import { fileOpen as _fileOpen } from "browser-fs-access";
+import { MIME_TYPES } from "@excalidraw/excalidraw";
 
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 

excalidraw-app/App.tsx

@@ -1,3 +1,24 @@
+import polyfill from "@excalidraw/excalidraw/polyfill";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
+import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
+import { TopErrorBoundary } from "./components/TopErrorBoundary";
+import {
+  APP_NAME,
+  EVENT,
+  THEME,
+  TITLE_TIMEOUT,
+  VERSION_TIMEOUT,
+} from "@excalidraw/excalidraw/constants";
+import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
+import type {
+  FileId,
+  NonDeletedExcalidrawElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/excalidraw/element/types";
+import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
+import { t } from "@excalidraw/excalidraw/i18n";
 import {
   Excalidraw,
   LiveCollaborationTrigger,
@@ -5,23 +26,15 @@ import {
   CaptureUpdateAction,
   reconcileElements,
 } from "@excalidraw/excalidraw";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
+import type {
+  AppState,
+  ExcalidrawImperativeAPI,
+  BinaryFiles,
+  ExcalidrawInitialDataState,
+  UIAppState,
+} from "@excalidraw/excalidraw/types";
+import type { ResolvablePromise } from "@excalidraw/excalidraw/utils";
 import {
-  CommandPalette,
-  DEFAULT_CATEGORIES,
-} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette";
-import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
-import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
-import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog";
-import Trans from "@excalidraw/excalidraw/components/Trans";
-import {
-  APP_NAME,
-  EVENT,
-  THEME,
-  TITLE_TIMEOUT,
-  VERSION_TIMEOUT,
   debounce,
   getVersion,
   getFrame,
@@ -29,14 +42,75 @@ import {
   preventUnload,
   resolvablePromise,
   isRunningInIframe,
-  isDevEnv,
-} from "@excalidraw/common";
-import polyfill from "@excalidraw/excalidraw/polyfill";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
-import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
-import { t } from "@excalidraw/excalidraw/i18n";
+} from "@excalidraw/excalidraw/utils";
+import {
+  FIREBASE_STORAGE_PREFIXES,
+  isExcalidrawPlusSignedUser,
+  STORAGE_KEYS,
+  SYNC_BROWSER_TABS_TIMEOUT,
+} from "./app_constants";
+import type { CollabAPI } from "./collab/Collab";
+import Collab, {
+  collabAPIAtom,
+  isCollaboratingAtom,
+  isOfflineAtom,
+} from "./collab/Collab";
+import {
+  exportToBackend,
+  getCollaborationLinkData,
+  isCollaborationLink,
+  loadScene,
+} from "./data";
+import {
+  importFromLocalStorage,
+  importUsernameFromLocalStorage,
+} from "./data/localStorage";
+import CustomStats from "./CustomStats";
+import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
+import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
+import {
+  ExportToExcalidrawPlus,
+  exportToExcalidrawPlus,
+} from "./components/ExportToExcalidrawPlus";
+import { updateStaleImageStatuses } from "./data/FileManager";
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
+import { loadFilesFromFirebase } from "./data/firebase";
+import {
+  LibraryIndexedDBAdapter,
+  LibraryLocalStorageMigrationAdapter,
+  LocalData,
+} from "./data/LocalData";
+import { isBrowserStorageStateNewer } from "./data/tabSync";
+import clsx from "clsx";
+import {
+  parseLibraryTokensFromUrl,
+  useHandleLibrary,
+} from "@excalidraw/excalidraw/data/library";
+import { AppMainMenu } from "./components/AppMainMenu";
+import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
+import { AppFooter } from "./components/AppFooter";
+import {
+  Provider,
+  useAtom,
+  useAtomValue,
+  useAtomWithInitialValue,
+  appJotaiStore,
+} from "./app-jotai";
 
+import "./index.scss";
+import type { ResolutionType } from "@excalidraw/excalidraw/utility-types";
+import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog";
+import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
+import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
+import Trans from "@excalidraw/excalidraw/components/Trans";
+import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
+import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
+import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
+import {
+  CommandPalette,
+  DEFAULT_CATEGORIES,
+} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette";
 import {
   GithubIcon,
   XBrandIcon,
@@ -47,83 +121,6 @@ import {
   share,
   youtubeIcon,
 } from "@excalidraw/excalidraw/components/icons";
-import { isElementLink } from "@excalidraw/element";
-import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
-import { newElementWith } from "@excalidraw/element";
-import { isInitializedImageElement } from "@excalidraw/element";
-import clsx from "clsx";
-import {
-  parseLibraryTokensFromUrl,
-  useHandleLibrary,
-} from "@excalidraw/excalidraw/data/library";
-
-import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
-import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
-import type {
-  FileId,
-  NonDeletedExcalidrawElement,
-  OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
-import type {
-  AppState,
-  ExcalidrawImperativeAPI,
-  BinaryFiles,
-  ExcalidrawInitialDataState,
-  UIAppState,
-} from "@excalidraw/excalidraw/types";
-import type { ResolutionType } from "@excalidraw/common/utility-types";
-import type { ResolvablePromise } from "@excalidraw/common/utils";
-
-import CustomStats from "./CustomStats";
-import {
-  Provider,
-  useAtom,
-  useAtomValue,
-  useAtomWithInitialValue,
-  appJotaiStore,
-} from "./app-jotai";
-import {
-  FIREBASE_STORAGE_PREFIXES,
-  isExcalidrawPlusSignedUser,
-  STORAGE_KEYS,
-  SYNC_BROWSER_TABS_TIMEOUT,
-} from "./app_constants";
-import Collab, {
-  collabAPIAtom,
-  isCollaboratingAtom,
-  isOfflineAtom,
-} from "./collab/Collab";
-import { AppFooter } from "./components/AppFooter";
-import { AppMainMenu } from "./components/AppMainMenu";
-import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
-import {
-  ExportToExcalidrawPlus,
-  exportToExcalidrawPlus,
-} from "./components/ExportToExcalidrawPlus";
-import { TopErrorBoundary } from "./components/TopErrorBoundary";
-
-import {
-  exportToBackend,
-  getCollaborationLinkData,
-  isCollaborationLink,
-  loadScene,
-} from "./data";
-
-import { updateStaleImageStatuses } from "./data/FileManager";
-import {
-  importFromLocalStorage,
-  importUsernameFromLocalStorage,
-} from "./data/localStorage";
-
-import { loadFilesFromFirebase } from "./data/firebase";
-import {
-  LibraryIndexedDBAdapter,
-  LibraryLocalStorageMigrationAdapter,
-  LocalData,
-} from "./data/LocalData";
-import { isBrowserStorageStateNewer } from "./data/tabSync";
-import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
-import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
 import { useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
@@ -134,10 +131,7 @@ import DebugCanvas, {
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
 import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-
-import "./index.scss";
-
-import type { CollabAPI } from "./collab/Collab";
+import { isElementLink } from "@excalidraw/excalidraw/element/elementLink";
 
 polyfill();
 
@@ -383,7 +377,7 @@ const ExcalidrawWrapper = () => {
   const [, forceRefresh] = useState(false);
 
   useEffect(() => {
-    if (isDevEnv()) {
+    if (import.meta.env.DEV) {
       const debugState = loadSavedDebugState();
 
       if (debugState.enabled && !window.visualDebug) {
@@ -608,13 +602,7 @@ const ExcalidrawWrapper = () => {
           excalidrawAPI.getSceneElements(),
         )
       ) {
-        if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
-          preventUnload(event);
-        } else {
-          console.warn(
-            "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
-          );
-        }
+        preventUnload(event);
       }
     };
     window.addEventListener(EVENT.BEFORE_UNLOAD, unloadHandler);
@@ -926,21 +914,16 @@ const ExcalidrawWrapper = () => {
         <ShareDialog
           collabAPI={collabAPI}
           onExportToBackend={async () => {
-            if (!excalidrawAPI) {
-              return;
-            }
-            try {
-              const { url, errorMessage } = await exportToBackend(
-                excalidrawAPI.getSceneElements(),
-                excalidrawAPI.getAppState(),
-                excalidrawAPI.getFiles(),
-              );
-              if (errorMessage) {
-                throw new Error(errorMessage);
+            if (excalidrawAPI) {
+              try {
+                await onExportToBackend(
+                  excalidrawAPI.getSceneElements(),
+                  excalidrawAPI.getAppState(),
+                  excalidrawAPI.getFiles(),
+                );
+              } catch (error: any) {
+                setErrorMessage(error.message);
               }
-              setLatestShareableLink(url);
-            } catch (error: any) {
-              setErrorMessage(error.message);
             }
           }}
         />

excalidraw-app/CustomStats.tsx

@@ -1,21 +1,15 @@
-import { Stats } from "@excalidraw/excalidraw";
-import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
-import {
-  DEFAULT_VERSION,
-  debounce,
-  getVersion,
-  nFormatter,
-} from "@excalidraw/common";
-import { t } from "@excalidraw/excalidraw/i18n";
 import { useEffect, useState } from "react";
-
-import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-import type { UIAppState } from "@excalidraw/excalidraw/types";
-
+import { debounce, getVersion, nFormatter } from "@excalidraw/excalidraw/utils";
 import {
   getElementsStorageSize,
   getTotalStorageSize,
 } from "./data/localStorage";
+import { DEFAULT_VERSION } from "@excalidraw/excalidraw/constants";
+import { t } from "@excalidraw/excalidraw/i18n";
+import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
+import type { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import type { UIAppState } from "@excalidraw/excalidraw/types";
+import { Stats } from "@excalidraw/excalidraw";
 
 type StorageSizes = { scene: number; total: number };
 

excalidraw-app/ExcalidrawPlusIframeExport.tsx

@@ -1,15 +1,13 @@
-import { base64urlToString } from "@excalidraw/excalidraw/data/encode";
-import { ExcalidrawError } from "@excalidraw/excalidraw/errors";
 import { useLayoutEffect, useRef } from "react";
-
+import { STORAGE_KEYS } from "./app_constants";
+import { LocalData } from "./data/LocalData";
 import type {
   FileId,
   OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
 import type { AppState, BinaryFileData } from "@excalidraw/excalidraw/types";
-
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
+import { ExcalidrawError } from "@excalidraw/excalidraw/errors";
+import { base64urlToString } from "@excalidraw/excalidraw/data/encode";
 
 const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
 

excalidraw-app/app-language/LanguageList.tsx

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

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

@@ -1,5 +1,5 @@
-import { defaultLang, languages } from "@excalidraw/excalidraw";
 import LanguageDetector from "i18next-browser-languagedetector";
+import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 export const languageDetector = new LanguageDetector();
 

excalidraw-app/app-language/language-state.ts

@@ -1,7 +1,5 @@
 import { useEffect } from "react";
-
 import { atom, useAtom } from "../app-jotai";
-
 import { getPreferredLanguage, languageDetector } from "./language-detector";
 
 export const appLangCodeAtom = atom(getPreferredLanguage());

excalidraw-app/collab/Collab.tsx

@@ -1,45 +1,5 @@
-import {
-  CaptureUpdateAction,
-  getSceneVersion,
-  restoreElements,
-  zoomToFitBounds,
-  reconcileElements,
-} from "@excalidraw/excalidraw";
-import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, EVENT } from "@excalidraw/common";
-import {
-  IDLE_THRESHOLD,
-  ACTIVE_THRESHOLD,
-  UserIdleState,
-  assertNever,
-  isDevEnv,
-  isTestEnv,
-  preventUnload,
-  resolvablePromise,
-  throttleRAF,
-} from "@excalidraw/common";
-import { decryptData } from "@excalidraw/excalidraw/data/encryption";
-import { getVisibleSceneBounds } from "@excalidraw/element";
-import { newElementWith } from "@excalidraw/element";
-import { isImageElement, isInitializedImageElement } from "@excalidraw/element";
-import { AbortError } from "@excalidraw/excalidraw/errors";
-import { t } from "@excalidraw/excalidraw/i18n";
-import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
-
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-
-import type {
-  ReconciledExcalidrawElement,
-  RemoteExcalidrawElement,
-} from "@excalidraw/excalidraw/data/reconcile";
-import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type {
-  ExcalidrawElement,
-  FileId,
-  InitializedExcalidrawImageElement,
-  OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
 import type {
   BinaryFileData,
   ExcalidrawImperativeAPI,
@@ -47,9 +7,28 @@ import type {
   Collaborator,
   Gesture,
 } from "@excalidraw/excalidraw/types";
-import type { Mutable, ValueOf } from "@excalidraw/common/utility-types";
-
-import { appJotaiStore, atom } from "../app-jotai";
+import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
+import { APP_NAME, ENV, EVENT } from "@excalidraw/excalidraw/constants";
+import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
+import type {
+  ExcalidrawElement,
+  FileId,
+  InitializedExcalidrawImageElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/excalidraw/element/types";
+import {
+  CaptureUpdateAction,
+  getSceneVersion,
+  restoreElements,
+  zoomToFitBounds,
+  reconcileElements,
+} from "@excalidraw/excalidraw";
+import {
+  assertNever,
+  preventUnload,
+  resolvablePromise,
+  throttleRAF,
+} from "@excalidraw/excalidraw/utils";
 import {
   CURSOR_SYNC_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
@@ -60,17 +39,15 @@ import {
   SYNC_FULL_SCENE_INTERVAL_MS,
   WS_EVENTS,
 } from "../app_constants";
+import type {
+  SocketUpdateDataSource,
+  SyncableExcalidrawElement,
+} from "../data";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
   getSyncableElements,
 } from "../data";
-import {
-  encodeFilesForUpload,
-  FileManager,
-  updateStaleImageStatuses,
-} from "../data/FileManager";
-import { LocalData } from "../data/LocalData";
 import {
   isSavedToFirebase,
   loadFilesFromFirebase,
@@ -82,15 +59,36 @@ import {
   importUsernameFromLocalStorage,
   saveUsernameToLocalStorage,
 } from "../data/localStorage";
-import { resetBrowserStateVersions } from "../data/tabSync";
-
-import { collabErrorIndicatorAtom } from "./CollabError";
 import Portal from "./Portal";
-
+import { t } from "@excalidraw/excalidraw/i18n";
+import {
+  IDLE_THRESHOLD,
+  ACTIVE_THRESHOLD,
+  UserIdleState,
+} from "@excalidraw/excalidraw/constants";
+import {
+  encodeFilesForUpload,
+  FileManager,
+  updateStaleImageStatuses,
+} from "../data/FileManager";
+import { AbortError } from "@excalidraw/excalidraw/errors";
+import {
+  isImageElement,
+  isInitializedImageElement,
+} from "@excalidraw/excalidraw/element/typeChecks";
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { decryptData } from "@excalidraw/excalidraw/data/encryption";
+import { resetBrowserStateVersions } from "../data/tabSync";
+import { LocalData } from "../data/LocalData";
+import { appJotaiStore, atom } from "../app-jotai";
+import type { Mutable, ValueOf } from "@excalidraw/excalidraw/utility-types";
+import { getVisibleSceneBounds } from "@excalidraw/excalidraw/element/bounds";
+import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
+import { collabErrorIndicatorAtom } from "./CollabError";
 import type {
-  SocketUpdateDataSource,
-  SyncableExcalidrawElement,
-} from "../data";
+  ReconciledExcalidrawElement,
+  RemoteExcalidrawElement,
+} from "@excalidraw/excalidraw/data/reconcile";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const isCollaboratingAtom = atom(false);
@@ -238,7 +236,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
 
-    if (isTestEnv() || isDevEnv()) {
+    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
       window.collab = window.collab || ({} as Window["collab"]);
       Object.defineProperties(window, {
         collab: {
@@ -298,13 +296,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       //  the purpose is to run in immediately after user decides to stay
       this.saveCollabRoomToFirebase(syncableElements);
 
-      if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
-        preventUnload(event);
-      } else {
-        console.warn(
-          "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
-        );
-      }
+      preventUnload(event);
     }
   });
 
@@ -1017,7 +1009,7 @@ declare global {
   }
 }
 
-if (isTestEnv() || isDevEnv()) {
+if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
   window.collab = window.collab || ({} as Window["collab"]);
 }
 

excalidraw-app/collab/CollabError.tsx

@@ -2,7 +2,6 @@ import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { warning } from "@excalidraw/excalidraw/components/icons";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
-
 import { atom } from "../app-jotai";
 
 import "./CollabError.scss";

excalidraw-app/collab/Portal.tsx

@@ -1,26 +1,25 @@
-import { CaptureUpdateAction } from "@excalidraw/excalidraw";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { encryptData } from "@excalidraw/excalidraw/data/encryption";
-import { newElementWith } from "@excalidraw/element";
-import throttle from "lodash.throttle";
-
-import type { UserIdleState } from "@excalidraw/common";
-import type { OrderedExcalidrawElement } from "@excalidraw/element/types";
-import type {
-  OnUserFollowedPayload,
-  SocketId,
-} from "@excalidraw/excalidraw/types";
-
-import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
-import { isSyncableElement } from "../data";
-
 import type {
   SocketUpdateData,
   SocketUpdateDataSource,
   SyncableExcalidrawElement,
 } from "../data";
+import { isSyncableElement } from "../data";
+
 import type { TCollabClass } from "./Collab";
+
+import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
+import type {
+  OnUserFollowedPayload,
+  SocketId,
+} from "@excalidraw/excalidraw/types";
+import type { UserIdleState } from "@excalidraw/excalidraw/constants";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import throttle from "lodash.throttle";
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { encryptData } from "@excalidraw/excalidraw/data/encryption";
 import type { Socket } from "socket.io-client";
+import { CaptureUpdateAction } from "@excalidraw/excalidraw";
 
 class Portal {
   collab: TCollabClass;

excalidraw-app/components/AI.tsx

@@ -1,3 +1,4 @@
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 import {
   DiagramToCodePlugin,
   exportToBlob,
@@ -6,9 +7,7 @@ import {
   TTDDialog,
 } from "@excalidraw/excalidraw";
 import { getDataURL } from "@excalidraw/excalidraw/data/blob";
-import { safelyParseJSON } from "@excalidraw/common";
-
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import { safelyParseJSON } from "@excalidraw/excalidraw/utils";
 
 export const AIComponents = ({
   excalidrawAPI,
@@ -73,7 +72,7 @@ export const AIComponents = ({
                   </br>
                   <div>You can also try <a href="${
                     import.meta.env.VITE_APP_PLUS_LP
-                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noopener">Excalidraw+</a> to get more requests.</div>
+                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">Excalidraw+</a> to get more requests.</div>
                 </div>
                 </body>
                 </html>`,

excalidraw-app/components/AppFooter.tsx

@@ -1,11 +1,9 @@
-import { Footer } from "@excalidraw/excalidraw/index";
 import React from "react";
-
-import { isExcalidrawPlusSignedUser } from "../app_constants";
-
-import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
+import { Footer } from "@excalidraw/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
+import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 
 export const AppFooter = React.memo(
   ({ onChange }: { onChange: () => void }) => {

excalidraw-app/components/AppMainMenu.tsx

@@ -1,18 +1,13 @@
+import React from "react";
 import {
   loginIcon,
   ExcalLogo,
   eyeIcon,
 } from "@excalidraw/excalidraw/components/icons";
+import type { Theme } from "@excalidraw/excalidraw/element/types";
 import { MainMenu } from "@excalidraw/excalidraw/index";
-import React from "react";
-
-import { isDevEnv } from "@excalidraw/common";
-
-import type { Theme } from "@excalidraw/element/types";
-
-import { LanguageList } from "../app-language/LanguageList";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-
+import { LanguageList } from "../app-language/LanguageList";
 import { saveDebugState } from "./DebugCanvas";
 
 export const AppMainMenu: React.FC<{
@@ -59,7 +54,7 @@ export const AppMainMenu: React.FC<{
       >
         {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
       </MainMenu.ItemLink>
-      {isDevEnv() && (
+      {import.meta.env.DEV && (
         <MainMenu.Item
           icon={eyeIcon}
           onClick={() => {

excalidraw-app/components/AppWelcomeScreen.tsx

@@ -1,10 +1,9 @@
+import React from "react";
 import { loginIcon } from "@excalidraw/excalidraw/components/icons";
-import { POINTER_EVENTS } from "@excalidraw/common";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
 import { WelcomeScreen } from "@excalidraw/excalidraw/index";
-import React from "react";
-
 import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { POINTER_EVENTS } from "@excalidraw/excalidraw/constants";
 
 export const AppWelcomeScreen: React.FC<{
   onCollabDialogOpen: () => any;

excalidraw-app/components/DebugCanvas.tsx

@@ -1,28 +1,24 @@
+import { useCallback, useImperativeHandle, useRef } from "react";
+import { type AppState } from "@excalidraw/excalidraw/types";
+import { throttleRAF } from "@excalidraw/excalidraw/utils";
+import {
+  bootstrapCanvas,
+  getNormalizedCanvasDimensions,
+} from "@excalidraw/excalidraw/renderer/helpers";
+import type { DebugElement } from "@excalidraw/excalidraw/visualdebug";
 import {
   ArrowheadArrowIcon,
   CloseIcon,
   TrashIcon,
 } from "@excalidraw/excalidraw/components/icons";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "@excalidraw/excalidraw/renderer/helpers";
-import { type AppState } from "@excalidraw/excalidraw/types";
-import { throttleRAF } from "@excalidraw/common";
-import { useCallback, useImperativeHandle, useRef } from "react";
-
+import { STORAGE_KEYS } from "../app_constants";
+import type { Curve } from "../../packages/math";
 import {
   isLineSegment,
   type GlobalPoint,
   type LineSegment,
-} from "@excalidraw/math";
-import { isCurve } from "@excalidraw/math/curve";
-
-import type { DebugElement } from "@excalidraw/excalidraw/visualdebug";
-
-import type { Curve } from "@excalidraw/math";
-
-import { STORAGE_KEYS } from "../app_constants";
+} from "../../packages/math";
+import { isCurve } from "../../packages/math/curve";
 
 const renderLine = (
   context: CanvasRenderingContext2D,

excalidraw-app/components/EncryptedIcon.tsx

@@ -1,5 +1,5 @@
-import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { shield } from "@excalidraw/excalidraw/components/icons";
+import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
 
 export const EncryptedIcon = () => {
@@ -10,7 +10,7 @@ export const EncryptedIcon = () => {
       className="encrypted-icon tooltip"
       href="https://plus.excalidraw.com/blog/end-to-end-encryption"
       target="_blank"
-      rel="noopener"
+      rel="noopener noreferrer"
       aria-label={t("encrypted.link")}
     >
       <Tooltip label={t("encrypted.tooltip")} long={true}>

excalidraw-app/components/ExcalidrawPlusAppLink.tsx

@@ -10,7 +10,7 @@ export const ExcalidrawPlusAppLink = () => {
         import.meta.env.VITE_APP_PLUS_APP
       }?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`}
       target="_blank"
-      rel="noopener"
+      rel="noreferrer"
       className="plus-button"
     >
       Go to Excalidraw+

excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -1,33 +1,31 @@
 import React from "react";
-import { uploadBytes, ref } from "firebase/storage";
-import { nanoid } from "nanoid";
-
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { Card } from "@excalidraw/excalidraw/components/Card";
-import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo";
 import { ToolButton } from "@excalidraw/excalidraw/components/ToolButton";
-import { MIME_TYPES, getFrame } from "@excalidraw/common";
-import {
-  encryptData,
-  generateEncryptionKey,
-} from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
-import { isInitializedImageElement } from "@excalidraw/element";
-import { useI18n } from "@excalidraw/excalidraw/i18n";
-
+import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
 import type {
   FileId,
   NonDeletedExcalidrawElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
 } from "@excalidraw/excalidraw/types";
-
+import { nanoid } from "nanoid";
+import { useI18n } from "@excalidraw/excalidraw/i18n";
+import {
+  encryptData,
+  generateEncryptionKey,
+} from "@excalidraw/excalidraw/data/encryption";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
 import { encodeFilesForUpload } from "../data/FileManager";
-import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
+import { uploadBytes, ref } from "firebase/storage";
+import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getFrame } from "@excalidraw/excalidraw/utils";
+import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],

excalidraw-app/components/GitHubCorner.tsx

@@ -1,8 +1,7 @@
-import { THEME } from "@excalidraw/common";
 import oc from "open-color";
 import React from "react";
-
-import type { Theme } from "@excalidraw/element/types";
+import { THEME } from "@excalidraw/excalidraw/constants";
+import type { Theme } from "@excalidraw/excalidraw/element/types";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(

excalidraw-app/components/TopErrorBoundary.tsx

@@ -1,7 +1,7 @@
-import Trans from "@excalidraw/excalidraw/components/Trans";
-import { t } from "@excalidraw/excalidraw/i18n";
-import * as Sentry from "@sentry/browser";
 import React from "react";
+import * as Sentry from "@sentry/browser";
+import { t } from "@excalidraw/excalidraw/i18n";
+import Trans from "@excalidraw/excalidraw/components/Trans";
 
 interface TopErrorBoundaryState {
   hasError: boolean;

excalidraw-app/data/FileManager.ts

@@ -1,15 +1,14 @@
 import { CaptureUpdateAction } from "@excalidraw/excalidraw";
 import { compressData } from "@excalidraw/excalidraw/data/encode";
-import { newElementWith } from "@excalidraw/element";
-import { isInitializedImageElement } from "@excalidraw/element";
-import { t } from "@excalidraw/excalidraw/i18n";
-
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
   FileId,
   InitializedExcalidrawImageElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
+import { t } from "@excalidraw/excalidraw/i18n";
 import type {
   BinaryFileData,
   BinaryFileMetadata,

excalidraw-app/data/LocalData.ts

@@ -10,13 +10,6 @@
  *   (localStorage, indexedDB).
  */
 
-import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState";
-import {
-  CANVAS_SEARCH_TAB,
-  DEFAULT_SIDEBAR,
-  debounce,
-} from "@excalidraw/common";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
 import {
   createStore,
   entries,
@@ -26,19 +19,26 @@ import {
   setMany,
   get,
 } from "idb-keyval";
-
+import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState";
+import {
+  CANVAS_SEARCH_TAB,
+  DEFAULT_SIDEBAR,
+} from "@excalidraw/excalidraw/constants";
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
+import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element";
+import type {
+  ExcalidrawElement,
+  FileId,
+} from "@excalidraw/excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
 } from "@excalidraw/excalidraw/types";
-import type { MaybePromise } from "@excalidraw/common/utility-types";
-
+import type { MaybePromise } from "@excalidraw/excalidraw/utility-types";
+import { debounce } from "@excalidraw/excalidraw/utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
-
 import { FileManager } from "./FileManager";
 import { Locker } from "./Locker";
 import { updateBrowserStateVersion } from "./tabSync";

excalidraw-app/data/firebase.ts

@@ -1,12 +1,27 @@
 import { reconcileElements } from "@excalidraw/excalidraw";
-import { MIME_TYPES } from "@excalidraw/common";
+import type {
+  ExcalidrawElement,
+  FileId,
+  OrderedExcalidrawElement,
+} from "@excalidraw/excalidraw/element/types";
+import { getSceneVersion } from "@excalidraw/excalidraw/element";
+import type Portal from "../collab/Portal";
+import { restoreElements } from "@excalidraw/excalidraw/data/restore";
+import type {
+  AppState,
+  BinaryFileData,
+  BinaryFileMetadata,
+  DataURL,
+} from "@excalidraw/excalidraw/types";
+import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
 import { decompressData } from "@excalidraw/excalidraw/data/encode";
 import {
   encryptData,
   decryptData,
 } from "@excalidraw/excalidraw/data/encryption";
-import { restoreElements } from "@excalidraw/excalidraw/data/restore";
-import { getSceneVersion } from "@excalidraw/element";
+import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import type { SyncableExcalidrawElement } from ".";
+import { getSyncableElements } from ".";
 import { initializeApp } from "firebase/app";
 import {
   getFirestore,
@@ -16,27 +31,8 @@ import {
   Bytes,
 } from "firebase/firestore";
 import { getStorage, ref, uploadBytes } from "firebase/storage";
-
-import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
-import type {
-  ExcalidrawElement,
-  FileId,
-  OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
-import type {
-  AppState,
-  BinaryFileData,
-  BinaryFileMetadata,
-  DataURL,
-} from "@excalidraw/excalidraw/types";
-
-import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
-
-import { getSyncableElements } from ".";
-
-import type { SyncableExcalidrawElement } from ".";
-import type Portal from "../collab/Portal";
 import type { Socket } from "socket.io-client";
+import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
 
 // private
 // -----------------------------------------------------------------------------

excalidraw-app/data/index.ts

@@ -9,38 +9,34 @@ import {
 } from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
 import { restore } from "@excalidraw/excalidraw/data/restore";
-import { isInvisiblySmallElement } from "@excalidraw/element";
-import { isInitializedImageElement } from "@excalidraw/element";
-import { t } from "@excalidraw/excalidraw/i18n";
-import { bytesToHexString } from "@excalidraw/common";
-
-import type { UserIdleState } from "@excalidraw/common";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type { SceneBounds } from "@excalidraw/element";
+import type { SceneBounds } from "@excalidraw/excalidraw/element/bounds";
+import { isInvisiblySmallElement } from "@excalidraw/excalidraw/element/sizeHelpers";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
 import type {
   ExcalidrawElement,
   FileId,
   OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
+import { t } from "@excalidraw/excalidraw/i18n";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
   SocketId,
 } from "@excalidraw/excalidraw/types";
-import type { MakeBrand } from "@excalidraw/common/utility-types";
-
+import type { UserIdleState } from "@excalidraw/excalidraw/constants";
+import type { MakeBrand } from "@excalidraw/excalidraw/utility-types";
+import { bytesToHexString } from "@excalidraw/excalidraw/utils";
+import type { WS_SUBTYPES } from "../app_constants";
 import {
   DELETED_ELEMENT_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
   ROOM_ID_BYTES,
 } from "../app_constants";
-
 import { encodeFilesForUpload } from "./FileManager";
 import { saveFilesToFirebase } from "./firebase";
 
-import type { WS_SUBTYPES } from "../app_constants";
-
 export type SyncableExcalidrawElement = OrderedExcalidrawElement &
   MakeBrand<"SyncableExcalidrawElement">;
 

excalidraw-app/data/localStorage.ts

@@ -1,12 +1,10 @@
+import type { ExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import type { AppState } from "@excalidraw/excalidraw/types";
 import {
   clearAppStateForLocalStorage,
   getDefaultAppState,
 } from "@excalidraw/excalidraw/appState";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-import type { AppState } from "@excalidraw/excalidraw/types";
-
+import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element";
 import { STORAGE_KEYS } from "../app_constants";
 
 export const saveUsernameToLocalStorage = (username: string) => {

excalidraw-app/index.tsx

@@ -1,11 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import ExcalidrawApp from "./App";
 import { registerSW } from "virtual:pwa-register";
 
 import "../excalidraw-app/sentry";
-
-import ExcalidrawApp from "./App";
-
 window.__EXCALIDRAW_SHA__ = import.meta.env.VITE_APP_GIT_SHA;
 const rootElement = document.getElementById("root")!;
 const root = createRoot(rootElement);

excalidraw-app/package.json

@@ -41,8 +41,8 @@
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "vite build",
-    "build:app": "vite build",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
     "build:version": "node ../scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",
     "start": "yarn && vite",

excalidraw-app/share/ShareDialog.tsx

@@ -1,8 +1,10 @@
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { useEffect, useRef, useState } from "react";
 import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getFrame } from "@excalidraw/excalidraw/utils";
+import { useI18n } from "@excalidraw/excalidraw/i18n";
+import { KEYS } from "@excalidraw/excalidraw/keys";
 import { Dialog } from "@excalidraw/excalidraw/components/Dialog";
-import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton";
-import { TextField } from "@excalidraw/excalidraw/components/TextField";
 import {
   copyIcon,
   LinkIcon,
@@ -12,19 +14,16 @@ import {
   shareIOS,
   shareWindows,
 } from "@excalidraw/excalidraw/components/icons";
+import { TextField } from "@excalidraw/excalidraw/components/TextField";
+import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton";
+import type { CollabAPI } from "../collab/Collab";
+import { activeRoomLinkAtom } from "../collab/Collab";
 import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState";
 import { useCopyStatus } from "@excalidraw/excalidraw/hooks/useCopiedIndicator";
-import { useI18n } from "@excalidraw/excalidraw/i18n";
-import { KEYS, getFrame } from "@excalidraw/common";
-import { useEffect, useRef, useState } from "react";
-
 import { atom, useAtom, useAtomValue } from "../app-jotai";
-import { activeRoomLinkAtom } from "../collab/Collab";
 
 import "./ShareDialog.scss";
 
-import type { CollabAPI } from "../collab/Collab";
-
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
 

excalidraw-app/tests/MobileMenu.test.tsx

@@ -1,11 +1,11 @@
-import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+import ExcalidrawApp from "../App";
 import {
   mockBoundingClientRect,
   render,
   restoreOriginalGetBoundingClientRect,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
-import ExcalidrawApp from "../App";
+import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
 
 describe("Test MobileMenu", () => {
   const { h } = window;

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

@@ -198,7 +198,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
     <a
       class="welcome-screen-menu-item "
       href="undefined/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
-      rel="noopener"
+      rel="noreferrer"
       target="_blank"
     >
       <div

excalidraw-app/tests/collab.test.tsx

@@ -1,18 +1,13 @@
-import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw";
+import { vi } from "vitest";
+import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils";
+import ExcalidrawApp from "../App";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { syncInvalidIndices } from "@excalidraw/excalidraw/fractionalIndex";
 import {
   createRedoAction,
   createUndoAction,
 } from "@excalidraw/excalidraw/actions/actionHistory";
-import { syncInvalidIndices } from "@excalidraw/element";
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils";
-import { vi } from "vitest";
-
-import { StoreIncrement } from "@excalidraw/element";
-
-import type { DurableIncrement, EphemeralIncrement } from "@excalidraw/element";
-
-import ExcalidrawApp from "../App";
+import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw";
 
 const { h } = window;
 
@@ -69,79 +64,6 @@ vi.mock("socket.io-client", () => {
  * i.e. multiplayer history tests could be a good first candidate, as we could test both history stacks simultaneously.
  */
 describe("collaboration", () => {
-  it("should emit two ephemeral increments even though updates get batched", async () => {
-    const durableIncrements: DurableIncrement[] = [];
-    const ephemeralIncrements: EphemeralIncrement[] = [];
-
-    await render(<ExcalidrawApp />);
-
-    h.store.onStoreIncrementEmitter.on((increment) => {
-      if (StoreIncrement.isDurable(increment)) {
-        durableIncrements.push(increment);
-      } else {
-        ephemeralIncrements.push(increment);
-      }
-    });
-
-    // eslint-disable-next-line dot-notation
-    expect(h.store["scheduledMicroActions"].length).toBe(0);
-    expect(durableIncrements.length).toBe(0);
-    expect(ephemeralIncrements.length).toBe(0);
-
-    const rectProps = {
-      type: "rectangle",
-      id: "A",
-      height: 200,
-      width: 100,
-      x: 0,
-      y: 0,
-    } as const;
-
-    const rect = API.createElement({ ...rectProps });
-
-    API.updateScene({
-      elements: [rect],
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-    });
-
-    await waitFor(() => {
-      // expect(commitSpy).toHaveBeenCalledTimes(1);
-      expect(durableIncrements.length).toBe(1);
-    });
-
-    // simulate two batched remote updates
-    act(() => {
-      h.app.updateScene({
-        elements: [newElementWith(h.elements[0], { x: 100 })],
-        captureUpdate: CaptureUpdateAction.NEVER,
-      });
-      h.app.updateScene({
-        elements: [newElementWith(h.elements[0], { x: 200 })],
-        captureUpdate: CaptureUpdateAction.NEVER,
-      });
-
-      // we scheduled two micro actions,
-      // which confirms they are going to be executed as part of one batched component update
-      // eslint-disable-next-line dot-notation
-      expect(h.store["scheduledMicroActions"].length).toBe(2);
-    });
-
-    await waitFor(() => {
-      // altough the updates get batched,
-      // we expect two ephemeral increments for each update,
-      // and each such update should have the expected change
-      expect(ephemeralIncrements.length).toBe(2);
-      expect(ephemeralIncrements[0].change.elements.A).toEqual(
-        expect.objectContaining({ x: 100 }),
-      );
-      expect(ephemeralIncrements[1].change.elements.A).toEqual(
-        expect.objectContaining({ x: 200 }),
-      );
-      // eslint-disable-next-line dot-notation
-      expect(h.store["scheduledMicroActions"].length).toBe(0);
-    });
-  });
-
   it("should allow to undo / redo even on force-deleted elements", async () => {
     await render(<ExcalidrawApp />);
     const rect1Props = {
@@ -199,7 +121,7 @@ describe("collaboration", () => {
       expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
     });
 
-    const undoAction = createUndoAction(h.history);
+    const undoAction = createUndoAction(h.history, h.store);
     act(() => h.app.actionManager.executeAction(undoAction));
 
     // with explicit undo (as addition) we expect our item to be restored from the snapshot!
@@ -231,7 +153,7 @@ describe("collaboration", () => {
       expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
     });
 
-    const redoAction = createRedoAction(h.history);
+    const redoAction = createRedoAction(h.history, h.store);
     act(() => h.app.actionManager.executeAction(redoAction));
 
     // with explicit redo (as removal) we again restore the element from the snapshot!

excalidraw-app/useHandleAppTheme.ts

@@ -1,9 +1,8 @@
-import { THEME } from "@excalidraw/excalidraw";
-import { EVENT, CODES, KEYS } from "@excalidraw/common";
 import { useEffect, useLayoutEffect, useState } from "react";
-
-import type { Theme } from "@excalidraw/element/types";
-
+import { THEME } from "@excalidraw/excalidraw";
+import { EVENT } from "@excalidraw/excalidraw/constants";
+import type { Theme } from "@excalidraw/excalidraw/element/types";
+import { CODES, KEYS } from "@excalidraw/excalidraw/keys";
 import { STORAGE_KEYS } from "./app_constants";
 
 const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>

excalidraw-app/vite.config.mts

@@ -23,57 +23,29 @@ export default defineConfig(({ mode }) => {
     envDir: "../",
     resolve: {
       alias: [
-        {
-          find: /^@excalidraw\/common$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/common/src/index.ts",
-          ),
-        },
-        {
-          find: /^@excalidraw\/common\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/common/src/$1"),
-        },
-        {
-          find: /^@excalidraw\/element$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/element/src/index.ts",
-          ),
-        },
-        {
-          find: /^@excalidraw\/element\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/element/src/$1"),
-        },
         {
           find: /^@excalidraw\/excalidraw$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/excalidraw/index.tsx",
-          ),
+          replacement: path.resolve(__dirname, "../packages/excalidraw/index.tsx"),
         },
         {
           find: /^@excalidraw\/excalidraw\/(.*?)/,
           replacement: path.resolve(__dirname, "../packages/excalidraw/$1"),
         },
-        {
-          find: /^@excalidraw\/math$/,
-          replacement: path.resolve(__dirname, "../packages/math/src/index.ts"),
-        },
-        {
-          find: /^@excalidraw\/math\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/math/src/$1"),
-        },
         {
           find: /^@excalidraw\/utils$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/utils/src/index.ts",
-          ),
+          replacement: path.resolve(__dirname, "../packages/utils/index.ts"),
         },
         {
           find: /^@excalidraw\/utils\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/utils/src/$1"),
+          replacement: path.resolve(__dirname, "../packages/utils/$1"),
+        },
+        {
+          find: /^@excalidraw\/math$/,
+          replacement: path.resolve(__dirname, "../packages/math/index.ts"),
+        },
+        {
+          find: /^@excalidraw\/math\/(.*?)/,
+          replacement: path.resolve(__dirname, "../packages/math/$1"),
         },
       ],
     },
@@ -225,7 +197,7 @@ export default defineConfig(({ mode }) => {
             },
           ],
           start_url: "/",
-          id: "excalidraw",
+          id:"excalidraw",
           display: "standalone",
           theme_color: "#121212",
           background_color: "#ffffff",

package.json

@@ -4,7 +4,9 @@
   "packageManager": "yarn@1.22.22",
   "workspaces": [
     "excalidraw-app",
-    "packages/*",
+    "packages/excalidraw",
+    "packages/utils",
+    "packages/math",
     "examples/*"
   ],
   "devDependencies": {
@@ -24,7 +26,6 @@
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "3.3.1",
     "http-server": "14.1.1",
     "husky": "7.0.4",
@@ -33,7 +34,6 @@
     "pepjs": "0.5.3",
     "prettier": "2.6.2",
     "rewire": "6.0.0",
-    "rimraf": "^5.0.0",
     "typescript": "4.9.4",
     "vite": "5.0.12",
     "vite-plugin-checker": "0.7.2",
@@ -79,8 +79,8 @@
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
     "release:excalidraw": "node scripts/release.js",
-    "rm:build": "rimraf --glob excalidraw-app/build excalidraw-app/dist excalidraw-app/dev-dist packages/*/dist packages/*/build examples/*/build examples/*/dist",
-    "rm:node_modules": "rimraf --glob node_modules excalidraw-app/node_modules packages/*/node_modules",
+    "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/{build,dist}",
+    "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",
     "clean-install": "yarn rm:node_modules && yarn install"
   },
   "resolutions": {

packages/common/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["../eslintrc.base.json"]
-}

packages/common/README.md

@@ -1,19 +0,0 @@
-# @excalidraw/common
-
-## Install
-
-```bash
-npm install @excalidraw/common
-```
-
-If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
-
-```bash
-yarn add @excalidraw/common
-```
-
-With PNPM, similarly install the package with this command:
-
-```bash
-pnpm add @excalidraw/common
-```

packages/common/global.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-import "@excalidraw/excalidraw/global";
-import "@excalidraw/excalidraw/css";

packages/common/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "@excalidraw/common",
-  "version": "0.1.0",
-  "type": "module",
-  "types": "./dist/types/common/src/index.d.ts",
-  "main": "./dist/prod/index.js",
-  "module": "./dist/prod/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/common/src/index.d.ts",
-      "development": "./dist/dev/index.js",
-      "production": "./dist/prod/index.js",
-      "default": "./dist/prod/index.js"
-    },
-    "./*": {
-      "types": "./dist/types/common/src/*.d.ts"
-    }
-  },
-  "files": [
-    "dist/*"
-  ],
-  "description": "Excalidraw common functions, constants, etc.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-utils"
-  ],
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not ie <= 11",
-      "not op_mini all",
-      "not safari < 12",
-      "not kaios <= 2.5",
-      "not edge < 79",
-      "not chrome < 70",
-      "not and_uc < 13",
-      "not samsung < 10"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "scripts": {
-    "gen:types": "rimraf types && tsc",
-    "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
-  }
-}

packages/common/src/index.ts

@@ -1,12 +0,0 @@
-export * from "./binary-heap";
-export * from "./colors";
-export * from "./constants";
-export * from "./font-metadata";
-export * from "./queue";
-export * from "./keys";
-export * from "./points";
-export * from "./promise-pool";
-export * from "./random";
-export * from "./url";
-export * from "./utils";
-export * from "./emitter";

packages/common/src/promise-pool.ts

@@ -1,50 +0,0 @@
-import Pool from "es6-promise-pool";
-
-// extending the missing types
-// relying on the [Index, T] to keep a correct order
-type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
-  addEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => (event: { data: { result: [Index, T] } }) => void;
-  removeEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => void;
-};
-
-export class PromisePool<T> {
-  private readonly pool: TPromisePool<T>;
-  private readonly entries: Record<number, T> = {};
-
-  constructor(
-    source: IterableIterator<Promise<void | readonly [number, T]>>,
-    concurrency: number,
-  ) {
-    this.pool = new Pool(
-      source as unknown as () => void | PromiseLike<[number, T][]>,
-      concurrency,
-    ) as TPromisePool<T>;
-  }
-
-  public all() {
-    const listener = (event: { data: { result: void | [number, T] } }) => {
-      if (event.data.result) {
-        // by default pool does not return the results, so we are gathering them manually
-        // with the correct call order (represented by the index in the tuple)
-        const [index, value] = event.data.result;
-        this.entries[index] = value;
-      }
-    };
-
-    this.pool.addEventListener("fulfilled", listener);
-
-    return this.pool.start().then(() => {
-      setTimeout(() => {
-        this.pool.removeEventListener("fulfilled", listener);
-      });
-
-      return Object.values(this.entries);
-    });
-  }
-}

packages/common/src/utils.test.ts

@@ -1,82 +0,0 @@
-import {
-  isTransparent,
-  mapFind,
-  reduceToCommonValue,
-} from "@excalidraw/common";
-
-describe("@excalidraw/common/utils", () => {
-  describe("isTransparent()", () => {
-    it("should return true when color is rgb transparent", () => {
-      expect(isTransparent("#ff00")).toEqual(true);
-      expect(isTransparent("#fff00000")).toEqual(true);
-      expect(isTransparent("transparent")).toEqual(true);
-    });
-
-    it("should return false when color is not transparent", () => {
-      expect(isTransparent("#ced4da")).toEqual(false);
-    });
-  });
-
-  describe("reduceToCommonValue()", () => {
-    it("should return the common value when all values are the same", () => {
-      expect(reduceToCommonValue([1, 1])).toEqual(1);
-      expect(reduceToCommonValue([0, 0])).toEqual(0);
-      expect(reduceToCommonValue(["a", "a"])).toEqual("a");
-      expect(reduceToCommonValue(new Set([1]))).toEqual(1);
-      expect(reduceToCommonValue([""])).toEqual("");
-      expect(reduceToCommonValue([0])).toEqual(0);
-
-      const o = {};
-      expect(reduceToCommonValue([o, o])).toEqual(o);
-
-      expect(
-        reduceToCommonValue([{ a: 1 }, { a: 1, b: 2 }], (o) => o.a),
-      ).toEqual(1);
-      expect(
-        reduceToCommonValue(new Set([{ a: 1 }, { a: 1, b: 2 }]), (o) => o.a),
-      ).toEqual(1);
-    });
-
-    it("should return `null` when values are different", () => {
-      expect(reduceToCommonValue([1, 2, 3])).toEqual(null);
-      expect(reduceToCommonValue(new Set([1, 2]))).toEqual(null);
-      expect(reduceToCommonValue([{ a: 1 }, { a: 2 }], (o) => o.a)).toEqual(
-        null,
-      );
-    });
-
-    it("should return `null` when some values are nullable", () => {
-      expect(reduceToCommonValue([1, null, 1])).toEqual(null);
-      expect(reduceToCommonValue([null, 1])).toEqual(null);
-      expect(reduceToCommonValue([1, undefined])).toEqual(null);
-      expect(reduceToCommonValue([undefined, 1])).toEqual(null);
-      expect(reduceToCommonValue([null])).toEqual(null);
-      expect(reduceToCommonValue([undefined])).toEqual(null);
-      expect(reduceToCommonValue([])).toEqual(null);
-    });
-  });
-
-  describe("mapFind()", () => {
-    it("should return the first mapped non-null element", () => {
-      {
-        let counter = 0;
-
-        const result = mapFind(["a", "b", "c"], (value) => {
-          counter++;
-          return value === "b" ? 42 : null;
-        });
-        expect(result).toEqual(42);
-        expect(counter).toBe(2);
-      }
-
-      expect(mapFind([1, 2], (value) => value * 0)).toBe(0);
-      expect(mapFind([1, 2], () => false)).toBe(false);
-      expect(mapFind([1, 2], () => "")).toBe("");
-    });
-
-    it("should return undefined if no mapped element is found", () => {
-      expect(mapFind([1, 2], () => undefined)).toBe(undefined);
-      expect(mapFind([1, 2], () => null)).toBe(undefined);
-    });
-  });
-});

packages/common/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist/types"
-  },
-  "include": ["src/**/*", "global.d.ts"],
-  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
-}

packages/element/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["../eslintrc.base.json"]
-}

packages/element/README.md

@@ -1,19 +0,0 @@
-# @excalidraw/element
-
-## Install
-
-```bash
-npm install @excalidraw/element
-```
-
-If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
-
-```bash
-yarn add @excalidraw/element
-```
-
-With PNPM, similarly install the package with this command:
-
-```bash
-pnpm add @excalidraw/element
-```

packages/element/global.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-import "@excalidraw/excalidraw/global";
-import "@excalidraw/excalidraw/css";

packages/element/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "@excalidraw/element",
-  "version": "0.1.0",
-  "type": "module",
-  "types": "./dist/types/element/src/index.d.ts",
-  "main": "./dist/prod/index.js",
-  "module": "./dist/prod/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/element/src/index.d.ts",
-      "development": "./dist/dev/index.js",
-      "production": "./dist/prod/index.js",
-      "default": "./dist/prod/index.js"
-    },
-    "./*": {
-      "types": "./dist/types/element/src/*.d.ts"
-    }
-  },
-  "files": [
-    "dist/*"
-  ],
-  "description": "Excalidraw elements-related logic",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-utils"
-  ],
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not ie <= 11",
-      "not op_mini all",
-      "not safari < 12",
-      "not kaios <= 2.5",
-      "not edge < 79",
-      "not chrome < 70",
-      "not and_uc < 13",
-      "not samsung < 10"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "scripts": {
-    "gen:types": "rimraf types && tsc",
-    "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
-  }
-}

packages/element/src/duplicate.ts

@@ -1,487 +0,0 @@
-import {
-  ORIG_ID,
-  randomId,
-  randomInteger,
-  arrayToMap,
-  castArray,
-  findLastIndex,
-  getUpdatedTimestamp,
-  isTestEnv,
-} from "@excalidraw/common";
-
-import type { Mutable } from "@excalidraw/common/utility-types";
-
-import type { AppState } from "@excalidraw/excalidraw/types";
-
-import {
-  getElementsInGroup,
-  getNewGroupIdsForDuplication,
-  getSelectedGroupForElement,
-} from "./groups";
-
-import {
-  bindElementsToFramesAfterDuplication,
-  getFrameChildren,
-} from "./frame";
-
-import { normalizeElementOrder } from "./sortElements";
-
-import { bumpVersion } from "./mutateElement";
-
-import {
-  hasBoundTextElement,
-  isBoundToContainer,
-  isFrameLikeElement,
-} from "./typeChecks";
-
-import { getBoundTextElement, getContainerElement } from "./textElement";
-
-import { fixDuplicatedBindingsAfterDuplication } from "./binding";
-
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  GroupId,
-  NonDeletedSceneElementsMap,
-} from "./types";
-
-/**
- * Duplicate an element, often used in the alt-drag operation.
- * Note that this method has gotten a bit complicated since the
- * introduction of gruoping/ungrouping elements.
- * @param editingGroupId The current group being edited. The new
- *                       element will inherit this group and its
- *                       parents.
- * @param groupIdMapForOperation A Map that maps old group IDs to
- *                               duplicated ones. If you are duplicating
- *                               multiple elements at once, share this map
- *                               amongst all of them
- * @param element Element to duplicate
- */
-export const duplicateElement = <TElement extends ExcalidrawElement>(
-  editingGroupId: AppState["editingGroupId"],
-  groupIdMapForOperation: Map<GroupId, GroupId>,
-  element: TElement,
-  randomizeSeed?: boolean,
-): Readonly<TElement> => {
-  const copy = deepCopyElement(element);
-
-  if (isTestEnv()) {
-    __test__defineOrigId(copy, element.id);
-  }
-
-  copy.id = randomId();
-  copy.updated = getUpdatedTimestamp();
-  if (randomizeSeed) {
-    copy.seed = randomInteger();
-    bumpVersion(copy);
-  }
-
-  copy.groupIds = getNewGroupIdsForDuplication(
-    copy.groupIds,
-    editingGroupId,
-    (groupId) => {
-      if (!groupIdMapForOperation.has(groupId)) {
-        groupIdMapForOperation.set(groupId, randomId());
-      }
-      return groupIdMapForOperation.get(groupId)!;
-    },
-  );
-  return copy;
-};
-
-export const duplicateElements = (
-  opts: {
-    elements: readonly ExcalidrawElement[];
-    randomizeSeed?: boolean;
-    overrides?: (data: {
-      duplicateElement: ExcalidrawElement;
-      origElement: ExcalidrawElement;
-      origIdToDuplicateId: Map<
-        ExcalidrawElement["id"],
-        ExcalidrawElement["id"]
-      >;
-    }) => Partial<ExcalidrawElement>;
-  } & (
-    | {
-        /**
-         * Duplicates all elements in array.
-         *
-         * Use this when programmaticaly duplicating elements, without direct
-         * user interaction.
-         */
-        type: "everything";
-      }
-    | {
-        /**
-         * Duplicates specified elements and inserts them back into the array
-         * in specified order.
-         *
-         * Use this when duplicating Scene elements, during user interaction
-         * such as alt-drag or on duplicate action.
-         */
-        type: "in-place";
-        idsOfElementsToDuplicate: Map<
-          ExcalidrawElement["id"],
-          ExcalidrawElement
-        >;
-        appState: {
-          editingGroupId: AppState["editingGroupId"];
-          selectedGroupIds: AppState["selectedGroupIds"];
-        };
-      }
-  ),
-) => {
-  let { elements } = opts;
-
-  const appState =
-    "appState" in opts
-      ? opts.appState
-      : ({
-          editingGroupId: null,
-          selectedGroupIds: {},
-        } as const);
-
-  // Ids of elements that have already been processed so we don't push them
-  // into the array twice if we end up backtracking when retrieving
-  // discontiguous group of elements (can happen due to a bug, or in edge
-  // cases such as a group containing deleted elements which were not selected).
-  //
-  // This is not enough to prevent duplicates, so we do a second loop afterwards
-  // to remove them.
-  //
-  // For convenience we mark even the newly created ones even though we don't
-  // loop over them.
-  const processedIds = new Map<ExcalidrawElement["id"], true>();
-  const groupIdMap = new Map();
-  const duplicatedElements: ExcalidrawElement[] = [];
-  const origElements: ExcalidrawElement[] = [];
-  const origIdToDuplicateId = new Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement["id"]
-  >();
-  const duplicateIdToOrigElement = new Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement
-  >();
-  const duplicateElementsMap = new Map<string, ExcalidrawElement>();
-  const elementsMap = arrayToMap(elements) as ElementsMap;
-  const _idsOfElementsToDuplicate =
-    opts.type === "in-place"
-      ? opts.idsOfElementsToDuplicate
-      : new Map(elements.map((el) => [el.id, el]));
-
-  // For sanity
-  if (opts.type === "in-place") {
-    for (const groupId of Object.keys(opts.appState.selectedGroupIds)) {
-      elements
-        .filter((el) => el.groupIds?.includes(groupId))
-        .forEach((el) => _idsOfElementsToDuplicate.set(el.id, el));
-    }
-  }
-
-  elements = normalizeElementOrder(elements);
-
-  const elementsWithDuplicates: ExcalidrawElement[] = elements.slice();
-
-  // helper functions
-  // -------------------------------------------------------------------------
-
-  // Used for the heavy lifing of copying a single element, a group of elements
-  // an element with bound text etc.
-  const copyElements = <T extends ExcalidrawElement | ExcalidrawElement[]>(
-    element: T,
-  ): T extends ExcalidrawElement[]
-    ? ExcalidrawElement[]
-    : ExcalidrawElement | null => {
-    const elements = castArray(element);
-
-    const _newElements = elements.reduce(
-      (acc: ExcalidrawElement[], element) => {
-        if (processedIds.has(element.id)) {
-          return acc;
-        }
-
-        processedIds.set(element.id, true);
-
-        const newElement = duplicateElement(
-          appState.editingGroupId,
-          groupIdMap,
-          element,
-          opts.randomizeSeed,
-        );
-
-        processedIds.set(newElement.id, true);
-
-        duplicateElementsMap.set(newElement.id, newElement);
-        origIdToDuplicateId.set(element.id, newElement.id);
-        duplicateIdToOrigElement.set(newElement.id, element);
-
-        origElements.push(element);
-        duplicatedElements.push(newElement);
-
-        acc.push(newElement);
-        return acc;
-      },
-      [],
-    );
-
-    return (
-      Array.isArray(element) ? _newElements : _newElements[0] || null
-    ) as T extends ExcalidrawElement[]
-      ? ExcalidrawElement[]
-      : ExcalidrawElement | null;
-  };
-
-  // Helper to position cloned elements in the Z-order the product needs it
-  const insertBeforeOrAfterIndex = (
-    index: number,
-    elements: ExcalidrawElement | null | ExcalidrawElement[],
-  ) => {
-    if (!elements) {
-      return;
-    }
-
-    if (index > elementsWithDuplicates.length - 1) {
-      elementsWithDuplicates.push(...castArray(elements));
-      return;
-    }
-
-    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
-  };
-
-  const frameIdsToDuplicate = new Set(
-    elements
-      .filter(
-        (el) => _idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
-      )
-      .map((el) => el.id),
-  );
-
-  for (const element of elements) {
-    if (processedIds.has(element.id)) {
-      continue;
-    }
-
-    if (!_idsOfElementsToDuplicate.has(element.id)) {
-      continue;
-    }
-
-    // groups
-    // -------------------------------------------------------------------------
-
-    const groupId = getSelectedGroupForElement(appState, element);
-    if (groupId) {
-      const groupElements = getElementsInGroup(elements, groupId).flatMap(
-        (element) =>
-          isFrameLikeElement(element)
-            ? [...getFrameChildren(elements, element.id), element]
-            : [element],
-      );
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return el.groupIds?.includes(groupId);
-      });
-
-      insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
-      continue;
-    }
-
-    // frame duplication
-    // -------------------------------------------------------------------------
-
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
-      continue;
-    }
-
-    if (isFrameLikeElement(element)) {
-      const frameId = element.id;
-
-      const frameChildren = getFrameChildren(elements, frameId);
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return el.frameId === frameId || el.id === frameId;
-      });
-
-      insertBeforeOrAfterIndex(
-        targetIndex,
-        copyElements([...frameChildren, element]),
-      );
-      continue;
-    }
-
-    // text container
-    // -------------------------------------------------------------------------
-
-    if (hasBoundTextElement(element)) {
-      const boundTextElement = getBoundTextElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return (
-          el.id === element.id ||
-          ("containerId" in el && el.containerId === element.id)
-        );
-      });
-
-      if (boundTextElement) {
-        insertBeforeOrAfterIndex(
-          targetIndex,
-          copyElements([element, boundTextElement]),
-        );
-      } else {
-        insertBeforeOrAfterIndex(targetIndex, copyElements(element));
-      }
-
-      continue;
-    }
-
-    if (isBoundToContainer(element)) {
-      const container = getContainerElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return el.id === element.id || el.id === container?.id;
-      });
-
-      if (container) {
-        insertBeforeOrAfterIndex(
-          targetIndex,
-          copyElements([container, element]),
-        );
-      } else {
-        insertBeforeOrAfterIndex(targetIndex, copyElements(element));
-      }
-
-      continue;
-    }
-
-    // default duplication (regular elements)
-    // -------------------------------------------------------------------------
-
-    insertBeforeOrAfterIndex(
-      findLastIndex(elementsWithDuplicates, (el) => el.id === element.id),
-      copyElements(element),
-    );
-  }
-
-  // ---------------------------------------------------------------------------
-
-  fixDuplicatedBindingsAfterDuplication(
-    duplicatedElements,
-    origIdToDuplicateId,
-    duplicateElementsMap as NonDeletedSceneElementsMap,
-  );
-
-  bindElementsToFramesAfterDuplication(
-    elementsWithDuplicates,
-    origElements,
-    origIdToDuplicateId,
-  );
-
-  if (opts.overrides) {
-    for (const duplicateElement of duplicatedElements) {
-      const origElement = duplicateIdToOrigElement.get(duplicateElement.id);
-      if (origElement) {
-        Object.assign(
-          duplicateElement,
-          opts.overrides({
-            duplicateElement,
-            origElement,
-            origIdToDuplicateId,
-          }),
-        );
-      }
-    }
-  }
-
-  return {
-    duplicatedElements,
-    duplicateElementsMap,
-    elementsWithDuplicates,
-    origIdToDuplicateId,
-  };
-};
-
-// Simplified deep clone for the purpose of cloning ExcalidrawElement.
-//
-// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
-// Typed arrays and other non-null objects.
-//
-// Adapted from https://github.com/lukeed/klona
-//
-// The reason for `deepCopyElement()` wrapper is type safety (only allow
-// passing ExcalidrawElement as the top-level argument).
-const _deepCopyElement = (val: any, depth: number = 0) => {
-  // only clone non-primitives
-  if (val == null || typeof val !== "object") {
-    return val;
-  }
-
-  const objectType = Object.prototype.toString.call(val);
-
-  if (objectType === "[object Object]") {
-    const tmp =
-      typeof val.constructor === "function"
-        ? Object.create(Object.getPrototypeOf(val))
-        : {};
-    for (const key in val) {
-      if (val.hasOwnProperty(key)) {
-        // don't copy non-serializable objects like these caches. They'll be
-        // populated when the element is rendered.
-        if (depth === 0 && (key === "shape" || key === "canvas")) {
-          continue;
-        }
-        tmp[key] = _deepCopyElement(val[key], depth + 1);
-      }
-    }
-    return tmp;
-  }
-
-  if (Array.isArray(val)) {
-    let k = val.length;
-    const arr = new Array(k);
-    while (k--) {
-      arr[k] = _deepCopyElement(val[k], depth + 1);
-    }
-    return arr;
-  }
-
-  // we're not cloning non-array & non-plain-object objects because we
-  // don't support them on excalidraw elements yet. If we do, we need to make
-  // sure we start cloning them, so let's warn about it.
-  if (import.meta.env.DEV) {
-    if (
-      objectType !== "[object Object]" &&
-      objectType !== "[object Array]" &&
-      objectType.startsWith("[object ")
-    ) {
-      console.warn(
-        `_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`,
-      );
-    }
-  }
-
-  return val;
-};
-
-/**
- * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or
- * any value. The purpose is to to break object references for immutability
- * reasons, whenever we want to keep the original element, but ensure it's not
- * mutated.
- *
- * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
- * Typed arrays and other non-null objects.
- */
-export const deepCopyElement = <T extends ExcalidrawElement>(
-  val: T,
-): Mutable<T> => {
-  return _deepCopyElement(val);
-};
-
-const __test__defineOrigId = (clonedObj: object, origId: string) => {
-  Object.defineProperty(clonedObj, ORIG_ID, {
-    value: origId,
-    writable: false,
-    enumerable: false,
-  });
-};

packages/element/src/heading.ts

@@ -1,282 +0,0 @@
-import { invariant, isDevEnv, isTestEnv } from "@excalidraw/common";
-
-import {
-  pointFrom,
-  pointFromVector,
-  pointRotateRads,
-  pointScaleFromOrigin,
-  pointsEqual,
-  triangleIncludesPoint,
-  vectorCross,
-  vectorFromPoint,
-  vectorScale,
-} from "@excalidraw/math";
-
-import type {
-  LocalPoint,
-  GlobalPoint,
-  Triangle,
-  Vector,
-} from "@excalidraw/math";
-
-import { getCenterForBounds, type Bounds } from "./bounds";
-
-import type { ExcalidrawBindableElement } from "./types";
-
-export const HEADING_RIGHT = [1, 0] as Heading;
-export const HEADING_DOWN = [0, 1] as Heading;
-export const HEADING_LEFT = [-1, 0] as Heading;
-export const HEADING_UP = [0, -1] as Heading;
-export type Heading = [1, 0] | [0, 1] | [-1, 0] | [0, -1];
-
-export const vectorToHeading = (vec: Vector): Heading => {
-  const [x, y] = vec;
-  const absX = Math.abs(x);
-  const absY = Math.abs(y);
-  if (x > absY) {
-    return HEADING_RIGHT;
-  } else if (x <= -absY) {
-    return HEADING_LEFT;
-  } else if (y > absX) {
-    return HEADING_DOWN;
-  }
-  return HEADING_UP;
-};
-
-export const headingForPoint = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  o: P,
-) => vectorToHeading(vectorFromPoint<P>(p, o));
-
-export const headingForPointIsHorizontal = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  o: P,
-) => headingIsHorizontal(headingForPoint<P>(p, o));
-
-export const compareHeading = (a: Heading, b: Heading) =>
-  a[0] === b[0] && a[1] === b[1];
-
-export const headingIsHorizontal = (a: Heading) =>
-  compareHeading(a, HEADING_RIGHT) || compareHeading(a, HEADING_LEFT);
-
-export const headingIsVertical = (a: Heading) => !headingIsHorizontal(a);
-
-const headingForPointFromDiamondElement = (
-  element: Readonly<ExcalidrawBindableElement>,
-  aabb: Readonly<Bounds>,
-  point: Readonly<GlobalPoint>,
-): Heading => {
-  const midPoint = getCenterForBounds(aabb);
-
-  if (isDevEnv() || isTestEnv()) {
-    invariant(
-      element.width > 0 && element.height > 0,
-      "Diamond element has no width or height",
-    );
-    invariant(
-      !pointsEqual(midPoint, point),
-      "The point is too close to the element mid point to determine heading",
-    );
-  }
-
-  const SHRINK = 0.95; // Rounded elements tolerance
-  const top = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-  const right = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(
-            element.x + element.width,
-            element.y + element.height / 2,
-          ),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-  const bottom = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(
-            element.x + element.width / 2,
-            element.y + element.height,
-          ),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-  const left = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-
-  // Corners
-  if (
-    vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, right)) <=
-      0 &&
-    vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, left)) > 0
-  ) {
-    return headingForPoint(top, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, right),
-      vectorFromPoint(right, bottom),
-    ) <= 0 &&
-    vectorCross(vectorFromPoint(point, right), vectorFromPoint(right, top)) > 0
-  ) {
-    return headingForPoint(right, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, bottom),
-      vectorFromPoint(bottom, left),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, bottom),
-      vectorFromPoint(bottom, right),
-    ) > 0
-  ) {
-    return headingForPoint(bottom, midPoint);
-  } else if (
-    vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, top)) <=
-      0 &&
-    vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, bottom)) > 0
-  ) {
-    return headingForPoint(left, midPoint);
-  }
-
-  // Sides
-  if (
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(top, midPoint),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(right, midPoint),
-    ) > 0
-  ) {
-    const p = element.width > element.height ? top : right;
-    return headingForPoint(p, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(right, midPoint),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(bottom, midPoint),
-    ) > 0
-  ) {
-    const p = element.width > element.height ? bottom : right;
-    return headingForPoint(p, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(bottom, midPoint),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(left, midPoint),
-    ) > 0
-  ) {
-    const p = element.width > element.height ? bottom : left;
-    return headingForPoint(p, midPoint);
-  }
-
-  const p = element.width > element.height ? top : left;
-  return headingForPoint(p, midPoint);
-};
-
-// Gets the heading for the point by creating a bounding box around the rotated
-// close fitting bounding box, then creating 4 search cones around the center of
-// the external bbox.
-export const headingForPointFromElement = <Point extends GlobalPoint>(
-  element: Readonly<ExcalidrawBindableElement>,
-  aabb: Readonly<Bounds>,
-  p: Readonly<Point>,
-): Heading => {
-  const SEARCH_CONE_MULTIPLIER = 2;
-
-  const midPoint = getCenterForBounds(aabb);
-
-  if (element.type === "diamond") {
-    return headingForPointFromDiamondElement(element, aabb, p);
-  }
-
-  const topLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[1]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-  const topRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[1]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-  const bottomLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[3]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-  const bottomRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[3]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-
-  return triangleIncludesPoint<Point>(
-    [topLeft, topRight, midPoint] as Triangle<Point>,
-    p,
-  )
-    ? HEADING_UP
-    : triangleIncludesPoint<Point>(
-        [topRight, bottomRight, midPoint] as Triangle<Point>,
-        p,
-      )
-    ? HEADING_RIGHT
-    : triangleIncludesPoint<Point>(
-        [bottomRight, bottomLeft, midPoint] as Triangle<Point>,
-        p,
-      )
-    ? HEADING_DOWN
-    : HEADING_LEFT;
-};
-
-export const flipHeading = (h: Heading): Heading =>
-  [
-    h[0] === 0 ? 0 : h[0] > 0 ? -1 : 1,
-    h[1] === 0 ? 0 : h[1] > 0 ? -1 : 1,
-  ] as Heading;

packages/element/src/store.ts

@@ -1,972 +0,0 @@
-import {
-  assertNever,
-  COLOR_PALETTE,
-  isDevEnv,
-  isTestEnv,
-  randomId,
-  Emitter,
-  toIterable,
-} from "@excalidraw/common";
-
-import type App from "@excalidraw/excalidraw/components/App";
-
-import type { DTO, ValueOf } from "@excalidraw/common/utility-types";
-
-import type { AppState, ObservedAppState } from "@excalidraw/excalidraw/types";
-
-import { deepCopyElement } from "./duplicate";
-import { newElementWith } from "./mutateElement";
-
-import { ElementsDelta, AppStateDelta, Delta } from "./delta";
-
-import { hashElementsVersion, hashString } from "./index";
-
-import type { OrderedExcalidrawElement, SceneElementsMap } from "./types";
-
-export const CaptureUpdateAction = {
-  /**
-   * Immediately undoable.
-   *
-   * Use for updates which should be captured.
-   * Should be used for most of the local updates, except ephemerals such as dragging or resizing.
-   *
-   * These updates will _immediately_ make it to the local undo / redo stacks.
-   */
-  IMMEDIATELY: "IMMEDIATELY",
-  /**
-   * Never undoable.
-   *
-   * Use for updates which should never be recorded, such as remote updates
-   * or scene initialization.
-   *
-   * These updates will _never_ make it to the local undo / redo stacks.
-   */
-  NEVER: "NEVER",
-  /**
-   * Eventually undoable.
-   *
-   * Use for updates which should not be captured immediately - likely
-   * exceptions which are part of some async multi-step process. Otherwise, all
-   * such updates would end up being captured with the next
-   * `CaptureUpdateAction.IMMEDIATELY` - triggered either by the next `updateScene`
-   * or internally by the editor.
-   *
-   * These updates will _eventually_ make it to the local undo / redo stacks.
-   */
-  EVENTUALLY: "EVENTUALLY",
-} as const;
-
-export type CaptureUpdateActionType = ValueOf<typeof CaptureUpdateAction>;
-
-type MicroActionsQueue = (() => void)[];
-
-/**
- * Store which captures the observed changes and emits them as `StoreIncrement` events.
- */
-export class Store {
-  // internally used by history
-  public readonly onDurableIncrementEmitter = new Emitter<[DurableIncrement]>();
-  public readonly onStoreIncrementEmitter = new Emitter<
-    [DurableIncrement | EphemeralIncrement]
-  >();
-
-  private scheduledMacroActions: Set<CaptureUpdateActionType> = new Set();
-  private scheduledMicroActions: MicroActionsQueue = [];
-
-  private _snapshot = StoreSnapshot.empty();
-
-  public get snapshot() {
-    return this._snapshot;
-  }
-
-  public set snapshot(snapshot: StoreSnapshot) {
-    this._snapshot = snapshot;
-  }
-
-  constructor(private readonly app: App) {}
-
-  public scheduleAction(action: CaptureUpdateActionType) {
-    this.scheduledMacroActions.add(action);
-    this.satisfiesScheduledActionsInvariant();
-  }
-
-  /**
-   * Use to schedule a delta calculation, which will consquentially be emitted as `DurableStoreIncrement` and pushed in the undo stack.
-   */
-  // TODO: Suspicious that this is called so many places. Seems error-prone.
-  public scheduleCapture() {
-    this.scheduleAction(CaptureUpdateAction.IMMEDIATELY);
-  }
-
-  /**
-   * Schedule special "micro" actions, to-be executed before the next commit, before it executes a scheduled "macro" action.
-   */
-  public scheduleMicroAction(
-    params:
-      | {
-          action: CaptureUpdateActionType;
-          elements: SceneElementsMap | undefined;
-          appState: AppState | ObservedAppState | undefined;
-        }
-      | {
-          action: typeof CaptureUpdateAction.IMMEDIATELY;
-          change: StoreChange;
-          delta: StoreDelta;
-        }
-      | {
-          action:
-            | typeof CaptureUpdateAction.NEVER
-            | typeof CaptureUpdateAction.EVENTUALLY;
-          change: StoreChange;
-        },
-  ) {
-    const { action } = params;
-
-    let change: StoreChange;
-
-    if ("change" in params) {
-      change = params.change;
-    } else {
-      // immediately create an immutable change of the scheduled updates,
-      // compared to the current state, so that they won't mutate later on during batching
-      const currentSnapshot = StoreSnapshot.create(
-        this.app.scene.getElementsMapIncludingDeleted(),
-        this.app.state,
-      );
-      const scheduledSnapshot = currentSnapshot.maybeClone(
-        action,
-        params.elements,
-        params.appState,
-      );
-
-      change = StoreChange.create(currentSnapshot, scheduledSnapshot);
-    }
-
-    const delta = "delta" in params ? params.delta : undefined;
-
-    this.scheduledMicroActions.push(() =>
-      this.processAction({
-        action,
-        change,
-        delta,
-      }),
-    );
-  }
-
-  /**
-   * Performs the incoming `CaptureUpdateAction` and emits the corresponding `StoreIncrement`.
-   * Emits `DurableStoreIncrement` when action is "capture", emits `EphemeralStoreIncrement` otherwise.
-   *
-   * @emits StoreIncrement
-   */
-  public commit(
-    elements: SceneElementsMap | undefined,
-    appState: AppState | ObservedAppState | undefined,
-  ): void {
-    // execute all scheduled micro actions first
-    // similar to microTasks, there can be many
-    this.flushMicroActions();
-
-    try {
-      // execute a single scheduled "macro" function
-      // similar to macro tasks, there can be only one within a single commit (loop)
-      const action = this.getScheduledMacroAction();
-      this.processAction({ action, elements, appState });
-    } finally {
-      this.satisfiesScheduledActionsInvariant();
-      // defensively reset all scheduled "macro" actions, possibly cleans up other runtime garbage
-      this.scheduledMacroActions = new Set();
-    }
-  }
-
-  /**
-   * Clears the store instance.
-   */
-  public clear(): void {
-    this.snapshot = StoreSnapshot.empty();
-    this.scheduledMacroActions = new Set();
-  }
-
-  /**
-   * Performs delta & change calculation and emits a durable increment.
-   *
-   * @emits StoreIncrement.
-   */
-  private emitDurableIncrement(
-    snapshot: StoreSnapshot,
-    change: StoreChange | undefined = undefined,
-    delta: StoreDelta | undefined = undefined,
-  ) {
-    const prevSnapshot = this.snapshot;
-
-    let storeChange: StoreChange;
-    let storeDelta: StoreDelta;
-
-    if (change) {
-      storeChange = change;
-    } else {
-      storeChange = StoreChange.create(prevSnapshot, snapshot);
-    }
-
-    if (delta) {
-      // we might have the delta already (i.e. when applying history entry), thus we don't need to calculate it again
-      // using the same instance, since in history we have a check against `HistoryEntry`, so that we don't re-record the same delta again
-      storeDelta = delta;
-    } else {
-      // calculate the deltas based on the previous and next snapshot
-      const elementsDelta = snapshot.metadata.didElementsChange
-        ? ElementsDelta.calculate(prevSnapshot.elements, snapshot.elements)
-        : ElementsDelta.empty();
-
-      const appStateDelta = snapshot.metadata.didAppStateChange
-        ? AppStateDelta.calculate(prevSnapshot.appState, snapshot.appState)
-        : AppStateDelta.empty();
-
-      storeDelta = StoreDelta.create(elementsDelta, appStateDelta);
-    }
-
-    if (!storeDelta.isEmpty()) {
-      const increment = new DurableIncrement(storeChange, storeDelta);
-
-      // Notify listeners with the increment
-      this.onDurableIncrementEmitter.trigger(increment);
-      this.onStoreIncrementEmitter.trigger(increment);
-    }
-  }
-
-  /**
-   * Performs change calculation and emits an ephemeral increment.
-   *
-   * @emits EphemeralStoreIncrement
-   */
-  private emitEphemeralIncrement(
-    snapshot: StoreSnapshot,
-    change: StoreChange | undefined = undefined,
-  ) {
-    let storeChange: StoreChange;
-
-    if (change) {
-      storeChange = change;
-    } else {
-      const prevSnapshot = this.snapshot;
-      storeChange = StoreChange.create(prevSnapshot, snapshot);
-    }
-
-    const increment = new EphemeralIncrement(storeChange);
-
-    // Notify listeners with the increment
-    this.onStoreIncrementEmitter.trigger(increment);
-  }
-
-  private applyChangeToSnapshot(change: StoreChange) {
-    const prevSnapshot = this.snapshot;
-    const nextSnapshot = this.snapshot.applyChange(change);
-
-    if (prevSnapshot === nextSnapshot) {
-      return null;
-    }
-
-    return nextSnapshot;
-  }
-
-  /**
-   * Clones the snapshot if there are changes detected.
-   */
-  private maybeCloneSnapshot(
-    action: CaptureUpdateActionType,
-    elements: SceneElementsMap | undefined,
-    appState: AppState | ObservedAppState | undefined,
-  ) {
-    if (!elements && !appState) {
-      return null;
-    }
-
-    const prevSnapshot = this.snapshot;
-    const nextSnapshot = this.snapshot.maybeClone(action, elements, appState);
-
-    if (prevSnapshot === nextSnapshot) {
-      return null;
-    }
-
-    return nextSnapshot;
-  }
-
-  private flushMicroActions() {
-    for (const microAction of this.scheduledMicroActions) {
-      try {
-        microAction();
-      } catch (error) {
-        console.error(`Failed to execute scheduled micro action`, error);
-      }
-    }
-
-    this.scheduledMicroActions = [];
-  }
-
-  private processAction(
-    params:
-      | {
-          action: CaptureUpdateActionType;
-          elements: SceneElementsMap | undefined;
-          appState: AppState | ObservedAppState | undefined;
-        }
-      | {
-          action: CaptureUpdateActionType;
-          change: StoreChange;
-          delta: StoreDelta | undefined;
-        },
-  ) {
-    const { action } = params;
-
-    // perf. optimisation, since "EVENTUALLY" does not update the snapshot,
-    // so if nobody is listening for increments, we don't need to even clone the snapshot
-    // as it's only needed for `StoreChange` computation inside `EphemeralIncrement`
-    if (
-      action === CaptureUpdateAction.EVENTUALLY &&
-      !this.onStoreIncrementEmitter.subscribers.length
-    ) {
-      return;
-    }
-
-    let nextSnapshot: StoreSnapshot | null;
-
-    if ("change" in params) {
-      nextSnapshot = this.applyChangeToSnapshot(params.change);
-    } else {
-      nextSnapshot = this.maybeCloneSnapshot(
-        action,
-        params.elements,
-        params.appState,
-      );
-    }
-
-    if (!nextSnapshot) {
-      // don't continue if there is not change detected
-      return;
-    }
-
-    const change = "change" in params ? params.change : undefined;
-    const delta = "delta" in params ? params.delta : undefined;
-
-    try {
-      switch (action) {
-        // only immediately emits a durable increment
-        case CaptureUpdateAction.IMMEDIATELY:
-          this.emitDurableIncrement(nextSnapshot, change, delta);
-          break;
-        // both never and eventually emit an ephemeral increment
-        case CaptureUpdateAction.NEVER:
-        case CaptureUpdateAction.EVENTUALLY:
-          this.emitEphemeralIncrement(nextSnapshot, change);
-          break;
-        default:
-          assertNever(action, `Unknown store action`);
-      }
-    } finally {
-      // update the snapshot no-matter what, as it would mess up with the next action
-      switch (action) {
-        // both immediately and never update the snapshot, unlike eventually
-        case CaptureUpdateAction.IMMEDIATELY:
-        case CaptureUpdateAction.NEVER:
-          this.snapshot = nextSnapshot;
-          break;
-      }
-    }
-  }
-
-  /**
-   * Returns the scheduled macro action.
-   */
-  private getScheduledMacroAction() {
-    let scheduledAction: CaptureUpdateActionType;
-
-    if (this.scheduledMacroActions.has(CaptureUpdateAction.IMMEDIATELY)) {
-      // Capture has a precedence over update, since it also performs snapshot update
-      scheduledAction = CaptureUpdateAction.IMMEDIATELY;
-    } else if (this.scheduledMacroActions.has(CaptureUpdateAction.NEVER)) {
-      // Update has a precedence over none, since it also emits an (ephemeral) increment
-      scheduledAction = CaptureUpdateAction.NEVER;
-    } else {
-      // Default is to emit ephemeral increment and don't update the snapshot
-      scheduledAction = CaptureUpdateAction.EVENTUALLY;
-    }
-
-    return scheduledAction;
-  }
-
-  /**
-   * Ensures that the scheduled actions invariant is satisfied.
-   */
-  private satisfiesScheduledActionsInvariant() {
-    if (
-      !(
-        this.scheduledMacroActions.size >= 0 &&
-        this.scheduledMacroActions.size <=
-          Object.keys(CaptureUpdateAction).length
-      )
-    ) {
-      const message = `There can be at most three store actions scheduled at the same time, but there are "${this.scheduledMacroActions.size}".`;
-      console.error(message, this.scheduledMacroActions.values());
-
-      if (isTestEnv() || isDevEnv()) {
-        throw new Error(message);
-      }
-    }
-  }
-}
-
-/**
- * Repsents a change to the store containing changed elements and appState.
- */
-export class StoreChange {
-  // so figuring out what has changed should ideally be just quick reference checks
-  // TODO: we might need to have binary files here as well, in order to be drop-in replacement for `onChange`
-  private constructor(
-    public readonly elements: Record<string, OrderedExcalidrawElement>,
-    public readonly appState: Partial<ObservedAppState>,
-  ) {}
-
-  public static create(
-    prevSnapshot: StoreSnapshot,
-    nextSnapshot: StoreSnapshot,
-  ) {
-    const changedElements = nextSnapshot.getChangedElements(prevSnapshot);
-    const changedAppState = nextSnapshot.getChangedAppState(prevSnapshot);
-
-    return new StoreChange(changedElements, changedAppState);
-  }
-}
-
-/**
- * Encpasulates any change to the store (durable or ephemeral).
- */
-export abstract class StoreIncrement {
-  protected constructor(
-    public readonly type: "durable" | "ephemeral",
-    public readonly change: StoreChange,
-  ) {}
-
-  public static isDurable(
-    increment: StoreIncrement,
-  ): increment is DurableIncrement {
-    return increment.type === "durable";
-  }
-
-  public static isEphemeral(
-    increment: StoreIncrement,
-  ): increment is EphemeralIncrement {
-    return increment.type === "ephemeral";
-  }
-}
-
-/**
- * Represents a durable change to the store.
- */
-export class DurableIncrement extends StoreIncrement {
-  constructor(
-    public readonly change: StoreChange,
-    public readonly delta: StoreDelta,
-  ) {
-    super("durable", change);
-  }
-}
-
-/**
- * Represents an ephemeral change to the store.
- */
-export class EphemeralIncrement extends StoreIncrement {
-  constructor(public readonly change: StoreChange) {
-    super("ephemeral", change);
-  }
-}
-
-/**
- * Represents a captured delta by the Store.
- */
-export class StoreDelta {
-  protected constructor(
-    public readonly id: string,
-    public readonly elements: ElementsDelta,
-    public readonly appState: AppStateDelta,
-  ) {}
-
-  /**
-   * Create a new instance of `StoreDelta`.
-   */
-  public static create(
-    elements: ElementsDelta,
-    appState: AppStateDelta,
-    opts: {
-      id: string;
-    } = {
-      id: randomId(),
-    },
-  ) {
-    return new this(opts.id, elements, appState);
-  }
-
-  /**
-   * Restore a store delta instance from a DTO.
-   */
-  public static restore(storeDeltaDTO: DTO<StoreDelta>) {
-    const { id, elements, appState } = storeDeltaDTO;
-    return new this(
-      id,
-      ElementsDelta.restore(elements),
-      AppStateDelta.restore(appState),
-    );
-  }
-
-  /**
-   * Parse and load the delta from the remote payload.
-   */
-  public static load({
-    id,
-    elements: { added, removed, updated },
-  }: DTO<StoreDelta>) {
-    const elements = ElementsDelta.create(added, removed, updated, {
-      shouldRedistribute: false,
-    });
-
-    return new this(id, elements, AppStateDelta.empty());
-  }
-
-  /**
-   * Inverse store delta, creates new instance of `StoreDelta`.
-   */
-  public static inverse(delta: StoreDelta): StoreDelta {
-    return this.create(delta.elements.inverse(), delta.appState.inverse());
-  }
-
-  /**
-   * Apply latest (remote) changes to the delta, creates new instance of `StoreDelta`.
-   */
-  public static applyLatestChanges(
-    delta: StoreDelta,
-    elements: SceneElementsMap,
-    modifierOptions: "deleted" | "inserted",
-  ): StoreDelta {
-    return this.create(
-      delta.elements.applyLatestChanges(elements, modifierOptions),
-      delta.appState,
-      {
-        id: delta.id,
-      },
-    );
-  }
-
-  /**
-   * Apply the delta to the passed elements and appState, does not modify the snapshot.
-   */
-  public static applyTo(
-    delta: StoreDelta,
-    elements: SceneElementsMap,
-    appState: AppState,
-    prevSnapshot: StoreSnapshot = StoreSnapshot.empty(),
-  ): [SceneElementsMap, AppState, boolean] {
-    const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
-      elements,
-      prevSnapshot.elements,
-    );
-
-    const [nextAppState, appStateContainsVisibleChange] =
-      delta.appState.applyTo(appState, nextElements);
-
-    const appliedVisibleChanges =
-      elementsContainVisibleChange || appStateContainsVisibleChange;
-
-    return [nextElements, nextAppState, appliedVisibleChanges];
-  }
-
-  public isEmpty() {
-    return this.elements.isEmpty() && this.appState.isEmpty();
-  }
-}
-
-/**
- * Represents a snapshot of the captured or updated changes in the store,
- * used for producing deltas and emitting `DurableStoreIncrement`s.
- */
-export class StoreSnapshot {
-  private _lastChangedElementsHash: number = 0;
-  private _lastChangedAppStateHash: number = 0;
-
-  private constructor(
-    public readonly elements: SceneElementsMap,
-    public readonly appState: ObservedAppState,
-    public readonly metadata: {
-      didElementsChange: boolean;
-      didAppStateChange: boolean;
-      isEmpty?: boolean;
-    } = {
-      didElementsChange: false,
-      didAppStateChange: false,
-      isEmpty: false,
-    },
-  ) {}
-
-  public static create(
-    elements: SceneElementsMap,
-    appState: AppState | ObservedAppState,
-    metadata: {
-      didElementsChange: boolean;
-      didAppStateChange: boolean;
-    } = {
-      didElementsChange: false,
-      didAppStateChange: false,
-    },
-  ) {
-    return new StoreSnapshot(
-      elements,
-      isObservedAppState(appState) ? appState : getObservedAppState(appState),
-      metadata,
-    );
-  }
-
-  public static empty() {
-    return new StoreSnapshot(
-      new Map() as SceneElementsMap,
-      getDefaultObservedAppState(),
-      {
-        didElementsChange: false,
-        didAppStateChange: false,
-        isEmpty: true,
-      },
-    );
-  }
-
-  public getChangedElements(prevSnapshot: StoreSnapshot) {
-    const changedElements: Record<string, OrderedExcalidrawElement> = {};
-
-    for (const prevElement of toIterable(prevSnapshot.elements)) {
-      const nextElement = this.elements.get(prevElement.id);
-
-      if (!nextElement) {
-        changedElements[prevElement.id] = newElementWith(prevElement, {
-          isDeleted: true,
-        });
-      }
-    }
-
-    for (const nextElement of toIterable(this.elements)) {
-      // Due to the structural clone inside `maybeClone`, we can perform just these reference checks
-      if (prevSnapshot.elements.get(nextElement.id) !== nextElement) {
-        changedElements[nextElement.id] = nextElement;
-      }
-    }
-
-    return changedElements;
-  }
-
-  public getChangedAppState(
-    prevSnapshot: StoreSnapshot,
-  ): Partial<ObservedAppState> {
-    return Delta.getRightDifferences(
-      prevSnapshot.appState,
-      this.appState,
-    ).reduce(
-      (acc, key) =>
-        Object.assign(acc, {
-          [key]: this.appState[key as keyof ObservedAppState],
-        }),
-      {} as Partial<ObservedAppState>,
-    );
-  }
-
-  public isEmpty() {
-    return this.metadata.isEmpty;
-  }
-
-  /**
-   * Apply the change and return a new snapshot instance.
-   */
-  public applyChange(change: StoreChange): StoreSnapshot {
-    const nextElements = new Map(this.elements) as SceneElementsMap;
-
-    for (const [id, changedElement] of Object.entries(change.elements)) {
-      nextElements.set(id, changedElement);
-    }
-
-    const nextAppState = Object.assign(
-      {},
-      this.appState,
-      change.appState,
-    ) as ObservedAppState;
-
-    return StoreSnapshot.create(nextElements, nextAppState, {
-      // by default we assume that change is different from what we have in the snapshot
-      // so that we trigger the delta calculation and if it isn't different, delta will be empty
-      didElementsChange: Object.keys(change.elements).length > 0,
-      didAppStateChange: Object.keys(change.appState).length > 0,
-    });
-  }
-
-  /**
-   * Efficiently clone the existing snapshot, only if we detected changes.
-   *
-   * @returns same instance if there are no changes detected, new instance otherwise.
-   */
-  public maybeClone(
-    action: CaptureUpdateActionType,
-    elements: SceneElementsMap | undefined,
-    appState: AppState | ObservedAppState | undefined,
-  ) {
-    const options = {
-      shouldCompareHashes: false,
-    };
-
-    if (action === CaptureUpdateAction.EVENTUALLY) {
-      // actions that do not update the snapshot immediately, must be additionally checked for changes against the latest hash
-      // as we are always comparing against the latest snapshot, so they would emit elements or appState as changed on every component update
-      // instead of just the first time the elements or appState actually changed
-      options.shouldCompareHashes = true;
-    }
-
-    const nextElementsSnapshot = this.maybeCreateElementsSnapshot(
-      elements,
-      options,
-    );
-    const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(
-      appState,
-      options,
-    );
-
-    let didElementsChange = false;
-    let didAppStateChange = false;
-
-    if (this.elements !== nextElementsSnapshot) {
-      didElementsChange = true;
-    }
-
-    if (this.appState !== nextAppStateSnapshot) {
-      didAppStateChange = true;
-    }
-
-    if (!didElementsChange && !didAppStateChange) {
-      return this;
-    }
-
-    const snapshot = new StoreSnapshot(
-      nextElementsSnapshot,
-      nextAppStateSnapshot,
-      {
-        didElementsChange,
-        didAppStateChange,
-      },
-    );
-
-    return snapshot;
-  }
-
-  private maybeCreateAppStateSnapshot(
-    appState: AppState | ObservedAppState | undefined,
-    options: {
-      shouldCompareHashes: boolean;
-    } = {
-      shouldCompareHashes: false,
-    },
-  ): ObservedAppState {
-    if (!appState) {
-      return this.appState;
-    }
-
-    // Not watching over everything from the app state, just the relevant props
-    const nextAppStateSnapshot = !isObservedAppState(appState)
-      ? getObservedAppState(appState)
-      : appState;
-
-    const didAppStateChange = this.detectChangedAppState(
-      nextAppStateSnapshot,
-      options,
-    );
-
-    if (!didAppStateChange) {
-      return this.appState;
-    }
-
-    return nextAppStateSnapshot;
-  }
-
-  private maybeCreateElementsSnapshot(
-    elements: SceneElementsMap | undefined,
-    options: {
-      shouldCompareHashes: boolean;
-    } = {
-      shouldCompareHashes: false,
-    },
-  ): SceneElementsMap {
-    if (!elements) {
-      return this.elements;
-    }
-
-    const changedElements = this.detectChangedElements(elements, options);
-
-    if (!changedElements?.size) {
-      return this.elements;
-    }
-
-    const elementsSnapshot = this.createElementsSnapshot(changedElements);
-    return elementsSnapshot;
-  }
-
-  private detectChangedAppState(
-    nextObservedAppState: ObservedAppState,
-    options: {
-      shouldCompareHashes: boolean;
-    } = {
-      shouldCompareHashes: false,
-    },
-  ): boolean | undefined {
-    if (this.appState === nextObservedAppState) {
-      return;
-    }
-
-    const didAppStateChange = Delta.isRightDifferent(
-      this.appState,
-      nextObservedAppState,
-    );
-
-    if (!didAppStateChange) {
-      return;
-    }
-
-    const changedAppStateHash = hashString(
-      JSON.stringify(nextObservedAppState),
-    );
-
-    if (
-      options.shouldCompareHashes &&
-      this._lastChangedAppStateHash === changedAppStateHash
-    ) {
-      return;
-    }
-
-    this._lastChangedAppStateHash = changedAppStateHash;
-
-    return didAppStateChange;
-  }
-
-  /**
-   * Detect if there any changed elements.
-   */
-  private detectChangedElements(
-    nextElements: SceneElementsMap,
-    options: {
-      shouldCompareHashes: boolean;
-    } = {
-      shouldCompareHashes: false,
-    },
-  ): SceneElementsMap | undefined {
-    if (this.elements === nextElements) {
-      return;
-    }
-
-    const changedElements: SceneElementsMap = new Map() as SceneElementsMap;
-
-    for (const prevElement of toIterable(this.elements)) {
-      const nextElement = nextElements.get(prevElement.id);
-
-      if (!nextElement) {
-        // element was deleted
-        changedElements.set(
-          prevElement.id,
-          newElementWith(prevElement, { isDeleted: true }),
-        );
-      }
-    }
-
-    for (const nextElement of toIterable(nextElements)) {
-      const prevElement = this.elements.get(nextElement.id);
-
-      if (
-        !prevElement || // element was added
-        prevElement.version < nextElement.version // element was updated
-      ) {
-        changedElements.set(nextElement.id, nextElement);
-      }
-    }
-
-    if (!changedElements.size) {
-      return;
-    }
-
-    const changedElementsHash = hashElementsVersion(changedElements);
-
-    if (
-      options.shouldCompareHashes &&
-      this._lastChangedElementsHash === changedElementsHash
-    ) {
-      return;
-    }
-
-    this._lastChangedElementsHash = changedElementsHash;
-
-    return changedElements;
-  }
-
-  /**
-   * Perform structural clone, deep cloning only elements that changed.
-   */
-  private createElementsSnapshot(changedElements: SceneElementsMap) {
-    const clonedElements = new Map() as SceneElementsMap;
-
-    for (const prevElement of toIterable(this.elements)) {
-      // Clone previous elements, never delete, in case nextElements would be just a subset of previous elements
-      // i.e. during collab, persist or whenenever isDeleted elements get cleared
-      clonedElements.set(prevElement.id, prevElement);
-    }
-
-    for (const changedElement of toIterable(changedElements)) {
-      // TODO: consider just creating new instance, once we can ensure that all reference properties on every element are immutable
-      // TODO: consider creating a lazy deep clone, having a one-time-usage proxy over the snapshotted element and deep cloning only if it gets mutated
-      clonedElements.set(changedElement.id, deepCopyElement(changedElement));
-    }
-
-    return clonedElements;
-  }
-}
-
-// hidden non-enumerable property for runtime checks
-const hiddenObservedAppStateProp = "__observedAppState";
-
-const getDefaultObservedAppState = (): ObservedAppState => {
-  return {
-    name: null,
-    editingGroupId: null,
-    viewBackgroundColor: COLOR_PALETTE.white,
-    selectedElementIds: {},
-    selectedGroupIds: {},
-    editingLinearElementId: null,
-    selectedLinearElementId: null,
-    croppingElementId: null,
-    activeLockedId: null,
-    lockedMultiSelections: {},
-  };
-};
-
-export const getObservedAppState = (appState: AppState): ObservedAppState => {
-  const observedAppState = {
-    name: appState.name,
-    editingGroupId: appState.editingGroupId,
-    viewBackgroundColor: appState.viewBackgroundColor,
-    selectedElementIds: appState.selectedElementIds,
-    selectedGroupIds: appState.selectedGroupIds,
-    editingLinearElementId: appState.editingLinearElement?.elementId || null,
-    selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
-    croppingElementId: appState.croppingElementId,
-    activeLockedId: appState.activeLockedId,
-    lockedMultiSelections: appState.lockedMultiSelections,
-  };
-
-  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
-    value: true,
-    enumerable: false,
-  });
-
-  return observedAppState;
-};
-
-const isObservedAppState = (
-  appState: AppState | ObservedAppState,
-): appState is ObservedAppState =>
-  !!Reflect.get(appState, hiddenObservedAppStateProp);

packages/element/tests/delta.test.tsx

@@ -1,149 +0,0 @@
-import type { ObservedAppState } from "@excalidraw/excalidraw/types";
-import type { LinearElementEditor } from "@excalidraw/element";
-
-import { AppStateDelta } from "../src/delta";
-
-describe("AppStateDelta", () => {
-  describe("ensure stable delta properties order", () => {
-    it("should maintain stable order for root properties", () => {
-      const name = "untitled scene";
-      const selectedLinearElementId = "id1" as LinearElementEditor["elementId"];
-
-      const commonAppState = {
-        viewBackgroundColor: "#ffffff",
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        editingGroupId: null,
-        croppingElementId: null,
-        editingLinearElementId: null,
-        lockedMultiSelections: {},
-        activeLockedId: null,
-      };
-
-      const prevAppState1: ObservedAppState = {
-        ...commonAppState,
-        name: "",
-        selectedLinearElementId: null,
-      };
-
-      const nextAppState1: ObservedAppState = {
-        ...commonAppState,
-        name,
-        selectedLinearElementId,
-      };
-
-      const prevAppState2: ObservedAppState = {
-        selectedLinearElementId: null,
-        name: "",
-        ...commonAppState,
-      };
-
-      const nextAppState2: ObservedAppState = {
-        selectedLinearElementId,
-        name,
-        ...commonAppState,
-      };
-
-      const delta1 = AppStateDelta.calculate(prevAppState1, nextAppState1);
-      const delta2 = AppStateDelta.calculate(prevAppState2, nextAppState2);
-
-      expect(JSON.stringify(delta1)).toBe(JSON.stringify(delta2));
-    });
-
-    it("should maintain stable order for selectedElementIds", () => {
-      const commonAppState = {
-        name: "",
-        viewBackgroundColor: "#ffffff",
-        selectedGroupIds: {},
-        editingGroupId: null,
-        croppingElementId: null,
-        selectedLinearElementId: null,
-        editingLinearElementId: null,
-        activeLockedId: null,
-        lockedMultiSelections: {},
-      };
-
-      const prevAppState1: ObservedAppState = {
-        ...commonAppState,
-        selectedElementIds: { id5: true, id2: true, id4: true },
-      };
-
-      const nextAppState1: ObservedAppState = {
-        ...commonAppState,
-        selectedElementIds: {
-          id1: true,
-          id2: true,
-          id3: true,
-        },
-      };
-
-      const prevAppState2: ObservedAppState = {
-        ...commonAppState,
-        selectedElementIds: { id4: true, id2: true, id5: true },
-      };
-
-      const nextAppState2: ObservedAppState = {
-        ...commonAppState,
-        selectedElementIds: {
-          id3: true,
-          id2: true,
-          id1: true,
-        },
-      };
-
-      const delta1 = AppStateDelta.calculate(prevAppState1, nextAppState1);
-      const delta2 = AppStateDelta.calculate(prevAppState2, nextAppState2);
-
-      expect(JSON.stringify(delta1)).toBe(JSON.stringify(delta2));
-    });
-
-    it("should maintain stable order for selectedGroupIds", () => {
-      const commonAppState = {
-        name: "",
-        viewBackgroundColor: "#ffffff",
-        selectedElementIds: {},
-        editingGroupId: null,
-        croppingElementId: null,
-        selectedLinearElementId: null,
-        editingLinearElementId: null,
-        activeLockedId: null,
-        lockedMultiSelections: {},
-      };
-
-      const prevAppState1: ObservedAppState = {
-        ...commonAppState,
-        selectedGroupIds: { id5: false, id2: true, id4: true, id0: true },
-      };
-
-      const nextAppState1: ObservedAppState = {
-        ...commonAppState,
-        selectedGroupIds: {
-          id0: true,
-          id1: true,
-          id2: false,
-          id3: true,
-        },
-      };
-
-      const prevAppState2: ObservedAppState = {
-        ...commonAppState,
-        selectedGroupIds: { id0: true, id4: true, id2: true, id5: false },
-      };
-
-      const nextAppState2: ObservedAppState = {
-        ...commonAppState,
-        selectedGroupIds: {
-          id3: true,
-          id2: false,
-          id1: true,
-          id0: true,
-        },
-      };
-
-      const delta1 = AppStateDelta.calculate(prevAppState1, nextAppState1);
-      const delta2 = AppStateDelta.calculate(prevAppState2, nextAppState2);
-
-      expect(JSON.stringify(delta1)).toBe(JSON.stringify(delta2));
-    });
-  });
-});

packages/element/tests/duplicate.test.tsx

@@ -1,851 +0,0 @@
-import { pointFrom } from "@excalidraw/math";
-
-import {
-  FONT_FAMILY,
-  ORIG_ID,
-  ROUNDNESS,
-  isPrimitive,
-} from "@excalidraw/common";
-
-import { Excalidraw, mutateElement } from "@excalidraw/excalidraw";
-
-import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions";
-
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-
-import { UI, Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
-
-import {
-  act,
-  assertElements,
-  getCloneByOrigId,
-  render,
-} from "@excalidraw/excalidraw/tests/test-utils";
-
-import type { LocalPoint } from "@excalidraw/math";
-
-import { duplicateElement, duplicateElements } from "../src/duplicate";
-
-import type { ExcalidrawLinearElement } from "../src/types";
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-
-const assertCloneObjects = (source: any, clone: any) => {
-  for (const key in clone) {
-    if (clone.hasOwnProperty(key) && !isPrimitive(clone[key])) {
-      expect(clone[key]).not.toBe(source[key]);
-      if (source[key]) {
-        assertCloneObjects(source[key], clone[key]);
-      }
-    }
-  }
-};
-
-describe("duplicating single elements", () => {
-  it("clones arrow element", () => {
-    const element = API.createElement({
-      type: "arrow",
-      x: 0,
-      y: 0,
-      strokeColor: "#000000",
-      backgroundColor: "transparent",
-      fillStyle: "hachure",
-      strokeWidth: 1,
-      strokeStyle: "solid",
-      roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-      roughness: 1,
-      opacity: 100,
-    });
-
-    // @ts-ignore
-    element.__proto__ = { hello: "world" };
-
-    mutateElement(element, new Map(), {
-      points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
-    });
-
-    const copy = duplicateElement(null, new Map(), element, true);
-
-    assertCloneObjects(element, copy);
-
-    // assert we clone the object's prototype
-    // @ts-ignore
-    expect(copy.__proto__).toEqual({ hello: "world" });
-    expect(copy.hasOwnProperty("hello")).toBe(false);
-
-    expect(copy.points).not.toBe(element.points);
-    expect(copy).not.toHaveProperty("shape");
-    expect(copy.id).not.toBe(element.id);
-    expect(typeof copy.id).toBe("string");
-    expect(copy.seed).not.toBe(element.seed);
-    expect(typeof copy.seed).toBe("number");
-    expect(copy).toEqual({
-      ...element,
-      id: copy.id,
-      seed: copy.seed,
-      version: copy.version,
-      versionNonce: copy.versionNonce,
-    });
-  });
-
-  it("clones text element", () => {
-    const element = API.createElement({
-      type: "text",
-      x: 0,
-      y: 0,
-      strokeColor: "#000000",
-      backgroundColor: "transparent",
-      fillStyle: "hachure",
-      strokeWidth: 1,
-      strokeStyle: "solid",
-      roundness: null,
-      roughness: 1,
-      opacity: 100,
-      text: "hello",
-      fontSize: 20,
-      fontFamily: FONT_FAMILY.Virgil,
-      textAlign: "left",
-      verticalAlign: "top",
-    });
-
-    const copy = duplicateElement(null, new Map(), element);
-
-    assertCloneObjects(element, copy);
-
-    expect(copy).not.toHaveProperty("points");
-    expect(copy).not.toHaveProperty("shape");
-    expect(copy.id).not.toBe(element.id);
-    expect(typeof copy.id).toBe("string");
-    expect(typeof copy.seed).toBe("number");
-  });
-});
-
-describe("duplicating multiple elements", () => {
-  it("duplicateElements should clone bindings", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      id: "rectangle1",
-      boundElements: [
-        { id: "arrow1", type: "arrow" },
-        { id: "arrow2", type: "arrow" },
-        { id: "text1", type: "text" },
-      ],
-    });
-
-    const text1 = API.createElement({
-      type: "text",
-      id: "text1",
-      containerId: "rectangle1",
-    });
-
-    const arrow1 = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-      boundElements: [{ id: "text2", type: "text" }],
-    });
-
-    const text2 = API.createElement({
-      type: "text",
-      id: "text2",
-      containerId: "arrow2",
-    });
-
-    // -------------------------------------------------------------------------
-
-    const origElements = [rectangle1, text1, arrow1, arrow2, text2] as const;
-    const { duplicatedElements } = duplicateElements({
-      type: "everything",
-      elements: origElements,
-    });
-
-    // generic id in-equality checks
-    // --------------------------------------------------------------------------
-    expect(origElements.map((e) => e.type)).toEqual(
-      duplicatedElements.map((e) => e.type),
-    );
-    origElements.forEach((origElement, idx) => {
-      const clonedElement = duplicatedElements[idx];
-      expect(origElement).toEqual(
-        expect.objectContaining({
-          id: expect.not.stringMatching(clonedElement.id),
-          type: clonedElement.type,
-        }),
-      );
-      if ("containerId" in origElement) {
-        expect(origElement.containerId).not.toBe(
-          (clonedElement as any).containerId,
-        );
-      }
-      if ("endBinding" in origElement) {
-        if (origElement.endBinding) {
-          expect(origElement.endBinding.elementId).not.toBe(
-            (clonedElement as any).endBinding?.elementId,
-          );
-        } else {
-          expect((clonedElement as any).endBinding).toBeNull();
-        }
-      }
-      if ("startBinding" in origElement) {
-        if (origElement.startBinding) {
-          expect(origElement.startBinding.elementId).not.toBe(
-            (clonedElement as any).startBinding?.elementId,
-          );
-        } else {
-          expect((clonedElement as any).startBinding).toBeNull();
-        }
-      }
-    });
-    // --------------------------------------------------------------------------
-
-    const clonedArrows = duplicatedElements.filter(
-      (e) => e.type === "arrow",
-    ) as ExcalidrawLinearElement[];
-
-    const [clonedRectangle, clonedText1, , clonedArrow2, clonedArrowLabel] =
-      duplicatedElements as any as typeof origElements;
-
-    expect(clonedText1.containerId).toBe(clonedRectangle.id);
-    expect(
-      clonedRectangle.boundElements!.find((e) => e.id === clonedText1.id),
-    ).toEqual(
-      expect.objectContaining({
-        id: clonedText1.id,
-        type: clonedText1.type,
-      }),
-    );
-    expect(clonedRectangle.type).toBe("rectangle");
-
-    clonedArrows.forEach((arrow) => {
-      expect(
-        clonedRectangle.boundElements!.find((e) => e.id === arrow.id),
-      ).toEqual(
-        expect.objectContaining({
-          id: arrow.id,
-          type: arrow.type,
-        }),
-      );
-
-      if (arrow.endBinding) {
-        expect(arrow.endBinding.elementId).toBe(clonedRectangle.id);
-      }
-      if (arrow.startBinding) {
-        expect(arrow.startBinding.elementId).toBe(clonedRectangle.id);
-      }
-    });
-
-    expect(clonedArrow2.boundElements).toEqual([
-      { type: "text", id: clonedArrowLabel.id },
-    ]);
-    expect(clonedArrowLabel.containerId).toBe(clonedArrow2.id);
-  });
-
-  it("should remove id references of elements that aren't found", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      id: "rectangle1",
-      boundElements: [
-        // should keep
-        { id: "arrow1", type: "arrow" },
-        // should drop
-        { id: "arrow-not-exists", type: "arrow" },
-        // should drop
-        { id: "text-not-exists", type: "text" },
-      ],
-    });
-
-    const arrow1 = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    const text1 = API.createElement({
-      type: "text",
-      id: "text1",
-      containerId: "rectangle-not-exists",
-    });
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-      endBinding: {
-        elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    const arrow3 = API.createElement({
-      type: "arrow",
-      id: "arrow3",
-      startBinding: {
-        elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    // -------------------------------------------------------------------------
-
-    const origElements = [rectangle1, text1, arrow1, arrow2, arrow3] as const;
-    const duplicatedElements = duplicateElements({
-      type: "everything",
-      elements: origElements,
-    }).duplicatedElements as any as typeof origElements;
-
-    const [
-      clonedRectangle,
-      clonedText1,
-      clonedArrow1,
-      clonedArrow2,
-      clonedArrow3,
-    ] = duplicatedElements;
-
-    expect(clonedRectangle.boundElements).toEqual([
-      { id: clonedArrow1.id, type: "arrow" },
-    ]);
-
-    expect(clonedText1.containerId).toBe(null);
-
-    expect(clonedArrow2.startBinding).toEqual({
-      ...arrow2.startBinding,
-      elementId: clonedRectangle.id,
-    });
-    expect(clonedArrow2.endBinding).toBe(null);
-    expect(clonedArrow3.startBinding).toBe(null);
-    expect(clonedArrow3.endBinding).toEqual({
-      ...arrow3.endBinding,
-      elementId: clonedRectangle.id,
-    });
-  });
-
-  describe("should duplicate all group ids", () => {
-    it("should regenerate all group ids and keep them consistent across elements", () => {
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g1"],
-      });
-      const rectangle2 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g2", "g1"],
-      });
-      const rectangle3 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g2", "g1"],
-      });
-
-      const origElements = [rectangle1, rectangle2, rectangle3] as const;
-      const { duplicatedElements } = duplicateElements({
-        type: "everything",
-        elements: origElements,
-      });
-      const [clonedRectangle1, clonedRectangle2, clonedRectangle3] =
-        duplicatedElements;
-
-      expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
-      expect(rectangle2.groupIds[0]).not.toBe(clonedRectangle2.groupIds[0]);
-      expect(rectangle2.groupIds[1]).not.toBe(clonedRectangle2.groupIds[1]);
-
-      expect(clonedRectangle1.groupIds[0]).toBe(clonedRectangle2.groupIds[1]);
-      expect(clonedRectangle2.groupIds[0]).toBe(clonedRectangle3.groupIds[0]);
-      expect(clonedRectangle2.groupIds[1]).toBe(clonedRectangle3.groupIds[1]);
-    });
-
-    it("should keep and regenerate ids of groups even if invalid", () => {
-      // lone element shouldn't be able to be grouped with itself,
-      // but hard to check against in a performant way so we ignore it
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g1"],
-      });
-
-      const {
-        duplicatedElements: [clonedRectangle1],
-      } = duplicateElements({ type: "everything", elements: [rectangle1] });
-
-      expect(typeof clonedRectangle1.groupIds[0]).toBe("string");
-      expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
-    });
-  });
-});
-
-describe("group-related duplication", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("action-duplicating within group", async () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["group1"],
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      groupIds: ["group1"],
-    });
-
-    API.setElements([rectangle1, rectangle2]);
-    API.setSelectedElements([rectangle2], "group1");
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDuplicateSelection);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: ["group1"] },
-    ]);
-    expect(h.state.editingGroupId).toBe("group1");
-  });
-
-  it("alt-duplicating within group", async () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["group1"],
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      groupIds: ["group1"],
-    });
-
-    API.setElements([rectangle1, rectangle2]);
-    API.setSelectedElements([rectangle2], "group1");
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle2.x + 5, rectangle2.y + 5);
-      mouse.up(rectangle2.x + 50, rectangle2.y + 50);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: ["group1"] },
-    ]);
-    expect(h.state.editingGroupId).toBe("group1");
-  });
-
-  it("alt-duplicating within group away outside frame", () => {
-    const frame = API.createElement({
-      type: "frame",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 50,
-      height: 50,
-      groupIds: ["group1"],
-      frameId: frame.id,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 50,
-      height: 50,
-      groupIds: ["group1"],
-      frameId: frame.id,
-    });
-
-    API.setElements([frame, rectangle1, rectangle2]);
-    API.setSelectedElements([rectangle2], "group1");
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle2.x + 5, rectangle2.y + 5);
-      mouse.up(frame.x + frame.width + 50, frame.y + frame.height + 50);
-    });
-
-    // console.log(h.elements);
-
-    assertElements(h.elements, [
-      { id: frame.id },
-      { id: rectangle1.id, frameId: frame.id },
-      { id: rectangle2.id, frameId: frame.id },
-      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: [], frameId: null },
-    ]);
-    expect(h.state.editingGroupId).toBe(null);
-  });
-});
-
-describe("duplication z-order", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("duplication z order with Cmd+D for the lowest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-    API.setSelectedElements([rectangle1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDuplicateSelection);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-    ]);
-  });
-
-  it("duplication z order with Cmd+D  for the highest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-    API.setSelectedElements([rectangle3]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDuplicateSelection);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-      { [ORIG_ID]: rectangle3.id, selected: true },
-    ]);
-  });
-
-  it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle1);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
-      mouse.up(rectangle1.x + 5, rectangle1.y + 5);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-    ]);
-  });
-
-  it("duplication z order with alt+drag for the highest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle3);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle3.x + 5, rectangle3.y + 5);
-      mouse.up(rectangle3.x + 5, rectangle3.y + 5);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-      { [ORIG_ID]: rectangle3.id, selected: true },
-    ]);
-  });
-
-  it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle1);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
-      mouse.up(rectangle1.x + 5, rectangle1.y + 5);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-    ]);
-  });
-
-  it("duplication z order with alt+drag with grouped elements should consider the group together when determining z-index", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["group1"],
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      groupIds: ["group1"],
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-      groupIds: ["group1"],
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle1);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
-      mouse.up(rectangle1.x + 15, rectangle1.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { [ORIG_ID]: rectangle2.id, selected: true },
-      { [ORIG_ID]: rectangle3.id, selected: true },
-    ]);
-  });
-
-  it("alt-duplicating text container (in-order)", async () => {
-    const [rectangle, text] = API.createTextContainer();
-    API.setElements([rectangle, text]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle.x + 5, rectangle.y + 5);
-      mouse.up(rectangle.x + 15, rectangle.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle.id },
-      { id: text.id, containerId: rectangle.id },
-      { [ORIG_ID]: rectangle.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(rectangle.id)?.id,
-      },
-    ]);
-  });
-
-  it("alt-duplicating text container (out-of-order)", async () => {
-    const [rectangle, text] = API.createTextContainer();
-    API.setElements([text, rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle.x + 5, rectangle.y + 5);
-      mouse.up(rectangle.x + 15, rectangle.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle.id },
-      { id: text.id, containerId: rectangle.id },
-      { [ORIG_ID]: rectangle.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(rectangle.id)?.id,
-      },
-    ]);
-  });
-
-  it("alt-duplicating labeled arrows (in-order)", async () => {
-    const [arrow, text] = API.createLabeledArrow();
-
-    API.setElements([arrow, text]);
-    API.setSelectedElements([arrow]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(arrow.x + 5, arrow.y + 5);
-      mouse.up(arrow.x + 15, arrow.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: arrow.id },
-      { id: text.id, containerId: arrow.id },
-      { [ORIG_ID]: arrow.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(arrow.id)?.id,
-      },
-    ]);
-    expect(h.state.selectedLinearElement).toEqual(
-      expect.objectContaining({ elementId: getCloneByOrigId(arrow.id)?.id }),
-    );
-  });
-
-  it("alt-duplicating labeled arrows (out-of-order)", async () => {
-    const [arrow, text] = API.createLabeledArrow();
-
-    API.setElements([text, arrow]);
-    API.setSelectedElements([arrow]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(arrow.x + 5, arrow.y + 5);
-      mouse.up(arrow.x + 15, arrow.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: arrow.id },
-      { id: text.id, containerId: arrow.id },
-      { [ORIG_ID]: arrow.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(arrow.id)?.id,
-      },
-    ]);
-  });
-
-  it("alt-duplicating bindable element with bound arrow should keep the arrow on the duplicate", async () => {
-    const rect = UI.createElement("rectangle", {
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-
-    const arrow = UI.createElement("arrow", {
-      x: -100,
-      y: 50,
-      width: 95,
-      height: 0,
-    });
-
-    expect(arrow.endBinding?.elementId).toBe(rect.id);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(5, 5);
-      mouse.up(15, 15);
-    });
-
-    assertElements(h.elements, [
-      {
-        id: rect.id,
-        boundElements: expect.arrayContaining([
-          expect.objectContaining({ id: arrow.id }),
-        ]),
-      },
-      { [ORIG_ID]: rect.id, boundElements: [], selected: true },
-      {
-        id: arrow.id,
-        endBinding: expect.objectContaining({ elementId: rect.id }),
-      },
-    ]);
-  });
-});

packages/element/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist/types"
-  },
-  "include": ["src/**/*", "global.d.ts"],
-  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
-}

packages/eslintrc.base.json

@@ -1,21 +0,0 @@
-{
-  "overrides": [
-    {
-      "files": ["src/**/*.{ts,tsx}"],
-      "rules": {
-        "@typescript-eslint/no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": ["../../excalidraw", "../../../packages/excalidraw", "@excalidraw/excalidraw"],
-                "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
-                "allowTypeImports": true
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ]
-}

packages/excalidraw/CHANGELOG.md

@@ -45,9 +45,9 @@ Please add the latest change on the top under the correct section.
 
 #### Deprecated UMD bundle in favor of ES modules [#7441](https://github.com/excalidraw/excalidraw/pull/7441), [#9127](https://github.com/excalidraw/excalidraw/pull/9127)
 
-We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` folder inside `@excalidraw/excalidraw` package now contains only bundled source files, making any dependencies tree-shakable. The package comes with the following structure:
+We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` bundles inside `@excalidraw/excalidraw` package now contain only bundled source files, making any dependencies tree-shakable. The npm package comes with the following structure:
 
-> **Note**: The structure is simplified for the sake of brevity, omitting lazy-loadable modules, including locales (previously treated as JSON assets) and source maps in the development bundle.
+> **Note**: The structure is simplified for the sake of brevity, omitting lazy-loadable modules, including locales (previously treated as json assets) and source maps in the development bundle.
 
 ```
 @excalidraw/excalidraw/
@@ -72,7 +72,7 @@ Since `"node"` and `"node10"` do not support `package.json` `"exports"` fields,
 
 ##### ESM strict resolution
 
-Due to ESM's strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to disable this feature explicitly.
+Due to ESM strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to explicitly disable this feature.
 
 For example in Webpack, you should set [`resolve.fullySpecified`](https://webpack.js.org/configuration/resolve/#resolvefullyspecified) to `false`.
 
@@ -80,7 +80,7 @@ For this reason, CRA will no longer work unless you eject or use a workaround su
 
 ##### New structure of the imports
 
-Depending on the environment, this is how imports should look like with the `ESM`:
+Dependening on the environment, this is how imports should look like with the `ESM`:
 
 **With bundler (Vite, Next.js, etc.)**
 
@@ -128,7 +128,7 @@ The `excalidraw-assets` and `excalidraw-assets-dev` folders, which contained loc
 
 ##### Locales
 
-Locales are no longer treated as static `.json` assets but are transpiled with `esbuild` directly to the `.js` as ES modules. Note that some build tools (i.e. Vite) may require setting `es2022` as a build target, in order to support "Arbitrary module namespace identifier names", e.g. `export { english as "en-us" } )`.
+Locales are no longer treated as static `.json` assets, but are transpiled with `esbuild` dirrectly to the `.js` as ES modules. Note that some build tools (i.e. Vite) may require setting `es2022` as a build target, in order to support "Arbitrary module namespace identifier names", e.g. `export { english as "en-us" } )`.
 
 ```js
 // vite.config.js
@@ -145,7 +145,7 @@ optimizeDeps: {
 
 ##### Fonts
 
-All fonts are automatically loaded from the [esm.run](https://esm.run/) CDN. For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
+New fonts, which we've added, are automatically loaded from the CDN. For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
 
 ```js
 <script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
@@ -159,7 +159,7 @@ or, if you serve your assets from the root of your CDN, you would do:
 </script>
 ```
 
-or, if you prefer the path to be dynamically set based on the `location.origin`, you could do the following:
+or, if you prefer the path to be dynamicly set based on the `location.origin`, you could do the following:
 
 ```jsx
 // Next.js
@@ -189,7 +189,7 @@ updateScene({
 }); // B
 ```
 
-The `updateScene` API has changed due to the added `Store` component, as part of the multiplayer undo / redo initiative. Specifically, optional `sceneData` parameter `commitToHistory: boolean` was replaced with optional `captureUpdate: CaptureUpdateActionType` parameter. Therefore, make sure to update all instances of `updateScene`, which use `commitToHistory` parameter according to the _before / after_ table below.
+The `updateScene` API has changed due to the added `Store` component, as part of multiplayer undo / redo initiative. Specifically, optional `sceneData` parameter `commitToHistory: boolean` was replaced with optional `captureUpdate: CaptureUpdateActionType` parameter. Therefore, make sure to update all instances of `updateScene`, which use `commitToHistory` parameter according to the _before / after_ table below.
 
 > **Note**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `captureUpdate` value.
 
@@ -203,7 +203,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - `ExcalidrawTextElement.baseline` was removed and replaced with a vertical offset computation based on font metrics, performed on each text element re-render. In case of custom font usage, extend the `FONT_METRICS` object with the related properties. [#7693](https://github.com/excalidraw/excalidraw/pull/7693)
 
-- `ExcalidrawEmbeddableElement.validated` was removed and moved to the private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
+- `ExcalidrawEmbeddableElement.validated` was removed and moved to private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
 
 - Stats container CSS has changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout. [#8361](https://github.com/excalidraw/excalidraw/pull/8361)
 
@@ -487,7 +487,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - Linear element complete button disabled [#8492](https://github.com/excalidraw/excalidraw/pull/8492)
 
-- Aspect ratios of distorted images are not preserved in SVG exports [#8061](https://github.com/excalidraw/excalidraw/pull/8061)
+- Aspect ratio of distorted images are not preserved in SVG exports [#8061](https://github.com/excalidraw/excalidraw/pull/8061)
 
 - WYSIWYG editor padding is not normalized with zoom.value [#8481](https://github.com/excalidraw/excalidraw/pull/8481)
 
@@ -517,7 +517,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - Round coordinates and sizes for rectangle intersection [#8366](https://github.com/excalidraw/excalidraw/pull/8366)
 
-- Text content with tab characters act differently in view/edit [#8336](https://github.com/excalidraw/excalidraw/pull/8336)
+- Text content with tab characters act different in view/edit [#8336](https://github.com/excalidraw/excalidraw/pull/8336)
 
 - Drawing from 0-dimension canvas [#8356](https://github.com/excalidraw/excalidraw/pull/8356)
 

packages/excalidraw/actions/actionAddToLibrary.ts

@@ -1,11 +1,9 @@
-import { LIBRARY_DISABLED_TYPES, randomId } from "@excalidraw/common";
-import { deepCopyElement } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { t } from "../i18n";
-
 import { register } from "./register";
+import { deepCopyElement } from "../element/newElement";
+import { randomId } from "../random";
+import { t } from "../i18n";
+import { LIBRARY_DISABLED_TYPES } from "../constants";
+import { CaptureUpdateAction } from "../store";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",

packages/excalidraw/actions/actionAlign.tsx

@@ -1,20 +1,5 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { isFrameLikeElement } from "@excalidraw/element";
-
-import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
-
-import { KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
-
-import { alignElements } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import type { Alignment } from "@excalidraw/element";
-
-import { ToolButton } from "../components/ToolButton";
+import type { Alignment } from "../align";
+import { alignElements } from "../align";
 import {
   AlignBottomIcon,
   AlignLeftIcon,
@@ -23,14 +8,18 @@ import {
   CenterHorizontallyIcon,
   CenterVerticallyIcon,
 } from "../components/icons";
-
+import { ToolButton } from "../components/ToolButton";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import type { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
-
+import { KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
-
-import { register } from "./register";
-
+import { CaptureUpdateAction } from "../store";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
 
 export const alignActionsPredicate = (
   appState: UIAppState,
@@ -51,8 +40,14 @@ const alignSelectedElements = (
   alignment: Alignment,
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
+  const elementsMap = arrayToMap(elements);
 
-  const updatedElements = alignElements(selectedElements, alignment, app.scene);
+  const updatedElements = alignElements(
+    selectedElements,
+    elementsMap,
+    alignment,
+    app.scene,
+  );
 
   const updatedElementsMap = arrayToMap(updatedElements);
 

packages/excalidraw/actions/actionBoundText.tsx

@@ -3,52 +3,38 @@ import {
   ROUNDNESS,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
-  arrayToMap,
-  getFontString,
-} from "@excalidraw/common";
-import {
-  getOriginalContainerHeightFromCache,
-  resetOriginalContainerCache,
-  updateOriginalContainerCache,
-} from "@excalidraw/element";
-
+} from "../constants";
+import { isTextElement, newElement } from "../element";
+import { mutateElement } from "../element/mutateElement";
 import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
   redrawTextBoundingBox,
-} from "@excalidraw/element";
-
+} from "../element/textElement";
+import {
+  getOriginalContainerHeightFromCache,
+  resetOriginalContainerCache,
+  updateOriginalContainerCache,
+} from "../element/containerCache";
 import {
   hasBoundTextElement,
-  isArrowElement,
   isTextBindableContainer,
-  isTextElement,
   isUsingAdaptiveRadius,
-} from "@excalidraw/element";
-
-import { measureText } from "@excalidraw/element";
-
-import { syncMovedIndices } from "@excalidraw/element";
-
-import { newElement } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
+} from "../element/typeChecks";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
-} from "@excalidraw/element/types";
-
-import type { Mutable } from "@excalidraw/common/utility-types";
-
-import type { Radians } from "@excalidraw/math";
-
-import { register } from "./register";
-
+} from "../element/types";
 import type { AppState } from "../types";
+import type { Mutable } from "../utility-types";
+import { arrayToMap, getFontString } from "../utils";
+import { register } from "./register";
+import { syncMovedIndices } from "../fractionalIndex";
+import { CaptureUpdateAction } from "../store";
+import { measureText } from "../element/textMeasurements";
 
 export const actionUnbindText = register({
   name: "unbindText",
@@ -79,7 +65,7 @@ export const actionUnbindText = register({
           boundTextElement,
           elementsMap,
         );
-        app.scene.mutateElement(boundTextElement as ExcalidrawTextElement, {
+        mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
           height,
@@ -87,7 +73,7 @@ export const actionUnbindText = register({
           x,
           y,
         });
-        app.scene.mutateElement(element, {
+        mutateElement(element, {
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id,
           ),
@@ -152,21 +138,24 @@ export const actionBindText = register({
       textElement = selectedElements[1] as ExcalidrawTextElement;
       container = selectedElements[0] as ExcalidrawTextContainer;
     }
-    app.scene.mutateElement(textElement, {
+    mutateElement(textElement, {
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
       autoResize: true,
-      angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians,
     });
-    app.scene.mutateElement(container, {
+    mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
         type: "text",
         id: textElement.id,
       }),
     });
     const originalContainerHeight = container.height;
-    redrawTextBoundingBox(textElement, container, app.scene);
+    redrawTextBoundingBox(
+      textElement,
+      container,
+      app.scene.getNonDeletedElementsMap(),
+    );
     // overwritting the cache with original container height so
     // it can be restored when unbind
     updateOriginalContainerCache(container.id, originalContainerHeight);
@@ -225,8 +214,8 @@ export const actionWrapTextInContainer = register({
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    const someTextElements = selectedElements.some((el) => isTextElement(el));
-    return selectedElements.length > 0 && someTextElements;
+    const areTextElements = selectedElements.every((el) => isTextElement(el));
+    return selectedElements.length > 0 && areTextElements;
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -296,23 +285,27 @@ export const actionWrapTextInContainer = register({
             }
 
             if (startBinding || endBinding) {
-              app.scene.mutateElement(ele, {
-                startBinding,
-                endBinding,
-              });
+              mutateElement(ele, { startBinding, endBinding }, false);
             }
           });
         }
 
-        app.scene.mutateElement(textElement, {
-          containerId: container.id,
-          verticalAlign: VERTICAL_ALIGN.MIDDLE,
-          boundElements: null,
-          textAlign: TEXT_ALIGN.CENTER,
-          autoResize: true,
-        });
-
-        redrawTextBoundingBox(textElement, container, app.scene);
+        mutateElement(
+          textElement,
+          {
+            containerId: container.id,
+            verticalAlign: VERTICAL_ALIGN.MIDDLE,
+            boundElements: null,
+            textAlign: TEXT_ALIGN.CENTER,
+            autoResize: true,
+          },
+          false,
+        );
+        redrawTextBoundingBox(
+          textElement,
+          container,
+          app.scene.getNonDeletedElementsMap(),
+        );
 
         updatedElements = pushContainerBelowText(
           [...updatedElements, container],

packages/excalidraw/actions/actionCanvas.tsx

@@ -1,37 +1,6 @@
-import { clamp, roundToStep } from "@excalidraw/math";
-
-import {
-  DEFAULT_CANVAS_BACKGROUND_PICKS,
-  CURSOR_TYPE,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  THEME,
-  ZOOM_STEP,
-  getShortcutKey,
-  updateActiveTool,
-  CODES,
-  KEYS,
-} from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-import { newElementWith } from "@excalidraw/element";
-import { getCommonBounds, type SceneBounds } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import {
-  getDefaultAppState,
-  isEraserActive,
-  isHandToolActive,
-} from "../appState";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
-import { ToolButton } from "../components/ToolButton";
-import { Tooltip } from "../components/Tooltip";
 import {
   handIcon,
-  LassoIcon,
   MoonIcon,
   SunIcon,
   TrashIcon,
@@ -40,20 +9,41 @@ import {
   ZoomOutIcon,
   ZoomResetIcon,
 } from "../components/icons";
-import { setCursor } from "../cursor";
-
+import { ToolButton } from "../components/ToolButton";
+import {
+  CURSOR_TYPE,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  THEME,
+  ZOOM_STEP,
+} from "../constants";
+import { getCommonBounds, getNonDeletedElements } from "../element";
+import type { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
+import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-
-import { register } from "./register";
-
 import type { AppState, Offsets } from "../types";
+import { getShortcutKey, updateActiveTool } from "../utils";
+import { register } from "./register";
+import { Tooltip } from "../components/Tooltip";
+import { newElementWith } from "../element/mutateElement";
+import {
+  getDefaultAppState,
+  isEraserActive,
+  isHandToolActive,
+} from "../appState";
+import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
+import type { SceneBounds } from "../element/bounds";
+import { setCursor } from "../cursor";
+import { CaptureUpdateAction } from "../store";
+import { clamp, roundToStep } from "@excalidraw/math";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
+  paletteName: "Change canvas background color",
   trackEvent: false,
   predicate: (elements, appState, props, app) => {
     return (
@@ -91,6 +81,7 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   label: "labels.clearCanvas",
+  paletteName: "Clear canvas",
   icon: TrashIcon,
   trackEvent: { category: "canvas" },
   predicate: (elements, appState, props, app) => {
@@ -525,42 +516,10 @@ export const actionToggleEraserTool = register({
   keyTest: (event) => event.key === KEYS.E,
 });
 
-export const actionToggleLassoTool = register({
-  name: "toggleLassoTool",
-  label: "toolBar.lasso",
-  icon: LassoIcon,
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState, _, app) => {
-    let activeTool: AppState["activeTool"];
-
-    if (appState.activeTool.type !== "lasso") {
-      activeTool = updateActiveTool(appState, {
-        type: "lasso",
-        fromSelection: false,
-      });
-      setCursor(app.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "selection",
-      });
-    }
-
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        activeEmbeddable: null,
-        activeTool,
-      },
-      captureUpdate: CaptureUpdateAction.NEVER,
-    };
-  },
-});
-
 export const actionToggleHandTool = register({
   name: "toggleHandTool",
   label: "toolBar.hand",
+  paletteName: "Toggle hand tool",
   trackEvent: { category: "toolbar" },
   icon: handIcon,
   viewMode: false,

packages/excalidraw/actions/actionClipboard.tsx

@@ -1,10 +1,5 @@
-import { isTextElement } from "@excalidraw/element";
-import { getTextFromElements } from "@excalidraw/element";
-
-import { CODES, KEYS, isFirefox } from "@excalidraw/common";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
@@ -13,12 +8,13 @@ import {
   probablySupportsClipboardWriteText,
   readSystemClipboard,
 } from "../clipboard";
-import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
-import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { t } from "../i18n";
-
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { register } from "./register";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
+import { getTextFromElements, isTextElement } from "../element";
+import { t } from "../i18n";
+import { isFirefox } from "../constants";
+import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
+import { CaptureUpdateAction } from "../store";
 
 export const actionCopy = register({
   name: "copy",

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,14 +1,10 @@
-import { isImageElement } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawImageElement } from "@excalidraw/element/types";
-
-import { ToolButton } from "../components/ToolButton";
-import { cropIcon } from "../components/icons";
-import { t } from "../i18n";
-
 import { register } from "./register";
+import { cropIcon } from "../components/icons";
+import { CaptureUpdateAction } 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",

packages/excalidraw/actions/actionDeleteSelected.test.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-
-import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
+import { Excalidraw, mutateElement } from "../index";
 import { act, assertElements, render } from "../tests/test-utils";
-
+import { API } from "../tests/helpers/api";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 
 const { h } = window;
@@ -56,7 +54,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: f1.id,
     });
 
-    h.app.scene.mutateElement(r1, {
+    mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -94,7 +92,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    h.app.scene.mutateElement(r1, {
+    mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -132,7 +130,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    h.app.scene.mutateElement(r1, {
+    mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -170,7 +168,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    h.app.scene.mutateElement(a1, {
+    mutateElement(a1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -1,34 +1,25 @@
-import { KEYS, updateActiveTool } from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-import { fixBindingsAfterDeletion } from "@excalidraw/element";
-import { LinearElementEditor } from "@excalidraw/element";
-import { newElementWith } from "@excalidraw/element";
-import { getContainerElement } from "@excalidraw/element";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { KEYS } from "../keys";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { register } from "./register";
+import { getNonDeletedElements } from "../element";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppState } from "../types";
+import { mutateElement, newElementWith } from "../element/mutateElement";
+import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { fixBindingsAfterDeletion } from "../element/binding";
 import {
   isBoundToContainer,
   isElbowArrow,
   isFrameLikeElement,
-} from "@excalidraw/element";
-import { getFrameChildren } from "@excalidraw/element";
-
-import {
-  getElementsInGroup,
-  selectGroupsForSelectedElements,
-} from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import { t } from "../i18n";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+} from "../element/typeChecks";
+import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-
-import { register } from "./register";
-
-import type { AppClassProperties, AppState } from "../types";
+import { CaptureUpdateAction } from "../store";
+import { getContainerElement } from "../element/textElement";
+import { getFrameChildren } from "../frame";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -92,7 +83,7 @@ const deleteSelectedElements = (
         el.boundElements.forEach((candidate) => {
           const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
           if (bound && isElbowArrow(bound)) {
-            app.scene.mutateElement(bound, {
+            mutateElement(bound, {
               startBinding:
                 el.id === bound.startBinding?.elementId
                   ? null
@@ -100,6 +91,7 @@ const deleteSelectedElements = (
               endBinding:
                 el.id === bound.endBinding?.elementId ? null : bound.endBinding,
             });
+            mutateElement(bound, { points: bound.points });
           }
         });
       }
@@ -258,11 +250,7 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(
-        element,
-        app.scene,
-        selectedPointsIndices,
-      );
+      LinearElementEditor.deletePoints(element, selectedPointsIndices);
 
       return {
         elements,
@@ -298,7 +286,6 @@ export const actionDeleteSelected = register({
         activeTool: updateActiveTool(appState, { type: "selection" }),
         multiElement: null,
         activeEmbeddable: null,
-        selectedLinearElement: null,
       },
       captureUpdate: isSomeElementSelected(
         getNonDeletedElements(elements),

packages/excalidraw/actions/actionDistribute.tsx

@@ -1,32 +1,21 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { isFrameLikeElement } from "@excalidraw/element";
-
-import { CODES, KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
-
-import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
-
-import { distributeElements } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import type { Distribution } from "@excalidraw/element";
-
-import { ToolButton } from "../components/ToolButton";
 import {
   DistributeHorizontallyIcon,
   DistributeVerticallyIcon,
 } from "../components/icons";
-
+import { ToolButton } from "../components/ToolButton";
+import type { Distribution } from "../distribute";
+import { distributeElements } from "../distribute";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import type { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
-
+import { CODES, KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
-
-import { register } from "./register";
-
+import { CaptureUpdateAction } from "../store";
 import type { AppClassProperties, AppState } from "../types";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
 
 const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);

packages/excalidraw/actions/actionDuplicateSelection.test.tsx

@@ -1,15 +1,14 @@
-import { ORIG_ID } from "@excalidraw/common";
-
 import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
 import {
   act,
   assertElements,
   getCloneByOrigId,
   render,
 } from "../tests/test-utils";
-
+import { API } from "../tests/helpers/api";
 import { actionDuplicateSelection } from "./actionDuplicateSelection";
+import React from "react";
+import { ORIG_ID } from "../constants";
 
 const { h } = window;
 
@@ -257,7 +256,7 @@ describe("actionDuplicateSelection", () => {
       assertElements(h.elements, [
         { id: frame.id },
         { id: text.id, frameId: frame.id },
-        { [ORIG_ID]: text.id, frameId: frame.id, selected: true },
+        { [ORIG_ID]: text.id, frameId: frame.id },
       ]);
     });
 

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -1,32 +1,48 @@
-import {
-  DEFAULT_GRID_SIZE,
-  KEYS,
-  arrayToMap,
-  getShortcutKey,
-} from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { LinearElementEditor } from "@excalidraw/element";
-
-import {
-  getSelectedElements,
-  getSelectionStateForElements,
-} from "@excalidraw/element";
-
-import { syncMovedIndices } from "@excalidraw/element";
-
-import { duplicateElements } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { ToolButton } from "../components/ToolButton";
-import { DuplicateIcon } from "../components/icons";
-
-import { t } from "../i18n";
-import { isSomeElementSelected } from "../scene";
-
+import { KEYS } from "../keys";
 import { register } from "./register";
+import type { ExcalidrawElement } from "../element/types";
+import { duplicateElement, getNonDeletedElements } from "../element";
+import { isSomeElementSelected } from "../scene";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import {
+  arrayToMap,
+  castArray,
+  findLastIndex,
+  getShortcutKey,
+  invariant,
+} from "../utils";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import {
+  selectGroupsForSelectedElements,
+  getSelectedGroupForElement,
+  getElementsInGroup,
+} from "../groups";
+import type { AppState } from "../types";
+import { fixBindingsAfterDuplication } from "../element/binding";
+import type { ActionResult } from "./types";
+import { DEFAULT_GRID_SIZE } from "../constants";
+import {
+  bindTextToShapeAfterDuplication,
+  getBoundTextElement,
+  getContainerElement,
+} from "../element/textElement";
+import {
+  hasBoundTextElement,
+  isBoundToContainer,
+  isFrameLikeElement,
+} from "../element/typeChecks";
+import { normalizeElementOrder } from "../element/sortElements";
+import { DuplicateIcon } from "../components/icons";
+import {
+  bindElementsToFramesAfterDuplication,
+  getFrameChildren,
+} from "../frame";
+import {
+  excludeElementsInFramesFromSelection,
+  getSelectedElements,
+} from "../scene/selection";
+import { CaptureUpdateAction } from "../store";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -34,17 +50,13 @@ export const actionDuplicateSelection = register({
   icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
-    if (appState.selectedElementsAreBeingDragged) {
-      return false;
-    }
-
     // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {
       // TODO: Invariants should be checked here instead of duplicateSelectedPoints()
       try {
         const newAppState = LinearElementEditor.duplicateSelectedPoints(
           appState,
-          app.scene,
+          app.scene.getNonDeletedElementsMap(),
         );
 
         return {
@@ -57,51 +69,20 @@ export const actionDuplicateSelection = register({
       }
     }
 
-    let { duplicatedElements, elementsWithDuplicates } = duplicateElements({
-      type: "in-place",
-      elements,
-      idsOfElementsToDuplicate: arrayToMap(
-        getSelectedElements(elements, appState, {
-          includeBoundTextElement: true,
-          includeElementsInFrames: true,
-        }),
-      ),
-      appState,
-      randomizeSeed: true,
-      overrides: ({ origElement, origIdToDuplicateId }) => {
-        const duplicateFrameId =
-          origElement.frameId && origIdToDuplicateId.get(origElement.frameId);
-        return {
-          x: origElement.x + DEFAULT_GRID_SIZE / 2,
-          y: origElement.y + DEFAULT_GRID_SIZE / 2,
-          frameId: duplicateFrameId ?? origElement.frameId,
-        };
-      },
-    });
+    const nextState = duplicateElements(elements, appState);
 
-    if (app.props.onDuplicate && elementsWithDuplicates) {
+    if (app.props.onDuplicate && nextState.elements) {
       const mappedElements = app.props.onDuplicate(
-        elementsWithDuplicates,
+        nextState.elements,
         elements,
       );
       if (mappedElements) {
-        elementsWithDuplicates = mappedElements;
+        nextState.elements = mappedElements;
       }
     }
 
     return {
-      elements: syncMovedIndices(
-        elementsWithDuplicates,
-        arrayToMap(duplicatedElements),
-      ),
-      appState: {
-        ...appState,
-        ...getSelectionStateForElements(
-          duplicatedElements,
-          getNonDeletedElements(elementsWithDuplicates),
-          appState,
-        ),
-      },
+      ...nextState,
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
@@ -119,3 +100,260 @@ export const actionDuplicateSelection = register({
     />
   ),
 });
+
+const duplicateElements = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+): Partial<Exclude<ActionResult, false>> => {
+  // ---------------------------------------------------------------------------
+
+  const groupIdMap = new Map();
+  const newElements: ExcalidrawElement[] = [];
+  const oldElements: ExcalidrawElement[] = [];
+  const oldIdToDuplicatedId = new Map();
+  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
+
+  const elementsMap = arrayToMap(elements);
+
+  const duplicateAndOffsetElement = <
+    T extends ExcalidrawElement | ExcalidrawElement[],
+  >(
+    element: T,
+  ): T extends ExcalidrawElement[]
+    ? ExcalidrawElement[]
+    : ExcalidrawElement | null => {
+    const elements = castArray(element);
+
+    const _newElements = elements.reduce(
+      (acc: ExcalidrawElement[], element) => {
+        if (processedIds.has(element.id)) {
+          return acc;
+        }
+
+        processedIds.set(element.id, true);
+
+        const newElement = duplicateElement(
+          appState.editingGroupId,
+          groupIdMap,
+          element,
+          {
+            x: element.x + DEFAULT_GRID_SIZE / 2,
+            y: element.y + DEFAULT_GRID_SIZE / 2,
+          },
+        );
+
+        processedIds.set(newElement.id, true);
+
+        duplicatedElementsMap.set(newElement.id, newElement);
+        oldIdToDuplicatedId.set(element.id, newElement.id);
+
+        oldElements.push(element);
+        newElements.push(newElement);
+
+        acc.push(newElement);
+        return acc;
+      },
+      [],
+    );
+
+    return (
+      Array.isArray(element) ? _newElements : _newElements[0] || null
+    ) as T extends ExcalidrawElement[]
+      ? ExcalidrawElement[]
+      : ExcalidrawElement | null;
+  };
+
+  elements = normalizeElementOrder(elements);
+
+  const idsOfElementsToDuplicate = arrayToMap(
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    }),
+  );
+
+  // Ids of elements that have already been processed so we don't push them
+  // into the array twice if we end up backtracking when retrieving
+  // discontiguous group of elements (can happen due to a bug, or in edge
+  // cases such as a group containing deleted elements which were not selected).
+  //
+  // This is not enough to prevent duplicates, so we do a second loop afterwards
+  // to remove them.
+  //
+  // For convenience we mark even the newly created ones even though we don't
+  // loop over them.
+  const processedIds = new Map<ExcalidrawElement["id"], true>();
+
+  const elementsWithClones: ExcalidrawElement[] = elements.slice();
+
+  const insertAfterIndex = (
+    index: number,
+    elements: ExcalidrawElement | null | ExcalidrawElement[],
+  ) => {
+    invariant(index !== -1, "targetIndex === -1 ");
+
+    if (!Array.isArray(elements) && !elements) {
+      return;
+    }
+
+    elementsWithClones.splice(index + 1, 0, ...castArray(elements));
+  };
+
+  const frameIdsToDuplicate = new Set(
+    elements
+      .filter(
+        (el) => idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
+      )
+      .map((el) => el.id),
+  );
+
+  for (const element of elements) {
+    if (processedIds.has(element.id)) {
+      continue;
+    }
+
+    if (!idsOfElementsToDuplicate.has(element.id)) {
+      continue;
+    }
+
+    // groups
+    // -------------------------------------------------------------------------
+
+    const groupId = getSelectedGroupForElement(appState, element);
+    if (groupId) {
+      const groupElements = getElementsInGroup(elements, groupId).flatMap(
+        (element) =>
+          isFrameLikeElement(element)
+            ? [...getFrameChildren(elements, element.id), element]
+            : [element],
+      );
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.groupIds?.includes(groupId);
+      });
+
+      insertAfterIndex(targetIndex, duplicateAndOffsetElement(groupElements));
+      continue;
+    }
+
+    // frame duplication
+    // -------------------------------------------------------------------------
+
+    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+      continue;
+    }
+
+    if (isFrameLikeElement(element)) {
+      const frameId = element.id;
+
+      const frameChildren = getFrameChildren(elements, frameId);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.frameId === frameId || el.id === frameId;
+      });
+
+      insertAfterIndex(
+        targetIndex,
+        duplicateAndOffsetElement([...frameChildren, element]),
+      );
+      continue;
+    }
+
+    // text container
+    // -------------------------------------------------------------------------
+
+    if (hasBoundTextElement(element)) {
+      const boundTextElement = getBoundTextElement(element, elementsMap);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return (
+          el.id === element.id ||
+          ("containerId" in el && el.containerId === element.id)
+        );
+      });
+
+      if (boundTextElement) {
+        insertAfterIndex(
+          targetIndex,
+          duplicateAndOffsetElement([element, boundTextElement]),
+        );
+      } else {
+        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
+      }
+
+      continue;
+    }
+
+    if (isBoundToContainer(element)) {
+      const container = getContainerElement(element, elementsMap);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.id === element.id || el.id === container?.id;
+      });
+
+      if (container) {
+        insertAfterIndex(
+          targetIndex,
+          duplicateAndOffsetElement([container, element]),
+        );
+      } else {
+        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
+      }
+
+      continue;
+    }
+
+    // default duplication (regular elements)
+    // -------------------------------------------------------------------------
+
+    insertAfterIndex(
+      findLastIndex(elementsWithClones, (el) => el.id === element.id),
+      duplicateAndOffsetElement(element),
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+
+  bindTextToShapeAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+  fixBindingsAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+  bindElementsToFramesAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+
+  const nextElementsToSelect =
+    excludeElementsInFramesFromSelection(newElements);
+
+  return {
+    elements: elementsWithClones,
+    appState: {
+      ...appState,
+      ...selectGroupsForSelectedElements(
+        {
+          editingGroupId: appState.editingGroupId,
+          selectedElementIds: nextElementsToSelect.reduce(
+            (acc: Record<ExcalidrawElement["id"], true>, element) => {
+              if (!isBoundToContainer(element)) {
+                acc[element.id] = true;
+              }
+              return acc;
+            },
+            {},
+          ),
+        },
+        getNonDeletedElements(elementsWithClones),
+        appState,
+        null,
+      ),
+    },
+  };
+};

packages/excalidraw/actions/actionElementLink.ts

@@ -1,16 +1,13 @@
+import { copyTextToSystemClipboard } from "../clipboard";
+import { copyIcon, elementLinkIcon } from "../components/icons";
 import {
   canCreateLinkFromElements,
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection,
-} from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { copyTextToSystemClipboard } from "../clipboard";
-import { copyIcon, elementLinkIcon } from "../components/icons";
+} from "../element/elementLink";
 import { t } from "../i18n";
 import { getSelectedElements } from "../scene";
-
+import { CaptureUpdateAction } from "../store";
 import { register } from "./register";
 
 export const actionCopyElementLink = register({

packages/excalidraw/actions/actionElementLock.test.tsx

@@ -1,10 +1,9 @@
-import { queryByTestId, fireEvent } from "@testing-library/react";
 import React from "react";
-
 import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
-import { Pointer, UI } from "../tests/helpers/ui";
+import { queryByTestId, fireEvent } from "@testing-library/react";
 import { render } from "../tests/test-utils";
+import { Pointer, UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
 
 const { h } = window;
 const mouse = new Pointer("mouse");

packages/excalidraw/actions/actionElementLock.ts

@@ -1,23 +1,13 @@
-import { KEYS, arrayToMap, randomId } from "@excalidraw/common";
-
-import {
-  elementsAreInSameGroup,
-  newElementWith,
-  selectGroupsFromGivenElements,
-} from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
 import { LockedIcon, UnlockedIcon } from "../components/icons";
-
+import { newElementWith } from "../element/mutateElement";
+import { isFrameLikeElement } from "../element/typeChecks";
+import type { ExcalidrawElement } from "../element/types";
+import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
-
+import { CaptureUpdateAction } from "../store";
+import { arrayToMap } from "../utils";
 import { register } from "./register";
 
-import type { AppState } from "../types";
-
 const shouldLock = (elements: readonly ExcalidrawElement[]) =>
   elements.every((el) => !el.locked);
 
@@ -28,10 +18,15 @@ export const actionToggleElementLock = register({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: false,
     });
+    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
+      return selected[0].locked
+        ? "labels.elementLock.unlock"
+        : "labels.elementLock.lock";
+    }
 
     return shouldLock(selected)
-      ? "labels.elementLock.lock"
-      : "labels.elementLock.unlock";
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
   },
   icon: (appState, elements) => {
     const selectedElements = getSelectedElements(elements, appState);
@@ -58,84 +53,19 @@ export const actionToggleElementLock = register({
 
     const nextLockState = shouldLock(selectedElements);
     const selectedElementsMap = arrayToMap(selectedElements);
-
-    const isAGroup =
-      selectedElements.length > 1 && elementsAreInSameGroup(selectedElements);
-    const isASingleUnit = selectedElements.length === 1 || isAGroup;
-    const newGroupId = isASingleUnit ? null : randomId();
-
-    let nextLockedMultiSelections = { ...appState.lockedMultiSelections };
-
-    if (nextLockState) {
-      nextLockedMultiSelections = {
-        ...appState.lockedMultiSelections,
-        ...(newGroupId ? { [newGroupId]: true } : {}),
-      };
-    } else if (isAGroup) {
-      const groupId = selectedElements[0].groupIds.at(-1)!;
-      delete nextLockedMultiSelections[groupId];
-    }
-
-    const nextElements = elements.map((element) => {
-      if (!selectedElementsMap.has(element.id)) {
-        return element;
-      }
-
-      let nextGroupIds = element.groupIds;
-
-      // if locking together, add to group
-      // if unlocking, remove the temporary group
-      if (nextLockState) {
-        if (newGroupId) {
-          nextGroupIds = [...nextGroupIds, newGroupId];
-        }
-      } else {
-        nextGroupIds = nextGroupIds.filter(
-          (groupId) => !appState.lockedMultiSelections[groupId],
-        );
-      }
-
-      return newElementWith(element, {
-        locked: nextLockState,
-        // do not recreate the array unncessarily
-        groupIds:
-          nextGroupIds.length !== element.groupIds.length
-            ? nextGroupIds
-            : element.groupIds,
-      });
-    });
-
-    const nextElementsMap = arrayToMap(nextElements);
-    const nextSelectedElementIds: AppState["selectedElementIds"] = nextLockState
-      ? {}
-      : Object.fromEntries(selectedElements.map((el) => [el.id, true]));
-    const unlockedSelectedElements = selectedElements.map(
-      (el) => nextElementsMap.get(el.id) || el,
-    );
-    const nextSelectedGroupIds = nextLockState
-      ? {}
-      : selectGroupsFromGivenElements(unlockedSelectedElements, appState);
-
-    const activeLockedId = nextLockState
-      ? newGroupId
-        ? newGroupId
-        : isAGroup
-        ? selectedElements[0].groupIds.at(-1)!
-        : selectedElements[0].id
-      : null;
-
     return {
-      elements: nextElements,
+      elements: elements.map((element) => {
+        if (!selectedElementsMap.has(element.id)) {
+          return element;
+        }
 
+        return newElementWith(element, { locked: nextLockState });
+      }),
       appState: {
         ...appState,
-        selectedElementIds: nextSelectedElementIds,
-        selectedGroupIds: nextSelectedGroupIds,
         selectedLinearElement: nextLockState
           ? null
           : appState.selectedLinearElement,
-        lockedMultiSelections: nextLockedMultiSelections,
-        activeLockedId,
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
@@ -155,6 +85,7 @@ export const actionToggleElementLock = register({
 
 export const actionUnlockAllElements = register({
   name: "unlockAllElements",
+  paletteName: "Unlock all elements",
   trackEvent: { category: "canvas" },
   viewMode: false,
   icon: UnlockedIcon,
@@ -168,44 +99,18 @@ export const actionUnlockAllElements = register({
   perform: (elements, appState) => {
     const lockedElements = elements.filter((el) => el.locked);
 
-    const nextElements = elements.map((element) => {
-      if (element.locked) {
-        // remove the temporary groupId if it exists
-        const nextGroupIds = element.groupIds.filter(
-          (gid) => !appState.lockedMultiSelections[gid],
-        );
-
-        return newElementWith(element, {
-          locked: false,
-          groupIds:
-            // do not recreate the array unncessarily
-            element.groupIds.length !== nextGroupIds.length
-              ? nextGroupIds
-              : element.groupIds,
-        });
-      }
-      return element;
-    });
-
-    const nextElementsMap = arrayToMap(nextElements);
-
-    const unlockedElements = lockedElements.map(
-      (el) => nextElementsMap.get(el.id) || el,
-    );
-
     return {
-      elements: nextElements,
+      elements: elements.map((element) => {
+        if (element.locked) {
+          return newElementWith(element, { locked: false });
+        }
+        return element;
+      }),
       appState: {
         ...appState,
         selectedElementIds: Object.fromEntries(
           lockedElements.map((el) => [el.id, true]),
         ),
-        selectedGroupIds: selectGroupsFromGivenElements(
-          unlockedElements,
-          appState,
-        ),
-        lockedMultiSelections: {},
-        activeLockedId: null,
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };

packages/excalidraw/actions/actionEmbeddable.ts

@@ -1,35 +0,0 @@
-import { updateActiveTool } from "@excalidraw/common";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { setCursorForShape } from "../cursor";
-
-import { register } from "./register";
-
-export const actionSetEmbeddableAsActiveTool = register({
-  name: "setEmbeddableAsActiveTool",
-  trackEvent: { category: "toolbar" },
-  target: "Tool",
-  label: "toolBar.embeddable",
-  perform: (elements, appState, _, app) => {
-    const nextActiveTool = updateActiveTool(appState, {
-      type: "embeddable",
-    });
-
-    setCursorForShape(app.canvas, {
-      ...appState,
-      activeTool: nextActiveTool,
-    });
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        activeTool: updateActiveTool(appState, {
-          type: "embeddable",
-        }),
-      },
-      captureUpdate: CaptureUpdateAction.EVENTUALLY,
-    };
-  },
-});

packages/excalidraw/actions/actionExport.tsx

@@ -1,35 +1,25 @@
-import {
-  KEYS,
-  DEFAULT_EXPORT_PADDING,
-  EXPORT_SCALES,
-  THEME,
-} from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { Theme } from "@excalidraw/element/types";
-
-import { useDevice } from "../components/App";
-import { CheckboxItem } from "../components/CheckboxItem";
-import { DarkModeToggle } from "../components/DarkModeToggle";
+import { ExportIcon, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
-import { ExportIcon, questionCircle, saveAs } from "../components/icons";
+import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
+import { resaveAsImageWithScene } from "../data/resave";
+import { t } from "../i18n";
+import { useDevice } from "../components/App";
+import { KEYS } from "../keys";
+import { register } from "./register";
+import { CheckboxItem } from "../components/CheckboxItem";
+import { getExportSize } from "../scene/export";
+import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { resaveAsImageWithScene } from "../data/resave";
-
-import { t } from "../i18n";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { getExportSize } from "../scene/export";
+import type { Theme } from "../element/types";
 
 import "../components/ToolIcon.scss";
-
-import { register } from "./register";
+import { CaptureUpdateAction } from "../store";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",

packages/excalidraw/actions/actionFinalize.tsx

@@ -1,28 +1,22 @@
-import { pointFrom } from "@excalidraw/math";
-
+import { KEYS } from "../keys";
+import { isInvisiblySmallElement } from "../element";
+import { arrayToMap, updateActiveTool } from "../utils";
+import { ToolButton } from "../components/ToolButton";
+import { done } from "../components/icons";
+import { t } from "../i18n";
+import { register } from "./register";
+import { mutateElement } from "../element/mutateElement";
+import { LinearElementEditor } from "../element/linearElementEditor";
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
-} from "@excalidraw/element";
-import { LinearElementEditor } from "@excalidraw/element";
-
-import { isBindingElement, isLinearElement } from "@excalidraw/element";
-
-import { KEYS, arrayToMap, updateActiveTool } from "@excalidraw/common";
-import { isPathALoop } from "@excalidraw/element";
-
-import { isInvisiblySmallElement } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { t } from "../i18n";
-import { resetCursor } from "../cursor";
-import { done } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-
-import { register } from "./register";
-
+} from "../element/binding";
+import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
+import { resetCursor } from "../cursor";
+import { CaptureUpdateAction } from "../store";
+import { pointFrom } from "@excalidraw/math";
+import { isPathALoop } from "../shapes";
 
 export const actionFinalize = register({
   name: "finalize",
@@ -44,6 +38,7 @@ export const actionFinalize = register({
             element,
             startBindingElement,
             endBindingElement,
+            elementsMap,
             scene,
           );
         }
@@ -69,11 +64,7 @@ export const actionFinalize = register({
       scene.getElement(appState.pendingImageElementId);
 
     if (pendingImageElement) {
-      scene.mutateElement(
-        pendingImageElement,
-        { isDeleted: true },
-        { informMutation: false, isDragging: false },
-      );
+      mutateElement(pendingImageElement, { isDeleted: true }, false);
     }
 
     if (window.document.activeElement instanceof HTMLElement) {
@@ -97,7 +88,7 @@ export const actionFinalize = register({
           !lastCommittedPoint ||
           points[points.length - 1] !== lastCommittedPoint
         ) {
-          scene.mutateElement(multiPointElement, {
+          mutateElement(multiPointElement, {
             points: multiPointElement.points.slice(0, -1),
           });
         }
@@ -121,7 +112,7 @@ export const actionFinalize = register({
         if (isLoop) {
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
-          scene.mutateElement(multiPointElement, {
+          mutateElement(multiPointElement, {
             points: linePoints.map((p, index) =>
               index === linePoints.length - 1
                 ? pointFrom(firstPoint[0], firstPoint[1])
@@ -141,7 +132,13 @@ export const actionFinalize = register({
           -1,
           arrayToMap(elements),
         );
-        maybeBindLinearElement(multiPointElement, appState, { x, y }, scene);
+        maybeBindLinearElement(
+          multiPointElement,
+          appState,
+          { x, y },
+          elementsMap,
+          elements,
+        );
       }
     }
 
@@ -197,10 +194,7 @@ export const actionFinalize = register({
         // To select the linear element when user has finished mutipoint editing
         selectedLinearElement:
           multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(
-                multiPointElement,
-                arrayToMap(newElements),
-              )
+            ? new LinearElementEditor(multiPointElement)
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },

packages/excalidraw/actions/actionFlip.test.tsx

@@ -1,9 +1,8 @@
-import { pointFrom } from "@excalidraw/math";
-
+import React from "react";
 import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
 import { render } from "../tests/test-utils";
-
+import { API } from "../tests/helpers/api";
+import { pointFrom } from "@excalidraw/math";
 import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
 
 const { h } = window;

packages/excalidraw/actions/actionFlip.ts

@@ -1,37 +1,32 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-import {
-  bindOrUnbindLinearElements,
-  isBindingEnabled,
-} from "@excalidraw/element";
-import { getCommonBoundingBox } from "@excalidraw/element";
-import { newElementWith } from "@excalidraw/element";
-import { deepCopyElement } from "@excalidraw/element";
-import { resizeMultipleElements } from "@excalidraw/element";
-import {
-  isArrowElement,
-  isElbowArrow,
-  isLinearElement,
-} from "@excalidraw/element";
-import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
-import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
+import { register } from "./register";
+import { getSelectedElements } from "../scene";
+import { getNonDeletedElements } from "../element";
 import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawElement,
   NonDeleted,
   NonDeletedSceneElementsMap,
-} from "@excalidraw/element/types";
-
-import { getSelectedElements } from "../scene";
-
-import { flipHorizontal, flipVertical } from "../components/icons";
-
-import { register } from "./register";
-
+} from "../element/types";
+import { resizeMultipleElements } from "../element/resizeElements";
 import type { AppClassProperties, AppState } from "../types";
+import { arrayToMap } from "../utils";
+import { CODES, KEYS } from "../keys";
+import {
+  bindOrUnbindLinearElements,
+  isBindingEnabled,
+} from "../element/binding";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { flipHorizontal, flipVertical } from "../components/icons";
+import { CaptureUpdateAction } from "../store";
+import {
+  isArrowElement,
+  isElbowArrow,
+  isLinearElement,
+} from "../element/typeChecks";
+import { mutateElement, newElementWith } from "../element/mutateElement";
+import { deepCopyElement } from "../element/newElement";
+import { getCommonBoundingBox } from "../element/bounds";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
@@ -160,9 +155,11 @@ const flipElements = (
 
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
+    elementsMap,
+    app.scene.getNonDeletedElements(),
+    app.scene,
     isBindingEnabled(appState),
     [],
-    app.scene,
     appState.zoom,
   );
 
@@ -190,13 +187,13 @@ const flipElements = (
     getCommonBoundingBox(selectedElements);
   const [diffX, diffY] = [midX - newMidX, midY - newMidY];
   otherElements.forEach((element) =>
-    app.scene.mutateElement(element, {
+    mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY,
     }),
   );
   elbowArrows.forEach((element) =>
-    app.scene.mutateElement(element, {
+    mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY,
     }),

packages/excalidraw/actions/actionFrame.ts

@@ -1,30 +1,19 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-import { mutateElement } from "@excalidraw/element";
-import { newFrameElement } from "@excalidraw/element";
-import { isFrameLikeElement } from "@excalidraw/element";
-import {
-  addElementsToFrame,
-  removeAllElementsFromFrame,
-} from "@excalidraw/element";
-import { getFrameChildren } from "@excalidraw/element";
-
-import { KEYS, updateActiveTool } from "@excalidraw/common";
-
-import { getElementsInGroup } from "@excalidraw/element";
-
-import { getCommonBounds } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import { setCursorForShape } from "../cursor";
-import { frameToolIcon } from "../components/icons";
-import { getSelectedElements } from "../scene";
-
-import { register } from "./register";
-
+import { getCommonBounds, getNonDeletedElements } from "../element";
+import type { ExcalidrawElement } from "../element/types";
+import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
+import { getFrameChildren } from "../frame";
+import { KEYS } from "../keys";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { updateActiveTool } from "../utils";
+import { setCursorForShape } from "../cursor";
+import { register } from "./register";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { frameToolIcon } from "../components/icons";
+import { CaptureUpdateAction } from "../store";
+import { getSelectedElements } from "../scene";
+import { newFrameElement } from "../element/newElement";
+import { getElementsInGroup } from "../groups";
+import { mutateElement } from "../element/mutateElement";
 
 const isSingleFrameSelected = (
   appState: UIAppState,
@@ -174,9 +163,11 @@ export const actionWrapSelectionInFrame = register({
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(elements, appState);
-    const elementsMap = app.scene.getNonDeletedElementsMap();
 
-    const [x1, y1, x2, y2] = getCommonBounds(selectedElements, elementsMap);
+    const [x1, y1, x2, y2] = getCommonBounds(
+      selectedElements,
+      app.scene.getNonDeletedElementsMap(),
+    );
     const PADDING = 16;
     const frame = newFrameElement({
       x: x1 - PADDING,
@@ -195,9 +186,13 @@ export const actionWrapSelectionInFrame = register({
       for (const elementInGroup of elementsInGroup) {
         const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
 
-        mutateElement(elementInGroup, elementsMap, {
-          groupIds: elementInGroup.groupIds.slice(0, index),
-        });
+        mutateElement(
+          elementInGroup,
+          {
+            groupIds: elementInGroup.groupIds.slice(0, index),
+          },
+          false,
+        );
       }
     }
 

packages/excalidraw/actions/actionGroup.tsx

@@ -1,21 +1,10 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { newElementWith } from "@excalidraw/element";
-
-import { isBoundToContainer } from "@excalidraw/element";
-
-import {
-  frameAndChildrenSelectedTogether,
-  getElementsInResizingFrame,
-  getFrameLikeElements,
-  getRootElements,
-  groupByFrameLikes,
-  removeElementsFromFrame,
-  replaceAllElementsInFrame,
-} from "@excalidraw/element";
-
-import { KEYS, randomId, arrayToMap, getShortcutKey } from "@excalidraw/common";
-
+import { KEYS } from "../keys";
+import { t } from "../i18n";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
+import { UngroupIcon, GroupIcon } from "../components/icons";
+import { newElementWith } from "../element/mutateElement";
+import { isSomeElementSelected } from "../scene";
 import {
   getSelectedGroupIds,
   selectGroup,
@@ -24,28 +13,28 @@ import {
   addToGroup,
   removeFromSelectedGroups,
   isElementInGroup,
-} from "@excalidraw/element";
-
-import { syncMovedIndices } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
+} from "../groups";
+import { getNonDeletedElements } from "../element";
+import { randomId } from "../random";
+import { ToolButton } from "../components/ToolButton";
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
   OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
-
-import { ToolButton } from "../components/ToolButton";
-import { UngroupIcon, GroupIcon } from "../components/icons";
-
-import { t } from "../i18n";
-
-import { isSomeElementSelected } from "../scene";
-
-import { register } from "./register";
-
+} from "../element/types";
 import type { AppClassProperties, AppState } from "../types";
+import { isBoundToContainer } from "../element/typeChecks";
+import {
+  frameAndChildrenSelectedTogether,
+  getElementsInResizingFrame,
+  getFrameLikeElements,
+  getRootElements,
+  groupByFrameLikes,
+  removeElementsFromFrame,
+  replaceAllElementsInFrame,
+} from "../frame";
+import { syncMovedIndices } from "../fractionalIndex";
+import { CaptureUpdateAction } from "../store";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {

packages/excalidraw/actions/actionHistory.tsx

@@ -1,20 +1,17 @@
-import { isWindows, KEYS, matchKey, arrayToMap } from "@excalidraw/common";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { orderByFractionalIndex } from "@excalidraw/element";
-
-import type { SceneElementsMap } from "@excalidraw/element/types";
-
-import { ToolButton } from "../components/ToolButton";
-import { UndoIcon, RedoIcon } from "../components/icons";
-import { HistoryChangedEvent } from "../history";
-import { useEmitter } from "../hooks/useEmitter";
-import { t } from "../i18n";
-
-import type { History } from "../history";
-import type { AppClassProperties, AppState } from "../types";
 import type { Action, ActionResult } from "./types";
+import { UndoIcon, RedoIcon } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import type { History } from "../history";
+import { HistoryChangedEvent } from "../history";
+import type { AppClassProperties, AppState } from "../types";
+import { KEYS, matchKey } from "../keys";
+import { arrayToMap } from "../utils";
+import { isWindows } from "../constants";
+import type { SceneElementsMap } from "../element/types";
+import type { Store } from "../store";
+import { CaptureUpdateAction } from "../store";
+import { useEmitter } from "../hooks/useEmitter";
 
 const executeHistoryAction = (
   app: AppClassProperties,
@@ -37,11 +34,7 @@ const executeHistoryAction = (
     }
 
     const [nextElementsMap, nextAppState] = result;
-
-    // order by fractional indices in case the map was accidently modified in the meantime
-    const nextElements = orderByFractionalIndex(
-      Array.from(nextElementsMap.values()),
-    );
+    const nextElements = Array.from(nextElementsMap.values());
 
     return {
       appState: nextAppState,
@@ -53,9 +46,9 @@ const executeHistoryAction = (
   return { captureUpdate: CaptureUpdateAction.EVENTUALLY };
 };
 
-type ActionCreator = (history: History) => Action;
+type ActionCreator = (history: History, store: Store) => Action;
 
-export const createUndoAction: ActionCreator = (history) => ({
+export const createUndoAction: ActionCreator = (history, store) => ({
   name: "undo",
   label: "buttons.undo",
   icon: UndoIcon,
@@ -63,7 +56,11 @@ export const createUndoAction: ActionCreator = (history) => ({
   viewMode: false,
   perform: (elements, appState, value, app) =>
     executeHistoryAction(app, appState, () =>
-      history.undo(arrayToMap(elements) as SceneElementsMap, appState),
+      history.undo(
+        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
+        appState,
+        store.snapshot,
+      ),
     ),
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
@@ -90,15 +87,19 @@ export const createUndoAction: ActionCreator = (history) => ({
   },
 });
 
-export const createRedoAction: ActionCreator = (history) => ({
+export const createRedoAction: ActionCreator = (history, store) => ({
   name: "redo",
   label: "buttons.redo",
   icon: RedoIcon,
   trackEvent: { category: "history" },
   viewMode: false,
-  perform: (elements, appState, __, app) =>
+  perform: (elements, appState, _, app) =>
     executeHistoryAction(app, appState, () =>
-      history.redo(arrayToMap(elements) as SceneElementsMap, appState),
+      history.redo(
+        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
+        appState,
+        store.snapshot,
+      ),
     ),
   keyTest: (event) =>
     (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||

packages/excalidraw/actions/actionLinearEditor.tsx

@@ -1,20 +1,12 @@
-import { LinearElementEditor } from "@excalidraw/element";
-
-import { isElbowArrow, isLinearElement } from "@excalidraw/element";
-
-import { arrayToMap } from "@excalidraw/common";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
-
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
-import { ToolButton } from "../components/ToolButton";
-import { lineEditorIcon } from "../components/icons";
-
-import { t } from "../i18n";
-
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { isElbowArrow, isLinearElement } from "../element/typeChecks";
+import type { ExcalidrawLinearElement } from "../element/types";
+import { CaptureUpdateAction } from "../store";
 import { register } from "./register";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { lineEditorIcon } from "../components/icons";
 
 export const actionToggleLinearEditor = register({
   name: "toggleLinearEditor",
@@ -53,7 +45,7 @@ export const actionToggleLinearEditor = register({
     const editingLinearElement =
       appState.editingLinearElement?.elementId === selectedElement.id
         ? null
-        : new LinearElementEditor(selectedElement, arrayToMap(elements));
+        : new LinearElementEditor(selectedElement);
     return {
       appState: {
         ...appState,

packages/excalidraw/actions/actionLink.tsx

@@ -1,16 +1,12 @@
-import { isEmbeddableElement } from "@excalidraw/element";
-
-import { KEYS, getShortcutKey } from "@excalidraw/common";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { ToolButton } from "../components/ToolButton";
 import { getContextMenuLabel } from "../components/hyperlink/Hyperlink";
 import { LinkIcon } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+import { isEmbeddableElement } from "../element/typeChecks";
 import { t } from "../i18n";
-
+import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
-
+import { CaptureUpdateAction } from "../store";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";
 
 export const actionLink = register({

packages/excalidraw/actions/actionMenu.tsx

@@ -1,16 +1,10 @@
-import { KEYS } from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { showSelectedShapeActions } from "@excalidraw/element";
-
-import { CaptureUpdateAction } from "@excalidraw/element";
-
-import { ToolButton } from "../components/ToolButton";
 import { HamburgerMenuIcon, HelpIconThin, palette } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
-
+import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
+import { KEYS } from "../keys";
+import { CaptureUpdateAction } from "../store";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",