build(deps): bump ws from 7.5.9 to 7.5.10 in /dev-docs

Bumps [ws](https://github.com/websockets/ws) from 7.5.9 to 7.5.10. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/compare/7.5.9...7.5.10) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
fix: CVE-2023-45133 (#7988 )
2024-08-02 12:46:01 +00:00 · 2024-08-02 14:44:38 +02:00 · 2024-08-02 11:55:15 +02:00 · 2024-08-01 19:40:54 +02:00 · 2024-08-01 18:39:03 +02:00 · 2024-08-01 20:19:37 +05:30
188 changed files with 11893 additions and 5181 deletions
@@ -23,8 +23,8 @@
    "clsx": "^1.2.1",
    "docusaurus-plugin-sass": "0.2.3",
    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
    "sass": "1.57.1"
  },
  "devDependencies": {
@@ -59,7 +59,7 @@ pre a {
  padding: 5px;
  background: #70b1ec;
  color: white;
-  font-weight: bold;
+  font-weight: 700;
  border: none;
 }

@@ -1547,7 +1547,7 @@
    "@docusaurus/theme-search-algolia" "2.2.0"
    "@docusaurus/types" "2.2.0"

-"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2":
  version "5.5.2"
  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -6190,14 +6190,13 @@ react-dev-utils@^12.0.1:
    strip-ansi "^6.0.1"
    text-table "^0.2.0"

-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"

 react-error-overlay@^6.0.11:
  version "6.0.11"
@@ -6260,6 +6259,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
  dependencies:
    "@babel/runtime" "^7.10.3"

+"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
+  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.2"
+
 react-router-config@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -6310,13 +6317,12 @@ react-textarea-autosize@^8.3.2:
    use-composed-ref "^1.3.0"
    use-latest "^1.2.1"

-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"

 readable-stream@^2.0.1:
  version "2.3.7"
@@ -6664,13 +6670,12 @@ sax@^1.2.4:
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==

-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"

 schema-utils@2.7.0:
  version "2.7.0"
@@ -7801,14 +7806,14 @@ write-file-atomic@^3.0.0:
    typedarray-to-buffer "^3.1.5"

 ws@^7.3.1:
-  version "7.5.9"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
-  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==

 ws@^8.4.2:
-  version "8.8.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
-  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==

 xdg-basedir@^4.0.0:
  version "4.0.0"
@@ -872,7 +872,7 @@ export default function App({
                files: excalidrawAPI.getFiles(),
              });
              const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Virgil";
+              ctx.font = "30px Excalifont";
              ctx.strokeText("My custom text", 50, 60);
              setCanvasUrl(canvas.toDataURL());
            }}
@@ -893,7 +893,7 @@ export default function App({
                files: excalidrawAPI.getFiles(),
              });
              const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Virgil";
+              ctx.font = "30px Excalifont";
              ctx.strokeText("My custom text", 50, 60);
              setCanvasUrl(canvas.toDataURL());
            }}
@@ -46,7 +46,7 @@ const elements: ExcalidrawElementSkeleton[] = [
 ];
 export default {
  elements,
-  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
+  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 5 },
  scrollToContent: true,
  libraryItems: [
    [
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# copied assets
+public/*.woff2
@@ -3,7 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
    "dev": "yarn build:workspace && next dev -p 3005",
    "build": "yarn build:workspace && next build",
    "start": "next start -p 3006",
@@ -12,13 +13,13 @@
  "dependencies": {
    "@excalidraw/excalidraw": "*",
    "next": "14.1",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
    "path2d-polyfill": "2.0.1",
    "typescript": "^5"
  }
@@ -1,4 +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
@@ -15,7 +16,9 @@ export default function Page() {
    <>
      <a href="/excalidraw-in-pages">Switch to Pages router</a>
      <h1 className="page-title">App Router</h1>
-
+      <Script id="load-env-variables" strategy="beforeInteractive">
+        {`window["EXCALIDRAW_ASSET_PATH"] = window.origin;`}
+      </Script>
      {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */}
      <ExcalidrawWithClientOnly />
    </>
@@ -7,7 +7,7 @@ a {
  color: #1c7ed6;
  font-size: 20px;
  text-decoration: none;
-  font-weight: 550;
+  font-weight: 500;
 }

 .page-title {
@@ -0,0 +1,2 @@
+# copied assets
+public/*.woff2
@@ -11,6 +11,7 @@
    <title>React App</title>
    <script>
      window.name = "codesandbox";
+      window.EXCALIDRAW_ASSET_PATH = window.origin;
    </script>
    <link rel="stylesheet" href="/dist/browser/dev/index.css" />
  </head>
@@ -12,8 +12,10 @@
    "typescript": "^5"
  },
  "scripts": {
-    "start": "yarn workspace @excalidraw/excalidraw run build:esm && vite",
-    "build": "yarn workspace @excalidraw/excalidraw run build:esm && vite build",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
+    "start": "yarn build:workspace && vite",
+    "build": "yarn build:workspace && vite build",
    "build:preview": "yarn build && vite preview --port 5002"
  }
 }
@@ -17,7 +17,7 @@ export const getPreferredLanguage = () => {
  const initialLanguage =
    (detectedLanguage
      ? // region code may not be defined if user uses generic preferred language
-        // (e.g. chinese vs instead of chienese-simplified)
+        // (e.g. chinese vs instead of chinese-simplified)
        languages.find((lang) => lang.code.startsWith(detectedLanguage))?.code
      : null) || defaultLang.code;

@@ -95,6 +95,11 @@
        color: #fff;
      }
    </style>
+
+    <!-- Warmup the connection for Google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
    <!------------------------------------------------------------------------->
    <% if (typeof PROD != 'undefined' && PROD == true) { %>
    <script>
@@ -115,8 +120,55 @@
        window.location.href = "https://app.excalidraw.com";
      }
    </script>
+
+    <!-- Following placeholder is replaced during the build step -->
+    <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
+
+    <% } else { %>
+    <script>
+      window.EXCALIDRAW_ASSET_PATH = window.origin;
+    </script>
+
+    <!-- in DEV we need to preload from the local server and without the hash -->
+    <link
+      rel="preload"
+      href="../packages/excalidraw/fonts/assets/Excalifont-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="../packages/excalidraw/fonts/assets/Virgil-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="../packages/excalidraw/fonts/assets/ComicShanns-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
    <% } %>

+    <!-- For Nunito only preload the latin range, which should be good enough for now -->
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <!-- Register Assistant as the UI font, before the scene inits -->
+    <link
+      rel="stylesheet"
+      href="../packages/excalidraw/fonts/assets/fonts.css"
+      type="text/css"
+    />
+
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -124,22 +176,6 @@
    <!-- Excalidraw version -->
    <meta name="version" content="{version}" />

-    <link
-      rel="preload"
-      href="/Virgil.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="/Cascadia.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-
-    <link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
    <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
    VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
    <script>
@@ -158,7 +194,6 @@
    </script>
    <% } %>
    <script>
-      window.EXCALIDRAW_ASSET_PATH = "/";
      // setting this so that libraries installation reuses this window tab.
      window.name = "_excalidraw";
    </script>
@@ -26,7 +26,17 @@
    "node": ">=18.0.0"
  },
  "dependencies": {
-    "vite-plugin-html": "3.2.2"
+    "firebase": "8.3.3",
+    "idb-keyval": "6.0.3",
+    "jotai": "1.13.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vite-plugin-html": "3.2.2",
+    "@excalidraw/random-username": "1.0.0",
+    "@sentry/browser": "6.2.5",
+    "@sentry/integrations": "6.2.5",
+    "i18next-browser-languagedetector": "6.1.4",
+    "socket.io-client": "4.7.2"
  },
  "prettier": "@excalidraw/prettier-config",
  "scripts": {
@@ -36,7 +46,8 @@
    "build:version": "node ../scripts/build-version.js",
    "build": "yarn build:app && yarn build:version",
    "start": "yarn && vite",
-    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
+    "start:production": "yarn build && yarn serve",
+    "serve": "npx http-server build -a localhost -p 5001 -o",
    "build:preview": "yarn build && vite preview --port 5000"
  }
 }
@@ -5,7 +5,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
  class="welcome-screen-center"
 >
  <div
-    class="welcome-screen-center__logo virgil welcome-screen-decor"
+    class="welcome-screen-center__logo excalifont welcome-screen-decor"
  >
    <div
      class="ExcalidrawLogo is-small"
@@ -48,7 +48,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
    </div>
  </div>
  <div
-    class="welcome-screen-center__heading welcome-screen-decor virgil"
+    class="welcome-screen-center__heading welcome-screen-decor excalifont"
  >
    All your data is saved locally in your browser.
  </div>
@@ -5,6 +5,7 @@ import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import { createHtmlPlugin } from "vite-plugin-html";
+import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";

 // To load .env.local variables
 const envVars = loadEnv("", `../`);
@@ -22,6 +23,14 @@ export default defineConfig({
    outDir: "build",
    rollupOptions: {
      output: {
+        assetFileNames(chunkInfo) {
+          if (chunkInfo?.name?.endsWith(".woff2")) {
+            // put on root so we are flexible about the CDN path
+            return '[name]-[hash][extname]';
+          }
+
+          return 'assets/[name]-[hash][extname]';
+        },
        // Creating separate chunk for locales except for en and percentages.json so they
        // can be cached at runtime and not merged with
        // app precache. en.json and percentages.json are needed for first load
@@ -35,12 +44,13 @@ export default defineConfig({
            // Taking the substring after "locales/"
            return `locales/${id.substring(index + 8)}`;
          }
-        },
+        }
      },
    },
    sourcemap: true,
  },
  plugins: [
+    woff2BrowserPlugin(),
    react(),
    checker({
      typescript: true,
@@ -9,19 +9,8 @@
    "examples/excalidraw",
    "examples/excalidraw/*"
  ],
-  "dependencies": {
-    "@excalidraw/random-username": "1.0.0",
-    "@sentry/browser": "6.2.5",
-    "@sentry/integrations": "6.2.5",
-    "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.4",
-    "idb-keyval": "6.0.3",
-    "jotai": "1.13.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "socket.io-client": "4.7.2"
-  },
  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@excalidraw/eslint-config": "1.0.3",
    "@excalidraw/prettier-config": "1.0.2",
    "@types/chai": "4.3.0",
@@ -51,7 +40,7 @@
    "vite-plugin-ejs": "1.7.0",
    "vite-plugin-pwa": "0.17.4",
    "vite-plugin-svgr": "2.4.0",
-    "vitest": "1.5.3",
+    "vitest": "1.6.0",
    "vitest-canvas-mock": "0.3.2"
  },
  "engines": {
@@ -88,5 +77,8 @@
    "prerelease:excalidraw": "node scripts/prerelease.js",
    "build:preview": "yarn build && vite preview --port 5000",
    "release:excalidraw": "node scripts/release.js"
+  },
+  "resolutions": {
+    "@types/react": "18.2.0"
  }
 }
@@ -19,6 +19,8 @@ Please add the latest change on the top under the correct section.

 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)

+- Added font picker component to have the ability to choose from a range of different fonts. Also, changed the default fonts to `Excalifont`, `Nunito` and `Comic Shanns` and deprecated `Virgil`, `Helvetica` and `Cascadia`.
+
 - `MainMenu.DefaultItems.ToggleTheme` now supports `onSelect(theme: string)` callback, and optionally `allowSystemTheme: boolean` alongside `theme: string` to indicate you want to allow users to set to system theme (you need to handle this yourself). [#7853](https://github.com/excalidraw/excalidraw/pull/7853)

 - Add `useHandleLibrary`'s `opts.adapter` as the new recommended pattern to handle library initialization and persistence on library updates. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
@@ -5,19 +5,25 @@ import { t } from "../i18n";
 import { register } from "./register";
 import { getNonDeletedElements } from "../element";
 import type { ExcalidrawElement } from "../element/types";
-import type { AppState } from "../types";
-import { newElementWith } from "../element/mutateElement";
+import type { AppClassProperties, AppState } from "../types";
+import { mutateElement, newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
+import {
+  isBoundToContainer,
+  isElbowArrow,
+  isFrameLikeElement,
+} from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 import { StoreAction } from "../store";
+import { mutateElbowArrow } from "../element/routing";

 const deleteSelectedElements = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
+  app: AppClassProperties,
 ) => {
  const framesToBeDeleted = new Set(
    getSelectedElements(
@@ -29,6 +35,26 @@ const deleteSelectedElements = (
  return {
    elements: elements.map((el) => {
      if (appState.selectedElementIds[el.id]) {
+        if (el.boundElements) {
+          el.boundElements.forEach((candidate) => {
+            const bound = app.scene
+              .getNonDeletedElementsMap()
+              .get(candidate.id);
+            if (bound && isElbowArrow(bound)) {
+              mutateElement(bound, {
+                startBinding:
+                  el.id === bound.startBinding?.elementId
+                    ? null
+                    : bound.startBinding,
+                endBinding:
+                  el.id === bound.endBinding?.elementId
+                    ? null
+                    : bound.endBinding,
+              });
+              mutateElbowArrow(bound, app.scene, bound.points);
+            }
+          });
+        }
        return newElementWith(el, { isDeleted: true });
      }

@@ -130,7 +156,11 @@ export const actionDeleteSelected = register({
          : endBindingElement,
      };

-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        element,
+        selectedPointsIndices,
+        app.scene,
+      );

      return {
        elements,
@@ -149,7 +179,7 @@ export const actionDeleteSelected = register({
      };
    }
    let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState);
+      deleteSelectedElements(elements, appState, app);
    fixBindingsAfterDeletion(
      nextElements,
      elements.filter(({ id }) => appState.selectedElementIds[id]),
@@ -40,12 +40,11 @@ export const actionDuplicateSelection = register({
  icon: DuplicateIcon,
  trackEvent: { category: "element" },
  perform: (elements, appState, formData, app) => {
-    const elementsMap = app.scene.getNonDeletedElementsMap();
    // duplicate selected point(s) if editing a line
    if (appState.editingLinearElement) {
      const ret = LinearElementEditor.duplicateSelectedPoints(
        appState,
-        elementsMap,
+        app.scene,
      );

      if (!ret) {
@@ -38,6 +38,7 @@ export const actionFinalize = register({
            startBindingElement,
            endBindingElement,
            elementsMap,
+            scene,
          );
        }
        return {
@@ -136,6 +137,7 @@ export const actionFinalize = register({
          appState,
          { x, y },
          elementsMap,
+          elements,
        );
      }
    }
@@ -120,11 +120,14 @@ const flipElements = (
    true,
    flipDirection === "horizontal" ? maxX : minX,
    flipDirection === "horizontal" ? minY : maxY,
+    app.scene,
  );

  bindOrUnbindLinearElements(
    selectedElements.filter(isLinearElement),
    elementsMap,
+    app.scene.getNonDeletedElements(),
+    app.scene,
    isBindingEnabled(appState),
    [],
  );
@@ -50,12 +50,13 @@ export const createUndoAction: ActionCreator = (history, store) => ({
  icon: UndoIcon,
  trackEvent: { category: "history" },
  viewMode: false,
-  perform: (elements, appState) =>
+  perform: (elements, appState, value, app) =>
    writeData(appState, () =>
      history.undo(
        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
        appState,
        store.snapshot,
+        app.scene,
      ),
    ),
  keyTest: (event) =>
@@ -91,12 +92,13 @@ export const createRedoAction: ActionCreator = (history, store) => ({
  icon: RedoIcon,
  trackEvent: { category: "history" },
  viewMode: false,
-  perform: (elements, appState) =>
+  perform: (elements, appState, _, app) =>
    writeData(appState, () =>
      history.redo(
        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
        appState,
        store.snapshot,
+        app.scene,
      ),
    ),
  keyTest: (event) =>
@@ -1,6 +1,6 @@
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { isLinearElement } from "../element/typeChecks";
+import { isElbowArrow, isLinearElement } from "../element/typeChecks";
 import type { ExcalidrawLinearElement } from "../element/types";
 import { StoreAction } from "../store";
 import { register } from "./register";
@@ -29,7 +29,8 @@ export const actionToggleLinearEditor = register({
    if (
      !appState.editingLinearElement &&
      selectedElements.length === 1 &&
-      isLinearElement(selectedElements[0])
+      isLinearElement(selectedElements[0]) &&
+      !isElbowArrow(selectedElements[0])
    ) {
      return true;
    }
@@ -155,13 +155,15 @@ describe("element locking", () => {
      });
      const text = API.createElement({
        type: "text",
-        fontFamily: FONT_FAMILY.Cascadia,
+        fontFamily: FONT_FAMILY["Comic Shanns"],
      });
      h.elements = [rect, text];
      API.setSelectedElements([rect, text]);

      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
-      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
+      expect(queryByTestId(document.body, `font-family-code`)).toHaveClass(
+        "active",
+      );
    });
  });
 });
@@ -1,4 +1,6 @@
-import type { AppClassProperties, AppState, Primitive } from "../types";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { AppClassProperties, AppState, Point, Primitive } from "../types";
+import type { StoreActionType } from "../store";
 import {
  DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
  DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -9,6 +11,7 @@ import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
+import { FontPicker } from "../components/FontPicker/FontPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
@@ -38,9 +41,6 @@ import {
  FontSizeExtraLargeIcon,
  EdgeSharpIcon,
  EdgeRoundIcon,
-  FreedrawIcon,
-  FontFamilyNormalIcon,
-  FontFamilyCodeIcon,
  TextAlignLeftIcon,
  TextAlignCenterIcon,
  TextAlignRightIcon,
@@ -50,8 +50,12 @@ import {
  ArrowheadDiamondIcon,
  ArrowheadDiamondOutlineIcon,
  fontSizeIcon,
+  sharpArrowIcon,
+  roundArrowIcon,
+  elbowArrowIcon,
 } from "../components/icons";
 import {
+  ARROW_TYPE,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
@@ -65,17 +69,17 @@ import {
  redrawTextBoundingBox,
 } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
+import { getBoundTextElement } from "../element/textElement";
 import {
-  getBoundTextElement,
-  getDefaultLineHeight,
-} from "../element/textElement";
-import {
+  isArrowElement,
  isBoundToContainer,
+  isElbowArrow,
  isLinearElement,
  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
 import type {
  Arrowhead,
+  ExcalidrawBindableElement,
  ExcalidrawElement,
  ExcalidrawLinearElement,
  ExcalidrawTextElement,
@@ -94,9 +98,23 @@ import {
  isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap, getShortcutKey } from "../utils";
+import {
+  arrayToMap,
+  getFontFamilyString,
+  getShortcutKey,
+  tupleToCoors,
+} from "../utils";
 import { register } from "./register";
 import { StoreAction } from "../store";
+import { Fonts, getLineHeight } from "../fonts";
+import {
+  bindLinearElement,
+  bindPointToSnapToElementOutline,
+  calculateFixedPointForElbowArrowBinding,
+  getHoveredElementForBinding,
+} from "../element/binding";
+import { mutateElbowArrow } from "../element/routing";
+import { LinearElementEditor } from "../element/linearElementEditor";

 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;

@@ -729,104 +747,391 @@ export const actionIncreaseFontSize = register({
  },
 });

+type ChangeFontFamilyData = Partial<
+  Pick<
+    AppState,
+    "openPopup" | "currentItemFontFamily" | "currentHoveredFontFamily"
+  >
+> & {
+  /** cache of selected & editing elements populated on opened popup */
+  cachedElements?: Map<string, ExcalidrawElement>;
+  /** flag to reset all elements to their cached versions  */
+  resetAll?: true;
+  /** flag to reset all containers to their cached versions */
+  resetContainers?: true;
+};
+
 export const actionChangeFontFamily = register({
  name: "changeFontFamily",
  label: "labels.fontFamily",
  trackEvent: false,
  perform: (elements, appState, value, app) => {
-    return {
-      elements: changeProperty(
+    const { cachedElements, resetAll, resetContainers, ...nextAppState } =
+      value as ChangeFontFamilyData;
+
+    if (resetAll) {
+      const nextElements = changeProperty(
        elements,
        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              {
-                fontFamily: value,
-                lineHeight: getDefaultLineHeight(value),
-              },
-            );
-            redrawTextBoundingBox(
-              newElement,
-              app.scene.getContainerElement(oldElement),
-              app.scene.getNonDeletedElementsMap(),
-            );
+        (element) => {
+          const cachedElement = cachedElements?.get(element.id);
+          if (cachedElement) {
+            const newElement = newElementWith(element, {
+              ...cachedElement,
+            });
+
            return newElement;
          }

-          return oldElement;
+          return element;
        },
        true,
-      ),
+      );
+
+      return {
+        elements: nextElements,
+        appState: {
+          ...appState,
+          ...nextAppState,
+        },
+        storeAction: StoreAction.UPDATE,
+      };
+    }
+
+    const { currentItemFontFamily, currentHoveredFontFamily } = value;
+
+    let nexStoreAction: StoreActionType = StoreAction.NONE;
+    let nextFontFamily: FontFamilyValues | undefined;
+    let skipOnHoverRender = false;
+
+    if (currentItemFontFamily) {
+      nextFontFamily = currentItemFontFamily;
+      nexStoreAction = StoreAction.CAPTURE;
+    } else if (currentHoveredFontFamily) {
+      nextFontFamily = currentHoveredFontFamily;
+      nexStoreAction = StoreAction.NONE;
+
+      const selectedTextElements = getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+      }).filter((element) => isTextElement(element));
+
+      // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined
+      if (selectedTextElements.length > 200) {
+        skipOnHoverRender = true;
+      } else {
+        let i = 0;
+        let textLengthAccumulator = 0;
+
+        while (
+          i < selectedTextElements.length &&
+          textLengthAccumulator < 5000
+        ) {
+          const textElement = selectedTextElements[i] as ExcalidrawTextElement;
+          textLengthAccumulator += textElement?.originalText.length || 0;
+          i++;
+        }
+
+        if (textLengthAccumulator > 5000) {
+          skipOnHoverRender = true;
+        }
+      }
+    }
+
+    const result = {
      appState: {
        ...appState,
-        currentItemFontFamily: value,
+        ...nextAppState,
      },
-      storeAction: StoreAction.CAPTURE,
+      storeAction: nexStoreAction,
    };
+
+    if (nextFontFamily && !skipOnHoverRender) {
+      const elementContainerMapping = new Map<
+        ExcalidrawTextElement,
+        ExcalidrawElement | null
+      >();
+      let uniqueGlyphs = new Set<string>();
+      let skipFontFaceCheck = false;
+
+      const fontsCache = Array.from(Fonts.loadedFontsCache.values());
+      const fontFamily = Object.entries(FONT_FAMILY).find(
+        ([_, value]) => value === nextFontFamily,
+      )?.[0];
+
+      // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)
+      if (
+        currentHoveredFontFamily &&
+        fontFamily &&
+        fontsCache.some((sig) => sig.startsWith(fontFamily))
+      ) {
+        skipFontFaceCheck = true;
+      }
+
+      // following causes re-render so make sure we changed the family
+      // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg
+      Object.assign(result, {
+        elements: changeProperty(
+          elements,
+          appState,
+          (oldElement) => {
+            if (
+              isTextElement(oldElement) &&
+              (oldElement.fontFamily !== nextFontFamily ||
+                currentItemFontFamily) // force update on selection
+            ) {
+              const newElement: ExcalidrawTextElement = newElementWith(
+                oldElement,
+                {
+                  fontFamily: nextFontFamily,
+                  lineHeight: getLineHeight(nextFontFamily!),
+                },
+              );
+
+              const cachedContainer =
+                cachedElements?.get(oldElement.containerId || "") || {};
+
+              const container = app.scene.getContainerElement(oldElement);
+
+              if (resetContainers && container && cachedContainer) {
+                // reset the container back to it's cached version
+                mutateElement(container, { ...cachedContainer }, false);
+              }
+
+              if (!skipFontFaceCheck) {
+                uniqueGlyphs = new Set([
+                  ...uniqueGlyphs,
+                  ...Array.from(newElement.originalText),
+                ]);
+              }
+
+              elementContainerMapping.set(newElement, container);
+
+              return newElement;
+            }
+
+            return oldElement;
+          },
+          true,
+        ),
+      });
+
+      // size is irrelevant, but necessary
+      const fontString = `10px ${getFontFamilyString({
+        fontFamily: nextFontFamily,
+      })}`;
+      const glyphs = Array.from(uniqueGlyphs.values()).join();
+
+      if (
+        skipFontFaceCheck ||
+        window.document.fonts.check(fontString, glyphs)
+      ) {
+        // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded
+        for (const [element, container] of elementContainerMapping) {
+          // trigger synchronous redraw
+          redrawTextBoundingBox(
+            element,
+            container,
+            app.scene.getNonDeletedElementsMap(),
+            false,
+          );
+        }
+      } else {
+        // otherwise try to load all font faces for the given glyphs and redraw elements once our font faces loaded
+        window.document.fonts.load(fontString, glyphs).then((fontFaces) => {
+          for (const [element, container] of elementContainerMapping) {
+            // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)
+            const latestElement = app.scene.getElement(element.id);
+            const latestContainer = container
+              ? app.scene.getElement(container.id)
+              : null;
+
+            if (latestElement) {
+              // trigger async redraw
+              redrawTextBoundingBox(
+                latestElement as ExcalidrawTextElement,
+                latestContainer,
+                app.scene.getNonDeletedElementsMap(),
+                false,
+              );
+            }
+          }
+
+          // trigger update once we've mutated all the elements, which also updates our cache
+          app.fonts.onLoaded(fontFaces);
+        });
+      }
+    }
+
+    return result;
  },
-  PanelComponent: ({ elements, appState, updateData, app }) => {
-    const options: {
-      value: FontFamilyValues;
-      text: string;
-      icon: JSX.Element;
-      testId: string;
-    }[] = [
-      {
-        value: FONT_FAMILY.Virgil,
-        text: t("labels.handDrawn"),
-        icon: FreedrawIcon,
-        testId: "font-family-virgil",
-      },
-      {
-        value: FONT_FAMILY.Helvetica,
-        text: t("labels.normal"),
-        icon: FontFamilyNormalIcon,
-        testId: "font-family-normal",
-      },
-      {
-        value: FONT_FAMILY.Cascadia,
-        text: t("labels.code"),
-        icon: FontFamilyCodeIcon,
-        testId: "font-family-code",
-      },
-    ];
+  PanelComponent: ({ elements, appState, app, updateData }) => {
+    const cachedElementsRef = useRef<Map<string, ExcalidrawElement>>(new Map());
+    const prevSelectedFontFamilyRef = useRef<number | null>(null);
+    // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
+    const [batchedData, setBatchedData] = useState<ChangeFontFamilyData>({});
+    const isUnmounted = useRef(true);
+
+    const selectedFontFamily = useMemo(() => {
+      const getFontFamily = (
+        elementsArray: readonly ExcalidrawElement[],
+        elementsMap: Map<string, ExcalidrawElement>,
+      ) =>
+        getFormValue(
+          elementsArray,
+          appState,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.fontFamily;
+            }
+            const boundTextElement = getBoundTextElement(element, elementsMap);
+            if (boundTextElement) {
+              return boundTextElement.fontFamily;
+            }
+            return null;
+          },
+          (element) =>
+            isTextElement(element) ||
+            getBoundTextElement(element, elementsMap) !== null,
+          (hasSelection) =>
+            hasSelection
+              ? null
+              : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
+        );
+
+      // popup opened, use cached elements
+      if (
+        batchedData.openPopup === "fontFamily" &&
+        appState.openPopup === "fontFamily"
+      ) {
+        return getFontFamily(
+          Array.from(cachedElementsRef.current?.values() ?? []),
+          cachedElementsRef.current,
+        );
+      }
+
+      // popup closed, use all elements
+      if (!batchedData.openPopup && appState.openPopup !== "fontFamily") {
+        return getFontFamily(elements, app.scene.getNonDeletedElementsMap());
+      }
+
+      // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had
+      return prevSelectedFontFamilyRef.current;
+    }, [batchedData.openPopup, appState, elements, app.scene]);
+
+    useEffect(() => {
+      prevSelectedFontFamilyRef.current = selectedFontFamily;
+    }, [selectedFontFamily]);
+
+    useEffect(() => {
+      if (Object.keys(batchedData).length) {
+        updateData(batchedData);
+        // reset the data after we've used the data
+        setBatchedData({});
+      }
+      // call update only on internal state changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [batchedData]);
+
+    useEffect(() => {
+      isUnmounted.current = false;
+
+      return () => {
+        isUnmounted.current = true;
+      };
+    }, []);

    return (
      <fieldset>
        <legend>{t("labels.fontFamily")}</legend>
-        <ButtonIconSelect<FontFamilyValues | false>
-          group="font-family"
-          options={options}
-          value={getFormValue(
-            elements,
-            appState,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.fontFamily;
+        <FontPicker
+          isOpened={appState.openPopup === "fontFamily"}
+          selectedFontFamily={selectedFontFamily}
+          hoveredFontFamily={appState.currentHoveredFontFamily}
+          onSelect={(fontFamily) => {
+            setBatchedData({
+              openPopup: null,
+              currentHoveredFontFamily: null,
+              currentItemFontFamily: fontFamily,
+            });
+
+            // defensive clear so immediate close won't abuse the cached elements
+            cachedElementsRef.current.clear();
+          }}
+          onHover={(fontFamily) => {
+            setBatchedData({
+              currentHoveredFontFamily: fontFamily,
+              cachedElements: new Map(cachedElementsRef.current),
+              resetContainers: true,
+            });
+          }}
+          onLeave={() => {
+            setBatchedData({
+              currentHoveredFontFamily: null,
+              cachedElements: new Map(cachedElementsRef.current),
+              resetAll: true,
+            });
+          }}
+          onPopupChange={(open) => {
+            if (open) {
+              // open, populate the cache from scratch
+              cachedElementsRef.current.clear();
+
+              const { editingElement } = appState;
+
+              if (editingElement?.type === "text") {
+                // retrieve the latest version from the scene, as `editingElement` isn't mutated
+                const latestEditingElement = app.scene.getElement(
+                  editingElement.id,
+                );
+
+                // inside the wysiwyg editor
+                cachedElementsRef.current.set(
+                  editingElement.id,
+                  newElementWith(
+                    latestEditingElement || editingElement,
+                    {},
+                    true,
+                  ),
+                );
+              } else {
+                const selectedElements = getSelectedElements(
+                  elements,
+                  appState,
+                  {
+                    includeBoundTextElement: true,
+                  },
+                );
+
+                for (const element of selectedElements) {
+                  cachedElementsRef.current.set(
+                    element.id,
+                    newElementWith(element, {}, true),
+                  );
+                }
              }
-              const boundTextElement = getBoundTextElement(
-                element,
-                app.scene.getNonDeletedElementsMap(),
-              );
-              if (boundTextElement) {
-                return boundTextElement.fontFamily;
+
+              setBatchedData({
+                openPopup: "fontFamily",
+              });
+            } else {
+              // close, use the cache and clear it afterwards
+              const data = {
+                openPopup: null,
+                currentHoveredFontFamily: null,
+                cachedElements: new Map(cachedElementsRef.current),
+                resetAll: true,
+              } as ChangeFontFamilyData;
+
+              if (isUnmounted.current) {
+                // in case the component was unmounted by the parent, trigger the update directly
+                updateData({ ...batchedData, ...data });
+              } else {
+                setBatchedData(data);
              }
-              return null;
-            },
-            (element) =>
-              isTextElement(element) ||
-              getBoundTextElement(
-                element,
-                app.scene.getNonDeletedElementsMap(),
-              ) !== null,
-            (hasSelection) =>
-              hasSelection
-                ? null
-                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
-          )}
-          onChange={(value) => updateData(value)}
+
+              cachedElementsRef.current.clear();
+            }
+          }}
        />
      </fieldset>
    );
@@ -1019,8 +1324,12 @@ export const actionChangeRoundness = register({
  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, (el) =>
-        newElementWith(el, {
+      elements: changeProperty(elements, appState, (el) => {
+        if (isElbowArrow(el)) {
+          return el;
+        }
+
+        return newElementWith(el, {
          roundness:
            value === "round"
              ? {
@@ -1029,8 +1338,8 @@ export const actionChangeRoundness = register({
                    : ROUNDNESS.PROPORTIONAL_RADIUS,
                }
              : null,
-        }),
-      ),
+        });
+      }),
      appState: {
        ...appState,
        currentItemRoundness: value,
@@ -1070,7 +1379,8 @@ export const actionChangeRoundness = register({
            appState,
            (element) =>
              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (element) => element.hasOwnProperty("roundness"),
+            (element) =>
+              !isArrowElement(element) && element.hasOwnProperty("roundness"),
            (hasSelection) =>
              hasSelection ? null : appState.currentItemRoundness,
          )}
@@ -1233,3 +1543,219 @@ export const actionChangeArrowhead = register({
    );
  },
 });
+
+export const actionChangeArrowType = register({
+  name: "changeArrowType",
+  label: "Change arrow types",
+  trackEvent: false,
+  perform: (elements, appState, value, app) => {
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (!isArrowElement(el)) {
+          return el;
+        }
+        const newElement = newElementWith(el, {
+          roundness:
+            value === ARROW_TYPE.round
+              ? {
+                  type: ROUNDNESS.PROPORTIONAL_RADIUS,
+                }
+              : null,
+          elbowed: value === ARROW_TYPE.elbow,
+          points:
+            value === ARROW_TYPE.elbow || el.elbowed
+              ? [el.points[0], el.points[el.points.length - 1]]
+              : el.points,
+        });
+
+        if (isElbowArrow(newElement)) {
+          const elementsMap = app.scene.getNonDeletedElementsMap();
+
+          app.dismissLinearEditor();
+
+          const startGlobalPoint =
+            LinearElementEditor.getPointAtIndexGlobalCoordinates(
+              newElement,
+              0,
+              elementsMap,
+            );
+          const endGlobalPoint =
+            LinearElementEditor.getPointAtIndexGlobalCoordinates(
+              newElement,
+              -1,
+              elementsMap,
+            );
+          const startHoveredElement =
+            !newElement.startBinding &&
+            getHoveredElementForBinding(
+              tupleToCoors(startGlobalPoint),
+              elements,
+              elementsMap,
+              true,
+            );
+          const endHoveredElement =
+            !newElement.endBinding &&
+            getHoveredElementForBinding(
+              tupleToCoors(endGlobalPoint),
+              elements,
+              elementsMap,
+              true,
+            );
+          const startElement = startHoveredElement
+            ? startHoveredElement
+            : newElement.startBinding &&
+              (elementsMap.get(
+                newElement.startBinding.elementId,
+              ) as ExcalidrawBindableElement);
+          const endElement = endHoveredElement
+            ? endHoveredElement
+            : newElement.endBinding &&
+              (elementsMap.get(
+                newElement.endBinding.elementId,
+              ) as ExcalidrawBindableElement);
+
+          const finalStartPoint = startHoveredElement
+            ? bindPointToSnapToElementOutline(
+                startGlobalPoint,
+                endGlobalPoint,
+                startHoveredElement,
+                elementsMap,
+              )
+            : startGlobalPoint;
+          const finalEndPoint = endHoveredElement
+            ? bindPointToSnapToElementOutline(
+                endGlobalPoint,
+                startGlobalPoint,
+                endHoveredElement,
+                elementsMap,
+              )
+            : endGlobalPoint;
+
+          startHoveredElement &&
+            bindLinearElement(
+              newElement,
+              startHoveredElement,
+              "start",
+              elementsMap,
+            );
+          endHoveredElement &&
+            bindLinearElement(
+              newElement,
+              endHoveredElement,
+              "end",
+              elementsMap,
+            );
+
+          mutateElbowArrow(
+            newElement,
+            app.scene,
+            [finalStartPoint, finalEndPoint].map(
+              (point) =>
+                [point[0] - newElement.x, point[1] - newElement.y] as Point,
+            ),
+            [0, 0],
+            {
+              ...(startElement && newElement.startBinding
+                ? {
+                    startBinding: {
+                      // @ts-ignore TS cannot discern check above
+                      ...newElement.startBinding!,
+                      ...calculateFixedPointForElbowArrowBinding(
+                        newElement,
+                        startElement,
+                        "start",
+                        elementsMap,
+                      ),
+                    },
+                  }
+                : {}),
+              ...(endElement && newElement.endBinding
+                ? {
+                    endBinding: {
+                      // @ts-ignore TS cannot discern check above
+                      ...newElement.endBinding,
+                      ...calculateFixedPointForElbowArrowBinding(
+                        newElement,
+                        endElement,
+                        "end",
+                        elementsMap,
+                      ),
+                    },
+                  }
+                : {}),
+            },
+          );
+        } else {
+          mutateElement(
+            newElement,
+            {
+              startBinding: newElement.startBinding
+                ? { ...newElement.startBinding, fixedPoint: null }
+                : null,
+              endBinding: newElement.endBinding
+                ? { ...newElement.endBinding, fixedPoint: null }
+                : null,
+            },
+            false,
+          );
+        }
+
+        return newElement;
+      }),
+      appState: {
+        ...appState,
+        currentItemArrowType: value,
+      },
+      storeAction: StoreAction.CAPTURE,
+    };
+  },
+  PanelComponent: ({ elements, appState, updateData }) => {
+    return (
+      <fieldset>
+        <legend>{t("labels.arrowtypes")}</legend>
+        <ButtonIconSelect
+          group="arrowtypes"
+          options={[
+            {
+              value: ARROW_TYPE.sharp,
+              text: t("labels.arrowtype_sharp"),
+              icon: sharpArrowIcon,
+              testId: "sharp-arrow",
+            },
+            {
+              value: ARROW_TYPE.round,
+              text: t("labels.arrowtype_round"),
+              icon: roundArrowIcon,
+              testId: "round-arrow",
+            },
+            {
+              value: ARROW_TYPE.elbow,
+              text: t("labels.arrowtype_elbowed"),
+              icon: elbowArrowIcon,
+              testId: "elbow-arrow",
+            },
+          ]}
+          value={getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isArrowElement(element)) {
+                return element.elbowed
+                  ? ARROW_TYPE.elbow
+                  : element.roundness
+                  ? ARROW_TYPE.round
+                  : ARROW_TYPE.sharp;
+              }
+
+              return null;
+            },
+            (element) => isArrowElement(element),
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemArrowType,
+          )}
+          onChange={(value) => updateData(value)}
+        />
+      </fieldset>
+    );
+  },
+});
@@ -12,10 +12,7 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import {
-  getBoundTextElement,
-  getDefaultLineHeight,
-} from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
 import {
  hasBoundTextElement,
  canApplyRoundnessTypeToElement,
@@ -27,6 +24,7 @@ import { getSelectedElements } from "../scene";
 import type { ExcalidrawTextElement } from "../element/types";
 import { paintIcon } from "../components/icons";
 import { StoreAction } from "../store";
+import { getLineHeight } from "../fonts";

 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -122,7 +120,7 @@ export const actionPasteStyles = register({
                DEFAULT_TEXT_ALIGN,
              lineHeight:
                (elementStylesToCopyFrom as ExcalidrawTextElement).lineHeight ||
-                getDefaultLineHeight(fontFamily),
+                getLineHeight(fontFamily),
            });
            let container = null;
            if (newElement.containerId) {
@@ -70,6 +70,7 @@ export type ActionName =
  | "changeSloppiness"
  | "changeStrokeStyle"
  | "changeArrowhead"
+  | "changeArrowType"
  | "changeOpacity"
  | "changeFontSize"
  | "toggleCanvasMenu"
@@ -1,5 +1,6 @@
 import { COLOR_PALETTE } from "./colors";
 import {
+  ARROW_TYPE,
  DEFAULT_ELEMENT_PROPS,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
@@ -33,9 +34,11 @@ export const getDefaultAppState = (): Omit<
    currentItemStartArrowhead: null,
    currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
    currentItemRoundness: "round",
+    currentItemArrowType: ARROW_TYPE.round,
    currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
    currentItemTextAlign: DEFAULT_TEXT_ALIGN,
+    currentHoveredFontFamily: null,
    cursorButton: "up",
    activeEmbeddable: null,
    draggingElement: null,
@@ -142,6 +145,11 @@ const APP_STATE_STORAGE_CONF = (<
    export: false,
    server: false,
  },
+  currentItemArrowType: {
+    browser: true,
+    export: false,
+    server: false,
+  },
  currentItemOpacity: { browser: true, export: false, server: false },
  currentItemRoughness: { browser: true, export: false, server: false },
  currentItemStartArrowhead: { browser: true, export: false, server: false },
@@ -149,6 +157,7 @@ const APP_STATE_STORAGE_CONF = (<
  currentItemStrokeStyle: { browser: true, export: false, server: false },
  currentItemStrokeWidth: { browser: true, export: false, server: false },
  currentItemTextAlign: { browser: true, export: false, server: false },
+  currentHoveredFontFamily: { browser: false, export: false, server: false },
  cursorButton: { browser: true, export: false, server: false },
  activeEmbeddable: { browser: false, export: false, server: false },
  draggingElement: { browser: false, export: false, server: false },
@@ -0,0 +1,105 @@
+export default class BinaryHeap<T> {
+  private content: T[] = [];
+
+  constructor(private scoreFunction: (node: T) => number) {}
+
+  sinkDown(idx: number) {
+    const node = this.content[idx];
+    while (idx > 0) {
+      const parentN = ((idx + 1) >> 1) - 1;
+      const parent = this.content[parentN];
+      if (this.scoreFunction(node) < this.scoreFunction(parent)) {
+        this.content[parentN] = node;
+        this.content[idx] = parent;
+        idx = parentN; // TODO: Optimize
+      } else {
+        break;
+      }
+    }
+  }
+
+  bubbleUp(idx: number) {
+    const length = this.content.length;
+    const node = this.content[idx];
+    const score = this.scoreFunction(node);
+
+    while (true) {
+      const child2N = (idx + 1) << 1;
+      const child1N = child2N - 1;
+      let swap = null;
+      let child1Score = 0;
+
+      if (child1N < length) {
+        const child1 = this.content[child1N];
+        child1Score = this.scoreFunction(child1);
+        if (child1Score < score) {
+          swap = child1N;
+        }
+      }
+
+      if (child2N < length) {
+        const child2 = this.content[child2N];
+        const child2Score = this.scoreFunction(child2);
+        if (child2Score < (swap === null ? score : child1Score)) {
+          swap = child2N;
+        }
+      }
+
+      if (swap !== null) {
+        this.content[idx] = this.content[swap];
+        this.content[swap] = node;
+        idx = swap; // TODO: Optimize
+      } else {
+        break;
+      }
+    }
+  }
+
+  push(node: T) {
+    this.content.push(node);
+    this.sinkDown(this.content.length - 1);
+  }
+
+  pop(): T | null {
+    if (this.content.length === 0) {
+      return null;
+    }
+
+    const result = this.content[0];
+    const end = this.content.pop()!;
+
+    if (this.content.length > 0) {
+      this.content[0] = end;
+      this.bubbleUp(0);
+    }
+
+    return result;
+  }
+
+  remove(node: T) {
+    if (this.content.length === 0) {
+      return;
+    }
+
+    const i = this.content.indexOf(node);
+    const end = this.content.pop()!;
+
+    if (i < this.content.length) {
+      this.content[i] = end;
+
+      if (this.scoreFunction(end) < this.scoreFunction(node)) {
+        this.sinkDown(i);
+      } else {
+        this.bubbleUp(i);
+      }
+    }
+  }
+
+  size(): number {
+    return this.content.length;
+  }
+
+  rescoreElement(node: T) {
+    this.sinkDown(this.content.indexOf(node));
+  }
+}
@@ -29,6 +29,7 @@ import type {
 } from "./element/types";
 import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
 import { getNonDeletedGroupIds } from "./groups";
+import type Scene from "./scene/Scene";
 import { getObservedAppState } from "./store";
 import type {
  AppState,
@@ -1053,6 +1054,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
  public applyTo(
    elements: SceneElementsMap,
    snapshot: Map<string, OrderedExcalidrawElement>,
+    scene: Scene,
  ): [SceneElementsMap, boolean] {
    let nextElements = toBrandedType<SceneElementsMap>(new Map(elements));
    let changedElements: Map<string, OrderedExcalidrawElement>;
@@ -1100,7 +1102,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
    try {
      // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state
      ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);
-      ElementsChange.redrawBoundArrows(nextElements, changedElements);
+      ElementsChange.redrawBoundArrows(nextElements, changedElements, scene);

      // the following reorder performs also mutations, but only on new instances of changed elements
      // (unless something goes really bad and it fallbacks to fixing all invalid indices)
@@ -1457,10 +1459,13 @@ export class ElementsChange implements Change<SceneElementsMap> {
  private static redrawBoundArrows(
    elements: SceneElementsMap,
    changed: Map<string, OrderedExcalidrawElement>,
+    scene: Scene,
  ) {
    for (const element of changed.values()) {
      if (!element.isDeleted && isBindableElement(element)) {
-        updateBoundElements(element, elements);
+        updateBoundElements(element, elements, scene, {
+          changedElements: changed,
+        });
      }
    }
  }
@@ -257,8 +257,6 @@ const chartLines = (
    type: "line",
    x,
    y,
-    startArrowhead: null,
-    endArrowhead: null,
    width: chartWidth,
    points: [
      [0, 0],
@@ -273,8 +271,6 @@ const chartLines = (
    type: "line",
    x,
    y,
-    startArrowhead: null,
-    endArrowhead: null,
    height: chartHeight,
    points: [
      [0, 0],
@@ -289,8 +285,6 @@ const chartLines = (
    type: "line",
    x,
    y: y - BAR_HEIGHT - BAR_GAP,
-    startArrowhead: null,
-    endArrowhead: null,
    strokeStyle: "dotted",
    width: chartWidth,
    opacity: GRID_OPACITY,
@@ -418,8 +412,6 @@ const chartTypeLine = (
    type: "line",
    x: x + BAR_GAP + BAR_WIDTH / 2,
    y: y - BAR_GAP,
-    startArrowhead: null,
-    endArrowhead: null,
    height: maxY - minY,
    width: maxX - minX,
    strokeWidth: 2,
@@ -453,8 +445,6 @@ const chartTypeLine = (
      type: "line",
      x: x + cx + BAR_WIDTH / 2 + BAR_GAP / 2,
      y: y - cy,
-      startArrowhead: null,
-      endArrowhead: null,
      height: cy,
      strokeStyle: "dotted",
      opacity: GRID_OPACITY,
@@ -21,10 +21,11 @@ import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { hasStrokeColor } from "../scene/comparisons";
+import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import {
  hasBoundTextElement,
+  isElbowArrow,
  isLinearElement,
  isTextElement,
 } from "../element/typeChecks";
@@ -121,7 +122,8 @@ export const SelectedShapeActions = ({
  const showLineEditorAction =
    !appState.editingLinearElement &&
    targetElements.length === 1 &&
-    isLinearElement(targetElements[0]);
+    isLinearElement(targetElements[0]) &&
+    !isElbowArrow(targetElements[0]);

  return (
    <div className="panelColumn">
@@ -155,13 +157,16 @@ export const SelectedShapeActions = ({
        <>{renderAction("changeRoundness")}</>
      )}

+      {(toolIsArrow(appState.activeTool.type) ||
+        targetElements.some((element) => toolIsArrow(element.type))) && (
+        <>{renderAction("changeArrowType")}</>
+      )}
+
      {(appState.activeTool.type === "text" ||
        targetElements.some(isTextElement)) && (
        <>
-          {renderAction("changeFontSize")}
-
          {renderAction("changeFontFamily")}
-
+          {renderAction("changeFontSize")}
          {(appState.activeTool.type === "text" ||
            suppportsHorizontalAlign(targetElements, elementsMap)) &&
            renderAction("changeTextAlign")}
@@ -48,7 +48,7 @@ import {
 } from "../appState";
 import type { PastedMixedContent } from "../clipboard";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
-import type { EXPORT_IMAGE_TYPES } from "../constants";
+import { ARROW_TYPE, type EXPORT_IMAGE_TYPES } from "../constants";
 import {
  APP_NAME,
  CURSOR_TYPE,
@@ -142,6 +142,7 @@ import {
  newEmbeddableElement,
  newMagicFrameElement,
  newIframeElement,
+  newArrowElement,
 } from "../element/newElement";
 import {
  hasBoundTextElement,
@@ -156,11 +157,11 @@ import {
  isLinearElement,
  isLinearElementType,
  isUsingAdaptiveRadius,
-  isFrameElement,
  isIframeElement,
  isIframeLikeElement,
  isMagicFrameElement,
  isTextBindableContainer,
+  isElbowArrow,
 } from "../element/typeChecks";
 import type {
  ExcalidrawBindableElement,
@@ -182,6 +183,7 @@ import type {
  ExcalidrawIframeElement,
  ExcalidrawEmbeddableElement,
  Ordered,
+  ExcalidrawArrowElement,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -224,8 +226,7 @@ import type {
  ScrollBars,
 } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey, getElementShape } from "../shapes";
-import type { GeometricShape } from "../../utils/geometry/shape";
+import { findShapeByKey, getBoundTextShape, getElementShape } from "../shapes";
 import { getSelectionBoxShape } from "../../utils/geometry/shape";
 import { isPointInShape } from "../../utils/collision";
 import type {
@@ -321,7 +322,6 @@ import {
  getBoundTextElement,
  getContainerCenter,
  getContainerElement,
-  getDefaultLineHeight,
  getLineHeightInPx,
  getMinTextElementWidth,
  isMeasureTextSupported,
@@ -337,7 +337,7 @@ import {
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
-import { Fonts } from "../scene/Fonts";
+import { Fonts, getLineHeight } from "../fonts";
 import {
  getFrameChildren,
  isCursorInFrame,
@@ -428,6 +428,7 @@ import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 import { getVisibleSceneBounds } from "../element/bounds";
 import { isMaybeMermaidDefinition } from "../mermaid";
+import { mutateElbowArrow } from "../element/routing";

 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -532,8 +533,8 @@ class App extends React.Component<AppProps, AppState> {
  private excalidrawContainerRef = React.createRef<HTMLDivElement>();

  public scene: Scene;
+  public fonts: Fonts;
  public renderer: Renderer;
-  private fonts: Fonts;
  private resizeObserver: ResizeObserver | undefined;
  private nearestScrollableContainer: HTMLElement | Document | undefined;
  public library: AppClassProperties["library"];
@@ -1290,15 +1291,7 @@ class App extends React.Component<AppProps, AppState> {

    const isDarkTheme = this.state.theme === THEME.DARK;

-    let frameIndex = 0;
-    let magicFrameIndex = 0;
-
    return this.scene.getNonDeletedFramesLikes().map((f) => {
-      if (isFrameElement(f)) {
-        frameIndex++;
-      } else {
-        magicFrameIndex++;
-      }
      if (
        !isElementInViewport(
          f,
@@ -1332,10 +1325,7 @@ class App extends React.Component<AppProps, AppState> {

      let frameNameJSX;

-      const frameName = getFrameLikeTitle(
-        f,
-        isFrameElement(f) ? frameIndex : magicFrameIndex,
-      );
+      const frameName = getFrameLikeTitle(f);

      if (f.id === this.state.editingFrame) {
        const frameNameInEdit = frameName;
@@ -2126,6 +2116,14 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

+  public dismissLinearEditor = () => {
+    setTimeout(() => {
+      this.setState({
+        editingLinearElement: null,
+      });
+    });
+  };
+
  public syncActionResult = withBatchedUpdates((actionResult: ActionResult) => {
    if (this.unmounted || actionResult === false) {
      return;
@@ -2335,11 +2333,6 @@ class App extends React.Component<AppProps, AppState> {
        }),
      };
    }
-    // FontFaceSet loadingdone event we listen on may not always fire
-    // (looking at you Safari), so on init we manually load fonts for current
-    // text elements on canvas, and rerender them once done. This also
-    // seems faster even in browsers that do fire the loadingdone event.
-    this.fonts.loadFontsForElements(scene.elements);

    this.resetStore();
    this.resetHistory();
@@ -2347,6 +2340,12 @@ class App extends React.Component<AppProps, AppState> {
      ...scene,
      storeAction: StoreAction.UPDATE,
    });
+
+    // FontFaceSet loadingdone event we listen on may not always
+    // fire (looking at you Safari), so on init we manually load all
+    // fonts and rerender scene text elements once done. This also
+    // seems faster even in browsers that do fire the loadingdone event.
+    this.fonts.loadSceneFonts();
  };

  private isMobileBreakpoint = (width: number, height: number) => {
@@ -2439,6 +2438,10 @@ class App extends React.Component<AppProps, AppState> {
          configurable: true,
          value: this.store,
        },
+        fonts: {
+          configurable: true,
+          value: this.fonts,
+        },
      });
    }

@@ -2576,7 +2579,7 @@ class App extends React.Component<AppProps, AppState> {
      // rerender text elements on font load to fix #637 && #1553
      addEventListener(document.fonts, "loadingdone", (event) => {
        const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;
-        this.fonts.onFontsLoaded(loadedFontFaces);
+        this.fonts.onLoaded(loadedFontFaces);
      }),
      // Safari-only desktop pinch zoom
      addEventListener(
@@ -2812,6 +2815,7 @@ class App extends React.Component<AppProps, AppState> {
          ),
        ),
        this.scene.getNonDeletedElementsMap(),
+        this.scene.getNonDeletedElements(),
      );
    }

@@ -3379,7 +3383,7 @@ class App extends React.Component<AppProps, AppState> {
      fontSize: textElementProps.fontSize,
      fontFamily: textElementProps.fontFamily,
    });
-    const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
+    const lineHeight = getLineHeight(textElementProps.fontFamily);
    const [x1, , x2] = getVisibleSceneBounds(this.state);
    // long texts should not go beyond 800 pixels in width nor should it go below 200 px
    const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);
@@ -3397,13 +3401,13 @@ class App extends React.Component<AppProps, AppState> {
          });

          let metrics = measureText(originalText, fontString, lineHeight);
-          const isTextWrapped = metrics.width > maxTextWidth;
+          const isTextUnwrapped = metrics.width > maxTextWidth;

-          const text = isTextWrapped
+          const text = isTextUnwrapped
            ? wrapText(originalText, fontString, maxTextWidth)
            : originalText;

-          metrics = isTextWrapped
+          metrics = isTextUnwrapped
            ? measureText(text, fontString, lineHeight)
            : metrics;

@@ -3417,7 +3421,7 @@ class App extends React.Component<AppProps, AppState> {
            text,
            originalText,
            lineHeight,
-            autoResize: !isTextWrapped,
+            autoResize: !isTextUnwrapped,
            frameId: topLayerFrame ? topLayerFrame.id : null,
          });
          acc.push(element);
@@ -3956,14 +3960,27 @@ class App extends React.Component<AppProps, AppState> {
      }

      if (isArrowKey(event.key)) {
-        const step =
-          (this.state.gridSize &&
+        const selectedElements = this.scene.getSelectedElements({
+          selectedElementIds: this.state.selectedElementIds,
+          includeBoundTextElement: true,
+          includeElementsInFrames: true,
+        });
+
+        const elbowArrow = selectedElements.find(isElbowArrow) as
+          | ExcalidrawArrowElement
+          | undefined;
+
+        const step = elbowArrow
+          ? elbowArrow.startBinding || elbowArrow.endBinding
+            ? 0
+            : ELEMENT_TRANSLATE_AMOUNT
+          : (this.state.gridSize &&
+              (event.shiftKey
+                ? ELEMENT_TRANSLATE_AMOUNT
+                : this.state.gridSize)) ||
            (event.shiftKey
-              ? ELEMENT_TRANSLATE_AMOUNT
-              : this.state.gridSize)) ||
-          (event.shiftKey
-            ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
-            : ELEMENT_TRANSLATE_AMOUNT);
+              ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
+              : ELEMENT_TRANSLATE_AMOUNT);

        let offsetX = 0;
        let offsetY = 0;
@@ -3978,26 +3995,27 @@ class App extends React.Component<AppProps, AppState> {
          offsetY = step;
        }

-        const selectedElements = this.scene.getSelectedElements({
-          selectedElementIds: this.state.selectedElementIds,
-          includeBoundTextElement: true,
-          includeElementsInFrames: true,
-        });
-
        selectedElements.forEach((element) => {
          mutateElement(element, {
            x: element.x + offsetX,
            y: element.y + offsetY,
          });

-          updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
-            simultaneouslyUpdated: selectedElements,
-          });
+          updateBoundElements(
+            element,
+            this.scene.getNonDeletedElementsMap(),
+            this.scene,
+            {
+              simultaneouslyUpdated: selectedElements,
+            },
+          );
        });

        this.setState({
          suggestedBindings: getSuggestedBindingsForArrows(
-            selectedElements,
+            selectedElements.filter(
+              (element) => element.id !== elbowArrow?.id || step !== 0,
+            ),
            this.scene.getNonDeletedElementsMap(),
          ),
        });
@@ -4015,11 +4033,13 @@ class App extends React.Component<AppProps, AppState> {
                  selectedElements[0].id
              ) {
                this.store.shouldCaptureIncrement();
-                this.setState({
-                  editingLinearElement: new LinearElementEditor(
-                    selectedElement,
-                  ),
-                });
+                if (!isElbowArrow(selectedElement)) {
+                  this.setState({
+                    editingLinearElement: new LinearElementEditor(
+                      selectedElement,
+                    ),
+                  });
+                }
              }
            }
          } else if (
@@ -4067,6 +4087,16 @@ class App extends React.Component<AppProps, AppState> {
              })`,
            );
          }
+          if (shape === "arrow" && this.state.activeTool.type === "arrow") {
+            this.setState((prevState) => ({
+              currentItemArrowType:
+                prevState.currentItemArrowType === ARROW_TYPE.sharp
+                  ? ARROW_TYPE.round
+                  : prevState.currentItemArrowType === ARROW_TYPE.round
+                  ? ARROW_TYPE.elbow
+                  : ARROW_TYPE.sharp,
+            }));
+          }
          this.setActiveTool({ type: shape });
          event.stopPropagation();
        } else if (event.key === KEYS.Q) {
@@ -4107,6 +4137,36 @@ class App extends React.Component<AppProps, AppState> {
        }
      }

+      if (
+        !event[KEYS.CTRL_OR_CMD] &&
+        event.shiftKey &&
+        event.key.toLowerCase() === KEYS.F
+      ) {
+        const selectedElements = this.scene.getSelectedElements(this.state);
+
+        if (
+          this.state.activeTool.type === "selection" &&
+          !selectedElements.length
+        ) {
+          return;
+        }
+
+        if (
+          this.state.activeTool.type === "text" ||
+          selectedElements.find(
+            (element) =>
+              isTextElement(element) ||
+              getBoundTextElement(
+                element,
+                this.scene.getNonDeletedElementsMap(),
+              ),
+          )
+        ) {
+          event.preventDefault();
+          this.setState({ openPopup: "fontFamily" });
+        }
+      }
+
      if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
        if (this.state.activeTool.type === "laser") {
          this.setActiveTool({ type: "selection" });
@@ -4170,6 +4230,8 @@ class App extends React.Component<AppProps, AppState> {
      bindOrUnbindLinearElements(
        this.scene.getSelectedElements(this.state).filter(isLinearElement),
        this.scene.getNonDeletedElementsMap(),
+        this.scene.getNonDeletedElements(),
+        this.scene,
        isBindingEnabled(this.state),
        this.state.selectedLinearElement?.selectedPointsIndices ?? [],
      );
@@ -4401,7 +4463,7 @@ class App extends React.Component<AppProps, AppState> {
      onChange: withBatchedUpdates((nextOriginalText) => {
        updateElement(nextOriginalText, false);
        if (isNonDeletedElement(element)) {
-          updateBoundElements(element, elementsMap);
+          updateBoundElements(element, elementsMap, this.scene);
        }
      }),
      onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
@@ -4481,37 +4543,6 @@ class App extends React.Component<AppProps, AppState> {
    return null;
  }

-  private getBoundTextShape(element: ExcalidrawElement): GeometricShape | null {
-    const boundTextElement = getBoundTextElement(
-      element,
-      this.scene.getNonDeletedElementsMap(),
-    );
-
-    if (boundTextElement) {
-      if (element.type === "arrow") {
-        return getElementShape(
-          {
-            ...boundTextElement,
-            // arrow's bound text accurate position is not stored in the element's property
-            // but rather calculated and returned from the following static method
-            ...LinearElementEditor.getBoundTextElementPosition(
-              element,
-              boundTextElement,
-              this.scene.getNonDeletedElementsMap(),
-            ),
-          },
-          this.scene.getNonDeletedElementsMap(),
-        );
-      }
-      return getElementShape(
-        boundTextElement,
-        this.scene.getNonDeletedElementsMap(),
-      );
-    }
-
-    return null;
-  }
-
  private getElementAtPosition(
    x: number,
    y: number,
@@ -4643,7 +4674,7 @@ class App extends React.Component<AppProps, AppState> {
    const hitBoundTextOfElement = hitElementBoundText(
      x,
      y,
-      this.getBoundTextShape(element),
+      getBoundTextShape(element, this.scene.getNonDeletedElementsMap()),
    );
    if (hitBoundTextOfElement) {
      return true;
@@ -4761,7 +4792,7 @@ class App extends React.Component<AppProps, AppState> {
      existingTextElement?.fontFamily || this.state.currentItemFontFamily;

    const lineHeight =
-      existingTextElement?.lineHeight || getDefaultLineHeight(fontFamily);
+      existingTextElement?.lineHeight || getLineHeight(fontFamily);
    const fontSize = this.state.currentItemFontSize;

    if (
@@ -4881,7 +4912,9 @@ class App extends React.Component<AppProps, AppState> {
      if (
        event[KEYS.CTRL_OR_CMD] &&
        (!this.state.editingLinearElement ||
-          this.state.editingLinearElement.elementId !== selectedElements[0].id)
+          this.state.editingLinearElement.elementId !==
+            selectedElements[0].id) &&
+        !isElbowArrow(selectedElements[0])
      ) {
        this.store.shouldCaptureIncrement();
        this.setState({
@@ -5224,7 +5257,7 @@ class App extends React.Component<AppProps, AppState> {
        scenePointerX,
        scenePointerY,
        this.state,
-        this.scene.getNonDeletedElementsMap(),
+        this.scene,
      );

      if (
@@ -5311,7 +5344,9 @@ class App extends React.Component<AppProps, AppState> {
        const [gridX, gridY] = getGridPoint(
          scenePointerX,
          scenePointerY,
-          event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+          event[KEYS.CTRL_OR_CMD] || isElbowArrow(multiElement)
+            ? null
+            : this.state.gridSize,
        );

        const [lastCommittedX, lastCommittedY] =
@@ -5335,16 +5370,35 @@ class App extends React.Component<AppProps, AppState> {
        if (isPathALoop(points, this.state.zoom.value)) {
          setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
        }
-        // update last uncommitted point
-        mutateElement(multiElement, {
-          points: [
-            ...points.slice(0, -1),
+        if (isElbowArrow(multiElement)) {
+          mutateElbowArrow(
+            multiElement,
+            this.scene,
            [
-              lastCommittedX + dxFromLastCommitted,
-              lastCommittedY + dyFromLastCommitted,
+              ...points.slice(0, -1),
+              [
+                lastCommittedX + dxFromLastCommitted,
+                lastCommittedY + dyFromLastCommitted,
+              ],
            ],
-          ],
-        });
+            undefined,
+            undefined,
+            {
+              isDragging: true,
+            },
+          );
+        } else {
+          // update last uncommitted point
+          mutateElement(multiElement, {
+            points: [
+              ...points.slice(0, -1),
+              [
+                lastCommittedX + dxFromLastCommitted,
+                lastCommittedY + dyFromLastCommitted,
+              ],
+            ],
+          });
+        }
      }

      return;
@@ -5379,8 +5433,9 @@ class App extends React.Component<AppProps, AppState> {
      }

      if (
-        !this.state.selectedLinearElement ||
-        this.state.selectedLinearElement.hoverPointIndex === -1
+        (!this.state.selectedLinearElement ||
+          this.state.selectedLinearElement.hoverPointIndex === -1) &&
+        !(selectedElements.length === 1 && isElbowArrow(selectedElements[0]))
      ) {
        const elementWithTransformHandleType =
          getElementWithTransformHandleType(
@@ -5668,7 +5723,12 @@ class App extends React.Component<AppProps, AppState> {
          setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
        }
      } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
-        setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+        if (
+          !isElbowArrow(element) ||
+          !(element.startBinding || element.endBinding)
+        ) {
+          setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+        }
      }

      if (
@@ -6242,6 +6302,7 @@ class App extends React.Component<AppProps, AppState> {
    const origin = viewportCoordsToSceneCoords(event, this.state);
    const selectedElements = this.scene.getSelectedElements(this.state);
    const [minX, minY, maxX, maxY] = getCommonBounds(selectedElements);
+    const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow) === 0;

    return {
      origin,
@@ -6250,7 +6311,9 @@ class App extends React.Component<AppProps, AppState> {
        getGridPoint(
          origin.x,
          origin.y,
-          event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+          event[KEYS.CTRL_OR_CMD] || isElbowArrowOnly
+            ? null
+            : this.state.gridSize,
        ),
      ),
      scrollbars: isOverScrollBars(
@@ -6431,7 +6494,7 @@ class App extends React.Component<AppProps, AppState> {
            this.store,
            pointerDownState.origin,
            linearElementEditor,
-            this,
+            this.scene,
          );
          if (ret.hitElement) {
            pointerDownState.hit.element = ret.hitElement;
@@ -6763,6 +6826,7 @@ class App extends React.Component<AppProps, AppState> {

    const boundElement = getHoveredElementForBinding(
      pointerDownState.origin,
+      this.scene.getNonDeletedElements(),
      this.scene.getNonDeletedElementsMap(),
    );
    this.scene.insertElement(element);
@@ -6933,6 +6997,17 @@ class App extends React.Component<AppProps, AppState> {
        return;
      }

+      // Elbow arrows cannot be created by putting down points
+      // only the start and end points can be defined
+      if (isElbowArrow(multiElement) && multiElement.points.length > 1) {
+        mutateElement(multiElement, {
+          lastCommittedPoint:
+            multiElement.points[multiElement.points.length - 1],
+        });
+        this.actionManager.executeAction(actionFinalize);
+        return;
+      }
+
      const { x: rx, y: ry, lastCommittedPoint } = multiElement;

      // clicking inside commit zone → finalize arrow
@@ -6988,26 +7063,50 @@ class App extends React.Component<AppProps, AppState> {
          ? [currentItemStartArrowhead, currentItemEndArrowhead]
          : [null, null];

-      const element = newLinearElement({
-        type: elementType,
-        x: gridX,
-        y: gridY,
-        strokeColor: this.state.currentItemStrokeColor,
-        backgroundColor: this.state.currentItemBackgroundColor,
-        fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
-        strokeStyle: this.state.currentItemStrokeStyle,
-        roughness: this.state.currentItemRoughness,
-        opacity: this.state.currentItemOpacity,
-        roundness:
-          this.state.currentItemRoundness === "round"
-            ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
-            : null,
-        startArrowhead,
-        endArrowhead,
-        locked: false,
-        frameId: topLayerFrame ? topLayerFrame.id : null,
-      });
+      const element =
+        elementType === "arrow"
+          ? newArrowElement({
+              type: elementType,
+              x: gridX,
+              y: gridY,
+              strokeColor: this.state.currentItemStrokeColor,
+              backgroundColor: this.state.currentItemBackgroundColor,
+              fillStyle: this.state.currentItemFillStyle,
+              strokeWidth: this.state.currentItemStrokeWidth,
+              strokeStyle: this.state.currentItemStrokeStyle,
+              roughness: this.state.currentItemRoughness,
+              opacity: this.state.currentItemOpacity,
+              roundness:
+                this.state.currentItemArrowType === ARROW_TYPE.round
+                  ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
+                  : // note, roundness doesn't have any effect for elbow arrows,
+                    // but it's best to set it to null as well
+                    null,
+              startArrowhead,
+              endArrowhead,
+              locked: false,
+              frameId: topLayerFrame ? topLayerFrame.id : null,
+              elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
+            })
+          : newLinearElement({
+              type: elementType,
+              x: gridX,
+              y: gridY,
+              strokeColor: this.state.currentItemStrokeColor,
+              backgroundColor: this.state.currentItemBackgroundColor,
+              fillStyle: this.state.currentItemFillStyle,
+              strokeWidth: this.state.currentItemStrokeWidth,
+              strokeStyle: this.state.currentItemStrokeStyle,
+              roughness: this.state.currentItemRoughness,
+              opacity: this.state.currentItemOpacity,
+              roundness:
+                this.state.currentItemRoundness === "round"
+                  ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
+                  : null,
+              locked: false,
+              frameId: topLayerFrame ? topLayerFrame.id : null,
+            });
+
      this.setState((prevState) => {
        const nextSelectedElementIds = {
          ...prevState.selectedElementIds,
@@ -7025,7 +7124,9 @@ class App extends React.Component<AppProps, AppState> {
      });
      const boundElement = getHoveredElementForBinding(
        pointerDownState.origin,
+        this.scene.getNonDeletedElements(),
        this.scene.getNonDeletedElementsMap(),
+        isElbowArrow(element),
      );

      this.scene.insertElement(element);
@@ -7362,7 +7463,7 @@ class App extends React.Component<AppProps, AppState> {
            );
          },
          linearElementEditor,
-          this.scene.getNonDeletedElementsMap(),
+          this.scene,
        );
        if (didDrag) {
          pointerDownState.lastCoords.x = pointerCoords.x;
@@ -7486,18 +7587,24 @@ class App extends React.Component<AppProps, AppState> {
              pointerDownState,
              selectedElements,
              dragOffset,
-              this.state,
              this.scene,
              snapOffset,
              event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
            );

-          this.setState({
-            suggestedBindings: getSuggestedBindingsForArrows(
-              selectedElements,
-              this.scene.getNonDeletedElementsMap(),
-            ),
-          });
+          if (
+            selectedElements.length !== 1 ||
+            !isElbowArrow(selectedElements[0])
+          ) {
+            this.setState({
+              suggestedBindings: getSuggestedBindingsForArrows(
+                selectedElements,
+                this.scene.getNonDeletedElementsMap(),
+              ),
+            });
+          }
+
+          //}

          // We duplicate the selected element if alt is pressed on pointer move
          if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {
@@ -7637,6 +7744,17 @@ class App extends React.Component<AppProps, AppState> {
          mutateElement(draggingElement, {
            points: [...points, [dx, dy]],
          });
+        } else if (points.length > 1 && isElbowArrow(draggingElement)) {
+          mutateElbowArrow(
+            draggingElement,
+            this.scene,
+            [...points.slice(0, -1), [dx, dy]],
+            [0, 0],
+            undefined,
+            {
+              isDragging: true,
+            },
+          );
        } else if (points.length === 2) {
          mutateElement(draggingElement, {
            points: [...points.slice(0, -1), [dx, dy]],
@@ -7842,7 +7960,7 @@ class App extends React.Component<AppProps, AppState> {
            childEvent,
            this.state.editingLinearElement,
            this.state,
-            this,
+            this.scene,
          );
          if (editingLinearElement !== this.state.editingLinearElement) {
            this.setState({
@@ -7866,7 +7984,7 @@ class App extends React.Component<AppProps, AppState> {
            childEvent,
            this.state.selectedLinearElement,
            this.state,
-            this,
+            this.scene,
          );

          const { startBindingElement, endBindingElement } =
@@ -7878,6 +7996,7 @@ class App extends React.Component<AppProps, AppState> {
              startBindingElement,
              endBindingElement,
              elementsMap,
+              this.scene,
            );
          }

@@ -8017,6 +8136,7 @@ class App extends React.Component<AppProps, AppState> {
              this.state,
              pointerCoords,
              this.scene.getNonDeletedElementsMap(),
+              this.scene.getNonDeletedElements(),
            );
          }
          this.setState({ suggestedBindings: [], startBoundElement: null });
@@ -8578,6 +8698,8 @@ class App extends React.Component<AppProps, AppState> {
        bindOrUnbindLinearElements(
          linearElements,
          this.scene.getNonDeletedElementsMap(),
+          this.scene.getNonDeletedElements(),
+          this.scene,
          isBindingEnabled(this.state),
          this.state.selectedLinearElement?.selectedPointsIndices ?? [],
        );
@@ -9065,6 +9187,7 @@ class App extends React.Component<AppProps, AppState> {
  }): void => {
    const hoveredBindableElement = getHoveredElementForBinding(
      pointerCoords,
+      this.scene.getNonDeletedElements(),
      this.scene.getNonDeletedElementsMap(),
    );
    this.setState({
@@ -9092,7 +9215,9 @@ class App extends React.Component<AppProps, AppState> {
      (acc: NonDeleted<ExcalidrawBindableElement>[], coords) => {
        const hoveredBindableElement = getHoveredElementForBinding(
          coords,
+          this.scene.getNonDeletedElements(),
          this.scene.getNonDeletedElementsMap(),
+          isArrowElement(linearElement) && isElbowArrow(linearElement),
        );
        if (
          hoveredBindableElement != null &&
@@ -9620,6 +9745,7 @@ class App extends React.Component<AppProps, AppState> {
        resizeY,
        pointerDownState.resize.center.x,
        pointerDownState.resize.center.y,
+        this.scene,
      )
    ) {
      const suggestedBindings = getSuggestedBindingsForArrows(
@@ -9936,6 +10062,7 @@ class App extends React.Component<AppProps, AppState> {
 declare global {
  interface Window {
    h: {
+      scene: Scene;
      elements: readonly ExcalidrawElement[];
      state: AppState;
      setState: React.Component<any, AppState>["setState"];
@@ -9962,6 +10089,12 @@ export const createTestHook = () => {
          );
        },
      },
+      scene: {
+        configurable: true,
+        get() {
+          return this.app?.scene;
+        },
+      },
    });
  }
 };
@@ -0,0 +1,12 @@
+@import "../css/theme";
+
+.excalidraw {
+  button.standalone {
+    @include outlineButtonIconStyles;
+
+    & > * {
+      // dissalow pointer events on children, so we always have event.target on the button itself
+      pointer-events: none;
+    }
+  }
+}
@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+
+import "./ButtonIcon.scss";
+
+interface ButtonIconProps {
+  icon: JSX.Element;
+  title: string;
+  className?: string;
+  testId?: string;
+  /** if not supplied, defaults to value identity check */
+  active?: boolean;
+  /** include standalone style (could interfere with parent styles) */
+  standalone?: boolean;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
+  (props, ref) => {
+    const { title, className, testId, active, standalone, icon, onClick } =
+      props;
+    return (
+      <button
+        type="button"
+        ref={ref}
+        key={title}
+        title={title}
+        data-testid={testId}
+        className={clsx(className, { standalone, active })}
+        onClick={onClick}
+      >
+        {icon}
+      </button>
+    );
+  },
+);
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { ButtonIcon } from "./ButtonIcon";

 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
 export const ButtonIconSelect = <T extends Object>(
@@ -24,21 +25,17 @@ export const ButtonIconSelect = <T extends Object>(
      }
  ),
 ) => (
-  <div className="buttonList buttonListIcon">
+  <div className="buttonList">
    {props.options.map((option) =>
      props.type === "button" ? (
-        <button
-          type="button"
+        <ButtonIcon
          key={option.text}
-          onClick={(event) => props.onClick(option.value, event)}
-          className={clsx({
-            active: option.active ?? props.value === option.value,
-          })}
-          data-testid={option.testId}
+          icon={option.icon}
          title={option.text}
-        >
-          {option.icon}
-        </button>
+          testId={option.testId}
+          active={option.active ?? props.value === option.value}
+          onClick={(event) => props.onClick(option.value, event)}
+        />
      ) : (
        <label
          key={option.text}
@@ -0,0 +1,10 @@
+export const ButtonSeparator = () => (
+  <div
+    style={{
+      width: 1,
+      height: "1rem",
+      backgroundColor: "var(--default-border-color)",
+      margin: "0 auto",
+    }}
+  />
+);
@@ -20,7 +20,7 @@
    align-items: center;

    @include isMobile {
-      max-width: 175px;
+      max-width: 11rem;
    }
  }

@@ -1,22 +1,24 @@
-import { isInteractive, isTransparent, isWritableElement } from "../../utils";
+import { isTransparent } from "../../utils";
 import type { ExcalidrawElement } from "../../element/types";
 import type { AppState } from "../../types";
 import { TopPicks } from "./TopPicks";
+import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
 import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
-import { useDevice, useExcalidrawContainer } from "../App";
+import { useExcalidrawContainer } from "../App";
 import type { ColorTuple, ColorPaletteCustom } from "../../colors";
 import { COLOR_PALETTE } from "../../colors";
 import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
+import { useRef } from "react";
 import { jotaiScope } from "../../jotai";
 import { ColorInput } from "./ColorInput";
-import { useRef } from "react";
 import { activeEyeDropperAtom } from "../EyeDropper";
+import { PropertiesPopover } from "../PropertiesPopover";

 import "./ColorPicker.scss";

@@ -71,6 +73,7 @@ const ColorPickerPopupContent = ({
  | "palette"
  | "updateData"
 >) => {
+  const { container } = useExcalidrawContainer();
  const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);

  const [eyeDropperState, setEyeDropperState] = useAtom(
@@ -78,9 +81,6 @@ const ColorPickerPopupContent = ({
    jotaiScope,
  );

-  const { container } = useExcalidrawContainer();
-  const device = useDevice();
-
  const colorInputJSX = (
    <div>
      <PickerHeading>{t("colorPicker.hexCode")}</PickerHeading>
@@ -94,6 +94,7 @@ const ColorPickerPopupContent = ({
      />
    </div>
  );
+
  const popoverRef = useRef<HTMLDivElement>(null);

  const focusPickerContent = () => {
@@ -103,120 +104,73 @@ const ColorPickerPopupContent = ({
  };

  return (
-    <Popover.Portal container={container}>
-      <Popover.Content
-        ref={popoverRef}
-        className="focus-visible-none"
-        data-prevent-outside-click
-        onFocusOutside={(event) => {
-          focusPickerContent();
+    <PropertiesPopover
+      container={container}
+      style={{ maxWidth: "208px" }}
+      onFocusOutside={(event) => {
+        // refocus due to eye dropper
+        focusPickerContent();
+        event.preventDefault();
+      }}
+      onPointerDownOutside={(event) => {
+        if (eyeDropperState) {
+          // prevent from closing if we click outside the popover
+          // while eyedropping (e.g. click when clicking the sidebar;
+          // the eye-dropper-backdrop is prevented downstream)
          event.preventDefault();
-        }}
-        onPointerDownOutside={(event) => {
-          if (eyeDropperState) {
-            // prevent from closing if we click outside the popover
-            // while eyedropping (e.g. click when clicking the sidebar;
-            // the eye-dropper-backdrop is prevented downstream)
-            event.preventDefault();
-          }
-        }}
-        onCloseAutoFocus={(e) => {
-          e.stopPropagation();
-          // prevents focusing the trigger
-          e.preventDefault();
-
-          // return focus to excalidraw container unless
-          // user focuses an interactive element, such as a button, or
-          // enters the text editor by clicking on canvas with the text tool
-          if (container && !isInteractive(document.activeElement)) {
-            container.focus();
-          }
-
-          updateData({ openPopup: null });
-          setActiveColorPickerSection(null);
-        }}
-        side={
-          device.editor.isMobile && !device.viewport.isLandscape
-            ? "bottom"
-            : "right"
        }
-        align={
-          device.editor.isMobile && !device.viewport.isLandscape
-            ? "center"
-            : "start"
-        }
-        alignOffset={-16}
-        sideOffset={20}
-        style={{
-          zIndex: "var(--zIndex-layerUI)",
-          backgroundColor: "var(--popup-bg-color)",
-          maxWidth: "208px",
-          maxHeight: window.innerHeight,
-          padding: "12px",
-          borderRadius: "8px",
-          boxSizing: "border-box",
-          overflowY: "auto",
-          boxShadow:
-            "0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702)",
-        }}
-      >
-        {palette ? (
-          <Picker
-            palette={palette}
-            color={color}
-            onChange={(changedColor) => {
-              onChange(changedColor);
-            }}
-            onEyeDropperToggle={(force) => {
-              setEyeDropperState((state) => {
-                if (force) {
-                  state = state || {
-                    keepOpenOnAlt: true,
+      }}
+      onClose={() => {
+        updateData({ openPopup: null });
+        setActiveColorPickerSection(null);
+      }}
+    >
+      {palette ? (
+        <Picker
+          palette={palette}
+          color={color}
+          onChange={(changedColor) => {
+            onChange(changedColor);
+          }}
+          onEyeDropperToggle={(force) => {
+            setEyeDropperState((state) => {
+              if (force) {
+                state = state || {
+                  keepOpenOnAlt: true,
+                  onSelect: onChange,
+                  colorPickerType: type,
+                };
+                state.keepOpenOnAlt = true;
+                return state;
+              }
+
+              return force === false || state
+                ? null
+                : {
+                    keepOpenOnAlt: false,
                    onSelect: onChange,
                    colorPickerType: type,
                  };
-                  state.keepOpenOnAlt = true;
-                  return state;
-                }
-
-                return force === false || state
-                  ? null
-                  : {
-                      keepOpenOnAlt: false,
-                      onSelect: onChange,
-                      colorPickerType: type,
-                    };
-              });
-            }}
-            onEscape={(event) => {
-              if (eyeDropperState) {
-                setEyeDropperState(null);
-              } else if (isWritableElement(event.target)) {
-                focusPickerContent();
-              } else {
-                updateData({ openPopup: null });
-              }
-            }}
-            label={label}
-            type={type}
-            elements={elements}
-            updateData={updateData}
-          >
-            {colorInputJSX}
-          </Picker>
-        ) : (
-          colorInputJSX
-        )}
-        <Popover.Arrow
-          width={20}
-          height={10}
-          style={{
-            fill: "var(--popup-bg-color)",
-            filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+            });
          }}
-        />
-      </Popover.Content>
-    </Popover.Portal>
+          onEscape={(event) => {
+            if (eyeDropperState) {
+              setEyeDropperState(null);
+            } else {
+              updateData({ openPopup: null });
+            }
+          }}
+          label={label}
+          type={type}
+          elements={elements}
+          updateData={updateData}
+        >
+          {colorInputJSX}
+        </Picker>
+      ) : (
+        colorInputJSX
+      )}
+    </PropertiesPopover>
  );
 };

@@ -232,7 +186,7 @@ const ColorPickerTrigger = ({
  return (
    <Popover.Trigger
      type="button"
-      className={clsx("color-picker__button active-color", {
+      className={clsx("color-picker__button active-color properties-trigger", {
        "is-transparent": color === "transparent" || !color,
      })}
      aria-label={label}
@@ -268,14 +222,7 @@ export const ColorPicker = ({
          type={type}
          topPicks={topPicks}
        />
-        <div
-          style={{
-            width: 1,
-            height: "100%",
-            backgroundColor: "var(--default-border-color)",
-            margin: "0 auto",
-          }}
-        />
+        <ButtonSeparator />
        <Popover.Root
          open={appState.openPopup === type}
          onOpenChange={(open) => {
@@ -138,7 +138,7 @@ export const Picker = ({
            event.stopPropagation();
          }
        }}
-        className="color-picker-content"
+        className="color-picker-content properties-content"
        // to allow focusing by clicking but not by tabbing
        tabIndex={-1}
      >
@@ -0,0 +1,15 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .FontPicker__container {
+    display: grid;
+    grid-template-columns: calc(1rem + 3 * var(--default-button-size)) 1rem 1fr; // calc ~ 2 gaps + 4 buttons
+    align-items: center;
+
+    @include isMobile {
+      max-width: calc(
+        2rem + 4 * var(--default-button-size)
+      ); // 4 gaps + 4 buttons
+    }
+  }
+}
@@ -0,0 +1,110 @@
+import React, { useCallback, useMemo } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
+import { FontPickerList } from "./FontPickerList";
+import { FontPickerTrigger } from "./FontPickerTrigger";
+import { ButtonIconSelect } from "../ButtonIconSelect";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
+import { ButtonSeparator } from "../ButtonSeparator";
+import type { FontFamilyValues } from "../../element/types";
+import { FONT_FAMILY } from "../../constants";
+import { t } from "../../i18n";
+
+import "./FontPicker.scss";
+
+export const DEFAULT_FONTS = [
+  {
+    value: FONT_FAMILY.Excalifont,
+    icon: FreedrawIcon,
+    text: t("labels.handDrawn"),
+    testId: "font-family-handrawn",
+  },
+  {
+    value: FONT_FAMILY.Nunito,
+    icon: FontFamilyNormalIcon,
+    text: t("labels.normal"),
+    testId: "font-family-normal",
+  },
+  {
+    value: FONT_FAMILY["Comic Shanns"],
+    icon: FontFamilyCodeIcon,
+    text: t("labels.code"),
+    testId: "font-family-code",
+  },
+];
+
+const defaultFontFamilies = new Set(DEFAULT_FONTS.map((x) => x.value));
+
+export const isDefaultFont = (fontFamily: number | null) => {
+  if (!fontFamily) {
+    return false;
+  }
+
+  return defaultFontFamilies.has(fontFamily);
+};
+
+interface FontPickerProps {
+  isOpened: boolean;
+  selectedFontFamily: FontFamilyValues | null;
+  hoveredFontFamily: FontFamilyValues | null;
+  onSelect: (fontFamily: FontFamilyValues) => void;
+  onHover: (fontFamily: FontFamilyValues) => void;
+  onLeave: () => void;
+  onPopupChange: (open: boolean) => void;
+}
+
+export const FontPicker = React.memo(
+  ({
+    isOpened,
+    selectedFontFamily,
+    hoveredFontFamily,
+    onSelect,
+    onHover,
+    onLeave,
+    onPopupChange,
+  }: FontPickerProps) => {
+    const defaultFonts = useMemo(() => DEFAULT_FONTS, []);
+    const onSelectCallback = useCallback(
+      (value: number | false) => {
+        if (value) {
+          onSelect(value);
+        }
+      },
+      [onSelect],
+    );
+
+    return (
+      <div role="dialog" aria-modal="true" className="FontPicker__container">
+        <ButtonIconSelect<FontFamilyValues | false>
+          type="button"
+          options={defaultFonts}
+          value={selectedFontFamily}
+          onClick={onSelectCallback}
+        />
+        <ButtonSeparator />
+        <Popover.Root open={isOpened} onOpenChange={onPopupChange}>
+          <FontPickerTrigger selectedFontFamily={selectedFontFamily} />
+          {isOpened && (
+            <FontPickerList
+              selectedFontFamily={selectedFontFamily}
+              hoveredFontFamily={hoveredFontFamily}
+              onSelect={onSelectCallback}
+              onHover={onHover}
+              onLeave={onLeave}
+              onOpen={() => onPopupChange(true)}
+              onClose={() => onPopupChange(false)}
+            />
+          )}
+        </Popover.Root>
+      </div>
+    );
+  },
+  (prev, next) =>
+    prev.isOpened === next.isOpened &&
+    prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily,
+);
@@ -0,0 +1,268 @@
+import React, {
+  useMemo,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  type KeyboardEventHandler,
+} from "react";
+import { useApp, useAppProps, useExcalidrawContainer } from "../App";
+import { PropertiesPopover } from "../PropertiesPopover";
+import { QuickSearch } from "../QuickSearch";
+import { ScrollableList } from "../ScrollableList";
+import DropdownMenuGroup from "../dropdownMenu/DropdownMenuGroup";
+import DropdownMenuItem, {
+  DropDownMenuItemBadgeType,
+  DropDownMenuItemBadge,
+} from "../dropdownMenu/DropdownMenuItem";
+import { type FontFamilyValues } from "../../element/types";
+import { arrayToList, debounce, getFontFamilyString } from "../../utils";
+import { t } from "../../i18n";
+import { fontPickerKeyHandler } from "./keyboardNavHandlers";
+import { Fonts } from "../../fonts";
+import type { ValueOf } from "../../utility-types";
+
+export interface FontDescriptor {
+  value: number;
+  icon: JSX.Element;
+  text: string;
+  deprecated?: true;
+  badge?: {
+    type: ValueOf<typeof DropDownMenuItemBadgeType>;
+    placeholder: string;
+  };
+}
+
+interface FontPickerListProps {
+  selectedFontFamily: FontFamilyValues | null;
+  hoveredFontFamily: FontFamilyValues | null;
+  onSelect: (value: number) => void;
+  onHover: (value: number) => void;
+  onLeave: () => void;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export const FontPickerList = React.memo(
+  ({
+    selectedFontFamily,
+    hoveredFontFamily,
+    onSelect,
+    onHover,
+    onLeave,
+    onOpen,
+    onClose,
+  }: FontPickerListProps) => {
+    const { container } = useExcalidrawContainer();
+    const { fonts } = useApp();
+    const { showDeprecatedFonts } = useAppProps();
+
+    const [searchTerm, setSearchTerm] = useState("");
+    const inputRef = useRef<HTMLInputElement>(null);
+    const allFonts = useMemo(
+      () =>
+        Array.from(Fonts.registered.entries())
+          .filter(([_, { metadata }]) => !metadata.serverSide)
+          .map(([familyId, { metadata, fonts }]) => {
+            const fontDescriptor = {
+              value: familyId,
+              icon: metadata.icon,
+              text: fonts[0].fontFace.family,
+            };
+
+            if (metadata.deprecated) {
+              Object.assign(fontDescriptor, {
+                deprecated: metadata.deprecated,
+                badge: {
+                  type: DropDownMenuItemBadgeType.RED,
+                  placeholder: t("fontList.badge.old"),
+                },
+              });
+            }
+
+            return fontDescriptor as FontDescriptor;
+          })
+          .sort((a, b) =>
+            a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1,
+          ),
+      [],
+    );
+
+    const sceneFamilies = useMemo(
+      () => new Set(fonts.getSceneFontFamilies()),
+      // cache per selected font family, so hover re-render won't mess it up
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [selectedFontFamily],
+    );
+
+    const sceneFonts = useMemo(
+      () => allFonts.filter((font) => sceneFamilies.has(font.value)), // always show all the fonts in the scene, even those that were deprecated
+      [allFonts, sceneFamilies],
+    );
+
+    const availableFonts = useMemo(
+      () =>
+        allFonts.filter(
+          (font) =>
+            !sceneFamilies.has(font.value) &&
+            (showDeprecatedFonts || !font.deprecated), // skip deprecated fonts
+        ),
+      [allFonts, sceneFamilies, showDeprecatedFonts],
+    );
+
+    const filteredFonts = useMemo(
+      () =>
+        arrayToList(
+          [...sceneFonts, ...availableFonts].filter((font) =>
+            font.text?.toLowerCase().includes(searchTerm),
+          ),
+        ),
+      [sceneFonts, availableFonts, searchTerm],
+    );
+
+    const hoveredFont = useMemo(() => {
+      let font;
+
+      if (hoveredFontFamily) {
+        font = filteredFonts.find((font) => font.value === hoveredFontFamily);
+      } else if (selectedFontFamily) {
+        font = filteredFonts.find((font) => font.value === selectedFontFamily);
+      }
+
+      if (!font && searchTerm) {
+        if (filteredFonts[0]?.value) {
+          // hover first element on search
+          onHover(filteredFonts[0].value);
+        } else {
+          // re-render cache on no results
+          onLeave();
+        }
+      }
+
+      return font;
+    }, [
+      hoveredFontFamily,
+      selectedFontFamily,
+      searchTerm,
+      filteredFonts,
+      onHover,
+      onLeave,
+    ]);
+
+    const onKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+      (event) => {
+        const handled = fontPickerKeyHandler({
+          event,
+          inputRef,
+          hoveredFont,
+          filteredFonts,
+          onSelect,
+          onHover,
+          onClose,
+        });
+
+        if (handled) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      [hoveredFont, filteredFonts, onSelect, onHover, onClose],
+    );
+
+    useEffect(() => {
+      onOpen();
+
+      return () => {
+        onClose();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const sceneFilteredFonts = useMemo(
+      () => filteredFonts.filter((font) => sceneFamilies.has(font.value)),
+      [filteredFonts, sceneFamilies],
+    );
+
+    const availableFilteredFonts = useMemo(
+      () => filteredFonts.filter((font) => !sceneFamilies.has(font.value)),
+      [filteredFonts, sceneFamilies],
+    );
+
+    const renderFont = (font: FontDescriptor, index: number) => (
+      <DropdownMenuItem
+        key={font.value}
+        icon={font.icon}
+        value={font.value}
+        order={index}
+        textStyle={{
+          fontFamily: getFontFamilyString({ fontFamily: font.value }),
+        }}
+        hovered={font.value === hoveredFont?.value}
+        selected={font.value === selectedFontFamily}
+        // allow to tab between search and selected font
+        tabIndex={font.value === selectedFontFamily ? 0 : -1}
+        onClick={(e) => {
+          onSelect(Number(e.currentTarget.value));
+        }}
+        onMouseMove={() => {
+          if (hoveredFont?.value !== font.value) {
+            onHover(font.value);
+          }
+        }}
+      >
+        {font.text}
+        {font.badge && (
+          <DropDownMenuItemBadge type={font.badge.type}>
+            {font.badge.placeholder}
+          </DropDownMenuItemBadge>
+        )}
+      </DropdownMenuItem>
+    );
+
+    const groups = [];
+
+    if (sceneFilteredFonts.length) {
+      groups.push(
+        <DropdownMenuGroup title={t("fontList.sceneFonts")} key="group_1">
+          {sceneFilteredFonts.map(renderFont)}
+        </DropdownMenuGroup>,
+      );
+    }
+
+    if (availableFilteredFonts.length) {
+      groups.push(
+        <DropdownMenuGroup title={t("fontList.availableFonts")} key="group_2">
+          {availableFilteredFonts.map((font, index) =>
+            renderFont(font, index + sceneFilteredFonts.length),
+          )}
+        </DropdownMenuGroup>,
+      );
+    }
+
+    return (
+      <PropertiesPopover
+        className="properties-content"
+        container={container}
+        style={{ width: "15rem" }}
+        onClose={onClose}
+        onPointerLeave={onLeave}
+        onKeyDown={onKeyDown}
+      >
+        <QuickSearch
+          ref={inputRef}
+          placeholder={t("quickSearch.placeholder")}
+          onChange={debounce(setSearchTerm, 20)}
+        />
+        <ScrollableList
+          className="dropdown-menu fonts manual-hover"
+          placeholder={t("fontList.empty")}
+        >
+          {groups.length ? groups : null}
+        </ScrollableList>
+      </PropertiesPopover>
+    );
+  },
+  (prev, next) =>
+    prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily,
+);
@@ -0,0 +1,38 @@
+import * as Popover from "@radix-ui/react-popover";
+import { useMemo } from "react";
+import { ButtonIcon } from "../ButtonIcon";
+import { TextIcon } from "../icons";
+import type { FontFamilyValues } from "../../element/types";
+import { t } from "../../i18n";
+import { isDefaultFont } from "./FontPicker";
+
+interface FontPickerTriggerProps {
+  selectedFontFamily: FontFamilyValues | null;
+}
+
+export const FontPickerTrigger = ({
+  selectedFontFamily,
+}: FontPickerTriggerProps) => {
+  const isTriggerActive = useMemo(
+    () => Boolean(selectedFontFamily && !isDefaultFont(selectedFontFamily)),
+    [selectedFontFamily],
+  );
+
+  return (
+    <Popover.Trigger asChild>
+      {/* Empty div as trigger so it's stretched 100% due to different button sizes */}
+      <div>
+        <ButtonIcon
+          standalone
+          icon={TextIcon}
+          title={t("labels.showFonts")}
+          className="properties-trigger"
+          testId={"font-family-show-fonts"}
+          active={isTriggerActive}
+          // no-op
+          onClick={() => {}}
+        />
+      </div>
+    </Popover.Trigger>
+  );
+};
@@ -0,0 +1,66 @@
+import type { Node } from "../../utils";
+import { KEYS } from "../../keys";
+import { type FontDescriptor } from "./FontPickerList";
+
+interface FontPickerKeyNavHandlerProps {
+  event: React.KeyboardEvent<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  hoveredFont: Node<FontDescriptor> | undefined;
+  filteredFonts: Node<FontDescriptor>[];
+  onClose: () => void;
+  onSelect: (value: number) => void;
+  onHover: (value: number) => void;
+}
+
+export const fontPickerKeyHandler = ({
+  event,
+  inputRef,
+  hoveredFont,
+  filteredFonts,
+  onClose,
+  onSelect,
+  onHover,
+}: FontPickerKeyNavHandlerProps) => {
+  if (
+    !event[KEYS.CTRL_OR_CMD] &&
+    event.shiftKey &&
+    event.key.toLowerCase() === KEYS.F
+  ) {
+    // refocus input on the popup trigger shortcut
+    inputRef.current?.focus();
+    return true;
+  }
+
+  if (event.key === KEYS.ESCAPE) {
+    onClose();
+    return true;
+  }
+
+  if (event.key === KEYS.ENTER) {
+    if (hoveredFont?.value) {
+      onSelect(hoveredFont.value);
+    }
+
+    return true;
+  }
+
+  if (event.key === KEYS.ARROW_DOWN) {
+    if (hoveredFont?.next) {
+      onHover(hoveredFont.next.value);
+    } else if (filteredFonts[0]?.value) {
+      onHover(filteredFonts[0].value);
+    }
+
+    return true;
+  }
+
+  if (event.key === KEYS.ARROW_UP) {
+    if (hoveredFont?.prev) {
+      onHover(hoveredFont.prev.value);
+    } else if (filteredFonts[filteredFonts.length - 1]?.value) {
+      onHover(filteredFonts[filteredFonts.length - 1].value);
+    }
+
+    return true;
+  }
+};
@@ -8,7 +8,7 @@

    h3 {
      margin: 1.5rem 0;
-      font-weight: bold;
+      font-weight: 700;
      font-size: 1.125rem;
    }

@@ -82,7 +82,7 @@
    &__island {
      h4 {
        font-size: 1rem;
-        font-weight: bold;
+        font-weight: 700;
        margin: 0;
        margin-bottom: 0.625rem;
      }
@@ -458,6 +458,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("labels.showBackground")}
              shortcuts={[getShortcutKey("G")]}
            />
+            <Shortcut
+              label={t("labels.showFonts")}
+              shortcuts={[getShortcutKey("Shift+F")]}
+            />
            <Shortcut
              label={t("labels.decreaseFontSize")}
              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
@@ -30,10 +30,13 @@ const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
    return t("hints.eraserRevert");
  }
  if (activeTool.type === "arrow" || activeTool.type === "line") {
-    if (!multiMode) {
-      return t("hints.linearElement");
+    if (multiMode) {
+      return t("hints.linearElementMulti");
    }
-    return t("hints.linearElementMulti");
+    if (activeTool.type === "arrow") {
+      return t("hints.arrowTool", { arrowShortcut: getShortcutKey("A") });
+    }
+    return t("hints.linearElement");
  }

  if (activeTool.type === "freedraw") {
@@ -11,7 +11,7 @@
  .library-actions-counter {
    background-color: var(--color-primary);
    color: var(--color-primary-light);
-    font-weight: bold;
+    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -13,7 +13,7 @@

    &__label {
      color: var(--color-primary);
-      font-weight: bold;
+      font-weight: 700;
      font-size: 1.125rem;
      margin-bottom: 0.75rem;
    }
@@ -62,7 +62,7 @@
    &__header {
      color: var(--color-primary);
      font-size: 1.125rem;
-      font-weight: bold;
+      font-weight: 700;
      margin-bottom: 0.75rem;
      width: 100%;
      padding-right: 4rem; // due to dropdown button
@@ -0,0 +1,96 @@
+import React, { type ReactNode } from "react";
+import clsx from "clsx";
+import * as Popover from "@radix-ui/react-popover";
+
+import { useDevice } from "./App";
+import { Island } from "./Island";
+import { isInteractive } from "../utils";
+
+interface PropertiesPopoverProps {
+  className?: string;
+  container: HTMLDivElement | null;
+  children: ReactNode;
+  style?: object;
+  onClose: () => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
+  onFocusOutside?: Popover.DismissableLayerProps["onFocusOutside"];
+  onPointerDownOutside?: Popover.DismissableLayerProps["onPointerDownOutside"];
+}
+
+export const PropertiesPopover = React.forwardRef<
+  HTMLDivElement,
+  PropertiesPopoverProps
+>(
+  (
+    {
+      className,
+      container,
+      children,
+      style,
+      onClose,
+      onKeyDown,
+      onFocusOutside,
+      onPointerLeave,
+      onPointerDownOutside,
+    },
+    ref,
+  ) => {
+    const device = useDevice();
+
+    return (
+      <Popover.Portal container={container}>
+        <Popover.Content
+          ref={ref}
+          className={clsx("focus-visible-none", className)}
+          data-prevent-outside-click
+          side={
+            device.editor.isMobile && !device.viewport.isLandscape
+              ? "bottom"
+              : "right"
+          }
+          align={
+            device.editor.isMobile && !device.viewport.isLandscape
+              ? "center"
+              : "start"
+          }
+          alignOffset={-16}
+          sideOffset={20}
+          style={{
+            zIndex: "var(--zIndex-popup)",
+          }}
+          onPointerLeave={onPointerLeave}
+          onKeyDown={onKeyDown}
+          onFocusOutside={onFocusOutside}
+          onPointerDownOutside={onPointerDownOutside}
+          onCloseAutoFocus={(e) => {
+            e.stopPropagation();
+            // prevents focusing the trigger
+            e.preventDefault();
+
+            // return focus to excalidraw container unless
+            // user focuses an interactive element, such as a button, or
+            // enters the text editor by clicking on canvas with the text tool
+            if (container && !isInteractive(document.activeElement)) {
+              container.focus();
+            }
+
+            onClose();
+          }}
+        >
+          <Island padding={3} style={style}>
+            {children}
+          </Island>
+          <Popover.Arrow
+            width={20}
+            height={10}
+            style={{
+              fill: "var(--popup-bg-color)",
+              filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+            }}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    );
+  },
+);
@@ -133,7 +133,7 @@
    .required,
    .error {
      color: $oc-red-8;
-      font-weight: bold;
+      font-weight: 700;
      font-size: 1rem;
      margin: 0.2rem;
    }
@@ -0,0 +1,48 @@
+.excalidraw {
+  --list-border-color: var(--color-gray-20);
+
+  .QuickSearch__wrapper {
+    position: relative;
+    height: 2.6rem; // added +0.1 due to Safari
+    border-bottom: 1px solid var(--list-border-color);
+
+    svg {
+      position: absolute;
+      top: 47.5%; // 50% is not exactly in the center of the input
+      transform: translateY(-50%);
+      left: 0.75rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--color-gray-40);
+      z-index: 1;
+    }
+  }
+
+  &.theme--dark {
+    --list-border-color: var(--color-gray-80);
+
+    .QuickSearch__wrapper {
+      border-bottom: none;
+    }
+  }
+
+  .QuickSearch__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border: 0 !important;
+    font-size: 0.875rem;
+    padding-left: 2.5rem !important;
+    padding-right: 0.75rem !important;
+
+    &::placeholder {
+      color: var(--color-gray-40);
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+}
@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import React from "react";
+import { searchIcon } from "./icons";
+
+import "./QuickSearch.scss";
+
+interface QuickSearchProps {
+  className?: string;
+  placeholder: string;
+  onChange: (term: string) => void;
+}
+
+export const QuickSearch = React.forwardRef<HTMLInputElement, QuickSearchProps>(
+  ({ className, placeholder, onChange }, ref) => {
+    return (
+      <div className={clsx("QuickSearch__wrapper", className)}>
+        {searchIcon}
+        <input
+          ref={ref}
+          className="QuickSearch__input"
+          type="text"
+          placeholder={placeholder}
+          onChange={(e) => onChange(e.target.value.trim().toLowerCase())}
+        />
+      </div>
+    );
+  },
+);
@@ -0,0 +1,21 @@
+.excalidraw {
+  .ScrollableList__wrapper {
+    position: static !important;
+    border: none;
+    font-size: 0.875rem;
+    overflow-y: auto;
+
+    & > .empty,
+    & > .hint {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0.5rem;
+      font-size: 0.75rem;
+      color: var(--color-gray-60);
+      overflow: hidden;
+      text-align: center;
+      line-height: 150%;
+    }
+  }
+}
@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { Children } from "react";
+
+import "./ScrollableList.scss";
+
+interface ScrollableListProps {
+  className?: string;
+  placeholder: string;
+  children: React.ReactNode;
+}
+
+export const ScrollableList = ({
+  className,
+  placeholder,
+  children,
+}: ScrollableListProps) => {
+  const isEmpty = !Children.count(children);
+
+  return (
+    <div className={clsx("ScrollableList__wrapper", className)} role="menu">
+      {isEmpty ? <div className="empty">{placeholder}</div> : children}
+    </div>
+  );
+};
@@ -1,6 +1,6 @@
 import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement } from "../../element/typeChecks";
+import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
 import type { ExcalidrawElement } from "../../element/types";
 import { degreeToRadian, radianToDegree } from "../../math";
 import { angleIcon } from "../icons";
@@ -27,8 +27,9 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
  scene,
 }) => {
  const elementsMap = scene.getNonDeletedElementsMap();
+  const elements = scene.getNonDeletedElements();
  const origElement = originalElements[0];
-  if (origElement) {
+  if (origElement && !isElbowArrow(origElement)) {
    const latestElement = elementsMap.get(origElement.id);
    if (!latestElement) {
      return;
@@ -39,7 +40,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
      mutateElement(latestElement, {
        angle: nextAngle,
      });
-      updateBindings(latestElement, elementsMap);
+      updateBindings(latestElement, elementsMap, elements, scene);

      const boundTextElement = getBoundTextElement(latestElement, elementsMap);
      if (boundTextElement && !isArrowElement(latestElement)) {
@@ -65,7 +66,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
    mutateElement(latestElement, {
      angle: nextAngle,
    });
-    updateBindings(latestElement, elementsMap);
+    updateBindings(latestElement, elementsMap, elements, scene);

    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
    if (boundTextElement && !isArrowElement(latestElement)) {
@@ -31,6 +31,7 @@ const handleDimensionChange: DragInputCallbackType<
  scene,
 }) => {
  const elementsMap = scene.getNonDeletedElementsMap();
+  const elements = scene.getNonDeletedElements();
  const origElement = originalElements[0];
  if (origElement) {
    const keepAspectRatio =
@@ -61,6 +62,8 @@ const handleDimensionChange: DragInputCallbackType<
        keepAspectRatio,
        origElement,
        elementsMap,
+        elements,
+        scene,
      );

      return;
@@ -103,6 +106,8 @@ const handleDimensionChange: DragInputCallbackType<
      keepAspectRatio,
      origElement,
      elementsMap,
+      elements,
+      scene,
    );
  }
 };
@@ -25,9 +25,9 @@ export type DragInputCallbackType<
  originalElementsMap: ElementsMap;
  shouldKeepAspectRatio: boolean;
  shouldChangeByStepSize: boolean;
+  scene: Scene;
  nextValue?: number;
  property: P;
-  scene: Scene;
  originalAppState: AppState;
 }) => void;

@@ -122,9 +122,9 @@ const StatsDragInput = <
        originalElementsMap: app.scene.getNonDeletedElementsMap(),
        shouldKeepAspectRatio: shouldKeepAspectRatio!!,
        shouldChangeByStepSize: false,
+        scene,
        nextValue: rounded,
        property,
-        scene,
        originalAppState: appState,
      });
      app.syncActionResult({ storeAction: StoreAction.CAPTURE });
@@ -66,8 +66,10 @@ const resizeElementInGroup = (
  origElement: ExcalidrawElement,
  elementsMap: NonDeletedSceneElementsMap,
  originalElementsMap: ElementsMap,
+  scene: Scene,
 ) => {
  const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+  const { width: oldWidth, height: oldHeight } = latestElement;

  mutateElement(latestElement, updates, false);
  const boundTextElement = getBoundTextElement(
@@ -76,8 +78,8 @@ const resizeElementInGroup = (
  );
  if (boundTextElement) {
    const newFontSize = boundTextElement.fontSize * scale;
-    updateBoundElements(latestElement, elementsMap, {
-      newSize: { width: updates.width, height: updates.height },
+    updateBoundElements(latestElement, elementsMap, scene, {
+      oldSize: { width: oldWidth, height: oldHeight },
    });
    const latestBoundTextElement = elementsMap.get(boundTextElement.id);
    if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
@@ -109,6 +111,7 @@ const resizeGroup = (
  originalElements: ExcalidrawElement[],
  elementsMap: NonDeletedSceneElementsMap,
  originalElementsMap: ElementsMap,
+  scene: Scene,
 ) => {
  // keep aspect ratio for groups
  if (property === "width") {
@@ -132,6 +135,7 @@ const resizeGroup = (
      origElement,
      elementsMap,
      originalElementsMap,
+      scene,
    );
  }
 };
@@ -149,6 +153,7 @@ const handleDimensionChange: DragInputCallbackType<
  property,
 }) => {
  const elementsMap = scene.getNonDeletedElementsMap();
+  const elements = scene.getNonDeletedElements();
  const atomicUnits = getAtomicUnits(originalElements, originalAppState);
  if (nextValue !== undefined) {
    for (const atomicUnit of atomicUnits) {
@@ -185,6 +190,7 @@ const handleDimensionChange: DragInputCallbackType<
          originalElements,
          elementsMap,
          originalElementsMap,
+          scene,
        );
      } else {
        const [el] = elementsInUnit;
@@ -227,6 +233,8 @@ const handleDimensionChange: DragInputCallbackType<
            false,
            origElement,
            elementsMap,
+            elements,
+            scene,
            false,
          );
        }
@@ -288,6 +296,7 @@ const handleDimensionChange: DragInputCallbackType<
        originalElements,
        elementsMap,
        originalElementsMap,
+        scene,
      );
    } else {
      const [el] = elementsInUnit;
@@ -320,7 +329,15 @@ const handleDimensionChange: DragInputCallbackType<
        nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
        nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);

-        resizeElement(nextWidth, nextHeight, false, origElement, elementsMap);
+        resizeElement(
+          nextWidth,
+          nextHeight,
+          false,
+          origElement,
+          elementsMap,
+          elements,
+          scene,
+        );
      }
    }
  }
@@ -1,6 +1,7 @@
 import type {
  ElementsMap,
  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
  NonDeletedSceneElementsMap,
 } from "../../element/types";
 import { rotate } from "../../math";
@@ -33,6 +34,7 @@ const moveElements = (
  originalElements: readonly ExcalidrawElement[],
  elementsMap: NonDeletedSceneElementsMap,
  originalElementsMap: ElementsMap,
+  scene: Scene,
 ) => {
  for (let i = 0; i < elements.length; i++) {
    const origElement = originalElements[i];
@@ -60,6 +62,8 @@ const moveElements = (
      newTopLeftY,
      origElement,
      elementsMap,
+      elements,
+      scene,
      originalElementsMap,
      false,
    );
@@ -71,6 +75,7 @@ const moveGroupTo = (
  nextY: number,
  originalElements: ExcalidrawElement[],
  elementsMap: NonDeletedSceneElementsMap,
+  elements: readonly NonDeletedExcalidrawElement[],
  originalElementsMap: ElementsMap,
  scene: Scene,
 ) => {
@@ -106,6 +111,8 @@ const moveGroupTo = (
        topLeftY + offsetY,
        origElement,
        elementsMap,
+        elements,
+        scene,
        originalElementsMap,
        false,
      );
@@ -126,6 +133,7 @@ const handlePositionChange: DragInputCallbackType<
  originalAppState,
 }) => {
  const elementsMap = scene.getNonDeletedElementsMap();
+  const elements = scene.getNonDeletedElements();

  if (nextValue !== undefined) {
    for (const atomicUnit of getAtomicUnits(
@@ -150,6 +158,7 @@ const handlePositionChange: DragInputCallbackType<
          newTopLeftY,
          elementsInUnit.map((el) => el.original),
          elementsMap,
+          elements,
          originalElementsMap,
          scene,
        );
@@ -180,6 +189,8 @@ const handlePositionChange: DragInputCallbackType<
            newTopLeftY,
            origElement,
            elementsMap,
+            elements,
+            scene,
            originalElementsMap,
            false,
          );
@@ -206,6 +217,7 @@ const handlePositionChange: DragInputCallbackType<
    originalElements,
    elementsMap,
    originalElementsMap,
+    scene,
  );

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

 interface StatsProps {
  scene: Scene;
@@ -209,12 +210,14 @@ export const StatsInner = memo(
                        scene={scene}
                        appState={appState}
                      />
-                      <Angle
-                        property="angle"
-                        element={singleElement}
-                        scene={scene}
-                        appState={appState}
-                      />
+                      {!isElbowArrow(singleElement) && (
+                        <Angle
+                          property="angle"
+                          element={singleElement}
+                          scene={scene}
+                          appState={appState}
+                        />
+                      )}
                      <FontSize
                        property="fontSize"
                        element={singleElement}
@@ -31,6 +31,7 @@ import {
  isInGroup,
 } from "../../groups";
 import { rotate } from "../../math";
+import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 import { getFontString } from "../../utils";

@@ -124,6 +125,8 @@ export const resizeElement = (
  keepAspectRatio: boolean,
  origElement: ExcalidrawElement,
  elementsMap: NonDeletedSceneElementsMap,
+  elements: readonly NonDeletedExcalidrawElement[],
+  scene: Scene,
  shouldInformMutation = true,
 ) => {
  const latestElement = elementsMap.get(origElement.id);
@@ -146,6 +149,8 @@ export const resizeElement = (
    nextHeight = Math.max(nextHeight, minHeight);
  }

+  const { width: oldWidth, height: oldHeight } = latestElement;
+
  mutateElement(
    latestElement,
    {
@@ -164,7 +169,7 @@ export const resizeElement = (
    },
    shouldInformMutation,
  );
-  updateBindings(latestElement, elementsMap, {
+  updateBindings(latestElement, elementsMap, elements, scene, {
    newSize: {
      width: nextWidth,
      height: nextHeight,
@@ -193,6 +198,10 @@ export const resizeElement = (
    }
  }

+  updateBoundElements(latestElement, elementsMap, scene, {
+    oldSize: { width: oldWidth, height: oldHeight },
+  });
+
  if (boundTextElement && boundTextFont) {
    mutateElement(boundTextElement, {
      fontSize: boundTextFont.fontSize,
@@ -206,6 +215,8 @@ export const moveElement = (
  newTopLeftY: number,
  originalElement: ExcalidrawElement,
  elementsMap: NonDeletedSceneElementsMap,
+  elements: readonly NonDeletedExcalidrawElement[],
+  scene: Scene,
  originalElementsMap: ElementsMap,
  shouldInformMutation = true,
 ) => {
@@ -244,7 +255,7 @@ export const moveElement = (
    },
    shouldInformMutation,
  );
-  updateBindings(latestElement, elementsMap);
+  updateBindings(latestElement, elementsMap, elements, scene);

  const boundTextElement = getBoundTextElement(
    originalElement,
@@ -288,14 +299,23 @@ export const getAtomicUnits = (
 export const updateBindings = (
  latestElement: ExcalidrawElement,
  elementsMap: NonDeletedSceneElementsMap,
+  elements: readonly NonDeletedExcalidrawElement[],
+  scene: Scene,
  options?: {
    simultaneouslyUpdated?: readonly ExcalidrawElement[];
    newSize?: { width: number; height: number };
  },
 ) => {
  if (isLinearElement(latestElement)) {
-    bindOrUnbindLinearElements([latestElement], elementsMap, true, []);
+    bindOrUnbindLinearElements(
+      [latestElement],
+      elementsMap,
+      elements,
+      scene,
+      true,
+      [],
+    );
  } else {
-    updateBoundElements(latestElement, elementsMap, options);
+    updateBoundElements(latestElement, elementsMap, scene, options);
  }
 };
@@ -139,7 +139,7 @@ $verticalBreakpoint: 861px;

  .ttd-dialog-output-error {
    color: red;
-    font-weight: 800;
+    font-weight: 700;
    font-size: 30px;
    word-break: break-word;
    overflow: auto;
@@ -5,10 +5,11 @@
  --avatarList-gap: 0.625rem;
  --userList-padding: var(--space-factor);

-  .UserList-wrapper {
+  .UserList__wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-end;
+    align-items: center;
    pointer-events: none !important;
  }

@@ -21,10 +22,6 @@
    align-items: center;
    gap: var(--avatarList-gap);

-    &:empty {
-      display: none;
-    }
-
    box-sizing: border-box;

    --max-size: calc(
@@ -157,66 +154,7 @@
  }

  .UserList__collaborators {
-    position: static;
    top: auto;
-    margin-top: 0;
    max-height: 50vh;
-    overflow-y: auto;
-    padding: 0.25rem 0.5rem;
-    border-top: 1px solid var(--userlist-collaborators-border-color);
-    border-bottom: 1px solid var(--userlist-collaborators-border-color);
-
-    &__empty {
-      color: var(--color-gray-60);
-      font-size: 0.75rem;
-      line-height: 150%;
-      padding: 0.5rem 0;
-    }
-  }
-
-  .UserList__hint {
-    padding: 0.5rem 0.75rem;
-    overflow: hidden;
-    text-align: center;
-    color: var(--userlist-hint-text-color);
-    font-size: 0.75rem;
-    line-height: 150%;
-  }
-
-  .UserList__search-wrapper {
-    position: relative;
-    height: 2.5rem;
-
-    svg {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 0.75rem;
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--color-gray-40);
-      z-index: 1;
-    }
-  }
-
-  .UserList__search {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    border: 0 !important;
-    border-radius: 0 !important;
-    font-size: 0.875rem;
-    padding-left: 2.5rem !important;
-    padding-right: 0.75rem !important;
-
-    &::placeholder {
-      color: var(--color-gray-40);
-    }
-
-    &:focus {
-      box-shadow: none !important;
-    }
  }
 }
@@ -9,11 +9,12 @@ import type { ActionManager } from "../actions/manager";

 import * as Popover from "@radix-ui/react-popover";
 import { Island } from "./Island";
-import { searchIcon } from "./icons";
+import { QuickSearch } from "./QuickSearch";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
 import { supportsResizeObserver } from "../constants";
 import type { MarkRequired } from "../utility-types";
+import { ScrollableList } from "./ScrollableList";

 export type GoToCollaboratorComponentProps = {
  socketId: SocketId;
@@ -40,7 +41,7 @@ const ConditionalTooltipWrapper = ({
  shouldWrap ? (
    <Tooltip label={username || "Unknown user"}>{children}</Tooltip>
  ) : (
-    <React.Fragment>{children}</React.Fragment>
+    <>{children}</>
  );

 const renderCollaborator = ({
@@ -128,6 +129,10 @@ export const UserList = React.memo(
    ).filter((collaborator) => collaborator.username?.trim());

    const [searchTerm, setSearchTerm] = React.useState("");
+    const filteredCollaborators = uniqueCollaboratorsArray.filter(
+      (collaborator) =>
+        collaborator.username?.toLowerCase().includes(searchTerm),
+    );

    const userListWrapper = React.useRef<HTMLDivElement | null>(null);

@@ -161,14 +166,6 @@ export const UserList = React.memo(

    const [maxAvatars, setMaxAvatars] = React.useState(DEFAULT_MAX_AVATARS);

-    const searchTermNormalized = searchTerm.trim().toLowerCase();
-
-    const filteredCollaborators = searchTermNormalized
-      ? uniqueCollaboratorsArray.filter((collaborator) =>
-          collaborator.username?.toLowerCase().includes(searchTerm),
-        )
-      : uniqueCollaboratorsArray;
-
    const firstNCollaborators = uniqueCollaboratorsArray.slice(
      0,
      maxAvatars - 1,
@@ -197,7 +194,7 @@ export const UserList = React.memo(
        )}
      </div>
    ) : (
-      <div className="UserList-wrapper" ref={userListWrapper}>
+      <div className="UserList__wrapper" ref={userListWrapper}>
        <div
          className={clsx("UserList", className)}
          style={{ [`--max-avatars` as any]: maxAvatars }}
@@ -205,13 +202,7 @@ export const UserList = React.memo(
          {firstNAvatarsJSX}

          {uniqueCollaboratorsArray.length > maxAvatars - 1 && (
-            <Popover.Root
-              onOpenChange={(isOpen) => {
-                if (!isOpen) {
-                  setSearchTerm("");
-                }
-              }}
-            >
+            <Popover.Root>
              <Popover.Trigger className="UserList__more">
                +{uniqueCollaboratorsArray.length - maxAvatars + 1}
              </Popover.Trigger>
@@ -224,41 +215,43 @@ export const UserList = React.memo(
                align="end"
                sideOffset={10}
              >
-                <Island style={{ overflow: "hidden" }}>
+                <Island padding={2}>
                  {uniqueCollaboratorsArray.length >=
                    SHOW_COLLABORATORS_FILTER_AT && (
-                    <div className="UserList__search-wrapper">
-                      {searchIcon}
-                      <input
-                        className="UserList__search"
-                        type="text"
-                        placeholder={t("userList.search.placeholder")}
-                        value={searchTerm}
-                        onChange={(e) => {
-                          setSearchTerm(e.target.value);
-                        }}
-                      />
-                    </div>
+                    <QuickSearch
+                      placeholder={t("quickSearch.placeholder")}
+                      onChange={setSearchTerm}
+                    />
                  )}
-                  <div className="dropdown-menu UserList__collaborators">
-                    {filteredCollaborators.length === 0 && (
-                      <div className="UserList__collaborators__empty">
-                        {t("userList.search.empty")}
-                      </div>
-                    )}
-                    <div className="UserList__hint">
-                      {t("userList.hint.text")}
-                    </div>
-                    {filteredCollaborators.map((collaborator) =>
-                      renderCollaborator({
-                        actionManager,
-                        collaborator,
-                        socketId: collaborator.socketId,
-                        withName: true,
-                        isBeingFollowed: collaborator.socketId === userToFollow,
-                      }),
-                    )}
-                  </div>
+                  <ScrollableList
+                    className={"dropdown-menu UserList__collaborators"}
+                    placeholder={t("userList.empty")}
+                  >
+                    {/* The list checks for `Children.count()`, hence defensively returning empty list */}
+                    {filteredCollaborators.length > 0
+                      ? [
+                          <div className="hint">{t("userList.hint.text")}</div>,
+                          filteredCollaborators.map((collaborator) =>
+                            renderCollaborator({
+                              actionManager,
+                              collaborator,
+                              socketId: collaborator.socketId,
+                              withName: true,
+                              isBeingFollowed:
+                                collaborator.socketId === userToFollow,
+                            }),
+                          ),
+                        ]
+                      : []}
+                  </ScrollableList>
+                  <Popover.Arrow
+                    width={20}
+                    height={10}
+                    style={{
+                      fill: "var(--popup-bg-color)",
+                      filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+                    }}
+                  />
                </Island>
              </Popover.Content>
            </Popover.Root>
@@ -105,6 +105,7 @@ const getRelevantAppStateProps = (
  selectedElementIds: appState.selectedElementIds,
  frameToHighlight: appState.frameToHighlight,
  editingGroupId: appState.editingGroupId,
+  currentHoveredFontFamily: appState.currentHoveredFontFamily,
 });

 const areEqual = (
@@ -4,7 +4,7 @@
  .dropdown-menu {
    position: absolute;
    top: 100%;
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;

    &--mobile {
      left: 0;
@@ -35,21 +35,69 @@

    .dropdown-menu-item-base {
      display: flex;
-      padding: 0 0.625rem;
      column-gap: 0.625rem;
      font-size: 0.875rem;
      color: var(--color-on-surface);
      width: 100%;
      box-sizing: border-box;
-      font-weight: normal;
+      font-weight: 400;
      font-family: inherit;
    }

+    &.manual-hover {
+      // disable built-in hover due to keyboard navigation
+      .dropdown-menu-item {
+        &:hover {
+          background-color: transparent;
+        }
+
+        &--hovered {
+          background-color: var(--button-hover-bg) !important;
+        }
+
+        &--selected {
+          background-color: var(--color-primary-light) !important;
+        }
+      }
+    }
+
+    &.fonts {
+      margin-top: 1rem;
+      // display max 7 items per list, where each has 2rem (2.25) height and 1px margin top & bottom
+      // count in 2 groups, where each allocates 1.3*0.75rem font-size and 0.5rem margin bottom, plus one extra 1rem margin top
+      max-height: calc(7 * (2rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem);
+
+      @media screen and (min-width: 1921px) {
+        max-height: calc(
+          7 * (2.25rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem
+        );
+      }
+
+      .dropdown-menu-item-base {
+        display: inline-flex;
+      }
+
+      .dropdown-menu-group:not(:first-child) {
+        margin-top: 1rem;
+      }
+
+      .dropdown-menu-group-title {
+        font-size: 0.75rem;
+        text-align: left;
+        font-weight: 400;
+        margin: 0 0 0.5rem;
+        line-height: 1.3;
+      }
+    }
+
    .dropdown-menu-item {
+      height: 2rem;
+      margin: 1px;
+      padding: 0 0.5rem;
+      width: calc(100% - 2px);
      background-color: transparent;
      border: 1px solid transparent;
      align-items: center;
-      height: 2rem;
      cursor: pointer;
      border-radius: var(--border-radius-md);

@@ -57,11 +105,6 @@
        height: 2.25rem;
      }

-      &--selected {
-        background: var(--color-primary-light);
-        --icon-fill-color: var(--color-primary-darker);
-      }
-
      &__text {
        display: flex;
        align-items: center;
@@ -83,6 +126,11 @@
        }
      }

+      &--selected {
+        background: var(--color-primary-light);
+        --icon-fill-color: var(--color-primary-darker);
+      }
+
      &:hover {
        background-color: var(--button-hover-bg);
        text-decoration: none;
@@ -1,37 +1,62 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import {
  getDropdownMenuItemClassName,
  useHandleDropdownMenuItemClick,
 } from "./common";
 import MenuItemContent from "./DropdownMenuItemContent";
+import { useExcalidrawAppState } from "../App";
+import { THEME } from "../../constants";
+import type { ValueOf } from "../../utility-types";

 const DropdownMenuItem = ({
  icon,
-  onSelect,
+  value,
+  order,
  children,
  shortcut,
  className,
+  hovered,
  selected,
+  textStyle,
+  onSelect,
+  onClick,
  ...rest
 }: {
  icon?: JSX.Element;
-  onSelect: (event: Event) => void;
+  value?: string | number | undefined;
+  order?: number;
+  onSelect?: (event: Event) => void;
  children: React.ReactNode;
  shortcut?: string;
+  hovered?: boolean;
  selected?: boolean;
+  textStyle?: React.CSSProperties;
  className?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
-  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
+  const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (hovered) {
+      if (order === 0) {
+        // scroll into the first item differently, so it's visible what is above (i.e. group title)
+        ref.current?.scrollIntoView({ block: "end" });
+      } else {
+        ref.current?.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [hovered, order]);

  return (
    <button
      {...rest}
+      ref={ref}
+      value={value}
      onClick={handleClick}
-      type="button"
-      className={getDropdownMenuItemClassName(className, selected)}
+      className={getDropdownMenuItemClassName(className, selected, hovered)}
      title={rest.title ?? rest["aria-label"]}
    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
+      <MenuItemContent textStyle={textStyle} icon={icon} shortcut={shortcut}>
        {children}
      </MenuItemContent>
    </button>
@@ -39,24 +64,53 @@ const DropdownMenuItem = ({
 };
 DropdownMenuItem.displayName = "DropdownMenuItem";

+export const DropDownMenuItemBadgeType = {
+  GREEN: "green",
+  RED: "red",
+  BLUE: "blue",
+} as const;
+
 export const DropDownMenuItemBadge = ({
+  type = DropDownMenuItemBadgeType.BLUE,
  children,
 }: {
+  type?: ValueOf<typeof DropDownMenuItemBadgeType>;
  children: React.ReactNode;
 }) => {
-  return (
-    <div
-      style={{
-        display: "inline-flex",
-        marginLeft: "auto",
-        padding: "2px 4px",
+  const { theme } = useExcalidrawAppState();
+  const style = {
+    display: "inline-flex",
+    marginLeft: "auto",
+    padding: "2px 4px",
+    borderRadius: 6,
+    fontSize: 9,
+    fontFamily: "Cascadia, monospace",
+    border: theme === THEME.LIGHT ? "1.5px solid white" : "none",
+  };
+
+  switch (type) {
+    case DropDownMenuItemBadgeType.GREEN:
+      Object.assign(style, {
+        backgroundColor: "var(--background-color-badge)",
+        color: "var(--color-badge)",
+      });
+      break;
+    case DropDownMenuItemBadgeType.RED:
+      Object.assign(style, {
+        backgroundColor: "pink",
+        color: "darkred",
+      });
+      break;
+    case DropDownMenuItemBadgeType.BLUE:
+    default:
+      Object.assign(style, {
        background: "var(--color-promo)",
        color: "var(--color-surface-lowest)",
-        borderRadius: 6,
-        fontSize: 9,
-        fontFamily: "Cascadia, monospace",
-      }}
-    >
+      });
+  }
+
+  return (
+    <div className="DropDownMenuItemBadge" style={style}>
      {children}
    </div>
  );
@@ -1,19 +1,23 @@
 import { useDevice } from "../App";

 const MenuItemContent = ({
+  textStyle,
  icon,
  shortcut,
  children,
 }: {
  icon?: JSX.Element;
  shortcut?: string;
+  textStyle?: React.CSSProperties;
  children: React.ReactNode;
 }) => {
  const device = useDevice();
  return (
    <>
-      <div className="dropdown-menu-item__icon">{icon}</div>
-      <div className="dropdown-menu-item__text">{children}</div>
+      {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
+      <div style={textStyle} className="dropdown-menu-item__text">
+        {children}
+      </div>
      {shortcut && !device.editor.isMobile && (
        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
      )}
@@ -9,9 +9,11 @@ export const DropdownMenuContentPropsContext = React.createContext<{
 export const getDropdownMenuItemClassName = (
  className = "",
  selected = false,
+  hovered = false,
 ) => {
-  return `dropdown-menu-item dropdown-menu-item-base ${className} ${
-    selected ? "dropdown-menu-item--selected" : ""
+  return `dropdown-menu-item dropdown-menu-item-base ${className}
+  ${selected ? "dropdown-menu-item--selected" : ""} ${
+    hovered ? "dropdown-menu-item--hovered" : ""
  }`.trim();
 };

@@ -1438,6 +1438,27 @@ export const fontSizeIcon = createIcon(
  tablerIconProps,
 );

+export const FontFamilyHeadingIcon = createIcon(
+  <>
+    <g
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M7 12h10" />
+      <path d="M7 5v14" />
+      <path d="M17 5v14" />
+      <path d="M15 19h4" />
+      <path d="M15 5h4" />
+      <path d="M5 19h4" />
+      <path d="M5 5h4" />
+    </g>
+  </>,
+  tablerIconProps,
+);
+
 export const FontFamilyNormalIcon = createIcon(
  <>
    <g
@@ -2074,6 +2095,35 @@ export const lineEditorIcon = createIcon(
  tablerIconProps,
 );

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

 const Logo = ({ children }: { children?: React.ReactNode }) => {
  return (
-    <div className="welcome-screen-center__logo virgil welcome-screen-decor">
+    <div className="welcome-screen-center__logo excalifont welcome-screen-decor">
      {children || <ExcalidrawLogo withText />}
    </div>
  );
@@ -118,7 +118,7 @@ Logo.displayName = "Logo";

 const Heading = ({ children }: { children: React.ReactNode }) => {
  return (
-    <div className="welcome-screen-center__heading welcome-screen-decor virgil">
+    <div className="welcome-screen-center__heading welcome-screen-decor excalifont">
      {children}
    </div>
  );
@@ -10,7 +10,7 @@ const MenuHint = ({ children }: { children?: React.ReactNode }) => {
  const { WelcomeScreenMenuHintTunnel } = useTunnels();
  return (
    <WelcomeScreenMenuHintTunnel.In>
-      <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
+      <div className="excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
        {WelcomeScreenMenuArrow}
        <div className="welcome-screen-decor-hint__label">
          {children || t("welcomeScreen.defaults.menuHint")}
@@ -25,7 +25,7 @@ const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
  const { WelcomeScreenToolbarHintTunnel } = useTunnels();
  return (
    <WelcomeScreenToolbarHintTunnel.In>
-      <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
+      <div className="excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
        <div className="welcome-screen-decor-hint__label">
          {children || t("welcomeScreen.defaults.toolbarHint")}
        </div>
@@ -40,7 +40,7 @@ const HelpHint = ({ children }: { children?: React.ReactNode }) => {
  const { WelcomeScreenHelpHintTunnel } = useTunnels();
  return (
    <WelcomeScreenHelpHintTunnel.In>
-      <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
+      <div className="excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
        <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
        {WelcomeScreenHelpArrow}
      </div>
@@ -1,6 +1,6 @@
 .excalidraw {
-  .virgil {
-    font-family: "Virgil";
+  .excalifont {
+    font-family: "Excalifont";
  }

  // WelcomeSreen common
@@ -1,5 +1,5 @@
 import cssVariables from "./css/variables.module.scss";
-import type { AppProps } from "./types";
+import type { AppProps, AppState } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 import { COLOR_PALETTE } from "./colors";
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
@@ -114,12 +114,24 @@ export const CLASSES = {
  SHAPE_ACTIONS_MENU: "App-menu__left",
 };

-// 1-based in case we ever do `if(element.fontFamily)`
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export const FONT_FAMILY = {
  Virgil: 1,
  Helvetica: 2,
  Cascadia: 3,
-  Assistant: 4,
+  // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)
+  Excalifont: 5,
+  Nunito: 6,
+  "Lilita One": 7,
+  "Comic Shanns": 8,
+  "Liberation Sans": 9,
 };

 export const THEME = {
@@ -147,7 +159,7 @@ export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";

 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Virgil;
+export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Excalifont;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
@@ -409,3 +421,9 @@ export const DEFAULT_FILENAME = "Untitled";
 export const STATS_PANELS = { generalStats: 1, elementProperties: 2 } as const;

 export const MIN_WIDTH_OR_HEIGHT = 1;
+
+export const ARROW_TYPE: { [T in AppState["currentItemArrowType"]]: T } = {
+  sharp: "sharp",
+  round: "round",
+  elbow: "elbow",
+};
@@ -152,7 +152,7 @@ body.excalidraw-cursor-resize * {
      margin-bottom: 0.25rem;
      font-size: 0.75rem;
      color: var(--text-primary-color);
-      font-weight: normal;
+      font-weight: 400;
      display: block;
    }

@@ -227,14 +227,7 @@ body.excalidraw-cursor-resize * {
    label,
    button,
    .zIndexButton {
-      @include outlineButtonStyles;
-
-      padding: 0;
-
-      svg {
-        width: var(--default-icon-size);
-        height: var(--default-icon-size);
-      }
+      @include outlineButtonIconStyles;
    }
  }

@@ -394,7 +387,7 @@ body.excalidraw-cursor-resize * {
  .App-menu__left {
    overflow-y: auto;
    padding: 0.75rem;
-    width: 202px;
+    width: 200px;
    box-sizing: border-box;
    position: absolute;
  }
@@ -585,7 +578,7 @@ body.excalidraw-cursor-resize * {
  // use custom, minimalistic scrollbar
  // (doesn't work in Firefox)
  ::-webkit-scrollbar {
-    width: 3px;
+    width: 4px;
    height: 3px;
  }

@@ -664,6 +657,10 @@ body.excalidraw-cursor-resize * {
      --button-hover-bg: #363541;
      --button-bg: var(--color-surface-high);
    }
+
+    .buttonList {
+      padding: 0.25rem 0;
+    }
  }

  .excalidraw__paragraph {
@@ -757,7 +754,7 @@ body.excalidraw-cursor-resize * {
    padding: 1rem 1.6rem;
    border-radius: 12px;
    color: #fff;
-    font-weight: bold;
+    font-weight: 700;
    letter-spacing: 0.6px;
    font-family: "Assistant";
  }
@@ -151,6 +151,9 @@
  --color-border-outline-variant: #c5c5d0;
  --color-surface-primary-container: #e0dfff;

+  --color-badge: #0b6513;
+  --background-color-badge: #d3ffd2;
+
  &.theme--dark {
    &.theme--dark-background-none {
      background: none;
@@ -124,6 +124,16 @@
  }
 }

+@mixin outlineButtonIconStyles {
+  @include outlineButtonStyles;
+  padding: 0;
+
+  svg {
+    width: var(--default-icon-size);
+    height: var(--default-icon-size);
+  }
+}
+
@mixin avatarStyles {
  width: var(--avatar-size, 1.5rem);
  height: var(--avatar-size, 1.5rem);
@@ -135,7 +145,7 @@
  align-items: center;
  cursor: pointer;
  font-size: 0.75rem;
-  font-weight: 800;
+  font-weight: 700;
  line-height: 1;
  color: var(--color-gray-90);
  flex: 0 0 auto;
@@ -84,9 +84,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "transparent",
  "boundElements": null,
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "ellipse-1",
+    "fixedPoint": null,
    "focus": -0.008153707962747813,
    "gap": 1,
  },
@@ -117,6 +119,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "startArrowhead": null,
  "startBinding": {
    "elementId": "id47",
+    "fixedPoint": null,
    "focus": -0.08139534883720931,
    "gap": 1,
  },
@@ -139,9 +142,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "transparent",
  "boundElements": null,
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "ellipse-1",
+    "fixedPoint": null,
    "focus": 0.10666666666666667,
    "gap": 3.834326468444573,
  },
@@ -172,6 +177,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "startArrowhead": null,
  "startBinding": {
    "elementId": "diamond-1",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -239,7 +245,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "containerId": null,
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -285,7 +291,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "containerId": null,
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -328,9 +334,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "text-2",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 205,
  },
@@ -361,6 +369,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "startArrowhead": null,
  "startBinding": {
    "elementId": "text-1",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -386,7 +395,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "containerId": "id48",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -429,9 +438,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "id40",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -462,6 +473,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "startArrowhead": null,
  "startBinding": {
    "elementId": "id39",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -487,7 +499,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "containerId": "id37",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -604,9 +616,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "id44",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -637,6 +651,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "startArrowhead": null,
  "startBinding": {
    "elementId": "id43",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -662,7 +677,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "containerId": "id41",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -708,7 +723,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "containerId": null,
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -754,7 +769,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "containerId": null,
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -824,6 +839,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
  "backgroundColor": "transparent",
  "boundElements": null,
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -871,6 +887,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
  "backgroundColor": "transparent",
  "boundElements": null,
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "triangle",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1207,7 +1224,7 @@ exports[`Test Transform > should transform text element 1`] = `
  "containerId": null,
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -1248,7 +1265,7 @@ exports[`Test Transform > should transform text element 2`] = `
  "containerId": null,
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -1463,9 +1480,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "Alice",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 5.299874999999986,
  },
@@ -1498,6 +1517,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "startArrowhead": null,
  "startBinding": {
    "elementId": "Bob",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -1525,9 +1545,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "B",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -1556,6 +1578,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "startArrowhead": null,
  "startBinding": {
    "elementId": "Bob",
+    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
  },
@@ -1581,7 +1604,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "containerId": "B",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [
@@ -1624,7 +1647,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "containerId": "A",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [
@@ -1667,7 +1690,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "containerId": "Alice",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [
@@ -1710,7 +1733,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "containerId": "Bob",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [
@@ -1753,7 +1776,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "containerId": "Bob_Alice",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -1794,7 +1817,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "containerId": "Bob_B",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -1837,6 +1860,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1889,6 +1913,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1941,6 +1966,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1993,6 +2019,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
    },
  ],
  "customData": undefined,
+  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -2043,7 +2070,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "containerId": "id25",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2084,7 +2111,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "containerId": "id26",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2125,7 +2152,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "containerId": "id27",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2167,7 +2194,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "containerId": "id28",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2431,7 +2458,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "containerId": "id13",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2472,7 +2499,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "containerId": "id14",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2514,7 +2541,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "containerId": "id15",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2558,7 +2585,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "containerId": "id16",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2600,7 +2627,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "containerId": "id17",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -2643,7 +2670,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "containerId": "id18",
  "customData": undefined,
  "fillStyle": "solid",
-  "fontFamily": 1,
+  "fontFamily": 5,
  "fontSize": 20,
  "frameId": null,
  "groupIds": [],
@@ -1,5 +1,11 @@
+import throttle from "lodash.throttle";
+import { ENV } from "../constants";
 import type { OrderedExcalidrawElement } from "../element/types";
-import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import {
+  orderByFractionalIndex,
+  syncInvalidIndices,
+  validateFractionalIndices,
+} from "../fractionalIndex";
 import type { AppState } from "../types";
 import type { MakeBrand } from "../utility-types";
 import { arrayToMap } from "../utils";
@@ -33,6 +39,37 @@ const shouldDiscardRemoteElement = (
  return false;
 };

+const validateIndicesThrottled = throttle(
+  (
+    orderedElements: readonly OrderedExcalidrawElement[],
+    localElements: readonly OrderedExcalidrawElement[],
+    remoteElements: readonly RemoteExcalidrawElement[],
+  ) => {
+    if (
+      import.meta.env.DEV ||
+      import.meta.env.MODE === ENV.TEST ||
+      window?.DEBUG_FRACTIONAL_INDICES
+    ) {
+      // create new instances due to the mutation
+      const elements = syncInvalidIndices(
+        orderedElements.map((x) => ({ ...x })),
+      );
+
+      validateFractionalIndices(elements, {
+        // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
+        shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+        includeBoundTextValidation: true,
+        reconciliationContext: {
+          localElements,
+          remoteElements,
+        },
+      });
+    }
+  },
+  1000 * 60,
+  { leading: true, trailing: false },
+);
+
 export const reconcileElements = (
  localElements: readonly OrderedExcalidrawElement[],
  remoteElements: readonly RemoteExcalidrawElement[],
@@ -72,6 +109,8 @@ export const reconcileElements = (

  const orderedElements = orderByFractionalIndex(reconciledElements);

+  validateIndicesThrottled(orderedElements, localElements, remoteElements);
+
  // de-duplicate indices
  syncInvalidIndices(orderedElements);

@@ -1,4 +1,5 @@
 import type {
+  ExcalidrawArrowElement,
  ExcalidrawElement,
  ExcalidrawElementType,
  ExcalidrawLinearElement,
@@ -24,6 +25,7 @@ import {
 } from "../element";
 import {
  isArrowElement,
+  isElbowArrow,
  isLinearElement,
  isTextElement,
  isUsingAdaptiveRadius,
@@ -44,14 +46,11 @@ import { bumpVersion } from "../element/mutateElement";
 import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import type { MarkOptional, Mutable } from "../utility-types";
-import {
-  detectLineHeight,
-  getContainerElement,
-  getDefaultLineHeight,
-} from "../element/textElement";
+import { detectLineHeight, getContainerElement } from "../element/textElement";
 import { normalizeLink } from "./url";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
+import { getLineHeight } from "../fonts";

 type RestoredAppState = Omit<
  AppState,
@@ -95,11 +94,21 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
  return DEFAULT_FONT_FAMILY;
 };

-const repairBinding = (binding: PointBinding | null) => {
+const repairBinding = (
+  element: ExcalidrawLinearElement,
+  binding: PointBinding | null,
+): PointBinding | null => {
  if (!binding) {
    return null;
  }
-  return { ...binding, focus: binding.focus || 0 };
+
+  return {
+    ...binding,
+    focus: binding.focus || 0,
+    fixedPoint: isElbowArrow(element)
+      ? binding.fixedPoint ?? ([0, 0] as [number, number])
+      : null,
+  };
 };

 const restoreElementWithProperties = <
@@ -206,7 +215,7 @@ const restoreElement = (
            detectLineHeight(element)
          : // no element height likely means programmatic use, so default
            // to a fixed line height
-            getDefaultLineHeight(element.fontFamily));
+            getLineHeight(element.fontFamily));
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
@@ -245,11 +254,7 @@ const restoreElement = (
    // @ts-ignore LEGACY type
    // eslint-disable-next-line no-fallthrough
    case "draw":
-    case "arrow": {
-      const {
-        startArrowhead = null,
-        endArrowhead = element.type === "arrow" ? "arrow" : null,
-      } = element;
+      const { startArrowhead = null, endArrowhead = null } = element;
      let x = element.x;
      let y = element.y;
      let points = // migrate old arrow model to new one
@@ -269,8 +274,8 @@ const restoreElement = (
          (element.type as ExcalidrawElementType | "draw") === "draw"
            ? "line"
            : element.type,
-        startBinding: repairBinding(element.startBinding),
-        endBinding: repairBinding(element.endBinding),
+        startBinding: repairBinding(element, element.startBinding),
+        endBinding: repairBinding(element, element.endBinding),
        lastCommittedPoint: null,
        startArrowhead,
        endArrowhead,
@@ -279,6 +284,36 @@ const restoreElement = (
        y,
        ...getSizeFromPoints(points),
      });
+    case "arrow": {
+      const { startArrowhead = null, endArrowhead = "arrow" } = element;
+      let x = element.x;
+      let y = element.y;
+      let points = // migrate old arrow model to new one
+        !Array.isArray(element.points) || element.points.length < 2
+          ? [
+              [0, 0],
+              [element.width, element.height],
+            ]
+          : element.points;
+
+      if (points[0][0] !== 0 || points[0][1] !== 0) {
+        ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
+      }
+
+      // TODO: Separate arrow from linear element
+      return restoreElementWithProperties(element as ExcalidrawArrowElement, {
+        type: element.type,
+        startBinding: repairBinding(element, element.startBinding),
+        endBinding: repairBinding(element, element.endBinding),
+        lastCommittedPoint: null,
+        startArrowhead,
+        endArrowhead,
+        points,
+        x,
+        y,
+        elbowed: (element as ExcalidrawArrowElement).elbowed,
+        ...getSizeFromPoints(points),
+      });
    }

    // generic elements
@@ -771,6 +771,7 @@ describe("Test Transform", () => {
      const [arrow, rect] = excalidrawElements;
      expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
        elementId: "rect-1",
+        fixedPoint: null,
        focus: 0,
        gap: 205,
      });
@@ -13,16 +13,13 @@ import {
 import { bindLinearElement } from "../element/binding";
 import type { ElementConstructorOpts } from "../element/newElement";
 import {
+  newArrowElement,
  newFrameElement,
  newImageElement,
  newMagicFrameElement,
  newTextElement,
 } from "../element/newElement";
-import {
-  getDefaultLineHeight,
-  measureText,
-  normalizeText,
-} from "../element/textElement";
+import { measureText, normalizeText } from "../element/textElement";
 import type {
  ElementsMap,
  ExcalidrawArrowElement,
@@ -54,6 +51,8 @@ import {
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
+import { getLineHeight } from "../fonts";
+import { isArrowElement } from "../element/typeChecks";

 export type ValidLinearElement = {
  type: "arrow" | "line";
@@ -548,7 +547,7 @@ export const convertToExcalidrawElements = (
      case "arrow": {
        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
-        excalidrawElement = newLinearElement({
+        excalidrawElement = newArrowElement({
          width,
          height,
          endArrowhead: "arrow",
@@ -557,6 +556,7 @@ export const convertToExcalidrawElements = (
            [width, height],
          ],
          ...element,
+          type: "arrow",
        });

        Object.assign(
@@ -568,8 +568,7 @@ export const convertToExcalidrawElements = (
      case "text": {
        const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY;
        const fontSize = element?.fontSize || DEFAULT_FONT_SIZE;
-        const lineHeight =
-          element?.lineHeight || getDefaultLineHeight(fontFamily);
+        const lineHeight = element?.lineHeight || getLineHeight(fontFamily);
        const text = element.text ?? "";
        const normalizedText = normalizeText(text);
        const metrics = measureText(
@@ -659,7 +658,7 @@ export const convertToExcalidrawElements = (
          elementStore.add(container);
          elementStore.add(text);

-          if (container.type === "arrow") {
+          if (isArrowElement(container)) {
            const originalStart =
              element.type === "arrow" ? element?.start : undefined;
            const originalEnd =
@@ -678,7 +677,7 @@ export const convertToExcalidrawElements = (
            }
            const { linearElement, startBoundElement, endBoundElement } =
              bindLinearElementToElement(
-                container as ExcalidrawArrowElement,
+                container,
                originalStart,
                originalEnd,
                elementStore,
@@ -18,6 +18,7 @@ import {
  isImageElement,
  isTextElement,
 } from "./typeChecks";
+import { getBoundTextShape } from "../shapes";

 export const shouldTestInside = (element: ExcalidrawElement) => {
  if (element.type === "arrow") {
@@ -97,6 +98,12 @@ export const hitElementBoundingBoxOnly = (
 ) => {
  return (
    !hitElementItself(hitArgs) &&
+    // bound text is considered part of the element (even if it's outside the bounding box)
+    !hitElementBoundText(
+      hitArgs.x,
+      hitArgs.y,
+      getBoundTextShape(hitArgs.element, elementsMap),
+    ) &&
    hitElementBoundingBox(hitArgs.x, hitArgs.y, hitArgs.element, elementsMap)
  );
 };
@@ -105,6 +112,6 @@ export const hitElementBoundText = (
  x: number,
  y: number,
  textShape: GeometricShape | null,
-) => {
-  return textShape && isPointInShape([x, y], textShape);
+): boolean => {
+  return !!textShape && isPointInShape([x, y], textShape);
 };
@@ -10,6 +10,7 @@ import { getGridPoint } from "../math";
 import type Scene from "../scene/Scene";
 import {
  isArrowElement,
+  isElbowArrow,
  isFrameLikeElement,
  isTextElement,
 } from "./typeChecks";
@@ -18,9 +19,8 @@ import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
-  selectedElements: NonDeletedExcalidrawElement[],
+  _selectedElements: NonDeletedExcalidrawElement[],
  offset: { x: number; y: number },
-  appState: AppState,
  scene: Scene,
  snapOffset: {
    x: number;
@@ -28,6 +28,25 @@ export const dragSelectedElements = (
  },
  gridSize: AppState["gridSize"],
 ) => {
+  if (
+    _selectedElements.length === 1 &&
+    isArrowElement(_selectedElements[0]) &&
+    isElbowArrow(_selectedElements[0]) &&
+    (_selectedElements[0].startBinding || _selectedElements[0].endBinding)
+  ) {
+    return;
+  }
+
+  const selectedElements = _selectedElements.filter(
+    (el) =>
+      !(
+        isArrowElement(el) &&
+        isElbowArrow(el) &&
+        el.startBinding &&
+        el.endBinding
+      ),
+  );
+
  // we do not want a frame and its elements to be selected at the same time
  // but when it happens (due to some bug), we want to avoid updating element
  // in the frame twice, hence the use of set
@@ -72,9 +91,14 @@ export const dragSelectedElements = (
        updateElementCoords(pointerDownState, textElement, adjustedOffset);
      }
    }
-    updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
-      simultaneouslyUpdated: Array.from(elementsToUpdate),
-    });
+    updateBoundElements(
+      element,
+      scene.getElementsMapIncludingDeleted(),
+      scene,
+      {
+        simultaneouslyUpdated: Array.from(elementsToUpdate),
+      },
+    );
  });
 };

@@ -0,0 +1,146 @@
+import { lineAngle } from "../../utils/geometry/geometry";
+import type { Point, Vector } from "../../utils/geometry/shape";
+import {
+  getCenterForBounds,
+  PointInTriangle,
+  rotatePoint,
+  scalePointFromOrigin,
+} from "../math";
+import 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 headingForDiamond = (a: Point, b: Point) => {
+  const angle = lineAngle([a, b]);
+  if (angle >= 315 || angle < 45) {
+    return HEADING_UP;
+  } else if (angle >= 45 && angle < 135) {
+    return HEADING_RIGHT;
+  } else if (angle >= 135 && angle < 225) {
+    return HEADING_DOWN;
+  }
+  return HEADING_LEFT;
+};
+
+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 compareHeading = (a: Heading, b: Heading) =>
+  a[0] === b[0] && a[1] === b[1];
+
+// 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 = (
+  element: Readonly<ExcalidrawBindableElement>,
+  aabb: Readonly<Bounds>,
+  point: Readonly<Point>,
+): Heading => {
+  const SEARCH_CONE_MULTIPLIER = 2;
+
+  const midPoint = getCenterForBounds(aabb);
+
+  if (element.type === "diamond") {
+    if (point[0] < element.x) {
+      return HEADING_LEFT;
+    } else if (point[1] < element.y) {
+      return HEADING_UP;
+    } else if (point[0] > element.x + element.width) {
+      return HEADING_RIGHT;
+    } else if (point[1] > element.y + element.height) {
+      return HEADING_DOWN;
+    }
+
+    const top = rotatePoint(
+      scalePointFromOrigin(
+        [element.x + element.width / 2, element.y],
+        midPoint,
+        SEARCH_CONE_MULTIPLIER,
+      ),
+      midPoint,
+      element.angle,
+    );
+    const right = rotatePoint(
+      scalePointFromOrigin(
+        [element.x + element.width, element.y + element.height / 2],
+        midPoint,
+        SEARCH_CONE_MULTIPLIER,
+      ),
+      midPoint,
+      element.angle,
+    );
+    const bottom = rotatePoint(
+      scalePointFromOrigin(
+        [element.x + element.width / 2, element.y + element.height],
+        midPoint,
+        SEARCH_CONE_MULTIPLIER,
+      ),
+      midPoint,
+      element.angle,
+    );
+    const left = rotatePoint(
+      scalePointFromOrigin(
+        [element.x, element.y + element.height / 2],
+        midPoint,
+        SEARCH_CONE_MULTIPLIER,
+      ),
+      midPoint,
+      element.angle,
+    );
+
+    if (PointInTriangle(point, top, right, midPoint)) {
+      return headingForDiamond(top, right);
+    } else if (PointInTriangle(point, right, bottom, midPoint)) {
+      return headingForDiamond(right, bottom);
+    } else if (PointInTriangle(point, bottom, left, midPoint)) {
+      return headingForDiamond(bottom, left);
+    }
+
+    return headingForDiamond(left, top);
+  }
+
+  const topLeft = scalePointFromOrigin(
+    [aabb[0], aabb[1]],
+    midPoint,
+    SEARCH_CONE_MULTIPLIER,
+  );
+  const topRight = scalePointFromOrigin(
+    [aabb[2], aabb[1]],
+    midPoint,
+    SEARCH_CONE_MULTIPLIER,
+  );
+  const bottomLeft = scalePointFromOrigin(
+    [aabb[0], aabb[3]],
+    midPoint,
+    SEARCH_CONE_MULTIPLIER,
+  );
+  const bottomRight = scalePointFromOrigin(
+    [aabb[2], aabb[3]],
+    midPoint,
+    SEARCH_CONE_MULTIPLIER,
+  );
+
+  return PointInTriangle(point, topLeft, topRight, midPoint)
+    ? HEADING_UP
+    : PointInTriangle(point, topRight, bottomRight, midPoint)
+    ? HEADING_RIGHT
+    : PointInTriangle(point, bottomRight, bottomLeft, midPoint)
+    ? HEADING_DOWN
+    : HEADING_LEFT;
+};
@@ -11,6 +11,7 @@ export {
  newTextElement,
  refreshTextDimensions,
  newLinearElement,
+  newArrowElement,
  newImageElement,
  duplicateElement,
 } from "./newElement";
@@ -7,6 +7,8 @@ import type {
  ExcalidrawTextElementWithContainer,
  ElementsMap,
  NonDeletedSceneElementsMap,
+  OrderedExcalidrawElement,
+  FixedPointBinding,
 } from "./types";
 import {
  distance2d,
@@ -33,7 +35,6 @@ import type {
  AppState,
  PointerCoords,
  InteractiveCanvasAppState,
-  AppClassProperties,
 } from "../types";
 import { mutateElement } from "./mutateElement";

@@ -43,13 +44,19 @@ import {
  isBindingEnabled,
 } from "./binding";
 import { tupleToCoors } from "../utils";
-import { isBindingElement } from "./typeChecks";
+import {
+  isBindingElement,
+  isElbowArrow,
+  isFixedPointBinding,
+} from "./typeChecks";
 import { KEYS, shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { DRAGGING_THRESHOLD } from "../constants";
 import type { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
 import type { Store } from "../store";
+import { mutateElbowArrow } from "./routing";
+import type Scene from "../scene/Scene";

 const editorMidPointsCache: {
  version: number | null;
@@ -67,6 +74,7 @@ export class LinearElementEditor {
    prevSelectedPointsIndices: readonly number[] | null;
    /** index */
    lastClickedPoint: number;
+    lastClickedIsEndPoint: boolean;
    origin: Readonly<{ x: number; y: number }> | null;
    segmentMidpoint: {
      value: Point | null;
@@ -91,7 +99,9 @@ export class LinearElementEditor {
    this.elementId = element.id as string & {
      _brand: "excalidrawLinearElementId";
    };
-    LinearElementEditor.normalizePoints(element);
+    if (!arePointsEqual(element.points[0], [0, 0])) {
+      console.error("Linear element is not normalized", Error().stack);
+    }

    this.selectedPointsIndices = null;
    this.lastUncommittedPoint = null;
@@ -102,6 +112,7 @@ export class LinearElementEditor {
    this.pointerDownState = {
      prevSelectedPointsIndices: null,
      lastClickedPoint: -1,
+      lastClickedIsEndPoint: false,
      origin: null,

      segmentMidpoint: {
@@ -162,8 +173,8 @@ export class LinearElementEditor {
      elementsMap,
    );

-    const nextSelectedPoints = pointsSceneCoords.reduce(
-      (acc: number[], point, index) => {
+    const nextSelectedPoints = pointsSceneCoords
+      .reduce((acc: number[], point, index) => {
        if (
          (point[0] >= selectionX1 &&
            point[0] <= selectionX2 &&
@@ -175,9 +186,17 @@ export class LinearElementEditor {
        }

        return acc;
-      },
-      [],
-    );
+      }, [])
+      .filter((index) => {
+        if (
+          isElbowArrow(element) &&
+          index !== 0 &&
+          index !== element.points.length - 1
+        ) {
+          return false;
+        }
+        return true;
+      });

    setState({
      editingLinearElement: {
@@ -200,21 +219,52 @@ export class LinearElementEditor {
      pointSceneCoords: { x: number; y: number }[],
    ) => void,
    linearElementEditor: LinearElementEditor,
-    elementsMap: NonDeletedSceneElementsMap,
+    scene: Scene,
  ): boolean {
    if (!linearElementEditor) {
      return false;
    }
-    const { selectedPointsIndices, elementId } = linearElementEditor;
+    const { elementId } = linearElementEditor;
+    const elementsMap = scene.getNonDeletedElementsMap();
    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return false;
    }

+    if (
+      isElbowArrow(element) &&
+      !linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
+      linearElementEditor.pointerDownState.lastClickedPoint !== 0
+    ) {
+      return false;
+    }
+
+    const selectedPointsIndices = isElbowArrow(element)
+      ? linearElementEditor.selectedPointsIndices
+          ?.reduce(
+            (startEnd, index) =>
+              (index === 0
+                ? [0, startEnd[1]]
+                : [startEnd[0], element.points.length - 1]) as [
+                boolean | number,
+                boolean | number,
+              ],
+            [false, false] as [number | boolean, number | boolean],
+          )
+          .filter(
+            (idx: number | boolean): idx is number => typeof idx === "number",
+          )
+      : linearElementEditor.selectedPointsIndices;
+    const lastClickedPoint = isElbowArrow(element)
+      ? linearElementEditor.pointerDownState.lastClickedPoint > 0
+        ? element.points.length - 1
+        : 0
+      : linearElementEditor.pointerDownState.lastClickedPoint;
+
    // point that's being dragged (out of all selected points)
-    const draggingPoint = element.points[
-      linearElementEditor.pointerDownState.lastClickedPoint
-    ] as [number, number] | undefined;
+    const draggingPoint = element.points[lastClickedPoint] as
+      | [number, number]
+      | undefined;

    if (selectedPointsIndices && draggingPoint) {
      if (
@@ -234,15 +284,17 @@ export class LinearElementEditor {
          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
        );

-        LinearElementEditor.movePoints(element, [
-          {
-            index: selectedIndex,
-            point: [width + referencePoint[0], height + referencePoint[1]],
-            isDragging:
-              selectedIndex ===
-              linearElementEditor.pointerDownState.lastClickedPoint,
-          },
-        ]);
+        LinearElementEditor.movePoints(
+          element,
+          [
+            {
+              index: selectedIndex,
+              point: [width + referencePoint[0], height + referencePoint[1]],
+              isDragging: selectedIndex === lastClickedPoint,
+            },
+          ],
+          scene,
+        );
      } else {
        const newDraggingPointPosition = LinearElementEditor.createPointAt(
          element,
@@ -259,8 +311,7 @@ export class LinearElementEditor {
          element,
          selectedPointsIndices.map((pointIndex) => {
            const newPointPosition =
-              pointIndex ===
-              linearElementEditor.pointerDownState.lastClickedPoint
+              pointIndex === lastClickedPoint
                ? LinearElementEditor.createPointAt(
                    element,
                    elementsMap,
@@ -275,11 +326,10 @@ export class LinearElementEditor {
            return {
              index: pointIndex,
              point: newPointPosition,
-              isDragging:
-                pointIndex ===
-                linearElementEditor.pointerDownState.lastClickedPoint,
+              isDragging: pointIndex === lastClickedPoint,
            };
          }),
+          scene,
        );
      }

@@ -334,9 +384,10 @@ export class LinearElementEditor {
    event: PointerEvent,
    editingLinearElement: LinearElementEditor,
    appState: AppState,
-    app: AppClassProperties,
+    scene: Scene,
  ): LinearElementEditor {
-    const elementsMap = app.scene.getNonDeletedElementsMap();
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();

    const { elementId, selectedPointsIndices, isDragging, pointerDownState } =
      editingLinearElement;
@@ -361,15 +412,19 @@ export class LinearElementEditor {
          selectedPoint === element.points.length - 1
        ) {
          if (isPathALoop(element.points, appState.zoom.value)) {
-            LinearElementEditor.movePoints(element, [
-              {
-                index: selectedPoint,
-                point:
-                  selectedPoint === 0
-                    ? element.points[element.points.length - 1]
-                    : element.points[0],
-              },
-            ]);
+            LinearElementEditor.movePoints(
+              element,
+              [
+                {
+                  index: selectedPoint,
+                  point:
+                    selectedPoint === 0
+                      ? element.points[element.points.length - 1]
+                      : element.points[0],
+                },
+              ],
+              scene,
+            );
          }

          const bindingElement = isBindingEnabled(appState)
@@ -381,6 +436,7 @@ export class LinearElementEditor {
                    elementsMap,
                  ),
                ),
+                elements,
                elementsMap,
              )
            : null;
@@ -645,13 +701,14 @@ export class LinearElementEditor {
    store: Store,
    scenePointer: { x: number; y: number },
    linearElementEditor: LinearElementEditor,
-    app: AppClassProperties,
+    scene: Scene,
  ): {
    didAddPoint: boolean;
    hitElement: NonDeleted<ExcalidrawElement> | null;
    linearElementEditor: LinearElementEditor | null;
  } {
-    const elementsMap = app.scene.getNonDeletedElementsMap();
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();

    const ret: ReturnType<typeof LinearElementEditor["handlePointerDown"]> = {
      didAddPoint: false,
@@ -685,7 +742,10 @@ export class LinearElementEditor {
      );
    }
    if (event.altKey && appState.editingLinearElement) {
-      if (linearElementEditor.lastUncommittedPoint == null) {
+      if (
+        linearElementEditor.lastUncommittedPoint == null ||
+        !isElbowArrow(element)
+      ) {
        mutateElement(element, {
          points: [
            ...element.points,
@@ -706,6 +766,7 @@ export class LinearElementEditor {
        pointerDownState: {
          prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
          lastClickedPoint: -1,
+          lastClickedIsEndPoint: false,
          origin: { x: scenePointer.x, y: scenePointer.y },
          segmentMidpoint: {
            value: segmentMidpoint,
@@ -717,6 +778,7 @@ export class LinearElementEditor {
        lastUncommittedPoint: null,
        endBindingElement: getHoveredElementForBinding(
          scenePointer,
+          elements,
          elementsMap,
        ),
      };
@@ -749,6 +811,7 @@ export class LinearElementEditor {
          startBindingElement,
          endBindingElement,
          elementsMap,
+          scene,
        );
      }
    }
@@ -781,6 +844,7 @@ export class LinearElementEditor {
      pointerDownState: {
        prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
        lastClickedPoint: clickedPointIndex,
+        lastClickedIsEndPoint: clickedPointIndex === element.points.length - 1,
        origin: { x: scenePointer.x, y: scenePointer.y },
        segmentMidpoint: {
          value: segmentMidpoint,
@@ -815,12 +879,13 @@ export class LinearElementEditor {
    scenePointerX: number,
    scenePointerY: number,
    appState: AppState,
-    elementsMap: ElementsMap,
+    scene: Scene,
  ): LinearElementEditor | null {
    if (!appState.editingLinearElement) {
      return null;
    }
    const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
+    const elementsMap = scene.getNonDeletedElementsMap();
    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return appState.editingLinearElement;
@@ -831,7 +896,7 @@ export class LinearElementEditor {

    if (!event.altKey) {
      if (lastPoint === lastUncommittedPoint) {
-        LinearElementEditor.deletePoints(element, [points.length - 1]);
+        LinearElementEditor.deletePoints(element, [points.length - 1], scene);
      }
      return {
        ...appState.editingLinearElement,
@@ -862,19 +927,30 @@ export class LinearElementEditor {
        elementsMap,
        scenePointerX - appState.editingLinearElement.pointerOffset.x,
        scenePointerY - appState.editingLinearElement.pointerOffset.y,
-        event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
+        event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
+          ? null
+          : appState.gridSize,
      );
    }

    if (lastPoint === lastUncommittedPoint) {
-      LinearElementEditor.movePoints(element, [
-        {
-          index: element.points.length - 1,
-          point: newPoint,
-        },
-      ]);
+      LinearElementEditor.movePoints(
+        element,
+        [
+          {
+            index: element.points.length - 1,
+            point: newPoint,
+          },
+        ],
+        scene,
+      );
    } else {
-      LinearElementEditor.addPoints(element, appState, [{ point: newPoint }]);
+      LinearElementEditor.addPoints(
+        element,
+        appState,
+        [{ point: newPoint }],
+        scene,
+      );
    }
    return {
      ...appState.editingLinearElement,
@@ -938,6 +1014,11 @@ export class LinearElementEditor {
    absoluteCoords: Point,
    elementsMap: ElementsMap,
  ): Point {
+    if (isElbowArrow(element)) {
+      // No rotation for elbow arrows
+      return [absoluteCoords[0] - element.x, absoluteCoords[1] - element.y];
+    }
+
    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
@@ -1028,13 +1109,13 @@ export class LinearElementEditor {
    mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
  }

-  static duplicateSelectedPoints(appState: AppState, elementsMap: ElementsMap) {
+  static duplicateSelectedPoints(appState: AppState, scene: Scene) {
    if (!appState.editingLinearElement) {
      return false;
    }

    const { selectedPointsIndices, elementId } = appState.editingLinearElement;
-
+    const elementsMap = scene.getNonDeletedElementsMap();
    const element = LinearElementEditor.getElement(elementId, elementsMap);

    if (!element || selectedPointsIndices === null) {
@@ -1077,12 +1158,16 @@ export class LinearElementEditor {
    // potentially expanding the bounding box
    if (pointAddedToEnd) {
      const lastPoint = element.points[element.points.length - 1];
-      LinearElementEditor.movePoints(element, [
-        {
-          index: element.points.length - 1,
-          point: [lastPoint[0] + 30, lastPoint[1] + 30],
-        },
-      ]);
+      LinearElementEditor.movePoints(
+        element,
+        [
+          {
+            index: element.points.length - 1,
+            point: [lastPoint[0] + 30, lastPoint[1] + 30],
+          },
+        ],
+        scene,
+      );
    }

    return {
@@ -1099,6 +1184,7 @@ export class LinearElementEditor {
  static deletePoints(
    element: NonDeleted<ExcalidrawLinearElement>,
    pointIndices: readonly number[],
+    scene: Scene,
  ) {
    let offsetX = 0;
    let offsetY = 0;
@@ -1126,25 +1212,46 @@ export class LinearElementEditor {
      return acc;
    }, []);

-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    LinearElementEditor._updatePoints(
+      element,
+      nextPoints,
+      offsetX,
+      offsetY,
+      scene,
+    );
  }

  static addPoints(
    element: NonDeleted<ExcalidrawLinearElement>,
    appState: AppState,
    targetPoints: { point: Point }[],
+    scene: Scene,
  ) {
    const offsetX = 0;
    const offsetY = 0;

    const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    LinearElementEditor._updatePoints(
+      element,
+      nextPoints,
+      offsetX,
+      offsetY,
+      scene,
+    );
  }

  static movePoints(
    element: NonDeleted<ExcalidrawLinearElement>,
    targetPoints: { index: number; point: Point; isDragging?: boolean }[],
-    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
+    scene: Scene,
+    otherUpdates?: {
+      startBinding?: PointBinding | null;
+      endBinding?: PointBinding | null;
+    },
+    options?: {
+      changedElements?: Map<string, OrderedExcalidrawElement>;
+      isDragging?: boolean;
+    },
  ) {
    const { points } = element;

@@ -1192,7 +1299,16 @@ export class LinearElementEditor {
      nextPoints,
      offsetX,
      offsetY,
+      scene,
      otherUpdates,
+      {
+        isDragging: targetPoints.reduce(
+          (dragging, targetPoint): boolean =>
+            dragging || targetPoint.isDragging === true,
+          false,
+        ),
+        changedElements: options?.changedElements,
+      },
    );
  }

@@ -1207,6 +1323,11 @@ export class LinearElementEditor {
      elementsMap,
    );

+    // Elbow arrows don't allow midpoints
+    if (element && isElbowArrow(element)) {
+      return false;
+    }
+
    if (!element) {
      return false;
    }
@@ -1266,7 +1387,7 @@ export class LinearElementEditor {
      elementsMap,
      pointerCoords.x,
      pointerCoords.y,
-      snapToGrid ? appState.gridSize : null,
+      snapToGrid && !isElbowArrow(element) ? appState.gridSize : null,
    );
    const points = [
      ...element.points.slice(0, segmentMidpoint.index!),
@@ -1295,23 +1416,61 @@ export class LinearElementEditor {
    nextPoints: readonly Point[],
    offsetX: number,
    offsetY: number,
-    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
+    scene: Scene,
+    otherUpdates?: {
+      startBinding?: PointBinding | null;
+      endBinding?: PointBinding | null;
+    },
+    options?: {
+      changedElements?: Map<string, OrderedExcalidrawElement>;
+      isDragging?: boolean;
+    },
  ) {
-    const nextCoords = getElementPointsCoords(element, nextPoints);
-    const prevCoords = getElementPointsCoords(element, element.points);
-    const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
-    const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;
-    const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;
-    const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
-    const dX = prevCenterX - nextCenterX;
-    const dY = prevCenterY - nextCenterY;
-    const rotated = rotate(offsetX, offsetY, dX, dY, element.angle);
-    mutateElement(element, {
-      ...otherUpdates,
-      points: nextPoints,
-      x: element.x + rotated[0],
-      y: element.y + rotated[1],
-    });
+    if (isElbowArrow(element)) {
+      const bindings: {
+        startBinding?: FixedPointBinding | null;
+        endBinding?: FixedPointBinding | null;
+      } = {};
+      if (otherUpdates?.startBinding !== undefined) {
+        bindings.startBinding =
+          otherUpdates.startBinding !== null &&
+          isFixedPointBinding(otherUpdates.startBinding)
+            ? otherUpdates.startBinding
+            : null;
+      }
+      if (otherUpdates?.endBinding !== undefined) {
+        bindings.endBinding =
+          otherUpdates.endBinding !== null &&
+          isFixedPointBinding(otherUpdates.endBinding)
+            ? otherUpdates.endBinding
+            : null;
+      }
+
+      mutateElbowArrow(
+        element,
+        scene,
+        nextPoints,
+        [offsetX, offsetY],
+        bindings,
+        options,
+      );
+    } else {
+      const nextCoords = getElementPointsCoords(element, nextPoints);
+      const prevCoords = getElementPointsCoords(element, element.points);
+      const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
+      const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;
+      const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;
+      const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
+      const dX = prevCenterX - nextCenterX;
+      const dY = prevCenterY - nextCenterY;
+      const rotated = rotate(offsetX, offsetY, dX, dY, element.angle);
+      mutateElement(element, {
+        ...otherUpdates,
+        points: nextPoints,
+        x: element.x + rotated[0],
+        y: element.y + rotated[1],
+      });
+    }
  }

  private static _getShiftLockedDelta(
@@ -1327,6 +1486,13 @@ export class LinearElementEditor {
      elementsMap,
    );

+    if (isElbowArrow(element)) {
+      return [
+        scenePointer[0] - referencePointCoords[0],
+        scenePointer[1] - referencePointCoords[1],
+      ];
+    }
+
    const [gridX, gridY] = getGridPoint(
      scenePointer[0],
      scenePointer[1],
@@ -107,6 +107,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 export const newElementWith = <TElement extends ExcalidrawElement>(
  element: TElement,
  updates: ElementUpdate<TElement>,
+  /** pass `true` to always regenerate */
+  force = false,
 ): TElement => {
  let didChange = false;
  for (const key in updates) {
@@ -123,7 +125,7 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
    }
  }

-  if (!didChange) {
+  if (!didChange && !force) {
    return element;
  }

@@ -121,6 +121,7 @@ describe("duplicating multiple elements", () => {
        elementId: "rectangle1",
        focus: 0.2,
        gap: 7,
+        fixedPoint: [0.5, 1],
      },
    });

@@ -131,6 +132,7 @@ describe("duplicating multiple elements", () => {
        elementId: "rectangle1",
        focus: 0.2,
        gap: 7,
+        fixedPoint: [0.5, 1],
      },
      boundElements: [{ id: "text2", type: "text" }],
    });
@@ -247,6 +249,7 @@ describe("duplicating multiple elements", () => {
        elementId: "rectangle1",
        focus: 0.2,
        gap: 7,
+        fixedPoint: [0.5, 1],
      },
    });

@@ -263,11 +266,13 @@ describe("duplicating multiple elements", () => {
        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],
      },
    });

@@ -278,11 +283,13 @@ describe("duplicating multiple elements", () => {
        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],
      },
    });

@@ -17,6 +17,7 @@ import type {
  ExcalidrawMagicFrameElement,
  ExcalidrawIframeElement,
  ElementsMap,
+  ExcalidrawArrowElement,
 } from "./types";
 import {
  arrayToMap,
@@ -36,7 +37,6 @@ import {
  normalizeText,
  wrapText,
  getBoundTextMaxWidth,
-  getDefaultLineHeight,
 } from "./textElement";
 import {
  DEFAULT_ELEMENT_PROPS,
@@ -47,6 +47,7 @@ import {
  VERTICAL_ALIGN,
 } from "../constants";
 import type { MarkOptional, Merge, Mutable } from "../utility-types";
+import { getLineHeight } from "../fonts";

 export type ElementConstructorOpts = MarkOptional<
  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -228,7 +229,7 @@ export const newTextElement = (
 ): NonDeleted<ExcalidrawTextElement> => {
  const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
  const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
-  const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
+  const lineHeight = opts.lineHeight || getLineHeight(fontFamily);
  const text = normalizeText(opts.text);
  const metrics = measureText(
    text,
@@ -388,8 +389,6 @@ export const newFreeDrawElement = (
 export const newLinearElement = (
  opts: {
    type: ExcalidrawLinearElement["type"];
-    startArrowhead?: Arrowhead | null;
-    endArrowhead?: Arrowhead | null;
    points?: ExcalidrawLinearElement["points"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawLinearElement> => {
@@ -399,8 +398,29 @@ export const newLinearElement = (
    lastCommittedPoint: null,
    startBinding: null,
    endBinding: null,
+    startArrowhead: null,
+    endArrowhead: null,
+  };
+};
+
+export const newArrowElement = (
+  opts: {
+    type: ExcalidrawArrowElement["type"];
+    startArrowhead?: Arrowhead | null;
+    endArrowhead?: Arrowhead | null;
+    points?: ExcalidrawArrowElement["points"];
+    elbowed?: boolean;
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawArrowElement> => {
+  return {
+    ..._newElementBase<ExcalidrawArrowElement>(opts.type, opts),
+    points: opts.points || [],
+    lastCommittedPoint: null,
+    startBinding: null,
+    endBinding: null,
    startArrowhead: opts.startArrowhead || null,
    endArrowhead: opts.endArrowhead || null,
+    elbowed: opts.elbowed || false,
  };
 };

@@ -514,7 +534,7 @@ export const regenerateId = (
    if (
      window.h?.app
        ?.getSceneElementsIncludingDeleted()
-        .find((el) => el.id === nextId)
+        .find((el: ExcalidrawElement) => el.id === nextId)
    ) {
      nextId += "_copy";
    }
@@ -22,6 +22,7 @@ import {
 import {
  isArrowElement,
  isBoundToContainer,
+  isElbowArrow,
  isFrameLikeElement,
  isFreeDrawElement,
  isImageElement,
@@ -30,7 +31,7 @@ import {
 } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getFontString } from "../utils";
-import { updateBoundElements } from "./binding";
+import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
 import type {
  MaybeTransformHandleType,
  TransformHandleDirection,
@@ -51,6 +52,7 @@ import {
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
+import { mutateElbowArrow } from "./routing";

 export const normalizeAngle = (angle: number): number => {
  if (angle < 0) {
@@ -75,18 +77,21 @@ export const transformElements = (
  pointerY: number,
  centerX: number,
  centerY: number,
+  scene: Scene,
 ) => {
  if (selectedElements.length === 1) {
    const [element] = selectedElements;
    if (transformHandleType === "rotation") {
-      rotateSingleElement(
-        element,
-        elementsMap,
-        pointerX,
-        pointerY,
-        shouldRotateWithDiscreteAngle,
-      );
-      updateBoundElements(element, elementsMap);
+      if (!isElbowArrow(element)) {
+        rotateSingleElement(
+          element,
+          elementsMap,
+          pointerX,
+          pointerY,
+          shouldRotateWithDiscreteAngle,
+        );
+        updateBoundElements(element, elementsMap, scene);
+      }
    } else if (isTextElement(element) && transformHandleType) {
      resizeSingleTextElement(
        originalElements,
@@ -97,7 +102,7 @@ export const transformElements = (
        pointerX,
        pointerY,
      );
-      updateBoundElements(element, elementsMap);
+      updateBoundElements(element, elementsMap, scene);
    } else if (transformHandleType) {
      resizeSingleElement(
        originalElements,
@@ -108,6 +113,7 @@ export const transformElements = (
        shouldResizeFromCenter,
        pointerX,
        pointerY,
+        scene,
      );
    }

@@ -123,6 +129,7 @@ export const transformElements = (
        shouldRotateWithDiscreteAngle,
        centerX,
        centerY,
+        scene,
      );
      return true;
    } else if (transformHandleType) {
@@ -135,6 +142,7 @@ export const transformElements = (
        shouldMaintainAspectRatio,
        pointerX,
        pointerY,
+        scene,
      );
      return true;
    }
@@ -431,7 +439,17 @@ export const resizeSingleElement = (
  shouldResizeFromCenter: boolean,
  pointerX: number,
  pointerY: number,
+  scene: Scene,
 ) => {
+  // Elbow arrows cannot be resized when bound on either end
+  if (
+    isArrowElement(element) &&
+    isElbowArrow(element) &&
+    (element.startBinding || element.endBinding)
+  ) {
+    return;
+  }
+
  const stateAtResizeStart = originalElements.get(element.id)!;
  // Gets bounds corners
  const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
@@ -701,8 +719,11 @@ export const resizeSingleElement = (
  ) {
    mutateElement(element, resizedElement);

-    updateBoundElements(element, elementsMap, {
-      newSize: { width: resizedElement.width, height: resizedElement.height },
+    updateBoundElements(element, elementsMap, scene, {
+      oldSize: {
+        width: stateAtResizeStart.width,
+        height: stateAtResizeStart.height,
+      },
    });

    if (boundTextElement && boundTextFont != null) {
@@ -728,6 +749,7 @@ export const resizeMultipleElements = (
  shouldMaintainAspectRatio: boolean,
  pointerX: number,
  pointerY: number,
+  scene: Scene,
 ) => {
  // map selected elements to the original elements. While it never should
  // happen that pointerDownState.originalElements won't contain the selected
@@ -955,13 +977,20 @@ export const resizeMultipleElements = (
    element,
    update: { boundTextFontSize, ...update },
  } of elementsAndUpdates) {
-    const { width, height, angle } = update;
+    const { angle } = update;
+    const { width: oldWidth, height: oldHeight } = element;

    mutateElement(element, update, false);

-    updateBoundElements(element, elementsMap, {
+    if (isArrowElement(element) && isElbowArrow(element)) {
+      mutateElbowArrow(element, scene, element.points, undefined, undefined, {
+        informMutation: false,
+      });
+    }
+
+    updateBoundElements(element, elementsMap, scene, {
      simultaneouslyUpdated: elementsToUpdate,
-      newSize: { width, height },
+      oldSize: { width: oldWidth, height: oldHeight },
    });

    const boundTextElement = getBoundTextElement(element, elementsMap);
@@ -990,6 +1019,7 @@ const rotateMultipleElements = (
  shouldRotateWithDiscreteAngle: boolean,
  centerX: number,
  centerY: number,
+  scene: Scene,
 ) => {
  let centerAngle =
    (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
@@ -1013,16 +1043,23 @@ const rotateMultipleElements = (
        centerY,
        centerAngle + origAngle - element.angle,
      );
-      mutateElement(
-        element,
-        {
-          x: element.x + (rotatedCX - cx),
-          y: element.y + (rotatedCY - cy),
-          angle: normalizeAngle(centerAngle + origAngle),
-        },
-        false,
-      );
-      updateBoundElements(element, elementsMap, {
+
+      if (isArrowElement(element) && isElbowArrow(element)) {
+        const points = getArrowLocalFixedPoints(element, elementsMap);
+        mutateElbowArrow(element, scene, points);
+      } else {
+        mutateElement(
+          element,
+          {
+            x: element.x + (rotatedCX - cx),
+            y: element.y + (rotatedCY - cy),
+            angle: normalizeAngle(centerAngle + origAngle),
+          },
+          false,
+        );
+      }
+
+      updateBoundElements(element, elementsMap, scene, {
        simultaneouslyUpdated: elements,
      });

@@ -0,0 +1,216 @@
+import React from "react";
+import Scene from "../scene/Scene";
+import { API } from "../tests/helpers/api";
+import { Pointer, UI } from "../tests/helpers/ui";
+import {
+  fireEvent,
+  GlobalTestState,
+  queryByTestId,
+  render,
+} from "../tests/test-utils";
+import { bindLinearElement } from "./binding";
+import { Excalidraw } from "../index";
+import { mutateElbowArrow } from "./routing";
+import type {
+  ExcalidrawArrowElement,
+  ExcalidrawBindableElement,
+  ExcalidrawElbowArrowElement,
+} from "./types";
+import { ARROW_TYPE } from "../constants";
+
+const { h } = window;
+
+const mouse = new Pointer("mouse");
+
+const editInput = (input: HTMLInputElement, value: string) => {
+  input.focus();
+  fireEvent.change(input, { target: { value } });
+  input.blur();
+};
+
+const getStatsProperty = (label: string) => {
+  const elementStats = UI.queryStats()?.querySelector("#elementStats");
+
+  if (elementStats) {
+    const properties = elementStats?.querySelector(".statsItem");
+    return (
+      properties?.querySelector?.(
+        `.drag-input-container[data-testid="${label}"]`,
+      ) || null
+    );
+  }
+
+  return null;
+};
+
+describe("elbow arrow routing", () => {
+  it("can properly generate orthogonal arrow points", () => {
+    const scene = new Scene();
+    const arrow = API.createElement({
+      type: "arrow",
+      elbowed: true,
+    }) as ExcalidrawElbowArrowElement;
+    scene.insertElement(arrow);
+    mutateElbowArrow(arrow, scene, [
+      [-45 - arrow.x, -100.1 - arrow.y],
+      [45 - arrow.x, 99.9 - arrow.y],
+    ]);
+    expect(arrow.points).toEqual([
+      [0, 0],
+      [0, 100],
+      [90, 100],
+      [90, 200],
+    ]);
+    expect(arrow.x).toEqual(-45);
+    expect(arrow.y).toEqual(-100.1);
+    expect(arrow.width).toEqual(90);
+    expect(arrow.height).toEqual(200);
+  });
+  it("can generate proper points for bound elbow arrow", () => {
+    const scene = new Scene();
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: -150,
+      y: -150,
+      width: 100,
+      height: 100,
+    }) as ExcalidrawBindableElement;
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+    }) as ExcalidrawBindableElement;
+    const arrow = API.createElement({
+      type: "arrow",
+      elbowed: true,
+      x: -45,
+      y: -100.1,
+      width: 90,
+      height: 200,
+      points: [
+        [0, 0],
+        [90, 200],
+      ],
+    }) as ExcalidrawElbowArrowElement;
+    scene.insertElement(rectangle1);
+    scene.insertElement(rectangle2);
+    scene.insertElement(arrow);
+    const elementsMap = scene.getNonDeletedElementsMap();
+    bindLinearElement(arrow, rectangle1, "start", elementsMap);
+    bindLinearElement(arrow, rectangle2, "end", elementsMap);
+
+    expect(arrow.startBinding).not.toBe(null);
+    expect(arrow.endBinding).not.toBe(null);
+
+    mutateElbowArrow(arrow, scene, [
+      [0, 0],
+      [90, 200],
+    ]);
+
+    expect(arrow.points).toEqual([
+      [0, 0],
+      [45, 0],
+      [45, 200],
+      [90, 200],
+    ]);
+  });
+});
+
+describe("elbow arrow ui", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
+  });
+
+  it("can follow bound shapes", async () => {
+    UI.createElement("rectangle", {
+      x: -150,
+      y: -150,
+      width: 100,
+      height: 100,
+    });
+    UI.createElement("rectangle", {
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+    });
+
+    UI.clickTool("arrow");
+    UI.clickOnTestId("elbow-arrow");
+
+    expect(h.state.currentItemArrowType).toBe(ARROW_TYPE.elbow);
+
+    mouse.reset();
+    mouse.moveTo(-43, -99);
+    mouse.click();
+    mouse.moveTo(43, 99);
+    mouse.click();
+
+    const arrow = h.scene.getSelectedElements(
+      h.state,
+    )[0] as ExcalidrawArrowElement;
+
+    expect(arrow.type).toBe("arrow");
+    expect(arrow.elbowed).toBe(true);
+    expect(arrow.points).toEqual([
+      [0, 0],
+      [35, 0],
+      [35, 200],
+      [90, 200],
+    ]);
+  });
+
+  it("can follow bound rotated shapes", async () => {
+    UI.createElement("rectangle", {
+      x: -150,
+      y: -150,
+      width: 100,
+      height: 100,
+    });
+    UI.createElement("rectangle", {
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+    });
+
+    UI.clickTool("arrow");
+    UI.clickOnTestId("elbow-arrow");
+
+    mouse.reset();
+    mouse.moveTo(-43, -99);
+    mouse.click();
+    mouse.moveTo(43, 99);
+    mouse.click();
+
+    const arrow = h.scene.getSelectedElements(
+      h.state,
+    )[0] as ExcalidrawArrowElement;
+
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
+      button: 2,
+      clientX: 1,
+      clientY: 1,
+    });
+    const contextMenu = UI.queryContextMenu();
+    fireEvent.click(queryByTestId(contextMenu!, "stats")!);
+
+    mouse.click(51, 51);
+
+    const inputAngle = getStatsProperty("A")?.querySelector(
+      ".drag-input",
+    ) as HTMLInputElement;
+    editInput(inputAngle, String("40"));
+
+    expect(arrow.points.map((point) => point.map(Math.round))).toEqual([
+      [0, 0],
+      [35, 0],
+      [35, 90],
+      [25, 90],
+      [25, 165],
+      [103, 165],
+    ]);
+  });
+});
@@ -1,4 +1,5 @@
 import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
+import { getLineHeight } from "../fonts";
 import { API } from "../tests/helpers/api";
 import {
  computeContainerDimensionForBoundText,
@@ -8,7 +9,6 @@ import {
  wrapText,
  detectLineHeight,
  getLineHeightInPx,
-  getDefaultLineHeight,
  parseTokens,
 } from "./textElement";
 import type { ExcalidrawTextElementWithContainer, FontString } from "./types";
@@ -418,15 +418,15 @@ describe("Test getLineHeightInPx", () => {
 describe("Test getDefaultLineHeight", () => {
  it("should return line height using default font family when not passed", () => {
    //@ts-ignore
-    expect(getDefaultLineHeight()).toBe(1.25);
+    expect(getLineHeight()).toBe(1.25);
  });

  it("should return line height using default font family for unknown font", () => {
    const UNKNOWN_FONT = 5;
-    expect(getDefaultLineHeight(UNKNOWN_FONT)).toBe(1.25);
+    expect(getLineHeight(UNKNOWN_FONT)).toBe(1.25);
  });

  it("should return correct line height", () => {
-    expect(getDefaultLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
+    expect(getLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
  });
 });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dependabot[bot]	fa1f6890c4	build(deps): bump ws from 7.5.9 to 7.5.10 in /dev-docs Bumps [ws](https://github.com/websockets/ws) from 7.5.9 to 7.5.10. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/compare/7.5.9...7.5.10) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2024-08-02 12:46:01 +00:00
Márk Tolmács	c641860cb1	fix: CVE-2023-45133 (#7988 ) * Upgrade @babel/* versions to 7.24 to ensure non-vulnerable Babel versions * Pinning React version to 18.2.0 exactly, avoiding test-utils type version clashes * Fix warning message on yarn start * Moving react to peer dependencies * Moving app dependencies from workspace into app * Bump vitest to 1.6.0 to fix history.test.tsx breaking --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2024-08-02 14:44:38 +02:00
Marcel Mraz	84d89b9a8a	fix: throttle fractional indices validation (#8306 )	2024-08-02 11:55:15 +02:00
David Luzar	e63dd025c9	fix: allow binding elbow arrows to frame children (#8309 )	2024-08-01 19:40:54 +02:00
Márk Tolmács	15e019706d	feat: Orthogonal (elbow) arrows for diagramming (#8299 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-08-01 18:39:03 +02:00
Aakansha Doshi	a133a70e87	build: update release script to build esm (#8308 )	2024-08-01 20:19:37 +05:30
Marcel Mraz	80ea7ca23f	fix: skip registering font faces for local fonts (#8303 )	2024-08-01 11:32:16 +02:00
David Luzar	e844580b14	feat: remove automatic frame naming (#8302 )	2024-07-31 13:56:11 +02:00
Marcel Mraz	5a0771ad9c	fix: load fonts for `exportToCanvas` (#8298 )	2024-07-30 17:23:35 +02:00
Marcel Mraz	adcdbe2907	fix: re-add Cascadia Code with ligatures (#8291 )	2024-07-30 11:15:11 +02:00
Marcel Mraz	230d0edc44	feat: multiple fonts fallbacks (#8286 )	2024-07-30 10:34:40 +02:00
Marcel Mraz	d0a380758e	feat: ability to debug the state of fractional indices (#8235 )	2024-07-30 10:03:27 +02:00
Ryan Di	7b36de0476	fix: linear elements not selected on pointer up from hitting its bound text (#8285 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-07-27 13:02:00 +00:00
David Luzar	2427e622b0	feat: improve mermaid detection on paste (#8287 )	2024-07-27 12:36:54 +02:00
Marcel Mraz	62228e0bbb	feat: introduce font picker (#8012 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-07-25 18:55:55 +02:00
DDDDD12138	4c5408263c	chore: Correct Typos in Code Comments (#8268 ) chore: correct typos Co-authored-by: wuzhiqing <wuzhiqing@linklogis.com>	2024-07-23 14:26:55 +05:30
Aakansha Doshi	bd7b778f41	perf: cache the temp canvas created for labeled arrows (#8267 ) * perf: cache the temp canvas created for labeled arrows * use allEleemntsMap so bound text element can be retrieved when editing * remove logs * fix rotation * pass isRotating * feat: cache `element.angle` instead of relying on `appState.isRotating` --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-07-23 11:17:32 +05:30
David Luzar	43b2476dfe	fix: revert default element canvas padding change (#8266 )	2024-07-22 11:47:16 +02:00