chore: Fix lint

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

packages/element/src/__tests__/__snapshots__/transform.test.ts.snap

@@ -1822,7 +1822,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 120,
-  "x": 187.75450000000004,
+  "x": 187.7545,
   "y": 44.5,
 }
 `;

packages/element/src/arrows/focus.ts

@@ -27,7 +27,6 @@ import type {
   ElementsMap,
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
-  FixedPointBinding,
   NonDeletedSceneElementsMap,
   PointsPositionUpdates,
 } from "../types";
@@ -111,17 +110,10 @@ const focusPointUpdate = (
 ) => {
   const pointUpdates = new Map();
 
-  const originalAdjacentBinding =
-    appState.selectedLinearElement?.initialState
-      .arrowOtherEndpointInitialBinding;
   const bindingField = isStartBinding ? "startBinding" : "endBinding";
   const adjacentBindingField = isStartBinding ? "endBinding" : "startBinding";
   let currentBinding = arrow[bindingField];
-  let adjacentBinding =
-    originalAdjacentBinding?.mode === "orbit" &&
-    arrow[adjacentBindingField]?.mode === "inside"
-      ? originalAdjacentBinding
-      : arrow[adjacentBindingField];
+  let adjacentBinding = arrow[adjacentBindingField];
 
   // Update the dragged focus point related end
   if (currentBinding && bindableElement) {
@@ -171,7 +163,7 @@ const focusPointUpdate = (
       // Same shape bound on both ends
       const boundToSameElementAfterUpdate =
         bindableElement && adjacentBinding.elementId === bindableElement.id;
-      if (boundToSameElementAfterUpdate) {
+      if (switchToInsideBinding || boundToSameElementAfterUpdate) {
         adjacentBinding = {
           ...adjacentBinding,
           mode: "inside",
@@ -347,7 +339,6 @@ export const handleFocusPointPointerDown = (
 ): {
   hitFocusPoint: "start" | "end" | null;
   pointerOffset: { x: number; y: number };
-  arrowOtherEndpointInitialBinding: FixedPointBinding | null;
 } => {
   const pointerPos = pointFrom(
     pointerDownState.origin.x,
@@ -385,7 +376,6 @@ export const handleFocusPointPointerDown = (
             x: pointerPos[0] - focusPoint[0],
             y: pointerPos[1] - focusPoint[1],
           },
-          arrowOtherEndpointInitialBinding: arrow.endBinding,
         };
       }
     }
@@ -421,7 +411,6 @@ export const handleFocusPointPointerDown = (
             x: pointerPos[0] - focusPoint[0],
             y: pointerPos[1] - focusPoint[1],
           },
-          arrowOtherEndpointInitialBinding: arrow.startBinding,
         };
       }
     }
@@ -430,14 +419,13 @@ export const handleFocusPointPointerDown = (
   return {
     hitFocusPoint: null,
     pointerOffset: { x: 0, y: 0 },
-    arrowOtherEndpointInitialBinding: null,
   };
 };
 
 export const handleFocusPointPointerUp = (
   linearElementEditor: LinearElementEditor,
   scene: Scene,
-): { arrowOtherEndpointInitialBinding: FixedPointBinding | null } => {
+) => {
   invariant(
     linearElementEditor.draggedFocusPointBinding,
     "Must have a dragged focus point at pointer release",
@@ -495,10 +483,6 @@ export const handleFocusPointPointerUp = (
       ],
     });
   }
-
-  return {
-    arrowOtherEndpointInitialBinding: null,
-  };
 };
 
 export const handleFocusPointHover = (

packages/element/src/binding.ts

@@ -694,7 +694,6 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     localPoint,
     elementsMap,
   );
-
   const hit = getHoveredElementForBinding(
     globalPoint,
     elements,
@@ -749,15 +748,6 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
           : // NOTE: Can only affect the start point because new arrows always drag the end point
           opts?.newArrow
           ? appState.selectedLinearElement!.initialState.origin!
-          : otherBindableElement &&
-            appState.selectedLinearElement?.initialState
-              ?.arrowOtherEndpointInitialBinding?.fixedPoint
-          ? getGlobalFixedPointForBindableElement(
-              appState.selectedLinearElement?.initialState
-                .arrowOtherEndpointInitialBinding.fixedPoint,
-              otherBindableElement,
-              elementsMap,
-            )
           : LinearElementEditor.getPointAtIndexGlobalCoordinates(
               arrow,
               0,
@@ -769,15 +759,6 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
         element: hit,
         focusPoint: endDragged
           ? globalPoint
-          : otherBindableElement &&
-            appState.selectedLinearElement?.initialState
-              ?.arrowOtherEndpointInitialBinding?.fixedPoint
-          ? getGlobalFixedPointForBindableElement(
-              appState.selectedLinearElement?.initialState
-                .arrowOtherEndpointInitialBinding.fixedPoint,
-              otherBindableElement,
-              elementsMap,
-            )
           : LinearElementEditor.getPointAtIndexGlobalCoordinates(
               arrow,
               -1,
@@ -850,57 +831,36 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
       threshold: maxBindingDistance_simple(appState.zoom),
       overrideShouldTestInside: true,
     });
-  const otherPointWasInsideAtStart =
-    appState.selectedLinearElement?.initialState
-      .arrowOtherEndpointInitialBinding?.mode === "inside";
   const otherNeverOverride = opts?.newArrow
     ? appState.selectedLinearElement?.initialState.arrowStartIsInside
-    : otherBinding?.mode === "inside" && otherPointWasInsideAtStart;
-
-  let other: BindingStrategy = { mode: undefined };
-  if (!otherNeverOverride) {
-    if (
-      otherBinding?.mode === "inside" &&
-      !otherPointWasInsideAtStart &&
-      otherBindableElement
-    ) {
-      other = {
-        mode: "orbit",
-        element: otherBindableElement,
-        focusPoint: getGlobalFixedPointForBindableElement(
-          otherBinding.fixedPoint,
-          otherBindableElement,
-          elementsMap,
-        ),
-      };
-    } else if (
-      otherBindableElement &&
+    : otherBinding?.mode === "inside";
+  const other: BindingStrategy = !otherNeverOverride
+    ? otherBindableElement &&
       !otherFocusPointIsInElement &&
       !pointIsCloseToOtherElement &&
       appState.selectedLinearElement?.initialState.altFocusPoint
-    ) {
-      other = {
-        mode: "orbit",
-        element: otherBindableElement,
-        focusPoint: appState.selectedLinearElement.initialState.altFocusPoint,
-      };
-    } else if (opts?.angleLocked && otherBindableElement) {
-      other = {
-        mode: "orbit",
-        element: otherBindableElement,
-        focusPoint:
-          projectFixedPointOntoDiagonal(
-            arrow,
-            otherEndpoint,
-            otherBindableElement,
-            startDragged ? "end" : "start",
-            elementsMap,
-            appState.zoom,
-            appState.isMidpointSnappingEnabled,
-          ) || otherEndpoint,
-      };
-    }
-  }
+      ? {
+          mode: "orbit",
+          element: otherBindableElement,
+          focusPoint: appState.selectedLinearElement.initialState.altFocusPoint,
+        }
+      : opts?.angleLocked && otherBindableElement
+      ? {
+          mode: "orbit",
+          element: otherBindableElement,
+          focusPoint:
+            projectFixedPointOntoDiagonal(
+              arrow,
+              otherEndpoint,
+              otherBindableElement,
+              startDragged ? "end" : "start",
+              elementsMap,
+              appState.zoom,
+              appState.isMidpointSnappingEnabled,
+            ) || otherEndpoint,
+        }
+      : { mode: undefined }
+    : { mode: undefined };
 
   return {
     start: startDragged ? current : other,

packages/element/src/bounds.ts

@@ -790,27 +790,41 @@ export const getArrowheadPoints = (
     p0 = pointFrom(prevOp.data[4], prevOp.data[5]);
   }
 
-  // B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
-  const equation = (t: number, idx: number) =>
-    Math.pow(1 - t, 3) * p3[idx] +
-    3 * t * Math.pow(1 - t, 2) * p2[idx] +
-    3 * Math.pow(t, 2) * (1 - t) * p1[idx] +
-    p0[idx] * Math.pow(t, 3);
-
-  // Ee know the last point of the arrow (or the first, if start arrowhead).
+  // We know the last point of the arrow (or the first, if start arrowhead).
   const [x2, y2] = position === "start" ? p0 : p3;
 
-  // By using cubic bezier equation (B(t)) and the given parameters,
-  // we calculate a point that is closer to the last point.
-  // The value 0.3 is chosen arbitrarily and it works best for all
-  // the tested cases.
-  const [x1, y1] = [equation(0.3, 0), equation(0.3, 1)];
-
-  // Find the normalized direction vector based on the
-  // previously calculated points.
-  const distance = Math.hypot(x2 - x1, y2 - y1);
-  const nx = (x2 - x1) / distance;
-  const ny = (y2 - y1) / distance;
+  // Use the analytic tangent at the Bézier endpoint for a precise arrowhead
+  // direction. For a cubic Bézier B(t) with control points p0p3:
+  //   B'(1): (p3 − p2) tangent at the end
+  //   B'(0): (p1 − p0) for start arrowhead, arrow points away: (p0 − p1)
+  let dx: number;
+  let dy: number;
+  if (position === "end") {
+    dx = p3[0] - p2[0];
+    dy = p3[1] - p2[1];
+    if (Math.hypot(dx, dy) < 1e-6) {
+      dx = p3[0] - p1[0];
+      dy = p3[1] - p1[1];
+    }
+    if (Math.hypot(dx, dy) < 1e-6) {
+      dx = p3[0] - p0[0];
+      dy = p3[1] - p0[1];
+    }
+  } else {
+    dx = p0[0] - p1[0];
+    dy = p0[1] - p1[1];
+    if (Math.hypot(dx, dy) < 1e-6) {
+      dx = p0[0] - p2[0];
+      dy = p0[1] - p2[1];
+    }
+    if (Math.hypot(dx, dy) < 1e-6) {
+      dx = p0[0] - p3[0];
+      dy = p0[1] - p3[1];
+    }
+  }
+  const distance = Math.hypot(dx, dy);
+  const nx = dx / distance;
+  const ny = dy / distance;
 
   const size = getArrowheadSize(arrowhead);
 
@@ -880,30 +894,10 @@ export const getArrowheadPoints = (
   );
 
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
-    // point opposite to the arrowhead point
-    let ox;
-    let oy;
-
-    if (position === "start") {
-      const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-
-      [ox, oy] = pointRotateRads(
-        pointFrom(tx + minSize * 2, ty),
-        pointFrom(tx, ty),
-        Math.atan2(py - ty, px - tx) as Radians,
-      );
-    } else {
-      const [px, py] =
-        element.points.length > 1
-          ? element.points[element.points.length - 2]
-          : [0, 0];
-
-      [ox, oy] = pointRotateRads(
-        pointFrom(tx - minSize * 2, ty),
-        pointFrom(tx, ty),
-        Math.atan2(ty - py, tx - px) as Radians,
-      );
-    }
+    // point opposite to the arrowhead point, just mirrored across the (tx, ty)
+    // point
+    const ox = tx - nx * minSize * 2;
+    const oy = ty - ny * minSize * 2;
 
     return [tx, ty, x3, y3, ox, oy, x4, y4];
   }

packages/element/src/linearElementEditor.ts

@@ -141,7 +141,6 @@ export class LinearElementEditor {
     };
     arrowStartIsInside: boolean;
     altFocusPoint: Readonly<GlobalPoint> | null;
-    arrowOtherEndpointInitialBinding: FixedPointBinding | null;
   }>;
 
   /** whether you're dragging a point */
@@ -194,7 +193,6 @@ export class LinearElementEditor {
         added: false,
       },
       arrowStartIsInside: false,
-      arrowOtherEndpointInitialBinding: null,
       altFocusPoint: null,
     };
     this.hoverPointIndex = -1;
@@ -766,7 +764,6 @@ export class LinearElementEditor {
         ...editingLinearElement.initialState,
         origin: null,
         arrowStartIsInside: false,
-        arrowOtherEndpointInitialBinding: null,
       },
     };
   }
@@ -793,9 +790,20 @@ export class LinearElementEditor {
       elementsMap,
     );
 
+    const [lines, segCurves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap,
+    );
+    const segmentCount = lines.length + segCurves.length;
+
     let index = 0;
     const midpoints: (GlobalPoint | null)[] = [];
     while (index < points.length - 1) {
+      if (segmentCount > 0 && index >= segmentCount) {
+        midpoints.push(null);
+        index++;
+        continue;
+      }
       if (
         LinearElementEditor.isSegmentTooShort(
           element,
@@ -1088,7 +1096,6 @@ export class LinearElementEditor {
             !!app.state.newElement &&
             (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
           altFocusPoint: null,
-          arrowOtherEndpointInitialBinding: element.startBinding,
         },
         selectedPointsIndices: [element.points.length - 1],
         lastUncommittedPoint: null,
@@ -1151,9 +1158,6 @@ export class LinearElementEditor {
           !!app.state.newElement &&
           (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
         altFocusPoint: null,
-        arrowOtherEndpointInitialBinding: nextSelectedPointsIndices?.includes(0)
-          ? element.endBinding
-          : element.startBinding,
       },
       selectedPointsIndices: nextSelectedPointsIndices,
       pointerOffset: targetPoint
@@ -2416,21 +2420,22 @@ const pointDraggingUpdates = (
       )! as ExcalidrawBindableElement)
     : null;
 
-  const endLocalPoint =
-    endIsDraggingOverStartElement &&
-    app.state.bindMode !== "inside" &&
-    getFeatureFlag("COMPLEX_BINDINGS")
-      ? nextArrow.points[0]
-      : endBindable
-      ? updateBoundPoint(
-          nextArrow,
-          "endBinding",
-          nextArrow.endBinding,
-          endBindable,
-          elementsMap,
-          endIsDragged,
-        ) || nextArrow.points[nextArrow.points.length - 1]
-      : nextArrow.points[nextArrow.points.length - 1];
+  const endLocalPoint = startIsDraggingOverEndElement
+    ? nextArrow.points[nextArrow.points.length - 1]
+    : endIsDraggingOverStartElement &&
+      app.state.bindMode !== "inside" &&
+      getFeatureFlag("COMPLEX_BINDINGS")
+    ? nextArrow.points[0]
+    : endBindable
+    ? updateBoundPoint(
+        nextArrow,
+        "endBinding",
+        nextArrow.endBinding,
+        endBindable,
+        elementsMap,
+        endIsDragged,
+      ) || nextArrow.points[nextArrow.points.length - 1]
+    : nextArrow.points[nextArrow.points.length - 1];
 
   // We need to keep the simulated next arrow up-to-date, because
   // updateBoundPoint looks at the opposite point
@@ -2464,11 +2469,13 @@ const pointDraggingUpdates = (
       : nextArrow.points[0];
 
   const endChanged =
+    !startIsDraggingOverEndElement &&
     !(
       endIsDraggingOverStartElement &&
       app.state.bindMode !== "inside" &&
       getFeatureFlag("COMPLEX_BINDINGS")
-    ) && !!endBindable;
+    ) &&
+    !!endBindable;
   const startChanged =
     pointDistance(startLocalPoint, nextArrow.points[0]) !== 0;
 

packages/element/src/shape.ts

@@ -78,6 +78,18 @@ import type {
 import type { Drawable, Options } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";
 
+// Controls how handle distance scales with chord length.
+// At 1.0 handles are exactly h/3 (standard Hermite). Values below 1 make
+// short segments curvier and long segments more taut (sub-linear scaling).
+const CP_CHORD_POWER = 1;
+
+// At curved knots the C2 spline tangent can be tilted away from the
+// bisector direction, making one side of the knot tight and the other taut.
+// This factor [0, 1] controls how far the tangent direction is pulled toward
+// the bisector (the chord-bisector normal) linearly with turn sharpness.
+// 0 = pure C2 spline; 1 = tangent fully aligned with the bisector.
+const CP_ANGLE_CORRECTION = 1;
+
 export class ShapeCache {
   private static rg = new RoughGenerator();
   private static cache = new WeakMap<
@@ -625,60 +637,144 @@ export const generateLinearCollisionShape = (
         });
       }
 
-      return generator
-        .curve(points as unknown as RoughPoint[], options)
-        .sets[0].ops.slice(0, element.points.length)
-        .map((op, i) => {
-          if (i === 0) {
-            const p = pointRotateRads<GlobalPoint>(
-              pointFrom<GlobalPoint>(
-                element.x + op.data[0],
-                element.y + op.data[1],
-              ),
-              center,
-              element.angle,
-            );
+      // Generate collision ops using the same bisector-based cubic Bézier
+      // algorithm as generateRoundedSimpleArrowShape so hit-testing matches rendering.
+      const rotateLocal = (lx: number, ly: number): LocalPoint => {
+        const g = pointRotateRads<GlobalPoint>(
+          pointFrom<GlobalPoint>(element.x + lx, element.y + ly),
+          center,
+          element.angle,
+        );
+        return pointFrom<LocalPoint>(g[0] - element.x, g[1] - element.y);
+      };
 
-            return {
-              op: "move",
-              data: pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
-            };
-          }
+      const collisionOps: Array<{
+        op: string;
+        data: number[] | LocalPoint;
+      }> = [];
+      collisionOps.push({
+        op: "move",
+        data: rotateLocal(points[0][0], points[0][1]),
+      });
 
-          return {
-            op: "bcurveTo",
-            data: [
-              pointRotateRads(
-                pointFrom<GlobalPoint>(
-                  element.x + op.data[0],
-                  element.y + op.data[1],
-                ),
-                center,
-                element.angle,
-              ),
-              pointRotateRads(
-                pointFrom<GlobalPoint>(
-                  element.x + op.data[2],
-                  element.y + op.data[3],
-                ),
-                center,
-                element.angle,
-              ),
-              pointRotateRads(
-                pointFrom<GlobalPoint>(
-                  element.x + op.data[4],
-                  element.y + op.data[5],
-                ),
-                center,
-                element.angle,
-              ),
-            ]
-              .map((p) =>
-                pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
-              )
-              .flat(),
-          };
+      if (points.length === 2) {
+        collisionOps.push({
+          op: "lineTo",
+          data: rotateLocal(points[1][0], points[1][1]),
         });
+      } else {
+        // Chord-length C2 spline. Mirrors generateRoundedSimpleArrowShape
+        // exactly so hit-testing matches rendering.
+        const n = points.length - 1;
+        const h = new Float64Array(n);
+        for (let i = 0; i < n; i++) {
+          h[i] = Math.max(
+            1e-10,
+            Math.hypot(
+              points[i + 1][0] - points[i][0],
+              points[i + 1][1] - points[i][1],
+            ),
+          );
+        }
+
+        const mx = new Float64Array(n + 1);
+        const my = new Float64Array(n + 1);
+        const diag = new Float64Array(n + 1);
+        const rhsX = new Float64Array(n + 1);
+        const rhsY = new Float64Array(n + 1);
+
+        diag[0] = 2;
+        rhsX[0] = (3 * (points[1][0] - points[0][0])) / h[0];
+        rhsY[0] = (3 * (points[1][1] - points[0][1])) / h[0];
+        for (let i = 1; i < n; i++) {
+          diag[i] = 2 * (h[i - 1] + h[i]);
+          rhsX[i] =
+            3 *
+            ((h[i] * (points[i][0] - points[i - 1][0])) / h[i - 1] +
+              (h[i - 1] * (points[i + 1][0] - points[i][0])) / h[i]);
+          rhsY[i] =
+            3 *
+            ((h[i] * (points[i][1] - points[i - 1][1])) / h[i - 1] +
+              (h[i - 1] * (points[i + 1][1] - points[i][1])) / h[i]);
+        }
+        diag[n] = 2;
+        rhsX[n] = (3 * (points[n][0] - points[n - 1][0])) / h[n - 1];
+        rhsY[n] = (3 * (points[n][1] - points[n - 1][1])) / h[n - 1];
+
+        for (let i = 1; i <= n; i++) {
+          const sub = i < n ? h[i] : 1;
+          const supPrev = i === 1 ? 1 : h[i - 2];
+          const w = sub / diag[i - 1];
+          diag[i] -= w * supPrev;
+          rhsX[i] -= w * rhsX[i - 1];
+          rhsY[i] -= w * rhsY[i - 1];
+        }
+        mx[n] = rhsX[n] / diag[n];
+        my[n] = rhsY[n] / diag[n];
+        for (let i = n - 1; i >= 0; i--) {
+          const sup = i === 0 ? 1 : h[i - 1];
+          mx[i] = (rhsX[i] - sup * mx[i + 1]) / diag[i];
+          my[i] = (rhsY[i] - sup * my[i + 1]) / diag[i];
+        }
+
+        // Normalised tangent directions; handle length scales sub-linearly with chord.
+        const mlen = new Float64Array(n + 1);
+        for (let i = 0; i <= n; i++) {
+          mlen[i] = Math.max(1e-10, Math.hypot(mx[i], my[i]));
+        }
+
+        // At interior knots, blend the C2 tangent direction toward the
+        // bisector direction by a factor proportional to turn sharpness *
+        // CP_ANGLE_CORRECTION
+        for (let k = 1; k < n; k++) {
+          const d1x = (points[k][0] - points[k - 1][0]) / h[k - 1];
+          const d1y = (points[k][1] - points[k - 1][1]) / h[k - 1];
+          const d2x = (points[k + 1][0] - points[k][0]) / h[k];
+          const d2y = (points[k + 1][1] - points[k][1]) / h[k];
+          const dot = d1x * d2x + d1y * d2y;
+          const t = ((1 - dot) / 2) * CP_ANGLE_CORRECTION;
+          if (t < 1e-6) {
+            continue;
+          }
+          const bx = d1x + d2x;
+          const by = d1y + d2y;
+          const blen = Math.hypot(bx, by);
+          if (blen < 1e-10) {
+            continue;
+          }
+          let px = bx / blen;
+          let py = by / blen;
+          const tx = mx[k] / mlen[k];
+          const ty = my[k] / mlen[k];
+          if (tx * px + ty * py < 0) {
+            px = -px;
+            py = -py;
+          }
+          const blendX = tx + t * (px - tx);
+          const blendY = ty + t * (py - ty);
+          const blendLen = Math.max(1e-10, Math.hypot(blendX, blendY));
+          mx[k] = (blendX / blendLen) * mlen[k];
+          my[k] = (blendY / blendLen) * mlen[k];
+        }
+
+        for (let i = 0; i < n; i++) {
+          const cpDist = Math.pow(h[i], CP_CHORD_POWER) / 3;
+          const cp1x = points[i][0] + (mx[i] / mlen[i]) * cpDist;
+          const cp1y = points[i][1] + (my[i] / mlen[i]) * cpDist;
+          const cp2x = points[i + 1][0] - (mx[i + 1] / mlen[i + 1]) * cpDist;
+          const cp2y = points[i + 1][1] - (my[i + 1] / mlen[i + 1]) * cpDist;
+
+          const rcp1 = rotateLocal(cp1x, cp1y);
+          const rcp2 = rotateLocal(cp2x, cp2y);
+          const rend = rotateLocal(points[i + 1][0], points[i + 1][1]);
+
+          collisionOps.push({
+            op: "bcurveTo",
+            data: [rcp1[0], rcp1[1], rcp2[0], rcp2[1], rend[0], rend[1]],
+          });
+        }
+      }
+      return collisionOps;
     }
     case "freedraw": {
       if (element.points.length < 2) {
@@ -920,7 +1016,12 @@ const _generateElementShape = (
           ];
         }
       } else {
-        shape = [generator.curve(points as unknown as RoughPoint[], options)];
+        shape = [
+          generator.path(
+            generateRoundedSimpleArrowShape(points),
+            generateRoughOptions(element, true, isDarkMode),
+          ),
+        ];
       }
 
       // add lines only in arrow
@@ -1004,10 +1105,162 @@ const _generateElementShape = (
   }
 };
 
+const generateRoundedSimpleArrowShape = (
+  points: readonly LocalPoint[],
+): string => {
+  if (points.length < 2) {
+    return "";
+  }
+
+  if (points.length === 2) {
+    return `M ${points[0][0]} ${points[0][1]} L ${points[1][0]} ${points[1][1]}`;
+  }
+
+  // Chord-length parameterised C2 natural cubic spline (Thomas's algorithm).
+  //
+  // Unknowns: tangent vectors m[0..n] at each knot (n = number of segments).
+  // Chord lengths h[i] = |K[i+1] − K[i]| act as the parameter intervals so
+  // that tightly-spaced knots don't over-influence distant ones.
+  //
+  //   Row 0:         2·m₀  +           m₁              = 3·(K₁−K₀)/h₀
+  //   Row i:  h[i]·mᵢ₋₁ + 2·(h[i−1]+h[i])·mᵢ + h[i−1]·mᵢ₊₁
+  //                                   = 3·(h[i]·(Kᵢ−Kᵢ₋₁)/h[i−1]
+  //                                      + h[i−1]·(Kᵢ₊₁−Kᵢ)/h[i])  1≤i≤n−1
+  //   Row n:           mₙ₋₁ +  2·mₙ                    = 3·(Kₙ−Kₙ₋₁)/h[n−1]
+  //
+  // Bézier control points from Hermite→Bézier identity:
+  //   cp1ᵢ = Kᵢ   + mᵢ   · h[i] / 3
+  //   cp2ᵢ = Kᵢ₊₁ − mᵢ₊₁ · h[i] / 3
+  const n = points.length - 1; // number of segments
+  const h = new Float64Array(n);
+  for (let i = 0; i < n; i++) {
+    h[i] = Math.max(
+      1e-10,
+      Math.hypot(
+        points[i + 1][0] - points[i][0],
+        points[i + 1][1] - points[i][1],
+      ),
+    );
+  }
+
+  const mx = new Float64Array(n + 1);
+  const my = new Float64Array(n + 1);
+  const diag = new Float64Array(n + 1);
+  const rhsX = new Float64Array(n + 1);
+  const rhsY = new Float64Array(n + 1);
+
+  // Row 0 – natural BC (zero second derivative at start)
+  diag[0] = 2;
+  rhsX[0] = (3 * (points[1][0] - points[0][0])) / h[0];
+  rhsY[0] = (3 * (points[1][1] - points[0][1])) / h[0];
+
+  // Interior rows
+  for (let i = 1; i < n; i++) {
+    diag[i] = 2 * (h[i - 1] + h[i]);
+    rhsX[i] =
+      3 *
+      ((h[i] * (points[i][0] - points[i - 1][0])) / h[i - 1] +
+        (h[i - 1] * (points[i + 1][0] - points[i][0])) / h[i]);
+    rhsY[i] =
+      3 *
+      ((h[i] * (points[i][1] - points[i - 1][1])) / h[i - 1] +
+        (h[i - 1] * (points[i + 1][1] - points[i][1])) / h[i]);
+  }
+
+  // Row n – natural BC (zero second derivative at end)
+  diag[n] = 2;
+  rhsX[n] = (3 * (points[n][0] - points[n - 1][0])) / h[n - 1];
+  rhsY[n] = (3 * (points[n][1] - points[n - 1][1])) / h[n - 1];
+
+  // Forward sweep
+  // sub[i] = h[i] for i=1..n−1, sub[n] = 1
+  // sup[i] = 1 for i=0, h[i−1] for i=1..n−1  (never modified)
+  for (let i = 1; i <= n; i++) {
+    const sub = i < n ? h[i] : 1;
+    const supPrev = i === 1 ? 1 : h[i - 2];
+    const w = sub / diag[i - 1];
+    diag[i] -= w * supPrev;
+    rhsX[i] -= w * rhsX[i - 1];
+    rhsY[i] -= w * rhsY[i - 1];
+  }
+
+  // Back substitution
+  mx[n] = rhsX[n] / diag[n];
+  my[n] = rhsY[n] / diag[n];
+  for (let i = n - 1; i >= 0; i--) {
+    const sup = i === 0 ? 1 : h[i - 1];
+    mx[i] = (rhsX[i] - sup * mx[i + 1]) / diag[i];
+    my[i] = (rhsY[i] - sup * my[i + 1]) / diag[i];
+  }
+
+  // Normalised tangent directions; handle length scales sub-linearly with chord.
+  const mlen = new Float64Array(n + 1);
+  for (let i = 0; i <= n; i++) {
+    mlen[i] = Math.max(1e-10, Math.hypot(mx[i], my[i]));
+  }
+
+  // At interior knots, blend the C2 tangent direction toward the
+  // perpendicular-to-bisector (the perfectly symmetric tangent) by a factor
+  // proportional to turn sharpness × CP_ANGLE_CORRECTION.
+  // Both cp2 (incoming) and cp1 (outgoing) at the knot share the same adjusted
+  // direction, so collinear (aligned) handles are preserved.
+  for (let k = 1; k < n; k++) {
+    const d1x = (points[k][0] - points[k - 1][0]) / h[k - 1];
+    const d1y = (points[k][1] - points[k - 1][1]) / h[k - 1];
+    const d2x = (points[k + 1][0] - points[k][0]) / h[k];
+    const d2y = (points[k + 1][1] - points[k][1]) / h[k];
+    const dot = d1x * d2x + d1y * d2y;
+    // t: 0 = straight, 1 = hairpin
+    const t = ((1 - dot) / 2) * CP_ANGLE_CORRECTION;
+    if (t < 1e-6) {
+      continue;
+    }
+    // Bisector of the two chord directions as the "normal" at the knot.
+    // Its perpendicular is the ideal symmetric tangent direction.
+    const bx = d1x + d2x;
+    const by = d1y + d2y;
+    const blen = Math.hypot(bx, by);
+    if (blen < 1e-10) {
+      continue; // 180° hairpin – bisector undefined, skip
+    }
+    // Blend target: bisector direction (pick sign aligning with current tangent)
+    let px = bx / blen;
+    let py = by / blen;
+    const tx = mx[k] / mlen[k];
+    const ty = my[k] / mlen[k];
+    if (tx * px + ty * py < 0) {
+      px = -px;
+      py = -py;
+    }
+    // Linear blend of unit directions, then renormalize to preserve magnitude.
+    const blendX = tx + t * (px - tx);
+    const blendY = ty + t * (py - ty);
+    const blendLen = Math.max(1e-10, Math.hypot(blendX, blendY));
+    mx[k] = (blendX / blendLen) * mlen[k];
+    my[k] = (blendY / blendLen) * mlen[k];
+  }
+
+  const path: string[] = [`M ${points[0][0]} ${points[0][1]}`];
+  for (let i = 0; i < n; i++) {
+    const cpDist = Math.pow(h[i], CP_CHORD_POWER) / 3;
+    const cp1x = points[i][0] + (mx[i] / mlen[i]) * cpDist;
+    const cp1y = points[i][1] + (my[i] / mlen[i]) * cpDist;
+    const cp2x = points[i + 1][0] - (mx[i + 1] / mlen[i + 1]) * cpDist;
+    const cp2y = points[i + 1][1] - (my[i + 1] / mlen[i + 1]) * cpDist;
+    path.push(
+      `C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${points[i + 1][0]} ${
+        points[i + 1][1]
+      }`,
+    );
+  }
+
+  return path.join(" ");
+};
+
 const generateElbowArrowShape = (
   points: readonly LocalPoint[],
   radius: number,
-) => {
+): string => {
   const subpoints = [] as [number, number][];
   for (let i = 1; i < points.length - 1; i += 1) {
     const prev = points[i - 1];

packages/element/tests/bounds.test.ts

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

packages/element/tests/collision.test.tsx

@@ -30,7 +30,7 @@ describe("check rotated elements can be hit:", () => {
       ] as LocalPoint[],
     });
     const hit = hitElementItself({
-      point: pointFrom<GlobalPoint>(88, -68),
+      point: pointFrom<GlobalPoint>(90, -70),
       element: window.h.elements[0],
       threshold: 10,
       elementsMap: window.h.scene.getNonDeletedElementsMap(),

packages/element/tests/linearElementEditor.test.tsx

@@ -434,12 +434,12 @@ describe("Test Linear Elements", () => {
       expect(midPointsWithRoundEdge).toMatchInlineSnapshot(`
         [
           [
-            "54.27552",
-            "46.16120",
+            "51.36383",
+            "54.86323",
           ],
           [
-            "76.95494",
-            "44.56052",
+            "81.64884",
+            "43.04575",
           ],
         ]
       `);
@@ -499,12 +499,12 @@ describe("Test Linear Elements", () => {
       expect(newMidPoints).toMatchInlineSnapshot(`
         [
           [
-            "104.27552",
-            "66.16120",
+            "101.36383",
+            "74.86323",
           ],
           [
-            "126.95494",
-            "64.56052",
+            "131.64884",
+            "63.04575",
           ],
         ]
       `);
@@ -707,14 +707,8 @@ describe("Test Linear Elements", () => {
       // This is the expected midpoint for line with round edge
       // hence hardcoding it so if later some bug is introduced
       // this will fail and we can fix it
-      const firstSegmentMidpoint = pointFrom<GlobalPoint>(
-        55.9697848965255,
-        47.442326230998205,
-      );
-      const lastSegmentMidpoint = pointFrom<GlobalPoint>(
-        76.08587175006699,
-        43.294165939653226,
-      );
+      const firstSegmentMidpoint = pointFrom<GlobalPoint>(47.30521, 57.2734);
+      const lastSegmentMidpoint = pointFrom<GlobalPoint>(83.70877, 40.46424);
       let line: ExcalidrawLinearElement;
 
       beforeEach(() => {
@@ -759,16 +753,16 @@ describe("Test Linear Elements", () => {
                 0,
               ],
               [
-                "85.96978",
-                "77.44233",
+                "77.30521",
+                "87.27340",
               ],
               [
                 70,
                 50,
               ],
               [
-                "106.08587",
-                "73.29417",
+                "113.70877",
+                "70.46424",
               ],
               [
                 40,
@@ -815,12 +809,12 @@ describe("Test Linear Elements", () => {
         expect(newMidPoints).toMatchInlineSnapshot(`
           [
             [
-              "29.28349",
-              "20.91105",
+              "22.32088",
+              "37.43003",
             ],
             [
-              "78.86048",
-              "46.12277",
+              "81.55727",
+              "43.21091",
             ],
           ]
         `);
@@ -904,12 +898,12 @@ describe("Test Linear Elements", () => {
         expect(newMidPoints).toMatchInlineSnapshot(`
           [
             [
-              "54.27552",
-              "46.16120",
+              "51.36383",
+              "54.86323",
             ],
             [
-              "76.95494",
-              "44.56052",
+              "81.64884",
+              "43.04575",
             ],
           ]
         `);
@@ -1071,8 +1065,8 @@ describe("Test Linear Elements", () => {
         );
         expect(position).toMatchInlineSnapshot(`
           {
-            "x": "86.17305",
-            "y": "76.11251",
+            "x": "86.53100",
+            "y": "72.83556",
           }
         `);
       });
@@ -1191,8 +1185,8 @@ describe("Test Linear Elements", () => {
           20,
           105,
           80,
-          "55.45894",
-          45,
+          "56.68277",
+          "47.27188",
         ]
       `);
 
@@ -1202,7 +1196,7 @@ describe("Test Linear Elements", () => {
         .toMatchInlineSnapshot(`
           {
             "height": 130,
-            "width": "366.11716",
+            "width": "368.53316",
           }
         `);
 
@@ -1214,7 +1208,7 @@ describe("Test Linear Elements", () => {
         ),
       ).toMatchInlineSnapshot(`
         {
-          "x": "271.11716",
+          "x": "273.53316",
           "y": 45,
         }
       `);
@@ -1231,10 +1225,10 @@ describe("Test Linear Elements", () => {
         [
           20,
           35,
-          "501.11716",
-          95,
-          "205.45894",
-          "52.50000",
+          "503.53316",
+          "119.02540",
+          "204.47758",
+          "77.01270",
         ]
       `);
     });

packages/excalidraw/components/App.tsx

@@ -8618,16 +8618,13 @@ class App extends React.Component<AppProps, AppState> {
           ) as any;
 
           if (arrow && isBindingElement(arrow)) {
-            const {
-              hitFocusPoint,
-              pointerOffset,
-              arrowOtherEndpointInitialBinding,
-            } = handleFocusPointPointerDown(
-              arrow,
-              pointerDownState,
-              elementsMap,
-              this.state,
-            );
+            const { hitFocusPoint, pointerOffset } =
+              handleFocusPointPointerDown(
+                arrow,
+                pointerDownState,
+                elementsMap,
+                this.state,
+              );
 
             // If focus point is hit, update state and prevent element selection
             if (hitFocusPoint) {
@@ -8637,10 +8634,6 @@ class App extends React.Component<AppProps, AppState> {
                   hoveredFocusPointBinding: hitFocusPoint,
                   draggedFocusPointBinding: hitFocusPoint,
                   pointerOffset,
-                  initialState: {
-                    ...linearElementEditor.initialState,
-                    arrowOtherEndpointInitialBinding,
-                  },
                 },
               });
               return false;
@@ -10763,19 +10756,14 @@ class App extends React.Component<AppProps, AppState> {
         }
 
         if (this.state.selectedLinearElement.draggedFocusPointBinding) {
-          const { arrowOtherEndpointInitialBinding } =
-            handleFocusPointPointerUp(
-              this.state.selectedLinearElement,
-              this.scene,
-            );
+          handleFocusPointPointerUp(
+            this.state.selectedLinearElement,
+            this.scene,
+          );
           this.setState({
             selectedLinearElement: {
               ...this.state.selectedLinearElement,
               draggedFocusPointBinding: null,
-              initialState: {
-                ...this.state.selectedLinearElement.initialState,
-                arrowOtherEndpointInitialBinding,
-              },
             },
           });
         } else if (

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

@@ -8665,7 +8665,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
-      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,
@@ -8899,7 +8898,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
-      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,
@@ -9323,7 +9321,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
-      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,
@@ -9737,7 +9734,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
-      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,

packages/utils/src/shape.ts

@@ -196,7 +196,7 @@ export const getEllipseShape = <Point extends GlobalPoint | LocalPoint>(
 
 export const getCurvePathOps = (shape: Drawable): Op[] => {
   // NOTE (mtolmacs): Temporary fix for extremely large elements
-  if (!shape) {
+  if (!shape || shape.sets.length === 0) {
     return [];
   }
 
@@ -316,26 +316,29 @@ export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
     };
   }
 
-  const ops = getCurvePathOps(roughShape);
+  // Prefer the fillPath set
+  const fillPathSet = roughShape.sets.find((s) => s.type === "fillPath");
+  const ops = fillPathSet ? fillPathSet.ops : getCurvePathOps(roughShape);
 
   const points: Point[] = [];
   let odd = false;
   for (const operation of ops) {
     if (operation.op === "move") {
-      odd = !odd;
-      if (odd) {
+      if (fillPathSet) {
+        // fillPath is always a single run, no odd/even skipping needed
         points.push(pointFrom(operation.data[0], operation.data[1]));
+      } else {
+        odd = !odd;
+        if (odd) {
+          points.push(pointFrom(operation.data[0], operation.data[1]));
+        }
       }
     } else if (operation.op === "bcurveTo") {
-      if (odd) {
+      if (fillPathSet || odd) {
         points.push(pointFrom(operation.data[0], operation.data[1]));
         points.push(pointFrom(operation.data[2], operation.data[3]));
         points.push(pointFrom(operation.data[4], operation.data[5]));
       }
-    } else if (operation.op === "lineTo") {
-      if (odd) {
-        points.push(pointFrom(operation.data[0], operation.data[1]));
-      }
     }
   }