fix: Mid-point for rounded linears are not precisely centered (#9544)

packages/element/src/linearElementEditor.ts

@@ -7,6 +7,8 @@ import {
   type LocalPoint,
   pointDistance,
   vectorFromPoint,
+  curveLength,
+  curvePointAtLength,
 } from "@excalidraw/math";
 
 import { getCurvePathOps } from "@excalidraw/utils/shape";
@@ -20,7 +22,11 @@ import {
   tupleToCoors,
 } from "@excalidraw/common";
 
-import type { Store } from "@excalidraw/element";
+import {
+  deconstructLinearOrFreeDrawElement,
+  isPathALoop,
+  type Store,
+} from "@excalidraw/element";
 
 import type { Radians } from "@excalidraw/math";
 
@@ -55,16 +61,7 @@ import {
   isFixedPointBinding,
 } from "./typeChecks";
 
-import { ShapeCache } from "./ShapeCache";
-
-import {
-  isPathALoop,
-  getBezierCurveLength,
-  getControlPointsForBezierCurve,
-  mapIntervalToBezierT,
-  getBezierXY,
-  toggleLinePolygonState,
-} from "./shapes";
+import { ShapeCache, toggleLinePolygonState } from "./shape";
 
 import { getLockedLinearCursorAlignSize } from "./sizeHelpers";
 
@@ -629,10 +626,7 @@ export class LinearElementEditor {
       }
       const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
         element,
-        points[index],
-        points[index + 1],
         index + 1,
-        elementsMap,
       );
       midpoints.push(segmentMidPoint);
       index++;
@@ -734,7 +728,18 @@ export class LinearElementEditor {
 
     let distance = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      distance = getBezierCurveLength(element, endPoint);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+
+      invariant(
+        lines.length === 0 && curves.length > 0,
+        "Only linears built out of curves are supported",
+      );
+      invariant(
+        lines.length + curves.length >= index,
+        "Invalid segment index while calculating mid point",
+      );
+
+      distance = curveLength<GlobalPoint>(curves[index]);
     }
 
     return distance * zoom.value < LinearElementEditor.POINT_HANDLE_SIZE * 4;
@@ -742,39 +747,42 @@ export class LinearElementEditor {
 
   static getSegmentMidPoint(
     element: NonDeleted<ExcalidrawLinearElement>,
-    startPoint: GlobalPoint,
-    endPoint: GlobalPoint,
-    endPointIndex: number,
-    elementsMap: ElementsMap,
+    index: number,
   ): GlobalPoint {
-    let segmentMidPoint = pointCenter(startPoint, endPoint);
-    if (element.points.length > 2 && element.roundness) {
-      const controlPoints = getControlPointsForBezierCurve(
-        element,
-        element.points[endPointIndex],
+    if (isElbowArrow(element)) {
+      invariant(
+        element.points.length >= index,
+        "Invalid segment index while calculating elbow arrow mid point",
       );
-      if (controlPoints) {
-        const t = mapIntervalToBezierT(
-          element,
-          element.points[endPointIndex],
-          0.5,
-        );
 
-        segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(
-          element,
-          getBezierXY(
-            controlPoints[0],
-            controlPoints[1],
-            controlPoints[2],
-            controlPoints[3],
-            t,
-          ),
-          elementsMap,
-        );
-      }
+      const p = pointCenter(element.points[index - 1], element.points[index]);
+
+      return pointFrom<GlobalPoint>(element.x + p[0], element.y + p[1]);
     }
 
-    return segmentMidPoint;
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+
+    invariant(
+      (lines.length === 0 && curves.length > 0) ||
+        (lines.length > 0 && curves.length === 0),
+      "Only linears built out of either segments or curves are supported",
+    );
+    invariant(
+      lines.length + curves.length >= index,
+      "Invalid segment index while calculating mid point",
+    );
+
+    if (lines.length) {
+      const segment = lines[index - 1];
+      return pointCenter(segment[0], segment[1]);
+    }
+
+    if (curves.length) {
+      const segment = curves[index - 1];
+      return curvePointAtLength(segment, 0.5);
+    }
+
+    invariant(false, "Invalid segment type while calculating mid point");
   }
 
   static getSegmentMidPointIndex(
@@ -1670,10 +1678,7 @@ export class LinearElementEditor {
       const index = element.points.length / 2 - 1;
       const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
         element,
-        points[index],
-        points[index + 1],
         index + 1,
-        elementsMap,
       );
 
       x = midSegmentMidpoint[0] - boundTextElement.width / 2;