Fixed point binding for simple arrows

Tests added

Fix binding

Remove unneeded params

Unfinished simple arrow avoidance

Fix newly created jumping arrow when gets outside

Do not apply the jumping logic to elbow arrows for new elements

Existing arrows now jump out

Type updates to support fixed binding for simple arrows

Fix crash for elbow arrws in mutateElement()

Refactored simple arrow creation

Updating tests

No confirm threshold when inside biding range

Fix multi-point arrow grid off

Make elbow arrows respect grids

Unbind arrow if bound and moved at shaft of arrow key

Fix binding test

Fix drag unbind when the bound element is in the selection

Do not move mid point for simple arrows bound on both ends

Add test for mobing mid points for simple arrows when bound on the same element on both ends

Fix linear editor bug when both midpoint and endpoint is moved

Fix all point multipoint arrow highlight and binding

Arrow dragging gets a little drag to avoid accidental unbinding

Fixed point binding for simple arrows when the arrow doesn't point to the element

Fix binding disabled use-case triggering arrow editor

Timed binding mode change for simple arrows

Apply fixes

Remove code to unbind on drag

Update simple arrow fixed point when arrow is dragged or moved by arrow keys

Binding highlight fixes

Change bind mode timeout logic

Fix tests

Add Alt bindMode switch

 No dragging of arrows when bound, similar to elbow

Fix timeout not taking effect immediately

Bumop z-index for arrows when dragged

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

Only transparent bindables allow binding fallthrough

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

Fix lint

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

Fix point click array creation interaction with fixed point binding

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

Restrict new behavior to arrows only

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

Allow binding inside images

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

Fix already existing fixed binding retention

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

Refactor and implement fixed point binding for unfilled elements

Restore drag

Removed point binding

Binding code refactor

Added centered focus point

Binding & focus point debug

Add invariants to check binding integrity in elements

Binding fixes

Small refactors

Completely rewritten binding

Include point updates after binding update

Fix point updates when endpoint dragged and opposite endpoint orbits

centered focus point only for new arrows

Make z-index arrow reorder on bind

Turn off inside binding mode after leaving a shape

Remove invariants from debug

feat: expose `applyTo` options, don't commit empty text element (#9744)

* Expose applyTo options, skip re-draw for empty text

* Don't commit empty text elements

test: added test file for distribute (#9754)

z-index update

Bind mode on precise binding

Fix binding to inside element

Fix initial arrow not following cursor (white dot)

Fix elbow arrow

Fix z-index so it works on hover

Fix fixed angle orbiting

Move point click arrow creation over to common strategy

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

Add binding strategy for drag arrow creation

Fix elbow arrow

Fix point handles

Snap to center

Fix transparent shape binding

Internal arrow creation fix

Fix point binding

Fix selection bug

Fix new arrow focus point

Images now always bind inside

Flashing arrow creation on binding band

Add watchState debug method to window.h

Fix debug canvas crash

Remove non-needed bind mode

Fix restore

No keyboard movement when bound

Add actionFinalize when arrow in edit mode

Add drag to the Stats panel when bound arrow is moved

Further simplify curve tracking

Add typing to action register()

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

Fix point at finalize

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

Fix type errors

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

New arrow binding rules

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

Fix cyclical dep

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

Fix jiggly arrows

Fix jiggly arrow x2

Long inside-other binding

Click-click binding

Fix arrows

Performance

[PERF] Replace in-place Jacobian derivation with analytical version

Different approach to inside binding

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

Fixes

Fix inconsistent arrow start jump out

Change how images are bound to on new arrow creation

Lower timeout

Small insurance fix

Fix curve test

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

No center focus point

90% inside center binding

Fixing tests

fix: Elbow arrow fixes

fix: More arrow fixes

Do not trigger arrow binding for linear elements

fix: Linear elements

fix: Refactor actionFinalize for linear

Binding tests updated

fix: Jump when cursor not moved

fix: history tests

Fix history snapshot

Fix undo issue

fix(eraser): Remove binding from the other element

fix(tests): Update tests

chore: Attempt filtering new set state

Fix excessive history recording

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

Fix all tests

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

fix(transform): Fix group resize and rotate

fix(binding): Harmonize binding param usage

fix: Center focus point

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

chore: Trigger build

Remove binding gap

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

Binding highlight refactor

fix: Refactored timeout bind mode handling

fix: Center when orbiting

feat: Color change on highlight

Fix orbit binding highlight

fix: hiding arrow

Fix arrow binding

Fix arrow drag selection logic

Binding highlight is now hot pink

Change inside binding logic for start point

Render focus point in debug mode

Fix snap to center

Fix actionFinalize for new arrow creation

fix: snapToCenter()

80% by length

fix: attempt at fixing the dancing arrows

feat: No center snap when start is not bound

Fix centering for existing arrows

tweak binding highlight color

change `appState.suggestedBindings` -> `suggestedBinding` & remove unused code

Refactor delayed bind mode change

Binding highlight rotation support + image support

fix(highlight): Overdraw fixes

feat: Do not allow drag bound arrow closer to the shape than dragging distance

feat: Stroke width adaptive fixed binding distance

chore: More point dragging centralization

New element behavior

Refactor dragging

Fix incorrect highlight sizing

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

Fix delayed bind mode for multiElement arrows

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

Fix multi-point

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

Fix elbow arrows

Simplify state

Small positional fixes

Fix jiggly arrows

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

Fixes for arrow dragging

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

Elbow arrow fixes

Highlight fixes

Fix elbow arrow binding

Frame highlight

Fix elbow mid-point binding

Fix binding suggestion for disabled binding state

Implement Alt

Remove debug

excalidraw-app/App.tsx

@@ -662,8 +662,8 @@ const ExcalidrawWrapper = () => {
       debugRenderer(
         debugCanvasRef.current,
         appState,
+        elements,
         window.devicePixelRatio,
-        () => forceRefresh((prev) => !prev),
       );
     }
   };

excalidraw-app/components/DebugCanvas.tsx

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

packages/common/src/constants.ts

@@ -524,3 +524,5 @@ export enum UserIdleState {
 export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
 
 export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
+
+export const BIND_MODE_TIMEOUT = 800; // ms

packages/common/src/index.ts

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

packages/common/src/utils.ts

@@ -1,4 +1,5 @@
 import { average } from "@excalidraw/math";
+import { isImageElement } from "@excalidraw/element";
 
 import type {
   ExcalidrawBindableElement,
@@ -566,8 +567,8 @@ export const isTransparent = (color: string) => {
   );
 };
 
-export const isBindingFallthroughEnabled = (el: ExcalidrawBindableElement) =>
+export const isAlwaysInsideBinding = (element: ExcalidrawBindableElement) =>
-  el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
+  isImageElement(element);
 
 export type ResolvablePromise<T> = Promise<T> & {
   resolve: [T] extends [undefined]

packages/common/src/visualdebug.ts

@@ -63,6 +63,8 @@ export const debugDrawLine = (
   );
 };
 
+export const testDebug = () => {};
+
 export const debugDrawPoint = (
   p: GlobalPoint,
   opts?: {

packages/element/src/collision.ts

@@ -1,4 +1,4 @@
-import { isTransparent } from "@excalidraw/common";
+import { invariant, isTransparent } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -38,6 +38,8 @@ import {
 } from "./bounds";
 import {
   hasBoundTextElement,
+  isBindableElement,
+  isFrameLikeElement,
   isFreeDrawElement,
   isIframeLikeElement,
   isImageElement,
@@ -58,12 +60,17 @@ import { distanceToElement } from "./distance";
 
 import type {
   ElementsMap,
+  ExcalidrawBindableElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
   ExcalidrawEllipseElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   ExcalidrawRectanguloidElement,
+  NonDeleted,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+  Ordered,
 } from "./types";
 
 export const shouldTestInside = (element: ExcalidrawElement) => {
@@ -94,6 +101,7 @@ export type HitTestArgs = {
   threshold: number;
   elementsMap: ElementsMap;
   frameNameBound?: FrameNameBounds | null;
+  overrideShouldTestInside?: boolean;
 };
 
 export const hitElementItself = ({
@@ -102,6 +110,7 @@ export const hitElementItself = ({
   threshold,
   elementsMap,
   frameNameBound = null,
+  overrideShouldTestInside = false,
 }: HitTestArgs) => {
   // Hit test against a frame's name
   const hitFrameName = frameNameBound
@@ -134,7 +143,9 @@ export const hitElementItself = ({
   }
 
   // Do the precise (and relatively costly) hit test
-  const hitElement = shouldTestInside(element)
+  const hitElement = (
+    overrideShouldTestInside ? true : shouldTestInside(element)
+  )
     ? // Since `inShape` tests STRICTLY againt the insides of a shape
       // we would need `onShape` as well to include the "borders"
       isPointInElement(point, element, elementsMap) ||
@@ -193,6 +204,82 @@ 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;
+  }
+
+  // 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 getHoveredElementForBinding = (
+  point: Readonly<GlobalPoint>,
+  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
+  elementsMap: NonDeletedSceneElementsMap,
+  toleranceFn?: (element: ExcalidrawBindableElement) => number,
+): NonDeleted<ExcalidrawBindableElement> | null => {
+  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 (!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
  *

packages/element/src/dragElements.ts

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

packages/element/src/elbowArrow.ts

@@ -17,7 +17,6 @@ import {
   BinaryHeap,
   invariant,
   isAnyTrue,
-  tupleToCoors,
   getSizeFromPoints,
   isDevEnv,
   arrayToMap,
@@ -30,7 +29,7 @@ import {
   FIXED_BINDING_DISTANCE,
   getHeadingForElbowArrowSnap,
   getGlobalFixedPointForBindableElement,
-  getHoveredElementForBinding,
+  getFixedBindingDistance,
 } from "./binding";
 import { distanceToElement } from "./distance";
 import {
@@ -51,8 +50,8 @@ import {
   type ExcalidrawElbowArrowElement,
   type NonDeletedSceneElementsMap,
 } from "./types";
-
 import { aabbForElement, pointInsideBounds } from "./bounds";
+import { getHoveredElementForBinding } from "./collision";
 
 import type { Bounds } from "./bounds";
 import type { Heading } from "./heading";
@@ -63,6 +62,7 @@ import type {
   FixedPointBinding,
   FixedSegment,
   NonDeletedExcalidrawElement,
+  Ordered,
 } from "./types";
 
 type GridAddress = [number, number] & { _brand: "gridaddress" };
@@ -1217,19 +1217,9 @@ const getElbowArrowData = (
   if (options?.isDragging) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement =
-      getHoveredElement(
+      getHoveredElement(origStartGlobalPoint, elementsMap, elements) || null;
-        origStartGlobalPoint,
-        elementsMap,
-        elements,
-        options?.zoom,
-      ) || null;
     hoveredEndElement =
-      getHoveredElement(
+      getHoveredElement(origEndGlobalPoint, elementsMap, elements) || null;
-        origEndGlobalPoint,
-        elementsMap,
-        elements,
-        options?.zoom,
-      ) || null;
   } else {
     hoveredStartElement = arrow.startBinding
       ? getBindableElementForId(arrow.startBinding.elementId, elementsMap) ||
@@ -1301,8 +1291,8 @@ const getElbowArrowData = (
         offsetFromHeading(
           startHeading,
           arrow.startArrowhead
-            ? FIXED_BINDING_DISTANCE * 6
+            ? getFixedBindingDistance(hoveredStartElement) * 6
-            : FIXED_BINDING_DISTANCE * 2,
+            : getFixedBindingDistance(hoveredStartElement) * 2,
           1,
         ),
       )
@@ -1314,8 +1304,8 @@ const getElbowArrowData = (
         offsetFromHeading(
           endHeading,
           arrow.endArrowhead
-            ? FIXED_BINDING_DISTANCE * 6
+            ? getFixedBindingDistance(hoveredEndElement) * 6
-            : FIXED_BINDING_DISTANCE * 2,
+            : getFixedBindingDistance(hoveredEndElement) * 2,
           1,
         ),
       )
@@ -2262,16 +2252,13 @@ const getBindPointHeading = (
 const getHoveredElement = (
   origPoint: GlobalPoint,
   elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
+  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
-  zoom?: AppState["zoom"],
 ) => {
   return getHoveredElementForBinding(
-    tupleToCoors(origPoint),
+    origPoint,
     elements,
     elementsMap,
-    zoom,
+    (element) => getFixedBindingDistance(element) + 1,
-    true,
-    true,
   );
 };
 

packages/element/src/flowchart.ts

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

packages/element/src/mutateElement.ts

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

packages/element/src/renderElement.ts

@@ -269,7 +269,7 @@ const generateElementCanvas = (
     context.filter = IMAGE_INVERT_FILTER;
   }
 
-  drawElementOnCanvas(element, rc, context, renderConfig, appState);
+  drawElementOnCanvas(element, rc, context, renderConfig);
 
   context.restore();
 
@@ -404,7 +404,6 @@ const drawElementOnCanvas = (
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState,
 ) => {
   switch (element.type) {
     case "rectangle":
@@ -603,6 +602,41 @@ const generateElementWithCanvas = (
   return prevElementWithCanvas;
 };
 
+const drawElementHighlight = (
+  context: CanvasRenderingContext2D,
+  appState: StaticCanvasAppState,
+) => {
+  if (appState.suggestedBinding) {
+    const cx =
+      (appState.suggestedBinding.x +
+        appState.suggestedBinding.width / 2 +
+        appState.scrollX) *
+      window.devicePixelRatio;
+    const cy =
+      (appState.suggestedBinding.y +
+        appState.suggestedBinding.height / 2 +
+        appState.scrollY) *
+      window.devicePixelRatio;
+    context.save();
+
+    context.translate(cx, cy);
+    context.rotate(appState.suggestedBinding.angle);
+    context.translate(-cx, -cy);
+    context.translate(
+      appState.scrollX + appState.suggestedBinding.x,
+      appState.scrollY + appState.suggestedBinding.y,
+    );
+
+    const drawable = ShapeCache.generateBindableElementHighlight(
+      appState.suggestedBinding,
+      appState,
+    );
+    rough.canvas(context.canvas).draw(drawable);
+
+    context.restore();
+  }
+};
+
 const drawElementFromCanvas = (
   elementWithCanvas: ExcalidrawElementWithCanvas,
   context: CanvasRenderingContext2D,
@@ -610,88 +644,99 @@ const drawElementFromCanvas = (
   appState: StaticCanvasAppState,
   allElementsMap: NonDeletedSceneElementsMap,
 ) => {
-  const element = elementWithCanvas.element;
+  const isHighlighted =
-  const padding = getCanvasPadding(element);
+    appState.suggestedBinding?.id === elementWithCanvas.element.id;
-  const zoom = elementWithCanvas.scale;
+  if (
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
+    !isHighlighted ||
-  const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
+    ["image", "text"].includes(elementWithCanvas.element.type)
-  const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
+  ) {
+    const element = elementWithCanvas.element;
+    const padding = getCanvasPadding(element);
+    const zoom = elementWithCanvas.scale;
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
+    const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
+    const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
 
-  context.save();
+    context.save();
-  context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
+    context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
 
-  const boundTextElement = getBoundTextElement(element, allElementsMap);
+    const boundTextElement = getBoundTextElement(element, allElementsMap);
 
-  if (isArrowElement(element) && boundTextElement) {
+    if (isArrowElement(element) && boundTextElement) {
-    const offsetX =
+      const offsetX =
-      (elementWithCanvas.boundTextCanvas.width -
+        (elementWithCanvas.boundTextCanvas.width -
-        elementWithCanvas.canvas!.width) /
+          elementWithCanvas.canvas!.width) /
-      2;
+        2;
-    const offsetY =
+      const offsetY =
-      (elementWithCanvas.boundTextCanvas.height -
+        (elementWithCanvas.boundTextCanvas.height -
-        elementWithCanvas.canvas!.height) /
+          elementWithCanvas.canvas!.height) /
-      2;
+        2;
-    context.translate(cx, cy);
+      context.translate(cx, cy);
-    context.drawImage(
+      context.drawImage(
-      elementWithCanvas.boundTextCanvas,
+        elementWithCanvas.boundTextCanvas,
-      (-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding,
+        (-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding,
-      (-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding,
+        (-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding,
-      elementWithCanvas.boundTextCanvas.width / zoom,
+        elementWithCanvas.boundTextCanvas.width / zoom,
-      elementWithCanvas.boundTextCanvas.height / zoom,
+        elementWithCanvas.boundTextCanvas.height / zoom,
-    );
-  } else {
-    // we translate context to element center so that rotation and scale
-    // originates from the element center
-    context.translate(cx, cy);
-
-    context.rotate(element.angle);
-
-    if (
-      "scale" in elementWithCanvas.element &&
-      !isPendingImageElement(element, renderConfig)
-    ) {
-      context.scale(
-        elementWithCanvas.element.scale[0],
-        elementWithCanvas.element.scale[1],
       );
-    }
+    } else {
+      // we translate context to element center so that rotation and scale
+      // originates from the element center
+      context.translate(cx, cy);
 
-    // revert afterwards we don't have account for it during drawing
+      context.rotate(element.angle);
-    context.translate(-cx, -cy);
 
-    context.drawImage(
+      if (
-      elementWithCanvas.canvas!,
+        "scale" in elementWithCanvas.element &&
-      (x1 + appState.scrollX) * window.devicePixelRatio -
+        !isPendingImageElement(element, renderConfig)
-        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
+      ) {
-      (y1 + appState.scrollY) * window.devicePixelRatio -
+        context.scale(
-        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
+          elementWithCanvas.element.scale[0],
-      elementWithCanvas.canvas!.width / elementWithCanvas.scale,
+          elementWithCanvas.element.scale[1],
-      elementWithCanvas.canvas!.height / elementWithCanvas.scale,
+        );
-    );
+      }
 
-    if (
+      // revert afterwards we don't have account for it during drawing
-      import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
+      context.translate(-cx, -cy);
-        "true" &&
+
-      hasBoundTextElement(element)
+      context.drawImage(
-    ) {
+        elementWithCanvas.canvas!,
-      const textElement = getBoundTextElement(
+        (x1 + appState.scrollX) * window.devicePixelRatio -
-        element,
+          (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
-        allElementsMap,
+        (y1 + appState.scrollY) * window.devicePixelRatio -
-      ) as ExcalidrawTextElementWithContainer;
+          (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
-      const coords = getContainerCoords(element);
+        elementWithCanvas.canvas!.width / elementWithCanvas.scale,
-      context.strokeStyle = "#c92a2a";
+        elementWithCanvas.canvas!.height / elementWithCanvas.scale,
-      context.lineWidth = 3;
-      context.strokeRect(
-        (coords.x + appState.scrollX) * window.devicePixelRatio,
-        (coords.y + appState.scrollY) * window.devicePixelRatio,
-        getBoundTextMaxWidth(element, textElement) * window.devicePixelRatio,
-        getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio,
       );
+
+      if (
+        import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
+          "true" &&
+        hasBoundTextElement(element)
+      ) {
+        const textElement = getBoundTextElement(
+          element,
+          allElementsMap,
+        ) as ExcalidrawTextElementWithContainer;
+        const coords = getContainerCoords(element);
+        context.strokeStyle = "#c92a2a";
+        context.lineWidth = 3;
+        context.strokeRect(
+          (coords.x + appState.scrollX) * window.devicePixelRatio,
+          (coords.y + appState.scrollY) * window.devicePixelRatio,
+          getBoundTextMaxWidth(element, textElement) * window.devicePixelRatio,
+          getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio,
+        );
+      }
     }
+    context.restore();
+
+    // Clear the nested element we appended to the DOM
   }
-  context.restore();
 
-  // Clear the nested element we appended to the DOM
+  if (isHighlighted) {
+    drawElementHighlight(context, appState);
+  }
 };
 
 export const renderSelectionElement = (
@@ -744,6 +789,11 @@ export const renderElement = (
     case "magicframe":
     case "frame": {
       if (appState.frameRendering.enabled && appState.frameRendering.outline) {
+        const isHighlighted = element.id === appState.suggestedBinding?.id;
+        const {
+          options: { stroke: highlightStroke },
+        } = ShapeCache.generateBindableElementHighlight(element, appState);
+
         context.save();
         context.translate(
           element.x + appState.scrollX,
@@ -752,12 +802,17 @@ export const renderElement = (
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = FRAME_STYLE.strokeColor;
+        context.strokeStyle = isHighlighted
+          ? highlightStroke
+          : FRAME_STYLE.strokeColor;
 
         // TODO change later to only affect AI frames
         if (isMagicFrameElement(element)) {
-          context.strokeStyle =
+          context.strokeStyle = isHighlighted
-            appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
+            ? highlightStroke
+            : appState.theme === THEME.LIGHT
+            ? "#7affd7"
+            : "#1d8264";
         }
 
         if (FRAME_STYLE.radius && context.roundRect) {
@@ -795,7 +850,7 @@ export const renderElement = (
         context.translate(cx, cy);
         context.rotate(element.angle);
         context.translate(-shiftX, -shiftY);
-        drawElementOnCanvas(element, rc, context, renderConfig, appState);
+        drawElementOnCanvas(element, rc, context, renderConfig);
         context.restore();
       } else {
         const elementWithCanvas = generateElementWithCanvas(
@@ -888,13 +943,7 @@ export const renderElement = (
 
           tempCanvasContext.translate(-shiftX, -shiftY);
 
-          drawElementOnCanvas(
+          drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
-            element,
-            tempRc,
-            tempCanvasContext,
-            renderConfig,
-            appState,
-          );
 
           tempCanvasContext.translate(shiftX, shiftY);
 
@@ -933,7 +982,7 @@ export const renderElement = (
           }
 
           context.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, rc, context, renderConfig, appState);
+          drawElementOnCanvas(element, rc, context, renderConfig);
         }
 
         context.restore();

packages/element/src/resizeElements.ts

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

packages/element/src/shape.ts

@@ -21,6 +21,7 @@ import {
   assertNever,
   COLOR_PALETTE,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
+  THEME,
 } from "@excalidraw/common";
 
 import { RoughGenerator } from "roughjs/bin/generator";
@@ -32,6 +33,7 @@ import type { Mutable } from "@excalidraw/common/utility-types";
 import type {
   AppState,
   EmbedsValidationStatus,
+  InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";
 import type {
   ElementShape,
@@ -70,6 +72,7 @@ import type {
   ExcalidrawFreeDrawElement,
   ElementsMap,
   ExcalidrawLineElement,
+  ExcalidrawBindableElement,
 } from "./types";
 
 import type { Drawable, Options } from "roughjs/bin/core";
@@ -105,6 +108,31 @@ export class ShapeCache {
     ShapeCache.cache = new WeakMap();
   };
 
+  public static generateBindableElementHighlight = <
+    T extends ExcalidrawBindableElement,
+  >(
+    element: T,
+    appState: Pick<InteractiveCanvasAppState, "theme">,
+  ) => {
+    let shape =
+      (ShapeCache.get(element) as Drawable | null) ||
+      (ShapeCache.rg.rectangle(0, 0, element.width, element.height, {
+        roughness: 0,
+        strokeWidth: 2,
+      }) as Drawable);
+
+    // Clone the shape from the cache
+    shape = {
+      ...shape,
+      options: {
+        ...shape.options,
+        stroke: appState.theme === THEME.DARK ? "#035da1" : "#6abdfc",
+      },
+    };
+
+    return shape;
+  };
+
   /**
    * Generates & caches shape for element if not already cached, otherwise
    * returns cached shape.

packages/element/src/typeChecks.ts

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

packages/element/src/types.ts

@@ -279,23 +279,22 @@ export type ExcalidrawTextElementWithContainer = {
 
 export type FixedPoint = [number, number];
 
-export type PointBinding = {
+export type BindMode = "inside" | "orbit" | "skip";
-  elementId: ExcalidrawBindableElement["id"];
-  focus: number;
-  gap: number;
-};
 
-export type FixedPointBinding = Merge<
+export type FixedPointBinding = {
-  PointBinding,
+  elementId: ExcalidrawBindableElement["id"];
-  {
+
-    // Represents the fixed point binding information in form of a vertical and
+  // Represents the fixed point binding information in form of a vertical and
-    // horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
+  // horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
-    // gives the user selected fixed point by multiplying the bound element width
+  // gives the user selected fixed point by multiplying the bound element width
-    // with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
+  // with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
-    // bound element-local point coordinate.
+  // bound element-local point coordinate.
-    fixedPoint: FixedPoint;
+  fixedPoint: FixedPoint;
-  }
+
->;
+  // Determines whether the arrow remains outside the shape or is allowed to
+  // go all the way inside the shape up to the exact fixed point.
+  mode: BindMode;
+};
 
 type Index = number;
 
@@ -323,8 +322,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     type: "line" | "arrow";
     points: readonly LocalPoint[];
     lastCommittedPoint: LocalPoint | null;
-    startBinding: PointBinding | null;
+    startBinding: FixedPointBinding | null;
-    endBinding: PointBinding | null;
+    endBinding: FixedPointBinding | null;
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
@@ -351,9 +350,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

packages/element/src/zindex.ts

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

packages/element/tests/__snapshots__/linearElementEditor.test.tsx.snap

@@ -44,14 +44,3 @@ exports[`Test Linear Elements > Test bound text element > should resize and posi
 "Online whiteboard
 collaboration made easy"
 `;
-
-exports[`Test Linear Elements > Test bound text element > should wrap the bound text when arrow bound container moves 1`] = `
-"Online whiteboard
-collaboration made easy"
-`;
-
-exports[`Test Linear Elements > Test bound text element > should wrap the bound text when arrow bound container moves 2`] = `
-"Online whiteboard
-collaboration made
-easy"
-`;

packages/element/tests/duplicate.test.tsx

@@ -144,9 +144,8 @@ describe("duplicating multiple elements", () => {
       id: "arrow1",
       startBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -155,9 +154,8 @@ describe("duplicating multiple elements", () => {
       id: "arrow2",
       endBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
       boundElements: [{ id: "text2", type: "text" }],
     });
@@ -276,9 +274,8 @@ describe("duplicating multiple elements", () => {
       id: "arrow1",
       startBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -293,15 +290,13 @@ describe("duplicating multiple elements", () => {
       id: "arrow2",
       startBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
       endBinding: {
         elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 
@@ -310,15 +305,13 @@ describe("duplicating multiple elements", () => {
       id: "arrow3",
       startBinding: {
         elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
       endBinding: {
         elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 

packages/element/tests/elbowArrow.test.tsx

@@ -1,13 +1,10 @@
 import { ARROW_TYPE } from "@excalidraw/common";
 import { pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
-
 import { actionSelectAll } from "@excalidraw/excalidraw/actions";
 import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
-
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
-
 import {
   act,
   fireEvent,
@@ -15,13 +12,11 @@ import {
   queryByTestId,
   render,
 } from "@excalidraw/excalidraw/tests/test-utils";
-
 import "@excalidraw/utils/test-utils";
+import { bindBindingElement } from "@excalidraw/element";
 
 import type { LocalPoint } from "@excalidraw/math";
 
-import { bindLinearElement } from "../src/binding";
-
 import { Scene } from "../src/Scene";
 
 import type {
@@ -160,8 +155,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,17 +180,15 @@ describe("elbow arrow routing", () => {
       height: 200,
       points: [pointFrom(0, 0), pointFrom(90, 200)],
     }) as ExcalidrawElbowArrowElement;
-    scene.insertElement(rectangle1);
+    API.setElements([rectangle1, rectangle2, arrow]);
-    scene.insertElement(rectangle2);
-    scene.insertElement(arrow);
 
-    bindLinearElement(arrow, rectangle1, "start", scene);
+    bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene);
-    bindLinearElement(arrow, rectangle2, "end", scene);
+    bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene);
 
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    h.app.scene.mutateElement(arrow, {
+    h.scene.mutateElement(arrow, {
       points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
     });
 

packages/element/tests/linearElementEditor.test.tsx

@@ -379,7 +379,7 @@ describe("Test Linear Elements", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `11`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
       expect(line.points.length).toEqual(3);
       expect(line.points).toMatchInlineSnapshot(`
@@ -549,7 +549,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `14`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
 
         expect(line.points.length).toEqual(5);
 
@@ -600,7 +600,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -641,7 +641,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -689,7 +689,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `17`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`10`);
 
         const newMidPoints = LinearElementEditor.getEditorMidPoints(
           line,
@@ -747,7 +747,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `14`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
         expect(line.points.length).toEqual(5);
 
         expect((h.elements[0] as ExcalidrawLinearElement).points)
@@ -845,7 +845,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `11`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -1316,7 +1316,7 @@ describe("Test Linear Elements", () => {
       const textElement = h.elements[2] as ExcalidrawTextElementWithContainer;
 
       expect(arrow.endBinding?.elementId).toBe(rect.id);
-      expect(arrow.width).toBe(400);
+      expect(arrow.width).toBeCloseTo(405);
       expect(rect.x).toBe(400);
       expect(rect.y).toBe(0);
       expect(
@@ -1335,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(200, 0);
+      expect(arrow.width).toBeCloseTo(205);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

packages/element/tests/resize.test.tsx

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

packages/excalidraw/actions/actionCanvas.tsx

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

packages/excalidraw/actions/actionClipboard.tsx

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

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -206,12 +206,8 @@ export const actionDeleteSelected = register({
   trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState, formData, app) => {
     if (appState.selectedLinearElement?.isEditing) {
-      const {
+      const { elementId, selectedPointsIndices } =
-        elementId,
+        appState.selectedLinearElement;
-        selectedPointsIndices,
-        startBindingElement,
-        endBindingElement,
-      } = appState.selectedLinearElement;
       const elementsMap = app.scene.getNonDeletedElementsMap();
       const linearElement = LinearElementEditor.getElement(
         elementId,
@@ -248,19 +244,6 @@ export const actionDeleteSelected = register({
         };
       }
 
-      // We cannot do this inside `movePoint` because it is also called
-      // when deleting the uncommitted point (which hasn't caused any binding)
-      const binding = {
-        startBindingElement: selectedPointsIndices?.includes(0)
-          ? null
-          : startBindingElement,
-        endBindingElement: selectedPointsIndices?.includes(
-          linearElement.points.length - 1,
-        )
-          ? null
-          : endBindingElement,
-      };
-
       LinearElementEditor.deletePoints(
         linearElement,
         app,
@@ -273,7 +256,6 @@ export const actionDeleteSelected = register({
           ...appState,
           selectedLinearElement: {
             ...appState.selectedLinearElement,
-            ...binding,
             selectedPointsIndices:
               selectedPointsIndices?.[0] > 0
                 ? [selectedPointsIndices[0] - 1]

packages/excalidraw/actions/actionExport.tsx

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

packages/excalidraw/actions/actionFinalize.tsx

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

packages/excalidraw/actions/actionFlip.test.tsx

@@ -38,15 +38,13 @@ describe("flipping re-centers selection", () => {
         height: 239.9,
         startBinding: {
           elementId: "rec1",
-          focus: 0,
-          gap: 5,
           fixedPoint: [0.49, -0.05],
+          mode: "orbit",
         },
         endBinding: {
           elementId: "rec2",
-          focus: 0,
-          gap: 5,
           fixedPoint: [-0.05, 0.49],
+          mode: "orbit",
         },
         startArrowhead: null,
         endArrowhead: "arrow",
@@ -99,8 +97,8 @@ describe("flipping arrowheads", () => {
       endArrowhead: null,
       endBinding: {
         elementId: rect.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
     });
 
@@ -139,13 +137,13 @@ describe("flipping arrowheads", () => {
       endArrowhead: "circle",
       startBinding: {
         elementId: rect.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
       endBinding: {
         elementId: rect2.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
     });
 
@@ -195,8 +193,8 @@ describe("flipping arrowheads", () => {
       endArrowhead: null,
       endBinding: {
         elementId: rect.id,
-        focus: 0.5,
+        fixedPoint: [0.5, 0.5],
-        gap: 5,
+        mode: "orbit",
       },
     });
 

packages/excalidraw/actions/actionFlip.ts

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

packages/excalidraw/actions/actionNavigate.tsx

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

packages/excalidraw/actions/actionProperties.tsx

@@ -1,4 +1,5 @@
 import { pointFrom } from "@excalidraw/math";
+
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import {
@@ -21,12 +22,13 @@ import {
   getLineHeight,
   isTransparent,
   reduceToCommonValue,
+  invariant,
 } from "@excalidraw/common";
 
 import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
 
 import {
-  bindLinearElement,
+  bindBindingElement,
   calculateFixedPointForElbowArrowBinding,
   updateBoundElements,
 } from "@excalidraw/element";
@@ -292,13 +294,15 @@ const changeFontSize = (
 
 // -----------------------------------------------------------------------------
 
-export const actionChangeStrokeColor = register({
+export const actionChangeStrokeColor = register<
+  Pick<AppState, "currentItemStrokeColor">
+>({
   name: "changeStrokeColor",
   label: "labels.stroke",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      ...(value.currentItemStrokeColor && {
+      ...(value?.currentItemStrokeColor && {
         elements: changeProperty(
           elements,
           appState,
@@ -316,7 +320,7 @@ export const actionChangeStrokeColor = register({
         ...appState,
         ...value,
       },
-      captureUpdate: !!value.currentItemStrokeColor
+      captureUpdate: !!value?.currentItemStrokeColor
         ? CaptureUpdateAction.IMMEDIATELY
         : CaptureUpdateAction.EVENTUALLY,
     };
@@ -346,12 +350,14 @@ export const actionChangeStrokeColor = register({
   ),
 });
 
-export const actionChangeBackgroundColor = register({
+export const actionChangeBackgroundColor = register<
+  Pick<AppState, "currentItemBackgroundColor" | "viewBackgroundColor">
+>({
   name: "changeBackgroundColor",
   label: "labels.changeBackground",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
-    if (!value.currentItemBackgroundColor) {
+    if (!value?.currentItemBackgroundColor) {
       return {
         appState: {
           ...appState,
@@ -423,7 +429,7 @@ export const actionChangeBackgroundColor = register({
   ),
 });
 
-export const actionChangeFillStyle = register({
+export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
   name: "changeFillStyle",
   label: "labels.fill",
   trackEvent: false,
@@ -503,7 +509,9 @@ export const actionChangeFillStyle = register({
   },
 });
 
-export const actionChangeStrokeWidth = register({
+export const actionChangeStrokeWidth = register<
+  ExcalidrawElement["strokeWidth"]
+>({
   name: "changeStrokeWidth",
   label: "labels.strokeWidth",
   trackEvent: false,
@@ -559,7 +567,7 @@ export const actionChangeStrokeWidth = register({
   ),
 });
 
-export const actionChangeSloppiness = register({
+export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
   name: "changeSloppiness",
   label: "labels.sloppiness",
   trackEvent: false,
@@ -613,7 +621,9 @@ export const actionChangeSloppiness = register({
   ),
 });
 
-export const actionChangeStrokeStyle = register({
+export const actionChangeStrokeStyle = register<
+  ExcalidrawElement["strokeStyle"]
+>({
   name: "changeStrokeStyle",
   label: "labels.strokeStyle",
   trackEvent: false,
@@ -666,7 +676,7 @@ export const actionChangeStrokeStyle = register({
   ),
 });
 
-export const actionChangeOpacity = register({
+export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
   name: "changeOpacity",
   label: "labels.opacity",
   trackEvent: false,
@@ -690,78 +700,89 @@ export const actionChangeOpacity = register({
   ),
 });
 
-export const actionChangeFontSize = register({
+export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
-  name: "changeFontSize",
+  {
-  label: "labels.fontSize",
+    name: "changeFontSize",
-  trackEvent: false,
+    label: "labels.fontSize",
-  perform: (elements, appState, value, app) => {
+    trackEvent: false,
-    return changeFontSize(elements, appState, app, () => value, value);
+    perform: (elements, appState, value, app) => {
+      return changeFontSize(
+        elements,
+        appState,
+        app,
+        () => {
+          invariant(value, "actionChangeFontSize: Expected a font size value");
+          return value;
+        },
+        value,
+      );
+    },
+    PanelComponent: ({ elements, appState, updateData, app }) => (
+      <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) => updateData(value)}
+          />
+        </div>
+      </fieldset>
+    ),
   },
-  PanelComponent: ({ elements, appState, updateData, app }) => (
+);
-    <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) => updateData(value)}
-        />
-      </div>
-    </fieldset>
-  ),
-});
 
 export const actionDecreaseFontSize = register({
   name: "decreaseFontSize",
@@ -821,7 +842,10 @@ type ChangeFontFamilyData = Partial<
   resetContainers?: true;
 };
 
-export const actionChangeFontFamily = register({
+export const actionChangeFontFamily = register<{
+  currentItemFontFamily: any;
+  currentHoveredFontFamily: any;
+}>({
   name: "changeFontFamily",
   label: "labels.fontFamily",
   trackEvent: false,
@@ -858,6 +882,8 @@ export const actionChangeFontFamily = register({
       };
     }
 
+    invariant(value, "actionChangeFontFamily: value must be defined");
+
     const { currentItemFontFamily, currentHoveredFontFamily } = value;
 
     let nextCaptureUpdateAction: CaptureUpdateActionType =
@@ -1191,7 +1217,7 @@ export const actionChangeFontFamily = register({
   },
 });
 
-export const actionChangeTextAlign = register({
+export const actionChangeTextAlign = register<TextAlign>({
   name: "changeTextAlign",
   label: "Change text alignment",
   trackEvent: false,
@@ -1283,7 +1309,7 @@ export const actionChangeTextAlign = register({
   },
 });
 
-export const actionChangeVerticalAlign = register({
+export const actionChangeVerticalAlign = register<VerticalAlign>({
   name: "changeVerticalAlign",
   label: "Change vertical alignment",
   trackEvent: { category: "element" },
@@ -1375,7 +1401,7 @@ export const actionChangeVerticalAlign = register({
   },
 });
 
-export const actionChangeRoundness = register({
+export const actionChangeRoundness = register<"sharp" | "round">({
   name: "changeRoundness",
   label: "Change edge roundness",
   trackEvent: false,
@@ -1532,15 +1558,16 @@ const getArrowheadOptions = (flip: boolean) => {
   ] as const;
 };
 
-export const actionChangeArrowhead = register({
+export const actionChangeArrowhead = register<{
+  position: "start" | "end";
+  type: Arrowhead;
+}>({
   name: "changeArrowhead",
   label: "Change arrowheads",
   trackEvent: false,
-  perform: (
+  perform: (elements, appState, value) => {
-    elements,
+    invariant(value, "actionChangeArrowhead: value must be defined");
-    appState,
+
-    value: { position: "start" | "end"; type: Arrowhead },
-  ) => {
     return {
       elements: changeProperty(elements, appState, (el) => {
         if (isLinearElement(el)) {
@@ -1616,7 +1643,7 @@ export const actionChangeArrowhead = register({
   },
 });
 
-export const actionChangeArrowType = register({
+export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
   name: "changeArrowType",
   label: "Change arrow types",
   trackEvent: false,
@@ -1717,7 +1744,13 @@ export const actionChangeArrowType = register({
             newElement.startBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (startElement) {
-            bindLinearElement(newElement, startElement, "start", app.scene);
+            bindBindingElement(
+              newElement,
+              startElement,
+              appState.bindMode === "inside" ? "inside" : "orbit",
+              "start",
+              app.scene,
+            );
           }
         }
         if (newElement.endBinding) {
@@ -1725,7 +1758,13 @@ export const actionChangeArrowType = register({
             newElement.endBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (endElement) {
-            bindLinearElement(newElement, endElement, "end", app.scene);
+            bindBindingElement(
+              newElement,
+              endElement,
+              appState.bindMode === "inside" ? "inside" : "orbit",
+              "end",
+              app.scene,
+            );
           }
         }
       }

packages/excalidraw/actions/register.ts

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

packages/excalidraw/actions/types.ts

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

packages/excalidraw/appState.ts

@@ -96,7 +96,7 @@ export const getDefaultAppState = (): Omit<
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
     },
     startBoundElement: null,
-    suggestedBindings: [],
+    suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
     editingFrame: null,
@@ -123,6 +123,7 @@ export const getDefaultAppState = (): Omit<
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
+    bindMode: "orbit",
   };
 };
 
@@ -224,7 +225,7 @@ const APP_STATE_STORAGE_CONF = (<
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
-  suggestedBindings: { browser: false, export: false, server: false },
+  suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
   editingFrame: { browser: false, export: false, server: false },
@@ -247,6 +248,7 @@ const APP_STATE_STORAGE_CONF = (<
   searchMatches: { browser: false, export: false, server: false },
   lockedMultiSelections: { browser: true, export: true, server: true },
   activeLockedId: { browser: false, export: false, server: false },
+  bindMode: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -961,7 +961,7 @@ const CommandItem = ({
           <InlineIcon
             icon={
               typeof command.icon === "function"
-                ? command.icon(appState)
+                ? command.icon(appState, [])
                 : command.icon
             }
           />

packages/excalidraw/components/CommandPalette/types.ts

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

packages/excalidraw/components/ConvertElementTypePopup.tsx

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

packages/excalidraw/components/LayerUI.tsx

@@ -582,7 +582,7 @@ const LayerUI = ({
 
 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
   const {
-    suggestedBindings,
+    suggestedBinding,
     startBoundElement,
     cursorButton,
     scrollX,

packages/excalidraw/components/Stats/Angle.tsx

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

packages/excalidraw/components/Stats/MultiDimension.tsx

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

packages/excalidraw/components/Stats/MultiPosition.tsx

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

packages/excalidraw/components/Stats/Position.tsx

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

packages/excalidraw/components/Stats/index.tsx

@@ -4,9 +4,9 @@ import throttle from "lodash.throttle";
 import { useEffect, useMemo, useState, memo } from "react";
 
 import { STATS_PANELS } from "@excalidraw/common";
-import { getCommonBounds } from "@excalidraw/element";
+import { getCommonBounds, isBindingElement } from "@excalidraw/element";
 import { getUncroppedWidthAndHeight } from "@excalidraw/element";
-import { isElbowArrow, isImageElement } from "@excalidraw/element";
+import { isImageElement } from "@excalidraw/element";
 
 import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
 
@@ -333,7 +333,7 @@ export const StatsInner = memo(
                           appState={appState}
                         />
                       </StatsRow>
-                      {!isElbowArrow(singleElement) && (
+                      {!isBindingElement(singleElement) && (
                         <StatsRow>
                           <Angle
                             property="angle"

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

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

packages/excalidraw/components/Stats/utils.ts

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

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -201,8 +201,9 @@ const getRelevantAppStateProps = (
   selectedGroupIds: appState.selectedGroupIds,
   selectedLinearElement: appState.selectedLinearElement,
   multiElement: appState.multiElement,
+  newElement: appState.newElement,
   isBindingEnabled: appState.isBindingEnabled,
-  suggestedBindings: appState.suggestedBindings,
+  suggestedBinding: appState.suggestedBinding,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,
   collaborators: appState.collaborators, // Necessary for collab. sessions

packages/excalidraw/components/canvases/StaticCanvas.tsx

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

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

@@ -88,8 +88,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "focus": -0.007519379844961235,
+    "fixedPoint": [
-    "gap": 11.562288374879595,
+      0.04,
+      0.4633333333333333,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -118,8 +121,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id49",
-    "focus": -0.0813953488372095,
+    "fixedPoint": [
-    "gap": 1,
+      1,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#1864ab",
   "strokeStyle": "solid",
@@ -144,8 +150,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "focus": 0.10666666666666667,
+    "fixedPoint": [
-    "gap": 3.8343264684446097,
+      -0.01,
+      0.44666666666666666,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -174,8 +183,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "diamond-1",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 4.535423522449215,
+      0.9357142857142857,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#e67700",
   "strokeStyle": "solid",
@@ -334,8 +346,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "text-2",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 16,
+      -2.05,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -364,8 +379,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "startArrowhead": null,
   "startBinding": {
     "elementId": "text-1",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 1,
+      1,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -436,8 +454,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id42",
-    "focus": -0,
+    "fixedPoint": [
-    "gap": 1,
+      0,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -466,8 +487,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id41",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 1,
+      1,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -612,8 +636,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id46",
-    "focus": -0,
+    "fixedPoint": [
-    "gap": 1,
+      0,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -642,8 +669,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id45",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 1,
+      1,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -1476,8 +1506,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "Alice",
-    "focus": -0,
+    "fixedPoint": [
-    "gap": 5.299874999999986,
+      -0.07542628418945944,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -1508,8 +1541,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 1,
+      1.000004978564514,
+      0.5001,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -1539,8 +1575,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "B",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 32,
+      0.46387050630528887,
+      0.48466257668711654,
+    ],
+    "mode": "orbit",
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -1567,8 +1606,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "focus": 0,
+    "fixedPoint": [
-    "gap": 1,
+      0.39381496335223337,
+      1,
+    ],
+    "mode": "orbit",
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",

packages/excalidraw/data/restore.ts

@@ -32,7 +32,6 @@ import {
   isArrowBoundToElement,
   isArrowElement,
   isElbowArrow,
-  isFixedPointBinding,
   isLinearElement,
   isLineElement,
   isTextElement,
@@ -61,7 +60,6 @@ import type {
   FontFamilyValues,
   NonDeletedSceneElementsMap,
   OrderedExcalidrawElement,
-  PointBinding,
   StrokeRoundness,
 } from "@excalidraw/element/types";
 
@@ -123,36 +121,29 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
 
 const repairBinding = <T extends ExcalidrawLinearElement>(
   element: T,
-  binding: PointBinding | FixedPointBinding | null,
+  binding: FixedPointBinding | null,
-): T extends ExcalidrawElbowArrowElement
+): FixedPointBinding | null => {
-  ? FixedPointBinding | null
-  : PointBinding | FixedPointBinding | null => {
   if (!binding) {
     return null;
   }
 
-  const focus = binding.focus || 0;
-
   if (isElbowArrow(element)) {
     const fixedPointBinding:
       | ExcalidrawElbowArrowElement["startBinding"]
-      | ExcalidrawElbowArrowElement["endBinding"] = isFixedPointBinding(binding)
+      | ExcalidrawElbowArrowElement["endBinding"] = {
-      ? {
+      ...binding,
-          ...binding,
+      fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
-          focus,
+      mode: binding.mode || "orbit",
-          fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
+    };
-        }
-      : null;
 
     return fixedPointBinding;
   }
 
   return {
-    ...binding,
+    elementId: binding.elementId,
-    focus,
+    mode: binding.mode || "orbit",
-  } as T extends ExcalidrawElbowArrowElement
+    fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.51, 0.51]),
-    ? FixedPointBinding | null
+  } as FixedPointBinding | null;
-    : PointBinding | FixedPointBinding | null;
 };
 
 const restoreElementWithProperties = <

packages/excalidraw/data/transform.test.ts

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

packages/excalidraw/data/transform.ts

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

packages/excalidraw/global.d.ts

@@ -101,7 +101,10 @@ declare module "image-blob-reduce" {
 
 interface CustomMatchers {
   toBeNonNaNNumber(): void;
-  toCloselyEqualPoints(points: readonly [number, number][]): void;
+  toCloselyEqualPoints(
+    points: readonly [number, number][],
+    precision?: number,
+  ): void;
 }
 
 declare namespace jest {

packages/excalidraw/package.json

@@ -81,8 +81,8 @@
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/common": "0.18.0",
     "@excalidraw/element": "0.18.0",
-    "@excalidraw/math": "0.18.0",
     "@excalidraw/laser-pointer": "1.3.1",
+    "@excalidraw/math": "0.18.0",
     "@excalidraw/mermaid-to-excalidraw": "1.1.3",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.1.6",
@@ -97,8 +97,8 @@
     "image-blob-reduce": "3.0.1",
     "jotai": "2.11.0",
     "jotai-scope": "0.7.2",
-    "lodash.throttle": "4.1.1",
     "lodash.debounce": "4.0.8",
+    "lodash.throttle": "4.1.1",
     "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "2.0.3",

packages/excalidraw/renderer/helpers.ts

@@ -1,26 +1,5 @@
 import { THEME, THEME_FILTER } from "@excalidraw/common";
 
-import { FIXED_BINDING_DISTANCE } from "@excalidraw/element";
-import { getDiamondPoints } from "@excalidraw/element";
-import { elementCenterPoint, getCornerRadius } from "@excalidraw/element";
-
-import {
-  curve,
-  curveCatmullRomCubicApproxPoints,
-  curveCatmullRomQuadraticApproxPoints,
-  curveOffsetPoints,
-  type GlobalPoint,
-  offsetPointsForQuadraticBezier,
-  pointFrom,
-  pointRotateRads,
-} from "@excalidraw/math";
-
-import type {
-  ElementsMap,
-  ExcalidrawDiamondElement,
-  ExcalidrawRectanguloidElement,
-} from "@excalidraw/element/types";
-
 import type { StaticCanvasRenderConfig } from "../scene/types";
 import type { AppState, StaticCanvasAppState } from "../types";
 
@@ -97,163 +76,6 @@ export const bootstrapCanvas = ({
   return context;
 };
 
-function drawCatmullRomQuadraticApprox(
-  ctx: CanvasRenderingContext2D,
-  points: GlobalPoint[],
-  tension = 0.5,
-) {
-  const pointSets = curveCatmullRomQuadraticApproxPoints(points, tension);
-  if (pointSets) {
-    for (let i = 0; i < pointSets.length - 1; i++) {
-      const [[cpX, cpY], [p2X, p2Y]] = pointSets[i];
-
-      ctx.quadraticCurveTo(cpX, cpY, p2X, p2Y);
-    }
-  }
-}
-
-function drawCatmullRomCubicApprox(
-  ctx: CanvasRenderingContext2D,
-  points: GlobalPoint[],
-  tension = 0.5,
-) {
-  const pointSets = curveCatmullRomCubicApproxPoints(points, tension);
-  if (pointSets) {
-    for (let i = 0; i < pointSets.length; i++) {
-      const [[cp1x, cp1y], [cp2x, cp2y], [x, y]] = pointSets[i];
-      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-    }
-  }
-}
-
-export const drawHighlightForRectWithRotation = (
-  context: CanvasRenderingContext2D,
-  element: ExcalidrawRectanguloidElement,
-  elementsMap: ElementsMap,
-  padding: number,
-) => {
-  const [x, y] = pointRotateRads(
-    pointFrom<GlobalPoint>(element.x, element.y),
-    elementCenterPoint(element, elementsMap),
-    element.angle,
-  );
-
-  context.save();
-  context.translate(x, y);
-  context.rotate(element.angle);
-
-  let radius = getCornerRadius(
-    Math.min(element.width, element.height),
-    element,
-  );
-  if (radius === 0) {
-    radius = 0.01;
-  }
-
-  context.beginPath();
-
-  {
-    const topLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom(0, 0 + radius),
-      pointFrom(0, 0),
-      pointFrom(0 + radius, 0),
-      padding,
-    );
-    const topRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom(element.width - radius, 0),
-      pointFrom(element.width, 0),
-      pointFrom(element.width, radius),
-      padding,
-    );
-    const bottomRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom(element.width, element.height - radius),
-      pointFrom(element.width, element.height),
-      pointFrom(element.width - radius, element.height),
-      padding,
-    );
-    const bottomLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom(radius, element.height),
-      pointFrom(0, element.height),
-      pointFrom(0, element.height - radius),
-      padding,
-    );
-
-    context.moveTo(
-      topLeftApprox[topLeftApprox.length - 1][0],
-      topLeftApprox[topLeftApprox.length - 1][1],
-    );
-    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topRightApprox);
-    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
-    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
-    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topLeftApprox);
-  }
-
-  // Counter-clockwise for the cutout in the middle. We need to have an "inverse
-  // mask" on a filled shape for the diamond highlight, because stroking creates
-  // sharp inset edges on line joins < 90 degrees.
-  {
-    const topLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom(0 + radius, 0),
-      pointFrom(0, 0),
-      pointFrom(0, 0 + radius),
-      -FIXED_BINDING_DISTANCE,
-    );
-    const topRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom(element.width, radius),
-      pointFrom(element.width, 0),
-      pointFrom(element.width - radius, 0),
-      -FIXED_BINDING_DISTANCE,
-    );
-    const bottomRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom(element.width - radius, element.height),
-      pointFrom(element.width, element.height),
-      pointFrom(element.width, element.height - radius),
-      -FIXED_BINDING_DISTANCE,
-    );
-    const bottomLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom(0, element.height - radius),
-      pointFrom(0, element.height),
-      pointFrom(radius, element.height),
-      -FIXED_BINDING_DISTANCE,
-    );
-
-    context.moveTo(
-      topLeftApprox[topLeftApprox.length - 1][0],
-      topLeftApprox[topLeftApprox.length - 1][1],
-    );
-    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
-    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
-    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topRightApprox);
-    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topLeftApprox);
-  }
-
-  context.closePath();
-  context.fill();
-
-  context.restore();
-};
-
-export const strokeEllipseWithRotation = (
-  context: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  angle: number,
-) => {
-  context.beginPath();
-  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
-  context.stroke();
-};
-
 export const strokeRectWithRotation = (
   context: CanvasRenderingContext2D,
   x: number,
@@ -283,147 +105,3 @@ export const strokeRectWithRotation = (
   }
   context.restore();
 };
-
-export const drawHighlightForDiamondWithRotation = (
-  context: CanvasRenderingContext2D,
-  padding: number,
-  element: ExcalidrawDiamondElement,
-  elementsMap: ElementsMap,
-) => {
-  const [x, y] = pointRotateRads(
-    pointFrom<GlobalPoint>(element.x, element.y),
-    elementCenterPoint(element, elementsMap),
-    element.angle,
-  );
-  context.save();
-  context.translate(x, y);
-  context.rotate(element.angle);
-
-  {
-    context.beginPath();
-
-    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
-      getDiamondPoints(element);
-    const verticalRadius = element.roundness
-      ? getCornerRadius(Math.abs(topX - leftX), element)
-      : (topX - leftX) * 0.01;
-    const horizontalRadius = element.roundness
-      ? getCornerRadius(Math.abs(rightY - topY), element)
-      : (rightY - topY) * 0.01;
-    const topApprox = curveOffsetPoints(
-      curve(
-        pointFrom(topX - verticalRadius, topY + horizontalRadius),
-        pointFrom(topX, topY),
-        pointFrom(topX, topY),
-        pointFrom(topX + verticalRadius, topY + horizontalRadius),
-      ),
-      padding,
-    );
-    const rightApprox = curveOffsetPoints(
-      curve(
-        pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
-        pointFrom(rightX, rightY),
-        pointFrom(rightX, rightY),
-        pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
-      ),
-      padding,
-    );
-    const bottomApprox = curveOffsetPoints(
-      curve(
-        pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
-        pointFrom(bottomX, bottomY),
-        pointFrom(bottomX, bottomY),
-        pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
-      ),
-      padding,
-    );
-    const leftApprox = curveOffsetPoints(
-      curve(
-        pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
-        pointFrom(leftX, leftY),
-        pointFrom(leftX, leftY),
-        pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
-      ),
-      padding,
-    );
-
-    context.moveTo(
-      topApprox[topApprox.length - 1][0],
-      topApprox[topApprox.length - 1][1],
-    );
-    context.lineTo(rightApprox[1][0], rightApprox[1][1]);
-    drawCatmullRomCubicApprox(context, rightApprox);
-    context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
-    drawCatmullRomCubicApprox(context, bottomApprox);
-    context.lineTo(leftApprox[1][0], leftApprox[1][1]);
-    drawCatmullRomCubicApprox(context, leftApprox);
-    context.lineTo(topApprox[1][0], topApprox[1][1]);
-    drawCatmullRomCubicApprox(context, topApprox);
-  }
-
-  // Counter-clockwise for the cutout in the middle. We need to have an "inverse
-  // mask" on a filled shape for the diamond highlight, because stroking creates
-  // sharp inset edges on line joins < 90 degrees.
-  {
-    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
-      getDiamondPoints(element);
-    const verticalRadius = element.roundness
-      ? getCornerRadius(Math.abs(topX - leftX), element)
-      : (topX - leftX) * 0.01;
-    const horizontalRadius = element.roundness
-      ? getCornerRadius(Math.abs(rightY - topY), element)
-      : (rightY - topY) * 0.01;
-    const topApprox = curveOffsetPoints(
-      curve(
-        pointFrom(topX + verticalRadius, topY + horizontalRadius),
-        pointFrom(topX, topY),
-        pointFrom(topX, topY),
-        pointFrom(topX - verticalRadius, topY + horizontalRadius),
-      ),
-      -FIXED_BINDING_DISTANCE,
-    );
-    const rightApprox = curveOffsetPoints(
-      curve(
-        pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
-        pointFrom(rightX, rightY),
-        pointFrom(rightX, rightY),
-        pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
-      ),
-      -FIXED_BINDING_DISTANCE,
-    );
-    const bottomApprox = curveOffsetPoints(
-      curve(
-        pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
-        pointFrom(bottomX, bottomY),
-        pointFrom(bottomX, bottomY),
-        pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
-      ),
-      -FIXED_BINDING_DISTANCE,
-    );
-    const leftApprox = curveOffsetPoints(
-      curve(
-        pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
-        pointFrom(leftX, leftY),
-        pointFrom(leftX, leftY),
-        pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
-      ),
-      -FIXED_BINDING_DISTANCE,
-    );
-
-    context.moveTo(
-      topApprox[topApprox.length - 1][0],
-      topApprox[topApprox.length - 1][1],
-    );
-    context.lineTo(leftApprox[1][0], leftApprox[1][1]);
-    drawCatmullRomCubicApprox(context, leftApprox);
-    context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
-    drawCatmullRomCubicApprox(context, bottomApprox);
-    context.lineTo(rightApprox[1][0], rightApprox[1][1]);
-    drawCatmullRomCubicApprox(context, rightApprox);
-    context.lineTo(topApprox[1][0], topApprox[1][1]);
-    drawCatmullRomCubicApprox(context, topApprox);
-  }
-  context.closePath();
-  context.fill();
-  context.restore();
-};

packages/excalidraw/renderer/interactiveScene.ts

@@ -16,7 +16,6 @@ import {
   throttleRAF,
 } from "@excalidraw/common";
 
-import { FIXED_BINDING_DISTANCE, maxBindingGap } from "@excalidraw/element";
 import { LinearElementEditor } from "@excalidraw/element";
 import {
   getOmitSidesForDevice,
@@ -44,11 +43,6 @@ import {
 
 import { getCommonBounds, getElementAbsoluteCoords } from "@excalidraw/element";
 
-import type {
-  SuggestedBinding,
-  SuggestedPointBinding,
-} from "@excalidraw/element";
-
 import type {
   TransformHandles,
   TransformHandleType,
@@ -56,7 +50,6 @@ import type {
 
 import type {
   ElementsMap,
-  ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawFrameLikeElement,
   ExcalidrawImageElement,
@@ -79,11 +72,8 @@ import { getClientColor, renderRemoteCursors } from "../clients";
 
 import {
   bootstrapCanvas,
-  drawHighlightForDiamondWithRotation,
-  drawHighlightForRectWithRotation,
   fillCircle,
   getNormalizedCanvasDimensions,
-  strokeEllipseWithRotation,
   strokeRectWithRotation,
 } from "./helpers";
 
@@ -188,85 +178,6 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
   );
 };
 
-const renderBindingHighlightForBindableElement = (
-  context: CanvasRenderingContext2D,
-  element: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  zoom: InteractiveCanvasAppState["zoom"],
-) => {
-  const padding = maxBindingGap(element, element.width, element.height, zoom);
-
-  context.fillStyle = "rgba(0,0,0,.05)";
-
-  switch (element.type) {
-    case "rectangle":
-    case "text":
-    case "image":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      drawHighlightForRectWithRotation(context, element, elementsMap, padding);
-      break;
-    case "diamond":
-      drawHighlightForDiamondWithRotation(
-        context,
-        padding,
-        element,
-        elementsMap,
-      );
-      break;
-    case "ellipse": {
-      const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-      const width = x2 - x1;
-      const height = y2 - y1;
-
-      context.strokeStyle = "rgba(0,0,0,.05)";
-      context.lineWidth = padding - FIXED_BINDING_DISTANCE;
-
-      strokeEllipseWithRotation(
-        context,
-        width + padding + FIXED_BINDING_DISTANCE,
-        height + padding + FIXED_BINDING_DISTANCE,
-        x1 + width / 2,
-        y1 + height / 2,
-        element.angle,
-      );
-      break;
-    }
-  }
-};
-
-const renderBindingHighlightForSuggestedPointBinding = (
-  context: CanvasRenderingContext2D,
-  suggestedBinding: SuggestedPointBinding,
-  elementsMap: ElementsMap,
-  zoom: InteractiveCanvasAppState["zoom"],
-) => {
-  const [element, startOrEnd, bindableElement] = suggestedBinding;
-
-  const threshold = maxBindingGap(
-    bindableElement,
-    bindableElement.width,
-    bindableElement.height,
-    zoom,
-  );
-
-  context.strokeStyle = "rgba(0,0,0,0)";
-  context.fillStyle = "rgba(0,0,0,.05)";
-
-  const pointIndices =
-    startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
-  pointIndices.forEach((index) => {
-    const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-      element,
-      index,
-      elementsMap,
-    );
-    fillCircle(context, x, y, threshold, true);
-  });
-};
-
 type ElementSelectionBorder = {
   angle: number;
   x1: number;
@@ -336,23 +247,6 @@ const renderSelectionBorder = (
   context.restore();
 };
 
-const renderBindingHighlight = (
-  context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState,
-  suggestedBinding: SuggestedBinding,
-  elementsMap: ElementsMap,
-) => {
-  const renderHighlight = Array.isArray(suggestedBinding)
-    ? renderBindingHighlightForSuggestedPointBinding
-    : renderBindingHighlightForBindableElement;
-
-  context.save();
-  context.translate(appState.scrollX, appState.scrollY);
-  renderHighlight(context, suggestedBinding as any, elementsMap, appState.zoom);
-
-  context.restore();
-};
-
 const renderFrameHighlight = (
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
@@ -813,19 +707,6 @@ const _renderInteractiveScene = ({
     }
   }
 
-  if (appState.isBindingEnabled) {
-    appState.suggestedBindings
-      .filter((binding) => binding != null)
-      .forEach((suggestedBinding) => {
-        renderBindingHighlight(
-          context,
-          appState,
-          suggestedBinding!,
-          elementsMap,
-        );
-      });
-  }
-
   if (appState.frameToHighlight) {
     renderFrameHighlight(
       context,
@@ -891,7 +772,11 @@ const _renderInteractiveScene = ({
   }
 
   // Paint selected elements
-  if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) {
+  if (
+    !appState.multiElement &&
+    !appState.newElement &&
+    !appState.selectedLinearElement?.isEditing
+  ) {
     const showBoundingBox = shouldShowBoundingBox(selectedElements, appState);
 
     const isSingleLinearElementSelected =

packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -981,7 +982,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -1082,6 +1083,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1172,7 +1174,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": {
     "message": "Added to library",
@@ -1294,6 +1296,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1384,7 +1387,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -1623,6 +1626,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1713,7 +1717,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -1952,6 +1956,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2042,7 +2047,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": {
     "message": "Copied styles.",
@@ -2164,6 +2169,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2252,7 +2258,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -2403,6 +2409,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2493,7 +2500,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -2699,6 +2706,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2794,7 +2802,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -3069,6 +3077,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3159,7 +3168,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": {
     "message": "Copied styles.",
@@ -3560,6 +3569,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3650,7 +3660,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -3881,6 +3891,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3971,7 +3982,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -4202,6 +4213,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -4295,7 +4307,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -4611,6 +4623,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -5578,7 +5591,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -5826,6 +5839,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -6795,7 +6809,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -7092,6 +7106,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -7724,7 +7739,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -7757,6 +7772,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -8721,7 +8737,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,
@@ -8746,6 +8762,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -9713,7 +9730,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,

packages/excalidraw/tests/__snapshots__/move.test.tsx.snap

@@ -95,135 +95,3 @@ exports[`move element > rectangle 5`] = `
   "y": 40,
 }
 `;
-
-exports[`move element > rectangles with binding arrow 5`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "id6",
-      "type": "arrow",
-    },
-  ],
-  "customData": undefined,
-  "fillStyle": "solid",
-  "frameId": null,
-  "groupIds": [],
-  "height": 100,
-  "id": "id0",
-  "index": "a0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": null,
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 2,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1006504105,
-  "width": 100,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`move element > rectangles with binding arrow 6`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "id6",
-      "type": "arrow",
-    },
-  ],
-  "customData": undefined,
-  "fillStyle": "solid",
-  "frameId": null,
-  "groupIds": [],
-  "height": 300,
-  "id": "id3",
-  "index": "a1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": null,
-  "seed": 1116226695,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 2,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 1984422985,
-  "width": 300,
-  "x": 201,
-  "y": 2,
-}
-`;
-
-exports[`move element > rectangles with binding arrow 7`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "customData": undefined,
-  "elbowed": false,
-  "endArrowhead": "arrow",
-  "endBinding": {
-    "elementId": "id3",
-    "focus": "-0.46667",
-    "gap": 10,
-  },
-  "fillStyle": "solid",
-  "frameId": null,
-  "groupIds": [],
-  "height": "81.40630",
-  "id": "id6",
-  "index": "a2",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      "81.00000",
-      "81.40630",
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 23633383,
-  "startArrowhead": null,
-  "startBinding": {
-    "elementId": "id0",
-    "focus": "-0.60000",
-    "gap": 10,
-  },
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 2,
-  "type": "arrow",
-  "updated": 1,
-  "version": 11,
-  "versionNonce": 1573789895,
-  "width": "81.00000",
-  "x": "110.00000",
-  "y": 50,
-}
-`;

packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap

@@ -49,8 +49,8 @@ exports[`multi point mode in linear elements > arrow 3`] = `
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 8,
+  "version": 7,
-  "versionNonce": 1604849351,
+  "versionNonce": 400692809,
   "width": 70,
   "x": 30,
   "y": 30,
@@ -104,8 +104,8 @@ exports[`multi point mode in linear elements > line 3`] = `
   "strokeWidth": 2,
   "type": "line",
   "updated": 1,
-  "version": 8,
+  "version": 7,
-  "versionNonce": 1604849351,
+  "versionNonce": 400692809,
   "width": 70,
   "x": 30,
   "y": 30,

packages/excalidraw/tests/history.test.tsx

@@ -1011,7 +1011,7 @@ describe("history", () => {
       // leave editor
       Keyboard.keyPress(KEYS.ESCAPE);
 
-      expect(API.getUndoStack().length).toBe(6);
+      expect(API.getUndoStack().length).toBe(5);
       expect(API.getRedoStack().length).toBe(0);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
@@ -1028,7 +1028,7 @@ describe("history", () => {
       ]);
 
       Keyboard.undo();
-      expect(API.getUndoStack().length).toBe(5);
+      expect(API.getUndoStack().length).toBe(4);
       expect(API.getRedoStack().length).toBe(1);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@@ -1048,11 +1048,11 @@ describe("history", () => {
       mouse.clickAt(0, 0);
       mouse.clickAt(10, 10);
       mouse.clickAt(20, 20);
-      expect(API.getUndoStack().length).toBe(5);
+      expect(API.getUndoStack().length).toBe(4);
       expect(API.getRedoStack().length).toBe(1);
 
       Keyboard.undo();
-      expect(API.getUndoStack().length).toBe(4);
+      expect(API.getUndoStack().length).toBe(3);
       expect(API.getRedoStack().length).toBe(2);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@@ -1069,10 +1069,10 @@ describe("history", () => {
       ]);
 
       Keyboard.undo();
-      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getUndoStack().length).toBe(2);
       expect(API.getRedoStack().length).toBe(3);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false); // undo `open editor`
+      expect(h.state.selectedLinearElement?.isEditing).toBe(false); // undo `open editor`
       expect(h.state.selectedLinearElement?.elementId).toBe(h.elements[0].id);
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -1085,29 +1085,29 @@ describe("history", () => {
         }),
       ]);
 
-      Keyboard.undo();
+      // Keyboard.undo();
-      expect(API.getUndoStack().length).toBe(2);
+      // expect(API.getUndoStack().length).toBe(2);
-      expect(API.getRedoStack().length).toBe(4);
+      // expect(API.getRedoStack().length).toBe(4);
-      expect(assertSelectedElements(h.elements[0]));
+      // expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
+      // expect(h.state.selectedLinearElement?.isEditing).toBe(false);
-      expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
+      // expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
-      expect(h.elements).toEqual([
+      // expect(h.elements).toEqual([
-        expect.objectContaining({
+      //   expect.objectContaining({
-          isDeleted: false,
+      //     isDeleted: false,
-          points: [
+      //     points: [
-            [0, 0],
+      //       [0, 0],
-            [10, 10],
+      //       [10, 10],
-            [20, 0],
+      //       [20, 0],
-          ],
+      //     ],
-        }),
+      //   }),
-      ]);
+      // ]);
 
       Keyboard.undo();
       expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(5);
+      expect(API.getRedoStack().length).toBe(4);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
+      expect(h.state.selectedLinearElement?.isEditing).toBe(false);
-      expect(h.state.selectedLinearElement).toBeNull();
+      expect(h.state.selectedLinearElement?.elementId).toBe(h.elements[0].id);
       expect(h.elements).toEqual([
         expect.objectContaining({
           isDeleted: false,
@@ -1120,9 +1120,8 @@ describe("history", () => {
 
       Keyboard.undo();
       expect(API.getUndoStack().length).toBe(0);
-      expect(API.getRedoStack().length).toBe(6);
+      expect(API.getRedoStack().length).toBe(5);
       expect(API.getSelectedElements().length).toBe(0);
-      expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
       expect(h.state.selectedLinearElement).toBeNull();
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -1136,10 +1135,10 @@ describe("history", () => {
 
       Keyboard.redo();
       expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(5);
+      expect(API.getRedoStack().length).toBe(4);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
+      expect(h.state.selectedLinearElement?.isEditing).toBe(false);
-      expect(h.state.selectedLinearElement).toBeNull();
+      expect(h.state.selectedLinearElement?.elementId).toBe(h.elements[0].id);
       expect(h.elements).toEqual([
         expect.objectContaining({
           isDeleted: false,
@@ -1150,25 +1149,25 @@ describe("history", () => {
         }),
       ]);
 
+      // Keyboard.redo();
+      // expect(API.getUndoStack().length).toBe(2);
+      // expect(API.getRedoStack().length).toBe(3);
+      // expect(assertSelectedElements(h.elements[0]));
+      // expect(h.state.selectedLinearElement?.isEditing).toBe(false);
+      // expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
+      // expect(h.elements).toEqual([
+      //   expect.objectContaining({
+      //     isDeleted: false,
+      //     points: [
+      //       [0, 0],
+      //       [10, 10],
+      //       [20, 0],
+      //     ],
+      //   }),
+      // ]);
+
       Keyboard.redo();
       expect(API.getUndoStack().length).toBe(2);
-      expect(API.getRedoStack().length).toBe(4);
-      expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
-      expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
-      expect(h.elements).toEqual([
-        expect.objectContaining({
-          isDeleted: false,
-          points: [
-            [0, 0],
-            [10, 10],
-            [20, 0],
-          ],
-        }),
-      ]);
-
-      Keyboard.redo();
-      expect(API.getUndoStack().length).toBe(3);
       expect(API.getRedoStack().length).toBe(3);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false); // undo `open editor`
@@ -1185,7 +1184,7 @@ describe("history", () => {
       ]);
 
       Keyboard.redo();
-      expect(API.getUndoStack().length).toBe(4);
+      expect(API.getUndoStack().length).toBe(3);
       expect(API.getRedoStack().length).toBe(2);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@@ -1202,7 +1201,7 @@ describe("history", () => {
       ]);
 
       Keyboard.redo();
-      expect(API.getUndoStack().length).toBe(5);
+      expect(API.getUndoStack().length).toBe(4);
       expect(API.getRedoStack().length).toBe(1);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@@ -1219,7 +1218,7 @@ describe("history", () => {
       ]);
 
       Keyboard.redo();
-      expect(API.getUndoStack().length).toBe(6);
+      expect(API.getUndoStack().length).toBe(5);
       expect(API.getRedoStack().length).toBe(0);
       expect(assertSelectedElements(h.elements[0]));
       expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
@@ -1579,13 +1578,13 @@ describe("history", () => {
         expect(API.getUndoStack().length).toBe(5);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([1, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([0, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(rect1.boundElements).toStrictEqual([
           { id: text.id, type: "text" },
@@ -1602,13 +1601,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(1);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([1, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([0, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1625,13 +1624,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(0);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([1, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([0, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1656,13 +1655,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(0);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([1, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([0, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1679,13 +1678,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(1);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([1, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          focus: expect.toBeNonNaNNumber(),
+          fixedPoint: expect.arrayContaining([0, 0.5001]),
-          gap: expect.toBeNonNaNNumber(),
+          mode: "orbit",
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1734,13 +1733,19 @@ describe("history", () => {
               id: arrow.id,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               isDeleted: true,
             }),
@@ -1779,13 +1784,19 @@ describe("history", () => {
               id: arrow.id,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               isDeleted: false,
             }),
@@ -1823,8 +1834,11 @@ describe("history", () => {
               startBinding: null,
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               isDeleted: false,
             }),
@@ -1858,13 +1872,19 @@ describe("history", () => {
               id: arrow.id,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               isDeleted: false,
             }),
@@ -1931,13 +1951,19 @@ describe("history", () => {
               id: arrow.id,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               isDeleted: false,
             }),
@@ -2288,15 +2314,13 @@ describe("history", () => {
             ],
             startBinding: {
               elementId: "KPrBI4g_v9qUB1XxYLgSz",
-              focus: -0.001587301587301948,
-              gap: 5,
               fixedPoint: [1.0318471337579618, 0.49920634920634904],
+              mode: "orbit",
             } as FixedPointBinding,
             endBinding: {
               elementId: "u2JGnnmoJ0VATV4vCNJE5",
-              focus: -0.0016129032258049847,
-              gap: 3.537079145500037,
               fixedPoint: [0.4991935483870975, -0.03875193720914723],
+              mode: "orbit",
             } as FixedPointBinding,
           },
         ],
@@ -2411,10 +2435,9 @@ describe("history", () => {
         captureUpdate: CaptureUpdateAction.NEVER,
       });
 
-      Keyboard.undo(); // undo `actionFinalize`
       Keyboard.undo();
       expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(2);
+      expect(API.getRedoStack().length).toBe(1);
       expect(h.elements).toEqual([
         expect.objectContaining({
           points: [
@@ -2428,7 +2451,7 @@ describe("history", () => {
 
       Keyboard.undo();
       expect(API.getUndoStack().length).toBe(0);
-      expect(API.getRedoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(2);
       expect(h.elements).toEqual([
         expect.objectContaining({
           isDeleted: true,
@@ -2441,7 +2464,7 @@ describe("history", () => {
 
       Keyboard.redo();
       expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(2);
+      expect(API.getRedoStack().length).toBe(1);
       expect(h.elements).toEqual([
         expect.objectContaining({
           isDeleted: false,
@@ -2454,21 +2477,6 @@ describe("history", () => {
 
       Keyboard.redo();
       expect(API.getUndoStack().length).toBe(2);
-      expect(API.getRedoStack().length).toBe(1);
-      expect(h.elements).toEqual([
-        expect.objectContaining({
-          points: [
-            [0, 0],
-            [5, 5],
-            [10, 10],
-            [15, 15],
-            [20, 20],
-          ],
-        }),
-      ]);
-
-      Keyboard.redo(); // redo `actionFinalize`
-      expect(API.getUndoStack().length).toBe(3);
       expect(API.getRedoStack().length).toBe(0);
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -2968,7 +2976,7 @@ describe("history", () => {
       // leave editor
       Keyboard.keyPress(KEYS.ESCAPE);
 
-      expect(API.getUndoStack().length).toBe(4);
+      expect(API.getUndoStack().length).toBe(3);
       expect(API.getRedoStack().length).toBe(0);
       expect(h.state.selectedLinearElement).not.toBeNull();
       expect(h.state.selectedLinearElement?.isEditing).toBe(false);
@@ -2985,11 +2993,11 @@ describe("history", () => {
 
       Keyboard.undo();
       expect(API.getUndoStack().length).toBe(0);
-      expect(API.getRedoStack().length).toBe(4);
+      expect(API.getRedoStack().length).toBe(3);
       expect(h.state.selectedLinearElement).toBeNull();
 
       Keyboard.redo();
-      expect(API.getUndoStack().length).toBe(4);
+      expect(API.getUndoStack().length).toBe(3);
       expect(API.getRedoStack().length).toBe(0);
       expect(h.state.selectedLinearElement).toBeNull();
       expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
@@ -4490,16 +4498,30 @@ describe("history", () => {
 
         // create start binding
         mouse.downAt(0, 0);
-        mouse.moveTo(0, 1);
+        mouse.moveTo(0, 10);
-        mouse.moveTo(0, 0);
+        mouse.moveTo(0, 10);
         mouse.up();
 
         // create end binding
         mouse.downAt(100, 0);
-        mouse.moveTo(100, 1);
+        mouse.moveTo(100, 10);
-        mouse.moveTo(100, 0);
+        mouse.moveTo(100, 10);
         mouse.up();
 
+        expect(
+          (h.elements[2] as ExcalidrawElbowArrowElement).startBinding
+            ?.fixedPoint,
+        ).not.toEqual([1, 0.5001]);
+        expect(
+          (h.elements[2] as ExcalidrawElbowArrowElement).startBinding?.mode,
+        ).toBe("orbit");
+        expect(
+          (h.elements[2] as ExcalidrawElbowArrowElement).endBinding,
+        ).not.toEqual([1, 0.5001]);
+        expect(
+          (h.elements[2] as ExcalidrawElbowArrowElement).endBinding?.mode,
+        ).toBe("orbit");
+
         expect(h.elements).toEqual(
           expect.arrayContaining([
             expect.objectContaining({
@@ -4514,13 +4536,19 @@ describe("history", () => {
               id: arrowId,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
             }),
           ]),
@@ -4533,12 +4561,16 @@ describe("history", () => {
         expect(h.elements).toEqual([
           expect.objectContaining({
             id: rect1.id,
-            boundElements: [],
+            boundElements: [{ id: arrowId, type: "arrow" }],
           }),
           expect.objectContaining({ id: rect2.id, boundElements: [] }),
           expect.objectContaining({
             id: arrowId,
-            startBinding: null,
+            startBinding: expect.objectContaining({
+              elementId: rect1.id,
+              fixedPoint: [1, 0.5001],
+              mode: "inside",
+            }),
             endBinding: null,
           }),
         ]);
@@ -4583,13 +4615,13 @@ describe("history", () => {
                 id: arrowId,
                 startBinding: expect.objectContaining({
                   elementId: rect1.id,
-                  focus: expect.toBeNonNaNNumber(),
+                  fixedPoint: [1, 0.6],
-                  gap: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
                 }),
                 endBinding: expect.objectContaining({
                   elementId: rect2.id,
-                  focus: expect.toBeNonNaNNumber(),
+                  fixedPoint: [0, 0.6],
-                  gap: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
                 }),
               }),
             ]),
@@ -4602,12 +4634,21 @@ describe("history", () => {
           expect(h.elements).toEqual([
             expect.objectContaining({
               id: rect1.id,
-              boundElements: [],
+              boundElements: [
+                expect.objectContaining({
+                  id: arrowId,
+                  type: "arrow",
+                }),
+              ],
             }),
             expect.objectContaining({ id: rect2.id, boundElements: [] }),
             expect.objectContaining({
               id: arrowId,
-              startBinding: null,
+              startBinding: expect.objectContaining({
+                elementId: rect1.id,
+                fixedPoint: [1, 0.5001],
+                mode: "inside",
+              }),
               endBinding: null,
             }),
           ]);
@@ -4626,13 +4667,13 @@ describe("history", () => {
 
         // create start binding
         mouse.downAt(0, 0);
-        mouse.moveTo(0, 1);
+        mouse.moveTo(0, 10);
-        mouse.upAt(0, 0);
+        mouse.upAt(0, 10);
 
         // create end binding
         mouse.downAt(100, 0);
-        mouse.moveTo(100, 1);
+        mouse.moveTo(100, 10);
-        mouse.upAt(100, 0);
+        mouse.upAt(100, 10);
 
         expect(h.elements).toEqual(
           expect.arrayContaining([
@@ -4648,13 +4689,19 @@ describe("history", () => {
               id: arrowId,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
             }),
           ]),
@@ -4667,12 +4714,21 @@ describe("history", () => {
         expect(h.elements).toEqual([
           expect.objectContaining({
             id: rect1.id,
-            boundElements: [],
+            boundElements: [
+              expect.objectContaining({
+                id: arrowId,
+                type: "arrow",
+              }),
+            ],
           }),
           expect.objectContaining({ id: rect2.id, boundElements: [] }),
           expect.objectContaining({
             id: arrowId,
-            startBinding: null,
+            startBinding: expect.objectContaining({
+              elementId: rect1.id,
+              fixedPoint: [1, 0.5001],
+              mode: "inside",
+            }),
             endBinding: null,
           }),
         ]);
@@ -4692,9 +4748,8 @@ describe("history", () => {
             newElementWith(h.elements[2] as ExcalidrawElbowArrowElement, {
               endBinding: {
                 elementId: remoteContainer.id,
-                gap: 1,
-                focus: 0,
                 fixedPoint: [0.5, 1],
+                mode: "orbit",
               },
             }),
             remoteContainer,
@@ -4721,14 +4776,14 @@ describe("history", () => {
                 id: arrowId,
                 startBinding: expect.objectContaining({
                   elementId: rect1.id,
-                  focus: expect.toBeNonNaNNumber(),
+                  fixedPoint: [1, 0.6],
-                  gap: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
                 }),
                 // rebound with previous rectangle
                 endBinding: expect.objectContaining({
                   elementId: rect2.id,
-                  focus: expect.toBeNonNaNNumber(),
+                  fixedPoint: [0, 0.6],
-                  gap: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
                 }),
               }),
               expect.objectContaining({
@@ -4746,7 +4801,12 @@ describe("history", () => {
             expect.arrayContaining([
               expect.objectContaining({
                 id: rect1.id,
-                boundElements: [],
+                boundElements: [
+                  expect.objectContaining({
+                    id: arrowId,
+                    type: "arrow",
+                  }),
+                ],
               }),
               expect.objectContaining({
                 id: rect2.id,
@@ -4754,16 +4814,16 @@ describe("history", () => {
               }),
               expect.objectContaining({
                 id: arrowId,
-                startBinding: null,
+                startBinding: expect.objectContaining({
+                  elementId: rect1.id,
+                  fixedPoint: [1, 0.5001],
+                  mode: "inside",
+                }),
                 endBinding: expect.objectContaining({
                   // now we are back in the previous state!
                   elementId: remoteContainer.id,
-                  fixedPoint: [
+                  fixedPoint: [0.5, 1],
-                    expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                    expect.toBeNonNaNNumber(),
-                  ],
-                  focus: expect.toBeNonNaNNumber(),
-                  gap: expect.toBeNonNaNNumber(),
                 }),
               }),
               expect.objectContaining({
@@ -4781,15 +4841,13 @@ describe("history", () => {
           type: "arrow",
           startBinding: {
             elementId: rect1.id,
-            gap: 1,
-            focus: 0,
             fixedPoint: [1, 0.5],
+            mode: "orbit",
           },
           endBinding: {
             elementId: rect2.id,
-            gap: 1,
-            focus: 0,
             fixedPoint: [0.5, 1],
+            mode: "orbit",
           },
         });
 
@@ -4843,8 +4901,7 @@ describe("history", () => {
                     expect.toBeNonNaNNumber(),
                     expect.toBeNonNaNNumber(),
                   ],
-                  focus: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                  gap: expect.toBeNonNaNNumber(),
                 }),
                 endBinding: expect.objectContaining({
                   // now we are back in the previous state!
@@ -4853,8 +4910,7 @@ describe("history", () => {
                     expect.toBeNonNaNNumber(),
                     expect.toBeNonNaNNumber(),
                   ],
-                  focus: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                  gap: expect.toBeNonNaNNumber(),
                 }),
               }),
               expect.objectContaining({
@@ -4890,15 +4946,13 @@ describe("history", () => {
             newElementWith(h.elements[0] as ExcalidrawElbowArrowElement, {
               startBinding: {
                 elementId: rect1.id,
-                gap: 1,
-                focus: 0,
                 fixedPoint: [0.5, 1],
+                mode: "orbit",
               },
               endBinding: {
                 elementId: rect2.id,
-                gap: 1,
-                focus: 0,
                 fixedPoint: [1, 0.5],
+                mode: "orbit",
               },
             }),
             newElementWith(rect1, {
@@ -4925,8 +4979,7 @@ describe("history", () => {
                     expect.toBeNonNaNNumber(),
                     expect.toBeNonNaNNumber(),
                   ],
-                  focus: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                  gap: expect.toBeNonNaNNumber(),
                 }),
                 endBinding: expect.objectContaining({
                   elementId: rect2.id,
@@ -4934,8 +4987,7 @@ describe("history", () => {
                     expect.toBeNonNaNNumber(),
                     expect.toBeNonNaNNumber(),
                   ],
-                  focus: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                  gap: expect.toBeNonNaNNumber(),
                 }),
                 isDeleted: true,
               }),
@@ -4965,8 +5017,7 @@ describe("history", () => {
                     expect.toBeNonNaNNumber(),
                     expect.toBeNonNaNNumber(),
                   ],
-                  focus: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                  gap: expect.toBeNonNaNNumber(),
                 },
                 endBinding: expect.objectContaining({
                   elementId: rect2.id,
@@ -4974,8 +5025,7 @@ describe("history", () => {
                     expect.toBeNonNaNNumber(),
                     expect.toBeNonNaNNumber(),
                   ],
-                  focus: expect.toBeNonNaNNumber(),
+                  mode: "orbit",
-                  gap: expect.toBeNonNaNNumber(),
                 }),
                 isDeleted: false,
               }),
@@ -5018,13 +5068,11 @@ describe("history", () => {
               id: arrowId,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: 0,
+                fixedPoint: expect.arrayContaining([1, 0.5001]),
-                gap: 1,
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: -0,
+                fixedPoint: expect.arrayContaining([0, 0.5001]),
-                gap: 1,
               }),
               isDeleted: true,
             }),
@@ -5066,13 +5114,19 @@ describe("history", () => {
               id: arrowId,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                focus: expect.toBeNonNaNNumber(),
+                fixedPoint: expect.arrayContaining([
-                gap: expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                  expect.toBeNonNaNNumber(),
+                ]),
+                mode: "orbit",
               }),
               isDeleted: false,
             }),

packages/excalidraw/tests/library.test.tsx

@@ -105,9 +105,8 @@ describe("library", () => {
       type: "arrow",
       endBinding: {
         elementId: "rectangle1",
-        focus: -1,
-        gap: 0,
         fixedPoint: [0.5, 1],
+        mode: "orbit",
       },
     });
 

packages/excalidraw/tests/move.test.tsx

@@ -1,16 +1,12 @@
 import React from "react";
 import { vi } from "vitest";
-
-import { bindOrUnbindLinearElement } from "@excalidraw/element";
-
 import { KEYS, reseed } from "@excalidraw/common";
-
+import { bindBindingElement } from "@excalidraw/element";
 import "@excalidraw/utils/test-utils";
 
 import type {
-  ExcalidrawLinearElement,
+  ExcalidrawArrowElement,
   NonDeleted,
-  ExcalidrawRectangleElement,
 } from "@excalidraw/element/types";
 
 import { Excalidraw } from "../index";
@@ -83,12 +79,21 @@ describe("move element", () => {
     const rectA = UI.createElement("rectangle", { size: 100 });
     const rectB = UI.createElement("rectangle", { x: 200, y: 0, size: 300 });
     const arrow = UI.createElement("arrow", { x: 110, y: 50, size: 80 });
+
     act(() => {
       // bind line to two rectangles
-      bindOrUnbindLinearElement(
+      bindBindingElement(
-        arrow.get() as NonDeleted<ExcalidrawLinearElement>,
+        arrow.get() as NonDeleted<ExcalidrawArrowElement>,
-        rectA.get() as ExcalidrawRectangleElement,
+        rectA.get(),
-        rectB.get() as ExcalidrawRectangleElement,
+        "orbit",
+        "start",
+        h.app.scene,
+      );
+      bindBindingElement(
+        arrow.get() as NonDeleted<ExcalidrawArrowElement>,
+        rectB.get(),
+        "orbit",
+        "end",
         h.app.scene,
       );
     });
@@ -97,7 +102,7 @@ describe("move element", () => {
     new Pointer("mouse").clickOn(rectB);
 
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-      `17`,
+      `15`,
     );
     expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`13`);
     expect(h.state.selectionElement).toBeNull();
@@ -105,8 +110,8 @@ describe("move element", () => {
     expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
     expect([rectA.x, rectA.y]).toEqual([0, 0]);
     expect([rectB.x, rectB.y]).toEqual([200, 0]);
-    expect([arrow.x, arrow.y]).toEqual([110, 50]);
+    expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[105, 45]], 0);
-    expect([arrow.width, arrow.height]).toEqual([80, 80]);
+    expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[90, 90]], 0);
 
     renderInteractiveScene.mockClear();
     renderStaticScene.mockClear();
@@ -124,8 +129,8 @@ describe("move element", () => {
     expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
     expect([rectA.x, rectA.y]).toEqual([0, 0]);
     expect([rectB.x, rectB.y]).toEqual([201, 2]);
-    expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[110, 50]]);
+    expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[105, 45]], 0);
-    expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[81, 81.4]]);
+    expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[91, 91]], 0);
 
     h.elements.forEach((element) => expect(element).toMatchSnapshot());
   });

packages/excalidraw/tests/regressionTests.test.tsx

@@ -363,7 +363,6 @@ describe("regression tests", () => {
     Keyboard.withModifierKeys({ ctrl: true }, () => {
       Keyboard.keyPress(KEYS.Z);
       Keyboard.keyPress(KEYS.Z);
-      Keyboard.keyPress(KEYS.Z);
     });
     expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
     Keyboard.withModifierKeys({ ctrl: true }, () => {

packages/excalidraw/tests/rotate.test.tsx

@@ -35,8 +35,8 @@ test("unselected bound arrow updates when rotating its target element", async ()
   expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
   expect(arrow.x).toBeCloseTo(-80);
   expect(arrow.y).toBeCloseTo(50);
-  expect(arrow.width).toBeCloseTo(110.7, 1);
+  expect(arrow.width).toBeCloseTo(81.75, 1);
-  expect(arrow.height).toBeCloseTo(0);
+  expect(arrow.height).toBeCloseTo(62.3, 1);
 });
 
 test("unselected bound arrows update when rotating their target elements", async () => {
@@ -72,13 +72,13 @@ test("unselected bound arrows update when rotating their target elements", async
   expect(ellipseArrow.x).toEqual(0);
   expect(ellipseArrow.y).toEqual(0);
   expect(ellipseArrow.points[0]).toEqual([0, 0]);
-  expect(ellipseArrow.points[1][0]).toBeCloseTo(48.98, 1);
+  expect(ellipseArrow.points[1][0]).toBeCloseTo(16.52, 1);
-  expect(ellipseArrow.points[1][1]).toBeCloseTo(125.79, 1);
+  expect(ellipseArrow.points[1][1]).toBeCloseTo(216.57, 1);
 
   expect(textArrow.endBinding?.elementId).toEqual(text.id);
   expect(textArrow.x).toEqual(360);
   expect(textArrow.y).toEqual(300);
   expect(textArrow.points[0]).toEqual([0, 0]);
-  expect(textArrow.points[1][0]).toBeCloseTo(-94, 0);
+  expect(textArrow.points[1][0]).toBeCloseTo(-63, 0);
-  expect(textArrow.points[1][1]).toBeCloseTo(-116.1, 0);
+  expect(textArrow.points[1][1]).toBeCloseTo(-146, 0);
 });

packages/excalidraw/tests/selection.test.tsx

@@ -487,7 +487,12 @@ describe("tool locking & selection", () => {
     expect(h.state.activeTool.locked).toBe(true);
 
     for (const { value } of Object.values(SHAPES)) {
-      if (value !== "image" && value !== "selection" && value !== "eraser") {
+      if (
+        value !== "image" &&
+        value !== "selection" &&
+        value !== "eraser" &&
+        value !== "arrow"
+      ) {
         const element = UI.createElement(value);
         expect(h.state.selectedElementIds[element.id]).not.toBe(true);
       }

packages/excalidraw/types.ts

@@ -5,8 +5,6 @@ import type {
   MIME_TYPES,
 } from "@excalidraw/common";
 
-import type { SuggestedBinding } from "@excalidraw/element";
-
 import type { LinearElementEditor } from "@excalidraw/element";
 
 import type { MaybeTransformHandleType } from "@excalidraw/element";
@@ -33,6 +31,7 @@ import type {
   ExcalidrawIframeLikeElement,
   OrderedExcalidrawElement,
   ExcalidrawNonSelectionElement,
+  BindMode,
 } from "@excalidraw/element/types";
 
 import type {
@@ -204,6 +203,7 @@ export type StaticCanvasAppState = Readonly<
     frameRendering: AppState["frameRendering"];
     currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
     hoveredElementIds: AppState["hoveredElementIds"];
+    suggestedBinding: AppState["suggestedBinding"];
     // Cropping
     croppingElementId: AppState["croppingElementId"];
   }
@@ -217,8 +217,9 @@ export type InteractiveCanvasAppState = Readonly<
     selectedGroupIds: AppState["selectedGroupIds"];
     selectedLinearElement: AppState["selectedLinearElement"];
     multiElement: AppState["multiElement"];
+    newElement: AppState["newElement"];
     isBindingEnabled: AppState["isBindingEnabled"];
-    suggestedBindings: AppState["suggestedBindings"];
+    suggestedBinding: AppState["suggestedBinding"];
     isRotating: AppState["isRotating"];
     elementsToHighlight: AppState["elementsToHighlight"];
     // Collaborators
@@ -292,7 +293,7 @@ export interface AppState {
   selectionElement: NonDeletedExcalidrawElement | null;
   isBindingEnabled: boolean;
   startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
-  suggestedBindings: SuggestedBinding[];
+  suggestedBinding: NonDeleted<ExcalidrawBindableElement> | null;
   frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
   frameRendering: {
     enabled: boolean;
@@ -442,6 +443,7 @@ export interface AppState {
   // as elements are unlocked, we remove the groupId from the elements
   // and also remove groupId from this map
   lockedMultiSelections: { [groupId: string]: true };
+  bindMode: BindMode;
 }
 
 export type SearchMatch = {
@@ -458,7 +460,7 @@ export type SearchMatch = {
 
 export type UIAppState = Omit<
   AppState,
-  | "suggestedBindings"
+  | "suggestedBinding"
   | "startBoundElement"
   | "cursorButton"
   | "scrollX"

packages/math/src/curve.ts

@@ -21,20 +21,9 @@ export function curve<Point extends GlobalPoint | LocalPoint>(
   return [a, b, c, d] as Curve<Point>;
 }
 
-function gradient(
+function solveWithAnalyticalJacobian<Point extends GlobalPoint | LocalPoint>(
-  f: (t: number, s: number) => number,
+  curve: Curve<Point>,
-  t0: number,
+  lineSegment: LineSegment<Point>,
-  s0: number,
-  delta: number = 1e-6,
-): number[] {
-  return [
-    (f(t0 + delta, s0) - f(t0 - delta, s0)) / (2 * delta),
-    (f(t0, s0 + delta) - f(t0, s0 - delta)) / (2 * delta),
-  ];
-}
-
-function solve(
-  f: (t: number, s: number) => [number, number],
   t0: number,
   s0: number,
   tolerance: number = 1e-3,
@@ -48,33 +37,75 @@ function solve(
       return null;
     }
 
-    const y0 = f(t0, s0);
+    // Compute bezier point at parameter t0
-    const jacobian = [
+    const bt = 1 - t0;
-      gradient((t, s) => f(t, s)[0], t0, s0),
+    const bt2 = bt * bt;
-      gradient((t, s) => f(t, s)[1], t0, s0),
+    const bt3 = bt2 * bt;
-    ];
+    const t0_2 = t0 * t0;
-    const b = [[-y0[0]], [-y0[1]]];
+    const t0_3 = t0_2 * t0;
-    const det =
-      jacobian[0][0] * jacobian[1][1] - jacobian[0][1] * jacobian[1][0];
 
-    if (det === 0) {
+    const bezierX =
+      bt3 * curve[0][0] +
+      3 * bt2 * t0 * curve[1][0] +
+      3 * bt * t0_2 * curve[2][0] +
+      t0_3 * curve[3][0];
+    const bezierY =
+      bt3 * curve[0][1] +
+      3 * bt2 * t0 * curve[1][1] +
+      3 * bt * t0_2 * curve[2][1] +
+      t0_3 * curve[3][1];
+
+    // Compute line point at parameter s0
+    const lineX =
+      lineSegment[0][0] + s0 * (lineSegment[1][0] - lineSegment[0][0]);
+    const lineY =
+      lineSegment[0][1] + s0 * (lineSegment[1][1] - lineSegment[0][1]);
+
+    // Function values
+    const fx = bezierX - lineX;
+    const fy = bezierY - lineY;
+
+    error = Math.abs(fx) + Math.abs(fy);
+
+    if (error < tolerance) {
+      break;
+    }
+
+    // Analytical derivatives
+    const dfx_dt =
+      -3 * bt2 * curve[0][0] +
+      3 * bt2 * curve[1][0] -
+      6 * bt * t0 * curve[1][0] -
+      3 * t0_2 * curve[2][0] +
+      6 * bt * t0 * curve[2][0] +
+      3 * t0_2 * curve[3][0];
+
+    const dfy_dt =
+      -3 * bt2 * curve[0][1] +
+      3 * bt2 * curve[1][1] -
+      6 * bt * t0 * curve[1][1] -
+      3 * t0_2 * curve[2][1] +
+      6 * bt * t0 * curve[2][1] +
+      3 * t0_2 * curve[3][1];
+
+    // Line derivatives
+    const dfx_ds = -(lineSegment[1][0] - lineSegment[0][0]);
+    const dfy_ds = -(lineSegment[1][1] - lineSegment[0][1]);
+
+    // Jacobian determinant
+    const det = dfx_dt * dfy_ds - dfx_ds * dfy_dt;
+
+    if (Math.abs(det) < 1e-12) {
       return null;
     }
 
-    const iJ = [
+    // Newton step
-      [jacobian[1][1] / det, -jacobian[0][1] / det],
+    const invDet = 1 / det;
-      [-jacobian[1][0] / det, jacobian[0][0] / det],
+    const dt = invDet * (dfy_ds * -fx - dfx_ds * -fy);
-    ];
+    const ds = invDet * (-dfy_dt * -fx + dfx_dt * -fy);
-    const h = [
-      [iJ[0][0] * b[0][0] + iJ[0][1] * b[1][0]],
-      [iJ[1][0] * b[0][0] + iJ[1][1] * b[1][0]],
-    ];
 
-    t0 = t0 + h[0][0];
+    t0 += dt;
-    s0 = s0 + h[1][0];
+    s0 += ds;
-
-    const [tErr, sErr] = f(t0, s0);
-    error = Math.max(Math.abs(tErr), Math.abs(sErr));
     iter += 1;
   }
 
@@ -96,63 +127,49 @@ export const bezierEquation = <Point extends GlobalPoint | LocalPoint>(
       t ** 3 * c[3][1],
   );
 
+const initial_guesses: [number, number][] = [
+  [0.5, 0],
+  [0.2, 0],
+  [0.8, 0],
+];
+
+const calculate = <Point extends GlobalPoint | LocalPoint>(
+  [t0, s0]: [number, number],
+  l: LineSegment<Point>,
+  c: Curve<Point>,
+) => {
+  const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 1e-2, 3);
+
+  if (!solution) {
+    return null;
+  }
+
+  const [t, s] = solution;
+
+  if (t < 0 || t > 1 || s < 0 || s > 1) {
+    return null;
+  }
+
+  return bezierEquation(c, t);
+};
+
 /**
  * Computes the intersection between a cubic spline and a line segment.
  */
 export function curveIntersectLineSegment<
   Point extends GlobalPoint | LocalPoint,
 >(c: Curve<Point>, l: LineSegment<Point>): Point[] {
-  const line = (s: number) =>
+  let solution = calculate(initial_guesses[0], l, c);
-    pointFrom<Point>(
-      l[0][0] + s * (l[1][0] - l[0][0]),
-      l[0][1] + s * (l[1][1] - l[0][1]),
-    );
-
-  const initial_guesses: [number, number][] = [
-    [0.5, 0],
-    [0.2, 0],
-    [0.8, 0],
-  ];
-
-  const calculate = ([t0, s0]: [number, number]) => {
-    const solution = solve(
-      (t: number, s: number) => {
-        const bezier_point = bezierEquation(c, t);
-        const line_point = line(s);
-
-        return [
-          bezier_point[0] - line_point[0],
-          bezier_point[1] - line_point[1],
-        ];
-      },
-      t0,
-      s0,
-    );
-
-    if (!solution) {
-      return null;
-    }
-
-    const [t, s] = solution;
-
-    if (t < 0 || t > 1 || s < 0 || s > 1) {
-      return null;
-    }
-
-    return bezierEquation(c, t);
-  };
-
-  let solution = calculate(initial_guesses[0]);
   if (solution) {
     return [solution];
   }
 
-  solution = calculate(initial_guesses[1]);
+  solution = calculate(initial_guesses[1], l, c);
   if (solution) {
     return [solution];
   }
 
-  solution = calculate(initial_guesses[2]);
+  solution = calculate(initial_guesses[2], l, c);
   if (solution) {
     return [solution];
   }

packages/math/tests/curve.test.ts

@@ -46,9 +46,11 @@ describe("Math curve", () => {
         pointFrom(10, 50),
         pointFrom(50, 50),
       );
-      const l = lineSegment(pointFrom(0, 112.5), pointFrom(90, 0));
+      const l = lineSegment(pointFrom(10, -60), pointFrom(10, 60));
 
-      expect(curveIntersectLineSegment(c, l)).toCloselyEqualPoints([[50, 50]]);
+      expect(curveIntersectLineSegment(c, l)).toCloselyEqualPoints([
+        [9.99, 5.05],
+      ]);
     });
 
     it("can be detected where the determinant is overly precise", () => {

packages/utils/src/test-utils.ts

@@ -6,11 +6,11 @@ expect.extend({
       throw new Error("expected and received are not point arrays");
     }
 
-    const COMPARE = 1 / Math.pow(10, precision || 2);
+    const COMPARE = 1 / precision === 0 ? 1 : Math.pow(10, precision ?? 2);
     const pass = expected.every(
       (point, idx) =>
-        Math.abs(received[idx]?.[0] - point[0]) < COMPARE &&
+        Math.abs(received[idx][0] - point[0]) < COMPARE &&
-        Math.abs(received[idx]?.[1] - point[1]) < COMPARE,
+        Math.abs(received[idx][1] - point[1]) < COMPARE,
     );
 
     if (!pass) {

packages/utils/tests/__snapshots__/export.test.ts.snap

@@ -11,6 +11,7 @@ exports[`exportToSvg > with default arguments 1`] = `
     "locked": false,
     "type": "selection",
   },
+  "bindMode": "orbit",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -100,7 +101,7 @@ exports[`exportToSvg > with default arguments 1`] = `
     "open": false,
     "panels": 3,
   },
-  "suggestedBindings": [],
+  "suggestedBinding": null,
   "theme": "light",
   "toast": null,
   "userToFollow": null,