Adaptive segment unification

packages/element/src/elbowArrow.ts

@@ -107,7 +107,10 @@ type ElbowArrowData = {
   hoveredEndElement: ExcalidrawBindableElement | null;
 };
 
-const DEDUP_TRESHOLD = 1;
+const calculateDedupTreshhold = <Point extends GlobalPoint | LocalPoint>(
+  a: Point,
+  b: Point,
+) => 1 + pointDistance(a, b) / 100;
 
 const calculatePadding = (
   aabb: Bounds,
@@ -117,8 +120,8 @@ const calculatePadding = (
   const width = aabb[2] - aabb[0];
   const height = aabb[3] - aabb[1];
   const size = Math.max(width, height);
-  // || compareHeading(startHeading, flipHeading(endHeading))
+
-  return size > 55
+  return size > 75
     ? 40
     : Math.min(
         Math.max(
@@ -207,7 +210,11 @@ const handleSegmentRenormalization = (
 
       if (
         // Remove segments that are too short
-        pointDistance(points[i - 2], points[i - 1]) < DEDUP_TRESHOLD
+        pointDistance(points[i - 2], points[i - 1]) <
+        calculateDedupTreshhold(
+          points[i - 3] ?? points[i - 3],
+          points[i] ?? points[i - 1],
+        )
       ) {
         const prevPrevSegmentIdx =
           nextFixedSegments?.findIndex((segment) => segment.index === i - 2) ??
@@ -2228,7 +2235,10 @@ const removeElbowArrowShortSegments = (
 
       const prev = points[idx - 1];
       const prevDist = pointDistance(prev, p);
-      return prevDist > DEDUP_TRESHOLD;
+      return (
+        prevDist >
+        calculateDedupTreshhold(points[idx - 2] ?? prev, points[idx + 1] ?? p)
+      );
     });
   }
 
@@ -2333,13 +2343,16 @@ const gridAddressesEqual = (a: GridAddress, b: GridAddress): boolean =>
 
 export const validateElbowPoints = <P extends GlobalPoint | LocalPoint>(
   points: readonly P[],
-  tolerance: number = DEDUP_TRESHOLD,
+  tolerance?: number,
 ) =>
   points
     .slice(1)
-    .map(
+    .map((p, i) => {
-      (p, i) =>
+      const t =
-        Math.abs(p[0] - points[i][0]) < tolerance ||
+        tolerance ??
-        Math.abs(p[1] - points[i][1]) < tolerance,
+        calculateDedupTreshhold(points[i - 1] ?? points[i], points[i + 2] ?? p);
-    )
+      return (
+        Math.abs(p[0] - points[i][0]) < t || Math.abs(p[1] - points[i][1]) < t
+      );
+    })
     .every(Boolean);

packages/element/tests/elbowArrow.test.tsx

@@ -294,11 +294,11 @@ describe("elbow arrow ui", () => {
     ) as HTMLInputElement;
     UI.updateInput(inputAngle, String("40"));
 
-    expect(arrow.points.map((point) => point.map(Math.round))).toEqual([
+    expect(arrow.points).toCloselyEqualPoints([
       [0, 0],
-      [34, 0],
+      [34.9292, 0],
-      [34, 165],
+      [34.48768, 164.6246],
-      [104, 165],
+      [104.333, 164.6246],
     ]);
   });