fix: Arrow eraser precision arrow selection (#10006)

packages/element/src/bounds.ts

@@ -42,6 +42,7 @@ import {
   isBoundToContainer,
   isFreeDrawElement,
   isLinearElement,
+  isLineElement,
   isTextElement,
 } from "./typeChecks";
 
@@ -321,11 +322,19 @@ export const getElementLineSegments = (
 
   if (shape.type === "polycurve") {
     const curves = shape.data;
-    const points = curves
+    const pointsOnCurves = curves.map((curve) =>
-      .map((curve) => pointsOnBezierCurves(curve, 10))
+      pointsOnBezierCurves(curve, 10),
-      .flat();
+    );
-    let i = 0;
+
     const segments: LineSegment<GlobalPoint>[] = [];
+
+    if (
+      (isLineElement(element) && !element.polygon) ||
+      isArrowElement(element)
+    ) {
+      for (const points of pointsOnCurves) {
+        let i = 0;
+
         while (i < points.length - 1) {
           segments.push(
             lineSegment(
@@ -335,6 +344,21 @@ export const getElementLineSegments = (
           );
           i++;
         }
+      }
+    } else {
+      const points = pointsOnCurves.flat();
+      let i = 0;
+
+      while (i < points.length - 1) {
+        segments.push(
+          lineSegment(
+            pointFrom(points[i][0], points[i][1]),
+            pointFrom(points[i + 1][0], points[i + 1][1]),
+          ),
+        );
+        i++;
+      }
+    }
 
     return segments;
   } else if (shape.type === "polyline") {

packages/excalidraw/eraser/index.ts

@@ -2,10 +2,10 @@ import { arrayToMap, easeOut, THEME } from "@excalidraw/common";
 
 import {
   computeBoundTextPosition,
-  distanceToElement,
   doBoundsIntersect,
   getBoundTextElement,
   getElementBounds,
+  getElementLineSegments,
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints,
   intersectElementWithLineSegment,
@@ -265,19 +265,28 @@ const eraserTest = (
     }
 
     return false;
-  } else if (
+  }
-    isArrowElement(element) ||
+
-    (isLineElement(element) && !element.polygon)
+  const boundTextElement = getBoundTextElement(element, elementsMap);
-  ) {
+
+  if (isArrowElement(element) || (isLineElement(element) && !element.polygon)) {
     const tolerance = Math.max(
       element.strokeWidth,
       (element.strokeWidth * 2) / zoom,
     );
 
-    return distanceToElement(element, elementsMap, lastPoint) <= tolerance;
+    // If the eraser movement is so fast that a large distance is covered
+    // between the last two points, the distanceToElement miss, so we test
+    // agaist each segment of the linear element
+    const segments = getElementLineSegments(element, elementsMap);
+    for (const seg of segments) {
+      if (lineSegmentsDistance(seg, pathSegment) <= tolerance) {
+        return true;
+      }
     }
 
-  const boundTextElement = getBoundTextElement(element, elementsMap);
+    return false;
+  }
 
   return (
     intersectElementWithLineSegment(element, elementsMap, pathSegment, 0, true)