fix: Arrowheads

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

packages/element/src/bounds.ts

@@ -789,27 +789,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
+  // We know the last point of the arrow (or the first, if start arrowhead).
-  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).
   const [x2, y2] = position === "start" ? p0 : p3;
 
-  // By using cubic bezier equation (B(t)) and the given parameters,
+  // Use the analytic tangent at the Bézier endpoint for a precise arrowhead
-  // we calculate a point that is closer to the last point.
+  // direction. For a cubic Bézier B(t) with control points p0p3:
-  // The value 0.3 is chosen arbitrarily and it works best for all
+  //   B'(1): (p3 − p2) tangent at the end
-  // the tested cases.
+  //   B'(0): (p1 − p0) for start arrowhead, arrow points away: (p0 − p1)
-  const [x1, y1] = [equation(0.3, 0), equation(0.3, 1)];
+  let dx: number;
-
+  let dy: number;
-  // Find the normalized direction vector based on the
+  if (position === "end") {
-  // previously calculated points.
+    dx = p3[0] - p2[0];
-  const distance = Math.hypot(x2 - x1, y2 - y1);
+    dy = p3[1] - p2[1];
-  const nx = (x2 - x1) / distance;
+    if (Math.hypot(dx, dy) < 1e-6) {
-  const ny = (y2 - y1) / distance;
+      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);
 

packages/utils/src/shape.ts

@@ -317,26 +317,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 (fillPathSet) {
-      if (odd) {
+        // 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]));
-      }
     }
   }