fix other imports as well

README.md

@@ -23,17 +23,23 @@
 <br />
 <p align="center">
   <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
-    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  /></a>
+    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+  </a>
   <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
-    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  /></a>
+    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
+  </a>
   <a href="https://docs.excalidraw.com/docs/introduction/contributing">
-    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  /></a>
+    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
+  </a>
   <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
+    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
+  </a>
   <a href="https://deepwiki.com/excalidraw/excalidraw">
-    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
+    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" />
+  </a>
   <a href="https://twitter.com/excalidraw">
-    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/></a>
+    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
+  </a>
 </p>
 
 <div align="center">

excalidraw-app/collab/Collab.tsx

@@ -441,7 +441,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   };
 
   private decryptPayload = async (
-    iv: Uint8Array<ArrayBuffer>,
+    iv: Uint8Array,
     encryptedData: ArrayBuffer,
     decryptionKey: string,
   ): Promise<ValueOf<SocketUpdateDataSource>> => {
@@ -562,7 +562,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     // All socket listeners are moving to Portal
     this.portal.socket.on(
       "client-broadcast",
-      async (encryptedData: ArrayBuffer, iv: Uint8Array<ArrayBuffer>) => {
+      async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
         if (!this.portal.roomKey) {
           return;
         }

excalidraw-app/components/DebugCanvas.tsx

@@ -15,14 +15,15 @@ import {
   getGlobalFixedPointForBindableElement,
   isArrowElement,
   isBindableElement,
+  isFixedPointBinding,
 } from "@excalidraw/element";
 
 import {
   isLineSegment,
   type GlobalPoint,
   type LineSegment,
+  isCurve,
 } from "@excalidraw/math";
-import { isCurve } from "@excalidraw/math/curve";
 
 import React from "react";
 
@@ -34,6 +35,7 @@ import type {
   ExcalidrawBindableElement,
   FixedPointBinding,
   OrderedExcalidrawElement,
+  PointBinding,
 } from "@excalidraw/element/types";
 
 import { STORAGE_KEYS } from "../app_constants";
@@ -89,46 +91,48 @@ const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
 
 const _renderBinding = (
   context: CanvasRenderingContext2D,
-  binding: FixedPointBinding,
+  binding: FixedPointBinding | PointBinding,
   elementsMap: ElementsMap,
   zoom: number,
   width: number,
   height: number,
   color: string,
 ) => {
-  if (!binding.fixedPoint) {
-    console.warn("Binding must have a fixedPoint");
-    return;
+  if (isFixedPointBinding(binding)) {
+    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 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,
+  binding: FixedPointBinding | PointBinding,
   context: CanvasRenderingContext2D,
   elementsMap: ElementsMap,
   zoom: number,
@@ -136,35 +140,37 @@ const _renderBindableBinding = (
   height: number,
   color: string,
 ) => {
-  const bindable = elementsMap.get(
-    binding.elementId,
-  ) as ExcalidrawBindableElement;
-  if (!binding.fixedPoint) {
-    console.warn("Binding must have a fixedPoint");
-    return;
+  if (isFixedPointBinding(binding)) {
+    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 [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 = (
@@ -191,12 +197,12 @@ const renderBindings = (
 
         _renderBinding(
           context,
-          element.startBinding,
+          element.startBinding as FixedPointBinding,
           elementsMap,
           zoom,
           dim,
           dim,
-          element.startBinding?.mode === "orbit" ? "red" : "black",
+          "red",
         );
       }
 
@@ -215,7 +221,7 @@ const renderBindings = (
           zoom,
           dim,
           dim,
-          element.endBinding?.mode === "orbit" ? "red" : "black",
+          "red",
         );
       }
     }

excalidraw-app/data/LocalData.ts

@@ -16,6 +16,7 @@ import {
   DEFAULT_SIDEBAR,
   debounce,
 } from "@excalidraw/common";
+import { clearElementsForLocalStorage } from "@excalidraw/element";
 import {
   createStore,
   entries,
@@ -27,7 +28,6 @@ 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(getNonDeletedElements(elements)),
+      JSON.stringify(clearElementsForLocalStorage(elements)),
     );
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,

excalidraw-app/data/firebase.ts

@@ -105,8 +105,8 @@ const decryptElements = async (
   data: FirebaseStoredScene,
   roomKey: string,
 ): Promise<readonly ExcalidrawElement[]> => {
-  const ciphertext = data.ciphertext.toUint8Array() as Uint8Array<ArrayBuffer>;
-  const iv = data.iv.toUint8Array() as Uint8Array<ArrayBuffer>;
+  const ciphertext = data.ciphertext.toUint8Array();
+  const iv = data.iv.toUint8Array();
 
   const decrypted = await decryptData(iv, ciphertext, roomKey);
   const decodedData = new TextDecoder("utf-8").decode(

excalidraw-app/data/localStorage.ts

@@ -2,6 +2,7 @@ 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";
@@ -49,7 +50,7 @@ export const importFromLocalStorage = () => {
   let elements: ExcalidrawElement[] = [];
   if (savedElements) {
     try {
-      elements = JSON.parse(savedElements);
+      elements = clearElementsForLocalStorage(JSON.parse(savedElements));
     } catch (error: any) {
       console.error(error);
       // Do nothing because elements array is already empty

excalidraw-app/sentry.ts

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

package.json

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

packages/common/src/constants.ts

@@ -499,8 +499,6 @@ 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

@@ -1,5 +1,3 @@
-import mobile from "is-mobile";
-
 export type StylesPanelMode = "compact" | "full" | "mobile";
 
 export type EditorInterface = Readonly<{
@@ -141,13 +139,12 @@ export const getFormFactor = (
   editorWidth: number,
   editorHeight: number,
 ): EditorInterface["formFactor"] => {
-  if (mobile()) {
+  if (isMobileBreakpoint(editorWidth, editorHeight)) {
     return "phone";
-  } else if (mobile({ tablet: true })) {
+  }
+
+  if (isTabletBreakpoint(editorWidth, editorHeight)) {
     return "tablet";
-  } else if (isMobileBreakpoint(editorWidth, editorHeight)) {
-    // NOTE: Very small editor sizes should be treated as phone
-    return "phone";
   }
 
   return "desktop";

packages/common/src/utils.ts

@@ -1,6 +1,10 @@
 import { average } from "@excalidraw/math";
 
-import type { FontFamilyValues, FontString } from "@excalidraw/element/types";
+import type {
+  ExcalidrawBindableElement,
+  FontFamilyValues,
+  FontString,
+} from "@excalidraw/element/types";
 
 import type {
   ActiveTool,
@@ -378,10 +382,6 @@ 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: ((
@@ -558,6 +558,9 @@ 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
@@ -1267,47 +1270,3 @@ export const reduceToCommonValue = <T, R = T>(
 
   return commonValue;
 };
-
-type FEATURE_FLAGS = {
-  COMPLEX_BINDINGS: boolean;
-};
-
-const FEATURE_FLAGS_STORAGE_KEY = "excalidraw-feature-flags";
-const DEFAULT_FEATURE_FLAGS: FEATURE_FLAGS = {
-  COMPLEX_BINDINGS: false,
-};
-let featureFlags: FEATURE_FLAGS | null = null;
-
-export const getFeatureFlag = <F extends keyof FEATURE_FLAGS>(
-  flag: F,
-): FEATURE_FLAGS[F] => {
-  if (!featureFlags) {
-    try {
-      const serializedFlags = localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
-      if (serializedFlags) {
-        const flags = JSON.parse(serializedFlags);
-        featureFlags = flags ?? DEFAULT_FEATURE_FLAGS;
-      }
-    } catch {}
-  }
-
-  return (featureFlags || DEFAULT_FEATURE_FLAGS)[flag];
-};
-
-export const setFeatureFlag = <F extends keyof FEATURE_FLAGS>(
-  flag: F,
-  value: FEATURE_FLAGS[F],
-) => {
-  try {
-    featureFlags = {
-      ...(featureFlags || DEFAULT_FEATURE_FLAGS),
-      [flag]: value,
-    };
-    localStorage.setItem(
-      FEATURE_FLAGS_STORAGE_KEY,
-      JSON.stringify(featureFlags),
-    );
-  } catch (e) {
-    console.error("unable to set feature flag", e);
-  }
-};

packages/common/src/visualdebug.ts

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

packages/element/src/bounds.ts

@@ -1276,13 +1276,6 @@ 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 { invariant, isTransparent } from "@excalidraw/common";
+import { isTransparent } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -11,12 +11,9 @@ import {
   vectorFromPoint,
   vectorNormalize,
   vectorScale,
-} from "@excalidraw/math";
-
-import {
   ellipse,
   ellipseSegmentInterceptPoints,
-} from "@excalidraw/math/ellipse";
+} from "@excalidraw/math";
 
 import type {
   Curve,
@@ -34,14 +31,10 @@ import {
   elementCenterPoint,
   getCenterForBounds,
   getCubicBezierCurveBound,
-  getDiamondPoints,
   getElementBounds,
-  pointInsideBounds,
 } from "./bounds";
 import {
   hasBoundTextElement,
-  isBindableElement,
-  isFrameLikeElement,
   isFreeDrawElement,
   isIframeLikeElement,
   isImageElement,
@@ -62,17 +55,12 @@ 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) => {
@@ -103,7 +91,6 @@ export type HitTestArgs = {
   threshold: number;
   elementsMap: ElementsMap;
   frameNameBound?: FrameNameBounds | null;
-  overrideShouldTestInside?: boolean;
 };
 
 export const hitElementItself = ({
@@ -112,7 +99,6 @@ export const hitElementItself = ({
   threshold,
   elementsMap,
   frameNameBound = null,
-  overrideShouldTestInside = false,
 }: HitTestArgs) => {
   // Hit test against a frame's name
   const hitFrameName = frameNameBound
@@ -145,9 +131,7 @@ export const hitElementItself = ({
   }
 
   // Do the precise (and relatively costly) hit test
-  const hitElement = (
-    overrideShouldTestInside ? true : shouldTestInside(element)
-  )
+  const hitElement = 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) ||
@@ -206,116 +190,6 @@ 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
  *
@@ -677,61 +551,3 @@ 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/distance.ts

@@ -2,10 +2,10 @@ import {
   curvePointDistance,
   distanceToLineSegment,
   pointRotateRads,
+  ellipse,
+  ellipseDistanceFromPoint,
 } from "@excalidraw/math";
 
-import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
-
 import type { GlobalPoint, Radians } from "@excalidraw/math";
 
 import {

packages/element/src/dragElements.ts

@@ -2,7 +2,6 @@ import {
   TEXT_AUTOWRAP_THRESHOLD,
   getGridPoint,
   getFontString,
-  DRAGGING_THRESHOLD,
 } from "@excalidraw/common";
 
 import type {
@@ -14,7 +13,7 @@ import type {
 
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
-import { unbindBindingElement, updateBoundElements } from "./binding";
+import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
@@ -103,26 +102,9 @@ export const dragSelectedElements = (
     gridSize,
   );
 
-  const elementsToUpdateIds = new Set(
-    Array.from(elementsToUpdate, (el) => el.id),
-  );
-
   elementsToUpdate.forEach((element) => {
-    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);
-
+    updateElementCoords(pointerDownState, element, scene, adjustedOffset);
     if (!isArrowElement(element)) {
-      updateElementCoords(pointerDownState, element, scene, adjustedOffset);
-
       // skip arrow labels since we calculate its position during render
       const textElement = getBoundTextElement(
         element,
@@ -139,33 +121,6 @@ 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,6 +17,7 @@ import {
   BinaryHeap,
   invariant,
   isAnyTrue,
+  tupleToCoors,
   getSizeFromPoints,
   isDevEnv,
   arrayToMap,
@@ -26,11 +27,10 @@ import type { AppState } from "@excalidraw/excalidraw/types";
 
 import {
   bindPointToSnapToElementOutline,
+  FIXED_BINDING_DISTANCE,
   getHeadingForElbowArrowSnap,
   getGlobalFixedPointForBindableElement,
-  getBindingGap,
-  maxBindingDistance_simple,
-  BASE_BINDING_GAP_ELBOW,
+  getHoveredElementForBinding,
 } 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,7 +63,6 @@ import type {
   FixedPointBinding,
   FixedSegment,
   NonDeletedExcalidrawElement,
-  Ordered,
 } from "./types";
 
 type GridAddress = [number, number] & { _brand: "gridaddress" };
@@ -1244,7 +1243,6 @@ const getElbowArrowData = (
   const startGlobalPoint = getGlobalPoint(
     {
       ...arrow,
-      angle: 0,
       type: "arrow",
       elbowed: true,
       points: nextPoints,
@@ -1259,7 +1257,6 @@ const getElbowArrowData = (
   const endGlobalPoint = getGlobalPoint(
     {
       ...arrow,
-      angle: 0,
       type: "arrow",
       elbowed: true,
       points: nextPoints,
@@ -1277,7 +1274,6 @@ const getElbowArrowData = (
     hoveredStartElement,
     origStartGlobalPoint,
     elementsMap,
-    options?.zoom,
   );
   const endHeading = getBindPointHeading(
     endGlobalPoint,
@@ -1285,7 +1281,6 @@ const getElbowArrowData = (
     hoveredEndElement,
     origEndGlobalPoint,
     elementsMap,
-    options?.zoom,
   );
   const startPointBounds = [
     startGlobalPoint[0] - 2,
@@ -1306,8 +1301,8 @@ const getElbowArrowData = (
         offsetFromHeading(
           startHeading,
           arrow.startArrowhead
-            ? getBindingGap(hoveredStartElement, { elbowed: true }) * 6
-            : getBindingGap(hoveredStartElement, { elbowed: true }) * 2,
+            ? FIXED_BINDING_DISTANCE * 6
+            : FIXED_BINDING_DISTANCE * 2,
           1,
         ),
       )
@@ -1319,8 +1314,8 @@ const getElbowArrowData = (
         offsetFromHeading(
           endHeading,
           arrow.endArrowhead
-            ? getBindingGap(hoveredEndElement, { elbowed: true }) * 6
-            : getBindingGap(hoveredEndElement, { elbowed: true }) * 2,
+            ? FIXED_BINDING_DISTANCE * 6
+            : FIXED_BINDING_DISTANCE * 2,
           1,
         ),
       )
@@ -1367,8 +1362,8 @@ const getElbowArrowData = (
             ? 0
             : BASE_PADDING -
                 (arrow.startArrowhead
-                  ? BASE_BINDING_GAP_ELBOW * 6
-                  : BASE_BINDING_GAP_ELBOW * 2),
+                  ? FIXED_BINDING_DISTANCE * 6
+                  : FIXED_BINDING_DISTANCE * 2),
           BASE_PADDING,
         ),
     boundsOverlap
@@ -1383,8 +1378,8 @@ const getElbowArrowData = (
             ? 0
             : BASE_PADDING -
                 (arrow.endArrowhead
-                  ? BASE_BINDING_GAP_ELBOW * 6
-                  : BASE_BINDING_GAP_ELBOW * 2),
+                  ? FIXED_BINDING_DISTANCE * 6
+                  : FIXED_BINDING_DISTANCE * 2),
           BASE_PADDING,
         ),
     boundsOverlap,
@@ -2244,7 +2239,6 @@ const getBindPointHeading = (
   hoveredElement: ExcalidrawBindableElement | null | undefined,
   origPoint: GlobalPoint,
   elementsMap: ElementsMap,
-  zoom?: AppState["zoom"],
 ): Heading =>
   getHeadingForElbowArrowSnap(
     p,
@@ -2263,20 +2257,21 @@ const getBindPointHeading = (
       ),
     origPoint,
     elementsMap,
-    zoom,
   );
 
 const getHoveredElement = (
   origPoint: GlobalPoint,
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
+  elements: readonly NonDeletedExcalidrawElement[],
   zoom?: AppState["zoom"],
 ) => {
   return getHoveredElementForBinding(
-    origPoint,
+    tupleToCoors(origPoint),
     elements,
     elementsMap,
-    (element) => maxBindingDistance_simple(zoom),
+    zoom,
+    true,
+    true,
   );
 };
 

packages/element/src/flowchart.ts

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

packages/element/src/index.ts

@@ -1,6 +1,7 @@
 import { toIterable } from "@excalidraw/common";
 
 import { isInvisiblySmallElement } from "./sizeHelpers";
+import { isLinearElementType } from "./typeChecks";
 
 import type {
   ExcalidrawElement,
@@ -54,6 +55,27 @@ 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,13 +46,16 @@ 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, fileId } = updates as any;
+  const { points, fixedSegments, startBinding, endBinding, fileId } =
+    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

@@ -452,6 +452,7 @@ export const newFreeDrawElement = (
     points: opts.points || [],
     pressures: opts.pressures || [],
     simulatePressure: opts.simulatePressure,
+    lastCommittedPoint: null,
   };
 };
 
@@ -465,7 +466,7 @@ export const newLinearElement = (
   const element = {
     ..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
     points: opts.points || [],
-
+    lastCommittedPoint: null,
     startBinding: null,
     endBinding: null,
     startArrowhead: null,
@@ -500,6 +501,7 @@ 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,
@@ -514,6 +516,7 @@ 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 | InteractiveCanvasAppState,
+  appState: StaticCanvasAppState,
 ) => {
   return (
     appState.theme === THEME.DARK &&
@@ -225,7 +225,7 @@ const generateElementCanvas = (
   elementsMap: NonDeletedSceneElementsMap,
   zoom: Zoom,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState | InteractiveCanvasAppState,
+  appState: StaticCanvasAppState,
 ): 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);
+  drawElementOnCanvas(element, rc, context, renderConfig, appState);
 
   context.restore();
 
@@ -412,6 +412,7 @@ const drawElementOnCanvas = (
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ) => {
   switch (element.type) {
     case "rectangle":
@@ -557,7 +558,7 @@ const generateElementWithCanvas = (
   element: NonDeletedExcalidrawElement,
   elementsMap: NonDeletedSceneElementsMap,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState | InteractiveCanvasAppState,
+  appState: StaticCanvasAppState,
 ) => {
   const zoom: Zoom = renderConfig
     ? appState.zoom
@@ -614,7 +615,7 @@ const drawElementFromCanvas = (
   elementWithCanvas: ExcalidrawElementWithCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState | InteractiveCanvasAppState,
+  appState: StaticCanvasAppState,
   allElementsMap: NonDeletedSceneElementsMap,
 ) => {
   const element = elementWithCanvas.element;
@@ -732,7 +733,7 @@ export const renderElement = (
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState | InteractiveCanvasAppState,
+  appState: StaticCanvasAppState,
 ) => {
   const reduceAlphaForSelection =
     appState.openDialog?.name === "elementLinkSelector" &&
@@ -802,7 +803,7 @@ export const renderElement = (
         context.translate(cx, cy);
         context.rotate(element.angle);
         context.translate(-shiftX, -shiftY);
-        drawElementOnCanvas(element, rc, context, renderConfig);
+        drawElementOnCanvas(element, rc, context, renderConfig, appState);
         context.restore();
       } else {
         const elementWithCanvas = generateElementWithCanvas(
@@ -895,7 +896,13 @@ export const renderElement = (
 
           tempCanvasContext.translate(-shiftX, -shiftY);
 
-          drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
+          drawElementOnCanvas(
+            element,
+            tempRc,
+            tempCanvasContext,
+            renderConfig,
+            appState,
+          );
 
           tempCanvasContext.translate(shiftX, shiftY);
 
@@ -934,7 +941,7 @@ export const renderElement = (
           }
 
           context.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, rc, context, renderConfig);
+          drawElementOnCanvas(element, rc, context, renderConfig, appState);
         }
 
         context.restore();
@@ -1115,7 +1122,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: true,
+    last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
   };
 
   return getStroke(inputPoints as number[][], options) as [number, number][];

packages/element/src/resizeElements.ts

@@ -20,11 +20,7 @@ import type { PointerDownState } from "@excalidraw/excalidraw/types";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
 
-import {
-  getArrowLocalFixedPoints,
-  unbindBindingElement,
-  updateBoundElements,
-} from "./binding";
+import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
 import {
   getElementAbsoluteCoords,
   getCommonBounds,
@@ -50,7 +46,6 @@ import {
 import { wrapText } from "./textWrapping";
 import {
   isArrowElement,
-  isBindingElement,
   isBoundToContainer,
   isElbowArrow,
   isFrameLikeElement,
@@ -79,9 +74,7 @@ import type {
   ExcalidrawImageElement,
   ElementsMap,
   ExcalidrawElbowArrowElement,
-  ExcalidrawArrowElement,
 } from "./types";
-import type { ElementUpdate } from "./mutateElement";
 
 // Returns true when transform (resizing/rotation) happened
 export const transformElements = (
@@ -227,25 +220,7 @@ const rotateSingleElement = (
   }
   const boundTextElementId = getBoundTextElementId(element);
 
-  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);
-
+  scene.mutateElement(element, { angle });
   if (boundTextElementId) {
     const textElement =
       scene.getElement<ExcalidrawTextElementWithContainer>(boundTextElementId);
@@ -419,11 +394,6 @@ 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);
@@ -454,19 +424,6 @@ 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(
@@ -878,32 +835,13 @@ export const resizeSingleElement = (
     Number.isFinite(newOrigin.x) &&
     Number.isFinite(newOrigin.y)
   ) {
-    let updates: ElementUpdate<ExcalidrawElement> = {
+    const updates = {
       ...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,
@@ -921,7 +859,10 @@ export const resizeSingleElement = (
       shouldMaintainAspectRatio,
     );
 
-    updateBoundElements(latestElement, scene);
+    updateBoundElements(latestElement, scene, {
+      // TODO: confirm with MARK if this actually makes sense
+      newSize: { width: nextWidth, height: nextHeight },
+    });
   }
 };
 
@@ -1455,36 +1396,20 @@ 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 { angle } = update;
+      const { width, height, 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/transformHandles.ts

@@ -330,10 +330,7 @@ export const hasBoundingBox = (
   appState: InteractiveCanvasAppState,
   editorInterface: EditorInterface,
 ) => {
-  if (
-    appState.selectedLinearElement?.isEditing ||
-    appState.selectedLinearElement?.isDragging
-  ) {
+  if (appState.selectedLinearElement?.isEditing) {
     return false;
   }
   if (elements.length > 1) {

packages/element/src/typeChecks.ts

@@ -28,6 +28,8 @@ import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawLineElement,
+  PointBinding,
+  FixedPointBinding,
   ExcalidrawFlowchartNodeElement,
   ExcalidrawLinearElementSubType,
 } from "./types";
@@ -161,7 +163,7 @@ export const isLinearElementType = (
 export const isBindingElement = (
   element?: ExcalidrawElement | null,
   includeLocked = true,
-): element is ExcalidrawArrowElement => {
+): element is ExcalidrawLinearElement => {
   return (
     element != null &&
     (!element.locked || includeLocked === true) &&
@@ -356,6 +358,15 @@ 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

@@ -279,23 +279,24 @@ export type ExcalidrawTextElementWithContainer = {
 
 export type FixedPoint = [number, number];
 
-export type BindMode = "inside" | "orbit" | "skip";
-
-export type FixedPointBinding = {
+export type PointBinding = {
   elementId: ExcalidrawBindableElement["id"];
-
-  // 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
-  // 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
-  // bound element-local point coordinate.
-  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;
+  focus: number;
+  gap: number;
 };
 
+export type FixedPointBinding = Merge<
+  PointBinding,
+  {
+    // 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
+    // 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
+    // bound element-local point coordinate.
+    fixedPoint: FixedPoint;
+  }
+>;
+
 type Index = number;
 
 export type PointsPositionUpdates = Map<
@@ -321,8 +322,9 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{
     type: "line" | "arrow";
     points: readonly LocalPoint[];
-    startBinding: FixedPointBinding | null;
-    endBinding: FixedPointBinding | null;
+    lastCommittedPoint: LocalPoint | null;
+    startBinding: PointBinding | null;
+    endBinding: PointBinding | null;
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
@@ -349,9 +351,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
@@ -377,6 +379,7 @@ 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,7 +1,6 @@
 import {
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_PROPORTIONAL_RADIUS,
-  invariant,
   LINE_CONFIRM_THRESHOLD,
   ROUNDNESS,
 } from "@excalidraw/common";
@@ -11,17 +10,10 @@ import {
   curveCatmullRomCubicApproxPoints,
   curveOffsetPoints,
   lineSegment,
-  lineSegmentIntersectionPoints,
   pointDistance,
   pointFrom,
   pointFromArray,
-  pointFromVector,
-  pointRotateRads,
-  pointTranslate,
   rectangle,
-  vectorFromPoint,
-  vectorNormalize,
-  vectorScale,
   type GlobalPoint,
 } from "@excalidraw/math";
 
@@ -29,17 +21,11 @@ import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";
 
 import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types";
 
-import { elementCenterPoint, getDiamondPoints } from "./bounds";
+import { 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,
@@ -414,10 +400,20 @@ export function deconstructDiamondElement(
     ), // TOP
   ];
 
-  const corners = baseCorners.map(
-    (corner) =>
-      curveCatmullRomCubicApproxPoints(curveOffsetPoints(corner, offset))!,
-  );
+  const corners =
+    offset > 0
+      ? baseCorners.map(
+          (corner) =>
+            curveCatmullRomCubicApproxPoints(
+              curveOffsetPoints(corner, offset),
+            )!,
+        )
+      : [
+          [baseCorners[0]],
+          [baseCorners[1]],
+          [baseCorners[2]],
+          [baseCorners[3]],
+        ];
 
   const sides = [
     lineSegment<GlobalPoint>(
@@ -485,136 +481,3 @@ 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,25 +1,18 @@
 import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
-import type { GlobalPoint } from "@excalidraw/math";
 
-import { isFrameLikeElement, isTextElement } from "./typeChecks";
+import { isFrameLikeElement } 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 {
-  ExcalidrawArrowElement,
-  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-  Ordered,
-  OrderedExcalidrawElement,
-} from "./types";
+
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
 
 const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
   return element.frameId === frameId || element.id === frameId;
@@ -146,51 +139,6 @@ 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.9291017525165);
-    expect(y1).toEqual(185.24770129343722);
-    expect(x2).toEqual(481.4815539037601);
-    expect(y2).toEqual(319.8162855827246);
+    expect(x1).toEqual(360.3176068760539);
+    expect(y1).toEqual(185.90654264413516);
+    expect(x2).toEqual(480.87005902729743);
+    expect(y2).toEqual(320.4751269334226);
   });
 });

packages/element/tests/duplicate.test.tsx

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

packages/element/tests/elbowArrow.test.tsx

@@ -1,10 +1,13 @@
 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,
@@ -12,11 +15,13 @@ 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 {
@@ -131,11 +136,6 @@ 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,23 +185,25 @@ describe("elbow arrow routing", () => {
       height: 200,
       points: [pointFrom(0, 0), pointFrom(90, 200)],
     }) as ExcalidrawElbowArrowElement;
-    API.setElements([rectangle1, rectangle2, arrow]);
+    scene.insertElement(rectangle1);
+    scene.insertElement(rectangle2);
+    scene.insertElement(arrow);
 
-    bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene);
-    bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene);
+    bindLinearElement(arrow, rectangle1, "start", scene);
+    bindLinearElement(arrow, rectangle2, "end", scene);
 
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    h.scene.mutateElement(arrow, {
+    h.app.scene.mutateElement(arrow, {
       points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
     });
 
-    expect(arrow.points).toCloselyEqualPoints([
+    expect(arrow.points).toEqual([
       [0, 0],
-      [39, 0],
-      [39, 200],
-      [78, 200],
+      [45, 0],
+      [45, 200],
+      [90, 200],
     ]);
   });
 });
@@ -240,9 +242,9 @@ describe("elbow arrow ui", () => {
     expect(h.state.currentItemArrowType).toBe(ARROW_TYPE.elbow);
 
     mouse.reset();
-    mouse.moveTo(-53, -99);
+    mouse.moveTo(-43, -99);
     mouse.click();
-    mouse.moveTo(53, 99);
+    mouse.moveTo(43, 99);
     mouse.click();
 
     const arrow = h.scene.getSelectedElements(
@@ -251,11 +253,11 @@ describe("elbow arrow ui", () => {
 
     expect(arrow.type).toBe("arrow");
     expect(arrow.elbowed).toBe(true);
-    expect(arrow.points).toCloselyEqualPoints([
+    expect(arrow.points).toEqual([
       [0, 0],
-      [39, 0],
-      [39, 200],
-      [78, 200],
+      [45, 0],
+      [45, 200],
+      [90, 200],
     ]);
   });
 
@@ -277,9 +279,9 @@ describe("elbow arrow ui", () => {
     UI.clickOnTestId("elbow-arrow");
 
     mouse.reset();
-    mouse.moveTo(-53, -99);
+    mouse.moveTo(-43, -99);
     mouse.click();
-    mouse.moveTo(53, 99);
+    mouse.moveTo(43, 99);
     mouse.click();
 
     const arrow = h.scene.getSelectedElements(
@@ -295,11 +297,9 @@ describe("elbow arrow ui", () => {
 
     expect(arrow.points.map((point) => point.map(Math.round))).toEqual([
       [0, 0],
-      [36, 0],
-      [36, 90],
-      [28, 90],
-      [28, 164],
-      [101, 164],
+      [35, 0],
+      [35, 165],
+      [103, 165],
     ]);
   });
 
@@ -321,9 +321,9 @@ describe("elbow arrow ui", () => {
     UI.clickOnTestId("elbow-arrow");
 
     mouse.reset();
-    mouse.moveTo(-53, -99);
+    mouse.moveTo(-43, -99);
     mouse.click();
-    mouse.moveTo(53, 99);
+    mouse.moveTo(43, 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).toCloselyEqualPoints([
+    expect(duplicatedArrow.points).toEqual([
       [0, 0],
-      [39, 0],
-      [39, 200],
-      [78, 200],
+      [45, 0],
+      [45, 200],
+      [90, 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(-53, -99);
+    mouse.moveTo(-43, -99);
     mouse.click();
-    mouse.moveTo(53, 99);
+    mouse.moveTo(43, 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).toCloselyEqualPoints([
+    expect(duplicatedArrow.points).toEqual([
       [0, 0],
       [0, 100],
-      [78, 100],
-      [78, 200],
+      [90, 100],
+      [90, 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(`8`);
+    expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
     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?.isEditing).toBe(false);
+    expect(h.state.selectedLinearElement).toBe(null);
     await getTextEditor();
   });
 
@@ -357,7 +357,6 @@ 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]);
@@ -380,7 +379,7 @@ describe("Test Linear Elements", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `11`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
       expect(line.points.length).toEqual(3);
       expect(line.points).toMatchInlineSnapshot(`
@@ -550,7 +549,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `14`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         expect(line.points.length).toEqual(5);
 
@@ -601,7 +600,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -642,7 +641,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -690,7 +689,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `17`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`10`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newMidPoints = LinearElementEditor.getEditorMidPoints(
           line,
@@ -748,7 +747,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `14`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
         expect(line.points.length).toEqual(5);
 
         expect((h.elements[0] as ExcalidrawLinearElement).points)
@@ -846,7 +845,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -1304,7 +1303,7 @@ describe("Test Linear Elements", () => {
       const arrow = UI.createElement("arrow", {
         x: -10,
         y: 250,
-        width: 410,
+        width: 400,
         height: 1,
       });
 
@@ -1317,7 +1316,7 @@ describe("Test Linear Elements", () => {
       const textElement = h.elements[2] as ExcalidrawTextElementWithContainer;
 
       expect(arrow.endBinding?.elementId).toBe(rect.id);
-      expect(arrow.width).toBeCloseTo(399);
+      expect(arrow.width).toBe(400);
       expect(rect.x).toBe(400);
       expect(rect.y).toBe(0);
       expect(
@@ -1336,7 +1335,7 @@ describe("Test Linear Elements", () => {
       mouse.downAt(rect.x, rect.y);
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
-      expect(arrow.width).toBeCloseTo(199);
+      expect(arrow.width).toBeCloseTo(200, 0);
       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 () => {
-  //   const rectangle = UI.createElement("rectangle", {
-  //     width: 200,
-  //     height: 100,
-  //   });
-  //   const arrow = UI.createElement("arrow", {
-  //     x: -30,
-  //     y: 50,
-  //     width: 28,
-  //     height: 5,
-  //   });
+  it("resizes with bound arrow", async () => {
+    const rectangle = UI.createElement("rectangle", {
+      width: 200,
+      height: 100,
+    });
+    const arrow = UI.createElement("arrow", {
+      x: -30,
+      y: 50,
+      width: 28,
+      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.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
-  // });
+    expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
+    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.06);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
     expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
 
     UI.resize(rectangle, "se", [-200, -150]);
 
-    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
     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.06);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
     expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
 
     UI.resize([rectangle, arrow], "nw", [300, 350]);
-    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.06);
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.05);
     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 () => {
-  //   const text = UI.createElement("text");
-  //   await UI.editText(text, "hello\nworld");
-  //   const boundArrow = UI.createElement("arrow", {
-  //     x: -30,
-  //     y: 25,
-  //     width: 28,
-  //     height: 5,
-  //   });
+  it("resizes with bound arrow", async () => {
+    const text = UI.createElement("text");
+    await UI.editText(text, "hello\nworld");
+    const boundArrow = UI.createElement("arrow", {
+      x: -30,
+      y: 25,
+      width: 28,
+      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 scale = 20 / text.height;
-  //   UI.resize(text, "nw", [50, 20]);
+    const textWidth = text.width;
+    const scale = 20 / text.height;
+    UI.resize(text, "nw", [50, 20]);
 
-  //   expect(boundArrow.endBinding?.elementId).toEqual(text.id);
-  //   expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
-  //     30 + textWidth * scale,
-  //   );
-  // });
+    expect(boundArrow.endBinding?.elementId).toEqual(text.id);
+    expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
+      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 () => {
-  //   const image = API.createElement({
-  //     type: "image",
-  //     width: 100,
-  //     height: 100,
-  //   });
-  //   API.setElements([image]);
-  //   const arrow = UI.createElement("arrow", {
-  //     x: -30,
-  //     y: 50,
-  //     width: 28,
-  //     height: 5,
-  //   });
+  it("resizes with bound arrow", async () => {
+    const image = API.createElement({
+      type: "image",
+      width: 100,
+      height: 100,
+    });
+    API.setElements([image]);
+    const arrow = UI.createElement("arrow", {
+      x: -30,
+      y: 50,
+      width: 28,
+      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 scale = 20 / image.height;
-  //   UI.resize(image, "nw", [50, 20]);
+    const imageWidth = image.width;
+    const scale = 20 / image.height;
+    UI.resize(image, "nw", [50, 20]);
 
-  //   expect(arrow.endBinding?.elementId).toEqual(image.id);
-  //   expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
-  //     30 + imageWidth * scale,
-  //     0,
-  //   );
-  // });
+    expect(arrow.endBinding?.elementId).toEqual(image.id);
+    expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
+      30 + imageWidth * scale,
+      0,
+    );
+  });
 });
 
 describe("multiple selection", () => {
@@ -997,80 +997,68 @@ describe("multiple selection", () => {
     expect(diagLine.angle).toEqual(0);
   });
 
-  // it("resizes with bound arrows", async () => {
-  //   const rectangle = UI.createElement("rectangle", {
-  //     position: 0,
-  //     size: 100,
-  //   });
-  //   const leftBoundArrow = UI.createElement("arrow", {
-  //     x: -110,
-  //     y: 50,
-  //     width: 100,
-  //     height: 0,
-  //   });
+  it("resizes with bound arrows", async () => {
+    const rectangle = UI.createElement("rectangle", {
+      position: 0,
+      size: 100,
+    });
+    const leftBoundArrow = UI.createElement("arrow", {
+      x: -110,
+      y: 50,
+      width: 100,
+      height: 0,
+    });
 
-  //   const rightBoundArrow = UI.createElement("arrow", {
-  //     x: 210,
-  //     y: 50,
-  //     width: -100,
-  //     height: 0,
-  //   });
+    const rightBoundArrow = UI.createElement("arrow", {
+      x: 210,
+      y: 50,
+      width: -100,
+      height: 0,
+    });
 
-  //   const selectionWidth = 210;
-  //   const selectionHeight = 100;
-  //   const move = [40, 40] as [number, number];
-  //   const scale = Math.max(
-  //     1 - move[0] / selectionWidth,
-  //     1 - move[1] / selectionHeight,
-  //   );
-  //   const leftArrowBinding: {
-  //     elementId: string;
-  //     gap?: number;
-  //     focus?: number;
-  //   } = {
-  //     ...leftBoundArrow.endBinding,
-  //   } as PointBinding;
-  //   const rightArrowBinding: {
-  //     elementId: string;
-  //     gap?: number;
-  //     focus?: number;
-  //   } = {
-  //     ...rightBoundArrow.endBinding,
-  //   } as PointBinding;
-  //   delete rightArrowBinding.gap;
+    const selectionWidth = 210;
+    const selectionHeight = 100;
+    const move = [40, 40] as [number, number];
+    const scale = Math.max(
+      1 - move[0] / selectionWidth,
+      1 - move[1] / selectionHeight,
+    );
+    const leftArrowBinding = { ...leftBoundArrow.endBinding };
+    const rightArrowBinding = { ...rightBoundArrow.endBinding };
+    delete rightArrowBinding.gap;
 
-  //   UI.resize([rectangle, rightBoundArrow], "nw", move, {
-  //     shift: true,
-  //   });
+    UI.resize([rectangle, rightBoundArrow], "nw", move, {
+      shift: true,
+    });
 
-  //   expect(leftBoundArrow.x).toBeCloseTo(-110);
-  //   expect(leftBoundArrow.y).toBeCloseTo(50);
-  //   expect(leftBoundArrow.width).toBeCloseTo(140, 0);
-  //   expect(leftBoundArrow.height).toBeCloseTo(7, 0);
-  //   expect(leftBoundArrow.angle).toEqual(0);
-  //   expect(leftBoundArrow.startBinding).toBeNull();
-  //   expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
-  //   expect(leftBoundArrow.endBinding?.elementId).toBe(
-  //     leftArrowBinding.elementId,
-  //   );
-  //   expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
+    expect(leftBoundArrow.x).toBeCloseTo(-110);
+    expect(leftBoundArrow.y).toBeCloseTo(50);
+    expect(leftBoundArrow.width).toBeCloseTo(140, 0);
+    expect(leftBoundArrow.height).toBeCloseTo(7, 0);
+    expect(leftBoundArrow.angle).toEqual(0);
+    expect(leftBoundArrow.startBinding).toBeNull();
+    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
+    expect(leftBoundArrow.endBinding?.elementId).toBe(
+      leftArrowBinding.elementId,
+    );
+    expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
 
-  //   expect(rightBoundArrow.x).toBeCloseTo(210);
-  //   expect(rightBoundArrow.y).toBeCloseTo(
-  //     (selectionHeight - 50) * (1 - scale) + 50,
-  //   );
-  //   expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
-  //   expect(rightBoundArrow.height).toBeCloseTo(0);
-  //   expect(rightBoundArrow.angle).toEqual(0);
-  //   expect(rightBoundArrow.startBinding).toBeNull();
-  //   expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
-  //   expect(rightBoundArrow.endBinding?.elementId).toBe(
-  //     rightArrowBinding.elementId,
-  //   );
-  //   expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
-  //     rightArrowBinding.focus!,
-  //   );
-  // });
+    expect(rightBoundArrow.x).toBeCloseTo(210);
+    expect(rightBoundArrow.y).toBeCloseTo(
+      (selectionHeight - 50) * (1 - scale) + 50,
+    );
+    expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
+    expect(rightBoundArrow.height).toBeCloseTo(0);
+    expect(rightBoundArrow.angle).toEqual(0);
+    expect(rightBoundArrow.startBinding).toBeNull();
+    expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
+    expect(rightBoundArrow.endBinding?.elementId).toBe(
+      rightArrowBinding.elementId,
+    );
+    expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
+      rightArrowBinding.focus!,
+    );
+  });
 
   it("resizes with labeled arrows", async () => {
     const topArrow = UI.createElement("arrow", {
@@ -1350,8 +1338,8 @@ describe("multiple selection", () => {
 
     expect(boundArrow.x).toBeCloseTo(380 * scaleX);
     expect(boundArrow.y).toBeCloseTo(240 * scaleY);
-    expect(boundArrow.points[1][0]).toBeCloseTo(59.7979);
-    expect(boundArrow.points[1][1]).toBeCloseTo(-79.7305);
+    expect(boundArrow.points[1][0]).toBeCloseTo(-60 * scaleX);
+    expect(boundArrow.points[1][1]).toBeCloseTo(-80 * scaleY);
 
     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<Partial<AppState>>({
+export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
   trackEvent: false,
@@ -64,7 +64,7 @@ export const actionChangeViewBackgroundColor = register<Partial<AppState>>({
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
-      captureUpdate: !!value?.viewBackgroundColor
+      captureUpdate: !!value.viewBackgroundColor
         ? CaptureUpdateAction.IMMEDIATELY
         : CaptureUpdateAction.EVENTUALLY,
     };
@@ -466,7 +466,7 @@ export const actionZoomToFit = register({
     !event[KEYS.CTRL_OR_CMD],
 });
 
-export const actionToggleTheme = register<AppState["theme"]>({
+export const actionToggleTheme = register({
   name: "toggleTheme",
   label: (_, appState) => {
     return appState.theme === THEME.DARK
@@ -474,8 +474,7 @@ export const actionToggleTheme = register<AppState["theme"]>({
       : "buttons.darkMode";
   },
   keywords: ["toggle", "dark", "light", "mode", "theme"],
-  icon: (appState, elements) =>
-    appState.theme === THEME.LIGHT ? MoonIcon : SunIcon,
+  icon: (appState) => (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<ClipboardEvent | null>({
+export const actionCopy = register({
   name: "copy",
   label: "labels.copy",
   icon: DuplicateIcon,
   trackEvent: { category: "element" },
-  perform: async (elements, appState, event, app) => {
+  perform: async (elements, appState, event: ClipboardEvent | null, 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<ClipboardEvent | null>({
+export const actionCut = register({
   name: "cut",
   label: "labels.cut",
   icon: cutIcon,
   trackEvent: { category: "element" },
-  perform: (elements, appState, event, app) => {
+  perform: (elements, appState, event: ClipboardEvent | null, app) => {
     actionCopy.perform(elements, appState, event, app);
     return actionDeleteSelected.perform(elements, appState, null, app);
   },

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -212,8 +212,12 @@ export const actionDeleteSelected = register({
   trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState, formData, app) => {
     if (appState.selectedLinearElement?.isEditing) {
-      const { elementId, selectedPointsIndices } =
-        appState.selectedLinearElement;
+      const {
+        elementId,
+        selectedPointsIndices,
+        startBindingElement,
+        endBindingElement,
+      } = appState.selectedLinearElement;
       const elementsMap = app.scene.getNonDeletedElementsMap();
       const linearElement = LinearElementEditor.getElement(
         elementId,
@@ -250,6 +254,19 @@ 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,
@@ -262,6 +279,7 @@ export const actionDeleteSelected = register({
           ...appState,
           selectedLinearElement: {
             ...appState.selectedLinearElement,
+            ...binding,
             selectedPointsIndices:
               selectedPointsIndices?.[0] > 0
                 ? [selectedPointsIndices[0] - 1]
@@ -290,7 +308,6 @@ export const actionDeleteSelected = register({
           type: app.state.preferredSelectionTool.type,
         }),
         multiElement: null,
-        newElement: null,
         activeEmbeddable: null,
         selectedLinearElement: null,
       },

packages/excalidraw/actions/actionExport.tsx

@@ -31,9 +31,7 @@ import "../components/ToolIcon.scss";
 
 import { register } from "./register";
 
-import type { AppState } from "../types";
-
-export const actionChangeProjectName = register<AppState["name"]>({
+export const actionChangeProjectName = register({
   name: "changeProjectName",
   label: "labels.fileTitle",
   trackEvent: false,
@@ -53,7 +51,7 @@ export const actionChangeProjectName = register<AppState["name"]>({
   ),
 });
 
-export const actionChangeExportScale = register<AppState["exportScale"]>({
+export const actionChangeExportScale = register({
   name: "changeExportScale",
   label: "imageExportDialog.scale",
   trackEvent: { category: "export", action: "scale" },
@@ -103,9 +101,7 @@ export const actionChangeExportScale = register<AppState["exportScale"]>({
   },
 });
 
-export const actionChangeExportBackground = register<
-  AppState["exportBackground"]
->({
+export const actionChangeExportBackground = register({
   name: "changeExportBackground",
   label: "imageExportDialog.label.withBackground",
   trackEvent: { category: "export", action: "toggleBackground" },
@@ -125,9 +121,7 @@ export const actionChangeExportBackground = register<
   ),
 });
 
-export const actionChangeExportEmbedScene = register<
-  AppState["exportEmbedScene"]
->({
+export const actionChangeExportEmbedScene = register({
   name: "changeExportEmbedScene",
   label: "imageExportDialog.tooltip.embedScene",
   trackEvent: { category: "export", action: "embedScene" },
@@ -294,9 +288,7 @@ export const actionLoadScene = register({
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
 });
 
-export const actionExportWithDarkMode = register<
-  AppState["exportWithDarkMode"]
->({
+export const actionExportWithDarkMode = register({
   name: "exportWithDarkMode",
   label: "imageExportDialog.label.darkMode",
   trackEvent: { category: "export", action: "toggleTheme" },

packages/excalidraw/actions/actionFinalize.tsx

@@ -1,6 +1,10 @@
 import { pointFrom } from "@excalidraw/math";
 
-import { bindOrUnbindBindingElement } from "@excalidraw/element/binding";
+import {
+  maybeBindLinearElement,
+  bindOrUnbindLinearElement,
+  isBindingEnabled,
+} from "@excalidraw/element/binding";
 import {
   isValidPolygon,
   LinearElementEditor,
@@ -17,7 +21,7 @@ import {
 import {
   KEYS,
   arrayToMap,
-  invariant,
+  tupleToCoors,
   updateActiveTool,
 } from "@excalidraw/common";
 import { isPathALoop } from "@excalidraw/element";
@@ -26,12 +30,11 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
+import type { LocalPoint } from "@excalidraw/math";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   NonDeleted,
-  PointsPositionUpdates,
 } from "@excalidraw/element/types";
 
 import { t } from "../i18n";
@@ -43,37 +46,20 @@ import { register } from "./register";
 
 import type { AppState } from "../types";
 
-type FormData = {
-  event: PointerEvent;
-  sceneCoords: { x: number; y: number };
-};
-
-export const actionFinalize = register<FormData>({
+export const actionFinalize = register({
   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 (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",
-      );
-
+    if (event && appState.selectedLinearElement) {
       const linearElementEditor = LinearElementEditor.handlePointerUp(
         event,
         appState.selectedLinearElement,
@@ -81,48 +67,19 @@ export const actionFinalize = register<FormData>({
         app.scene,
       );
 
+      const { startBindingElement, endBindingElement } = linearElementEditor;
+      const element = app.scene.getElement(linearElementEditor.elementId);
       if (isBindingElement(element)) {
-        const newArrow = !!appState.newElement;
-
-        const selectedPointsIndices =
-          newArrow || !appState.selectedLinearElement.selectedPointsIndices
-            ? [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,
-          });
-        }
+        bindOrUnbindLinearElement(
+          element,
+          startBindingElement,
+          endBindingElement,
+          app.scene,
+        );
       }
 
       if (linearElementEditor !== appState.selectedLinearElement) {
-        // `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.
-
+        let newElements = elements;
         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) => {
@@ -134,8 +91,39 @@ export const actionFinalize = register<FormData>({
             return el;
           });
         }
+        return {
+          elements: newElements,
+          appState: {
+            selectedLinearElement: {
+              ...linearElementEditor,
+              selectedPointsIndices: null,
+            },
+            suggestedBindings: [],
+          },
+          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+        };
+      }
+    }
 
-        const activeToolLocked = appState.activeTool?.locked;
+    if (appState.selectedLinearElement?.isEditing) {
+      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:
@@ -146,31 +134,23 @@ export const actionFinalize = register<FormData>({
                   }
                   return el;
                 })
-              : newElements,
+              : undefined,
           appState: {
             ...appState,
             cursorButton: "up",
-            selectedLinearElement: activeToolLocked
-              ? null
-              : {
-                  ...linearElementEditor,
-                  selectedPointsIndices: null,
-                  isEditing: false,
-                  initialState: {
-                    ...linearElementEditor.initialState,
-                    lastClickedPoint: -1,
-                  },
-                },
-            selectionElement: null,
-            suggestedBinding: null,
-            newElement: null,
-            multiElement: null,
+            selectedLinearElement: new LinearElementEditor(
+              element,
+              arrayToMap(elementsMap),
+              false, // exit editing mode
+            ),
           },
           captureUpdate: CaptureUpdateAction.IMMEDIATELY,
         };
       }
     }
 
+    let newElements = elements;
+
     if (window.document.activeElement instanceof HTMLElement) {
       focusContainer();
     }
@@ -194,14 +174,8 @@ export const actionFinalize = register<FormData>({
 
     if (element) {
       // pen and mouse have hover
-      if (
-        appState.selectedLinearElement &&
-        appState.multiElement &&
-        element.type !== "freedraw" &&
-        appState.lastPointerDownWith !== "touch"
-      ) {
-        const { points } = element;
-        const { lastCommittedPoint } = appState.selectedLinearElement;
+      if (appState.multiElement && element.type !== "freedraw") {
+        const { points, lastCommittedPoint } = element;
         if (
           !lastCommittedPoint ||
           points[points.length - 1] !== lastCommittedPoint
@@ -253,6 +227,25 @@ export const actionFinalize = register<FormData>({
             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);
+        }
       }
     }
 
@@ -278,25 +271,6 @@ export const actionFinalize = register<FormData>({
       });
     }
 
-    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: {
@@ -314,7 +288,7 @@ export const actionFinalize = register<FormData>({
         multiElement: null,
         editingTextElement: null,
         startBoundElement: null,
-        suggestedBinding: null,
+        suggestedBindings: [],
         selectedElementIds:
           element &&
           !appState.activeTool.locked &&
@@ -324,8 +298,11 @@ export const actionFinalize = register<FormData>({
                 [element.id]: true,
               }
             : appState.selectedElementIds,
-
-        selectedLinearElement,
+        // To select the linear element when user has finished mutipoint editing
+        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,13 +38,15 @@ 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",
@@ -72,11 +74,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(101, 0);
+    expect(rec1.y).toBeCloseTo(100, 0);
 
     const rec2 = h.elements.find((el) => el.id === "rec2")!;
     expect(rec2.x).toBeCloseTo(220, 0);
-    expect(rec2.y).toBeCloseTo(251, 0);
+    expect(rec2.y).toBeCloseTo(250, 0);
   });
 });
 
@@ -97,8 +99,8 @@ describe("flipping arrowheads", () => {
       endArrowhead: null,
       endBinding: {
         elementId: rect.id,
-        fixedPoint: [0.5, 0.5],
-        mode: "orbit",
+        focus: 0.5,
+        gap: 5,
       },
     });
 
@@ -137,13 +139,13 @@ describe("flipping arrowheads", () => {
       endArrowhead: "circle",
       startBinding: {
         elementId: rect.id,
-        fixedPoint: [0.5, 0.5],
-        mode: "orbit",
+        focus: 0.5,
+        gap: 5,
       },
       endBinding: {
         elementId: rect2.id,
-        fixedPoint: [0.5, 0.5],
-        mode: "orbit",
+        focus: 0.5,
+        gap: 5,
       },
     });
 
@@ -193,8 +195,8 @@ describe("flipping arrowheads", () => {
       endArrowhead: null,
       endBinding: {
         elementId: rect.id,
-        fixedPoint: [0.5, 0.5],
-        mode: "orbit",
+        focus: 0.5,
+        gap: 5,
       },
     });
 

packages/excalidraw/actions/actionFlip.ts

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

packages/excalidraw/actions/actionNavigate.tsx

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

packages/excalidraw/actions/actionProperties.tsx

@@ -1,5 +1,4 @@
 import { pointFrom } from "@excalidraw/math";
-
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import {
@@ -21,13 +20,12 @@ import {
   getLineHeight,
   isTransparent,
   reduceToCommonValue,
-  invariant,
 } from "@excalidraw/common";
 
 import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
 
 import {
-  bindBindingElement,
+  bindLinearElement,
   calculateFixedPointForElbowArrowBinding,
   updateBoundElements,
 } from "@excalidraw/element";
@@ -61,7 +59,7 @@ import {
 
 import { deriveStylesPanelMode } from "@excalidraw/common";
 
-import type { LocalPoint, Radians } from "@excalidraw/math";
+import type { LocalPoint } from "@excalidraw/math";
 
 import type {
   Arrowhead,
@@ -308,15 +306,13 @@ const changeFontSize = (
 
 // -----------------------------------------------------------------------------
 
-export const actionChangeStrokeColor = register<
-  Pick<AppState, "currentItemStrokeColor">
->({
+export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   label: "labels.stroke",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      ...(value?.currentItemStrokeColor && {
+      ...(value.currentItemStrokeColor && {
         elements: changeProperty(
           elements,
           appState,
@@ -334,7 +330,7 @@ export const actionChangeStrokeColor = register<
         ...appState,
         ...value,
       },
-      captureUpdate: !!value?.currentItemStrokeColor
+      captureUpdate: !!value.currentItemStrokeColor
         ? CaptureUpdateAction.IMMEDIATELY
         : CaptureUpdateAction.EVENTUALLY,
     };
@@ -370,14 +366,12 @@ export const actionChangeStrokeColor = register<
   },
 });
 
-export const actionChangeBackgroundColor = register<
-  Pick<AppState, "currentItemBackgroundColor" | "viewBackgroundColor">
->({
+export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
   label: "labels.changeBackground",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
-    if (!value?.currentItemBackgroundColor) {
+    if (!value.currentItemBackgroundColor) {
       return {
         appState: {
           ...appState,
@@ -457,7 +451,7 @@ export const actionChangeBackgroundColor = register<
   },
 });
 
-export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
+export const actionChangeFillStyle = register({
   name: "changeFillStyle",
   label: "labels.fill",
   trackEvent: false,
@@ -539,9 +533,7 @@ export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
   },
 });
 
-export const actionChangeStrokeWidth = register<
-  ExcalidrawElement["strokeWidth"]
->({
+export const actionChangeStrokeWidth = register({
   name: "changeStrokeWidth",
   label: "labels.strokeWidth",
   trackEvent: false,
@@ -597,7 +589,7 @@ export const actionChangeStrokeWidth = register<
   ),
 });
 
-export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
+export const actionChangeSloppiness = register({
   name: "changeSloppiness",
   label: "labels.sloppiness",
   trackEvent: false,
@@ -651,9 +643,7 @@ export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
   ),
 });
 
-export const actionChangeStrokeStyle = register<
-  ExcalidrawElement["strokeStyle"]
->({
+export const actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
   label: "labels.strokeStyle",
   trackEvent: false,
@@ -706,7 +696,7 @@ export const actionChangeStrokeStyle = register<
   ),
 });
 
-export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
+export const actionChangeOpacity = register({
   name: "changeOpacity",
   label: "labels.opacity",
   trackEvent: false,
@@ -730,100 +720,89 @@ export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
   ),
 });
 
-export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
-  {
-    name: "changeFontSize",
-    label: "labels.fontSize",
-    trackEvent: false,
-    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>
-      );
-    },
+export const actionChangeFontSize = register({
+  name: "changeFontSize",
+  label: "labels.fontSize",
+  trackEvent: false,
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, () => 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>
+    );
+  },
+});
 
 export const actionDecreaseFontSize = register({
   name: "decreaseFontSize",
@@ -883,10 +862,7 @@ type ChangeFontFamilyData = Partial<
   resetContainers?: true;
 };
 
-export const actionChangeFontFamily = register<{
-  currentItemFontFamily: any;
-  currentHoveredFontFamily: any;
-}>({
+export const actionChangeFontFamily = register({
   name: "changeFontFamily",
   label: "labels.fontFamily",
   trackEvent: false,
@@ -923,8 +899,6 @@ export const actionChangeFontFamily = register<{
       };
     }
 
-    invariant(value, "actionChangeFontFamily: value must be defined");
-
     const { currentItemFontFamily, currentHoveredFontFamily } = value;
 
     let nextCaptureUpdateAction: CaptureUpdateActionType =
@@ -1267,7 +1241,7 @@ export const actionChangeFontFamily = register<{
   },
 });
 
-export const actionChangeTextAlign = register<TextAlign>({
+export const actionChangeTextAlign = register({
   name: "changeTextAlign",
   label: "Change text alignment",
   trackEvent: false,
@@ -1368,7 +1342,7 @@ export const actionChangeTextAlign = register<TextAlign>({
   },
 });
 
-export const actionChangeVerticalAlign = register<VerticalAlign>({
+export const actionChangeVerticalAlign = register({
   name: "changeVerticalAlign",
   label: "Change vertical alignment",
   trackEvent: { category: "element" },
@@ -1468,7 +1442,7 @@ export const actionChangeVerticalAlign = register<VerticalAlign>({
   },
 });
 
-export const actionChangeRoundness = register<"sharp" | "round">({
+export const actionChangeRoundness = register({
   name: "changeRoundness",
   label: "Change edge roundness",
   trackEvent: false,
@@ -1625,16 +1599,15 @@ const getArrowheadOptions = (flip: boolean) => {
   ] as const;
 };
 
-export const actionChangeArrowhead = register<{
-  position: "start" | "end";
-  type: Arrowhead;
-}>({
+export const actionChangeArrowhead = register({
   name: "changeArrowhead",
   label: "Change arrowheads",
   trackEvent: false,
-  perform: (elements, appState, value) => {
-    invariant(value, "actionChangeArrowhead: value must be defined");
-
+  perform: (
+    elements,
+    appState,
+    value: { position: "start" | "end"; type: Arrowhead },
+  ) => {
     return {
       elements: changeProperty(elements, appState, (el) => {
         if (isLinearElement(el)) {
@@ -1729,7 +1702,7 @@ export const actionChangeArrowProperties = register({
   },
 });
 
-export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
+export const actionChangeArrowType = register({
   name: "changeArrowType",
   label: "Change arrow types",
   trackEvent: false,
@@ -1738,20 +1711,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
       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
             ? {
@@ -1759,31 +1719,9 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
               }
             : null,
         elbowed: value === ARROW_TYPE.elbow,
-        angle: value === ARROW_TYPE.elbow ? (0 as Radians) : el.angle,
         points:
           value === ARROW_TYPE.elbow || el.elbowed
-            ? [
-                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[0], el.points[el.points.length - 1]]
             : el.points,
       });
 
@@ -1865,13 +1803,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
             newElement.startBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (startElement) {
-            bindBindingElement(
-              newElement,
-              startElement,
-              appState.bindMode === "inside" ? "inside" : "orbit",
-              "start",
-              app.scene,
-            );
+            bindLinearElement(newElement, startElement, "start", app.scene);
           }
         }
         if (newElement.endBinding) {
@@ -1879,13 +1811,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
             newElement.endBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (endElement) {
-            bindBindingElement(
-              newElement,
-              endElement,
-              appState.bindMode === "inside" ? "inside" : "orbit",
-              "end",
-              app.scene,
-            );
+            bindLinearElement(newElement, endElement, "end", app.scene);
           }
         }
       }

packages/excalidraw/actions/register.ts

@@ -2,12 +2,7 @@ import type { Action } from "./types";
 
 export let actions: readonly Action[] = [];
 
-export const register = <
-  TData extends any,
-  T extends Action<TData> = Action<TData>,
->(
-  action: T,
-) => {
+export const register = <T extends Action>(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<TData = any> = (
+type ActionFn = (
   elements: readonly OrderedExcalidrawElement[],
   appState: Readonly<AppState>,
-  formData: TData | undefined,
+  formData: any,
   app: AppClassProperties,
 ) => ActionResult | Promise<ActionResult>;
 
@@ -157,7 +157,7 @@ export type PanelComponentProps = {
   ) => React.JSX.Element | null;
 };
 
-export interface Action<TData = any> {
+export interface Action {
   name: ActionName;
   label:
     | string
@@ -174,7 +174,7 @@ export interface Action<TData = any> {
         elements: readonly ExcalidrawElement[],
       ) => React.ReactNode);
   PanelComponent?: React.FC<PanelComponentProps>;
-  perform: ActionFn<TData>;
+  perform: ActionFn;
   keyPriority?: number;
   keyTest?: (
     event: React.KeyboardEvent | KeyboardEvent,

packages/excalidraw/appState.ts

@@ -100,7 +100,7 @@ export const getDefaultAppState = (): Omit<
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
     },
     startBoundElement: null,
-    suggestedBinding: null,
+    suggestedBindings: [],
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
     editingFrame: null,
@@ -127,7 +127,6 @@ export const getDefaultAppState = (): Omit<
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
-    bindMode: "orbit",
   };
 };
 
@@ -230,7 +229,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 },
-  suggestedBinding: { browser: false, export: false, server: false },
+  suggestedBindings: { 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 },
@@ -253,7 +252,6 @@ 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 },
-  bindMode: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -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,5 +1,6 @@
 import type { ActionManager } from "../../actions/manager";
 import type { Action } from "../../actions/types";
+import type { UIAppState } from "../../types";
 
 export type CommandPaletteItem = {
   label: string;
@@ -11,7 +12,7 @@ export type CommandPaletteItem = {
    * (deburred name + keywords)
    */
   haystack?: string;
-  icon?: Action["icon"];
+  icon?: React.ReactNode | ((appState: UIAppState) => React.ReactNode);
   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, app.state);
+    updateBindings(nextElement, app.scene);
 
     return nextElement;
   }

packages/excalidraw/components/HintViewer.tsx

@@ -62,20 +62,6 @@ 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", {
@@ -103,6 +89,8 @@ const getHints = ({
     return t("hints.embeddable");
   }
 
+  const selectedElements = app.scene.getSelectedElements(appState);
+
   if (
     isResizing &&
     lastPointerDownWith === "mouse" &&

packages/excalidraw/components/LayerUI.tsx

@@ -646,8 +646,14 @@ const LayerUI = ({
 };
 
 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
-    appState;
+  const {
+    suggestedBindings,
+    startBoundElement,
+    cursorButton,
+    scrollX,
+    scrollY,
+    ...ret
+  } = appState;
   return ret;
 };
 

packages/excalidraw/components/Stats/Angle.tsx

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

packages/excalidraw/components/Stats/MultiDimension.tsx

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

packages/excalidraw/components/Stats/Position.tsx

@@ -34,7 +34,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
   property,
   scene,
   originalAppState,
-  app,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   const origElement = originalElements[0];
@@ -132,7 +131,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
       newTopLeftY,
       origElement,
       scene,
-      app.state,
       originalElementsMap,
     );
     return;
@@ -164,7 +162,6 @@ 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 { isImageElement } from "@excalidraw/element";
+import { isElbowArrow, isImageElement } from "@excalidraw/element";
 
 import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
 
@@ -333,14 +333,16 @@ export const StatsInner = memo(
                           appState={appState}
                         />
                       </StatsRow>
-                      <StatsRow>
-                        <Angle
-                          property="angle"
-                          element={singleElement}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
+                      {!isElbowArrow(singleElement) && (
+                        <StatsRow>
+                          <Angle
+                            property="angle"
+                            element={singleElement}
+                            scene={scene}
+                            appState={appState}
+                          />
+                        </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,7 +135,18 @@ describe("binding with linear elements", () => {
     ) as HTMLInputElement;
     expect(linear.startBinding).not.toBe(null);
     expect(inputX).not.toBeNull();
-    UI.updateInput(inputX, String("186"));
+    UI.updateInput(inputX, String("204"));
+    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);
   });
 
@@ -150,6 +161,17 @@ 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,10 +1,6 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
-import {
-  getBoundTextElement,
-  isBindingElement,
-  unbindBindingElement,
-} from "@excalidraw/element";
+import { getBoundTextElement } from "@excalidraw/element";
 import { isFrameLikeElement } from "@excalidraw/element";
 
 import {
@@ -16,7 +12,6 @@ import {
 import { getFrameChildren } from "@excalidraw/element";
 
 import { updateBindings } from "@excalidraw/element";
-import { DRAGGING_THRESHOLD } from "@excalidraw/common";
 
 import type { Radians } from "@excalidraw/math";
 
@@ -115,25 +110,9 @@ 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) {
@@ -166,7 +145,7 @@ export const moveElement = (
     },
     { informMutation: shouldInformMutation, isDragging: false },
   );
-  updateBindings(latestElement, scene, appState);
+  updateBindings(latestElement, scene);
 
   const boundTextElement = getBoundTextElement(
     originalElement,
@@ -224,7 +203,7 @@ export const moveElement = (
         },
         { informMutation: shouldInformMutation, isDragging: false },
       );
-      updateBindings(latestChildElement, scene, appState, {
+      updateBindings(latestChildElement, scene, {
         simultaneouslyUpdated: originalChildren,
       });
     });

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -157,8 +157,6 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
         remotePointerUserStates,
         selectionColor,
         renderScrollbars: props.renderScrollbars,
-        // NOTE not memoized on so we don't rerender on cursor move
-        lastViewportPosition: props.app.lastViewportPosition,
       },
       editorInterface: props.editorInterface,
       callback: props.renderInteractiveSceneCallback,
@@ -244,9 +242,8 @@ const getRelevantAppStateProps = (
   selectedGroupIds: appState.selectedGroupIds,
   selectedLinearElement: appState.selectedLinearElement,
   multiElement: appState.multiElement,
-  newElement: appState.newElement,
   isBindingEnabled: appState.isBindingEnabled,
-  suggestedBinding: appState.suggestedBinding,
+  suggestedBindings: appState.suggestedBindings,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,
   collaborators: appState.collaborators, // Necessary for collab. sessions
@@ -258,10 +255,6 @@ 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,7 +99,6 @@ const getRelevantAppStateProps = (appState: AppState): StaticCanvasAppState => {
     editingGroupId: appState.editingGroupId,
     currentHoveredFontFamily: appState.currentHoveredFontFamily,
     croppingElementId: appState.croppingElementId,
-    suggestedBinding: appState.suggestedBinding,
   };
 
   return relevantAppStateProps;

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

@@ -88,11 +88,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "fixedPoint": [
-      0.04,
-      0.4633333333333333,
-    ],
-    "mode": "orbit",
+    "focus": -0.007519379844961235,
+    "gap": 11.562288374879595,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -101,6 +98,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "id": Any<String>,
   "index": "a2",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -120,11 +118,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id49",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": -0.0813953488372095,
+    "gap": 1,
   },
   "strokeColor": "#1864ab",
   "strokeStyle": "solid",
@@ -149,11 +144,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "fixedPoint": [
-      -0.01,
-      0.44666666666666666,
-    ],
-    "mode": "orbit",
+    "focus": 0.10666666666666667,
+    "gap": 3.8343264684446097,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -162,6 +154,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "id": Any<String>,
   "index": "a3",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -181,11 +174,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "diamond-1",
-    "fixedPoint": [
-      0.9357142857142857,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 4.535423522449215,
   },
   "strokeColor": "#e67700",
   "strokeStyle": "solid",
@@ -344,11 +334,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "text-2",
-    "fixedPoint": [
-      -2.05,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 16,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -357,6 +344,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "id": Any<String>,
   "index": "a2",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -376,11 +364,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "startArrowhead": null,
   "startBinding": {
     "elementId": "text-1",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -451,11 +436,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id42",
-    "fixedPoint": [
-      0,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": -0,
+    "gap": 1,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -464,6 +446,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "id": Any<String>,
   "index": "a0",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -483,11 +466,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id41",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -632,11 +612,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id46",
-    "fixedPoint": [
-      0,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": -0,
+    "gap": 1,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -645,6 +622,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "id": Any<String>,
   "index": "a0",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -664,11 +642,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id45",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -864,6 +839,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "id": Any<String>,
   "index": "a0",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -911,6 +887,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "id": Any<String>,
   "index": "a1",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -957,6 +934,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
   "id": Any<String>,
   "index": "a2",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -1004,6 +982,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
   "id": Any<String>,
   "index": "a3",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -1497,11 +1476,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "Alice",
-    "fixedPoint": [
-      -0.07542628418945944,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": -0,
+    "gap": 5.299874999999986,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -1510,6 +1486,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "id": Any<String>,
   "index": "a4",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -1531,11 +1508,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "fixedPoint": [
-      1.000004978564514,
-      0.5001,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -1565,11 +1539,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "B",
-    "fixedPoint": [
-      0.46387050630528887,
-      0.48466257668711654,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 32,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -1578,6 +1549,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "id": Any<String>,
   "index": "a5",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -1595,11 +1567,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "fixedPoint": [
-      0.39381496335223337,
-      1,
-    ],
-    "mode": "orbit",
+    "focus": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -1889,6 +1858,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "id": Any<String>,
   "index": "a0",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -1941,6 +1911,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "id": Any<String>,
   "index": "a1",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -1993,6 +1964,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "id": Any<String>,
   "index": "a2",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -2045,6 +2017,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "id": Any<String>,
   "index": "a3",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "locked": false,
   "opacity": 100,

packages/excalidraw/data/blob.ts

@@ -7,6 +7,8 @@ import {
   isPromiseLike,
 } from "@excalidraw/common";
 
+import { clearElementsForExport } from "@excalidraw/element";
+
 import type { ValueOf } from "@excalidraw/common/utility-types";
 import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
 
@@ -157,7 +159,7 @@ export const loadSceneOrLibraryFromBlob = async (
         type: MIME_TYPES.excalidraw,
         data: restore(
           {
-            elements: data.elements || [],
+            elements: clearElementsForExport(data.elements || []),
             appState: {
               theme: localAppState?.theme,
               fileHandle: fileHandle || blob.handle || null,

packages/excalidraw/data/encode.ts

@@ -222,7 +222,7 @@ function dataView(
  *
  * @param buffers each buffer (chunk) must be at most 2^32 bits large (~4GB)
  */
-const concatBuffers = (...buffers: Uint8Array[]): Uint8Array<ArrayBuffer> => {
+const concatBuffers = (...buffers: Uint8Array[]) => {
   const bufferView = new Uint8Array(
     VERSION_DATAVIEW_BYTES +
       NEXT_CHUNK_SIZE_DATAVIEW_BYTES * buffers.length +
@@ -295,12 +295,12 @@ const splitBuffers = (concatenatedBuffer: Uint8Array) => {
 
 /** @private */
 const _encryptAndCompress = async (
-  data: Uint8Array<ArrayBuffer> | string,
+  data: Uint8Array | string,
   encryptionKey: string,
 ) => {
   const { encryptedBuffer, iv } = await encryptData(
     encryptionKey,
-    deflate(data) as Uint8Array<ArrayBuffer>,
+    deflate(data),
   );
 
   return { iv, buffer: new Uint8Array(encryptedBuffer) };
@@ -330,7 +330,7 @@ export const compressData = async <T extends Record<string, any> = never>(
     : {
         metadata: T;
       }),
-): Promise<Uint8Array<ArrayBuffer>> => {
+): Promise<Uint8Array> => {
   const fileInfo: FileEncodingInfo = {
     version: 2,
     compression: "pako@1",
@@ -355,8 +355,8 @@ export const compressData = async <T extends Record<string, any> = never>(
 
 /** @private */
 const _decryptAndDecompress = async (
-  iv: Uint8Array<ArrayBuffer>,
-  decryptedBuffer: Uint8Array<ArrayBuffer>,
+  iv: Uint8Array,
+  decryptedBuffer: Uint8Array,
   decryptionKey: string,
   isCompressed: boolean,
 ) => {

packages/excalidraw/data/encryption.ts

@@ -4,7 +4,7 @@ import { blobToArrayBuffer } from "./blob";
 
 export const IV_LENGTH_BYTES = 12;
 
-export const createIV = (): Uint8Array<ArrayBuffer> => {
+export const createIV = () => {
   const arr = new Uint8Array(IV_LENGTH_BYTES);
   return window.crypto.getRandomValues(arr);
 };
@@ -49,12 +49,12 @@ export const getCryptoKey = (key: string, usage: KeyUsage) =>
 
 export const encryptData = async (
   key: string | CryptoKey,
-  data: Uint8Array<ArrayBuffer> | ArrayBuffer | Blob | File | string,
-): Promise<{ encryptedBuffer: ArrayBuffer; iv: Uint8Array<ArrayBuffer> }> => {
+  data: Uint8Array | ArrayBuffer | Blob | File | string,
+): Promise<{ encryptedBuffer: ArrayBuffer; iv: Uint8Array }> => {
   const importedKey =
     typeof key === "string" ? await getCryptoKey(key, "encrypt") : key;
   const iv = createIV();
-  const buffer: ArrayBuffer | Uint8Array<ArrayBuffer> =
+  const buffer: ArrayBuffer | Uint8Array =
     typeof data === "string"
       ? new TextEncoder().encode(data)
       : data instanceof Uint8Array
@@ -71,15 +71,15 @@ export const encryptData = async (
       iv,
     },
     importedKey,
-    buffer,
+    buffer as ArrayBuffer | Uint8Array,
   );
 
   return { encryptedBuffer, iv };
 };
 
 export const decryptData = async (
-  iv: Uint8Array<ArrayBuffer>,
-  encrypted: Uint8Array<ArrayBuffer> | ArrayBuffer,
+  iv: Uint8Array,
+  encrypted: Uint8Array | ArrayBuffer,
   privateKey: string,
 ): Promise<ArrayBuffer> => {
   const key = await getCryptoKey(privateKey, "decrypt");

packages/excalidraw/data/json.ts

@@ -6,6 +6,11 @@ import {
   VERSIONS,
 } from "@excalidraw/common";
 
+import {
+  clearElementsForDatabase,
+  clearElementsForExport,
+} from "@excalidraw/element";
+
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
@@ -52,7 +57,10 @@ export const serializeAsJSON = (
     type: EXPORT_DATA_TYPES.excalidraw,
     version: VERSIONS.excalidraw,
     source: getExportSource(),
-    elements,
+    elements:
+      type === "local"
+        ? clearElementsForExport(elements)
+        : clearElementsForDatabase(elements),
     appState:
       type === "local"
         ? cleanAppStateForExport(appState)

packages/excalidraw/data/restore.ts

@@ -18,13 +18,7 @@ import {
   normalizeLink,
   getLineHeight,
 } from "@excalidraw/common";
-import {
-  calculateFixedPointForNonElbowArrowBinding,
-  getNonDeletedElements,
-  isPointInElement,
-  isValidPolygon,
-  projectFixedPointOntoDiagonal,
-} from "@excalidraw/element";
+import { getNonDeletedElements, isValidPolygon } from "@excalidraw/element";
 import { normalizeFixedPoint } from "@excalidraw/element";
 import {
   updateElbowArrowPoints,
@@ -38,6 +32,7 @@ import {
   isArrowBoundToElement,
   isArrowElement,
   isElbowArrow,
+  isFixedPointBinding,
   isLinearElement,
   isLineElement,
   isTextElement,
@@ -55,11 +50,10 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 import type { LocalPoint, Radians } from "@excalidraw/math";
 
 import type {
-  ElementsMap,
   ExcalidrawArrowElement,
-  ExcalidrawBindableElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawElement,
+  ExcalidrawElementType,
   ExcalidrawLinearElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
@@ -67,6 +61,7 @@ import type {
   FontFamilyValues,
   NonDeletedSceneElementsMap,
   OrderedExcalidrawElement,
+  PointBinding,
   StrokeRoundness,
 } from "@excalidraw/element/types";
 
@@ -126,74 +121,38 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
   return DEFAULT_FONT_FAMILY;
 };
 
-const repairBinding = <T extends ExcalidrawArrowElement>(
+const repairBinding = <T extends ExcalidrawLinearElement>(
   element: T,
-  binding: FixedPointBinding | null,
-  elementsMap: Readonly<ElementsMap>,
-  startOrEnd: "start" | "end",
-): FixedPointBinding | null => {
+  binding: PointBinding | FixedPointBinding | null,
+): T extends ExcalidrawElbowArrowElement
+  ? FixedPointBinding | null
+  : PointBinding | FixedPointBinding | null => {
   if (!binding) {
     return null;
   }
 
+  const focus = binding.focus || 0;
+
   if (isElbowArrow(element)) {
     const fixedPointBinding:
       | ExcalidrawElbowArrowElement["startBinding"]
-      | ExcalidrawElbowArrowElement["endBinding"] = {
-      ...binding,
-      fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
-      mode: binding.mode || "orbit",
-    };
+      | ExcalidrawElbowArrowElement["endBinding"] = isFixedPointBinding(binding)
+      ? {
+          ...binding,
+          focus,
+          fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
+        }
+      : null;
 
     return fixedPointBinding;
   }
 
-  const boundElement =
-    (elementsMap.get(binding.elementId) as ExcalidrawBindableElement) ||
-    undefined;
-  if (boundElement) {
-    if (binding.mode) {
-      return {
-        elementId: binding.elementId,
-        mode: binding.mode || "orbit",
-        fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5]),
-      } as FixedPointBinding | null;
-    }
-
-    const p = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-      element,
-      startOrEnd === "start" ? 0 : element.points.length - 1,
-      elementsMap,
-    );
-    const mode = isPointInElement(p, boundElement, elementsMap)
-      ? "inside"
-      : "orbit";
-    const focusPoint =
-      mode === "inside"
-        ? p
-        : projectFixedPointOntoDiagonal(
-            element,
-            p,
-            boundElement,
-            startOrEnd,
-            elementsMap,
-          ) || p;
-    const { fixedPoint } = calculateFixedPointForNonElbowArrowBinding(
-      element,
-      boundElement,
-      startOrEnd,
-      elementsMap,
-      focusPoint,
-    );
-
-    return {
-      mode,
-      elementId: binding.elementId,
-      fixedPoint,
-    };
-  }
-
-  return null;
+  return {
+    ...binding,
+    focus,
+  } as T extends ExcalidrawElbowArrowElement
+    ? FixedPointBinding | null
+    : PointBinding | FixedPointBinding | null;
 };
 
 const restoreElementWithProperties = <
@@ -284,10 +243,7 @@ const restoreElementWithProperties = <
 
 export const restoreElement = (
   element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-  elementsMap: Readonly<ElementsMap>,
-  opts?: {
-    deleteInvisibleElements?: boolean;
-  },
+  opts?: { deleteInvisibleElements?: boolean },
 ): typeof element | null => {
   element = { ...element };
 
@@ -345,6 +301,7 @@ export const restoreElement = (
     case "freedraw": {
       return restoreElementWithProperties(element, {
         points: element.points,
+        lastCommittedPoint: null,
         simulatePressure: element.simulatePressure,
         pressures: element.pressures,
       });
@@ -374,9 +331,13 @@ export const restoreElement = (
       }
 
       return restoreElementWithProperties(element, {
-        type: "line",
-        startBinding: null,
-        endBinding: null,
+        type:
+          (element.type as ExcalidrawElementType | "draw") === "draw"
+            ? "line"
+            : element.type,
+        startBinding: repairBinding(element, element.startBinding),
+        endBinding: repairBinding(element, element.endBinding),
+        lastCommittedPoint: null,
         startArrowhead,
         endArrowhead,
         points,
@@ -393,27 +354,23 @@ export const restoreElement = (
       });
     case "arrow": {
       const { startArrowhead = null, endArrowhead = "arrow" } = element;
-      const x: number | undefined = element.x;
-      const y: number | undefined = element.y;
-      const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
+      let x: number | undefined = element.x;
+      let y: number | undefined = element.y;
+      let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
           ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
           : element.points;
 
+      if (points[0][0] !== 0 || points[0][1] !== 0) {
+        ({ points, x, y } =
+          LinearElementEditor.getNormalizeElementPointsAndCoords(element));
+      }
+
       const base = {
         type: element.type,
-        startBinding: repairBinding(
-          element as ExcalidrawArrowElement,
-          element.startBinding,
-          elementsMap,
-          "start",
-        ),
-        endBinding: repairBinding(
-          element as ExcalidrawArrowElement,
-          element.endBinding,
-          elementsMap,
-          "end",
-        ),
+        startBinding: repairBinding(element, element.startBinding),
+        endBinding: repairBinding(element, element.endBinding),
+        lastCommittedPoint: null,
         startArrowhead,
         endArrowhead,
         points,
@@ -421,13 +378,15 @@ export const restoreElement = (
         y,
         elbowed: (element as ExcalidrawArrowElement).elbowed,
         ...getSizeFromPoints(points),
-      };
+      } as const;
 
       // TODO: Separate arrow from linear element
-      const restoredElement = isElbowArrow(element)
+      return isElbowArrow(element)
         ? restoreElementWithProperties(element as ExcalidrawElbowArrowElement, {
             ...base,
             elbowed: true,
+            startBinding: repairBinding(element, element.startBinding),
+            endBinding: repairBinding(element, element.endBinding),
             fixedSegments:
               element.fixedSegments?.length && base.points.length >= 4
                 ? element.fixedSegments
@@ -436,13 +395,6 @@ export const restoreElement = (
             endIsSpecial: element.endIsSpecial,
           })
         : restoreElementWithProperties(element as ExcalidrawArrowElement, base);
-
-      return {
-        ...restoredElement,
-        ...LinearElementEditor.getNormalizeElementPointsAndCoords(
-          restoredElement,
-        ),
-      };
     }
 
     // generic elements
@@ -573,7 +525,7 @@ const repairFrameMembership = (
 };
 
 export const restoreElements = (
-  targetElements: ImportedDataState["elements"],
+  elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
   opts?:
@@ -586,23 +538,18 @@ export const restoreElements = (
 ): OrderedExcalidrawElement[] => {
   // used to detect duplicate top-level element ids
   const existingIds = new Set<string>();
-  const elementsMap = arrayToMap(targetElements || []);
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
   const restoredElements = syncInvalidIndices(
-    (targetElements || []).reduce((elements, element) => {
+    (elements || []).reduce((elements, element) => {
       // filtering out selection, which is legacy, no longer kept in elements,
       // and causing issues if retained
       if (element.type === "selection") {
         return elements;
       }
 
-      let migratedElement: ExcalidrawElement | null = restoreElement(
-        element,
-        elementsMap,
-        {
-          deleteInvisibleElements: opts?.deleteInvisibleElements,
-        },
-      );
+      let migratedElement: ExcalidrawElement | null = restoreElement(element, {
+        deleteInvisibleElements: opts?.deleteInvisibleElements,
+      });
       if (migratedElement) {
         const localElement = localElementsMap?.get(element.id);
 

packages/excalidraw/data/transform.test.ts

@@ -432,9 +432,12 @@ describe("Test Transform", () => {
         boundElements: [{ id: text.id, type: "text" }],
         startBinding: {
           elementId: rectangle.id,
+          focus: 0,
+          gap: 1,
         },
         endBinding: {
           elementId: ellipse.id,
+          focus: -0,
         },
       });
 
@@ -514,9 +517,12 @@ describe("Test Transform", () => {
         boundElements: [{ id: text1.id, type: "text" }],
         startBinding: {
           elementId: text2.id,
+          focus: 0,
+          gap: 1,
         },
         endBinding: {
           elementId: text3.id,
+          focus: -0,
         },
       });
 
@@ -774,8 +780,8 @@ describe("Test Transform", () => {
       const [arrow, rect] = excalidrawElements;
       expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
         elementId: "rect-1",
-        fixedPoint: [-2.05, 0.5001],
-        mode: "orbit",
+        focus: -0,
+        gap: 25,
       });
       expect(rect.boundElements).toStrictEqual([
         {

packages/excalidraw/data/transform.ts

@@ -16,7 +16,7 @@ import {
   getLineHeight,
 } from "@excalidraw/common";
 
-import { bindBindingElement } from "@excalidraw/element";
+import { bindLinearElement } from "@excalidraw/element";
 import {
   newArrowElement,
   newElement,
@@ -330,10 +330,9 @@ const bindLinearElementToElement = (
         }
       }
 
-      bindBindingElement(
+      bindLinearElement(
         linearElement,
         startBoundElement as ExcalidrawBindableElement,
-        "orbit",
         "start",
         scene,
       );
@@ -406,10 +405,9 @@ const bindLinearElementToElement = (
         }
       }
 
-      bindBindingElement(
+      bindLinearElement(
         linearElement,
         endBoundElement as ExcalidrawBindableElement,
-        "orbit",
         "end",
         scene,
       );

packages/excalidraw/eraser/index.ts

@@ -30,7 +30,7 @@ import { getBoundTextElementId } from "@excalidraw/element";
 
 import type { Bounds } from "@excalidraw/element";
 
-import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
+import type { GlobalPoint, LineSegment } from "@excalidraw/math";
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 import { AnimatedTrail } from "../animated-trail";

packages/excalidraw/global.d.ts

@@ -42,7 +42,7 @@ declare module "png-chunk-text" {
   function decode(data: Uint8Array): { keyword: string; text: string };
 }
 declare module "png-chunks-encode" {
-  function encode(chunks: TEXtChunk[]): Uint8Array<ArrayBuffer>;
+  function encode(chunks: TEXtChunk[]): Uint8Array;
   export = encode;
 }
 declare module "png-chunks-extract" {
@@ -101,10 +101,7 @@ declare module "image-blob-reduce" {
 
 interface CustomMatchers {
   toBeNonNaNNumber(): void;
-  toCloselyEqualPoints(
-    points: readonly [number, number][],
-    precision?: number,
-  ): void;
+  toCloselyEqualPoints(points: readonly [number, number][]): void;
 }
 
 declare namespace jest {

packages/excalidraw/hooks/useOutsideClick.ts

@@ -18,7 +18,7 @@ export function useOutsideClick<T extends HTMLElement>(
    * Returning `undefined` will fallback to the default behavior.
    */
   isInside?: (
-    event: Event & { target: T },
+    event: Event & { target: HTMLElement },
     /** the element of the passed ref */
     container: T,
   ) => boolean | undefined,

packages/excalidraw/lasso/utils.ts

@@ -15,7 +15,7 @@ import {
   intersectElementWithLineSegment,
 } from "@excalidraw/element";
 
-import type { ElementsSegmentsMap, GlobalPoint } from "@excalidraw/math/types";
+import type { ElementsSegmentsMap, GlobalPoint } from "@excalidraw/math";
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 export const getLassoSelectedElementIds = (input: {

packages/excalidraw/locales/ar-SA.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "انقر لبدء نقاط متعددة، اسحب لخط واحد",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "انقر واسحب، أفرج عند الانتهاء",
     "text": "نصيحة: يمكنك أيضًا إضافة نص بالنقر المزدوج في أي مكان بأداة الاختيار",
     "embeddable": "اضغط مع السحب لإنشاء موقع ويب مضمّن",

packages/excalidraw/locales/az-AZ.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "",
     "text": "",
     "embeddable": "",

packages/excalidraw/locales/bg-BG.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Кликнете, за да стартирате няколко точки, плъзнете за една линия",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Натиснете и влачете, пуснете като сте готови",
     "text": "Подсказка: Можете също да добавите текст като натиснете някъде два път с инструмента за селекция",
     "embeddable": "Натисни-премести, за да създадеш вметка за уебсайт",

packages/excalidraw/locales/bn-BD.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "একাধিক বিন্দু শুরু করতে ক্লিক করুন, একক লাইনের জন্য টেনে আনুন",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "ক্লিক করুন এবং টেনে আনুন, আপনার কাজ শেষ হলে ছেড়ে দিন",
     "text": "বিশেষ্য: আপনি নির্বাচন টুলের সাথে যে কোনো জায়গায় ডাবল-ক্লিক করে পাঠ্য যোগ করতে পারেন",
     "embeddable": "",

packages/excalidraw/locales/bn-IN.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "একাধিক বিন্দু শুরু করতে ক্লিক করুন, একক লাইনের জন্য টেনে আনুন",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "ক্লিক করুন এবং টেনে আনুন, আপনার কাজ শেষ হলে ছেড়ে দিন",
     "text": "বিশেষ্য: আপনি নির্বাচন টুলের সাথে যে কোনো জায়গায় ডাবল-ক্লিক করে পাঠ্য যোগ করতে পারেন",
     "embeddable": "",

packages/excalidraw/locales/ca-ES.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Feu clic per a dibuixar múltiples punts; arrossegueu per a una sola línia",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Feu clic i arrossegueu, deixeu anar per a finalitzar",
     "text": "Consell: també podeu afegir text fent doble clic en qualsevol lloc amb l'eina de selecció",
     "embeddable": "Feu clic i arrossegueu per crear una Incrustació Web",

packages/excalidraw/locales/cs-CZ.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Kliknutím pro více bodů, táhnutím pro jednu čáru",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Klikněte a táhněte, pro ukončení pusťte",
     "text": "Tip: Text můžete také přidat dvojitým kliknutím kdekoli pomocí nástroje pro výběr",
     "embeddable": "",

packages/excalidraw/locales/da-DK.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Klik og træk, slip når du er færdig",
     "text": "",
     "embeddable": "",

packages/excalidraw/locales/de-CH.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Klicken für Linie mit mehreren Punkten, Ziehen für einzelne Linie",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Klicke und ziehe. Lass los, wenn du fertig bist",
     "text": "Tipp: Du kannst auch Text hinzufügen, indem du mit dem Auswahlwerkzeug auf eine beliebige Stelle doppelklickst",
     "embeddable": "Klicken und ziehen, um eine Webseiten-Einbettung zu erstellen",

packages/excalidraw/locales/de-DE.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Klicken für Linie mit mehreren Punkten, Ziehen für einzelne Linie",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Klicke und ziehe. Lass los, wenn du fertig bist",
     "text": "Tipp: Du kannst auch Text hinzufügen, indem du mit dem Auswahlwerkzeug auf eine beliebige Stelle doppelklickst",
     "embeddable": "Klicken und ziehen, um eine Webseiten-Einbettung zu erstellen",

packages/excalidraw/locales/el-GR.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Κάνε κλικ για να ξεκινήσεις πολλαπλά σημεία, σύρε για μια γραμμή",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Κάντε κλικ και σύρτε, απελευθερώσατε όταν έχετε τελειώσει",
     "text": "Tip: μπορείτε επίσης να προσθέστε κείμενο με διπλό-κλικ οπουδήποτε με το εργαλείο επιλογών",
     "embeddable": "Κάντε κλικ και σύρετε για να δημιουργήσετε μια ενσωματωμένη ιστοσελίδα",

packages/excalidraw/locales/en.json

@@ -341,7 +341,6 @@
     "canvasPanning": "To move canvas, hold {{shortcut_1}} or {{shortcut_2}} while dragging, or use the hand tool",
     "linearElement": "Click to start multiple points, drag for single line",
     "arrowTool": "Click to start multiple points, drag for single line. Press {{shortcut}} again to change arrow type.",
-    "arrowBindModifiers": "Hold {{shortcut_1}} to disable binding, or {{shortcut_2}} to bind at a fixed point",
     "freeDraw": "Click and drag, release when you're finished",
     "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
     "embeddable": "Click-drag to create a website embed",

packages/excalidraw/locales/es-ES.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Haz clic para dibujar múltiples puntos, arrastrar para solo una línea",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Haz clic y arrastra, suelta al terminar",
     "text": "Consejo: también puedes añadir texto haciendo doble clic en cualquier lugar con la herramienta de selección",
     "embeddable": "Haga clic y arrastre para crear un sitio web incrustado",

packages/excalidraw/locales/eu-ES.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Egin klik hainbat puntu hasteko, arrastatu lerro bakarrerako",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Egin klik eta arrastatu, askatu amaitutakoan",
     "text": "Aholkua: testua gehitu dezakezu edozein lekutan klik bikoitza eginez hautapen tresnarekin",
     "embeddable": "Egin klik eta arrastatu webgunea kapsulatzeko",

packages/excalidraw/locales/fa-IR.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "برای چند نقطه کلیک و برای یک خط بکشید",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "کلیک کنید و بکشید و وقتی کار تمام شد رها کنید",
     "text": "نکته: با برنامه انتخاب شده شما میتوانید با دوبار کلیک کردن هرکجا میخواید متن اظاف کنید",
     "embeddable": "کلیک-درگ برای ساخت افزونه وب",

packages/excalidraw/locales/fi-FI.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Klikkaa piirtääksesi useampi piste, raahaa piirtääksesi yksittäinen viiva",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Paina ja raahaa, päästä irti kun olet valmis",
     "text": "Vinkki: voit myös lisätä tekstiä kaksoisnapsauttamalla mihin tahansa valintatyökalulla",
     "embeddable": "",

packages/excalidraw/locales/fr-FR.json

@@ -341,7 +341,6 @@
     "canvasPanning": "Pour déplacer le canevas, maintenez {{shortcut_1}} ou {{shortcut_2}} enfoncé tout en faisant glisser, ou utilisez l'outil main",
     "linearElement": "Cliquez pour démarrer plusieurs points, faites glisser pour une seule ligne",
     "arrowTool": "Cliquez pour démarrer plusieurs points, faites glisser pour une ligne unique. Appuyez à nouveau sur {{shortcut}} pour changer le type de flèche.",
-    "arrowBindModifiers": "",
     "freeDraw": "Cliquez et faites glissez, relâchez quand vous avez terminé",
     "text": "Astuce : vous pouvez aussi ajouter du texte en double-cliquant n'importe où avec l'outil de sélection",
     "embeddable": "Cliquez et glissez pour créer une intégration de site web",

packages/excalidraw/locales/gl-ES.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Faga clic para iniciar varios puntos, arrastre para unha sola liña",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Fai clic e arrastra, solta cando acabes",
     "text": "Consello: tamén podes engadir texto facendo dobre-clic en calquera lugar coa ferramenta de selección",
     "embeddable": "Faga clic e arrastre para crear un sitio web embebido",

packages/excalidraw/locales/he-IL.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "לחץ להתחלת מספר נקודות, גרור לקו יחיד",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "לחץ וגרור, שחרר כשסיימת",
     "text": "טיפ: אפשר להוסיף טקסט על ידי לחיצה כפולה בכל מקום עם כלי הבחירה",
     "embeddable": "לחצו וגררו כדי ליצור הטמעת אתר",

packages/excalidraw/locales/hi-IN.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "कई बिंदुओं को शुरू करने के लिए क्लिक करें, एकमात्र रेखा के लिए खींचें",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "क्लिक करें और खींचें। समाप्त करने के लिए, छोडे",
     "text": "आप चयन उपकरण से कहीं भी डबल-क्लिक करके पाठ्य को जोड़ सकते हों",
     "embeddable": "वेबसाइट बनाकर जड़ने के लिए क्लिक-ड़्रैग करें",

packages/excalidraw/locales/hu-HU.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Kattintással görbe, az eger húzásával pedig egyenes nyilat rajzolhatsz",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Kattints és húzd, majd engedd el, amikor végeztél",
     "text": "Tipp: A kijelölés eszközzel a dupla kattintás új szöveget hoz létre",
     "embeddable": "",

packages/excalidraw/locales/id-ID.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "Pencet untuk membuat titik-titik, seret untuk satu garis",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "Klik dan seret, lepaskan jika Anda selesai",
     "text": "Tip: Anda juga dapat menambahkan teks dengan klik ganda di mana saja dengan alat pemilihan",
     "embeddable": "Pencet-seret untuk membuat sematan situs",

packages/excalidraw/locales/it-IT.json

@@ -142,8 +142,8 @@
       "editArrow": "Modifica freccia"
     },
     "polygon": {
-      "breakPolygon": "Interrompi poligono",
-      "convertToPolygon": "Converti in poligono"
+      "breakPolygon": "",
+      "convertToPolygon": ""
     },
     "elementLock": {
       "lock": "Blocca",
@@ -170,8 +170,8 @@
     "copyElementLink": "Copia il link all'oggetto",
     "linkToElement": "Link all'oggetto",
     "wrapSelectionInFrame": "Avvolgi la selezione nella cornice",
-    "tab": "Scheda",
-    "shapeSwitch": "Cambia forma"
+    "tab": "",
+    "shapeSwitch": ""
   },
   "elementLink": {
     "title": "Link all'oggetto",
@@ -183,10 +183,10 @@
     "hint_emptyLibrary": "Seleziona un elemento sulla tela per aggiungerlo qui, o installa una libreria dal repository pubblico qui sotto.",
     "hint_emptyPrivateLibrary": "Seleziona un elemento sulla tela per aggiungerlo qui.",
     "search": {
-      "inputPlaceholder": "Cerca libreria",
-      "heading": "Corrispondenze libreria",
-      "noResults": "Nessun articolo corrispondente trovato...",
-      "clearSearch": "Pulisci ricerca"
+      "inputPlaceholder": "",
+      "heading": "",
+      "noResults": "",
+      "clearSearch": ""
     }
   },
   "search": {
@@ -195,8 +195,8 @@
     "singleResult": "risultato",
     "multipleResults": "risultati",
     "placeholder": "Trova testo sulla tela...",
-    "frames": "Fotogrammi",
-    "texts": "Testi"
+    "frames": "",
+    "texts": ""
   },
   "buttons": {
     "clearReset": "Svuota la tela",
@@ -230,11 +230,11 @@
     "objectsSnapMode": "Aggancia agli oggetti",
     "exitZenMode": "Uscire dalla modalità zen",
     "cancel": "Annulla",
-    "saveLibNames": "Salva nome(i) ed esci",
+    "saveLibNames": "",
     "clear": "Cancella",
     "remove": "Rimuovi",
     "embed": "Attiva/disattiva incorporamento",
-    "publishLibrary": "Rinomina o pubblica",
+    "publishLibrary": "",
     "submit": "Invia",
     "confirm": "Conferma",
     "embeddableInteractionButton": "Clicca per interagire"
@@ -261,7 +261,7 @@
     "removeItemsFromsLibrary": "Eliminare {{count}} elementi dalla libreria?",
     "invalidEncryptionKey": "La chiave di cifratura deve essere composta da 22 caratteri. La collaborazione live è disabilitata.",
     "collabOfflineWarning": "Nessuna connessione internet disponibile.\nLe tue modifiche non verranno salvate!",
-    "localStorageQuotaExceeded": "Quota di archiviazione del browser superata. Le modifiche non verranno salvate."
+    "localStorageQuotaExceeded": ""
   },
   "errors": {
     "unsupportedFileType": "Tipo di file non supportato.",
@@ -292,7 +292,7 @@
   },
   "toolBar": {
     "selection": "Selezione",
-    "lasso": "Selezione a lazo",
+    "lasso": "",
     "image": "Inserisci immagine",
     "rectangle": "Rettangolo",
     "diamond": "Rombo",
@@ -313,7 +313,7 @@
     "hand": "Mano (strumento di panoramica)",
     "extraTools": "Altri strumenti",
     "mermaidToExcalidraw": "Da Mermaid a Excalidraw",
-    "convertElementType": "Attiva tipo di forma"
+    "convertElementType": ""
   },
   "element": {
     "rectangle": "Rettangolo",
@@ -337,34 +337,33 @@
     "shapes": "Forme"
   },
   "hints": {
-    "dismissSearch": "{{shortcut}} per ignorare la ricerca",
-    "canvasPanning": "Per spostare la tela, tieni premuto {{shortcut_1}} o {{shortcut_2}} durante il trascinamento, oppure usa lo strumento della mano",
+    "dismissSearch": "",
+    "canvasPanning": "",
     "linearElement": "Clicca per iniziare una linea in più punti, trascina per singola linea",
-    "arrowTool": "Fai clic per iniziare più punti, trascina per una singola linea. Premi di nuovo {{shortcut}} per cambiare il tipo di freccia.",
-    "arrowBindModifiers": "",
+    "arrowTool": "",
     "freeDraw": "Clicca e trascina, rilascia quando avrai finito",
     "text": "Suggerimento: puoi anche aggiungere del testo facendo doppio clic ovunque con lo strumento di selezione",
     "embeddable": "Fare click e trascina per creare un incorporamento web",
-    "text_selected": "Fare doppio clic o premere {{shortcut}} per modificare il testo",
-    "text_editing": "Premi {{shortcut_1}} o {{shortcut_2}} per terminare la modifica",
-    "linearElementMulti": "Clicca sull'ultimo punto o premi {{shortcut_1}} o {{shortcut_2}} per terminare",
-    "lockAngle": "Puoi limitare l'angolo tenendo premuto {{shortcut}}",
-    "resize": "Puoi limitare le proporzioni tenendo premuto {{shortcut_1}} durante il ridimensionamento,\ntenendo premuto {{shortcut_2}} per ridimensionare dal centro",
-    "resizeImage": "Puoi ridimensionare liberamente tenendo premuto {{shortcut_1}},\ntenendo premuto {{shortcut_2}} per ridimensionare dal centro",
-    "rotate": "Puoi limitare gli angoli tenendo premuto {{shortcut}} durante la rotazione",
-    "lineEditor_info": "Tieni premuto {{shortcut_1}} e fai doppio clic oppure premi {{shortcut_2}} per modificare i punti",
-    "lineEditor_line_info": "Fare doppio clic o premere {{shortcut}} per modificare i punti",
-    "lineEditor_pointSelected": "Premi {{shortcut_1}} per rimuovere punto(i),\n{{shortcut_2}} per duplicare, o trascinare per spostare",
-    "lineEditor_nothingSelected": "Seleziona un punto da modificare (tieni premuto {{shortcut_1}} per selezionarne più di uno),\noppure tieni premuto {{shortcut_2}} e fai clic per aggiungere nuovi punti",
+    "text_selected": "",
+    "text_editing": "",
+    "linearElementMulti": "",
+    "lockAngle": "",
+    "resize": "",
+    "resizeImage": "",
+    "rotate": "",
+    "lineEditor_info": "",
+    "lineEditor_line_info": "",
+    "lineEditor_pointSelected": "",
+    "lineEditor_nothingSelected": "",
     "publishLibrary": "Pubblica la tua libreria",
-    "bindTextToElement": "{{shortcut}} per aggiungere testo",
-    "createFlowchart": "{{shortcut}} per creare un diagramma di flusso",
-    "deepBoxSelect": "Tieni premuto {{shortcut}} per selezionare in profondità e per evitare il trascinamento",
-    "eraserRevert": "Tieni premuto {{shortcut}} per ripristinare gli elementi contrassegnati per l'eliminazione",
+    "bindTextToElement": "",
+    "createFlowchart": "",
+    "deepBoxSelect": "",
+    "eraserRevert": "",
     "firefox_clipboard_write": "Questa funzione può essere abilitata impostando il flag \"dom.events.asyncClipboard.clipboardItem\" su \"true\". Per modificare i flag del browser in Firefox, visitare la pagina \"about:config\".",
-    "disableSnapping": "Tieni premuto {{shortcut}} per disattivare lo snap",
-    "enterCropEditor": "Fare doppio clic sull'immagine o premere {{shortcut}} per ritagliare l'immagine",
-    "leaveCropEditor": "Fare clic all'esterno dell'immagine o premere {{shortcut_1}} o {{shortcut_2}} per terminare il ritaglio"
+    "disableSnapping": "",
+    "enterCropEditor": "",
+    "leaveCropEditor": ""
   },
   "canvasError": {
     "cannotShowPreview": "Impossibile visualizzare l'anteprima",
@@ -569,7 +568,7 @@
     }
   },
   "colorPicker": {
-    "color": "Colore",
+    "color": "",
     "mostUsedCustomColors": "Colori personalizzati più utilizzati",
     "colors": "Colori",
     "shades": "Sfumature",
@@ -651,15 +650,15 @@
     "shortcutHint": "Per i comandi della tavolozza, usa {{shortcut}}"
   },
   "keys": {
-    "ctrl": "Ctrl",
-    "option": "Opzione",
-    "cmd": "Cmd",
-    "alt": "Alt",
-    "escape": "Esc",
-    "enter": "Invio",
-    "shift": "Shift",
-    "spacebar": "Spazio",
-    "delete": "Elimina",
-    "mmb": "Rotella di scorrimento"
+    "ctrl": "",
+    "option": "",
+    "cmd": "",
+    "alt": "",
+    "escape": "",
+    "enter": "",
+    "shift": "",
+    "spacebar": "",
+    "delete": "",
+    "mmb": ""
   }
 }

packages/excalidraw/locales/ja-JP.json

@@ -46,9 +46,9 @@
     "arrowhead_triangle_outline": "三角 (中抜き)",
     "arrowhead_diamond": "ひし形",
     "arrowhead_diamond_outline": "ひし形 (中抜き)",
-    "arrowhead_crowfoot_many": "鳥の足記法（多対多）",
-    "arrowhead_crowfoot_one": "鳥の足記法（一対一）",
-    "arrowhead_crowfoot_one_or_many": "鳥の足記法（一対多）",
+    "arrowhead_crowfoot_many": "",
+    "arrowhead_crowfoot_one": "",
+    "arrowhead_crowfoot_one_or_many": "",
     "more_options": "詳細設定",
     "arrowtypes": "矢印の種類",
     "arrowtype_sharp": "鋭い矢印",
@@ -142,8 +142,8 @@
       "editArrow": "矢印を編集"
     },
     "polygon": {
-      "breakPolygon": "ポリゴンを分割",
-      "convertToPolygon": "ポリゴンに変換"
+      "breakPolygon": "",
+      "convertToPolygon": ""
     },
     "elementLock": {
       "lock": "ロック",
@@ -160,33 +160,33 @@
     "prompt": "プロンプト",
     "followUs": "フォローする",
     "discordChat": "Discord チャット",
-    "zoomToFitViewport": "表寿範囲に合わせてズーム",
-    "zoomToFitSelection": "選択範囲に合わせてズーム",
-    "zoomToFit": "すべての要素が収まるようにズーム",
-    "installPWA": "Excalidrawをローカルにインストール(PWA)",
-    "autoResize": "テキストの自動サイズ変更を有効化",
-    "imageCropping": "画像のトリミング",
+    "zoomToFitViewport": "",
+    "zoomToFitSelection": "",
+    "zoomToFit": "",
+    "installPWA": "",
+    "autoResize": "",
+    "imageCropping": "",
     "unCroppedDimension": "",
     "copyElementLink": "",
-    "linkToElement": "オブジェクトにリンク",
-    "wrapSelectionInFrame": "選択範囲を枠で折り返す",
-    "tab": "Tab",
-    "shapeSwitch": "図形形状を変更"
+    "linkToElement": "",
+    "wrapSelectionInFrame": "",
+    "tab": "",
+    "shapeSwitch": ""
   },
   "elementLink": {
-    "title": "オブジェクトにリンク",
-    "desc": "キャンバス上の図形をクリックするか、リンクを貼り付けます。",
-    "notFound": "リンクされたオブジェクトがキャンバス上に見つかりませんでした。"
+    "title": "",
+    "desc": "",
+    "notFound": ""
   },
   "library": {
     "noItems": "まだアイテムが追加されていません…",
     "hint_emptyLibrary": "キャンバス上のアイテムを選択してここに追加するか、以下の公開リポジトリからライブラリをインストールしてください。",
     "hint_emptyPrivateLibrary": "キャンバス上のアイテムを選択すると、ここに追加されます。",
     "search": {
-      "inputPlaceholder": "ライブラリを検索",
-      "heading": "ライブラリと一致",
-      "noResults": "一致するアイテムが見つかりませんでした…",
-      "clearSearch": "検索のクリア"
+      "inputPlaceholder": "",
+      "heading": "",
+      "noResults": "",
+      "clearSearch": ""
     }
   },
   "search": {
@@ -195,8 +195,8 @@
     "singleResult": "結果",
     "multipleResults": "結果数",
     "placeholder": "キャンバス内のテキストを検索…",
-    "frames": "フレーム",
-    "texts": "テキスト"
+    "frames": "",
+    "texts": ""
   },
   "buttons": {
     "clearReset": "キャンバスのリセット",
@@ -230,11 +230,11 @@
     "objectsSnapMode": "オブジェクトにスナップ",
     "exitZenMode": "集中モードをやめる",
     "cancel": "キャンセル",
-    "saveLibNames": "保存して終了",
+    "saveLibNames": "",
     "clear": "消去",
     "remove": "削除",
     "embed": "埋め込みの切り替え",
-    "publishLibrary": "名前の変更または公開",
+    "publishLibrary": "",
     "submit": "送信",
     "confirm": "確認",
     "embeddableInteractionButton": "クリックして操作"
@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "クリックすると複数の頂点からなる曲線を開始、ドラッグすると直線",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "クリックしてドラッグします。離すと終了します",
     "text": "ヒント: 選択ツールを使用して任意の場所をダブルクリックしてテキストを追加することもできます",
     "embeddable": "クリックしてドラッグし、ウェブサイトを埋め込む",

packages/excalidraw/locales/kaa.json

@@ -341,7 +341,6 @@
     "canvasPanning": "",
     "linearElement": "",
     "arrowTool": "",
-    "arrowBindModifiers": "",
     "freeDraw": "",
     "text": "",
     "embeddable": "",