packages/common/src/constants.ts

@@ -514,5 +514,3 @@ export enum UserIdleState {
  * the start and end points)
  */
 export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
-
-export const BIND_MODE_TIMEOUT = 1000; // ms

packages/element/src/binding.ts

@@ -3,6 +3,9 @@ import {
   arrayToMap,
   isBindingFallthroughEnabled,
   tupleToCoors,
+  invariant,
+  isDevEnv,
+  isTestEnv,
 } from "@excalidraw/common";
 
 import {
@@ -34,7 +37,7 @@ import {
   getCenterForBounds,
   getElementBounds,
 } from "./bounds";
-import { hitElementItself, intersectElementWithLineSegment } from "./collision";
+import { intersectElementWithLineSegment } from "./collision";
 import { distanceToElement } from "./distance";
 import {
   headingForPointFromElement,
@@ -124,9 +127,6 @@ export const bindOrUnbindLinearElement = (
   endBindingElement: ExcalidrawBindableElement | null | "keep",
   scene: Scene,
 ): void => {
-  const bothEndBoundToTheSameElement =
-    linearElement.startBinding?.elementId ===
-      linearElement.endBinding?.elementId && !!linearElement.startBinding;
   const elementsMap = scene.getNonDeletedElementsMap();
   const boundToElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
   const unboundFromElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
@@ -151,7 +151,6 @@ export const bindOrUnbindLinearElement = (
     elementsMap,
   );
 
-  if (!bothEndBoundToTheSameElement) {
   const onlyUnbound = Array.from(unboundFromElementIds).filter(
     (id) => !boundToElementIds.has(id),
   );
@@ -164,7 +163,6 @@ export const bindOrUnbindLinearElement = (
       ),
     });
   });
-  }
 };
 
 const bindOrUnbindLinearElementEdge = (
@@ -205,7 +203,6 @@ const bindOrUnbindLinearElementEdge = (
             linearElement,
             bindableElement,
             startOrEnd,
-            elementsMap,
           )
         : startOrEnd === "start" ||
           otherEdgeBindableElement.id !== bindableElement.id)
@@ -396,7 +393,6 @@ export const maybeSuggestBindingsForLinearElementAtCoords = (
   }[],
   scene: Scene,
   zoom: AppState["zoom"],
-  elementsMap: ElementsMap,
   // During line creation the start binding hasn't been written yet
   // into `linearElement`
   oppositeBindingBoundElement?: ExcalidrawBindableElement | null,
@@ -415,12 +411,11 @@ export const maybeSuggestBindingsForLinearElementAtCoords = (
 
         if (
           hoveredBindableElement != null &&
-          (oppositeBindingBoundElement?.id === hoveredBindableElement.id ||
           !isLinearElementSimpleAndAlreadyBound(
             linearElement,
             oppositeBindingBoundElement?.id,
             hoveredBindableElement,
-            ))
+          )
         ) {
           acc.add(hoveredBindableElement);
         }
@@ -464,7 +459,6 @@ export const maybeBindLinearElement = (
         linearElement,
         hoveredElement,
         "end",
-        elementsMap,
       )
     ) {
       bindLinearElement(linearElement, hoveredElement, "end", scene);
@@ -493,120 +487,29 @@ export const bindLinearElement = (
     return;
   }
 
-  const elementsMap = scene.getNonDeletedElementsMap();
+  let binding: PointBinding | FixedPointBinding = {
-  const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    startOrEnd === "start" ? 0 : -1,
-    elementsMap,
-  );
-  let binding: PointBinding | FixedPointBinding;
-
-  if (isElbowArrow(linearElement)) {
-    binding = {
     elementId: hoveredElement.id,
     ...normalizePointBinding(
       calculateFocusAndGap(
         linearElement,
         hoveredElement,
         startOrEnd,
-          elementsMap,
+        scene.getNonDeletedElementsMap(),
       ),
       hoveredElement,
     ),
+  };
+
+  if (isElbowArrow(linearElement)) {
+    binding = {
+      ...binding,
       ...calculateFixedPointForElbowArrowBinding(
         linearElement,
         hoveredElement,
         startOrEnd,
-        elementsMap,
+        scene.getNonDeletedElementsMap(),
       ),
     };
-  } else if (
-    hitElementItself({
-      point: edgePoint,
-      element: hoveredElement,
-      elementsMap,
-      threshold: 0, // TODO: Not ideal, should be calculated from the same source
-    })
-  ) {
-    // Use FixedPoint binding when the arrow endpoint is inside the shape
-    binding = {
-      elementId: hoveredElement.id,
-      focus: 0,
-      gap: 0,
-      ...calculateFixedPointForNonElbowArrowBinding(
-        linearElement,
-        hoveredElement,
-        startOrEnd,
-        elementsMap,
-      ),
-    };
-  } else {
-    // For non-elbow arrows, extend the last segment and check intersection
-    const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-      linearElement,
-      startOrEnd === "start" ? 1 : -2,
-      elementsMap,
-    );
-    const extendedDirection = vectorScale(
-      vectorNormalize(
-        vectorFromPoint(
-          pointFrom(
-            edgePoint[0] - adjacentPoint[0],
-            edgePoint[1] - adjacentPoint[1],
-          ),
-        ),
-      ),
-      Math.max(hoveredElement.width, hoveredElement.height) * 2,
-    );
-    const intersector = lineSegment(
-      edgePoint,
-      pointFromVector(
-        vectorFromPoint(
-          pointFrom(
-            edgePoint[0] + extendedDirection[0],
-            edgePoint[1] + extendedDirection[1],
-          ),
-        ),
-      ),
-    );
-
-    // Check if this extended segment intersects the bindable element
-    const intersections = intersectElementWithLineSegment(
-      hoveredElement,
-      elementsMap,
-      intersector,
-    );
-
-    const intersectsElement = intersections.length > 0;
-
-    if (intersectsElement) {
-      // Use traditional focus/gap binding when the extended segment intersects
-      binding = {
-        elementId: hoveredElement.id,
-        ...normalizePointBinding(
-          calculateFocusAndGap(
-            linearElement,
-            hoveredElement,
-            startOrEnd,
-            elementsMap,
-          ),
-          hoveredElement,
-        ),
-      };
-    } else {
-      // Use FixedPoint binding when the extended segment doesn't intersect
-      binding = {
-        elementId: hoveredElement.id,
-        focus: 0,
-        gap: 0,
-        ...calculateFixedPointForNonElbowArrowBinding(
-          linearElement,
-          hoveredElement,
-          startOrEnd,
-          elementsMap,
-        ),
-      };
-    }
   }
 
   scene.mutateElement(linearElement, {
@@ -629,43 +532,14 @@ const isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   bindableElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
-  elementsMap: ElementsMap,
 ): boolean => {
   const otherBinding =
     linearElement[startOrEnd === "start" ? "endBinding" : "startBinding"];
-
+  return isLinearElementSimpleAndAlreadyBound(
-  // Only prevent binding if opposite end is bound to the same element
-  if (
-    otherBinding?.elementId !== bindableElement.id ||
-    !isLinearElementSimple(linearElement)
-  ) {
-    return false;
-  }
-
-  // For non-elbow arrows, allow FixedPoint binding even when both ends bind to the same element
-  if (!isElbowArrow(linearElement)) {
-    const currentEndPoint =
-      LinearElementEditor.getPointAtIndexGlobalCoordinates(
     linearElement,
-        startOrEnd === "start" ? 0 : -1,
+    otherBinding?.elementId,
-        elementsMap,
+    bindableElement,
   );
-
-    // If current end would use FixedPoint binding, allow it
-    if (
-      hitElementItself({
-        point: currentEndPoint,
-        element: bindableElement,
-        elementsMap,
-        threshold: 0, // TODO: Not ideal, should be calculated from the same source
-      })
-    ) {
-      return false;
-    }
-  }
-
-  // Prevent traditional focus/gap binding when both ends would bind to the same element
-  return true;
 };
 
 export const isLinearElementSimpleAndAlreadyBound = (
@@ -902,10 +776,7 @@ export const updateBoundElements = (
       ? elementsMap.get(element.startBinding.elementId)
       : null;
     const endBindingElement = element.endBinding
-      ? // PERF: If the arrow is bound to the same element on both ends.
+      ? elementsMap.get(element.endBinding.elementId)
-        startBindingElement?.id === element.endBinding.elementId
-        ? startBindingElement
-        : elementsMap.get(element.endBinding.elementId)
       : null;
 
     let startBounds: Bounds | null = null;
@@ -978,9 +849,6 @@ export const updateBoundElements = (
       ...(changedElement.id === element.endBinding?.elementId
         ? { endBinding: bindings.endBinding }
         : {}),
-      moveMidPointsWithElement:
-        !!startBindingElement &&
-        startBindingElement?.id === endBindingElement?.id,
     });
 
     const boundText = getBoundTextElement(element, elementsMap);
@@ -1074,40 +942,35 @@ const getDistanceForBinding = (
 };
 
 export const bindPointToSnapToElementOutline = (
-  linearElement: ExcalidrawLinearElement,
+  arrow: ExcalidrawElbowArrowElement,
   bindableElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
 ): GlobalPoint => {
-  const aabb = aabbForElement(bindableElement, elementsMap);
+  if (isDevEnv() || isTestEnv()) {
-  const localP =
+    invariant(arrow.points.length > 1, "Arrow should have at least 2 points");
-    linearElement.points[
-      startOrEnd === "start" ? 0 : linearElement.points.length - 1
-    ];
-  const globalP = pointFrom<GlobalPoint>(
-    linearElement.x + localP[0],
-    linearElement.y + localP[1],
-  );
-
-  if (linearElement.points.length < 2) {
-    // New arrow creation, so no snapping
-    return globalP;
   }
 
+  const aabb = aabbForElement(bindableElement, elementsMap);
+  const localP =
+    arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
+  const globalP = pointFrom<GlobalPoint>(
+    arrow.x + localP[0],
+    arrow.y + localP[1],
+  );
   const edgePoint = isRectanguloidElement(bindableElement)
     ? avoidRectangularCorner(bindableElement, elementsMap, globalP)
     : globalP;
-  const elbowed = isElbowArrow(linearElement);
+  const elbowed = isElbowArrow(arrow);
   const center = getCenterForBounds(aabb);
-  const adjacentPointIdx =
+  const adjacentPointIdx = startOrEnd === "start" ? 1 : arrow.points.length - 2;
-    startOrEnd === "start" ? 1 : linearElement.points.length - 2;
   const adjacentPoint = pointRotateRads(
     pointFrom<GlobalPoint>(
-      linearElement.x + linearElement.points[adjacentPointIdx][0],
+      arrow.x + arrow.points[adjacentPointIdx][0],
-      linearElement.y + linearElement.points[adjacentPointIdx][1],
+      arrow.y + arrow.points[adjacentPointIdx][1],
     ),
     center,
-    linearElement.angle ?? 0,
+    arrow.angle ?? 0,
   );
 
   let intersection: GlobalPoint | null = null;
@@ -1166,35 +1029,7 @@ export const bindPointToSnapToElementOutline = (
     return edgePoint;
   }
 
-  return intersection;
+  return elbowed ? intersection : edgePoint;
-};
-
-export const getOutlineAvoidingPoint = (
-  element: NonDeleted<ExcalidrawLinearElement>,
-  hoveredElement: ExcalidrawBindableElement | null,
-  coords: GlobalPoint,
-  pointIndex: number,
-  elementsMap: ElementsMap,
-): GlobalPoint => {
-  if (hoveredElement) {
-    const newPoints = Array.from(element.points);
-    newPoints[pointIndex] = pointFrom<LocalPoint>(
-      coords[0] - element.x,
-      coords[1] - element.y,
-    );
-
-    return bindPointToSnapToElementOutline(
-      {
-        ...element,
-        points: newPoints,
-      },
-      hoveredElement,
-      pointIndex === 0 ? "start" : "end",
-      elementsMap,
-    );
-  }
-
-  return coords;
 };
 
 export const avoidRectangularCorner = (
@@ -1419,22 +1254,15 @@ const updateBoundPoint = (
   const direction = startOrEnd === "startBinding" ? -1 : 1;
   const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
 
-  if (isFixedPointBinding(binding)) {
+  if (isElbowArrow(linearElement) && isFixedPointBinding(binding)) {
     const fixedPoint =
       normalizeFixedPoint(binding.fixedPoint) ??
-      (isElbowArrow(linearElement)
+      calculateFixedPointForElbowArrowBinding(
-        ? calculateFixedPointForElbowArrowBinding(
         linearElement,
         bindableElement,
         startOrEnd === "startBinding" ? "start" : "end",
         elementsMap,
-          ).fixedPoint
+      ).fixedPoint;
-        : calculateFixedPointForNonElbowArrowBinding(
-            linearElement,
-            bindableElement,
-            startOrEnd === "startBinding" ? "start" : "end",
-            elementsMap,
-          ).fixedPoint);
     const globalMidPoint = elementCenterPoint(bindableElement, elementsMap);
     const global = pointFrom<GlobalPoint>(
       bindableElement.x + fixedPoint[0] * bindableElement.width,
@@ -1573,42 +1401,6 @@ export const calculateFixedPointForElbowArrowBinding = (
   };
 };
 
-export const calculateFixedPointForNonElbowArrowBinding = (
-  linearElement: NonDeleted<ExcalidrawLinearElement>,
-  hoveredElement: ExcalidrawBindableElement,
-  startOrEnd: "start" | "end",
-  elementsMap: ElementsMap,
-): { fixedPoint: FixedPoint } => {
-  const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    startOrEnd === "start" ? 0 : -1,
-    elementsMap,
-  );
-
-  // Convert the global point to element-local coordinates
-  const elementCenter = pointFrom(
-    hoveredElement.x + hoveredElement.width / 2,
-    hoveredElement.y + hoveredElement.height / 2,
-  );
-
-  // Rotate the point to account for element rotation
-  const nonRotatedPoint = pointRotateRads(
-    edgePoint,
-    elementCenter,
-    -hoveredElement.angle as Radians,
-  );
-
-  // Calculate the ratio relative to the element's bounds
-  const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
-  const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
-
-  return {
-    fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
-  };
-};
-
 const maybeCalculateNewGapWhenScaling = (
   changedElement: ExcalidrawBindableElement,
   currentBinding: PointBinding | null | undefined,
@@ -2420,18 +2212,16 @@ export const getGlobalFixedPointForBindableElement = (
 };
 
 export const getGlobalFixedPoints = (
-  arrow: ExcalidrawArrowElement,
+  arrow: ExcalidrawElbowArrowElement,
   elementsMap: ElementsMap,
 ): [GlobalPoint, GlobalPoint] => {
   const startElement =
     arrow.startBinding &&
-    isFixedPointBinding(arrow.startBinding) &&
     (elementsMap.get(arrow.startBinding.elementId) as
       | ExcalidrawBindableElement
       | undefined);
   const endElement =
     arrow.endBinding &&
-    isFixedPointBinding(arrow.endBinding) &&
     (elementsMap.get(arrow.endBinding.elementId) as
       | ExcalidrawBindableElement
       | undefined);

packages/element/src/dragElements.ts

@@ -13,7 +13,7 @@ import type {
 
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
-import { bindOrUnbindLinearElement, updateBoundElements } from "./binding";
+import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
@@ -102,26 +102,9 @@ export const dragSelectedElements = (
     gridSize,
   );
 
-  const elementsToUpdateIds = new Set(
-    Array.from(elementsToUpdate, (el) => el.id),
-  );
-
   elementsToUpdate.forEach((element) => {
-    const isArrow = !isArrowElement(element);
-    const isStartBoundElementSelected =
-      isArrow ||
-      (element.startBinding
-        ? elementsToUpdateIds.has(element.startBinding.elementId)
-        : false);
-    const isEndBoundElementSelected =
-      isArrow ||
-      (element.endBinding
-        ? elementsToUpdateIds.has(element.endBinding.elementId)
-        : false);
-
-    if (!isArrowElement(element)) {
     updateElementCoords(pointerDownState, element, scene, adjustedOffset);
-
+    if (!isArrowElement(element)) {
       // skip arrow labels since we calculate its position during render
       const textElement = getBoundTextElement(
         element,
@@ -135,33 +118,9 @@ export const dragSelectedElements = (
           adjustedOffset,
         );
       }
-
       updateBoundElements(element, scene, {
         simultaneouslyUpdated: Array.from(elementsToUpdate),
       });
-    } else if (
-      // NOTE: Add a little initial drag to the arrow dragging to avoid
-      // accidentally unbinding the arrow when the user just wants to select it.
-      Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) > 1
-    ) {
-      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.
-        bindOrUnbindLinearElement(
-          element,
-          shouldUnbindStart ? null : "keep",
-          shouldUnbindEnd ? null : "keep",
-          scene,
-        );
-      }
     }
   });
 };

packages/element/src/linearElementEditor.ts

@@ -25,9 +25,7 @@ import {
 
 import {
   deconstructLinearOrFreeDrawElement,
-  hitElementItself,
   isPathALoop,
-  shouldTestInside,
   type Store,
 } from "@excalidraw/element";
 
@@ -45,10 +43,8 @@ import type {
 import type { Mutable } from "@excalidraw/common/utility-types";
 
 import {
-  bindLinearElement,
   bindOrUnbindLinearElement,
   getHoveredElementForBinding,
-  getOutlineAvoidingPoint,
   isBindingEnabled,
   maybeSuggestBindingsForLinearElementAtCoords,
 } from "./binding";
@@ -62,8 +58,6 @@ import { headingIsHorizontal, vectorToHeading } from "./heading";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
-  isArrowElement,
-  isBindableElement,
   isBindingElement,
   isElbowArrow,
   isFixedPointBinding,
@@ -91,8 +85,6 @@ import type {
   FixedSegment,
   ExcalidrawElbowArrowElement,
   PointsPositionUpdates,
-  NonDeletedExcalidrawElement,
-  Ordered,
 } from "./types";
 
 /**
@@ -142,7 +134,6 @@ export class LinearElementEditor {
       index: number | null;
       added: boolean;
     };
-    arrowOtherPoint?: GlobalPoint;
   }>;
 
   /** whether you're dragging a point */
@@ -287,7 +278,6 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     linearElementEditor: LinearElementEditor,
-    thresholdCallback: (element: ExcalidrawElement) => number,
   ): Pick<AppState, keyof AppState> | null {
     if (!linearElementEditor) {
       return null;
@@ -296,23 +286,19 @@ export class LinearElementEditor {
     const elementsMap = app.scene.getNonDeletedElementsMap();
     const element = LinearElementEditor.getElement(elementId, elementsMap);
     let customLineAngle = linearElementEditor.customLineAngle;
-    let arrowOtherPoint: GlobalPoint | undefined =
-      linearElementEditor.pointerDownState.arrowOtherPoint;
     if (!element) {
       return null;
     }
 
-    const elbowed = isElbowArrow(element);
-
     if (
-      elbowed &&
+      isElbowArrow(element) &&
       !linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
       linearElementEditor.pointerDownState.lastClickedPoint !== 0
     ) {
       return null;
     }
 
-    const selectedPointsIndices = elbowed
+    const selectedPointsIndices = isElbowArrow(element)
       ? [
           !!linearElementEditor.selectedPointsIndices?.includes(0)
             ? 0
@@ -322,7 +308,7 @@ export class LinearElementEditor {
             : undefined,
         ].filter((idx): idx is number => idx !== undefined)
       : linearElementEditor.selectedPointsIndices;
-    const lastClickedPoint = elbowed
+    const lastClickedPoint = isElbowArrow(element)
       ? linearElementEditor.pointerDownState.lastClickedPoint > 0
         ? element.points.length - 1
         : 0
@@ -380,38 +366,38 @@ export class LinearElementEditor {
           scenePointerY - linearElementEditor.pointerOffset.y,
           event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         );
+
         const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
         const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
-        const elements = app.scene.getNonDeletedElements();
-
-        arrowOtherPoint = pointDraggingOtherEndpoint(
-          element,
-          elementsMap,
-          selectedPointsIndices,
-          scenePointerX,
-          scenePointerY,
-          linearElementEditor,
-          app.scene,
-          thresholdCallback,
-        );
 
         LinearElementEditor.movePoints(
           element,
           app.scene,
-          pointDraggingUpdates(
+          new Map(
-            selectedPointsIndices,
+            selectedPointsIndices.map((pointIndex) => {
-            deltaX,
+              const newPointPosition: LocalPoint =
-            deltaY,
+                pointIndex === lastClickedPoint
-            elementsMap,
+                  ? LinearElementEditor.createPointAt(
-            lastClickedPoint,
                       element,
-            scenePointerX,
+                      elementsMap,
-            scenePointerY,
+                      scenePointerX - linearElementEditor.pointerOffset.x,
-            linearElementEditor,
+                      scenePointerY - linearElementEditor.pointerOffset.y,
-            event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+                      event[KEYS.CTRL_OR_CMD]
-            elements,
+                        ? null
-            app.state.zoom,
+                        : app.getEffectiveGridSize(),
-            app.state.bindMode,
+                    )
+                  : pointFrom(
+                      element.points[pointIndex][0] + deltaX,
+                      element.points[pointIndex][1] + deltaY,
+                    );
+              return [
+                pointIndex,
+                {
+                  point: newPointPosition,
+                  isDragging: pointIndex === lastClickedPoint,
+                },
+              ];
+            }),
           ),
         );
       }
@@ -424,14 +410,16 @@ export class LinearElementEditor {
       // suggest bindings for first and last point if selected
       let suggestedBindings: ExcalidrawBindableElement[] = [];
       if (isBindingElement(element, false)) {
-        const firstIndexIsSelected = selectedPointsIndices[0] === 0;
+        const firstSelectedIndex = selectedPointsIndices[0] === 0;
-        const lastIndexIsSelected =
+        const lastSelectedIndex =
           selectedPointsIndices[selectedPointsIndices.length - 1] ===
           element.points.length - 1;
         const coords: { x: number; y: number }[] = [];
 
-        if (firstIndexIsSelected !== lastIndexIsSelected) {
+        if (!firstSelectedIndex !== !lastSelectedIndex) {
-          if (firstIndexIsSelected) {
+          coords.push({ x: scenePointerX, y: scenePointerY });
+        } else {
+          if (firstSelectedIndex) {
             coords.push(
               tupleToCoors(
                 LinearElementEditor.getPointGlobalCoordinates(
@@ -443,7 +431,7 @@ export class LinearElementEditor {
             );
           }
 
-          if (lastIndexIsSelected) {
+          if (lastSelectedIndex) {
             coords.push(
               tupleToCoors(
                 LinearElementEditor.getPointGlobalCoordinates(
@@ -464,7 +452,6 @@ export class LinearElementEditor {
             coords,
             app.scene,
             app.state.zoom,
-            elementsMap,
           );
         }
       }
@@ -488,10 +475,6 @@ export class LinearElementEditor {
             : -1,
         isDragging: true,
         customLineAngle,
-        pointerDownState: {
-          ...linearElementEditor.pointerDownState,
-          arrowOtherPoint,
-        },
       };
 
       return {
@@ -622,10 +605,6 @@ export class LinearElementEditor {
       isDragging: false,
       pointerOffset: { x: 0, y: 0 },
       customLineAngle: null,
-      pointerDownState: {
-        ...editingLinearElement.pointerDownState,
-        arrowOtherPoint: undefined,
-      },
     };
   }
 
@@ -964,15 +943,8 @@ export class LinearElementEditor {
       // from the end points of the `linearElement` - this is to allow disabling
       // binding (which needs to happen at the point the user finishes moving
       // the point).
-      const allPointSelected =
-        linearElementEditor.pointerDownState.prevSelectedPointsIndices
-          ?.length === element.points.length;
       const { startBindingElement, endBindingElement } = linearElementEditor;
-      if (
+      if (isBindingEnabled(appState) && isBindingElement(element)) {
-        !allPointSelected &&
-        isBindingEnabled(appState) &&
-        isBindingElement(element)
-      ) {
         bindOrUnbindLinearElement(
           element,
           startBindingElement,
@@ -1432,7 +1404,6 @@ export class LinearElementEditor {
     otherUpdates?: {
       startBinding?: PointBinding | null;
       endBinding?: PointBinding | null;
-      moveMidPointsWithElement?: boolean | null;
     },
   ) {
     const { points } = element;
@@ -1478,15 +1449,6 @@ export class LinearElementEditor {
       : points.map((p, idx) => {
           const current = pointUpdates.get(idx)?.point ?? p;
 
-          if (
-            otherUpdates?.moveMidPointsWithElement &&
-            idx !== 0 &&
-            idx !== points.length - 1 &&
-            !pointUpdates.has(idx)
-          ) {
-            return pointFrom<LocalPoint>(current[0], current[1]);
-          }
-
           return pointFrom<LocalPoint>(
             current[0] - offsetX,
             current[1] - offsetY,
@@ -2015,242 +1977,3 @@ const normalizeSelectedPoints = (
   nextPoints = nextPoints.sort((a, b) => a - b);
   return nextPoints.length ? nextPoints : null;
 };
-
-const pointDraggingUpdates = (
-  selectedPointsIndices: readonly number[],
-  deltaX: number,
-  deltaY: number,
-  elementsMap: NonDeletedSceneElementsMap,
-  lastClickedPoint: number,
-  element: NonDeleted<ExcalidrawLinearElement>,
-  scenePointerX: number,
-  scenePointerY: number,
-  linearElementEditor: LinearElementEditor,
-  gridSize: NullableGridSize,
-  elements: readonly Ordered<NonDeletedExcalidrawElement>[],
-  zoom: AppState["zoom"],
-  bindMode: AppState["bindMode"],
-): PointsPositionUpdates => {
-  const hasMidPoints =
-    selectedPointsIndices.filter(
-      (_, idx) => idx > 0 && idx < element.points.length - 1,
-    ).length > 0;
-
-  return new Map(
-    selectedPointsIndices.map((pointIndex) => {
-      let newPointPosition: LocalPoint =
-        pointIndex === lastClickedPoint
-          ? LinearElementEditor.createPointAt(
-              element,
-              elementsMap,
-              scenePointerX - linearElementEditor.pointerOffset.x,
-              scenePointerY - linearElementEditor.pointerOffset.y,
-              gridSize,
-            )
-          : pointFrom(
-              element.points[pointIndex][0] + deltaX,
-              element.points[pointIndex][1] + deltaY,
-            );
-
-      if (
-        !hasMidPoints &&
-        (pointIndex === 0 || pointIndex === element.points.length - 1)
-      ) {
-        const [, , , , cx, cy] = getElementAbsoluteCoords(
-          element,
-          elementsMap,
-          true,
-        );
-        let newGlobalPointPosition = pointRotateRads(
-          pointFrom<GlobalPoint>(
-            element.x + newPointPosition[0],
-            element.y + newPointPosition[1],
-          ),
-          pointFrom<GlobalPoint>(cx, cy),
-          element.angle,
-        );
-        const hoveredElement = getHoveredElementForBinding(
-          {
-            x: newGlobalPointPosition[0],
-            y: newGlobalPointPosition[1],
-          },
-          elements,
-          elementsMap,
-          zoom,
-          shouldTestInside(element),
-          isElbowArrow(element),
-        );
-
-        const otherGlobalPoint =
-          LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            element,
-            pointIndex === 0 ? element.points.length - 1 : 0,
-            elementsMap,
-          );
-        const otherHoveredElement = getHoveredElementForBinding(
-          {
-            x: otherGlobalPoint[0],
-            y: otherGlobalPoint[1],
-          },
-          elements,
-          elementsMap,
-          zoom,
-          shouldTestInside(element),
-          isElbowArrow(element),
-        );
-
-        // Allow binding inside the element if both ends are inside
-        if (
-          isArrowElement(element) &&
-          !(
-            hoveredElement?.id === otherHoveredElement?.id &&
-            hoveredElement != null
-          ) &&
-          bindMode === "focus"
-        ) {
-          newGlobalPointPosition = getOutlineAvoidingPoint(
-            element,
-            hoveredElement,
-            newGlobalPointPosition,
-            pointIndex,
-            elementsMap,
-          );
-        }
-
-        newPointPosition = LinearElementEditor.createPointAt(
-          element,
-          elementsMap,
-          newGlobalPointPosition[0] - linearElementEditor.pointerOffset.x,
-          newGlobalPointPosition[1] - linearElementEditor.pointerOffset.y,
-          null,
-        );
-      }
-
-      return [
-        pointIndex,
-        {
-          point: newPointPosition,
-          isDragging: pointIndex === lastClickedPoint,
-        },
-      ];
-    }),
-  );
-};
-
-const pointDraggingOtherEndpoint = (
-  element: NonDeleted<ExcalidrawLinearElement>,
-  elementsMap: NonDeletedSceneElementsMap,
-  selectedPointsIndices: readonly number[],
-  scenePointerX: number,
-  scenePointerY: number,
-  linearElementEditor: LinearElementEditor,
-  scene: Scene,
-  thresholdCallback: (element: ExcalidrawElement) => number,
-) => {
-  let arrowOtherPoint = linearElementEditor.pointerDownState.arrowOtherPoint;
-
-  if (isArrowElement(element) && !isElbowArrow(element)) {
-    const startPointIsIncluded = selectedPointsIndices.includes(0);
-    const endPointIsIncluded = selectedPointsIndices.includes(
-      element.points.length - 1,
-    );
-    if (
-      // Make sure that not both of the endpoints are selected
-      (startPointIsIncluded || endPointIsIncluded) &&
-      startPointIsIncluded !== endPointIsIncluded
-    ) {
-      const otherBinding =
-        element[startPointIsIncluded ? "endBinding" : "startBinding"];
-      if (
-        // The other end is bound
-        otherBinding
-      ) {
-        const otherElement = elementsMap.get(otherBinding.elementId);
-
-        invariant(
-          isBindableElement(otherElement),
-          "Other element should exist in elementsMap at all times and be a bindable element",
-        );
-
-        let newOtherPointPosition;
-
-        // Only avoid shape if the start and end point is not inside
-        // the same element
-        if (
-          !hitElementItself({
-            point: pointFrom(scenePointerX, scenePointerY),
-            element: otherElement,
-            elementsMap,
-            threshold: thresholdCallback(otherElement),
-          })
-        ) {
-          // If we don't have a restore point, that means we need to jump out
-          // of the element but first, create the restore point
-          if (!arrowOtherPoint) {
-            arrowOtherPoint = LinearElementEditor.getPointGlobalCoordinates(
-              element,
-              element.points[
-                startPointIsIncluded ? element.points.length - 1 : 0
-              ],
-              elementsMap,
-            );
-          }
-
-          // Find a snap point outside the element
-          const newOtherGlobalPoint = getOutlineAvoidingPoint(
-            element,
-            otherElement,
-            arrowOtherPoint,
-            startPointIsIncluded ? element.points.length - 1 : 0,
-            elementsMap,
-          );
-
-          newOtherPointPosition = LinearElementEditor.createPointAt(
-            element,
-            elementsMap,
-            newOtherGlobalPoint[0] - linearElementEditor.pointerOffset.x,
-            newOtherGlobalPoint[1] - linearElementEditor.pointerOffset.y,
-            null,
-          );
-        }
-        // Restore the saved point if we are back inside the element
-        else if (arrowOtherPoint) {
-          newOtherPointPosition = LinearElementEditor.createPointAt(
-            element,
-            elementsMap,
-            arrowOtherPoint[0] - linearElementEditor.pointerOffset.x,
-            arrowOtherPoint[1] - linearElementEditor.pointerOffset.y,
-            null,
-          );
-
-          arrowOtherPoint = undefined;
-        }
-
-        // Finally, move the other endpoint if needed
-        if (newOtherPointPosition) {
-          LinearElementEditor.movePoints(
-            element,
-            scene,
-            new Map([
-              [
-                startPointIsIncluded ? element.points.length - 1 : 0,
-                {
-                  point: newOtherPointPosition,
-                },
-              ],
-            ]),
-          );
-
-          bindLinearElement(
-            element,
-            otherElement,
-            startPointIsIncluded ? "end" : "start",
-            scene,
-          );
-        }
-      }
-    }
-  }
-
-  return arrowOtherPoint;
-};

packages/element/src/mutateElement.ts

@@ -12,7 +12,7 @@ import { ShapeCache } from "./shape";
 
 import { updateElbowArrowPoints } from "./elbowArrow";
 
-import { isElbowArrow, isFixedPointBinding } from "./typeChecks";
+import { isElbowArrow } from "./typeChecks";
 
 import type {
   ElementsMap,
@@ -54,8 +54,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
     (Object.keys(updates).length === 0 || // normalization case
       typeof points !== "undefined" || // repositioning
       typeof fixedSegments !== "undefined" || // segment fixing
-      isFixedPointBinding(startBinding) ||
+      typeof startBinding !== "undefined" ||
-      isFixedPointBinding(endBinding)) // manual binding to element
+      typeof endBinding !== "undefined") // manual binding to element
   ) {
     updates = {
       ...updates,

packages/element/src/typeChecks.ts

@@ -362,7 +362,6 @@ export const isFixedPointBinding = (
   binding: PointBinding | FixedPointBinding,
 ): binding is FixedPointBinding => {
   return (
-    binding != null &&
     Object.hasOwn(binding, "fixedPoint") &&
     (binding as FixedPointBinding).fixedPoint != null
   );

packages/element/src/types.ts

@@ -323,8 +323,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     type: "line" | "arrow";
     points: readonly LocalPoint[];
     lastCommittedPoint: LocalPoint | null;
-    startBinding: FixedPointBinding | PointBinding | null;
+    startBinding: PointBinding | null;
-    endBinding: FixedPointBinding | PointBinding | null;
+    endBinding: PointBinding | null;
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
@@ -351,9 +351,9 @@ export type ExcalidrawElbowArrowElement = Merge<
   ExcalidrawArrowElement,
   {
     elbowed: true;
-    fixedSegments: readonly FixedSegment[] | null;
     startBinding: FixedPointBinding | null;
     endBinding: FixedPointBinding | null;
+    fixedSegments: readonly FixedSegment[] | null;
     /**
      * Marks that the 3rd point should be used as the 2nd point of the arrow in
      * order to temporarily hide the first segment of the arrow without losing

packages/element/tests/binding.test.tsx

@@ -8,13 +8,7 @@ import { Excalidraw, isLinearElement } from "@excalidraw/excalidraw";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
-import {
+import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
-  act,
-  fireEvent,
-  render,
-} from "@excalidraw/excalidraw/tests/test-utils";
-
-import { defaultLang, setLanguage } from "@excalidraw/excalidraw/i18n";
 
 import { getTransformHandles } from "../src/transformHandles";
 import {
@@ -22,8 +16,6 @@ import {
   TEXT_EDITOR_SELECTOR,
 } from "../../excalidraw/tests/queries/dom";
 
-import type { ExcalidrawLinearElement, FixedPointBinding } from "../src/types";
-
 const { h } = window;
 
 const mouse = new Pointer("mouse");
@@ -79,9 +71,8 @@ describe("element binding", () => {
 
     expect(arrow.startBinding).toEqual({
       elementId: rect.id,
-      focus: 0,
+      focus: expect.toBeNonNaNNumber(),
-      gap: 0,
+      gap: expect.toBeNonNaNNumber(),
-      fixedPoint: expect.arrayContaining([1.1, 0]),
     });
 
     // Move the end point to the overlapping binding position
@@ -92,15 +83,13 @@ describe("element binding", () => {
     // Both the start and the end points should be bound
     expect(arrow.startBinding).toEqual({
       elementId: rect.id,
-      focus: 0,
+      focus: expect.toBeNonNaNNumber(),
-      gap: 0,
+      gap: expect.toBeNonNaNNumber(),
-      fixedPoint: expect.arrayContaining([1.1, 0]),
     });
     expect(arrow.endBinding).toEqual({
       elementId: rect.id,
-      focus: 0,
+      focus: expect.toBeNonNaNNumber(),
-      gap: 0,
+      gap: expect.toBeNonNaNNumber(),
-      fixedPoint: expect.arrayContaining([1.1, 0]),
     });
   });
 
@@ -199,9 +188,9 @@ describe("element binding", () => {
     // Test sticky connection
     expect(API.getSelectedElement().type).toBe("arrow");
     Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    expect(arrow.endBinding?.elementId).not.toBe(rectangle.id);
+    expect(arrow.endBinding?.elementId).toBe(rectangle.id);
     Keyboard.keyPress(KEYS.ARROW_LEFT);
-    expect(arrow.endBinding?.elementId).not.toBe(rectangle.id);
+    expect(arrow.endBinding?.elementId).toBe(rectangle.id);
 
     // Sever connection
     expect(API.getSelectedElement().type).toBe("arrow");
@@ -487,354 +476,3 @@ describe("element binding", () => {
     });
   });
 });
-
-describe("Fixed-point arrow binding", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-  });
-
-  it("should create fixed-point binding when both arrow endpoint is inside rectangle", () => {
-    // Create a filled solid rectangle
-    UI.clickTool("rectangle");
-    mouse.downAt(100, 100);
-    mouse.moveTo(200, 200);
-    mouse.up();
-
-    const rect = API.getSelectedElement();
-    API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
-
-    // Draw arrow with endpoint inside the filled rectangle, since only
-    // filled bindables bind inside the shape
-    UI.clickTool("arrow");
-    mouse.downAt(110, 110);
-    mouse.moveTo(160, 160);
-    mouse.up();
-
-    const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
-    expect(arrow.x).toBe(110);
-    expect(arrow.y).toBe(110);
-
-    // Should bind to the rectangle since endpoint is inside
-    expect(arrow.startBinding?.elementId).toBe(rect.id);
-    expect(arrow.endBinding?.elementId).toBe(rect.id);
-
-    const startBinding = arrow.startBinding as FixedPointBinding;
-    expect(startBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
-    expect(startBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
-    expect(startBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
-    expect(startBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
-
-    const endBinding = arrow.endBinding as FixedPointBinding;
-    expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
-    expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
-    expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
-    expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
-
-    mouse.reset();
-
-    // Move the bindable
-    mouse.downAt(130, 110);
-    mouse.moveTo(280, 110);
-    mouse.up();
-
-    // Check if the arrow moved
-    expect(arrow.x).toBe(260);
-    expect(arrow.y).toBe(110);
-  });
-
-  it("should create fixed-point binding when one of the arrow endpoint is inside rectangle", () => {
-    // Create a filled solid rectangle
-    UI.clickTool("rectangle");
-    mouse.downAt(100, 100);
-    mouse.moveTo(200, 200);
-    mouse.up();
-
-    const rect = API.getSelectedElement();
-    API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
-
-    // Draw arrow with endpoint inside the filled rectangle, since only
-    // filled bindables bind inside the shape
-    UI.clickTool("arrow");
-    mouse.downAt(10, 10);
-    mouse.moveTo(160, 160);
-    mouse.up();
-
-    const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
-    expect(arrow.x).toBe(10);
-    expect(arrow.y).toBe(10);
-    expect(arrow.width).toBe(150);
-    expect(arrow.height).toBe(150);
-
-    // Should bind to the rectangle since endpoint is inside
-    expect(arrow.startBinding).toBe(null);
-    expect(arrow.endBinding?.elementId).toBe(rect.id);
-
-    const endBinding = arrow.endBinding as FixedPointBinding;
-    expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
-    expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
-    expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
-    expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
-
-    mouse.reset();
-
-    // Move the bindable
-    mouse.downAt(130, 110);
-    mouse.moveTo(280, 110);
-    mouse.up();
-
-    // Check if the arrow moved
-    expect(arrow.x).toBe(10);
-    expect(arrow.y).toBe(10);
-    expect(arrow.width).toBe(300);
-    expect(arrow.height).toBe(150);
-  });
-
-  it("should maintain relative position when arrow start point is dragged outside and rectangle is moved", () => {
-    // Create a filled solid rectangle
-    UI.clickTool("rectangle");
-    mouse.downAt(100, 100);
-    mouse.moveTo(200, 200);
-    mouse.up();
-
-    const rect = API.getSelectedElement();
-    API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
-
-    // Draw arrow with both endpoints inside the filled rectangle, creating same-element binding
-    UI.clickTool("arrow");
-    mouse.downAt(120, 120);
-    mouse.moveTo(180, 180);
-    mouse.up();
-
-    const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
-
-    // Both ends should be bound to the same rectangle
-    expect(arrow.startBinding?.elementId).toBe(rect.id);
-    expect(arrow.endBinding?.elementId).toBe(rect.id);
-
-    mouse.reset();
-
-    // Select the arrow and drag the start point outside the rectangle
-    mouse.downAt(120, 120);
-    mouse.moveTo(50, 50); // Move start point outside rectangle
-    mouse.up();
-
-    mouse.reset();
-
-    // Move the rectangle by dragging it
-    mouse.downAt(150, 110);
-    mouse.moveTo(300, 300);
-    mouse.up();
-
-    // The end point should be a normal point binding
-    const endBinding = arrow.endBinding as FixedPointBinding;
-    expect(endBinding.focus).toBeCloseTo(0);
-    expect(endBinding.gap).toBeCloseTo(0);
-
-    expect(arrow.x).toBe(50);
-    expect(arrow.y).toBe(50);
-    expect(arrow.width).toBeCloseTo(304, 0);
-    expect(arrow.height).toBeCloseTo(344, 0);
-  });
-
-  it("should move inner points when arrow is bound to same element on both ends", () => {
-    // Create one rectangle as binding target
-    const rect = API.createElement({
-      type: "rectangle",
-      x: 50,
-      y: 50,
-      width: 200,
-      height: 100,
-      fillStyle: "solid",
-      backgroundColor: "#a5d8ff",
-    });
-
-    // Create a non-elbowed arrow with inner points bound to the same element on both ends
-    const arrow = API.createElement({
-      type: "arrow",
-      x: 100,
-      y: 75,
-      width: 100,
-      height: 50,
-      points: [
-        pointFrom(0, 0), // start point
-        pointFrom(25, -25), // first inner point
-        pointFrom(75, 25), // second inner point
-        pointFrom(100, 0), // end point
-      ],
-      startBinding: {
-        elementId: rect.id,
-        focus: 0,
-        gap: 0,
-        fixedPoint: [0.25, 0.5],
-      },
-      endBinding: {
-        elementId: rect.id,
-        focus: 0,
-        gap: 0,
-        fixedPoint: [0.75, 0.5],
-      },
-    });
-
-    API.setElements([rect, arrow]);
-
-    // Store original inner point positions (local coordinates)
-    const originalInnerPoint1 = [...arrow.points[1]];
-    const originalInnerPoint2 = [...arrow.points[2]];
-
-    // Move the rectangle
-    mouse.reset();
-    mouse.downAt(150, 100); // Click on the rectangle
-    mouse.moveTo(300, 200); // Move it down and to the right
-    mouse.up();
-
-    // Verify that inner points moved with the arrow (same local coordinates)
-    // When both ends are bound to the same element, inner points should maintain
-    // their local coordinates relative to the arrow's origin
-    expect(arrow.points[1][0]).toBe(originalInnerPoint1[0]);
-    expect(arrow.points[1][1]).toBe(originalInnerPoint1[1]);
-    expect(arrow.points[2][0]).toBe(originalInnerPoint2[0]);
-    expect(arrow.points[2][1]).toBe(originalInnerPoint2[1]);
-  });
-
-  it("should NOT move inner points when arrow is bound to different elements", () => {
-    // Create two rectangles as binding targets
-    const rectLeft = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-
-    const rectRight = API.createElement({
-      type: "rectangle",
-      x: 300,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-
-    // Create a non-elbowed arrow with inner points bound to different elements
-    const arrow = API.createElement({
-      type: "arrow",
-      x: 100,
-      y: 50,
-      width: 200,
-      height: 0,
-      points: [
-        pointFrom(0, 0), // start point
-        pointFrom(50, -20), // first inner point
-        pointFrom(150, 20), // second inner point
-        pointFrom(200, 0), // end point
-      ],
-      startBinding: {
-        elementId: rectLeft.id,
-        focus: 0.5,
-        gap: 5,
-      },
-      endBinding: {
-        elementId: rectRight.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rectLeft, rectRight, arrow]);
-
-    // Store original inner point positions
-    const originalInnerPoint1 = [...arrow.points[1]];
-    const originalInnerPoint2 = [...arrow.points[2]];
-
-    // Move the right rectangle down by 50 pixels
-    mouse.reset();
-    mouse.downAt(350, 50); // Click on the right rectangle
-    mouse.moveTo(350, 100); // Move it down
-    mouse.up();
-
-    // Verify that inner points did NOT move when bound to different elements
-    // The arrow should NOT translate inner points proportionally when only one end moves
-    expect(arrow.points[1][0]).toBe(originalInnerPoint1[0]);
-    expect(arrow.points[1][1]).toBe(originalInnerPoint1[1]);
-    expect(arrow.points[2][0]).toBe(originalInnerPoint2[0]);
-    expect(arrow.points[2][1]).toBe(originalInnerPoint2[1]);
-  });
-});
-
-describe("line segment extension binding", () => {
-  beforeEach(async () => {
-    mouse.reset();
-
-    await act(() => {
-      return setLanguage(defaultLang);
-    });
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-  });
-
-  it("should use point binding when extended segment intersects element", () => {
-    // Create a rectangle that will be intersected by the extended arrow segment
-    const rect = API.createElement({
-      type: "rectangle",
-      x: 100,
-      y: 100,
-      width: 100,
-      height: 100,
-    });
-
-    API.setElements([rect]);
-
-    // Draw an arrow that points at the rectangle (extended segment will intersect)
-    UI.clickTool("arrow");
-    mouse.downAt(0, 0); // Start point
-    mouse.moveTo(120, 95); // End point - arrow direction points toward rectangle
-    mouse.up();
-
-    const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
-
-    // Should create a normal point binding since the extended line segment
-    // from the last arrow segment intersects the rectangle
-    expect(arrow.endBinding?.elementId).toBe(rect.id);
-    expect(arrow.endBinding).toHaveProperty("focus");
-    expect(arrow.endBinding).toHaveProperty("gap");
-    expect(arrow.endBinding).not.toHaveProperty("fixedPoint");
-  });
-
-  it("should use fixed point binding when extended segment misses element", () => {
-    // Create a rectangle positioned so the extended arrow segment will miss it
-    const rect = API.createElement({
-      type: "rectangle",
-      x: 100,
-      y: 100,
-      width: 100,
-      height: 100,
-    });
-
-    API.setElements([rect]);
-
-    // Draw an arrow that doesn't point at the rectangle (extended segment will miss)
-    UI.clickTool("arrow");
-    mouse.reset();
-    mouse.downAt(125, 93); // Start point
-    mouse.moveTo(175, 93); // End point - arrow direction is horizontal, misses rectangle
-    mouse.up();
-
-    const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
-
-    // Should create a fixed point binding since the extended line segment
-    // from the last arrow segment misses the rectangle
-    expect(arrow.startBinding?.elementId).toBe(rect.id);
-    expect(arrow.startBinding).toHaveProperty("fixedPoint");
-    expect(
-      (arrow.startBinding as FixedPointBinding).fixedPoint[0],
-    ).toBeGreaterThanOrEqual(0);
-    expect(
-      (arrow.startBinding as FixedPointBinding).fixedPoint[0],
-    ).toBeLessThanOrEqual(1);
-    expect(
-      (arrow.startBinding as FixedPointBinding).fixedPoint[1],
-    ).toBeLessThanOrEqual(0);
-    expect(
-      (arrow.startBinding as FixedPointBinding).fixedPoint[1],
-    ).toBeLessThanOrEqual(1);
-    expect(arrow.endBinding).toBe(null);
-  });
-});

packages/element/tests/resize.test.tsx

@@ -27,7 +27,6 @@ import type {
   ExcalidrawElbowArrowElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
-  PointBinding,
 } from "../src/types";
 
 unmountComponent();
@@ -1024,20 +1023,8 @@ describe("multiple selection", () => {
       1 - move[0] / selectionWidth,
       1 - move[1] / selectionHeight,
     );
-    const leftArrowBinding: {
+    const leftArrowBinding = { ...leftBoundArrow.endBinding };
-      elementId: string;
+    const rightArrowBinding = { ...rightBoundArrow.endBinding };
-      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, {

packages/excalidraw/actions/actionFinalize.tsx

@@ -4,14 +4,8 @@ import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
   isBindingEnabled,
-  getHoveredElementForBinding,
 } from "@excalidraw/element/binding";
-import {
+import { isValidPolygon, LinearElementEditor } from "@excalidraw/element";
-  isElbowArrow,
-  isValidPolygon,
-  LinearElementEditor,
-  shouldTestInside,
-} from "@excalidraw/element";
 
 import {
   isBindingElement,
@@ -32,7 +26,7 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
+import type { LocalPoint } from "@excalidraw/math";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -100,22 +94,13 @@ export const actionFinalize = register({
       }
     }
 
-    if (appState.editingLinearElement && !appState.newElement) {
+    if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
       const element = LinearElementEditor.getElement(elementId, elementsMap);
 
       if (element) {
-        // NOTE: Dragging the entire arrow doesn't allow binding.
+        if (isBindingElement(element)) {
-        const allPointsSelected =
-          appState.editingLinearElement?.pointerDownState
-            .prevSelectedPointsIndices?.length === element.points.length;
-
-        if (
-          !allPointsSelected &&
-          isBindingEnabled(appState) &&
-          isBindingElement(element)
-        ) {
           bindOrUnbindLinearElement(
             element,
             startBindingElement,
@@ -123,7 +108,6 @@ export const actionFinalize = register({
             scene,
           );
         }
-
         if (isLineElement(element) && !isValidPolygon(element.points)) {
           scene.mutateElement(element, {
             polygon: false,
@@ -175,26 +159,10 @@ export const actionFinalize = register({
         element.type !== "freedraw" &&
         appState.lastPointerDownWith !== "touch"
       ) {
-        const { x: rx, y: ry, points, lastCommittedPoint } = element;
+        const { points, lastCommittedPoint } = element;
-        const lastGlobalPoint = pointFrom<GlobalPoint>(
-          rx + points[points.length - 1][0],
-          ry + points[points.length - 1][1],
-        );
-        const hoveredElementForBinding = getHoveredElementForBinding(
-          {
-            x: lastGlobalPoint[0],
-            y: lastGlobalPoint[1],
-          },
-          elements,
-          elementsMap,
-          app.state.zoom,
-          shouldTestInside(element),
-          isElbowArrow(element),
-        );
         if (
-          !hoveredElementForBinding &&
+          !lastCommittedPoint ||
-          (!lastCommittedPoint ||
+          points[points.length - 1] !== lastCommittedPoint
-            points[points.length - 1] !== lastCommittedPoint)
         ) {
           scene.mutateElement(element, {
             points: element.points.slice(0, -1),
@@ -314,17 +282,6 @@ export const actionFinalize = register({
           element && isLinearElement(element)
             ? new LinearElementEditor(element, arrayToMap(newElements))
             : appState.selectedLinearElement,
-        editingLinearElement: appState.newElement
-          ? null
-          : appState.editingLinearElement
-          ? {
-              ...appState.editingLinearElement,
-              pointerDownState: {
-                ...appState.editingLinearElement.pointerDownState,
-                arrowOtherPoint: undefined,
-              },
-            }
-          : null,
       },
       // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,

packages/excalidraw/appState.ts

@@ -124,7 +124,6 @@ export const getDefaultAppState = (): Omit<
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
-    bindMode: "focus",
   };
 };
 
@@ -250,7 +249,6 @@ const APP_STATE_STORAGE_CONF = (<
   searchMatches: { browser: false, export: false, server: false },
   lockedMultiSelections: { browser: true, export: true, server: true },
   activeLockedId: { browser: false, export: false, server: false },
-  bindMode: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

packages/excalidraw/components/App.tsx

@@ -100,7 +100,6 @@ import {
   randomInteger,
   CLASSES,
   Emitter,
-  BIND_MODE_TIMEOUT,
 } from "@excalidraw/common";
 
 import {
@@ -233,11 +232,9 @@ import {
   hitElementBoundingBox,
   isLineElement,
   isSimpleArrow,
-  getOutlineAvoidingPoint,
-  bindOrUnbindLinearElement,
 } from "@excalidraw/element";
 
-import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
+import type { LocalPoint, Radians } from "@excalidraw/math";
 
 import type {
   ExcalidrawElement,
@@ -571,6 +568,7 @@ class App extends React.Component<AppProps, AppState> {
   public renderer: Renderer;
   public visibleElements: readonly NonDeletedExcalidrawElement[];
   private resizeObserver: ResizeObserver | undefined;
+  private nearestScrollableContainer: HTMLElement | Document | undefined;
   public library: AppClassProperties["library"];
   public libraryItemsFromStorage: LibraryItems | undefined;
   public id: string;
@@ -600,8 +598,6 @@ class App extends React.Component<AppProps, AppState> {
   public flowChartCreator: FlowChartCreator = new FlowChartCreator();
   private flowChartNavigator: FlowChartNavigator = new FlowChartNavigator();
 
-  private bindModeHandler: ReturnType<typeof setTimeout> | null = null;
-
   hitLinkElement?: NonDeletedExcalidrawElement;
   lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
   lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
@@ -4391,14 +4387,6 @@ class App extends React.Component<AppProps, AppState> {
             { informMutation: false, isDragging: false },
           );
 
-          if (isSimpleArrow(element)) {
-            // 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.
-            bindOrUnbindLinearElement(element, null, null, this.scene);
-          }
-
           updateBoundElements(element, this.scene, {
             simultaneouslyUpdated: selectedElements,
           });
@@ -5876,13 +5864,10 @@ class App extends React.Component<AppProps, AppState> {
           });
         });
       }
-      if (
+      if (editingLinearElement?.lastUncommittedPoint != null) {
-        editingLinearElement?.lastUncommittedPoint != null ||
-        this.state.newElement
-      ) {
         this.maybeSuggestBindingAtCursor(
           scenePointer,
-          editingLinearElement?.elbowed || false,
+          editingLinearElement.elbowed,
         );
       } else {
         // causes stack overflow if not sync
@@ -5903,7 +5888,7 @@ class App extends React.Component<AppProps, AppState> {
             [scenePointer],
             this.scene,
             this.state.zoom,
-            this.scene.getNonDeletedElementsMap(),
+            this.state.startBoundElement,
           ),
         });
       } else {
@@ -5913,7 +5898,9 @@ class App extends React.Component<AppProps, AppState> {
 
     if (this.state.multiElement) {
       const { multiElement } = this.state;
-      const { x: rx, y: ry, points, lastCommittedPoint } = multiElement;
+      const { x: rx, y: ry } = multiElement;
+
+      const { points, lastCommittedPoint } = multiElement;
       const lastPoint = points[points.length - 1];
 
       setCursorForShape(this.interactiveCanvas, this.state);
@@ -5959,42 +5946,19 @@ class App extends React.Component<AppProps, AppState> {
           { informMutation: false, isDragging: false },
         );
       } else {
-        const hoveredElement = getHoveredElementForBinding(
-          {
-            x: scenePointerX,
-            y: scenePointerY,
-          },
-          this.scene.getNonDeletedElements(),
-          this.scene.getNonDeletedElementsMap(),
-          this.state.zoom,
-          false,
-          false,
-        );
         const [gridX, gridY] = getGridPoint(
           scenePointerX,
           scenePointerY,
-          event[KEYS.CTRL_OR_CMD] || hoveredElement
+          event[KEYS.CTRL_OR_CMD] || isElbowArrow(multiElement)
             ? null
             : this.getEffectiveGridSize(),
         );
 
-        const avoidancePoint =
-          hoveredElement &&
-          getOutlineAvoidingPoint(
-            multiElement,
-            hoveredElement,
-            pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
-            multiElement.points.length - 1,
-            this.scene.getNonDeletedElementsMap(),
-          );
-
         const [lastCommittedX, lastCommittedY] =
           multiElement?.lastCommittedPoint ?? [0, 0];
 
-        let dxFromLastCommitted =
+        let dxFromLastCommitted = gridX - rx - lastCommittedX;
-          (avoidancePoint ? avoidancePoint[0] : gridX) - rx - lastCommittedX;
+        let dyFromLastCommitted = gridY - ry - lastCommittedY;
-        let dyFromLastCommitted =
-          (avoidancePoint ? avoidancePoint[1] : gridY) - ry - lastCommittedY;
 
         if (shouldRotateWithDiscreteAngle(event)) {
           ({ width: dxFromLastCommitted, height: dyFromLastCommitted } =
@@ -7740,26 +7704,10 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       const { x: rx, y: ry, lastCommittedPoint } = multiElement;
-      const lastGlobalPoint = pointFrom<GlobalPoint>(
-        rx + multiElement.points[multiElement.points.length - 1][0],
-        ry + multiElement.points[multiElement.points.length - 1][1],
-      );
-      const hoveredElementForBinding = getHoveredElementForBinding(
-        {
-          x: lastGlobalPoint[0],
-          y: lastGlobalPoint[1],
-        },
-        this.scene.getNonDeletedElements(),
-        this.scene.getNonDeletedElementsMap(),
-        this.state.zoom,
-        true,
-        isElbowArrow(multiElement),
-      );
 
       // clicking inside commit zone → finalize arrow
       if (
-        hoveredElementForBinding ||
+        multiElement.points.length > 1 &&
-        (multiElement.points.length > 1 &&
         lastCommittedPoint &&
         pointDistance(
           pointFrom(
@@ -7767,7 +7715,7 @@ class App extends React.Component<AppProps, AppState> {
             pointerDownState.origin.y - ry,
           ),
           lastCommittedPoint,
-          ) < LINE_CONFIRM_THRESHOLD)
+        ) < LINE_CONFIRM_THRESHOLD
       ) {
         this.actionManager.executeAction(actionFinalize);
         return;
@@ -7810,6 +7758,7 @@ class App extends React.Component<AppProps, AppState> {
         elementType === "arrow"
           ? [currentItemStartArrowhead, currentItemEndArrowhead]
           : [null, null];
+
       const element =
         elementType === "arrow"
           ? newArrowElement({
@@ -7857,7 +7806,21 @@ class App extends React.Component<AppProps, AppState> {
               locked: false,
               frameId: topLayerFrame ? topLayerFrame.id : null,
             });
-
+      this.setState((prevState) => {
+        const nextSelectedElementIds = {
+          ...prevState.selectedElementIds,
+        };
+        delete nextSelectedElementIds[element.id];
+        return {
+          selectedElementIds: makeNextSelectedElementIds(
+            nextSelectedElementIds,
+            prevState,
+          ),
+        };
+      });
+      this.scene.mutateElement(element, {
+        points: [...element.points, pointFrom<LocalPoint>(0, 0)],
+      });
       const boundElement = getHoveredElementForBinding(
         pointerDownState.origin,
         this.scene.getNonDeletedElements(),
@@ -7867,72 +7830,11 @@ class App extends React.Component<AppProps, AppState> {
         isElbowArrow(element),
       );
 
-      if (isSimpleArrow(element)) {
-        this.setState((prevState) => {
-          const linearElement = new LinearElementEditor(
-            element,
-            this.scene.getNonDeletedElementsMap(),
-          );
-          const linearElementEditor = {
-            ...linearElement,
-            startBindingElement: boundElement,
-            pointerDownState: {
-              ...linearElement.pointerDownState,
-              arrowOtherPoint: pointFrom<GlobalPoint>(
-                pointerDownState.origin.x,
-                pointerDownState.origin.y,
-              ),
-            },
-          };
-          const nextSelectedElementIds = makeNextSelectedElementIds(
-            { [element.id]: true },
-            prevState,
-          );
-
-          return {
-            selectedElementIds: nextSelectedElementIds,
-            editingLinearElement: linearElementEditor,
-          };
-        });
-      }
-
-      this.scene.mutateElement(element, {
-        points: [...element.points, pointFrom<LocalPoint>(0, 0)],
-      });
       this.scene.insertElement(element);
-      this.setState((prevState) => {
+      this.setState({
-        let linearElementEditor = null;
-        let nextSelectedElementIds = prevState.selectedElementIds;
-        if (isSimpleArrow(element)) {
-          const linearElement = new LinearElementEditor(
-            element,
-            this.scene.getNonDeletedElementsMap(),
-          );
-          linearElementEditor = {
-            ...linearElement,
-            startBindingElement: boundElement,
-            pointerDownState: {
-              ...linearElement.pointerDownState,
-              arrowOtherPoint: pointFrom<GlobalPoint>(
-                pointerDownState.origin.x,
-                pointerDownState.origin.y,
-              ),
-            },
-          };
-          nextSelectedElementIds = makeNextSelectedElementIds(
-            { [element.id]: true },
-            prevState,
-          );
-        }
-
-        return {
-          ...prevState,
         newElement: element,
         startBoundElement: boundElement,
         suggestedBindings: [],
-          selectedElementIds: nextSelectedElementIds,
-          editingLinearElement: linearElementEditor,
-        };
       });
     }
   };
@@ -8318,39 +8220,12 @@ class App extends React.Component<AppProps, AppState> {
           return;
         }
 
-        // Timed bind mode handler for arrow elements
-        if (this.state.bindMode === "focus") {
-          const pointerMovementDistance = Math.hypot(
-            (this.lastPointerMoveCoords?.x ?? Infinity) - pointerCoords.x,
-          );
-          if (this.bindModeHandler && pointerMovementDistance < 1) {
-            clearTimeout(this.bindModeHandler);
-          }
-          this.bindModeHandler = setTimeout(() => {
-            const hoveredElement = getHoveredElementForBinding(
-              pointerCoords,
-              this.scene.getNonDeletedElements(),
-              elementsMap,
-              this.state.zoom,
-            );
-
-            if (hoveredElement) {
-              this.setState({
-                bindMode: "fixed",
-              });
-            } else {
-              this.bindModeHandler = null;
-            }
-          }, BIND_MODE_TIMEOUT);
-        }
-
         const newState = LinearElementEditor.handlePointDragging(
           event,
           this,
           pointerCoords.x,
           pointerCoords.y,
           linearElementEditor,
-          (element) => this.getElementHitThreshold(element),
         );
         if (newState) {
           pointerDownState.lastCoords.x = pointerCoords.x;
@@ -8797,76 +8672,9 @@ class App extends React.Component<AppProps, AppState> {
         } else if (isLinearElement(newElement)) {
           pointerDownState.drag.hasOccurred = true;
           const points = newElement.points;
-          const startBindingElement =
-            this.state.editingLinearElement?.startBindingElement;
-          let [firstPointX, firstPointY] =
-            LinearElementEditor.getPointGlobalCoordinates(
-              newElement,
-              newElement.points[0],
-              elementsMap,
-            );
           let dx = gridX - newElement.x;
           let dy = gridY - newElement.y;
 
-          if (
-            !isElbowArrow(newElement) &&
-            this.state.editingLinearElement &&
-            isBindingElement(newElement, false)
-          ) {
-            // Handles the case where we need to "jump out" the simple arrow
-            // start point as we drag-create it.
-            const hoveredElement = getHoveredElementForBinding(
-              { x: gridX, y: gridY },
-              this.scene.getNonDeletedElements(),
-              this.scene.getNonDeletedElementsMap(),
-              this.state.zoom,
-              isElbowArrow(newElement),
-              isElbowArrow(newElement),
-            );
-            const arrowIsInsideTheSameElement =
-              startBindingElement &&
-              startBindingElement !== "keep" &&
-              hoveredElement?.id === startBindingElement.id;
-
-            if (!arrowIsInsideTheSameElement) {
-              const [outlinePointX, outlinePointY] = getOutlineAvoidingPoint(
-                newElement,
-                hoveredElement,
-                hoveredElement
-                  ? pointFrom(pointerCoords.x, pointerCoords.y)
-                  : pointFrom(gridX, gridY),
-                newElement.points.length - 1,
-                elementsMap,
-              );
-
-              const otherHoveredElement = getHoveredElementForBinding(
-                { x: firstPointX, y: firstPointY },
-                this.scene.getNonDeletedElements(),
-                this.scene.getNonDeletedElementsMap(),
-                this.state.zoom,
-                isElbowArrow(newElement),
-                isElbowArrow(newElement),
-              );
-              [firstPointX, firstPointY] = getOutlineAvoidingPoint(
-                newElement,
-                otherHoveredElement,
-                pointFrom(firstPointX, firstPointY),
-                0,
-                elementsMap,
-              );
-
-              dx = outlinePointX - firstPointX;
-              dy = outlinePointY - firstPointY;
-            } else {
-              firstPointX =
-                this.state.editingLinearElement?.pointerDownState
-                  .arrowOtherPoint?.[0] ?? firstPointX;
-              firstPointY =
-                this.state.editingLinearElement?.pointerDownState
-                  .arrowOtherPoint?.[1] ?? firstPointY;
-            }
-          }
-
           if (shouldRotateWithDiscreteAngle(event) && points.length === 2) {
             ({ width: dx, height: dy } = getLockedLinearCursorAlignSize(
               newElement.x,
@@ -8880,8 +8688,6 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.mutateElement(
               newElement,
               {
-                x: firstPointX,
-                y: firstPointY,
                 points: [...points, pointFrom<LocalPoint>(dx, dy)],
               },
               { informMutation: false, isDragging: false },
@@ -8893,8 +8699,6 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.mutateElement(
               newElement,
               {
-                x: firstPointX,
-                y: firstPointY,
                 points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
               },
               { isDragging: true, informMutation: false },
@@ -8913,7 +8717,6 @@ class App extends React.Component<AppProps, AppState> {
                 [pointerCoords],
                 this.scene,
                 this.state.zoom,
-                elementsMap,
                 this.state.startBoundElement,
               ),
             });
@@ -9150,14 +8953,8 @@ class App extends React.Component<AppProps, AppState> {
         });
       }
 
-      if (this.bindModeHandler) {
-        clearTimeout(this.bindModeHandler);
-        this.bindModeHandler = null;
-      }
-
       this.setState({
         selectedElementsAreBeingDragged: false,
-        bindMode: "focus",
       });
       const elementsMap = this.scene.getNonDeletedElementsMap();
 
@@ -9180,7 +8977,7 @@ class App extends React.Component<AppProps, AppState> {
 
       // Handle end of dragging a point of a linear element, might close a loop
       // and sets binding element
-      if (this.state.editingLinearElement && !this.state.newElement) {
+      if (this.state.editingLinearElement) {
         if (
           !pointerDownState.boxSelection.hasOccurred &&
           pointerDownState.hit?.element?.id !==
@@ -9319,7 +9116,10 @@ class App extends React.Component<AppProps, AppState> {
             newElement,
           });
         } else if (pointerDownState.drag.hasOccurred && !multiElement) {
-          if (isBindingElement(newElement, false)) {
+          if (
+            isBindingEnabled(this.state) &&
+            isBindingElement(newElement, false)
+          ) {
             this.actionManager.executeAction(actionFinalize, "ui", {
               event: childEvent,
               sceneCoords,

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

@@ -88,12 +88,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
-    "fixedPoint": [
+    "focus": -0.007519379844961235,
-      0.04,
+    "gap": 11.562288374879595,
-      0.4633333333333333,
-    ],
-    "focus": 0,
-    "gap": 0,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -122,12 +118,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id49",
-    "fixedPoint": [
+    "focus": -0.0813953488372095,
-      1,
+    "gap": 1,
-      0.5001,
-    ],
-    "focus": 0,
-    "gap": 0,
   },
   "strokeColor": "#1864ab",
   "strokeStyle": "solid",
@@ -342,12 +334,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "text-2",
-    "fixedPoint": [
-      -2.05,
-      0.5001,
-    ],
     "focus": 0,
-    "gap": 0,
+    "gap": 16,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -376,12 +364,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "startArrowhead": null,
   "startBinding": {
     "elementId": "text-1",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
     "focus": 0,
-    "gap": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -452,12 +436,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id42",
-    "fixedPoint": [
+    "focus": -0,
-      0,
+    "gap": 1,
-      0.5001,
-    ],
-    "focus": 0,
-    "gap": 0,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -486,12 +466,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id41",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
     "focus": 0,
-    "gap": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -636,12 +612,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id46",
-    "fixedPoint": [
+    "focus": -0,
-      0,
+    "gap": 1,
-      0.5001,
-    ],
-    "focus": 0,
-    "gap": 0,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -670,12 +642,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id45",
-    "fixedPoint": [
-      1,
-      0.5001,
-    ],
     "focus": 0,
-    "gap": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -1571,12 +1539,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "B",
-    "fixedPoint": [
-      0.46387050630528887,
-      0.48466257668711654,
-    ],
     "focus": 0,
-    "gap": 0,
+    "gap": 32,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -1603,12 +1567,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "startArrowhead": null,
   "startBinding": {
     "elementId": "Bob",
-    "fixedPoint": [
-      0.39381496335223337,
-      1,
-    ],
     "focus": 0,
-    "gap": 0,
+    "gap": 1,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",

packages/excalidraw/data/transform.test.ts

@@ -433,11 +433,11 @@ describe("Test Transform", () => {
         startBinding: {
           elementId: rectangle.id,
           focus: 0,
-          gap: 0,
+          gap: 1,
         },
         endBinding: {
           elementId: ellipse.id,
-          focus: 0,
+          focus: -0,
         },
       });
 
@@ -518,11 +518,11 @@ describe("Test Transform", () => {
         startBinding: {
           elementId: text2.id,
           focus: 0,
-          gap: 0,
+          gap: 1,
         },
         endBinding: {
           elementId: text3.id,
-          focus: 0,
+          focus: -0,
         },
       });
 

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

@@ -11,7 +11,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -1084,7 +1083,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1298,7 +1296,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1629,7 +1626,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1960,7 +1956,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2174,7 +2169,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2415,7 +2409,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2713,7 +2706,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3085,7 +3077,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3578,7 +3569,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3901,7 +3891,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -4224,7 +4213,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -4635,7 +4623,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -5852,7 +5839,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -7120,7 +7106,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -7787,7 +7772,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": {
     "items": [
@@ -8778,7 +8762,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": {
     "items": [

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

@@ -193,7 +193,6 @@ exports[`move element > rectangles with binding arrow 7`] = `
   "lastCommittedPoint": null,
   "link": null,
   "locked": false,
-  "moveMidPointsWithElement": false,
   "opacity": 100,
   "points": [
     [

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

@@ -11,7 +11,6 @@ exports[`given element A and group of elements B and given both are selected whe
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -437,7 +436,6 @@ exports[`given element A and group of elements B and given both are selected whe
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -853,7 +851,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1419,7 +1416,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -1626,7 +1622,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2010,7 +2005,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2255,7 +2249,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2435,7 +2428,6 @@ exports[`regression tests > can drag element that covers another element, while
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -2760,7 +2752,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3015,7 +3006,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3256,7 +3246,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3492,7 +3481,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -3750,7 +3738,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -4064,7 +4051,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -4500,7 +4486,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -4783,7 +4768,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -5059,7 +5043,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -5267,7 +5250,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -5467,7 +5449,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -5860,7 +5841,6 @@ exports[`regression tests > drags selected elements from point inside common bou
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -6157,7 +6137,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
     "locked": false,
     "type": "freedraw",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -6579,14 +6558,12 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
     "appState": AppStateDelta {
       "delta": Delta {
         "deleted": {
-          "editingLinearElementId": "id15",
           "selectedElementIds": {
             "id15": true,
           },
           "selectedLinearElementId": null,
         },
         "inserted": {
-          "editingLinearElementId": null,
           "selectedElementIds": {
             "id12": true,
           },
@@ -6717,11 +6694,9 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
     "appState": AppStateDelta {
       "delta": Delta {
         "deleted": {
-          "editingLinearElementId": null,
           "selectedLinearElementId": "id15",
         },
         "inserted": {
-          "editingLinearElementId": "id15",
           "selectedLinearElementId": null,
         },
       },
@@ -6993,7 +6968,6 @@ exports[`regression tests > given a group of selected elements with an element t
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -7327,7 +7301,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -7606,7 +7579,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -7841,7 +7813,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -8081,7 +8052,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -8261,7 +8231,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -8441,7 +8410,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -8621,7 +8589,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -8847,7 +8814,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -9071,7 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
     "locked": false,
     "type": "freedraw",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -9267,7 +9232,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -9493,7 +9457,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -9673,7 +9636,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -9897,7 +9859,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -10077,7 +10038,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
     "locked": false,
     "type": "freedraw",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -10273,7 +10233,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -10453,7 +10412,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -10984,7 +10942,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -11264,7 +11221,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -11387,7 +11343,6 @@ exports[`regression tests > shift click on selected element should deselect it o
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -11587,7 +11542,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -11906,7 +11860,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -12335,7 +12288,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -12975,7 +12927,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -13101,7 +13052,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -13732,7 +13682,6 @@ exports[`regression tests > switches from group of selected elements to another
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -14071,7 +14020,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -14335,7 +14283,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -14458,7 +14405,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -14574,11 +14520,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] redo st
     "appState": AppStateDelta {
       "delta": Delta {
         "deleted": {
-          "editingLinearElementId": "id6",
           "selectedLinearElementId": null,
         },
         "inserted": {
-          "editingLinearElementId": null,
           "selectedLinearElementId": "id6",
         },
       },
@@ -14653,13 +14597,11 @@ exports[`regression tests > undo/redo drawing an element > [end of test] redo st
     "appState": AppStateDelta {
       "delta": Delta {
         "deleted": {
-          "editingLinearElementId": null,
           "selectedElementIds": {
             "id3": true,
           },
         },
         "inserted": {
-          "editingLinearElementId": "id6",
           "selectedElementIds": {
             "id6": true,
           },
@@ -14851,7 +14793,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
     "locked": false,
     "type": "text",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,
@@ -14974,7 +14915,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,

packages/excalidraw/tests/dragCreate.test.tsx

@@ -157,7 +157,7 @@ describe("Test dragCreate", () => {
       fireEvent.pointerUp(canvas);
 
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `6`,
+        `5`,
       );
       expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
       expect(h.state.selectionElement).toBeNull();

packages/excalidraw/tests/history.test.tsx

@@ -1148,7 +1148,7 @@ describe("history", () => {
       expect(API.getUndoStack().length).toBe(2);
       expect(API.getRedoStack().length).toBe(4);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.editingLinearElement).not.toBeNull();
+      expect(h.state.editingLinearElement).toBeNull();
       expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -1165,7 +1165,7 @@ describe("history", () => {
       expect(API.getUndoStack().length).toBe(1);
       expect(API.getRedoStack().length).toBe(5);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.editingLinearElement).not.toBeNull();
+      expect(h.state.editingLinearElement).toBeNull();
       expect(h.state.selectedLinearElement).toBeNull();
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -1197,7 +1197,7 @@ describe("history", () => {
       expect(API.getUndoStack().length).toBe(1);
       expect(API.getRedoStack().length).toBe(5);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.editingLinearElement).not.toBeNull();
+      expect(h.state.editingLinearElement).toBeNull();
       expect(h.state.selectedLinearElement).toBeNull();
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -1213,7 +1213,7 @@ describe("history", () => {
       expect(API.getUndoStack().length).toBe(2);
       expect(API.getRedoStack().length).toBe(4);
       expect(assertSelectedElements(h.elements[0]));
-      expect(h.state.editingLinearElement).not.toBeNull();
+      expect(h.state.editingLinearElement).toBeNull();
       expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
       expect(h.elements).toEqual([
         expect.objectContaining({
@@ -1638,15 +1638,13 @@ describe("history", () => {
         expect(API.getUndoStack().length).toBe(5);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          fixedPoint: expect.arrayContaining([1, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          fixedPoint: expect.arrayContaining([0, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(rect1.boundElements).toStrictEqual([
           { id: text.id, type: "text" },
@@ -1663,15 +1661,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(1);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          fixedPoint: expect.arrayContaining([1, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          fixedPoint: expect.arrayContaining([0, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1688,15 +1684,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(0);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          fixedPoint: expect.arrayContaining([1, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          fixedPoint: expect.arrayContaining([0, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1721,15 +1715,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(0);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          fixedPoint: expect.arrayContaining([1, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          fixedPoint: expect.arrayContaining([0, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -1746,15 +1738,13 @@ describe("history", () => {
         expect(API.getRedoStack().length).toBe(1);
         expect(arrow.startBinding).toEqual({
           elementId: rect1.id,
-          fixedPoint: expect.arrayContaining([1, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(arrow.endBinding).toEqual({
           elementId: rect2.id,
-          fixedPoint: expect.arrayContaining([0, 0.5001]),
+          focus: expect.toBeNonNaNNumber(),
-          focus: 0,
+          gap: expect.toBeNonNaNNumber(),
-          gap: 0,
         });
         expect(h.elements).toEqual([
           expect.objectContaining({
@@ -5089,11 +5079,13 @@ describe("history", () => {
               id: arrowId,
               startBinding: expect.objectContaining({
                 elementId: rect1.id,
-                fixedPoint: expect.arrayContaining([1, 0.5001]),
+                focus: 0,
+                gap: 1,
               }),
               endBinding: expect.objectContaining({
                 elementId: rect2.id,
-                fixedPoint: expect.arrayContaining([0, 0.5001]),
+                focus: -0,
+                gap: 1,
               }),
               isDeleted: true,
             }),

packages/excalidraw/tests/move.test.tsx

@@ -97,7 +97,7 @@ describe("move element", () => {
     new Pointer("mouse").clickOn(rectB);
 
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-      `18`,
+      `17`,
     );
     expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`13`);
     expect(h.state.selectionElement).toBeNull();

packages/excalidraw/tests/multiPointCreate.test.tsx

@@ -118,7 +118,7 @@ describe("multi point mode in linear elements", () => {
       key: KEYS.ENTER,
     });
 
-    expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
+    expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`);
     expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
     expect(h.elements.length).toEqual(1);
 

packages/excalidraw/tests/selection.test.tsx

@@ -425,7 +425,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
     fireEvent.pointerUp(canvas);
 
-    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
     expect(renderStaticScene).toHaveBeenCalledTimes(6);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
@@ -487,12 +487,7 @@ describe("tool locking & selection", () => {
     expect(h.state.activeTool.locked).toBe(true);
 
     for (const { value } of Object.values(SHAPES)) {
-      if (
+      if (value !== "image" && value !== "selection" && value !== "eraser") {
-        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

@@ -444,7 +444,6 @@ 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: "focus" | "fixed";
 }
 
 export type SearchMatch = {

packages/utils/src/index.ts

@@ -2,4 +2,3 @@ export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
 export { getCommonBounds } from "@excalidraw/element";
-export * from "./visualdebug";

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

@@ -11,7 +11,6 @@ exports[`exportToSvg > with default arguments 1`] = `
     "locked": false,
     "type": "selection",
   },
-  "bindMode": "focus",
   "collaborators": Map {},
   "contextMenu": null,
   "croppingElementId": null,