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

.nvmrc

@@ -1 +0,0 @@
-18

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

@@ -9,7 +9,7 @@ You will need to import the `Footer` component from the package and wrap your co
 ```jsx live
 function App() {
   return (
-    <div style={{ height: "500px"}}>
+    <div style={{ height: "500px" }}>
       <Excalidraw>
         <Footer>
           <button
@@ -27,19 +27,19 @@ function App() {
 
 This will only work for `Desktop` devices.
 
-For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
+For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useEditorInterface`](#useEditorInterface) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
 
 Open the `Menu` in the below playground and you will see the `custom footer` rendered.
 
 ```jsx live noInline
 const MobileFooter = ({}) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
-  if (device.editor.isMobile) {
+  if (editorInterface.formFactor === "phone") {
     return (
       <Footer>
         <button
           className="custom-footer"
-          style= {{ marginLeft: '20px', height: '2rem'}}
+          style={{ marginLeft: "20px", height: "2rem" }}
           onClick={() => alert("This is custom footer in mobile menu")}
         >
           custom footer

dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md

@@ -292,7 +292,7 @@ viewportCoordsToSceneCoords(&#123; clientX: number, clientY: number },<br/>&nbsp
   appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a><br/>): &#123;x: number, y: number}
 </pre>
 
-### useDevice
+### useEditorInterface
 
 This hook can be used to check the type of device which is being used. It can only be used inside the `children` of `Excalidraw` component.
 
@@ -300,8 +300,8 @@ Open the `main menu` in the below example to view the footer.
 
 ```jsx live noInline
 const MobileFooter = ({}) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
-  if (device.editor.isMobile) {
+  if (editorInterface.formFactor === "phone") {
     return (
       <Footer>
         <button
@@ -336,12 +336,20 @@ render(<App />);
 The `device` has the following `attributes`, some grouped into `viewport` and `editor` objects, per context.
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
-| `viewport.isMobile` | `boolean` | Set to `true` when viewport is in `mobile` breakpoint |
+
-| `viewport.isLandscape` | `boolean` | Set to `true` when the viewport is in `landscape` mode |
+The `EditorInterface` object has the following properties:
-| `editor.canFitSidebar` | `boolean` | Set to `true` if there's enough space to fit the `sidebar` |
+
-| `editor.isMobile` | `boolean` | Set to `true` when editor container is in `mobile` breakpoint |
+| Name | Type | Description |
-| `isTouchScreen` | `boolean` | Set to `true` for `touch` when touch event detected |
+| --- | --- | --- | --- | --- | --- |
+| `formFactor` | `'phone' | 'tablet' | 'desktop'` | Indicates the device type based on screen size |
+| `desktopUIMode` | `'compact' | 'full'` | UI mode for desktop form factor |
+| `userAgent.raw` | `string` | Raw user agent string |
+| `userAgent.isMobileDevice` | `boolean` | True if device is mobile |
+| `userAgent.platform` | `'ios' | 'android' | 'other' | 'unknown'` | Device platform |
+| `isTouchScreen` | `boolean` | True if touch events are detected |
+| `canFitSidebar` | `boolean` | True if sidebar can fit in the viewport |
+| `isLandscape` | `boolean` | True if viewport is in landscape mode |
 
 ### i18n
 

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

@@ -12,10 +12,10 @@ const MobileFooter = ({
   excalidrawAPI: ExcalidrawImperativeAPI;
   excalidrawLib: typeof TExcalidraw;
 }) => {
-  const { useDevice, Footer } = excalidrawLib;
+  const { useEditorInterface, Footer } = excalidrawLib;
 
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
-  if (device.editor.isMobile) {
+  if (editorInterface.formFactor === "phone") {
     return (
       <Footer>
         <CustomFooter

excalidraw-app/App.tsx

@@ -4,6 +4,7 @@ import {
   TTDDialogTrigger,
   CaptureUpdateAction,
   reconcileElements,
+  useEditorInterface,
 } from "@excalidraw/excalidraw";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
@@ -137,6 +138,9 @@ import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
 
 import "./index.scss";
 
+import { ExcalidrawPlusPromoBanner } from "./components/ExcalidrawPlusPromoBanner";
+import { AppSidebar } from "./components/AppSidebar";
+
 import type { CollabAPI } from "./collab/Collab";
 
 polyfill();
@@ -342,6 +346,8 @@ const ExcalidrawWrapper = () => {
 
   const [langCode, setLangCode] = useAppLangCode();
 
+  const editorInterface = useEditorInterface();
+
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -663,8 +669,8 @@ const ExcalidrawWrapper = () => {
       debugRenderer(
         debugCanvasRef.current,
         appState,
+        elements,
         window.devicePixelRatio,
-        () => forceRefresh((prev) => !prev),
       );
     }
   };
@@ -848,14 +854,22 @@ const ExcalidrawWrapper = () => {
           if (isMobile || !collabAPI || isCollabDisabled) {
             return null;
           }
+
           return (
-            <div className="top-right-ui">
+            <div className="excalidraw-ui-top-right">
+              {excalidrawAPI?.getEditorInterface().formFactor === "desktop" && (
+                <ExcalidrawPlusPromoBanner
+                  isSignedIn={isExcalidrawPlusSignedUser}
+                />
+              )}
+
               {collabError.message && <CollabError collabError={collabError} />}
               <LiveCollaborationTrigger
                 isCollaborating={isCollaborating}
                 onSelect={() =>
                   setShareDialogState({ isOpen: true, type: "share" })
                 }
+                editorInterface={editorInterface}
               />
             </div>
           );
@@ -941,6 +955,8 @@ const ExcalidrawWrapper = () => {
           }}
         />
 
+        <AppSidebar />
+
         {errorMessage && (
           <ErrorDialog onClose={() => setErrorMessage("")}>
             {errorMessage}

excalidraw-app/components/AppFooter.tsx

@@ -5,7 +5,6 @@ import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 import { EncryptedIcon } from "./EncryptedIcon";
-import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
 
 export const AppFooter = React.memo(
   ({ onChange }: { onChange: () => void }) => {
@@ -19,11 +18,7 @@ export const AppFooter = React.memo(
           }}
         >
           {isVisualDebuggerEnabled() && <DebugFooter onChange={onChange} />}
-          {isExcalidrawPlusSignedUser ? (
+          {!isExcalidrawPlusSignedUser && <EncryptedIcon />}
-            <ExcalidrawPlusAppLink />
-          ) : (
-            <EncryptedIcon />
-          )}
         </div>
       </Footer>
     );

excalidraw-app/components/AppSidebar.scss

@@ -0,0 +1,36 @@
+.excalidraw {
+  .app-sidebar-promo-container {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+    flex: 1 1 auto;
+  }
+
+  .app-sidebar-promo-image {
+    margin: 1rem 0;
+
+    height: 16.25rem;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    background-image: radial-gradient(
+        circle,
+        transparent 60%,
+        var(--sidebar-bg-color) 100%
+      ),
+      var(--image-source);
+
+    display: flex;
+  }
+
+  .app-sidebar-promo-text {
+    padding: 0 2rem;
+  }
+
+  .link-button {
+    margin: 0 auto;
+  }
+}

excalidraw-app/components/AppSidebar.tsx

@@ -0,0 +1,79 @@
+import { DefaultSidebar, Sidebar, THEME } from "@excalidraw/excalidraw";
+import {
+  messageCircleIcon,
+  presentationIcon,
+} from "@excalidraw/excalidraw/components/icons";
+import { LinkButton } from "@excalidraw/excalidraw/components/LinkButton";
+import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState";
+
+import "./AppSidebar.scss";
+
+export const AppSidebar = () => {
+  const { theme, openSidebar } = useUIAppState();
+
+  return (
+    <DefaultSidebar>
+      <DefaultSidebar.TabTriggers>
+        <Sidebar.TabTrigger
+          tab="comments"
+          style={{ opacity: openSidebar?.tab === "comments" ? 1 : 0.4 }}
+        >
+          {messageCircleIcon}
+        </Sidebar.TabTrigger>
+        <Sidebar.TabTrigger
+          tab="presentation"
+          style={{ opacity: openSidebar?.tab === "presentation" ? 1 : 0.4 }}
+        >
+          {presentationIcon}
+        </Sidebar.TabTrigger>
+      </DefaultSidebar.TabTriggers>
+      <Sidebar.Tab tab="comments">
+        <div className="app-sidebar-promo-container">
+          <div
+            className="app-sidebar-promo-image"
+            style={{
+              ["--image-source" as any]: `url(/oss_promo_comments_${
+                theme === THEME.DARK ? "dark" : "light"
+              }.jpg)`,
+              opacity: 0.7,
+            }}
+          />
+          <div className="app-sidebar-promo-text">
+            Make comments with Excalidraw+
+          </div>
+          <LinkButton
+            href={`${
+              import.meta.env.VITE_APP_PLUS_LP
+            }/plus?utm_source=excalidraw&utm_medium=app&utm_content=comments_promo#excalidraw-redirect`}
+          >
+            Sign up now
+          </LinkButton>
+        </div>
+      </Sidebar.Tab>
+      <Sidebar.Tab tab="presentation" className="px-3">
+        <div className="app-sidebar-promo-container">
+          <div
+            className="app-sidebar-promo-image"
+            style={{
+              ["--image-source" as any]: `url(/oss_promo_presentations_${
+                theme === THEME.DARK ? "dark" : "light"
+              }.svg)`,
+              backgroundSize: "60%",
+              opacity: 0.4,
+            }}
+          />
+          <div className="app-sidebar-promo-text">
+            Create presentations with Excalidraw+
+          </div>
+          <LinkButton
+            href={`${
+              import.meta.env.VITE_APP_PLUS_LP
+            }/plus?utm_source=excalidraw&utm_medium=app&utm_content=presentations_promo#excalidraw-redirect`}
+          >
+            Sign up now
+          </LinkButton>
+        </div>
+      </Sidebar.Tab>
+    </DefaultSidebar>
+  );
+};

excalidraw-app/components/DebugCanvas.tsx

@@ -8,9 +8,15 @@ import {
   getNormalizedCanvasDimensions,
 } from "@excalidraw/excalidraw/renderer/helpers";
 import { type AppState } from "@excalidraw/excalidraw/types";
-import { throttleRAF } from "@excalidraw/common";
+import { arrayToMap, throttleRAF } from "@excalidraw/common";
 import { useCallback } from "react";
 
+import {
+  getGlobalFixedPointForBindableElement,
+  isArrowElement,
+  isBindableElement,
+} from "@excalidraw/element";
+
 import {
   isLineSegment,
   type GlobalPoint,
@@ -21,8 +27,14 @@ import { isCurve } from "@excalidraw/math/curve";
 import React from "react";
 
 import type { Curve } from "@excalidraw/math";
-
+import type { DebugElement } from "@excalidraw/common";
-import type { DebugElement } from "@excalidraw/utils/visualdebug";
+import type {
+  ElementsMap,
+  ExcalidrawArrowElement,
+  ExcalidrawBindableElement,
+  FixedPointBinding,
+  OrderedExcalidrawElement,
+} from "@excalidraw/element/types";
 
 import { STORAGE_KEYS } from "../app_constants";
 
@@ -75,6 +87,176 @@ const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
   context.save();
 };
 
+const _renderBinding = (
+  context: CanvasRenderingContext2D,
+  binding: FixedPointBinding,
+  elementsMap: ElementsMap,
+  zoom: number,
+  width: number,
+  height: number,
+  color: string,
+) => {
+  if (!binding.fixedPoint) {
+    console.warn("Binding must have a fixedPoint");
+    return;
+  }
+
+  const bindable = elementsMap.get(
+    binding.elementId,
+  ) as ExcalidrawBindableElement;
+  const [x, y] = getGlobalFixedPointForBindableElement(
+    binding.fixedPoint,
+    bindable,
+    elementsMap,
+  );
+
+  context.save();
+  context.strokeStyle = color;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(x * zoom, y * zoom);
+  context.bezierCurveTo(
+    x * zoom - width,
+    y * zoom - height,
+    x * zoom - width,
+    y * zoom + height,
+    x * zoom,
+    y * zoom,
+  );
+  context.stroke();
+  context.restore();
+};
+
+const _renderBindableBinding = (
+  binding: FixedPointBinding,
+  context: CanvasRenderingContext2D,
+  elementsMap: ElementsMap,
+  zoom: number,
+  width: number,
+  height: number,
+  color: string,
+) => {
+  const bindable = elementsMap.get(
+    binding.elementId,
+  ) as ExcalidrawBindableElement;
+  if (!binding.fixedPoint) {
+    console.warn("Binding must have a fixedPoint");
+    return;
+  }
+
+  const [x, y] = getGlobalFixedPointForBindableElement(
+    binding.fixedPoint,
+    bindable,
+    elementsMap,
+  );
+
+  context.save();
+  context.strokeStyle = color;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(x * zoom, y * zoom);
+  context.bezierCurveTo(
+    x * zoom + width,
+    y * zoom + height,
+    x * zoom + width,
+    y * zoom - height,
+    x * zoom,
+    y * zoom,
+  );
+  context.stroke();
+  context.restore();
+};
+
+const renderBindings = (
+  context: CanvasRenderingContext2D,
+  elements: readonly OrderedExcalidrawElement[],
+  zoom: number,
+) => {
+  const elementsMap = arrayToMap(elements);
+  const dim = 16;
+  elements.forEach((element) => {
+    if (element.isDeleted) {
+      return;
+    }
+
+    if (isArrowElement(element)) {
+      if (element.startBinding) {
+        if (
+          !elementsMap
+            .get(element.startBinding.elementId)
+            ?.boundElements?.find((e) => e.id === element.id)
+        ) {
+          return;
+        }
+
+        _renderBinding(
+          context,
+          element.startBinding,
+          elementsMap,
+          zoom,
+          dim,
+          dim,
+          element.startBinding?.mode === "orbit" ? "red" : "black",
+        );
+      }
+
+      if (element.endBinding) {
+        if (
+          !elementsMap
+            .get(element.endBinding.elementId)
+            ?.boundElements?.find((e) => e.id === element.id)
+        ) {
+          return;
+        }
+        _renderBinding(
+          context,
+          element.endBinding,
+          elementsMap,
+          zoom,
+          dim,
+          dim,
+          element.endBinding?.mode === "orbit" ? "red" : "black",
+        );
+      }
+    }
+
+    if (isBindableElement(element) && element.boundElements?.length) {
+      element.boundElements.forEach((boundElement) => {
+        if (boundElement.type !== "arrow") {
+          return;
+        }
+
+        const arrow = elementsMap.get(
+          boundElement.id,
+        ) as ExcalidrawArrowElement;
+
+        if (arrow && arrow.startBinding?.elementId === element.id) {
+          _renderBindableBinding(
+            arrow.startBinding,
+            context,
+            elementsMap,
+            zoom,
+            dim,
+            dim,
+            "green",
+          );
+        }
+        if (arrow && arrow.endBinding?.elementId === element.id) {
+          _renderBindableBinding(
+            arrow.endBinding,
+            context,
+            elementsMap,
+            zoom,
+            dim,
+            dim,
+            "green",
+          );
+        }
+      });
+    }
+  });
+};
+
 const render = (
   frame: DebugElement[],
   context: CanvasRenderingContext2D,
@@ -107,8 +289,8 @@ const render = (
 const _debugRenderer = (
   canvas: HTMLCanvasElement,
   appState: AppState,
+  elements: readonly OrderedExcalidrawElement[],
   scale: number,
-  refresh: () => void,
 ) => {
   const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
     canvas,
@@ -131,6 +313,7 @@ const _debugRenderer = (
   );
 
   renderOrigin(context, appState.zoom.value);
+  renderBindings(context, elements, appState.zoom.value);
 
   if (
     window.visualDebug?.currentFrame &&
@@ -182,10 +365,10 @@ export const debugRenderer = throttleRAF(
   (
     canvas: HTMLCanvasElement,
     appState: AppState,
+    elements: readonly OrderedExcalidrawElement[],
     scale: number,
-    refresh: () => void,
   ) => {
-    _debugRenderer(canvas, appState, scale, refresh);
+    _debugRenderer(canvas, appState, elements, scale);
   },
   { trailing: true },
 );

excalidraw-app/components/ExcalidrawPlusAppLink.tsx

@@ -1,19 +0,0 @@
-import { isExcalidrawPlusSignedUser } from "../app_constants";
-
-export const ExcalidrawPlusAppLink = () => {
-  if (!isExcalidrawPlusSignedUser) {
-    return null;
-  }
-  return (
-    <a
-      href={`${
-        import.meta.env.VITE_APP_PLUS_APP
-      }?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`}
-      target="_blank"
-      rel="noopener"
-      className="plus-button"
-    >
-      Go to Excalidraw+
-    </a>
-  );
-};

excalidraw-app/components/ExcalidrawPlusPromoBanner.tsx

@@ -0,0 +1,22 @@
+export const ExcalidrawPlusPromoBanner = ({
+  isSignedIn,
+}: {
+  isSignedIn: boolean;
+}) => {
+  return (
+    <a
+      href={
+        isSignedIn
+          ? import.meta.env.VITE_APP_PLUS_APP
+          : `${
+              import.meta.env.VITE_APP_PLUS_LP
+            }/plus?utm_source=excalidraw&utm_medium=app&utm_content=guestBanner#excalidraw-redirect`
+      }
+      target="_blank"
+      rel="noopener"
+      className="plus-banner"
+    >
+      Excalidraw+
+    </a>
+  );
+};

excalidraw-app/data/LocalData.ts

@@ -16,7 +16,6 @@ import {
   DEFAULT_SIDEBAR,
   debounce,
 } from "@excalidraw/common";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
 import {
   createStore,
   entries,
@@ -28,6 +27,7 @@ import {
 } from "idb-keyval";
 
 import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
+import { getNonDeletedElements } from "@excalidraw/element";
 
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
@@ -88,7 +88,7 @@ const saveDataStateToLocalStorage = (
 
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-      JSON.stringify(clearElementsForLocalStorage(elements)),
+      JSON.stringify(getNonDeletedElements(elements)),
     );
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,

excalidraw-app/data/localStorage.ts

@@ -2,7 +2,6 @@ import {
   clearAppStateForLocalStorage,
   getDefaultAppState,
 } from "@excalidraw/excalidraw/appState";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
 
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -50,7 +49,7 @@ export const importFromLocalStorage = () => {
   let elements: ExcalidrawElement[] = [];
   if (savedElements) {
     try {
-      elements = clearElementsForLocalStorage(JSON.parse(savedElements));
+      elements = JSON.parse(savedElements);
     } catch (error: any) {
       console.error(error);
       // Do nothing because elements array is already empty

excalidraw-app/index.scss

@@ -1,3 +1,5 @@
+@import "../packages/excalidraw/css/variables.module.scss";
+
 .excalidraw {
   --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion
 
@@ -5,12 +7,6 @@
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
 
-  .top-right-ui {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-  }
-
   .footer-center {
     justify-content: flex-end;
     margin-top: auto;
@@ -90,22 +86,31 @@
   }
 }
 
-.plus-button {
+.plus-banner {
   display: flex;
   justify-content: center;
   cursor: pointer;
   align-items: center;
   border: 1px solid var(--color-primary);
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem 0.875rem;
   border-radius: var(--border-radius-lg);
   background-color: var(--island-bg-color);
-  color: var(--color-primary) !important;
   text-decoration: none !important;
 
-  font-size: 0.75rem;
+  font-family: var(--ui-font);
+  font-size: 0.8333rem;
   box-sizing: border-box;
   height: var(--lg-button-size);
 
+  border: none;
+  box-shadow: 0 0 0 1px var(--color-surface-lowest);
+  background-color: var(--color-surface-low);
+  color: var(--button-color, var(--color-on-surface)) !important;
+
+  &:active {
+    box-shadow: 0 0 0 1px var(--color-brand-active);
+  }
+
   &:hover {
     background-color: var(--color-primary);
     color: white !important;
@@ -117,7 +122,7 @@
 }
 
 .theme--dark {
-  .plus-button {
+  .plus-banner {
     &:hover {
       color: black !important;
     }

excalidraw-app/package.json

@@ -23,7 +23,7 @@
     ]
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": ">=18.0.0"
   },
   "dependencies": {
     "@excalidraw/random-username": "1.0.0",

excalidraw-app/sentry.ts

@@ -1,3 +1,4 @@
+import { getFeatureFlag } from "@excalidraw/common";
 import * as Sentry from "@sentry/browser";
 import callsites from "callsites";
 
@@ -33,6 +34,7 @@ Sentry.init({
     Sentry.captureConsoleIntegration({
       levels: ["error"],
     }),
+    Sentry.featureFlagsIntegration(),
   ],
   beforeSend(event) {
     if (event.request?.url) {
@@ -79,3 +81,14 @@ Sentry.init({
     return event;
   },
 });
+
+const flagsIntegration =
+  Sentry.getClient()?.getIntegrationByName<Sentry.FeatureFlagsIntegration>(
+    "FeatureFlags",
+  );
+if (flagsIntegration) {
+  flagsIntegration.addFeatureFlag(
+    "COMPLEX_BINDINGS",
+    getFeatureFlag("COMPLEX_BINDINGS"),
+  );
+}

excalidraw-app/tests/MobileMenu.test.tsx

@@ -17,30 +17,15 @@ describe("Test MobileMenu", () => {
 
   beforeEach(async () => {
     await render(<ExcalidrawApp />);
-    // @ts-ignore
+    h.app.refreshEditorInterface();
-    h.app.refreshViewportBreakpoints();
-    // @ts-ignore
-    h.app.refreshEditorBreakpoints();
   });
 
   afterAll(() => {
     restoreOriginalGetBoundingClientRect();
   });
 
-  it("should set device correctly", () => {
+  it("should set editor interface correctly", () => {
-    expect(h.app.device).toMatchInlineSnapshot(`
+    expect(h.app.editorInterface.formFactor).toBe("phone");
-      {
-        "editor": {
-          "canFitSidebar": false,
-          "isMobile": true,
-        },
-        "isTouchScreen": false,
-        "viewport": {
-          "isLandscape": true,
-          "isMobile": true,
-        },
-      }
-    `);
   });
 
   it("should initialize with welcome screen and hide once user interacts", async () => {

package.json

@@ -44,7 +44,7 @@
     "vitest-canvas-mock": "0.3.3"
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": ">=18.0.0"
   },
   "homepage": ".",
   "prettier": "@excalidraw/prettier-config",

packages/common/src/constants.ts

@@ -6,32 +6,6 @@ import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
 
 import { COLOR_PALETTE } from "./colors";
 
-export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-export const isWindows = /^Win/.test(navigator.platform);
-export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
-export const isFirefox =
-  typeof window !== "undefined" &&
-  "netscape" in window &&
-  navigator.userAgent.indexOf("rv:") > 1 &&
-  navigator.userAgent.indexOf("Gecko") > 1;
-export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
-export const isSafari =
-  !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
-export const isIOS =
-  /iPad|iPhone/i.test(navigator.platform) ||
-  // iPadOS 13+
-  (navigator.userAgent.includes("Mac") && "ontouchend" in document);
-// keeping function so it can be mocked in test
-export const isBrave = () =>
-  (navigator as any).brave?.isBrave?.name === "isBrave";
-
-export const isMobile =
-  isIOS ||
-  /android|webos|ipod|blackberry|iemobile|opera mini/i.test(
-    navigator.userAgent,
-  ) ||
-  /android|ios|ipod|blackberry|windows phone/i.test(navigator.platform);
-
 export const supportsResizeObserver =
   typeof window !== "undefined" && "ResizeObserver" in window;
 
@@ -131,6 +105,7 @@ export const CLASSES = {
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
   CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
   SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
+  FRAME_NAME: "frame-name",
 };
 
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
@@ -349,26 +324,6 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
   },
 };
 
-// breakpoints
-// -----------------------------------------------------------------------------
-
-// mobile: up to 699px
-export const MQ_MAX_MOBILE = 599;
-
-export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
-export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
-
-// tablets
-export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
-export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
-
-// desktop/laptop
-export const MQ_MIN_WIDTH_DESKTOP = 1440;
-
-// sidebar
-export const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
-// -----------------------------------------------------------------------------
-
 export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
 export const EXPORT_SCALES = [1, 2, 3];
@@ -549,6 +504,8 @@ export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
 
 export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
 
+export const BIND_MODE_TIMEOUT = 700; // ms
+
 // glass background for mobile action buttons
 export const MOBILE_ACTION_BUTTON_BG = {
   background: "var(--mobile-action-button-bg)",

packages/common/src/editorInterface.ts

@@ -0,0 +1,223 @@
+export type StylesPanelMode = "compact" | "full" | "mobile";
+
+export type EditorInterface = Readonly<{
+  formFactor: "phone" | "tablet" | "desktop";
+  desktopUIMode: "compact" | "full";
+  userAgent: Readonly<{
+    isMobileDevice: boolean;
+    platform: "ios" | "android" | "other" | "unknown";
+  }>;
+  isTouchScreen: boolean;
+  canFitSidebar: boolean;
+  isLandscape: boolean;
+}>;
+
+// storage key
+const DESKTOP_UI_MODE_STORAGE_KEY = "excalidraw.desktopUIMode";
+
+// breakpoints
+// mobile: up to 699px
+export const MQ_MAX_MOBILE = 599;
+
+export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
+export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
+
+// tablets
+export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
+export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
+
+// desktop/laptop
+export const MQ_MIN_WIDTH_DESKTOP = 1440;
+
+// sidebar
+export const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
+
+// -----------------------------------------------------------------------------
+
+// user agent detections
+export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+export const isWindows = /^Win/.test(navigator.platform);
+export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
+export const isFirefox =
+  typeof window !== "undefined" &&
+  "netscape" in window &&
+  navigator.userAgent.indexOf("rv:") > 1 &&
+  navigator.userAgent.indexOf("Gecko") > 1;
+export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
+export const isSafari =
+  !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
+export const isIOS =
+  /iPad|iPhone/i.test(navigator.platform) ||
+  // iPadOS 13+
+  (navigator.userAgent.includes("Mac") && "ontouchend" in document);
+// keeping function so it can be mocked in test
+export const isBrave = () =>
+  (navigator as any).brave?.isBrave?.name === "isBrave";
+
+// export const isMobile =
+//   isIOS ||
+//   /android|webos|ipod|blackberry|iemobile|opera mini/i.test(
+//     navigator.userAgent,
+//   ) ||
+//   /android|ios|ipod|blackberry|windows phone/i.test(navigator.platform);
+
+// utilities
+export const isMobileBreakpoint = (width: number, height: number) => {
+  return (
+    width <= MQ_MAX_MOBILE ||
+    (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
+  );
+};
+
+export const isTabletBreakpoint = (
+  editorWidth: number,
+  editorHeight: number,
+) => {
+  const minSide = Math.min(editorWidth, editorHeight);
+  const maxSide = Math.max(editorWidth, editorHeight);
+
+  return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
+};
+
+const isMobileOrTablet = (): boolean => {
+  const ua = navigator.userAgent || "";
+  const platform = navigator.platform || "";
+  const uaData = (navigator as any).userAgentData as
+    | { mobile?: boolean; platform?: string }
+    | undefined;
+
+  // --- 1) chromium: prefer ua client hints -------------------------------
+  if (uaData) {
+    const plat = (uaData.platform || "").toLowerCase();
+    const isDesktopOS =
+      plat === "windows" ||
+      plat === "macos" ||
+      plat === "linux" ||
+      plat === "chrome os";
+    if (uaData.mobile === true) {
+      return true;
+    }
+    if (uaData.mobile === false && plat === "android") {
+      const looksTouchTablet =
+        matchMedia?.("(hover: none)").matches &&
+        matchMedia?.("(pointer: coarse)").matches;
+      return looksTouchTablet;
+    }
+    if (isDesktopOS) {
+      return false;
+    }
+  }
+
+  // --- 2) ios (includes ipad) --------------------------------------------
+  if (isIOS) {
+    return true;
+  }
+
+  // --- 3) android legacy ua fallback -------------------------------------
+  if (isAndroid) {
+    const isAndroidPhone = /Mobile/i.test(ua);
+    const isAndroidTablet = !isAndroidPhone;
+    if (isAndroidPhone || isAndroidTablet) {
+      const looksTouchTablet =
+        matchMedia?.("(hover: none)").matches &&
+        matchMedia?.("(pointer: coarse)").matches;
+      return looksTouchTablet;
+    }
+  }
+
+  // --- 4) last resort desktop exclusion ----------------------------------
+  const looksDesktopPlatform =
+    /Win|Linux|CrOS|Mac/.test(platform) ||
+    /Windows NT|X11|CrOS|Macintosh/.test(ua);
+  if (looksDesktopPlatform) {
+    return false;
+  }
+  return false;
+};
+
+export const getFormFactor = (
+  editorWidth: number,
+  editorHeight: number,
+): EditorInterface["formFactor"] => {
+  if (isMobileBreakpoint(editorWidth, editorHeight)) {
+    return "phone";
+  }
+
+  if (isTabletBreakpoint(editorWidth, editorHeight)) {
+    return "tablet";
+  }
+
+  return "desktop";
+};
+
+export const deriveStylesPanelMode = (
+  editorInterface: EditorInterface,
+): StylesPanelMode => {
+  if (editorInterface.formFactor === "phone") {
+    return "mobile";
+  }
+
+  if (editorInterface.formFactor === "tablet") {
+    return "compact";
+  }
+
+  return editorInterface.desktopUIMode;
+};
+
+export const createUserAgentDescriptor = (
+  userAgentString: string,
+): EditorInterface["userAgent"] => {
+  const normalizedUA = userAgentString ?? "";
+  let platform: EditorInterface["userAgent"]["platform"] = "unknown";
+
+  if (isIOS) {
+    platform = "ios";
+  } else if (isAndroid) {
+    platform = "android";
+  } else if (normalizedUA) {
+    platform = "other";
+  }
+
+  return {
+    isMobileDevice: isMobileOrTablet(),
+    platform,
+  } as const;
+};
+
+export const loadDesktopUIModePreference = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    const stored = window.localStorage.getItem(DESKTOP_UI_MODE_STORAGE_KEY);
+    if (stored === "compact" || stored === "full") {
+      return stored as EditorInterface["desktopUIMode"];
+    }
+  } catch (error) {
+    // ignore storage access issues (e.g., Safari private mode)
+  }
+
+  return null;
+};
+
+const persistDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(DESKTOP_UI_MODE_STORAGE_KEY, mode);
+  } catch (error) {
+    // ignore storage access issues (e.g., Safari private mode)
+  }
+};
+
+export const setDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
+  if (mode !== "compact" && mode !== "full") {
+    return;
+  }
+
+  persistDesktopUIMode(mode);
+
+  return mode;
+};

packages/common/src/index.ts

@@ -10,3 +10,5 @@ export * from "./random";
 export * from "./url";
 export * from "./utils";
 export * from "./emitter";
+export * from "./visualdebug";
+export * from "./editorInterface";

packages/common/src/keys.ts

@@ -1,4 +1,4 @@
-import { isDarwin } from "./constants";
+import { isDarwin } from "./editorInterface";
 
 import type { ValueOf } from "./utility-types";
 

packages/common/src/utils.ts

@@ -1,10 +1,6 @@
 import { average } from "@excalidraw/math";
 
-import type {
+import type { FontFamilyValues, FontString } from "@excalidraw/element/types";
-  ExcalidrawBindableElement,
-  FontFamilyValues,
-  FontString,
-} from "@excalidraw/element/types";
 
 import type {
   ActiveTool,
@@ -20,8 +16,6 @@ import {
   ENV,
   FONT_FAMILY,
   getFontFamilyFallbacks,
-  isAndroid,
-  isIOS,
   WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
 
@@ -384,6 +378,10 @@ export const removeSelection = () => {
 
 export const distance = (x: number, y: number) => Math.abs(x - y);
 
+export const isSelectionLikeTool = (type: ToolType | "custom") => {
+  return type === "selection" || type === "lasso";
+};
+
 export const updateActiveTool = (
   appState: Pick<AppState, "activeTool">,
   data: ((
@@ -560,9 +558,6 @@ export const isTransparent = (color: string) => {
   );
 };
 
-export const isBindingFallthroughEnabled = (el: ExcalidrawBindableElement) =>
-  el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
-
 export type ResolvablePromise<T> = Promise<T> & {
   resolve: [T] extends [undefined]
     ? (value?: MaybePromise<Awaited<T>>) => void
@@ -1273,58 +1268,46 @@ export const reduceToCommonValue = <T, R = T>(
   return commonValue;
 };
 
-export const isMobileOrTablet = (): boolean => {
+type FEATURE_FLAGS = {
-  const ua = navigator.userAgent || "";
+  COMPLEX_BINDINGS: boolean;
-  const platform = navigator.platform || "";
+};
-  const uaData = (navigator as any).userAgentData as
+
-    | { mobile?: boolean; platform?: string }
+const FEATURE_FLAGS_STORAGE_KEY = "excalidraw-feature-flags";
-    | undefined;
+const DEFAULT_FEATURE_FLAGS: FEATURE_FLAGS = {
-
+  COMPLEX_BINDINGS: false,
-  // --- 1) chromium: prefer ua client hints -------------------------------
+};
-  if (uaData) {
+let featureFlags: FEATURE_FLAGS | null = null;
-    const plat = (uaData.platform || "").toLowerCase();
+
-    const isDesktopOS =
+export const getFeatureFlag = <F extends keyof FEATURE_FLAGS>(
-      plat === "windows" ||
+  flag: F,
-      plat === "macos" ||
+): FEATURE_FLAGS[F] => {
-      plat === "linux" ||
+  if (!featureFlags) {
-      plat === "chrome os";
+    try {
-    if (uaData.mobile === true) {
+      const serializedFlags = localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
-      return true;
+      if (serializedFlags) {
-    }
+        const flags = JSON.parse(serializedFlags);
-    if (uaData.mobile === false && plat === "android") {
+        featureFlags = flags ?? DEFAULT_FEATURE_FLAGS;
-      const looksTouchTablet =
+      }
-        matchMedia?.("(hover: none)").matches &&
+    } catch {}
-        matchMedia?.("(pointer: coarse)").matches;
+  }
-      return looksTouchTablet;
+
-    }
+  return (featureFlags || DEFAULT_FEATURE_FLAGS)[flag];
-    if (isDesktopOS) {
+};
-      return false;
+
-    }
+export const setFeatureFlag = <F extends keyof FEATURE_FLAGS>(
-  }
+  flag: F,
-
+  value: FEATURE_FLAGS[F],
-  // --- 2) ios (includes ipad) --------------------------------------------
+) => {
-  if (isIOS) {
+  try {
-    return true;
+    featureFlags = {
-  }
+      ...(featureFlags || DEFAULT_FEATURE_FLAGS),
-
+      [flag]: value,
-  // --- 3) android legacy ua fallback -------------------------------------
+    };
-  if (isAndroid) {
+    localStorage.setItem(
-    const isAndroidPhone = /Mobile/i.test(ua);
+      FEATURE_FLAGS_STORAGE_KEY,
-    const isAndroidTablet = !isAndroidPhone;
+      JSON.stringify(featureFlags),
-    if (isAndroidPhone || isAndroidTablet) {
+    );
-      const looksTouchTablet =
+  } catch (e) {
-        matchMedia?.("(hover: none)").matches &&
+    console.error("unable to set feature flag", e);
-        matchMedia?.("(pointer: coarse)").matches;
+  }
-      return looksTouchTablet;
-    }
-  }
-
-  // --- 4) last resort desktop exclusion ----------------------------------
-  const looksDesktopPlatform =
-    /Win|Linux|CrOS|Mac/.test(platform) ||
-    /Windows NT|X11|CrOS|Macintosh/.test(ua);
-  if (looksDesktopPlatform) {
-    return false;
-  }
-  return false;
 };

packages/common/src/visualdebug.ts

@@ -139,7 +139,7 @@ export const debugDrawPoints = (
   }: {
     x: number;
     y: number;
-    points: LocalPoint[];
+    points: readonly LocalPoint[];
   },
   options?: any,
 ) => {

packages/element/src/bounds.ts

@@ -1276,6 +1276,13 @@ export const elementCenterPoint = (
   xOffset: number = 0,
   yOffset: number = 0,
 ) => {
+  if (isLinearElement(element)) {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
+
+    return pointFrom<GlobalPoint>(x + xOffset, y + yOffset);
+  }
+
   const [x, y] = getCenterForBounds(getElementBounds(element, elementsMap));
 
   return pointFrom<GlobalPoint>(x + xOffset, y + yOffset);

packages/element/src/collision.ts

@@ -1,4 +1,4 @@
-import { isTransparent } from "@excalidraw/common";
+import { invariant, isTransparent } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -34,10 +34,14 @@ import {
   elementCenterPoint,
   getCenterForBounds,
   getCubicBezierCurveBound,
+  getDiamondPoints,
   getElementBounds,
+  pointInsideBounds,
 } from "./bounds";
 import {
   hasBoundTextElement,
+  isBindableElement,
+  isFrameLikeElement,
   isFreeDrawElement,
   isIframeLikeElement,
   isImageElement,
@@ -58,12 +62,17 @@ import { distanceToElement } from "./distance";
 
 import type {
   ElementsMap,
+  ExcalidrawBindableElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
   ExcalidrawEllipseElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   ExcalidrawRectanguloidElement,
+  NonDeleted,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+  Ordered,
 } from "./types";
 
 export const shouldTestInside = (element: ExcalidrawElement) => {
@@ -94,6 +103,7 @@ export type HitTestArgs = {
   threshold: number;
   elementsMap: ElementsMap;
   frameNameBound?: FrameNameBounds | null;
+  overrideShouldTestInside?: boolean;
 };
 
 export const hitElementItself = ({
@@ -102,6 +112,7 @@ export const hitElementItself = ({
   threshold,
   elementsMap,
   frameNameBound = null,
+  overrideShouldTestInside = false,
 }: HitTestArgs) => {
   // Hit test against a frame's name
   const hitFrameName = frameNameBound
@@ -134,7 +145,9 @@ export const hitElementItself = ({
   }
 
   // Do the precise (and relatively costly) hit test
-  const hitElement = shouldTestInside(element)
+  const hitElement = (
+    overrideShouldTestInside ? true : shouldTestInside(element)
+  )
     ? // Since `inShape` tests STRICTLY againt the insides of a shape
       // we would need `onShape` as well to include the "borders"
       isPointInElement(point, element, elementsMap) ||
@@ -193,6 +206,116 @@ export const hitElementBoundText = (
   return isPointInElement(point, boundTextElement, elementsMap);
 };
 
+const bindingBorderTest = (
+  element: NonDeleted<ExcalidrawBindableElement>,
+  [x, y]: Readonly<GlobalPoint>,
+  elementsMap: NonDeletedSceneElementsMap,
+  tolerance: number = 0,
+): boolean => {
+  const p = pointFrom<GlobalPoint>(x, y);
+  const shouldTestInside =
+    // disable fullshape snapping for frame elements so we
+    // can bind to frame children
+    !isFrameLikeElement(element);
+
+  // PERF: Run a cheap test to see if the binding element
+  // is even close to the element
+  const t = Math.max(1, tolerance);
+  const bounds = [x - t, y - t, x + t, y + t] as Bounds;
+  const elementBounds = getElementBounds(element, elementsMap);
+  if (!doBoundsIntersect(bounds, elementBounds)) {
+    return false;
+  }
+
+  // If the element is inside a frame, we should clip the element
+  if (element.frameId) {
+    const enclosingFrame = elementsMap.get(element.frameId);
+    if (enclosingFrame && isFrameLikeElement(enclosingFrame)) {
+      const enclosingFrameBounds = getElementBounds(
+        enclosingFrame,
+        elementsMap,
+      );
+      if (!pointInsideBounds(p, enclosingFrameBounds)) {
+        return false;
+      }
+    }
+  }
+
+  // Do the intersection test against the element since it's close enough
+  const intersections = intersectElementWithLineSegment(
+    element,
+    elementsMap,
+    lineSegment(elementCenterPoint(element, elementsMap), p),
+  );
+  const distance = distanceToElement(element, elementsMap, p);
+
+  return shouldTestInside
+    ? intersections.length === 0 || distance <= tolerance
+    : intersections.length > 0 && distance <= t;
+};
+
+export const getAllHoveredElementAtPoint = (
+  point: Readonly<GlobalPoint>,
+  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
+  elementsMap: NonDeletedSceneElementsMap,
+  toleranceFn?: (element: ExcalidrawBindableElement) => number,
+): NonDeleted<ExcalidrawBindableElement>[] => {
+  const candidateElements: NonDeleted<ExcalidrawBindableElement>[] = [];
+  // We need to to hit testing from front (end of the array) to back (beginning of the array)
+  // because array is ordered from lower z-index to highest and we want element z-index
+  // with higher z-index
+  for (let index = elements.length - 1; index >= 0; --index) {
+    const element = elements[index];
+
+    invariant(
+      !element.isDeleted,
+      "Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements",
+    );
+
+    if (
+      isBindableElement(element, false) &&
+      bindingBorderTest(element, point, elementsMap, toleranceFn?.(element))
+    ) {
+      candidateElements.push(element);
+
+      if (!isTransparent(element.backgroundColor)) {
+        break;
+      }
+    }
+  }
+
+  return candidateElements;
+};
+
+export const getHoveredElementForBinding = (
+  point: Readonly<GlobalPoint>,
+  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
+  elementsMap: NonDeletedSceneElementsMap,
+  toleranceFn?: (element: ExcalidrawBindableElement) => number,
+): NonDeleted<ExcalidrawBindableElement> | null => {
+  const candidateElements = getAllHoveredElementAtPoint(
+    point,
+    elements,
+    elementsMap,
+    toleranceFn,
+  );
+
+  if (!candidateElements || candidateElements.length === 0) {
+    return null;
+  }
+
+  if (candidateElements.length === 1) {
+    return candidateElements[0];
+  }
+
+  // Prefer smaller shapes
+  return candidateElements
+    .sort(
+      (a, b) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2),
+    )
+    .pop() as NonDeleted<ExcalidrawBindableElement>;
+};
+
 /**
  * Intersect a line with an element for binding test
  *
@@ -554,3 +677,61 @@ export const isPointInElement = (
 
   return intersections.length % 2 === 1;
 };
+
+export const isBindableElementInsideOtherBindable = (
+  innerElement: ExcalidrawBindableElement,
+  outerElement: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
+): boolean => {
+  // Get corner points of the inner element based on its type
+  const getCornerPoints = (
+    element: ExcalidrawElement,
+    offset: number,
+  ): GlobalPoint[] => {
+    const { x, y, width, height, angle } = element;
+    const center = elementCenterPoint(element, elementsMap);
+
+    if (element.type === "diamond") {
+      // Diamond has 4 corner points at the middle of each side
+      const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
+        getDiamondPoints(element);
+      const corners: GlobalPoint[] = [
+        pointFrom(x + topX, y + topY - offset), // top
+        pointFrom(x + rightX + offset, y + rightY), // right
+        pointFrom(x + bottomX, y + bottomY + offset), // bottom
+        pointFrom(x + leftX - offset, y + leftY), // left
+      ];
+      return corners.map((corner) => pointRotateRads(corner, center, angle));
+    }
+    if (element.type === "ellipse") {
+      // For ellipse, test points at the extremes (top, right, bottom, left)
+      const cx = x + width / 2;
+      const cy = y + height / 2;
+      const rx = width / 2;
+      const ry = height / 2;
+      const corners: GlobalPoint[] = [
+        pointFrom(cx, cy - ry - offset), // top
+        pointFrom(cx + rx + offset, cy), // right
+        pointFrom(cx, cy + ry + offset), // bottom
+        pointFrom(cx - rx - offset, cy), // left
+      ];
+      return corners.map((corner) => pointRotateRads(corner, center, angle));
+    }
+    // Rectangle and other rectangular shapes (image, text, etc.)
+    const corners: GlobalPoint[] = [
+      pointFrom(x - offset, y - offset), // top-left
+      pointFrom(x + width + offset, y - offset), // top-right
+      pointFrom(x + width + offset, y + height + offset), // bottom-right
+      pointFrom(x - offset, y + height + offset), // bottom-left
+    ];
+    return corners.map((corner) => pointRotateRads(corner, center, angle));
+  };
+
+  const offset = (-1 * Math.max(innerElement.width, innerElement.height)) / 20; // 5% offset
+  const innerCorners = getCornerPoints(innerElement, offset);
+
+  // Check if all corner points of the inner element are inside the outer element
+  return innerCorners.every((corner) =>
+    isPointInElement(corner, outerElement, elementsMap),
+  );
+};

packages/element/src/dragElements.ts

@@ -2,6 +2,7 @@ import {
   TEXT_AUTOWRAP_THRESHOLD,
   getGridPoint,
   getFontString,
+  DRAGGING_THRESHOLD,
 } from "@excalidraw/common";
 
 import type {
@@ -13,7 +14,7 @@ import type {
 
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
-import { updateBoundElements } from "./binding";
+import { unbindBindingElement, updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
@@ -102,9 +103,26 @@ export const dragSelectedElements = (
     gridSize,
   );
 
+  const elementsToUpdateIds = new Set(
+    Array.from(elementsToUpdate, (el) => el.id),
+  );
+
   elementsToUpdate.forEach((element) => {
-    updateElementCoords(pointerDownState, element, scene, adjustedOffset);
+    const isArrow = !isArrowElement(element);
+    const isStartBoundElementSelected =
+      isArrow ||
+      (element.startBinding
+        ? elementsToUpdateIds.has(element.startBinding.elementId)
+        : false);
+    const isEndBoundElementSelected =
+      isArrow ||
+      (element.endBinding
+        ? elementsToUpdateIds.has(element.endBinding.elementId)
+        : false);
+
     if (!isArrowElement(element)) {
+      updateElementCoords(pointerDownState, element, scene, adjustedOffset);
+
       // skip arrow labels since we calculate its position during render
       const textElement = getBoundTextElement(
         element,
@@ -121,6 +139,33 @@ export const dragSelectedElements = (
       updateBoundElements(element, scene, {
         simultaneouslyUpdated: Array.from(elementsToUpdate),
       });
+    } else if (
+      // NOTE: Add a little initial drag to the arrow dragging when the arrow
+      // is the single element being dragged to avoid accidentally unbinding
+      // the arrow when the user just wants to select it.
+
+      elementsToUpdate.size > 1 ||
+      Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) >
+        DRAGGING_THRESHOLD ||
+      (!element.startBinding && !element.endBinding)
+    ) {
+      updateElementCoords(pointerDownState, element, scene, adjustedOffset);
+
+      const shouldUnbindStart =
+        element.startBinding && !isStartBoundElementSelected;
+      const shouldUnbindEnd = element.endBinding && !isEndBoundElementSelected;
+      if (shouldUnbindStart || shouldUnbindEnd) {
+        // NOTE: Moving the bound arrow should unbind it, otherwise we would
+        // have weird situations, like 0 lenght arrow when the user moves
+        // the arrow outside a filled shape suddenly forcing the arrow start
+        // and end point to jump "outside" the shape.
+        if (shouldUnbindStart) {
+          unbindBindingElement(element, "start", scene);
+        }
+        if (shouldUnbindEnd) {
+          unbindBindingElement(element, "end", scene);
+        }
+      }
     }
   });
 };

packages/element/src/elbowArrow.ts

@@ -17,7 +17,6 @@ import {
   BinaryHeap,
   invariant,
   isAnyTrue,
-  tupleToCoors,
   getSizeFromPoints,
   isDevEnv,
   arrayToMap,
@@ -27,10 +26,11 @@ import type { AppState } from "@excalidraw/excalidraw/types";
 
 import {
   bindPointToSnapToElementOutline,
-  FIXED_BINDING_DISTANCE,
   getHeadingForElbowArrowSnap,
   getGlobalFixedPointForBindableElement,
-  getHoveredElementForBinding,
+  getBindingGap,
+  maxBindingDistance_simple,
+  BASE_BINDING_GAP_ELBOW,
 } from "./binding";
 import { distanceToElement } from "./distance";
 import {
@@ -51,8 +51,8 @@ import {
   type ExcalidrawElbowArrowElement,
   type NonDeletedSceneElementsMap,
 } from "./types";
-
 import { aabbForElement, pointInsideBounds } from "./bounds";
+import { getHoveredElementForBinding } from "./collision";
 
 import type { Bounds } from "./bounds";
 import type { Heading } from "./heading";
@@ -63,6 +63,7 @@ import type {
   FixedPointBinding,
   FixedSegment,
   NonDeletedExcalidrawElement,
+  Ordered,
 } from "./types";
 
 type GridAddress = [number, number] & { _brand: "gridaddress" };
@@ -1243,6 +1244,7 @@ const getElbowArrowData = (
   const startGlobalPoint = getGlobalPoint(
     {
       ...arrow,
+      angle: 0,
       type: "arrow",
       elbowed: true,
       points: nextPoints,
@@ -1257,6 +1259,7 @@ const getElbowArrowData = (
   const endGlobalPoint = getGlobalPoint(
     {
       ...arrow,
+      angle: 0,
       type: "arrow",
       elbowed: true,
       points: nextPoints,
@@ -1274,6 +1277,7 @@ const getElbowArrowData = (
     hoveredStartElement,
     origStartGlobalPoint,
     elementsMap,
+    options?.zoom,
   );
   const endHeading = getBindPointHeading(
     endGlobalPoint,
@@ -1281,6 +1285,7 @@ const getElbowArrowData = (
     hoveredEndElement,
     origEndGlobalPoint,
     elementsMap,
+    options?.zoom,
   );
   const startPointBounds = [
     startGlobalPoint[0] - 2,
@@ -1301,8 +1306,8 @@ const getElbowArrowData = (
         offsetFromHeading(
           startHeading,
           arrow.startArrowhead
-            ? FIXED_BINDING_DISTANCE * 6
+            ? getBindingGap(hoveredStartElement, { elbowed: true }) * 6
-            : FIXED_BINDING_DISTANCE * 2,
+            : getBindingGap(hoveredStartElement, { elbowed: true }) * 2,
           1,
         ),
       )
@@ -1314,8 +1319,8 @@ const getElbowArrowData = (
         offsetFromHeading(
           endHeading,
           arrow.endArrowhead
-            ? FIXED_BINDING_DISTANCE * 6
+            ? getBindingGap(hoveredEndElement, { elbowed: true }) * 6
-            : FIXED_BINDING_DISTANCE * 2,
+            : getBindingGap(hoveredEndElement, { elbowed: true }) * 2,
           1,
         ),
       )
@@ -1362,8 +1367,8 @@ const getElbowArrowData = (
             ? 0
             : BASE_PADDING -
                 (arrow.startArrowhead
-                  ? FIXED_BINDING_DISTANCE * 6
+                  ? BASE_BINDING_GAP_ELBOW * 6
-                  : FIXED_BINDING_DISTANCE * 2),
+                  : BASE_BINDING_GAP_ELBOW * 2),
           BASE_PADDING,
         ),
     boundsOverlap
@@ -1378,8 +1383,8 @@ const getElbowArrowData = (
             ? 0
             : BASE_PADDING -
                 (arrow.endArrowhead
-                  ? FIXED_BINDING_DISTANCE * 6
+                  ? BASE_BINDING_GAP_ELBOW * 6
-                  : FIXED_BINDING_DISTANCE * 2),
+                  : BASE_BINDING_GAP_ELBOW * 2),
           BASE_PADDING,
         ),
     boundsOverlap,
@@ -2239,6 +2244,7 @@ const getBindPointHeading = (
   hoveredElement: ExcalidrawBindableElement | null | undefined,
   origPoint: GlobalPoint,
   elementsMap: ElementsMap,
+  zoom?: AppState["zoom"],
 ): Heading =>
   getHeadingForElbowArrowSnap(
     p,
@@ -2257,21 +2263,20 @@ const getBindPointHeading = (
       ),
     origPoint,
     elementsMap,
+    zoom,
   );
 
 const getHoveredElement = (
   origPoint: GlobalPoint,
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
+  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   zoom?: AppState["zoom"],
 ) => {
   return getHoveredElementForBinding(
-    tupleToCoors(origPoint),
+    origPoint,
     elements,
     elementsMap,
-    zoom,
+    (element) => maxBindingDistance_simple(zoom),
-    true,
-    true,
   );
 };
 

packages/element/src/flowchart.ts

@@ -7,7 +7,7 @@ import type {
   PendingExcalidrawElements,
 } from "@excalidraw/excalidraw/types";
 
-import { bindLinearElement } from "./binding";
+import { bindBindingElement } from "./binding";
 import { updateElbowArrowPoints } from "./elbowArrow";
 import {
   HEADING_DOWN,
@@ -448,8 +448,14 @@ const createBindingArrow = (
 
   const elementsMap = scene.getNonDeletedElementsMap();
 
-  bindLinearElement(bindingArrow, startBindingElement, "start", scene);
+  bindBindingElement(
-  bindLinearElement(bindingArrow, endBindingElement, "end", scene);
+    bindingArrow,
+    startBindingElement,
+    "orbit",
+    "start",
+    scene,
+  );
+  bindBindingElement(bindingArrow, endBindingElement, "orbit", "end", scene);
 
   const changedElements = new Map<string, OrderedExcalidrawElement>();
   changedElements.set(

packages/element/src/index.ts

@@ -1,7 +1,6 @@
 import { toIterable } from "@excalidraw/common";
 
 import { isInvisiblySmallElement } from "./sizeHelpers";
-import { isLinearElementType } from "./typeChecks";
 
 import type {
   ExcalidrawElement,
@@ -55,27 +54,6 @@ export const isNonDeletedElement = <T extends ExcalidrawElement>(
   element: T,
 ): element is NonDeleted<T> => !element.isDeleted;
 
-const _clearElements = (
-  elements: readonly ExcalidrawElement[],
-): ExcalidrawElement[] =>
-  getNonDeletedElements(elements).map((element) =>
-    isLinearElementType(element.type)
-      ? { ...element, lastCommittedPoint: null }
-      : element,
-  );
-
-export const clearElementsForDatabase = (
-  elements: readonly ExcalidrawElement[],
-) => _clearElements(elements);
-
-export const clearElementsForExport = (
-  elements: readonly ExcalidrawElement[],
-) => _clearElements(elements);
-
-export const clearElementsForLocalStorage = (
-  elements: readonly ExcalidrawElement[],
-) => _clearElements(elements);
-
 export * from "./align";
 export * from "./binding";
 export * from "./bounds";

packages/element/src/mutateElement.ts

@@ -46,16 +46,13 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 
   // casting to any because can't use `in` operator
   // (see https://github.com/microsoft/TypeScript/issues/21732)
-  const { points, fixedSegments, startBinding, endBinding, fileId } =
+  const { points, fixedSegments, fileId } = updates as any;
-    updates as any;
 
   if (
     isElbowArrow(element) &&
     (Object.keys(updates).length === 0 || // normalization case
       typeof points !== "undefined" || // repositioning
-      typeof fixedSegments !== "undefined" || // segment fixing
+      typeof fixedSegments !== "undefined") // segment fixing
-      typeof startBinding !== "undefined" ||
-      typeof endBinding !== "undefined") // manual binding to element
   ) {
     updates = {
       ...updates,

packages/element/src/newElement.ts

@@ -562,7 +562,6 @@ export const newFreeDrawElement = (
     points: opts.points || [],
     pressures: opts.pressures || [],
     simulatePressure: opts.simulatePressure,
-    lastCommittedPoint: null,
   };
 };
 
@@ -576,7 +575,7 @@ export const newLinearElement = (
   const element = {
     ..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
     points: opts.points || [],
-    lastCommittedPoint: null,
+
     startBinding: null,
     endBinding: null,
     startArrowhead: null,
@@ -611,7 +610,6 @@ export const newArrowElement = <T extends boolean>(
     return {
       ..._newElementBase<ExcalidrawElbowArrowElement>(opts.type, opts),
       points: opts.points || [],
-      lastCommittedPoint: null,
       startBinding: null,
       endBinding: null,
       startArrowhead: opts.startArrowhead || null,
@@ -626,7 +624,6 @@ export const newArrowElement = <T extends boolean>(
   return {
     ..._newElementBase<ExcalidrawArrowElement>(opts.type, opts),
     points: opts.points || [],
-    lastCommittedPoint: null,
     startBinding: null,
     endBinding: null,
     startArrowhead: opts.startArrowhead || null,

packages/element/src/renderElement.ts

@@ -98,7 +98,7 @@ const isPendingImageElement = (
 const shouldResetImageFilter = (
   element: ExcalidrawElement,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
+  appState: StaticCanvasAppState | InteractiveCanvasAppState,
 ) => {
   return (
     appState.theme === THEME.DARK &&
@@ -225,7 +225,7 @@ const generateElementCanvas = (
   elementsMap: NonDeletedSceneElementsMap,
   zoom: Zoom,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
+  appState: StaticCanvasAppState | InteractiveCanvasAppState,
 ): ExcalidrawElementWithCanvas | null => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d")!;
@@ -277,7 +277,7 @@ const generateElementCanvas = (
     context.filter = IMAGE_INVERT_FILTER;
   }
 
-  drawElementOnCanvas(element, rc, context, renderConfig, appState);
+  drawElementOnCanvas(element, rc, context, renderConfig);
 
   context.restore();
 
@@ -420,7 +420,6 @@ const drawElementOnCanvas = (
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
 ) => {
   switch (element.type) {
     case "rectangle":
@@ -566,7 +565,7 @@ const generateElementWithCanvas = (
   element: NonDeletedExcalidrawElement,
   elementsMap: NonDeletedSceneElementsMap,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
+  appState: StaticCanvasAppState | InteractiveCanvasAppState,
 ) => {
   const zoom: Zoom = renderConfig
     ? appState.zoom
@@ -623,7 +622,7 @@ const drawElementFromCanvas = (
   elementWithCanvas: ExcalidrawElementWithCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
+  appState: StaticCanvasAppState | InteractiveCanvasAppState,
   allElementsMap: NonDeletedSceneElementsMap,
 ) => {
   const element = elementWithCanvas.element;
@@ -741,7 +740,7 @@ export const renderElement = (
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
+  appState: StaticCanvasAppState | InteractiveCanvasAppState,
 ) => {
   const reduceAlphaForSelection =
     appState.openDialog?.name === "elementLinkSelector" &&
@@ -811,7 +810,7 @@ export const renderElement = (
         context.translate(cx, cy);
         context.rotate(element.angle);
         context.translate(-shiftX, -shiftY);
-        drawElementOnCanvas(element, rc, context, renderConfig, appState);
+        drawElementOnCanvas(element, rc, context, renderConfig);
         context.restore();
       } else {
         const elementWithCanvas = generateElementWithCanvas(
@@ -904,13 +903,7 @@ export const renderElement = (
 
           tempCanvasContext.translate(-shiftX, -shiftY);
 
-          drawElementOnCanvas(
+          drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
-            element,
-            tempRc,
-            tempCanvasContext,
-            renderConfig,
-            appState,
-          );
 
           tempCanvasContext.translate(shiftX, shiftY);
 
@@ -949,7 +942,7 @@ export const renderElement = (
           }
 
           context.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, rc, context, renderConfig, appState);
+          drawElementOnCanvas(element, rc, context, renderConfig);
         }
 
         context.restore();
@@ -1130,7 +1123,7 @@ export function getFreedrawOutlinePoints(element: ExcalidrawFreeDrawElement) {
     smoothing: 0.5,
     streamline: 0.5,
     easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
-    last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
+    last: true,
   };
 
   return getStroke(inputPoints as number[][], options) as [number, number][];

packages/element/src/resizeElements.ts

@@ -21,7 +21,11 @@ import type { PointerDownState } from "@excalidraw/excalidraw/types";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
 
-import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
+import {
+  getArrowLocalFixedPoints,
+  unbindBindingElement,
+  updateBoundElements,
+} from "./binding";
 import {
   getElementAbsoluteCoords,
   getCommonBounds,
@@ -47,6 +51,7 @@ import {
 import { wrapText } from "./textWrapping";
 import {
   isArrowElement,
+  isBindingElement,
   isBoundToContainer,
   isElbowArrow,
   isFrameLikeElement,
@@ -75,7 +80,9 @@ import type {
   ExcalidrawImageElement,
   ElementsMap,
   ExcalidrawElbowArrowElement,
+  ExcalidrawArrowElement,
 } from "./types";
+import type { ElementUpdate } from "./mutateElement";
 
 // Returns true when transform (resizing/rotation) happened
 export const transformElements = (
@@ -221,7 +228,25 @@ const rotateSingleElement = (
   }
   const boundTextElementId = getBoundTextElementId(element);
 
-  scene.mutateElement(element, { angle });
+  let update: ElementUpdate<NonDeletedExcalidrawElement> = {
+    angle,
+  };
+
+  if (isBindingElement(element)) {
+    update = {
+      ...update,
+    } as ElementUpdate<ExcalidrawArrowElement>;
+
+    if (element.startBinding) {
+      unbindBindingElement(element, "start", scene);
+    }
+    if (element.endBinding) {
+      unbindBindingElement(element, "end", scene);
+    }
+  }
+
+  scene.mutateElement(element, update);
+
   if (boundTextElementId) {
     const textElement =
       scene.getElement<ExcalidrawTextElementWithContainer>(boundTextElementId);
@@ -395,6 +420,11 @@ const rotateMultipleElements = (
     centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
   }
 
+  const rotatedElementsMap = new Map<
+    ExcalidrawElement["id"],
+    NonDeletedExcalidrawElement
+  >(elements.map((element) => [element.id, element]));
+
   for (const element of elements) {
     if (!isFrameLikeElement(element)) {
       const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
@@ -425,6 +455,19 @@ const rotateMultipleElements = (
         simultaneouslyUpdated: elements,
       });
 
+      if (isBindingElement(element)) {
+        if (element.startBinding) {
+          if (!rotatedElementsMap.has(element.startBinding.elementId)) {
+            unbindBindingElement(element, "start", scene);
+          }
+        }
+        if (element.endBinding) {
+          if (!rotatedElementsMap.has(element.endBinding.elementId)) {
+            unbindBindingElement(element, "end", scene);
+          }
+        }
+      }
+
       const boundText = getBoundTextElement(element, elementsMap);
       if (boundText && !isArrowElement(element)) {
         const { x, y } = computeBoundTextPosition(
@@ -838,13 +881,32 @@ export const resizeSingleElement = (
     Number.isFinite(newOrigin.x) &&
     Number.isFinite(newOrigin.y)
   ) {
-    const updates = {
+    let updates: ElementUpdate<ExcalidrawElement> = {
       ...newOrigin,
       width: Math.abs(nextWidth),
       height: Math.abs(nextHeight),
       ...rescaledPoints,
     };
 
+    if (isBindingElement(latestElement)) {
+      if (latestElement.startBinding) {
+        updates = {
+          ...updates,
+        } as ElementUpdate<ExcalidrawArrowElement>;
+
+        if (latestElement.startBinding) {
+          unbindBindingElement(latestElement, "start", scene);
+        }
+      }
+
+      if (latestElement.endBinding) {
+        updates = {
+          ...updates,
+          endBinding: null,
+        } as ElementUpdate<ExcalidrawArrowElement>;
+      }
+    }
+
     scene.mutateElement(latestElement, updates, {
       informMutation: shouldInformMutation,
       isDragging: false,
@@ -862,10 +924,7 @@ export const resizeSingleElement = (
       shouldMaintainAspectRatio,
     );
 
-    updateBoundElements(latestElement, scene, {
+    updateBoundElements(latestElement, scene);
-      // TODO: confirm with MARK if this actually makes sense
-      newSize: { width: nextWidth, height: nextHeight },
-    });
   }
 };
 
@@ -1399,20 +1458,36 @@ export const resizeMultipleElements = (
     }
 
     const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
+    const resizedElementsMap = new Map<
+      ExcalidrawElement["id"],
+      NonDeletedExcalidrawElement
+    >(elementsAndUpdates.map(({ element }) => [element.id, element]));
 
     for (const {
       element,
       update: { boundTextFontSize, ...update },
     } of elementsAndUpdates) {
-      const { width, height, angle } = update;
+      const { angle } = update;
 
       scene.mutateElement(element, update);
 
       updateBoundElements(element, scene, {
         simultaneouslyUpdated: elementsToUpdate,
-        newSize: { width, height },
       });
 
+      if (isBindingElement(element)) {
+        if (element.startBinding) {
+          if (!resizedElementsMap.has(element.startBinding.elementId)) {
+            unbindBindingElement(element, "start", scene);
+          }
+        }
+        if (element.endBinding) {
+          if (!resizedElementsMap.has(element.endBinding.elementId)) {
+            unbindBindingElement(element, "end", scene);
+          }
+        }
+      }
+
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement && boundTextFontSize) {
         scene.mutateElement(boundTextElement, {

packages/element/src/resizeTest.ts

@@ -5,17 +5,20 @@ import {
   type Radians,
 } from "@excalidraw/math";
 
-import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
+import {
+  SIDE_RESIZING_THRESHOLD,
+  type EditorInterface,
+} from "@excalidraw/common";
 
 import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
 
-import type { AppState, Device, Zoom } from "@excalidraw/excalidraw/types";
+import type { AppState, Zoom } from "@excalidraw/excalidraw/types";
 
 import { getElementAbsoluteCoords } from "./bounds";
 import {
   getTransformHandlesFromCoords,
   getTransformHandles,
-  getOmitSidesForDevice,
+  getOmitSidesForEditorInterface,
   canResizeFromSides,
 } from "./transformHandles";
 import { isImageElement, isLinearElement } from "./typeChecks";
@@ -51,7 +54,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
   y: number,
   zoom: Zoom,
   pointerType: PointerType,
-  device: Device,
+  editorInterface: EditorInterface,
 ): MaybeTransformHandleType => {
   if (!appState.selectedElementIds[element.id]) {
     return false;
@@ -63,7 +66,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
       zoom,
       elementsMap,
       pointerType,
-      getOmitSidesForDevice(device),
+      getOmitSidesForEditorInterface(editorInterface),
     );
 
   if (
@@ -86,7 +89,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
     return filter[0] as TransformHandleType;
   }
 
-  if (canResizeFromSides(device)) {
+  if (canResizeFromSides(editorInterface)) {
     const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
       element,
       elementsMap,
@@ -132,7 +135,7 @@ export const getElementWithTransformHandleType = (
   zoom: Zoom,
   pointerType: PointerType,
   elementsMap: ElementsMap,
-  device: Device,
+  editorInterface: EditorInterface,
 ) => {
   return elements.reduce((result, element) => {
     if (result) {
@@ -146,7 +149,7 @@ export const getElementWithTransformHandleType = (
       scenePointerY,
       zoom,
       pointerType,
-      device,
+      editorInterface,
     );
     return transformHandleType ? { element, transformHandleType } : null;
   }, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
@@ -160,14 +163,14 @@ export const getTransformHandleTypeFromCoords = <
   scenePointerY: number,
   zoom: Zoom,
   pointerType: PointerType,
-  device: Device,
+  editorInterface: EditorInterface,
 ): MaybeTransformHandleType => {
   const transformHandles = getTransformHandlesFromCoords(
     [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
     0 as Radians,
     zoom,
     pointerType,
-    getOmitSidesForDevice(device),
+    getOmitSidesForEditorInterface(editorInterface),
   );
 
   const found = Object.keys(transformHandles).find((key) => {
@@ -183,7 +186,7 @@ export const getTransformHandleTypeFromCoords = <
     return found as MaybeTransformHandleType;
   }
 
-  if (canResizeFromSides(device)) {
+  if (canResizeFromSides(editorInterface)) {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
 

packages/element/src/transformHandles.ts

@@ -1,8 +1,6 @@
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING,
-  isAndroid,
+  type EditorInterface,
-  isIOS,
-  isMobileOrTablet,
 } from "@excalidraw/common";
 
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
@@ -10,7 +8,6 @@ import { pointFrom, pointRotateRads } from "@excalidraw/math";
 import type { Radians } from "@excalidraw/math";
 
 import type {
-  Device,
   InteractiveCanvasAppState,
   Zoom,
 } from "@excalidraw/excalidraw/types";
@@ -112,20 +109,21 @@ const generateTransformHandle = (
   return [xx - width / 2, yy - height / 2, width, height];
 };
 
-export const canResizeFromSides = (device: Device) => {
+export const canResizeFromSides = (editorInterface: EditorInterface) => {
-  if (device.viewport.isMobile) {
+  if (
-    return false;
+    editorInterface.formFactor === "phone" &&
-  }
+    editorInterface.userAgent.isMobileDevice
-
+  ) {
-  if (device.isTouchScreen && (isAndroid || isIOS)) {
     return false;
   }
 
   return true;
 };
 
-export const getOmitSidesForDevice = (device: Device) => {
+export const getOmitSidesForEditorInterface = (
-  if (canResizeFromSides(device)) {
+  editorInterface: EditorInterface,
+) => {
+  if (canResizeFromSides(editorInterface)) {
     return DEFAULT_OMIT_SIDES;
   }
 
@@ -330,8 +328,12 @@ export const getTransformHandles = (
 export const hasBoundingBox = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: InteractiveCanvasAppState,
+  editorInterface: EditorInterface,
 ) => {
-  if (appState.selectedLinearElement?.isEditing) {
+  if (
+    appState.selectedLinearElement?.isEditing ||
+    appState.selectedLinearElement?.isDragging
+  ) {
     return false;
   }
   if (elements.length > 1) {
@@ -348,5 +350,5 @@ export const hasBoundingBox = (
 
   // on mobile/tablet we currently don't show bbox because of resize issues
   // (also prob best for simplicity's sake)
-  return element.points.length > 2 && !isMobileOrTablet();
+  return element.points.length > 2 && !editorInterface.userAgent.isMobileDevice;
 };

packages/element/src/typeChecks.ts

@@ -28,8 +28,6 @@ import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawLineElement,
-  PointBinding,
-  FixedPointBinding,
   ExcalidrawFlowchartNodeElement,
   ExcalidrawLinearElementSubType,
 } from "./types";
@@ -163,7 +161,7 @@ export const isLinearElementType = (
 export const isBindingElement = (
   element?: ExcalidrawElement | null,
   includeLocked = true,
-): element is ExcalidrawLinearElement => {
+): element is ExcalidrawArrowElement => {
   return (
     element != null &&
     (!element.locked || includeLocked === true) &&
@@ -355,15 +353,6 @@ export const getDefaultRoundnessTypeForElement = (
   return null;
 };
 
-export const isFixedPointBinding = (
-  binding: PointBinding | FixedPointBinding,
-): binding is FixedPointBinding => {
-  return (
-    Object.hasOwn(binding, "fixedPoint") &&
-    (binding as FixedPointBinding).fixedPoint != null
-  );
-};
-
 // TODO: Move this to @excalidraw/math
 export const isBounds = (box: unknown): box is Bounds =>
   Array.isArray(box) &&

packages/element/src/types.ts

@@ -288,23 +288,22 @@ export type ExcalidrawTextElementWithContainer = {
 
 export type FixedPoint = [number, number];
 
-export type PointBinding = {
+export type BindMode = "inside" | "orbit" | "skip";
-  elementId: ExcalidrawBindableElement["id"];
-  focus: number;
-  gap: number;
-};
 
-export type FixedPointBinding = Merge<
+export type FixedPointBinding = {
-  PointBinding,
+  elementId: ExcalidrawBindableElement["id"];
-  {
+
-    // Represents the fixed point binding information in form of a vertical and
+  // Represents the fixed point binding information in form of a vertical and
-    // horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
+  // horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
-    // gives the user selected fixed point by multiplying the bound element width
+  // gives the user selected fixed point by multiplying the bound element width
-    // with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
+  // with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
-    // bound element-local point coordinate.
+  // bound element-local point coordinate.
-    fixedPoint: FixedPoint;
+  fixedPoint: FixedPoint;
-  }
+
->;
+  // Determines whether the arrow remains outside the shape or is allowed to
+  // go all the way inside the shape up to the exact fixed point.
+  mode: BindMode;
+};
 
 type Index = number;
 
@@ -331,9 +330,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{
     type: "line" | "arrow";
     points: readonly LocalPoint[];
-    lastCommittedPoint: LocalPoint | null;
+    startBinding: FixedPointBinding | null;
-    startBinding: PointBinding | null;
+    endBinding: FixedPointBinding | null;
-    endBinding: PointBinding | null;
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
@@ -360,9 +358,9 @@ export type ExcalidrawElbowArrowElement = Merge<
   ExcalidrawArrowElement,
   {
     elbowed: true;
+    fixedSegments: readonly FixedSegment[] | null;
     startBinding: FixedPointBinding | null;
     endBinding: FixedPointBinding | null;
-    fixedSegments: readonly FixedSegment[] | null;
     /**
      * Marks that the 3rd point should be used as the 2nd point of the arrow in
      * order to temporarily hide the first segment of the arrow without losing
@@ -388,7 +386,6 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
     points: readonly LocalPoint[];
     pressures: readonly number[];
     simulatePressure: boolean;
-    lastCommittedPoint: LocalPoint | null;
   }>;
 
 export type FileId = string & { _brand: "FileId" };

packages/element/src/utils.ts

@@ -1,6 +1,7 @@
 import {
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_PROPORTIONAL_RADIUS,
+  invariant,
   LINE_CONFIRM_THRESHOLD,
   ROUNDNESS,
 } from "@excalidraw/common";
@@ -10,10 +11,17 @@ import {
   curveCatmullRomCubicApproxPoints,
   curveOffsetPoints,
   lineSegment,
+  lineSegmentIntersectionPoints,
   pointDistance,
   pointFrom,
   pointFromArray,
+  pointFromVector,
+  pointRotateRads,
+  pointTranslate,
   rectangle,
+  vectorFromPoint,
+  vectorNormalize,
+  vectorScale,
   type GlobalPoint,
 } from "@excalidraw/math";
 
@@ -21,11 +29,17 @@ import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";
 
 import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types";
 
-import { getDiamondPoints } from "./bounds";
+import { elementCenterPoint, getDiamondPoints } from "./bounds";
 
 import { generateLinearCollisionShape } from "./shape";
 
+import { isPointInElement } from "./collision";
+import { LinearElementEditor } from "./linearElementEditor";
+import { isRectangularElement } from "./typeChecks";
+
 import type {
+  ElementsMap,
+  ExcalidrawArrowElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
   ExcalidrawFreeDrawElement,
@@ -400,20 +414,10 @@ export function deconstructDiamondElement(
     ), // TOP
   ];
 
-  const corners =
+  const corners = baseCorners.map(
-    offset > 0
+    (corner) =>
-      ? baseCorners.map(
+      curveCatmullRomCubicApproxPoints(curveOffsetPoints(corner, offset))!,
-          (corner) =>
+  );
-            curveCatmullRomCubicApproxPoints(
-              curveOffsetPoints(corner, offset),
-            )!,
-        )
-      : [
-          [baseCorners[0]],
-          [baseCorners[1]],
-          [baseCorners[2]],
-          [baseCorners[3]],
-        ];
 
   const sides = [
     lineSegment<GlobalPoint>(
@@ -481,3 +485,136 @@ export const getCornerRadius = (x: number, element: ExcalidrawElement) => {
 
   return 0;
 };
+
+const getDiagonalsForBindableElement = (
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+) => {
+  // for rectangles, shrink the diagonals a bit because there's something
+  // going on with the focus points around the corners. Ask Mark for details.
+  const OFFSET_PX = element.type === "rectangle" ? 15 : 0;
+  const shrinkSegment = (seg: LineSegment<GlobalPoint>) => {
+    const v = vectorNormalize(vectorFromPoint(seg[1], seg[0]));
+    const offset = vectorScale(v, OFFSET_PX);
+    return lineSegment<GlobalPoint>(
+      pointTranslate(seg[0], offset),
+      pointTranslate(seg[1], vectorScale(offset, -1)),
+    );
+  };
+
+  const center = elementCenterPoint(element, elementsMap);
+  const diagonalOne = shrinkSegment(
+    isRectangularElement(element)
+      ? lineSegment<GlobalPoint>(
+          pointRotateRads(
+            pointFrom<GlobalPoint>(element.x, element.y),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              element.x + element.width,
+              element.y + element.height,
+            ),
+            center,
+            element.angle,
+          ),
+        )
+      : lineSegment<GlobalPoint>(
+          pointRotateRads(
+            pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              element.x + element.width / 2,
+              element.y + element.height,
+            ),
+            center,
+            element.angle,
+          ),
+        ),
+  );
+  const diagonalTwo = shrinkSegment(
+    isRectangularElement(element)
+      ? lineSegment<GlobalPoint>(
+          pointRotateRads(
+            pointFrom<GlobalPoint>(element.x + element.width, element.y),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(element.x, element.y + element.height),
+            center,
+            element.angle,
+          ),
+        )
+      : lineSegment<GlobalPoint>(
+          pointRotateRads(
+            pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              element.x + element.width,
+              element.y + element.height / 2,
+            ),
+            center,
+            element.angle,
+          ),
+        ),
+  );
+
+  return [diagonalOne, diagonalTwo];
+};
+
+export const projectFixedPointOntoDiagonal = (
+  arrow: ExcalidrawArrowElement,
+  point: GlobalPoint,
+  element: ExcalidrawElement,
+  startOrEnd: "start" | "end",
+  elementsMap: ElementsMap,
+): GlobalPoint | null => {
+  invariant(arrow.points.length >= 2, "Arrow must have at least two points");
+  if (arrow.width < 3 && arrow.height < 3) {
+    return null;
+  }
+
+  const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
+    element,
+    elementsMap,
+  );
+
+  const a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    arrow,
+    startOrEnd === "start" ? 1 : arrow.points.length - 2,
+    elementsMap,
+  );
+  const b = pointFromVector<GlobalPoint>(
+    vectorScale(
+      vectorFromPoint(point, a),
+      2 * pointDistance(a, point) +
+        Math.max(
+          pointDistance(diagonalOne[0], diagonalOne[1]),
+          pointDistance(diagonalTwo[0], diagonalTwo[1]),
+        ),
+    ),
+    a,
+  );
+  const intersector = lineSegment<GlobalPoint>(point, b);
+  const p1 = lineSegmentIntersectionPoints(diagonalOne, intersector);
+  const p2 = lineSegmentIntersectionPoints(diagonalTwo, intersector);
+  const d1 = p1 && pointDistance(a, p1);
+  const d2 = p2 && pointDistance(a, p2);
+
+  let p = null;
+  if (d1 != null && d2 != null) {
+    p = d1 < d2 ? p1 : p2;
+  } else {
+    p = p1 || p2 || null;
+  }
+
+  return p && isPointInElement(p, element, elementsMap) ? p : null;
+};

packages/element/src/zindex.ts

@@ -1,18 +1,25 @@
 import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
+import type { GlobalPoint } from "@excalidraw/math";
 
-import { isFrameLikeElement } from "./typeChecks";
+import { isFrameLikeElement, isTextElement } from "./typeChecks";
-
 import { getElementsInGroup } from "./groups";
-
 import { syncMovedIndices } from "./fractionalIndex";
-
 import { getSelectedElements } from "./selection";
+import { getBoundTextElement, getContainerElement } from "./textElement";
+import { getHoveredElementForBinding } from "./collision";
 
 import type { Scene } from "./Scene";
-
+import type {
-import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
+  ExcalidrawArrowElement,
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+  Ordered,
+  OrderedExcalidrawElement,
+} from "./types";
 
 const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
   return element.frameId === frameId || element.id === frameId;
@@ -139,6 +146,51 @@ const getContiguousFrameRangeElements = (
   return allElements.slice(rangeStart, rangeEnd + 1);
 };
 
+/**
+ * Moves the arrow element above any bindable elements it intersects with or
+ * hovers over.
+ */
+export const moveArrowAboveBindable = (
+  point: GlobalPoint,
+  arrow: ExcalidrawArrowElement,
+  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
+  elementsMap: NonDeletedSceneElementsMap,
+  scene: Scene,
+): readonly OrderedExcalidrawElement[] => {
+  const hoveredElement = getHoveredElementForBinding(
+    point,
+    elements,
+    elementsMap,
+  );
+
+  if (!hoveredElement) {
+    return elements;
+  }
+
+  const boundTextElement = getBoundTextElement(hoveredElement, elementsMap);
+  const containerElement = isTextElement(hoveredElement)
+    ? getContainerElement(hoveredElement, elementsMap)
+    : null;
+
+  const bindableIds = [
+    hoveredElement.id,
+    boundTextElement?.id,
+    containerElement?.id,
+  ].filter((id): id is NonDeletedExcalidrawElement["id"] => !!id);
+  const bindableIdx = elements.findIndex((el) => bindableIds.includes(el.id));
+  const arrowIdx = elements.findIndex((el) => el.id === arrow.id);
+
+  if (arrowIdx !== -1 && bindableIdx !== -1 && arrowIdx < bindableIdx) {
+    const updatedElements = Array.from(elements);
+    const arrow = updatedElements.splice(arrowIdx, 1)[0];
+    updatedElements.splice(bindableIdx, 0, arrow);
+
+    scene.replaceAllElements(updatedElements);
+  }
+
+  return elements;
+};
+
 /**
  * Returns next candidate index that's available to be moved to. Currently that
  *  is a non-deleted element, and not inside a group (unless we're editing it).

packages/element/tests/bounds.test.ts

@@ -135,9 +135,9 @@ describe("getElementBounds", () => {
     } as ExcalidrawLinearElement;
 
     const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
-    expect(x1).toEqual(360.3176068760539);
+    expect(x1).toEqual(360.9291017525165);
-    expect(y1).toEqual(185.90654264413516);
+    expect(y1).toEqual(185.24770129343722);
-    expect(x2).toEqual(480.87005902729743);
+    expect(x2).toEqual(481.4815539037601);
-    expect(y2).toEqual(320.4751269334226);
+    expect(y2).toEqual(319.8162855827246);
   });
 });

packages/element/tests/duplicate.test.tsx

@@ -144,9 +144,8 @@ describe("duplicating multiple elements", () => {
       id: "arrow1",
       startBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -155,9 +154,8 @@ describe("duplicating multiple elements", () => {
       id: "arrow2",
       endBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
       boundElements: [{ id: "text2", type: "text" }],
     });
@@ -276,9 +274,8 @@ describe("duplicating multiple elements", () => {
       id: "arrow1",
       startBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -293,15 +290,13 @@ describe("duplicating multiple elements", () => {
       id: "arrow2",
       startBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
       endBinding: {
         elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -310,15 +305,13 @@ describe("duplicating multiple elements", () => {
       id: "arrow3",
       startBinding: {
         elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
       endBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -821,7 +814,7 @@ describe("duplication z-order", () => {
     const arrow = UI.createElement("arrow", {
       x: -100,
       y: 50,
-      width: 95,
+      width: 115,
       height: 0,
     });
 

packages/element/tests/elbowArrow.test.tsx

@@ -1,13 +1,10 @@
 import { ARROW_TYPE } from "@excalidraw/common";
 import { pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
-
 import { actionSelectAll } from "@excalidraw/excalidraw/actions";
 import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
-
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
-
 import {
   act,
   fireEvent,
@@ -15,13 +12,11 @@ import {
   queryByTestId,
   render,
 } from "@excalidraw/excalidraw/tests/test-utils";
-
 import "@excalidraw/utils/test-utils";
+import { bindBindingElement } from "@excalidraw/element";
 
 import type { LocalPoint } from "@excalidraw/math";
 
-import { bindLinearElement } from "../src/binding";
-
 import { Scene } from "../src/Scene";
 
 import type {
@@ -136,6 +131,11 @@ describe("elbow arrow segment move", () => {
 });
 
 describe("elbow arrow routing", () => {
+  beforeEach(async () => {
+    localStorage.clear();
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
+  });
+
   it("can properly generate orthogonal arrow points", () => {
     const scene = new Scene();
     const arrow = API.createElement({
@@ -160,8 +160,8 @@ describe("elbow arrow routing", () => {
     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,
@@ -185,25 +185,23 @@ describe("elbow arrow routing", () => {
       height: 200,
       points: [pointFrom(0, 0), pointFrom(90, 200)],
     }) as ExcalidrawElbowArrowElement;
-    scene.insertElement(rectangle1);
+    API.setElements([rectangle1, rectangle2, arrow]);
-    scene.insertElement(rectangle2);
-    scene.insertElement(arrow);
 
-    bindLinearElement(arrow, rectangle1, "start", scene);
+    bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene);
-    bindLinearElement(arrow, rectangle2, "end", scene);
+    bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene);
 
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    h.app.scene.mutateElement(arrow, {
+    h.scene.mutateElement(arrow, {
       points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
     });
 
-    expect(arrow.points).toEqual([
+    expect(arrow.points).toCloselyEqualPoints([
       [0, 0],
-      [45, 0],
+      [39, 0],
-      [45, 200],
+      [39, 200],
-      [90, 200],
+      [78, 200],
     ]);
   });
 });
@@ -242,9 +240,9 @@ describe("elbow arrow ui", () => {
     expect(h.state.currentItemArrowType).toBe(ARROW_TYPE.elbow);
 
     mouse.reset();
-    mouse.moveTo(-43, -99);
+    mouse.moveTo(-53, -99);
     mouse.click();
-    mouse.moveTo(43, 99);
+    mouse.moveTo(53, 99);
     mouse.click();
 
     const arrow = h.scene.getSelectedElements(
@@ -253,11 +251,11 @@ describe("elbow arrow ui", () => {
 
     expect(arrow.type).toBe("arrow");
     expect(arrow.elbowed).toBe(true);
-    expect(arrow.points).toEqual([
+    expect(arrow.points).toCloselyEqualPoints([
       [0, 0],
-      [45, 0],
+      [39, 0],
-      [45, 200],
+      [39, 200],
-      [90, 200],
+      [78, 200],
     ]);
   });
 
@@ -279,9 +277,9 @@ describe("elbow arrow ui", () => {
     UI.clickOnTestId("elbow-arrow");
 
     mouse.reset();
-    mouse.moveTo(-43, -99);
+    mouse.moveTo(-53, -99);
     mouse.click();
-    mouse.moveTo(43, 99);
+    mouse.moveTo(53, 99);
     mouse.click();
 
     const arrow = h.scene.getSelectedElements(
@@ -297,9 +295,11 @@ describe("elbow arrow ui", () => {
 
     expect(arrow.points.map((point) => point.map(Math.round))).toEqual([
       [0, 0],
-      [35, 0],
+      [36, 0],
-      [35, 165],
+      [36, 90],
-      [103, 165],
+      [28, 90],
+      [28, 164],
+      [101, 164],
     ]);
   });
 
@@ -321,9 +321,9 @@ describe("elbow arrow ui", () => {
     UI.clickOnTestId("elbow-arrow");
 
     mouse.reset();
-    mouse.moveTo(-43, -99);
+    mouse.moveTo(-53, -99);
     mouse.click();
-    mouse.moveTo(43, 99);
+    mouse.moveTo(53, 99);
     mouse.click();
 
     const arrow = h.scene.getSelectedElements(
@@ -351,11 +351,11 @@ describe("elbow arrow ui", () => {
     expect(duplicatedArrow.id).not.toBe(originalArrowId);
     expect(duplicatedArrow.type).toBe("arrow");
     expect(duplicatedArrow.elbowed).toBe(true);
-    expect(duplicatedArrow.points).toEqual([
+    expect(duplicatedArrow.points).toCloselyEqualPoints([
       [0, 0],
-      [45, 0],
+      [39, 0],
-      [45, 200],
+      [39, 200],
-      [90, 200],
+      [78, 200],
     ]);
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
@@ -379,9 +379,9 @@ describe("elbow arrow ui", () => {
     UI.clickOnTestId("elbow-arrow");
 
     mouse.reset();
-    mouse.moveTo(-43, -99);
+    mouse.moveTo(-53, -99);
     mouse.click();
-    mouse.moveTo(43, 99);
+    mouse.moveTo(53, 99);
     mouse.click();
 
     const arrow = h.scene.getSelectedElements(
@@ -405,11 +405,11 @@ describe("elbow arrow ui", () => {
     expect(duplicatedArrow.id).not.toBe(originalArrowId);
     expect(duplicatedArrow.type).toBe("arrow");
     expect(duplicatedArrow.elbowed).toBe(true);
-    expect(duplicatedArrow.points).toEqual([
+    expect(duplicatedArrow.points).toCloselyEqualPoints([
       [0, 0],
       [0, 100],
-      [90, 100],
+      [78, 100],
-      [90, 200],
+      [78, 200],
     ]);
   });
 });

packages/element/tests/linearElementEditor.test.tsx

@@ -217,7 +217,7 @@ describe("Test Linear Elements", () => {
 
     // drag line from midpoint
     drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
-    expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
+    expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`8`);
     expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
     expect(line.points.length).toEqual(3);
     expect(line.points).toMatchInlineSnapshot(`
@@ -329,7 +329,7 @@ describe("Test Linear Elements", () => {
     expect(h.state.selectedLinearElement?.isEditing).toBe(false);
 
     mouse.doubleClick();
-    expect(h.state.selectedLinearElement).toBe(null);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);
     await getTextEditor();
   });
 
@@ -357,6 +357,7 @@ describe("Test Linear Elements", () => {
       const originalY = line.y;
       enterLineEditingMode(line);
 
+      expect(h.state.selectedLinearElement?.isEditing).toBe(true);
       expect(line.points.length).toEqual(2);
 
       mouse.clickAt(midpoint[0], midpoint[1]);
@@ -379,7 +380,7 @@ describe("Test Linear Elements", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `11`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
       expect(line.points.length).toEqual(3);
       expect(line.points).toMatchInlineSnapshot(`
@@ -549,7 +550,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `14`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
 
         expect(line.points.length).toEqual(5);
 
@@ -600,7 +601,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -641,7 +642,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -689,7 +690,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `17`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`10`);
 
         const newMidPoints = LinearElementEditor.getEditorMidPoints(
           line,
@@ -747,7 +748,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `14`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
         expect(line.points.length).toEqual(5);
 
         expect((h.elements[0] as ExcalidrawLinearElement).points)
@@ -845,7 +846,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -1303,7 +1304,7 @@ describe("Test Linear Elements", () => {
       const arrow = UI.createElement("arrow", {
         x: -10,
         y: 250,
-        width: 400,
+        width: 410,
         height: 1,
       });
 
@@ -1316,7 +1317,7 @@ describe("Test Linear Elements", () => {
       const textElement = h.elements[2] as ExcalidrawTextElementWithContainer;
 
       expect(arrow.endBinding?.elementId).toBe(rect.id);
-      expect(arrow.width).toBe(400);
+      expect(arrow.width).toBeCloseTo(399);
       expect(rect.x).toBe(400);
       expect(rect.y).toBe(0);
       expect(
@@ -1335,7 +1336,7 @@ describe("Test Linear Elements", () => {
       mouse.downAt(rect.x, rect.y);
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
-      expect(arrow.width).toBeCloseTo(200, 0);
+      expect(arrow.width).toBeCloseTo(199);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

packages/element/tests/resize.test.tsx

@@ -174,29 +174,29 @@ describe("generic element", () => {
     expect(rectangle.angle).toBeCloseTo(0);
   });
 
-  it("resizes with bound arrow", async () => {
+  // it("resizes with bound arrow", async () => {
-    const rectangle = UI.createElement("rectangle", {
+  //   const rectangle = UI.createElement("rectangle", {
-      width: 200,
+  //     width: 200,
-      height: 100,
+  //     height: 100,
-    });
+  //   });
-    const arrow = UI.createElement("arrow", {
+  //   const arrow = UI.createElement("arrow", {
-      x: -30,
+  //     x: -30,
-      y: 50,
+  //     y: 50,
-      width: 28,
+  //     width: 28,
-      height: 5,
+  //     height: 5,
-    });
+  //   });
 
-    expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
+  //   expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
 
-    UI.resize(rectangle, "e", [40, 0]);
+  //   UI.resize(rectangle, "e", [40, 0]);
 
-    expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
+  //   expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
 
-    UI.resize(rectangle, "w", [50, 0]);
+  //   UI.resize(rectangle, "w", [50, 0]);
 
-    expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
+  //   expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
-    expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
+  //   expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
-  });
+  // });
 
   it("resizes with a label", async () => {
     const rectangle = UI.createElement("rectangle", {
@@ -510,12 +510,12 @@ describe("arrow element", () => {
       h.state,
     )[0] as ExcalidrawElbowArrowElement;
 
-    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
     expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
 
     UI.resize(rectangle, "se", [-200, -150]);
 
-    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
     expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
   });
 
@@ -538,11 +538,11 @@ describe("arrow element", () => {
       h.state,
     )[0] as ExcalidrawElbowArrowElement;
 
-    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
     expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
 
     UI.resize([rectangle, arrow], "nw", [300, 350]);
-    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.05);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.06);
     expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.25);
   });
 });
@@ -595,31 +595,31 @@ describe("text element", () => {
     expect(text.fontSize).toBeCloseTo(fontSize * scale);
   });
 
-  it("resizes with bound arrow", async () => {
+  // it("resizes with bound arrow", async () => {
-    const text = UI.createElement("text");
+  //   const text = UI.createElement("text");
-    await UI.editText(text, "hello\nworld");
+  //   await UI.editText(text, "hello\nworld");
-    const boundArrow = UI.createElement("arrow", {
+  //   const boundArrow = UI.createElement("arrow", {
-      x: -30,
+  //     x: -30,
-      y: 25,
+  //     y: 25,
-      width: 28,
+  //     width: 28,
-      height: 5,
+  //     height: 5,
-    });
+  //   });
 
-    expect(boundArrow.endBinding?.elementId).toEqual(text.id);
+  //   expect(boundArrow.endBinding?.elementId).toEqual(text.id);
 
-    UI.resize(text, "ne", [40, 0]);
+  //   UI.resize(text, "ne", [40, 0]);
 
-    expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(30);
+  //   expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(30);
 
-    const textWidth = text.width;
+  //   const textWidth = text.width;
-    const scale = 20 / text.height;
+  //   const scale = 20 / text.height;
-    UI.resize(text, "nw", [50, 20]);
+  //   UI.resize(text, "nw", [50, 20]);
 
-    expect(boundArrow.endBinding?.elementId).toEqual(text.id);
+  //   expect(boundArrow.endBinding?.elementId).toEqual(text.id);
-    expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
+  //   expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
-      30 + textWidth * scale,
+  //     30 + textWidth * scale,
-    );
+  //   );
-  });
+  // });
 
   it("updates font size via keyboard", async () => {
     const text = UI.createElement("text");
@@ -801,36 +801,36 @@ describe("image element", () => {
     expect(image.scale).toEqual([1, 1]);
   });
 
-  it("resizes with bound arrow", async () => {
+  // it("resizes with bound arrow", async () => {
-    const image = API.createElement({
+  //   const image = API.createElement({
-      type: "image",
+  //     type: "image",
-      width: 100,
+  //     width: 100,
-      height: 100,
+  //     height: 100,
-    });
+  //   });
-    API.setElements([image]);
+  //   API.setElements([image]);
-    const arrow = UI.createElement("arrow", {
+  //   const arrow = UI.createElement("arrow", {
-      x: -30,
+  //     x: -30,
-      y: 50,
+  //     y: 50,
-      width: 28,
+  //     width: 28,
-      height: 5,
+  //     height: 5,
-    });
+  //   });
 
-    expect(arrow.endBinding?.elementId).toEqual(image.id);
+  //   expect(arrow.endBinding?.elementId).toEqual(image.id);
 
-    UI.resize(image, "ne", [40, 0]);
+  //   UI.resize(image, "ne", [40, 0]);
 
-    expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
+  //   expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
 
-    const imageWidth = image.width;
+  //   const imageWidth = image.width;
-    const scale = 20 / image.height;
+  //   const scale = 20 / image.height;
-    UI.resize(image, "nw", [50, 20]);
+  //   UI.resize(image, "nw", [50, 20]);
 
-    expect(arrow.endBinding?.elementId).toEqual(image.id);
+  //   expect(arrow.endBinding?.elementId).toEqual(image.id);
-    expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
+  //   expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
-      30 + imageWidth * scale,
+  //     30 + imageWidth * scale,
-      0,
+  //     0,
-    );
+  //   );
-  });
+  // });
 });
 
 describe("multiple selection", () => {
@@ -997,68 +997,80 @@ describe("multiple selection", () => {
     expect(diagLine.angle).toEqual(0);
   });
 
-  it("resizes with bound arrows", async () => {
+  // it("resizes with bound arrows", async () => {
-    const rectangle = UI.createElement("rectangle", {
+  //   const rectangle = UI.createElement("rectangle", {
-      position: 0,
+  //     position: 0,
-      size: 100,
+  //     size: 100,
-    });
+  //   });
-    const leftBoundArrow = UI.createElement("arrow", {
+  //   const leftBoundArrow = UI.createElement("arrow", {
-      x: -110,
+  //     x: -110,
-      y: 50,
+  //     y: 50,
-      width: 100,
+  //     width: 100,
-      height: 0,
+  //     height: 0,
-    });
+  //   });
 
-    const rightBoundArrow = UI.createElement("arrow", {
+  //   const rightBoundArrow = UI.createElement("arrow", {
-      x: 210,
+  //     x: 210,
-      y: 50,
+  //     y: 50,
-      width: -100,
+  //     width: -100,
-      height: 0,
+  //     height: 0,
-    });
+  //   });
 
-    const selectionWidth = 210;
+  //   const selectionWidth = 210;
-    const selectionHeight = 100;
+  //   const selectionHeight = 100;
-    const move = [40, 40] as [number, number];
+  //   const move = [40, 40] as [number, number];
-    const scale = Math.max(
+  //   const scale = Math.max(
-      1 - move[0] / selectionWidth,
+  //     1 - move[0] / selectionWidth,
-      1 - move[1] / selectionHeight,
+  //     1 - move[1] / selectionHeight,
-    );
+  //   );
-    const leftArrowBinding = { ...leftBoundArrow.endBinding };
+  //   const leftArrowBinding: {
-    const rightArrowBinding = { ...rightBoundArrow.endBinding };
+  //     elementId: string;
-    delete rightArrowBinding.gap;
+  //     gap?: number;
+  //     focus?: number;
+  //   } = {
+  //     ...leftBoundArrow.endBinding,
+  //   } as PointBinding;
+  //   const rightArrowBinding: {
+  //     elementId: string;
+  //     gap?: number;
+  //     focus?: number;
+  //   } = {
+  //     ...rightBoundArrow.endBinding,
+  //   } as PointBinding;
+  //   delete rightArrowBinding.gap;
 
-    UI.resize([rectangle, rightBoundArrow], "nw", move, {
+  //   UI.resize([rectangle, rightBoundArrow], "nw", move, {
-      shift: true,
+  //     shift: true,
-    });
+  //   });
 
-    expect(leftBoundArrow.x).toBeCloseTo(-110);
+  //   expect(leftBoundArrow.x).toBeCloseTo(-110);
-    expect(leftBoundArrow.y).toBeCloseTo(50);
+  //   expect(leftBoundArrow.y).toBeCloseTo(50);
-    expect(leftBoundArrow.width).toBeCloseTo(140, 0);
+  //   expect(leftBoundArrow.width).toBeCloseTo(140, 0);
-    expect(leftBoundArrow.height).toBeCloseTo(7, 0);
+  //   expect(leftBoundArrow.height).toBeCloseTo(7, 0);
-    expect(leftBoundArrow.angle).toEqual(0);
+  //   expect(leftBoundArrow.angle).toEqual(0);
-    expect(leftBoundArrow.startBinding).toBeNull();
+  //   expect(leftBoundArrow.startBinding).toBeNull();
-    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
+  //   expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
-    expect(leftBoundArrow.endBinding?.elementId).toBe(
+  //   expect(leftBoundArrow.endBinding?.elementId).toBe(
-      leftArrowBinding.elementId,
+  //     leftArrowBinding.elementId,
-    );
+  //   );
-    expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
+  //   expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
 
-    expect(rightBoundArrow.x).toBeCloseTo(210);
+  //   expect(rightBoundArrow.x).toBeCloseTo(210);
-    expect(rightBoundArrow.y).toBeCloseTo(
+  //   expect(rightBoundArrow.y).toBeCloseTo(
-      (selectionHeight - 50) * (1 - scale) + 50,
+  //     (selectionHeight - 50) * (1 - scale) + 50,
-    );
+  //   );
-    expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
+  //   expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
-    expect(rightBoundArrow.height).toBeCloseTo(0);
+  //   expect(rightBoundArrow.height).toBeCloseTo(0);
-    expect(rightBoundArrow.angle).toEqual(0);
+  //   expect(rightBoundArrow.angle).toEqual(0);
-    expect(rightBoundArrow.startBinding).toBeNull();
+  //   expect(rightBoundArrow.startBinding).toBeNull();
-    expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
+  //   expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
-    expect(rightBoundArrow.endBinding?.elementId).toBe(
+  //   expect(rightBoundArrow.endBinding?.elementId).toBe(
-      rightArrowBinding.elementId,
+  //     rightArrowBinding.elementId,
-    );
+  //   );
-    expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
+  //   expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
-      rightArrowBinding.focus!,
+  //     rightArrowBinding.focus!,
-    );
+  //   );
-  });
+  // });
 
   it("resizes with labeled arrows", async () => {
     const topArrow = UI.createElement("arrow", {
@@ -1338,8 +1350,8 @@ describe("multiple selection", () => {
 
     expect(boundArrow.x).toBeCloseTo(380 * scaleX);
     expect(boundArrow.y).toBeCloseTo(240 * scaleY);
-    expect(boundArrow.points[1][0]).toBeCloseTo(-60 * scaleX);
+    expect(boundArrow.points[1][0]).toBeCloseTo(59.7979);
-    expect(boundArrow.points[1][1]).toBeCloseTo(-80 * scaleY);
+    expect(boundArrow.points[1][1]).toBeCloseTo(-79.7305);
 
     expect(arrowLabelPos.x + arrowLabel.width / 2).toBeCloseTo(
       boundArrow.x + boundArrow.points[1][0] / 2,

packages/excalidraw/actions/actionCanvas.tsx

@@ -51,7 +51,7 @@ import { register } from "./register";
 
 import type { AppState, Offsets } from "../types";
 
-export const actionChangeViewBackgroundColor = register({
+export const actionChangeViewBackgroundColor = register<Partial<AppState>>({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
   trackEvent: false,
@@ -64,7 +64,7 @@ export const actionChangeViewBackgroundColor = register({
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
-      captureUpdate: !!value.viewBackgroundColor
+      captureUpdate: !!value?.viewBackgroundColor
         ? CaptureUpdateAction.IMMEDIATELY
         : CaptureUpdateAction.EVENTUALLY,
     };
@@ -83,7 +83,6 @@ export const actionChangeViewBackgroundColor = register({
         elements={elements}
         appState={appState}
         updateData={updateData}
-        compactMode={appState.stylesPanelMode === "compact"}
       />
     );
   },
@@ -467,7 +466,7 @@ export const actionZoomToFit = register({
     !event[KEYS.CTRL_OR_CMD],
 });
 
-export const actionToggleTheme = register({
+export const actionToggleTheme = register<AppState["theme"]>({
   name: "toggleTheme",
   label: (_, appState) => {
     return appState.theme === THEME.DARK
@@ -475,7 +474,8 @@ export const actionToggleTheme = register({
       : "buttons.darkMode";
   },
   keywords: ["toggle", "dark", "light", "mode", "theme"],
-  icon: (appState) => (appState.theme === THEME.LIGHT ? MoonIcon : SunIcon),
+  icon: (appState, elements) =>
+    appState.theme === THEME.LIGHT ? MoonIcon : SunIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {

packages/excalidraw/actions/actionClipboard.tsx

@@ -20,12 +20,12 @@ import { t } from "../i18n";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { register } from "./register";
 
-export const actionCopy = register({
+export const actionCopy = register<ClipboardEvent | null>({
   name: "copy",
   label: "labels.copy",
   icon: DuplicateIcon,
   trackEvent: { category: "element" },
-  perform: async (elements, appState, event: ClipboardEvent | null, app) => {
+  perform: async (elements, appState, event, app) => {
     const elementsToCopy = app.scene.getSelectedElements({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true,
@@ -109,12 +109,12 @@ export const actionPaste = register({
   keyTest: undefined,
 });
 
-export const actionCut = register({
+export const actionCut = register<ClipboardEvent | null>({
   name: "cut",
   label: "labels.cut",
   icon: cutIcon,
   trackEvent: { category: "element" },
-  perform: (elements, appState, event: ClipboardEvent | null, app) => {
+  perform: (elements, appState, event, app) => {
     actionCopy.perform(elements, appState, event, app);
     return actionDeleteSelected.perform(elements, appState, null, app);
   },

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -30,6 +30,8 @@ import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { TrashIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 
+import { useStylesPanelMode } from "..";
+
 import { register } from "./register";
 
 import type { AppClassProperties, AppState } from "../types";
@@ -210,12 +212,8 @@ export const actionDeleteSelected = register({
   trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState, formData, app) => {
     if (appState.selectedLinearElement?.isEditing) {
-      const {
+      const { elementId, selectedPointsIndices } =
-        elementId,
+        appState.selectedLinearElement;
-        selectedPointsIndices,
-        startBindingElement,
-        endBindingElement,
-      } = appState.selectedLinearElement;
       const elementsMap = app.scene.getNonDeletedElementsMap();
       const linearElement = LinearElementEditor.getElement(
         elementId,
@@ -252,19 +250,6 @@ export const actionDeleteSelected = register({
         };
       }
 
-      // We cannot do this inside `movePoint` because it is also called
-      // when deleting the uncommitted point (which hasn't caused any binding)
-      const binding = {
-        startBindingElement: selectedPointsIndices?.includes(0)
-          ? null
-          : startBindingElement,
-        endBindingElement: selectedPointsIndices?.includes(
-          linearElement.points.length - 1,
-        )
-          ? null
-          : endBindingElement,
-      };
-
       LinearElementEditor.deletePoints(
         linearElement,
         app,
@@ -277,7 +262,6 @@ export const actionDeleteSelected = register({
           ...appState,
           selectedLinearElement: {
             ...appState.selectedLinearElement,
-            ...binding,
             selectedPointsIndices:
               selectedPointsIndices?.[0] > 0
                 ? [selectedPointsIndices[0] - 1]
@@ -306,6 +290,7 @@ export const actionDeleteSelected = register({
           type: app.state.preferredSelectionTool.type,
         }),
         multiElement: null,
+        newElement: null,
         activeEmbeddable: null,
         selectedLinearElement: null,
       },
@@ -320,22 +305,25 @@ export const actionDeleteSelected = register({
   keyTest: (event, appState, elements) =>
     (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&
     !event[KEYS.CTRL_OR_CMD],
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => {
-    <ToolButton
+    const isMobile = useStylesPanelMode() === "mobile";
-      type="button"
+
-      icon={TrashIcon}
+    return (
-      title={t("labels.delete")}
+      <ToolButton
-      aria-label={t("labels.delete")}
+        type="button"
-      onClick={() => updateData(null)}
+        icon={TrashIcon}
-      disabled={
+        title={t("labels.delete")}
-        !isSomeElementSelected(getNonDeletedElements(elements), appState)
+        aria-label={t("labels.delete")}
-      }
+        onClick={() => updateData(null)}
-      style={{
+        disabled={
-        ...(appState.stylesPanelMode === "mobile" &&
+          !isSomeElementSelected(getNonDeletedElements(elements), appState)
-        appState.openPopup !== "compactOtherProperties"
+        }
-          ? MOBILE_ACTION_BUTTON_BG
+        style={{
-          : {}),
+          ...(isMobile && appState.openPopup !== "compactOtherProperties"
-      }}
+            ? MOBILE_ACTION_BUTTON_BG
-    />
+            : {}),
-  ),
+        }}
+      />
+    );
+  },
 });

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -27,6 +27,8 @@ import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
 import { getShortcutKey } from "../shortcut";
 
+import { useStylesPanelMode } from "..";
+
 import { register } from "./register";
 
 export const actionDuplicateSelection = register({
@@ -107,24 +109,27 @@ export const actionDuplicateSelection = register({
     };
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => {
-    <ToolButton
+    const isMobile = useStylesPanelMode() === "mobile";
-      type="button"
+
-      icon={DuplicateIcon}
+    return (
-      title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
+      <ToolButton
-        "CtrlOrCmd+D",
+        type="button"
-      )}`}
+        icon={DuplicateIcon}
-      aria-label={t("labels.duplicateSelection")}
+        title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
-      onClick={() => updateData(null)}
+          "CtrlOrCmd+D",
-      disabled={
+        )}`}
-        !isSomeElementSelected(getNonDeletedElements(elements), appState)
+        aria-label={t("labels.duplicateSelection")}
-      }
+        onClick={() => updateData(null)}
-      style={{
+        disabled={
-        ...(appState.stylesPanelMode === "mobile" &&
+          !isSomeElementSelected(getNonDeletedElements(elements), appState)
-        appState.openPopup !== "compactOtherProperties"
+        }
-          ? MOBILE_ACTION_BUTTON_BG
+        style={{
-          : {}),
+          ...(isMobile && appState.openPopup !== "compactOtherProperties"
-      }}
+            ? MOBILE_ACTION_BUTTON_BG
-    />
+            : {}),
-  ),
+        }}
+      />
+    );
+  },
 });

packages/excalidraw/actions/actionExport.tsx

@@ -11,7 +11,7 @@ import { CaptureUpdateAction } from "@excalidraw/element";
 
 import type { Theme } from "@excalidraw/element/types";
 
-import { useDevice } from "../components/App";
+import { useEditorInterface } from "../components/App";
 import { CheckboxItem } from "../components/CheckboxItem";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { ProjectName } from "../components/ProjectName";
@@ -31,7 +31,9 @@ import "../components/ToolIcon.scss";
 
 import { register } from "./register";
 
-export const actionChangeProjectName = register({
+import type { AppState } from "../types";
+
+export const actionChangeProjectName = register<AppState["name"]>({
   name: "changeProjectName",
   label: "labels.fileTitle",
   trackEvent: false,
@@ -51,7 +53,7 @@ export const actionChangeProjectName = register({
   ),
 });
 
-export const actionChangeExportScale = register({
+export const actionChangeExportScale = register<AppState["exportScale"]>({
   name: "changeExportScale",
   label: "imageExportDialog.scale",
   trackEvent: { category: "export", action: "scale" },
@@ -101,7 +103,9 @@ export const actionChangeExportScale = register({
   },
 });
 
-export const actionChangeExportBackground = register({
+export const actionChangeExportBackground = register<
+  AppState["exportBackground"]
+>({
   name: "changeExportBackground",
   label: "imageExportDialog.label.withBackground",
   trackEvent: { category: "export", action: "toggleBackground" },
@@ -121,7 +125,9 @@ export const actionChangeExportBackground = register({
   ),
 });
 
-export const actionChangeExportEmbedScene = register({
+export const actionChangeExportEmbedScene = register<
+  AppState["exportEmbedScene"]
+>({
   name: "changeExportEmbedScene",
   label: "imageExportDialog.tooltip.embedScene",
   trackEvent: { category: "export", action: "embedScene" },
@@ -242,7 +248,7 @@ export const actionSaveFileToDisk = register({
       icon={saveAs}
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDevice().editor.isMobile}
+      showAriaLabel={useEditorInterface().formFactor === "phone"}
       hidden={!nativeFileSystemSupported}
       onClick={() => updateData(null)}
       data-testid="save-as-button"
@@ -288,7 +294,9 @@ export const actionLoadScene = register({
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
 });
 
-export const actionExportWithDarkMode = register({
+export const actionExportWithDarkMode = register<
+  AppState["exportWithDarkMode"]
+>({
   name: "exportWithDarkMode",
   label: "imageExportDialog.label.darkMode",
   trackEvent: { category: "export", action: "toggleTheme" },

packages/excalidraw/actions/actionFinalize.tsx

@@ -1,10 +1,6 @@
 import { pointFrom } from "@excalidraw/math";
 
-import {
+import { bindOrUnbindBindingElement } from "@excalidraw/element/binding";
-  maybeBindLinearElement,
-  bindOrUnbindLinearElement,
-  isBindingEnabled,
-} from "@excalidraw/element/binding";
 import {
   isValidPolygon,
   LinearElementEditor,
@@ -21,7 +17,7 @@ import {
 import {
   KEYS,
   arrayToMap,
-  tupleToCoors,
+  invariant,
   updateActiveTool,
 } from "@excalidraw/common";
 import { isPathALoop } from "@excalidraw/element";
@@ -30,11 +26,12 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type { LocalPoint } from "@excalidraw/math";
+import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   NonDeleted,
+  PointsPositionUpdates,
 } from "@excalidraw/element/types";
 
 import { t } from "../i18n";
@@ -46,20 +43,37 @@ import { register } from "./register";
 
 import type { AppState } from "../types";
 
-export const actionFinalize = register({
+type FormData = {
+  event: PointerEvent;
+  sceneCoords: { x: number; y: number };
+};
+
+export const actionFinalize = register<FormData>({
   name: "finalize",
   label: "",
   trackEvent: false,
   perform: (elements, appState, data, app) => {
+    let newElements = elements;
     const { interactiveCanvas, focusContainer, scene } = app;
-    const { event, sceneCoords } =
-      (data as {
-        event?: PointerEvent;
-        sceneCoords?: { x: number; y: number };
-      }) ?? {};
     const elementsMap = scene.getNonDeletedElementsMap();
 
-    if (event && appState.selectedLinearElement) {
+    if (data && appState.selectedLinearElement) {
+      const { event, sceneCoords } = data;
+      const element = LinearElementEditor.getElement(
+        appState.selectedLinearElement.elementId,
+        elementsMap,
+      );
+
+      invariant(
+        element,
+        "Arrow element should exist if selectedLinearElement is set",
+      );
+
+      invariant(
+        sceneCoords,
+        "sceneCoords should be defined if actionFinalize is called with event",
+      );
+
       const linearElementEditor = LinearElementEditor.handlePointerUp(
         event,
         appState.selectedLinearElement,
@@ -67,19 +81,48 @@ export const actionFinalize = register({
         app.scene,
       );
 
-      const { startBindingElement, endBindingElement } = linearElementEditor;
-      const element = app.scene.getElement(linearElementEditor.elementId);
       if (isBindingElement(element)) {
-        bindOrUnbindLinearElement(
+        const newArrow = !!appState.newElement;
-          element,
+
-          startBindingElement,
+        const selectedPointsIndices =
-          endBindingElement,
+          newArrow || !appState.selectedLinearElement.selectedPointsIndices
-          app.scene,
+            ? [element.points.length - 1] // New arrow creation
-        );
+            : appState.selectedLinearElement.selectedPointsIndices;
+
+        const draggedPoints: PointsPositionUpdates =
+          selectedPointsIndices.reduce((map, index) => {
+            map.set(index, {
+              point: LinearElementEditor.pointFromAbsoluteCoords(
+                element,
+                pointFrom<GlobalPoint>(sceneCoords.x, sceneCoords.y),
+                elementsMap,
+              ),
+            });
+
+            return map;
+          }, new Map()) ?? new Map();
+
+        bindOrUnbindBindingElement(element, draggedPoints, scene, appState, {
+          newArrow,
+          altKey: event.altKey,
+        });
+      } else if (isLineElement(element)) {
+        if (
+          appState.selectedLinearElement?.isEditing &&
+          !appState.newElement &&
+          !isValidPolygon(element.points)
+        ) {
+          scene.mutateElement(element, {
+            polygon: false,
+          });
+        }
       }
 
       if (linearElementEditor !== appState.selectedLinearElement) {
-        let newElements = elements;
+        // `handlePointerUp()` updated the linear element instance,
+        // so filter out this element if it is too small,
+        // but do an update to all new elements anyway for undo/redo purposes.
+
         if (element && isInvisiblySmallElement(element)) {
           // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
           newElements = newElements.map((el) => {
@@ -91,39 +134,8 @@ export const actionFinalize = register({
             return el;
           });
         }
-        return {
-          elements: newElements,
-          appState: {
-            selectedLinearElement: {
-              ...linearElementEditor,
-              selectedPointsIndices: null,
-            },
-            suggestedBindings: [],
-          },
-          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-        };
-      }
-    }
 
-    if (appState.selectedLinearElement?.isEditing) {
+        const activeToolLocked = appState.activeTool?.locked;
-      const { elementId, startBindingElement, endBindingElement } =
-        appState.selectedLinearElement;
-      const element = LinearElementEditor.getElement(elementId, elementsMap);
-
-      if (element) {
-        if (isBindingElement(element)) {
-          bindOrUnbindLinearElement(
-            element,
-            startBindingElement,
-            endBindingElement,
-            scene,
-          );
-        }
-        if (isLineElement(element) && !isValidPolygon(element.points)) {
-          scene.mutateElement(element, {
-            polygon: false,
-          });
-        }
 
         return {
           elements:
@@ -134,23 +146,31 @@ export const actionFinalize = register({
                   }
                   return el;
                 })
-              : undefined,
+              : newElements,
           appState: {
             ...appState,
             cursorButton: "up",
-            selectedLinearElement: new LinearElementEditor(
+            selectedLinearElement: activeToolLocked
-              element,
+              ? null
-              arrayToMap(elementsMap),
+              : {
-              false, // exit editing mode
+                  ...linearElementEditor,
-            ),
+                  selectedPointsIndices: null,
+                  isEditing: false,
+                  initialState: {
+                    ...linearElementEditor.initialState,
+                    lastClickedPoint: -1,
+                  },
+                },
+            selectionElement: null,
+            suggestedBinding: null,
+            newElement: null,
+            multiElement: null,
           },
           captureUpdate: CaptureUpdateAction.IMMEDIATELY,
         };
       }
     }
 
-    let newElements = elements;
-
     if (window.document.activeElement instanceof HTMLElement) {
       focusContainer();
     }
@@ -174,8 +194,14 @@ export const actionFinalize = register({
 
     if (element) {
       // pen and mouse have hover
-      if (appState.multiElement && element.type !== "freedraw") {
+      if (
-        const { points, lastCommittedPoint } = element;
+        appState.selectedLinearElement &&
+        appState.multiElement &&
+        element.type !== "freedraw" &&
+        appState.lastPointerDownWith !== "touch"
+      ) {
+        const { points } = element;
+        const { lastCommittedPoint } = appState.selectedLinearElement;
         if (
           !lastCommittedPoint ||
           points[points.length - 1] !== lastCommittedPoint
@@ -227,25 +253,6 @@ export const actionFinalize = register({
             polygon: false,
           });
         }
-
-        if (
-          isBindingElement(element) &&
-          !isLoop &&
-          element.points.length > 1 &&
-          isBindingEnabled(appState)
-        ) {
-          const coords =
-            sceneCoords ??
-            tupleToCoors(
-              LinearElementEditor.getPointAtIndexGlobalCoordinates(
-                element,
-                -1,
-                arrayToMap(elements),
-              ),
-            );
-
-          maybeBindLinearElement(element, appState, coords, scene);
-        }
       }
     }
 
@@ -271,6 +278,25 @@ export const actionFinalize = register({
       });
     }
 
+    let selectedLinearElement =
+      element && isLinearElement(element)
+        ? new LinearElementEditor(element, arrayToMap(newElements)) // To select the linear element when user has finished mutipoint editing
+        : appState.selectedLinearElement;
+
+    selectedLinearElement = selectedLinearElement
+      ? {
+          ...selectedLinearElement,
+          isEditing: appState.newElement
+            ? false
+            : selectedLinearElement.isEditing,
+          initialState: {
+            ...selectedLinearElement.initialState,
+            lastClickedPoint: -1,
+            origin: null,
+          },
+        }
+      : selectedLinearElement;
+
     return {
       elements: newElements,
       appState: {
@@ -288,7 +314,7 @@ export const actionFinalize = register({
         multiElement: null,
         editingTextElement: null,
         startBoundElement: null,
-        suggestedBindings: [],
+        suggestedBinding: null,
         selectedElementIds:
           element &&
           !appState.activeTool.locked &&
@@ -298,11 +324,8 @@ export const actionFinalize = register({
                 [element.id]: true,
               }
             : appState.selectedElementIds,
-        // To select the linear element when user has finished mutipoint editing
+
-        selectedLinearElement:
+        selectedLinearElement,
-          element && isLinearElement(element)
-            ? new LinearElementEditor(element, arrayToMap(newElements))
-            : appState.selectedLinearElement,
       },
       // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,

packages/excalidraw/actions/actionFlip.test.tsx

@@ -38,15 +38,13 @@ describe("flipping re-centers selection", () => {
         height: 239.9,
         startBinding: {
           elementId: "rec1",
-          focus: 0,
-          gap: 5,
           fixedPoint: [0.49, -0.05],
+          mode: "orbit",
         },
         endBinding: {
           elementId: "rec2",
-          focus: 0,
-          gap: 5,
           fixedPoint: [-0.05, 0.49],
+          mode: "orbit",
         },
         startArrowhead: null,
         endArrowhead: "arrow",
@@ -74,11 +72,11 @@ describe("flipping re-centers selection", () => {
 
     const rec1 = h.elements.find((el) => el.id === "rec1")!;
     expect(rec1.x).toBeCloseTo(100, 0);
-    expect(rec1.y).toBeCloseTo(100, 0);
+    expect(rec1.y).toBeCloseTo(101, 0);
 
     const rec2 = h.elements.find((el) => el.id === "rec2")!;
     expect(rec2.x).toBeCloseTo(220, 0);
-    expect(rec2.y).toBeCloseTo(250, 0);
+    expect(rec2.y).toBeCloseTo(251, 0);
   });
 });
 
@@ -99,8 +97,8 @@ describe("flipping arrowheads", () => {
       endArrowhead: null,
       endBinding: {
         elementId: rect.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
     });
 
@@ -139,13 +137,13 @@ describe("flipping arrowheads", () => {
       endArrowhead: "circle",
       startBinding: {
         elementId: rect.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
       endBinding: {
         elementId: rect2.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
     });
 
@@ -195,8 +193,8 @@ describe("flipping arrowheads", () => {
       endArrowhead: null,
       endBinding: {
         elementId: rect.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
     });
 

packages/excalidraw/actions/actionFlip.ts

@@ -1,17 +1,10 @@
 import { getNonDeletedElements } from "@excalidraw/element";
-import {
+import { bindOrUnbindBindingElements } from "@excalidraw/element";
-  bindOrUnbindLinearElements,
-  isBindingEnabled,
-} from "@excalidraw/element";
 import { getCommonBoundingBox } from "@excalidraw/element";
 import { newElementWith } from "@excalidraw/element";
 import { deepCopyElement } from "@excalidraw/element";
 import { resizeMultipleElements } from "@excalidraw/element";
-import {
+import { isArrowElement, isElbowArrow } from "@excalidraw/element";
-  isArrowElement,
-  isElbowArrow,
-  isLinearElement,
-} from "@excalidraw/element";
 import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
 import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
 
@@ -103,7 +96,6 @@ const flipSelectedElements = (
   const updatedElements = flipElements(
     selectedElements,
     elementsMap,
-    appState,
     flipDirection,
     app,
   );
@@ -118,7 +110,6 @@ const flipSelectedElements = (
 const flipElements = (
   selectedElements: NonDeleted<ExcalidrawElement>[],
   elementsMap: NonDeletedSceneElementsMap,
-  appState: AppState,
   flipDirection: "horizontal" | "vertical",
   app: AppClassProperties,
 ): ExcalidrawElement[] => {
@@ -158,12 +149,10 @@ const flipElements = (
     },
   );
 
-  bindOrUnbindLinearElements(
+  bindOrUnbindBindingElements(
-    selectedElements.filter(isLinearElement),
+    selectedElements.filter(isArrowElement),
-    isBindingEnabled(appState),
-    [],
     app.scene,
-    appState.zoom,
+    app.state,
   );
 
   // ---------------------------------------------------------------------------

packages/excalidraw/actions/actionHistory.tsx

@@ -18,6 +18,8 @@ import { HistoryChangedEvent } from "../history";
 import { useEmitter } from "../hooks/useEmitter";
 import { t } from "../i18n";
 
+import { useStylesPanelMode } from "..";
+
 import type { History } from "../history";
 import type { AppClassProperties, AppState } from "../types";
 import type { Action, ActionResult } from "./types";
@@ -73,7 +75,7 @@ export const createUndoAction: ActionCreator = (history) => ({
     ),
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
-  PanelComponent: ({ appState, updateData, data }) => {
+  PanelComponent: ({ appState, updateData, data, app }) => {
     const { isUndoStackEmpty } = useEmitter<HistoryChangedEvent>(
       history.onHistoryChangedEmitter,
       new HistoryChangedEvent(
@@ -81,6 +83,7 @@ export const createUndoAction: ActionCreator = (history) => ({
         history.isRedoStackEmpty,
       ),
     );
+    const isMobile = useStylesPanelMode() === "mobile";
 
     return (
       <ToolButton
@@ -92,9 +95,7 @@ export const createUndoAction: ActionCreator = (history) => ({
         disabled={isUndoStackEmpty}
         data-testid="button-undo"
         style={{
-          ...(appState.stylesPanelMode === "mobile"
+          ...(isMobile ? MOBILE_ACTION_BUTTON_BG : {}),
-            ? MOBILE_ACTION_BUTTON_BG
-            : {}),
         }}
       />
     );
@@ -114,7 +115,7 @@ export const createRedoAction: ActionCreator = (history) => ({
   keyTest: (event) =>
     (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
     (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
-  PanelComponent: ({ appState, updateData, data }) => {
+  PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
       new HistoryChangedEvent(
@@ -122,6 +123,7 @@ export const createRedoAction: ActionCreator = (history) => ({
         history.isRedoStackEmpty,
       ),
     );
+    const isMobile = useStylesPanelMode() === "mobile";
 
     return (
       <ToolButton
@@ -133,9 +135,7 @@ export const createRedoAction: ActionCreator = (history) => ({
         disabled={isRedoStackEmpty}
         data-testid="button-redo"
         style={{
-          ...(appState.stylesPanelMode === "mobile"
+          ...(isMobile ? MOBILE_ACTION_BUTTON_BG : {}),
-            ? MOBILE_ACTION_BUTTON_BG
-            : {}),
         }}
       />
     );

packages/excalidraw/actions/actionNavigate.tsx

@@ -2,6 +2,8 @@ import clsx from "clsx";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
+import { invariant } from "@excalidraw/common";
+
 import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
 import {
@@ -16,12 +18,17 @@ import { register } from "./register";
 import type { GoToCollaboratorComponentProps } from "../components/UserList";
 import type { Collaborator } from "../types";
 
-export const actionGoToCollaborator = register({
+export const actionGoToCollaborator = register<Collaborator>({
   name: "goToCollaborator",
   label: "Go to a collaborator",
   viewMode: true,
   trackEvent: { category: "collab" },
-  perform: (_elements, appState, collaborator: Collaborator) => {
+  perform: (_elements, appState, collaborator) => {
+    invariant(
+      collaborator,
+      "actionGoToCollaborator: collaborator should be defined when actionGoToCollaborator is called",
+    );
+
     if (
       !collaborator.socketId ||
       appState.userToFollow?.socketId === collaborator.socketId ||

packages/excalidraw/actions/actionProperties.tsx

@@ -1,4 +1,5 @@
 import { pointFrom } from "@excalidraw/math";
+
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import {
@@ -21,6 +22,7 @@ import {
   isTransparent,
   reduceToCommonValue,
   BOUND_TEXT_PADDING,
+  invariant,
 } from "@excalidraw/common";
 
 import {
@@ -31,7 +33,7 @@ import {
 } from "@excalidraw/element";
 
 import {
-  bindLinearElement,
+  bindBindingElement,
   calculateFixedPointForElbowArrowBinding,
   updateBoundElements,
 } from "@excalidraw/element";
@@ -63,10 +65,13 @@ import {
   toggleLinePolygonState,
 } from "@excalidraw/element";
 
-import type { LocalPoint } from "@excalidraw/math";
+import { deriveStylesPanelMode } from "@excalidraw/common";
+
+import type { LocalPoint, Radians } from "@excalidraw/math";
 
 import type {
   Arrowhead,
+  ContainerBehavior,
   ElementsMap,
   ExcalidrawBindableElement,
   ExcalidrawElement,
@@ -86,9 +91,6 @@ import { RadioSelection } from "../components/RadioSelection";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { FontPicker } from "../components/FontPicker/FontPicker";
 import { IconPicker } from "../components/IconPicker";
-// TODO barnabasmolnar/editor-redesign
-// TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
-// ArrowHead icons
 import { Range } from "../components/Range";
 import {
   ArrowheadArrowIcon,
@@ -160,6 +162,15 @@ import type { AppClassProperties, AppState, Primitive } from "../types";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
+const getStylesPanelInfo = (app: AppClassProperties) => {
+  const stylesPanelMode = deriveStylesPanelMode(app.editorInterface);
+  return {
+    stylesPanelMode,
+    isCompact: stylesPanelMode !== "full",
+    isMobile: stylesPanelMode === "mobile",
+  } as const;
+};
+
 export const changeProperty = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
@@ -309,13 +320,15 @@ const changeFontSize = (
 
 // -----------------------------------------------------------------------------
 
-export const actionChangeStrokeColor = register({
+export const actionChangeStrokeColor = register<
+  Pick<AppState, "currentItemStrokeColor">
+>({
   name: "changeStrokeColor",
   label: "labels.stroke",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      ...(value.currentItemStrokeColor && {
+      ...(value?.currentItemStrokeColor && {
         elements: changeProperty(
           elements,
           appState,
@@ -333,48 +346,50 @@ export const actionChangeStrokeColor = register({
         ...appState,
         ...value,
       },
-      captureUpdate: !!value.currentItemStrokeColor
+      captureUpdate: !!value?.currentItemStrokeColor
         ? CaptureUpdateAction.IMMEDIATELY
         : CaptureUpdateAction.EVENTUALLY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app, data }) => (
+  PanelComponent: ({ elements, appState, updateData, app, data }) => {
-    <>
+    const { stylesPanelMode } = getStylesPanelInfo(app);
-      {appState.stylesPanelMode === "full" && (
+
-        <h3 aria-hidden="true">{t("labels.stroke")}</h3>
+    return (
-      )}
+      <>
-      <ColorPicker
+        {stylesPanelMode === "full" && (
-        topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
+          <h3 aria-hidden="true">{t("labels.stroke")}</h3>
-        palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
-        type="elementStroke"
-        label={t("labels.stroke")}
-        color={getFormValue(
-          elements,
-          app,
-          (element) => element.strokeColor,
-          true,
-          (hasSelection) =>
-            !hasSelection ? appState.currentItemStrokeColor : null,
         )}
-        onChange={(color) => updateData({ currentItemStrokeColor: color })}
+        <ColorPicker
-        elements={elements}
+          topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
-        appState={appState}
+          palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
-        updateData={updateData}
+          type="elementStroke"
-        compactMode={
+          label={t("labels.stroke")}
-          appState.stylesPanelMode === "compact" ||
+          color={getFormValue(
-          appState.stylesPanelMode === "mobile"
+            elements,
-        }
+            app,
-      />
+            (element) => element.strokeColor,
-    </>
+            true,
-  ),
+            (hasSelection) =>
+              !hasSelection ? appState.currentItemStrokeColor : null,
+          )}
+          onChange={(color) => updateData({ currentItemStrokeColor: color })}
+          elements={elements}
+          appState={appState}
+          updateData={updateData}
+        />
+      </>
+    );
+  },
 });
 
-export const actionChangeBackgroundColor = register({
+export const actionChangeBackgroundColor = register<
+  Pick<AppState, "currentItemBackgroundColor" | "viewBackgroundColor">
+>({
   name: "changeBackgroundColor",
   label: "labels.changeBackground",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
-    if (!value.currentItemBackgroundColor) {
+    if (!value?.currentItemBackgroundColor) {
       return {
         appState: {
           ...appState,
@@ -421,38 +436,40 @@ export const actionChangeBackgroundColor = register({
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app, data }) => (
+  PanelComponent: ({ elements, appState, updateData, app, data }) => {
-    <>
+    const { stylesPanelMode } = getStylesPanelInfo(app);
-      {appState.stylesPanelMode === "full" && (
+
-        <h3 aria-hidden="true">{t("labels.background")}</h3>
+    return (
-      )}
+      <>
-      <ColorPicker
+        {stylesPanelMode === "full" && (
-        topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
+          <h3 aria-hidden="true">{t("labels.background")}</h3>
-        palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
-        type="elementBackground"
-        label={t("labels.background")}
-        color={getFormValue(
-          elements,
-          app,
-          (element) => element.backgroundColor,
-          true,
-          (hasSelection) =>
-            !hasSelection ? appState.currentItemBackgroundColor : null,
         )}
-        onChange={(color) => updateData({ currentItemBackgroundColor: color })}
+        <ColorPicker
-        elements={elements}
+          topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
-        appState={appState}
+          palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
-        updateData={updateData}
+          type="elementBackground"
-        compactMode={
+          label={t("labels.background")}
-          appState.stylesPanelMode === "compact" ||
+          color={getFormValue(
-          appState.stylesPanelMode === "mobile"
+            elements,
-        }
+            app,
-      />
+            (element) => element.backgroundColor,
-    </>
+            true,
-  ),
+            (hasSelection) =>
+              !hasSelection ? appState.currentItemBackgroundColor : null,
+          )}
+          onChange={(color) =>
+            updateData({ currentItemBackgroundColor: color })
+          }
+          elements={elements}
+          appState={appState}
+          updateData={updateData}
+        />
+      </>
+    );
+  },
 });
 
-export const actionChangeFillStyle = register({
+export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
   name: "changeFillStyle",
   label: "labels.fill",
   trackEvent: false,
@@ -460,7 +477,9 @@ export const actionChangeFillStyle = register({
     trackEvent(
       "element",
       "changeFillStyle",
-      `${value} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
+      `${value} (${
+        app.editorInterface.formFactor === "phone" ? "mobile" : "desktop"
+      })`,
     );
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -532,7 +551,9 @@ export const actionChangeFillStyle = register({
   },
 });
 
-export const actionChangeStrokeWidth = register({
+export const actionChangeStrokeWidth = register<
+  ExcalidrawElement["strokeWidth"]
+>({
   name: "changeStrokeWidth",
   label: "labels.strokeWidth",
   trackEvent: false,
@@ -588,7 +609,7 @@ export const actionChangeStrokeWidth = register({
   ),
 });
 
-export const actionChangeSloppiness = register({
+export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
   name: "changeSloppiness",
   label: "labels.sloppiness",
   trackEvent: false,
@@ -642,7 +663,9 @@ export const actionChangeSloppiness = register({
   ),
 });
 
-export const actionChangeStrokeStyle = register({
+export const actionChangeStrokeStyle = register<
+  ExcalidrawElement["strokeStyle"]
+>({
   name: "changeStrokeStyle",
   label: "labels.strokeStyle",
   trackEvent: false,
@@ -695,7 +718,7 @@ export const actionChangeStrokeStyle = register({
   ),
 });
 
-export const actionChangeOpacity = register({
+export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
   name: "changeOpacity",
   label: "labels.opacity",
   trackEvent: false,
@@ -719,86 +742,100 @@ export const actionChangeOpacity = register({
   ),
 });
 
-export const actionChangeFontSize = register({
+export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
-  name: "changeFontSize",
+  {
-  label: "labels.fontSize",
+    name: "changeFontSize",
-  trackEvent: false,
+    label: "labels.fontSize",
-  perform: (elements, appState, value, app) => {
+    trackEvent: false,
-    return changeFontSize(elements, appState, app, () => value, value);
+    perform: (elements, appState, value, app) => {
+      return changeFontSize(
+        elements,
+        appState,
+        app,
+        () => {
+          invariant(value, "actionChangeFontSize: Expected a font size value");
+          return value;
+        },
+        value,
+      );
+    },
+    PanelComponent: ({ elements, appState, updateData, app, data }) => {
+      const { isCompact } = getStylesPanelInfo(app);
+
+      return (
+        <fieldset>
+          <legend>{t("labels.fontSize")}</legend>
+          <div className="buttonList">
+            <RadioSelection
+              group="font-size"
+              options={[
+                {
+                  value: 16,
+                  text: t("labels.small"),
+                  icon: FontSizeSmallIcon,
+                  testId: "fontSize-small",
+                },
+                {
+                  value: 20,
+                  text: t("labels.medium"),
+                  icon: FontSizeMediumIcon,
+                  testId: "fontSize-medium",
+                },
+                {
+                  value: 28,
+                  text: t("labels.large"),
+                  icon: FontSizeLargeIcon,
+                  testId: "fontSize-large",
+                },
+                {
+                  value: 36,
+                  text: t("labels.veryLarge"),
+                  icon: FontSizeExtraLargeIcon,
+                  testId: "fontSize-veryLarge",
+                },
+              ]}
+              value={getFormValue(
+                elements,
+                app,
+                (element) => {
+                  if (isTextElement(element)) {
+                    return element.fontSize;
+                  }
+                  const boundTextElement = getBoundTextElement(
+                    element,
+                    app.scene.getNonDeletedElementsMap(),
+                  );
+                  if (boundTextElement) {
+                    return boundTextElement.fontSize;
+                  }
+                  return null;
+                },
+                (element) =>
+                  isTextElement(element) ||
+                  getBoundTextElement(
+                    element,
+                    app.scene.getNonDeletedElementsMap(),
+                  ) !== null,
+                (hasSelection) =>
+                  hasSelection
+                    ? null
+                    : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+              )}
+              onChange={(value) => {
+                withCaretPositionPreservation(
+                  () => updateData(value),
+                  isCompact,
+                  !!appState.editingTextElement,
+                  data?.onPreventClose,
+                );
+              }}
+            />
+          </div>
+        </fieldset>
+      );
+    },
   },
-  PanelComponent: ({ elements, appState, updateData, app, data }) => (
+);
-    <fieldset>
-      <legend>{t("labels.fontSize")}</legend>
-      <div className="buttonList">
-        <RadioSelection
-          group="font-size"
-          options={[
-            {
-              value: 16,
-              text: t("labels.small"),
-              icon: FontSizeSmallIcon,
-              testId: "fontSize-small",
-            },
-            {
-              value: 20,
-              text: t("labels.medium"),
-              icon: FontSizeMediumIcon,
-              testId: "fontSize-medium",
-            },
-            {
-              value: 28,
-              text: t("labels.large"),
-              icon: FontSizeLargeIcon,
-              testId: "fontSize-large",
-            },
-            {
-              value: 36,
-              text: t("labels.veryLarge"),
-              icon: FontSizeExtraLargeIcon,
-              testId: "fontSize-veryLarge",
-            },
-          ]}
-          value={getFormValue(
-            elements,
-            app,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.fontSize;
-              }
-              const boundTextElement = getBoundTextElement(
-                element,
-                app.scene.getNonDeletedElementsMap(),
-              );
-              if (boundTextElement) {
-                return boundTextElement.fontSize;
-              }
-              return null;
-            },
-            (element) =>
-              isTextElement(element) ||
-              getBoundTextElement(
-                element,
-                app.scene.getNonDeletedElementsMap(),
-              ) !== null,
-            (hasSelection) =>
-              hasSelection
-                ? null
-                : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
-          )}
-          onChange={(value) => {
-            withCaretPositionPreservation(
-              () => updateData(value),
-              appState.stylesPanelMode === "compact" ||
-                appState.stylesPanelMode === "mobile",
-              !!appState.editingTextElement,
-              data?.onPreventClose,
-            );
-          }}
-        />
-      </div>
-    </fieldset>
-  ),
-});
 
 export const actionDecreaseFontSize = register({
   name: "decreaseFontSize",
@@ -858,7 +895,10 @@ type ChangeFontFamilyData = Partial<
   resetContainers?: true;
 };
 
-export const actionChangeFontFamily = register({
+export const actionChangeFontFamily = register<{
+  currentItemFontFamily: any;
+  currentHoveredFontFamily: any;
+}>({
   name: "changeFontFamily",
   label: "labels.fontFamily",
   trackEvent: false,
@@ -895,6 +935,8 @@ export const actionChangeFontFamily = register({
       };
     }
 
+    invariant(value, "actionChangeFontFamily: value must be defined");
+
     const { currentItemFontFamily, currentHoveredFontFamily } = value;
 
     let nextCaptureUpdateAction: CaptureUpdateActionType =
@@ -1059,6 +1101,7 @@ export const actionChangeFontFamily = register({
     // 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 { stylesPanelMode, isCompact } = getStylesPanelInfo(app);
 
     const selectedFontFamily = useMemo(() => {
       const getFontFamily = (
@@ -1131,14 +1174,14 @@ export const actionChangeFontFamily = register({
 
     return (
       <>
-        {appState.stylesPanelMode === "full" && (
+        {stylesPanelMode === "full" && (
           <legend>{t("labels.fontFamily")}</legend>
         )}
         <FontPicker
           isOpened={appState.openPopup === "fontFamily"}
           selectedFontFamily={selectedFontFamily}
           hoveredFontFamily={appState.currentHoveredFontFamily}
-          compactMode={appState.stylesPanelMode !== "full"}
+          compactMode={stylesPanelMode !== "full"}
           onSelect={(fontFamily) => {
             withCaretPositionPreservation(
               () => {
@@ -1150,8 +1193,7 @@ export const actionChangeFontFamily = register({
                 // defensive clear so immediate close won't abuse the cached elements
                 cachedElementsRef.current.clear();
               },
-              appState.stylesPanelMode === "compact" ||
+              isCompact,
-                appState.stylesPanelMode === "mobile",
               !!appState.editingTextElement,
             );
           }}
@@ -1226,11 +1268,7 @@ export const actionChangeFontFamily = register({
               cachedElementsRef.current.clear();
 
               // Refocus text editor when font picker closes if we were editing text
-              if (
+              if (isCompact && appState.editingTextElement) {
-                (appState.stylesPanelMode === "compact" ||
-                  appState.stylesPanelMode === "mobile") &&
-                appState.editingTextElement
-              ) {
                 restoreCaretPosition(null); // Just refocus without saved position
               }
             }
@@ -1241,7 +1279,7 @@ export const actionChangeFontFamily = register({
   },
 });
 
-export const actionChangeTextAlign = register({
+export const actionChangeTextAlign = register<TextAlign>({
   name: "changeTextAlign",
   label: "Change text alignment",
   trackEvent: false,
@@ -1277,6 +1315,7 @@ export const actionChangeTextAlign = register({
   },
   PanelComponent: ({ elements, appState, updateData, app, data }) => {
     const elementsMap = app.scene.getNonDeletedElementsMap();
+    const { isCompact } = getStylesPanelInfo(app);
 
     return (
       <fieldset>
@@ -1329,8 +1368,7 @@ export const actionChangeTextAlign = register({
             onChange={(value) => {
               withCaretPositionPreservation(
                 () => updateData(value),
-                appState.stylesPanelMode === "compact" ||
+                isCompact,
-                  appState.stylesPanelMode === "mobile",
                 !!appState.editingTextElement,
                 data?.onPreventClose,
               );
@@ -1342,7 +1380,7 @@ export const actionChangeTextAlign = register({
   },
 });
 
-export const actionChangeVerticalAlign = register({
+export const actionChangeVerticalAlign = register<VerticalAlign>({
   name: "changeVerticalAlign",
   label: "Change vertical alignment",
   trackEvent: { category: "element" },
@@ -1377,6 +1415,7 @@ export const actionChangeVerticalAlign = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData, app, data }) => {
+    const { isCompact } = getStylesPanelInfo(app);
     return (
       <fieldset>
         <div className="buttonList">
@@ -1429,8 +1468,7 @@ export const actionChangeVerticalAlign = register({
             onChange={(value) => {
               withCaretPositionPreservation(
                 () => updateData(value),
-                appState.stylesPanelMode === "compact" ||
+                isCompact,
-                  appState.stylesPanelMode === "mobile",
                 !!appState.editingTextElement,
                 data?.onPreventClose,
               );
@@ -1442,7 +1480,7 @@ export const actionChangeVerticalAlign = register({
   },
 });
 
-export const actionChangeRoundness = register({
+export const actionChangeRoundness = register<"sharp" | "round">({
   name: "changeRoundness",
   label: "Change edge roundness",
   trackEvent: false,
@@ -1551,11 +1589,18 @@ const getMarginValue = (margin: number | null) => {
   }
 };
 
-export const actionChangeContainerBehavior = register({
+export const actionChangeContainerBehavior = register<
+  | { textFlow: ContainerBehavior["textFlow"] }
+  | { margin: NonNullable<ReturnType<typeof getMarginValue>> }
+>({
   name: "changeContainerBehavior",
   label: "labels.container",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
+    invariant(
+      value,
+      "actionChangeContainerBehavior: value must be defined",
+    );
     const elementsMap = app.scene.getNonDeletedElementsMap();
     let selected = getSelectedElements(elements, appState, {
       includeBoundTextElement: true,
@@ -1591,7 +1636,8 @@ export const actionChangeContainerBehavior = register({
       }
     }
 
-    if (value.hasOwnProperty("margin")) {
+    if ("margin" in value) {
+      const marginSize = getMargin(value.margin);
       if (containerIdsToUpdate.size === 0) {
         return {
           appState: {
@@ -1599,24 +1645,22 @@ export const actionChangeContainerBehavior = register({
             currentItemContainerBehavior: {
               textFlow:
                 appState.currentItemContainerBehavior?.textFlow ?? "growing",
-              margin: getMargin(value.margin as "small" | "medium" | "large"),
+              margin: marginSize,
             },
           },
           captureUpdate: CaptureUpdateAction.IMMEDIATELY,
         };
       }
-
       const nextElements = changeProperty(elements, appState, (el) =>
         containerIdsToUpdate.has(el.id)
           ? newElementWith(el, {
               containerBehavior: {
                 textFlow: el.containerBehavior?.textFlow ?? "growing",
-                margin: getMargin(value.margin as "small" | "medium" | "large"),
+                margin: marginSize,
               },
             })
           : el,
       );
-
       // Invalidate containers to trigger re-render
       containerIdsToUpdate.forEach((id) => {
         const container = nextElements.find((el) => el.id === id);
@@ -1638,30 +1682,29 @@ export const actionChangeContainerBehavior = register({
           currentItemContainerBehavior: {
             textFlow:
               appState.currentItemContainerBehavior?.textFlow ?? "growing",
-            margin: getMargin(value.margin as "small" | "medium" | "large"),
+            margin: marginSize,
           },
         },
         captureUpdate: CaptureUpdateAction.IMMEDIATELY,
       };
     }
-
+    const textFlow = value.textFlow;
     const nextElements = changeProperty(elements, appState, (el) =>
       containerIdsToUpdate.has(el.id)
         ? newElementWith(el, {
             containerBehavior: {
-              textFlow: value,
+              textFlow,
               margin: el.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
             },
           })
         : el,
     );
-
     return {
       elements: nextElements,
       appState: {
         ...appState,
         currentItemContainerBehavior: {
-          textFlow: value,
+          textFlow,
           margin:
             appState.currentItemContainerBehavior?.margin ?? BOUND_TEXT_PADDING,
         },
@@ -1866,15 +1909,16 @@ const getArrowheadOptions = (flip: boolean) => {
   ] as const;
 };
 
-export const actionChangeArrowhead = register({
+export const actionChangeArrowhead = register<{
+  position: "start" | "end";
+  type: Arrowhead;
+}>({
   name: "changeArrowhead",
   label: "Change arrowheads",
   trackEvent: false,
-  perform: (
+  perform: (elements, appState, value) => {
-    elements,
+    invariant(value, "actionChangeArrowhead: value must be defined");
-    appState,
+
-    value: { position: "start" | "end"; type: Arrowhead },
-  ) => {
     return {
       elements: changeProperty(elements, appState, (el) => {
         if (isLinearElement(el)) {
@@ -1969,7 +2013,7 @@ export const actionChangeArrowProperties = register({
   },
 });
 
-export const actionChangeArrowType = register({
+export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
   name: "changeArrowType",
   label: "Change arrow types",
   trackEvent: false,
@@ -1978,7 +2022,20 @@ export const actionChangeArrowType = register({
       if (!isArrowElement(el)) {
         return el;
       }
+      const elementsMap = app.scene.getNonDeletedElementsMap();
+      const startPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+        el,
+        0,
+        elementsMap,
+      );
+      const endPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+        el,
+        -1,
+        elementsMap,
+      );
       let newElement = newElementWith(el, {
+        x: value === ARROW_TYPE.elbow ? startPoint[0] : el.x,
+        y: value === ARROW_TYPE.elbow ? startPoint[1] : el.y,
         roundness:
           value === ARROW_TYPE.round
             ? {
@@ -1986,9 +2043,31 @@ export const actionChangeArrowType = register({
               }
             : null,
         elbowed: value === ARROW_TYPE.elbow,
+        angle: value === ARROW_TYPE.elbow ? (0 as Radians) : el.angle,
         points:
           value === ARROW_TYPE.elbow || el.elbowed
-            ? [el.points[0], el.points[el.points.length - 1]]
+            ? [
+                LinearElementEditor.pointFromAbsoluteCoords(
+                  {
+                    ...el,
+                    x: startPoint[0],
+                    y: startPoint[1],
+                    angle: 0 as Radians,
+                  },
+                  startPoint,
+                  elementsMap,
+                ),
+                LinearElementEditor.pointFromAbsoluteCoords(
+                  {
+                    ...el,
+                    x: startPoint[0],
+                    y: startPoint[1],
+                    angle: 0 as Radians,
+                  },
+                  endPoint,
+                  elementsMap,
+                ),
+              ]
             : el.points,
       });
 
@@ -2070,7 +2149,13 @@ export const actionChangeArrowType = register({
             newElement.startBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (startElement) {
-            bindLinearElement(newElement, startElement, "start", app.scene);
+            bindBindingElement(
+              newElement,
+              startElement,
+              appState.bindMode === "inside" ? "inside" : "orbit",
+              "start",
+              app.scene,
+            );
           }
         }
         if (newElement.endBinding) {
@@ -2078,7 +2163,13 @@ export const actionChangeArrowType = register({
             newElement.endBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (endElement) {
-            bindLinearElement(newElement, endElement, "end", app.scene);
+            bindBindingElement(
+              newElement,
+              endElement,
+              appState.bindMode === "inside" ? "inside" : "orbit",
+              "end",
+              app.scene,
+            );
           }
         }
       }

packages/excalidraw/actions/actionToggleZenMode.tsx

@@ -25,8 +25,11 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
-  predicate: (elements, appState, appProps) => {
+  predicate: (elements, appState, appProps, app) => {
-    return typeof appProps.zenModeEnabled === "undefined";
+    return (
+      app.editorInterface.formFactor !== "phone" &&
+      typeof appProps.zenModeEnabled === "undefined"
+    );
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,

packages/excalidraw/actions/manager.tsx

@@ -37,7 +37,9 @@ const trackAction = (
           trackEvent(
             action.trackEvent.category,
             action.trackEvent.action || action.name,
-            `${source} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
+            `${source} (${
+              app.editorInterface.formFactor === "phone" ? "mobile" : "desktop"
+            })`,
           );
         }
       }

packages/excalidraw/actions/register.ts

@@ -2,7 +2,12 @@ import type { Action } from "./types";
 
 export let actions: readonly Action[] = [];
 
-export const register = <T extends Action>(action: T) => {
+export const register = <
+  TData extends any,
+  T extends Action<TData> = Action<TData>,
+>(
+  action: T,
+) => {
   actions = actions.concat(action);
   return action as T & {
     keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];

packages/excalidraw/actions/types.ts

@@ -32,10 +32,10 @@ export type ActionResult =
     }
   | false;
 
-type ActionFn = (
+type ActionFn<TData = any> = (
   elements: readonly OrderedExcalidrawElement[],
   appState: Readonly<AppState>,
-  formData: any,
+  formData: TData | undefined,
   app: AppClassProperties,
 ) => ActionResult | Promise<ActionResult>;
 
@@ -158,7 +158,7 @@ export type PanelComponentProps = {
   ) => React.JSX.Element | null;
 };
 
-export interface Action {
+export interface Action<TData = any> {
   name: ActionName;
   label:
     | string
@@ -175,7 +175,7 @@ export interface Action {
         elements: readonly ExcalidrawElement[],
       ) => React.ReactNode);
   PanelComponent?: React.FC<PanelComponentProps>;
-  perform: ActionFn;
+  perform: ActionFn<TData>;
   keyPriority?: number;
   keyTest?: (
     event: React.KeyboardEvent | KeyboardEvent,

packages/excalidraw/appState.ts

@@ -101,7 +101,7 @@ export const getDefaultAppState = (): Omit<
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
     },
     startBoundElement: null,
-    suggestedBindings: [],
+    suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
     editingFrame: null,
@@ -128,7 +128,7 @@ export const getDefaultAppState = (): Omit<
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
-    stylesPanelMode: "full",
+    bindMode: "orbit",
   };
 };
 
@@ -232,7 +232,7 @@ const APP_STATE_STORAGE_CONF = (<
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
-  suggestedBindings: { browser: false, export: false, server: false },
+  suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
   editingFrame: { browser: false, export: false, server: false },
@@ -255,7 +255,7 @@ const APP_STATE_STORAGE_CONF = (<
   searchMatches: { browser: false, export: false, server: false },
   lockedMultiSelections: { browser: true, export: true, server: true },
   activeLockedId: { browser: false, export: false, server: false },
-  stylesPanelMode: { browser: false, export: false, server: false },
+  bindMode: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

packages/excalidraw/components/Actions.tsx

@@ -52,11 +52,17 @@ import { getFormValue } from "../actions/actionProperties";
 
 import { useTextEditorFocus } from "../hooks/useTextEditorFocus";
 
+import { actionToggleViewMode } from "../actions/actionToggleViewMode";
+
 import { getToolbarTools } from "./shapes";
 
 import "./Actions.scss";
 
-import { useDevice, useExcalidrawContainer } from "./App";
+import {
+  useEditorInterface,
+  useStylesPanelMode,
+  useExcalidrawContainer,
+} from "./App";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { ToolPopover } from "./ToolPopover";
@@ -78,6 +84,7 @@ import {
   adjustmentsIcon,
   DotsHorizontalIcon,
   SelectionIcon,
+  pencilIcon,
 } from "./icons";
 
 import { Island } from "./Island";
@@ -163,7 +170,7 @@ export const SelectedShapeActions = ({
   const isEditingTextOrNewElement = Boolean(
     appState.editingTextElement || appState.newElement,
   );
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
@@ -311,8 +318,10 @@ export const SelectedShapeActions = ({
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
-            {!device.editor.isMobile && renderAction("duplicateSelection")}
+            {editorInterface.formFactor !== "phone" &&
-            {!device.editor.isMobile && renderAction("deleteSelectedElements")}
+              renderAction("duplicateSelection")}
+            {editorInterface.formFactor !== "phone" &&
+              renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
@@ -1075,6 +1084,9 @@ export const ShapesSwitcher = ({
   UIOptions: AppProps["UIOptions"];
 }) => {
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
+  const stylesPanelMode = useStylesPanelMode();
+  const isFullStylesPanel = stylesPanelMode === "full";
+  const isCompactStylesPanel = stylesPanelMode === "compact";
 
   const SELECTION_TOOLS = [
     {
@@ -1092,7 +1104,7 @@ export const ShapesSwitcher = ({
   const frameToolSelected = activeTool.type === "frame";
   const laserToolSelected = activeTool.type === "laser";
   const lassoToolSelected =
-    app.state.stylesPanelMode === "full" &&
+    isFullStylesPanel &&
     activeTool.type === "lasso" &&
     app.state.preferredSelectionTool.type !== "lasso";
 
@@ -1125,7 +1137,7 @@ export const ShapesSwitcher = ({
           // use a ToolPopover for selection/lasso toggle as well
           if (
             (value === "selection" || value === "lasso") &&
-            app.state.stylesPanelMode === "compact"
+            isCompactStylesPanel
           ) {
             return (
               <ToolPopover
@@ -1259,7 +1271,7 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.laser")}
           </DropdownMenu.Item>
-          {app.state.stylesPanelMode === "full" && (
+          {isFullStylesPanel && (
             <DropdownMenu.Item
               onSelect={() => app.setActiveTool({ type: "lasso" })}
               icon={LassoIcon}
@@ -1329,7 +1341,7 @@ export const UndoRedoActions = ({
   </div>
 );
 
-export const ExitZenModeAction = ({
+export const ExitZenModeButton = ({
   actionManager,
   showExitZenModeBtn,
 }: {
@@ -1346,3 +1358,17 @@ export const ExitZenModeAction = ({
     {t("buttons.exitZenMode")}
   </button>
 );
+
+export const ExitViewModeButton = ({
+  actionManager,
+}: {
+  actionManager: ActionManager;
+}) => (
+  <button
+    type="button"
+    className="disable-view-mode"
+    onClick={() => actionManager.executeAction(actionToggleViewMode)}
+  >
+    {pencilIcon}
+  </button>
+);

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -6,7 +6,7 @@ import { KEYS } from "@excalidraw/common";
 import { getShortcutKey } from "../..//shortcut";
 import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
-import { useDevice } from "../App";
+import { useEditorInterface } from "../App";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { eyeDropperIcon } from "../icons";
 
@@ -30,7 +30,7 @@ export const ColorInput = ({
   colorPickerType,
   placeholder,
 }: ColorInputProps) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const [innerValue, setInnerValue] = useState(color);
   const [activeSection, setActiveColorPickerSection] = useAtom(
     activeColorPickerSectionAtom,
@@ -99,7 +99,7 @@ export const ColorInput = ({
         placeholder={placeholder}
       />
       {/* TODO reenable on mobile with a better UX */}
-      {!device.editor.isMobile && (
+      {editorInterface.formFactor !== "phone" && (
         <>
           <div
             style={{

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -15,7 +15,7 @@ import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
-import { useExcalidrawContainer } from "../App";
+import { useExcalidrawContainer, useStylesPanelMode } from "../App";
 import { ButtonSeparator } from "../ButtonSeparator";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
@@ -73,7 +73,6 @@ interface ColorPickerProps {
   palette?: ColorPaletteCustom | null;
   topPicks?: ColorTuple;
   updateData: (formData?: any) => void;
-  compactMode?: boolean;
 }
 
 const ColorPickerPopupContent = ({
@@ -100,6 +99,9 @@ const ColorPickerPopupContent = ({
   getOpenPopup: () => AppState["openPopup"];
 }) => {
   const { container } = useExcalidrawContainer();
+  const stylesPanelMode = useStylesPanelMode();
+  const isCompactMode = stylesPanelMode !== "full";
+  const isMobileMode = stylesPanelMode === "mobile";
   const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
 
   const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
@@ -216,11 +218,8 @@ const ColorPickerPopupContent = ({
           type={type}
           elements={elements}
           updateData={updateData}
-          showTitle={
+          showTitle={isCompactMode}
-            appState.stylesPanelMode === "compact" ||
+          showHotKey={!isMobileMode}
-            appState.stylesPanelMode === "mobile"
-          }
-          showHotKey={appState.stylesPanelMode !== "mobile"}
         >
           {colorInputJSX}
         </Picker>
@@ -235,7 +234,6 @@ const ColorPickerTrigger = ({
   label,
   color,
   type,
-  stylesPanelMode,
   mode = "background",
   onToggle,
   editingTextElement,
@@ -243,11 +241,13 @@ const ColorPickerTrigger = ({
   color: string | null;
   label: string;
   type: ColorPickerType;
-  stylesPanelMode?: AppState["stylesPanelMode"];
   mode?: "background" | "stroke";
   onToggle: () => void;
   editingTextElement?: boolean;
 }) => {
+  const stylesPanelMode = useStylesPanelMode();
+  const isCompactMode = stylesPanelMode !== "full";
+  const isMobileMode = stylesPanelMode === "mobile";
   const handleClick = (e: React.MouseEvent) => {
     // use pointerdown so we run before outside-close logic
     e.preventDefault();
@@ -268,9 +268,8 @@ const ColorPickerTrigger = ({
         "is-transparent": !color || color === "transparent",
         "has-outline":
           !color || !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
-        "compact-sizing":
+        "compact-sizing": isCompactMode,
-          stylesPanelMode === "compact" || stylesPanelMode === "mobile",
+        "mobile-border": isMobileMode,
-        "mobile-border": stylesPanelMode === "mobile",
       })}
       aria-label={label}
       style={color ? { "--swatch-color": color } : undefined}
@@ -283,22 +282,20 @@ const ColorPickerTrigger = ({
       onClick={handleClick}
     >
       <div className="color-picker__button-outline">{!color && slashIcon}</div>
-      {(stylesPanelMode === "compact" || stylesPanelMode === "mobile") &&
+      {isCompactMode && color && mode === "stroke" && (
-        color &&
+        <div className="color-picker__button-background">
-        mode === "stroke" && (
+          <span
-          <div className="color-picker__button-background">
+            style={{
-            <span
+              color:
-              style={{
+                color && isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
-                color:
+                  ? "#fff"
-                  color && isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
+                  : "#111",
-                    ? "#fff"
+            }}
-                    : "#111",
+          >
-              }}
+            {strokeIcon}
-            >
+          </span>
-              {strokeIcon}
+        </div>
-            </span>
+      )}
-          </div>
-        )}
     </Popover.Trigger>
   );
 };
@@ -318,10 +315,8 @@ export const ColorPicker = ({
   useEffect(() => {
     openRef.current = appState.openPopup;
   }, [appState.openPopup]);
-  const compactMode =
+  const stylesPanelMode = useStylesPanelMode();
-    type !== "canvasBackground" &&
+  const isCompactMode = stylesPanelMode !== "full";
-    (appState.stylesPanelMode === "compact" ||
-      appState.stylesPanelMode === "mobile");
 
   return (
     <div>
@@ -329,10 +324,10 @@ export const ColorPicker = ({
         role="dialog"
         aria-modal="true"
         className={clsx("color-picker-container", {
-          "color-picker-container--no-top-picks": compactMode,
+          "color-picker-container--no-top-picks": isCompactMode,
         })}
       >
-        {!compactMode && (
+        {!isCompactMode && (
           <TopPicks
             activeColor={color}
             onChange={onChange}
@@ -340,7 +335,7 @@ export const ColorPicker = ({
             topPicks={topPicks}
           />
         )}
-        {!compactMode && <ButtonSeparator />}
+        {!isCompactMode && <ButtonSeparator />}
         <Popover.Root
           open={appState.openPopup === type}
           onOpenChange={(open) => {
@@ -354,7 +349,6 @@ export const ColorPicker = ({
             color={color}
             label={label}
             type={type}
-            stylesPanelMode={appState.stylesPanelMode}
             mode={type === "elementStroke" ? "stroke" : "background"}
             editingTextElement={!!appState.editingTextElement}
             onToggle={() => {

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -903,7 +903,7 @@ function CommandPaletteInner({
         ref={inputRef}
       />
 
-      {!app.device.viewport.isMobile && (
+      {app.editorInterface.formFactor !== "phone" && (
         <div className="shortcuts-wrapper">
           <CommandShortcutHint shortcut="↑↓">
             {t("commandPalette.shortcuts.select")}
@@ -937,7 +937,7 @@ function CommandPaletteInner({
               onClick={(event) => executeCommand(lastUsed, event)}
               disabled={!isCommandAvailable(lastUsed)}
               onMouseMove={() => setCurrentCommand(lastUsed)}
-              showShortcut={!app.device.viewport.isMobile}
+              showShortcut={app.editorInterface.formFactor !== "phone"}
               appState={uiAppState}
             />
           </div>
@@ -955,7 +955,7 @@ function CommandPaletteInner({
                     isSelected={command.label === currentCommand?.label}
                     onClick={(event) => executeCommand(command, event)}
                     onMouseMove={() => setCurrentCommand(command)}
-                    showShortcut={!app.device.viewport.isMobile}
+                    showShortcut={app.editorInterface.formFactor !== "phone"}
                     appState={uiAppState}
                     size={category === "Library" ? "large" : "small"}
                   />
@@ -1034,7 +1034,7 @@ const CommandItem = ({
             size="var(--icon-size, 1rem)"
             icon={
               typeof command.icon === "function"
-                ? command.icon(appState)
+                ? command.icon(appState, [])
                 : command.icon
             }
           />

packages/excalidraw/components/CommandPalette/types.ts

@@ -1,6 +1,5 @@
 import type { ActionManager } from "../../actions/manager";
 import type { Action } from "../../actions/types";
-import type { UIAppState } from "../../types";
 
 export type CommandPaletteItem = {
   label: string;
@@ -12,7 +11,7 @@ export type CommandPaletteItem = {
    * (deburred name + keywords)
    */
   haystack?: string;
-  icon?: React.ReactNode | ((appState: UIAppState) => React.ReactNode);
+  icon?: Action["icon"];
   category: string;
   order?: number;
   predicate?: boolean | Action["predicate"];

packages/excalidraw/components/ConvertElementTypePopup.tsx

@@ -844,7 +844,7 @@ const convertElementType = <
       }),
     ) as typeof element;
 
-    updateBindings(nextElement, app.scene);
+    updateBindings(nextElement, app.scene, app.state);
 
     return nextElement;
   }

packages/excalidraw/components/Dialog.tsx

@@ -9,7 +9,7 @@ import { t } from "../i18n";
 
 import {
   useExcalidrawContainer,
-  useDevice,
+  useEditorInterface,
   useExcalidrawSetAppState,
 } from "./App";
 import { Island } from "./Island";
@@ -51,7 +51,7 @@ export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   const [lastActiveElement] = useState(document.activeElement);
   const { id } = useExcalidrawContainer();
-  const isFullscreen = useDevice().viewport.isMobile;
+  const isFullscreen = useEditorInterface().formFactor === "phone";
 
   useEffect(() => {
     if (!islandNode) {

packages/excalidraw/components/FilledButton.tsx

@@ -20,7 +20,7 @@ export type ButtonColor =
 export type ButtonSize = "medium" | "large";
 
 export type FilledButtonProps = {
-  label: string;
+  label?: string;
 
   children?: React.ReactNode;
   onClick?: (event: React.MouseEvent) => void;

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -20,7 +20,12 @@ import type { ValueOf } from "@excalidraw/common/utility-types";
 
 import { Fonts } from "../../fonts";
 import { t } from "../../i18n";
-import { useApp, useAppProps, useExcalidrawContainer } from "../App";
+import {
+  useApp,
+  useAppProps,
+  useExcalidrawContainer,
+  useStylesPanelMode,
+} from "../App";
 import { PropertiesPopover } from "../PropertiesPopover";
 import { QuickSearch } from "../QuickSearch";
 import { ScrollableList } from "../ScrollableList";
@@ -93,6 +98,7 @@ export const FontPickerList = React.memo(
     const app = useApp();
     const { fonts } = app;
     const { showDeprecatedFonts } = useAppProps();
+    const stylesPanelMode = useStylesPanelMode();
 
     const [searchTerm, setSearchTerm] = useState("");
     const inputRef = useRef<HTMLInputElement>(null);
@@ -338,7 +344,7 @@ export const FontPickerList = React.memo(
         onKeyDown={onKeyDown}
         preventAutoFocusOnTouch={!!app.state.editingTextElement}
       >
-        {app.state.stylesPanelMode === "full" && (
+        {stylesPanelMode === "full" && (
           <QuickSearch
             ref={inputRef}
             placeholder={t("quickSearch.placeholder")}

packages/excalidraw/components/HintViewer.tsx

@@ -11,6 +11,8 @@ import {
 
 import { isNodeInFlowchart } from "@excalidraw/element";
 
+import type { EditorInterface } from "@excalidraw/common";
+
 import { t } from "../i18n";
 import { getShortcutKey } from "../shortcut";
 import { isEraserActive } from "../appState";
@@ -18,12 +20,12 @@ import { isGridModeEnabled } from "../snapping";
 
 import "./HintViewer.scss";
 
-import type { AppClassProperties, Device, UIAppState } from "../types";
+import type { AppClassProperties, UIAppState } from "../types";
 
 interface HintViewerProps {
   appState: UIAppState;
   isMobile: boolean;
-  device: Device;
+  editorInterface: EditorInterface;
   app: AppClassProperties;
 }
 
@@ -35,7 +37,7 @@ const getTaggedShortcutKey = (key: string | string[]) =>
 const getHints = ({
   appState,
   isMobile,
-  device,
+  editorInterface,
   app,
 }: HintViewerProps): null | string | string[] => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
@@ -51,7 +53,7 @@ const getHints = ({
     });
   }
 
-  if (appState.openSidebar && !device.editor.canFitSidebar) {
+  if (appState.openSidebar && !editorInterface.canFitSidebar) {
     return null;
   }
 
@@ -60,6 +62,20 @@ const getHints = ({
       shortcut: getTaggedShortcutKey("Alt"),
     });
   }
+
+  const selectedElements = app.scene.getSelectedElements(appState);
+
+  // creating or dragging arrow point
+  if (
+    appState.selectedLinearElement?.isDragging &&
+    selectedElements[0]?.type === "arrow"
+  ) {
+    return t("hints.arrowBindModifiers", {
+      shortcut_1: getTaggedShortcutKey("Ctrl"),
+      shortcut_2: getTaggedShortcutKey("Alt"),
+    });
+  }
+
   if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (multiMode) {
       return t("hints.linearElementMulti", {
@@ -87,8 +103,6 @@ const getHints = ({
     return t("hints.embeddable");
   }
 
-  const selectedElements = app.scene.getSelectedElements(appState);
-
   if (
     isResizing &&
     lastPointerDownWith === "mouse" &&
@@ -225,13 +239,13 @@ const getHints = ({
 export const HintViewer = ({
   appState,
   isMobile,
-  device,
+  editorInterface,
   app,
 }: HintViewerProps) => {
   const hints = getHints({
     appState,
     isMobile,
-    device,
+    editorInterface,
     app,
   });
 

packages/excalidraw/components/IconPicker.tsx

@@ -8,7 +8,7 @@ import { atom, useAtom } from "../editor-jotai";
 import { getLanguage, t } from "../i18n";
 
 import Collapsible from "./Stats/Collapsible";
-import { useDevice, useExcalidrawContainer } from "./App";
+import { useEditorInterface, useExcalidrawContainer } from "./App";
 
 import "./IconPicker.scss";
 
@@ -38,7 +38,7 @@ function Picker<T>({
   onClose: () => void;
   numberOfOptionsToAlwaysShow?: number;
 }) {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const { container } = useExcalidrawContainer();
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -153,7 +153,7 @@ function Picker<T>({
     );
   };
 
-  const isMobile = device.editor.isMobile;
+  const isMobile = editorInterface.formFactor === "phone";
 
   return (
     <Popover.Content

packages/excalidraw/components/LayerUI.scss

@@ -120,4 +120,53 @@
       margin-bottom: auto;
     }
   }
+
+  .disable-view-mode {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    align-items: center;
+    border: 1px solid var(--color-primary);
+    padding: 0.5rem;
+    border-radius: var(--border-radius-lg);
+    background-color: var(--island-bg-color);
+    text-decoration: none !important;
+
+    font-family: var(--ui-font);
+    font-size: 0.8333rem;
+    box-sizing: border-box;
+
+    width: var(--mobile-action-button-size, var(--default-button-size));
+    height: var(--mobile-action-button-size, var(--default-button-size));
+
+    border: none;
+    box-shadow: 0 0 0 1px var(--color-surface-lowest);
+    background-color: var(--color-surface-low);
+    color: var(--button-color, var(--color-on-surface)) !important;
+
+    &:active {
+      box-shadow: 0 0 0 1px var(--color-brand-active);
+    }
+
+    &:hover {
+      background-color: var(--color-primary);
+      color: white !important;
+    }
+    &:active {
+      background-color: var(--color-primary-darker);
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .theme--dark {
+    .plus-banner {
+      &:hover {
+        color: black !important;
+      }
+    }
+  }
 }

packages/excalidraw/components/LayerUI.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import {
   CLASSES,
   DEFAULT_SIDEBAR,
-  MQ_MIN_WIDTH_DESKTOP,
   TOOL_TYPE,
   arrayToMap,
   capitalizeString,
@@ -46,9 +45,9 @@ import Footer from "./footer/Footer";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
-import { useDevice } from "./App";
+import { useEditorInterface, useStylesPanelMode } from "./App";
 import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
-import { LibraryIcon } from "./icons";
+import { sidebarRightIcon } from "./icons";
 import { DefaultSidebar } from "./DefaultSidebar";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
@@ -161,27 +160,28 @@ const LayerUI = ({
   isCollaborating,
   generateLinkForSelection,
 }: LayerUIProps) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
+  const stylesPanelMode = useStylesPanelMode();
+  const isCompactStylesPanel = stylesPanelMode === "compact";
   const tunnels = useInitializeTunnels();
 
-  const spacing =
+  const spacing = isCompactStylesPanel
-    appState.stylesPanelMode === "compact"
+    ? {
-      ? {
+        menuTopGap: 4,
-          menuTopGap: 4,
+        toolbarColGap: 4,
-          toolbarColGap: 4,
+        toolbarRowGap: 1,
-          toolbarRowGap: 1,
+        toolbarInnerRowGap: 0.5,
-          toolbarInnerRowGap: 0.5,
+        islandPadding: 1,
-          islandPadding: 1,
+        collabMarginLeft: 8,
-          collabMarginLeft: 8,
+      }
-        }
+    : {
-      : {
+        menuTopGap: 6,
-          menuTopGap: 6,
+        toolbarColGap: 4,
-          toolbarColGap: 4,
+        toolbarRowGap: 1,
-          toolbarRowGap: 1,
+        toolbarInnerRowGap: 1,
-          toolbarInnerRowGap: 1,
+        islandPadding: 1,
-          islandPadding: 1,
+        collabMarginLeft: 8,
-          collabMarginLeft: 8,
+      };
-        };
 
   const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
 
@@ -236,7 +236,7 @@ const LayerUI = ({
   );
 
   const renderSelectedShapeActions = () => {
-    const isCompactMode = appState.stylesPanelMode === "compact";
+    const isCompactMode = isCompactStylesPanel;
 
     return (
       <Section
@@ -308,7 +308,7 @@ const LayerUI = ({
             <div
               className={clsx("selected-shape-actions-container", {
                 "selected-shape-actions-container--compact":
-                  appState.stylesPanelMode === "compact",
+                  isCompactStylesPanel,
               })}
             >
               {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
@@ -333,14 +333,13 @@ const LayerUI = ({
                           padding={spacing.islandPadding}
                           className={clsx("App-toolbar", {
                             "zen-mode": appState.zenModeEnabled,
-                            "App-toolbar--compact":
+                            "App-toolbar--compact": isCompactStylesPanel,
-                              appState.stylesPanelMode === "compact",
                           })}
                         >
                           <HintViewer
                             appState={appState}
-                            isMobile={device.editor.isMobile}
+                            isMobile={editorInterface.formFactor === "phone"}
-                            device={device}
+                            editorInterface={editorInterface}
                             app={app}
                           />
                           {heading}
@@ -406,8 +405,7 @@ const LayerUI = ({
               "layer-ui__wrapper__top-right zen-mode-transition",
               {
                 "transition-right": appState.zenModeEnabled,
-                "layer-ui__wrapper__top-right--compact":
+                "layer-ui__wrapper__top-right--compact": isCompactStylesPanel,
-                  appState.stylesPanelMode === "compact",
               },
             )}
           >
@@ -417,7 +415,10 @@ const LayerUI = ({
                 userToFollow={appState.userToFollow?.socketId || null}
               />
             )}
-            {renderTopRightUI?.(device.editor.isMobile, appState)}
+            {renderTopRightUI?.(
+              editorInterface.formFactor === "phone",
+              appState,
+            )}
             {!appState.viewModeEnabled &&
               appState.openDialog?.name !== "elementLinkSelector" &&
               // hide button when sidebar docked
@@ -448,7 +449,9 @@ const LayerUI = ({
           trackEvent(
             "sidebar",
             `toggleDock (${docked ? "dock" : "undock"})`,
-            `(${device.editor.isMobile ? "mobile" : "desktop"})`,
+            `(${
+              editorInterface.formFactor === "phone" ? "mobile" : "desktop"
+            })`,
           );
         }}
       />
@@ -469,23 +472,21 @@ const LayerUI = ({
       <DefaultMainMenu UIOptions={UIOptions} />
       <DefaultSidebar.Trigger
         __fallback
-        icon={LibraryIcon}
+        icon={sidebarRightIcon}
         title={capitalizeString(t("toolBar.library"))}
         onToggle={(open) => {
           if (open) {
             trackEvent(
               "sidebar",
               `${DEFAULT_SIDEBAR.name} (open)`,
-              `button (${device.editor.isMobile ? "mobile" : "desktop"})`,
+              `button (${
+                editorInterface.formFactor === "phone" ? "mobile" : "desktop"
+              })`,
             );
           }
         }}
         tab={DEFAULT_SIDEBAR.defaultTab}
-      >
+      />
-        {appState.stylesPanelMode === "full" &&
-          appState.width >= MQ_MIN_WIDTH_DESKTOP &&
-          t("toolBar.library")}
-      </DefaultSidebar.Trigger>
       <DefaultOverwriteConfirmDialog />
       {appState.openDialog?.name === "ttd" && <TTDDialog __fallback />}
       {/* ------------------------------------------------------------------ */}
@@ -496,7 +497,7 @@ const LayerUI = ({
           {appState.errorMessage}
         </ErrorDialog>
       )}
-      {eyeDropperState && !device.editor.isMobile && (
+      {eyeDropperState && editorInterface.formFactor !== "phone" && (
         <EyeDropper
           colorPickerType={eyeDropperState.colorPickerType}
           onCancel={() => {
@@ -575,7 +576,7 @@ const LayerUI = ({
           }
         />
       )}
-      {device.editor.isMobile && (
+      {editorInterface.formFactor === "phone" && (
         <MobileMenu
           app={app}
           appState={appState}
@@ -593,14 +594,14 @@ const LayerUI = ({
           UIOptions={UIOptions}
         />
       )}
-      {!device.editor.isMobile && (
+      {editorInterface.formFactor !== "phone" && (
         <>
           <div
             className="layer-ui__wrapper"
             style={
               appState.openSidebar &&
               isSidebarDocked &&
-              device.editor.canFitSidebar
+              editorInterface.canFitSidebar
                 ? { width: `calc(100% - var(--right-sidebar-width))` }
                 : {}
             }
@@ -645,14 +646,8 @@ const LayerUI = ({
 };
 
 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const {
+  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
-    suggestedBindings,
+    appState;
-    startBoundElement,
-    cursorButton,
-    scrollX,
-    scrollY,
-    ...ret
-  } = appState;
   return ret;
 };
 

packages/excalidraw/components/LibraryMenuItems.tsx

@@ -32,7 +32,7 @@ import "./LibraryMenuItems.scss";
 
 import { TextField } from "./TextField";
 
-import { useDevice } from "./App";
+import { useEditorInterface } from "./App";
 
 import { Button } from "./Button";
 
@@ -75,7 +75,7 @@ export default function LibraryMenuItems({
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const libraryContainerRef = useRef<HTMLDivElement>(null);
   const scrollPosition = useScrollPosition<HTMLDivElement>(libraryContainerRef);
 
@@ -392,7 +392,7 @@ export default function LibraryMenuItems({
             ref={searchInputRef}
             type="search"
             className={clsx("library-menu-items-container__search", {
-              hideCancelButton: !device.editor.isMobile,
+              hideCancelButton: editorInterface.formFactor !== "phone",
             })}
             placeholder={t("library.search.inputPlaceholder")}
             value={searchInputValue}

packages/excalidraw/components/LibraryUnit.tsx

@@ -3,7 +3,7 @@ import { memo, useRef, useState } from "react";
 
 import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
 
-import { useDevice } from "./App";
+import { useEditorInterface } from "./App";
 import { CheckboxItem } from "./CheckboxItem";
 import { PlusIcon } from "./icons";
 
@@ -36,7 +36,7 @@ export const LibraryUnit = memo(
     const svg = useLibraryItemSvg(id, elements, svgCache, ref);
 
     const [isHovered, setIsHovered] = useState(false);
-    const isMobile = useDevice().editor.isMobile;
+    const isMobile = useEditorInterface().formFactor === "phone";
     const adder = isPending && (
       <div className="library-unit__adder">{PlusIcon}</div>
     );

packages/excalidraw/components/LinkButton.tsx

@@ -0,0 +1,15 @@
+import { FilledButton } from "./FilledButton";
+
+export const LinkButton = ({
+  children,
+  href,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <a href={href} target="_blank" rel="noopener" className="link-button">
+      <FilledButton>{children}</FilledButton>
+    </a>
+  );
+};

packages/excalidraw/components/MobileMenu.tsx

@@ -7,12 +7,14 @@ import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 
-import { MobileShapeActions } from "./Actions";
+import { ExitViewModeButton, MobileShapeActions } from "./Actions";
 import { MobileToolBar } from "./MobileToolBar";
 import { FixedSideContainer } from "./FixedSideContainer";
 
 import { Island } from "./Island";
 
+import { PenModeButton } from "./PenModeButton";
+
 import type { ActionManager } from "../actions/manager";
 import type {
   AppClassProperties,
@@ -58,6 +60,7 @@ export const MobileMenu = ({
   renderWelcomeScreen,
   UIOptions,
   app,
+  onPenModeToggle,
 }: MobileMenuProps) => {
   const {
     WelcomeScreenCenterTunnel,
@@ -65,8 +68,29 @@ export const MobileMenu = ({
     DefaultSidebarTriggerTunnel,
   } = useTunnels();
   const renderAppTopBar = () => {
-    const topRightUI = renderTopRightUI?.(true, appState) ?? (
+    if (appState.openDialog?.name === "elementLinkSelector") {
-      <DefaultSidebarTriggerTunnel.Out />
+      return null;
+    }
+
+    const topRightUI = (
+      <div className="excalidraw-ui-top-right">
+        {renderTopRightUI?.(true, appState) ??
+          (!appState.viewModeEnabled && (
+            <>
+              <PenModeButton
+                checked={appState.penMode}
+                onChange={() => onPenModeToggle(null)}
+                title={t("toolBar.penMode")}
+                isMobile
+                penDetected={appState.penDetected}
+              />
+              <DefaultSidebarTriggerTunnel.Out />
+            </>
+          ))}
+        {appState.viewModeEnabled && (
+          <ExitViewModeButton actionManager={actionManager} />
+        )}
+      </div>
     );
 
     const topLeftUI = (
@@ -76,13 +100,6 @@ export const MobileMenu = ({
       </div>
     );
 
-    if (
-      appState.viewModeEnabled ||
-      appState.openDialog?.name === "elementLinkSelector"
-    ) {
-      return <div className="App-toolbar-content">{topLeftUI}</div>;
-    }
-
     return (
       <div
         className="App-toolbar-content"
@@ -117,41 +134,43 @@ export const MobileMenu = ({
         {renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
       </div>
 
-      <div
+      {!appState.viewModeEnabled && (
-        className="App-bottom-bar"
+        <div
-        style={{
+          className="App-bottom-bar"
-          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN,
+          style={{
-        }}
+            marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN,
-      >
+          }}
-        <MobileShapeActions
+        >
-          appState={appState}
+          <MobileShapeActions
-          elementsMap={app.scene.getNonDeletedElementsMap()}
+            appState={appState}
-          renderAction={actionManager.renderAction}
+            elementsMap={app.scene.getNonDeletedElementsMap()}
-          app={app}
+            renderAction={actionManager.renderAction}
-          setAppState={setAppState}
+            app={app}
-        />
+            setAppState={setAppState}
+          />
 
-        <Island className="App-toolbar">
+          <Island className="App-toolbar">
-          {!appState.viewModeEnabled &&
+            {!appState.viewModeEnabled &&
-            appState.openDialog?.name !== "elementLinkSelector" &&
+              appState.openDialog?.name !== "elementLinkSelector" &&
-            renderToolbar()}
+              renderToolbar()}
-          {appState.scrolledOutside &&
+            {appState.scrolledOutside &&
-            !appState.openMenu &&
+              !appState.openMenu &&
-            !appState.openSidebar && (
+              !appState.openSidebar && (
-              <button
+                <button
-                type="button"
+                  type="button"
-                className="scroll-back-to-content"
+                  className="scroll-back-to-content"
-                onClick={() => {
+                  onClick={() => {
-                  setAppState((appState) => ({
+                    setAppState((appState) => ({
-                    ...calculateScrollCenter(elements, appState),
+                      ...calculateScrollCenter(elements, appState),
-                  }));
+                    }));
-                }}
+                  }}
-              >
+                >
-                {t("buttons.scrollBackToContent")}
+                  {t("buttons.scrollBackToContent")}
-              </button>
+                </button>
-            )}
+              )}
-        </Island>
+          </Island>
-      </div>
+        </div>
+      )}
 
       <FixedSideContainer side="top" className="App-top-bar">
         {renderAppTopBar()}

packages/excalidraw/components/MobileToolBar.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import clsx from "clsx";
 
 import { KEYS, capitalizeString } from "@excalidraw/common";
@@ -101,8 +101,6 @@ export const MobileToolBar = ({
     "arrow" | "line"
   >("arrow");
 
-  const toolbarRef = useRef<HTMLDivElement>(null);
-
   // keep lastActiveGenericShape in sync with active tool if user switches via other UI
   useEffect(() => {
     if (
@@ -143,8 +141,8 @@ export const MobileToolBar = ({
     }
   };
 
-  const toolbarWidth =
+  const [toolbarWidth, setToolbarWidth] = useState(0);
-    toolbarRef.current?.getBoundingClientRect()?.width ?? 0 - 8;
+
   const WIDTH = 36;
   const GAP = 4;
 
@@ -164,6 +162,9 @@ export const MobileToolBar = ({
     "laser",
     "magicframe",
   ].filter((tool) => {
+    if (showTextToolOutside && tool === "text") {
+      return false;
+    }
     if (showImageToolOutside && tool === "image") {
       return false;
     }
@@ -174,21 +175,30 @@ export const MobileToolBar = ({
   });
   const extraToolSelected = extraTools.includes(activeTool.type);
   const extraIcon = extraToolSelected
-    ? activeTool.type === "frame"
+    ? activeTool.type === "text"
+      ? TextIcon
+      : activeTool.type === "image"
+      ? ImageIcon
+      : activeTool.type === "frame"
       ? frameToolIcon
       : activeTool.type === "embeddable"
       ? EmbedIcon
       : activeTool.type === "laser"
       ? laserPointerToolIcon
-      : activeTool.type === "text"
-      ? TextIcon
       : activeTool.type === "magicframe"
       ? MagicIcon
       : extraToolsIcon
     : extraToolsIcon;
 
   return (
-    <div className="mobile-toolbar" ref={toolbarRef}>
+    <div
+      className="mobile-toolbar"
+      ref={(div) => {
+        if (div) {
+          setToolbarWidth(div.getBoundingClientRect().width);
+        }
+      }}
+    >
       {/* Hand Tool */}
       <HandButton
         checked={isHandToolActive(app.state)}

packages/excalidraw/components/PropertiesPopover.tsx

@@ -4,7 +4,7 @@ import React, { type ReactNode } from "react";
 
 import { isInteractive } from "@excalidraw/common";
 
-import { useDevice } from "./App";
+import { useEditorInterface } from "./App";
 import { Island } from "./Island";
 
 interface PropertiesPopoverProps {
@@ -39,9 +39,9 @@ export const PropertiesPopover = React.forwardRef<
     },
     ref,
   ) => {
-    const device = useDevice();
+    const editorInterface = useEditorInterface();
     const isMobilePortrait =
-      device.editor.isMobile && !device.viewport.isLandscape;
+      editorInterface.formFactor === "phone" && !editorInterface.isLandscape;
 
     return (
       <Popover.Portal container={container}>
@@ -56,7 +56,8 @@ export const PropertiesPopover = React.forwardRef<
           collisionBoundary={container ?? undefined}
           style={{
             zIndex: "var(--zIndex-ui-styles-popup)",
-            marginLeft: device.editor.isMobile ? "0.5rem" : undefined,
+            marginLeft:
+              editorInterface.formFactor === "phone" ? "0.5rem" : undefined,
           }}
           onPointerLeave={onPointerLeave}
           onKeyDown={onKeyDown}
@@ -64,7 +65,7 @@ export const PropertiesPopover = React.forwardRef<
           onPointerDownOutside={onPointerDownOutside}
           onOpenAutoFocus={(e) => {
             // prevent auto-focus on touch devices to avoid keyboard popup
-            if (preventAutoFocusOnTouch && device.isTouchScreen) {
+            if (preventAutoFocusOnTouch && editorInterface.isTouchScreen) {
               e.preventDefault();
             }
           }}

packages/excalidraw/components/Sidebar/Sidebar.tsx

@@ -20,7 +20,7 @@ import {
 import { useUIAppState } from "../../context/ui-appState";
 import { atom, useSetAtom } from "../../editor-jotai";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
-import { useDevice, useExcalidrawSetAppState } from "../App";
+import { useEditorInterface, useExcalidrawSetAppState } from "../App";
 import { Island } from "../Island";
 
 import { SidebarHeader } from "./SidebarHeader";
@@ -96,7 +96,7 @@ export const SidebarInner = forwardRef(
       return islandRef.current!;
     });
 
-    const device = useDevice();
+    const editorInterface = useEditorInterface();
 
     const closeLibrary = useCallback(() => {
       const isDialogOpen = !!document.querySelector(".Dialog");
@@ -117,11 +117,11 @@ export const SidebarInner = forwardRef(
           if ((event.target as Element).closest(".sidebar-trigger")) {
             return;
           }
-          if (!docked || !device.editor.canFitSidebar) {
+          if (!docked || !editorInterface.canFitSidebar) {
             closeLibrary();
           }
         },
-        [closeLibrary, docked, device.editor.canFitSidebar],
+        [closeLibrary, docked, editorInterface.canFitSidebar],
       ),
     );
 
@@ -129,7 +129,7 @@ export const SidebarInner = forwardRef(
       const handleKeyDown = (event: KeyboardEvent) => {
         if (
           event.key === KEYS.ESCAPE &&
-          (!docked || !device.editor.canFitSidebar)
+          (!docked || !editorInterface.canFitSidebar)
         ) {
           closeLibrary();
         }
@@ -138,7 +138,7 @@ export const SidebarInner = forwardRef(
       return () => {
         document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
       };
-    }, [closeLibrary, docked, device.editor.canFitSidebar]);
+    }, [closeLibrary, docked, editorInterface.canFitSidebar]);
 
     return (
       <Island

packages/excalidraw/components/Sidebar/SidebarHeader.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { useContext } from "react";
 
 import { t } from "../../i18n";
-import { useDevice } from "../App";
+import { useEditorInterface } from "../App";
 import { Button } from "../Button";
 import { Tooltip } from "../Tooltip";
 import { CloseIcon, PinIcon } from "../icons";
@@ -16,11 +16,11 @@ export const SidebarHeader = ({
   children?: React.ReactNode;
   className?: string;
 }) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const props = useContext(SidebarPropsContext);
 
   const renderDockButton = !!(
-    device.editor.canFitSidebar && props.shouldRenderDockButton
+    editorInterface.canFitSidebar && props.shouldRenderDockButton
   );
 
   return (

packages/excalidraw/components/Stats/Angle.tsx

@@ -34,6 +34,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
   shouldChangeByStepSize,
   nextValue,
   scene,
+  app,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   const origElement = originalElements[0];
@@ -48,7 +49,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
       scene.mutateElement(latestElement, {
         angle: nextAngle,
       });
-      updateBindings(latestElement, scene);
+      updateBindings(latestElement, scene, app.state);
 
       const boundTextElement = getBoundTextElement(latestElement, elementsMap);
       if (boundTextElement && !isArrowElement(latestElement)) {
@@ -74,7 +75,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
     scene.mutateElement(latestElement, {
       angle: nextAngle,
     });
-    updateBindings(latestElement, scene);
+    updateBindings(latestElement, scene, app.state);
 
     const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement && !isArrowElement(latestElement)) {

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -94,9 +94,7 @@ const resizeElementInGroup = (
   );
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
-    updateBoundElements(latestElement, scene, {
+    updateBoundElements(latestElement, scene);
-      newSize: { width: updates.width, height: updates.height },
-    });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
       scene.mutateElement(latestBoundTextElement, {

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -38,6 +38,7 @@ const moveElements = (
   originalElements: readonly ExcalidrawElement[],
   originalElementsMap: ElementsMap,
   scene: Scene,
+  appState: AppState,
 ) => {
   for (let i = 0; i < originalElements.length; i++) {
     const origElement = originalElements[i];
@@ -63,6 +64,7 @@ const moveElements = (
       newTopLeftY,
       origElement,
       scene,
+      appState,
       originalElementsMap,
       false,
     );
@@ -75,6 +77,7 @@ const moveGroupTo = (
   originalElements: ExcalidrawElement[],
   originalElementsMap: ElementsMap,
   scene: Scene,
+  appState: AppState,
 ) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   const [x1, y1, ,] = getCommonBounds(originalElements);
@@ -107,6 +110,7 @@ const moveGroupTo = (
         topLeftY + offsetY,
         origElement,
         scene,
+        appState,
         originalElementsMap,
         false,
       );
@@ -125,6 +129,7 @@ const handlePositionChange: DragInputCallbackType<
   property,
   scene,
   originalAppState,
+  app,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
 
@@ -152,6 +157,7 @@ const handlePositionChange: DragInputCallbackType<
           elementsInUnit.map((el) => el.original),
           originalElementsMap,
           scene,
+          app.state,
         );
       } else {
         const origElement = elementsInUnit[0]?.original;
@@ -178,6 +184,7 @@ const handlePositionChange: DragInputCallbackType<
             newTopLeftY,
             origElement,
             scene,
+            app.state,
             originalElementsMap,
             false,
           );
@@ -203,6 +210,7 @@ const handlePositionChange: DragInputCallbackType<
     originalElements,
     originalElementsMap,
     scene,
+    app.state,
   );
 
   scene.triggerUpdate();

packages/excalidraw/components/Stats/Position.tsx

@@ -34,6 +34,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
   property,
   scene,
   originalAppState,
+  app,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   const origElement = originalElements[0];
@@ -131,6 +132,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
       newTopLeftY,
       origElement,
       scene,
+      app.state,
       originalElementsMap,
     );
     return;
@@ -162,6 +164,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     newTopLeftY,
     origElement,
     scene,
+    app.state,
     originalElementsMap,
   );
 };

packages/excalidraw/components/Stats/index.tsx

@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState, memo } from "react";
 import { STATS_PANELS } from "@excalidraw/common";
 import { getCommonBounds } from "@excalidraw/element";
 import { getUncroppedWidthAndHeight } from "@excalidraw/element";
-import { isElbowArrow, isImageElement } from "@excalidraw/element";
+import { isImageElement } from "@excalidraw/element";
 
 import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
 
@@ -333,16 +333,14 @@ export const StatsInner = memo(
                           appState={appState}
                         />
                       </StatsRow>
-                      {!isElbowArrow(singleElement) && (
+                      <StatsRow>
-                        <StatsRow>
+                        <Angle
-                          <Angle
+                          property="angle"
-                            property="angle"
+                          element={singleElement}
-                            element={singleElement}
+                          scene={scene}
-                            scene={scene}
+                          appState={appState}
-                            appState={appState}
+                        />
-                          />
+                      </StatsRow>
-                        </StatsRow>
-                      )}
                       <StatsRow>
                         <FontSize
                           property="fontSize"

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

@@ -114,7 +114,7 @@ describe("binding with linear elements", () => {
     mouse.up(200, 100);
 
     UI.clickTool("arrow");
-    mouse.down(5, 0);
+    mouse.down(-5, 0);
     mouse.up(300, 50);
 
     elementStats = stats?.querySelector("#elementStats");
@@ -135,18 +135,7 @@ describe("binding with linear elements", () => {
     ) as HTMLInputElement;
     expect(linear.startBinding).not.toBe(null);
     expect(inputX).not.toBeNull();
-    UI.updateInput(inputX, String("204"));
+    UI.updateInput(inputX, String("186"));
-    expect(linear.startBinding).not.toBe(null);
-  });
-
-  it("should remain bound to linear element on small angle change", async () => {
-    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(linear.startBinding).not.toBe(null);
-    UI.updateInput(inputAngle, String("1"));
     expect(linear.startBinding).not.toBe(null);
   });
 
@@ -161,17 +150,6 @@ describe("binding with linear elements", () => {
     UI.updateInput(inputX, String("254"));
     expect(linear.startBinding).toBe(null);
   });
-
-  it("should remain bound to linear element on small angle change", async () => {
-    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
-      ".drag-input",
-    ) as HTMLInputElement;
-
-    expect(linear.startBinding).not.toBe(null);
-    UI.updateInput(inputAngle, String("45"));
-    expect(linear.startBinding).toBe(null);
-  });
 });
 
 // single element

packages/excalidraw/components/Stats/utils.ts

@@ -1,6 +1,10 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
-import { getBoundTextElement } from "@excalidraw/element";
+import {
+  getBoundTextElement,
+  isBindingElement,
+  unbindBindingElement,
+} from "@excalidraw/element";
 import { isFrameLikeElement } from "@excalidraw/element";
 
 import {
@@ -12,6 +16,7 @@ import {
 import { getFrameChildren } from "@excalidraw/element";
 
 import { updateBindings } from "@excalidraw/element";
+import { DRAGGING_THRESHOLD } from "@excalidraw/common";
 
 import type { Radians } from "@excalidraw/math";
 
@@ -110,9 +115,25 @@ export const moveElement = (
   newTopLeftY: number,
   originalElement: ExcalidrawElement,
   scene: Scene,
+  appState: AppState,
   originalElementsMap: ElementsMap,
   shouldInformMutation = true,
 ) => {
+  if (
+    isBindingElement(originalElement) &&
+    (originalElement.startBinding || originalElement.endBinding)
+  ) {
+    if (
+      Math.abs(newTopLeftX - originalElement.x) < DRAGGING_THRESHOLD &&
+      Math.abs(newTopLeftY - originalElement.y) < DRAGGING_THRESHOLD
+    ) {
+      return;
+    }
+
+    unbindBindingElement(originalElement, "start", scene);
+    unbindBindingElement(originalElement, "end", scene);
+  }
+
   const elementsMap = scene.getNonDeletedElementsMap();
   const latestElement = elementsMap.get(originalElement.id);
   if (!latestElement) {
@@ -145,7 +166,7 @@ export const moveElement = (
     },
     { informMutation: shouldInformMutation, isDragging: false },
   );
-  updateBindings(latestElement, scene);
+  updateBindings(latestElement, scene, appState);
 
   const boundTextElement = getBoundTextElement(
     originalElement,
@@ -203,7 +224,7 @@ export const moveElement = (
         },
         { informMutation: shouldInformMutation, isDragging: false },
       );
-      updateBindings(latestChildElement, scene, {
+      updateBindings(latestChildElement, scene, appState, {
         simultaneouslyUpdated: originalChildren,
       });
     });

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -4,7 +4,17 @@ import {
   CURSOR_TYPE,
   isShallowEqual,
   sceneCoordsToViewportCoords,
+  type EditorInterface,
 } from "@excalidraw/common";
+import { AnimationController } from "@excalidraw/excalidraw/renderer/animation";
+
+import type {
+  InteractiveCanvasRenderConfig,
+  InteractiveSceneRenderAnimationState,
+  InteractiveSceneRenderConfig,
+  RenderableElementsMap,
+  RenderInteractiveSceneCallback,
+} from "@excalidraw/excalidraw/scene/types";
 
 import type {
   NonDeletedExcalidrawElement,
@@ -12,15 +22,13 @@ import type {
 } from "@excalidraw/element/types";
 
 import { t } from "../../i18n";
-import { isRenderThrottlingEnabled } from "../../reactUtils";
 import { renderInteractiveScene } from "../../renderer/interactiveScene";
 
 import type {
-  InteractiveCanvasRenderConfig,
+  AppClassProperties,
-  RenderableElementsMap,
+  AppState,
-  RenderInteractiveSceneCallback,
+  InteractiveCanvasAppState,
-} from "../../scene/types";
+} from "../../types";
-import type { AppState, Device, InteractiveCanvasAppState } from "../../types";
 import type { DOMAttributes } from "react";
 
 type InteractiveCanvasProps = {
@@ -35,7 +43,8 @@ type InteractiveCanvasProps = {
   scale: number;
   appState: InteractiveCanvasAppState;
   renderScrollbars: boolean;
-  device: Device;
+  editorInterface: EditorInterface;
+  app: AppClassProperties;
   renderInteractiveSceneCallback: (
     data: RenderInteractiveSceneCallback,
   ) => void;
@@ -70,8 +79,11 @@ type InteractiveCanvasProps = {
   >;
 };
 
+export const INTERACTIVE_SCENE_ANIMATION_KEY = "animateInteractiveScene";
+
 const InteractiveCanvas = (props: InteractiveCanvasProps) => {
   const isComponentMounted = useRef(false);
+  const rendererParams = useRef(null as InteractiveSceneRenderConfig | null);
 
   useEffect(() => {
     if (!isComponentMounted.current) {
@@ -128,29 +140,60 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
         )) ||
       "#6965db";
 
-    renderInteractiveScene(
+    rendererParams.current = {
-      {
+      app: props.app,
-        canvas: props.canvas,
+      canvas: props.canvas,
-        elementsMap: props.elementsMap,
+      elementsMap: props.elementsMap,
-        visibleElements: props.visibleElements,
+      visibleElements: props.visibleElements,
-        selectedElements: props.selectedElements,
+      selectedElements: props.selectedElements,
-        allElementsMap: props.allElementsMap,
+      allElementsMap: props.allElementsMap,
-        scale: window.devicePixelRatio,
+      scale: window.devicePixelRatio,
-        appState: props.appState,
+      appState: props.appState,
-        renderConfig: {
+      renderConfig: {
-          remotePointerViewportCoords,
+        remotePointerViewportCoords,
-          remotePointerButton,
+        remotePointerButton,
-          remoteSelectedElementIds,
+        remoteSelectedElementIds,
-          remotePointerUsernames,
+        remotePointerUsernames,
-          remotePointerUserStates,
+        remotePointerUserStates,
-          selectionColor,
+        selectionColor,
-          renderScrollbars: props.renderScrollbars,
+        renderScrollbars: props.renderScrollbars,
-        },
+        // NOTE not memoized on so we don't rerender on cursor move
-        device: props.device,
+        lastViewportPosition: props.app.lastViewportPosition,
-        callback: props.renderInteractiveSceneCallback,
       },
-      isRenderThrottlingEnabled(),
+      editorInterface: props.editorInterface,
-    );
+      callback: props.renderInteractiveSceneCallback,
+      animationState: {
+        bindingHighlight: undefined,
+      },
+      deltaTime: 0,
+    };
+
+    if (!AnimationController.running(INTERACTIVE_SCENE_ANIMATION_KEY)) {
+      AnimationController.start<InteractiveSceneRenderAnimationState>(
+        INTERACTIVE_SCENE_ANIMATION_KEY,
+        ({ deltaTime, state }) => {
+          const nextAnimationState = renderInteractiveScene({
+            ...rendererParams.current!,
+            deltaTime,
+            animationState: state,
+          }).animationState;
+
+          if (nextAnimationState) {
+            for (const key in nextAnimationState) {
+              if (
+                nextAnimationState[
+                  key as keyof InteractiveSceneRenderAnimationState
+                ] !== undefined
+              ) {
+                return nextAnimationState;
+              }
+            }
+          }
+
+          return undefined;
+        },
+      );
+    }
   });
 
   return (
@@ -201,8 +244,9 @@ const getRelevantAppStateProps = (
   selectedGroupIds: appState.selectedGroupIds,
   selectedLinearElement: appState.selectedLinearElement,
   multiElement: appState.multiElement,
+  newElement: appState.newElement,
   isBindingEnabled: appState.isBindingEnabled,
-  suggestedBindings: appState.suggestedBindings,
+  suggestedBinding: appState.suggestedBinding,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,
   collaborators: appState.collaborators, // Necessary for collab. sessions
@@ -214,6 +258,10 @@ const getRelevantAppStateProps = (
   croppingElementId: appState.croppingElementId,
   searchMatches: appState.searchMatches,
   activeLockedId: appState.activeLockedId,
+  hoveredElementIds: appState.hoveredElementIds,
+  frameRendering: appState.frameRendering,
+  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+  exportScale: appState.exportScale,
 });
 
 const areEqual = (

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -99,6 +99,7 @@ const getRelevantAppStateProps = (appState: AppState): StaticCanvasAppState => {
     editingGroupId: appState.editingGroupId,
     currentHoveredFontFamily: appState.currentHoveredFontFamily,
     croppingElementId: appState.croppingElementId,
+    suggestedBinding: appState.suggestedBinding,
   };
 
   return relevantAppStateProps;

packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx

@@ -35,10 +35,16 @@ const DropdownMenu = ({
       : MenuContentComp;
 
   return (
-    <>
+    <div
+      className="dropdown-menu-container"
+      style={{
+        // remove this div from box layout
+        display: "contents",
+      }}
+    >
       {MenuTriggerComp}
       {open && MenuContentCompWithPlacement}
-    </>
+    </div>
   );
 };
 

packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx

@@ -5,7 +5,7 @@ import { EVENT, KEYS } from "@excalidraw/common";
 
 import { useOutsideClick } from "../../hooks/useOutsideClick";
 import { useStable } from "../../hooks/useStable";
-import { useDevice } from "../App";
+import { useEditorInterface } from "../App";
 import { Island } from "../Island";
 import Stack from "../Stack";
 
@@ -29,13 +29,20 @@ const MenuContent = ({
   style?: React.CSSProperties;
   placement?: "top" | "bottom";
 }) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const menuRef = useRef<HTMLDivElement>(null);
 
   const callbacksRef = useStable({ onClickOutside });
 
-  useOutsideClick(menuRef, () => {
+  useOutsideClick(menuRef, (event) => {
-    callbacksRef.onClickOutside?.();
+    // prevents closing if clicking on the trigger button
+    if (
+      !menuRef.current
+        ?.closest(".dropdown-menu-container")
+        ?.contains(event.target)
+    ) {
+      callbacksRef.onClickOutside?.();
+    }
   });
 
   useEffect(() => {
@@ -59,7 +66,7 @@ const MenuContent = ({
   }, [callbacksRef]);
 
   const classNames = clsx(`dropdown-menu ${className}`, {
-    "dropdown-menu--mobile": device.editor.isMobile,
+    "dropdown-menu--mobile": editorInterface.formFactor === "phone",
     "dropdown-menu--placement-top": placement === "top",
   }).trim();
 
@@ -73,13 +80,8 @@ const MenuContent = ({
       >
         {/* the zIndex ensures this menu has higher stacking order,
     see https://github.com/excalidraw/excalidraw/pull/1445 */}
-        {device.editor.isMobile ? (
+        {editorInterface.formFactor === "phone" ? (
-          <Stack.Col
+          <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
-            className="dropdown-menu-container"
-            style={{ ["--gap" as any]: 1.25 }}
-          >
-            {children}
-          </Stack.Col>
         ) : (
           <Island
             className="dropdown-menu-container"

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,4 +1,4 @@
-import { useDevice } from "../App";
+import { useEditorInterface } from "../App";
 
 import { Ellipsify } from "../Ellipsify";
 
@@ -15,14 +15,14 @@ const MenuItemContent = ({
   textStyle?: React.CSSProperties;
   children: React.ReactNode;
 }) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   return (
     <>
       {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
       <div style={textStyle} className="dropdown-menu-item__text">
         <Ellipsify>{children}</Ellipsify>
       </div>
-      {shortcut && !device.editor.isMobile && (
+      {shortcut && editorInterface.formFactor !== "phone" && (
         <div className="dropdown-menu-item__shortcut">{shortcut}</div>
       )}
     </>

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx

@@ -1,4 +1,4 @@
-import { useDevice } from "../App";
+import { useEditorInterface } from "../App";
 import { RadioGroup } from "../RadioGroup";
 
 type Props<T> = {
@@ -22,7 +22,7 @@ const DropdownMenuItemContentRadio = <T,>({
   children,
   name,
 }: Props<T>) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
 
   return (
     <>
@@ -37,7 +37,7 @@ const DropdownMenuItemContentRadio = <T,>({
           choices={choices}
         />
       </div>
-      {shortcut && !device.editor.isMobile && (
+      {shortcut && editorInterface.formFactor !== "phone" && (
         <div className="dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned">
           {shortcut}
         </div>

packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 
-import { useDevice } from "../App";
+import { useEditorInterface } from "../App";
 
 const MenuTrigger = ({
   className = "",
@@ -14,17 +14,16 @@ const MenuTrigger = ({
   onToggle: () => void;
   title?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
-  const device = useDevice();
+  const editorInterface = useEditorInterface();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
-      "dropdown-menu-button--mobile": device.editor.isMobile,
+      "dropdown-menu-button--mobile": editorInterface.formFactor === "phone",
     },
   ).trim();
   return (
     <button
-      data-prevent-outside-click
       className={classNames}
       onClick={onToggle}
       type="button"