Merge pull request #84 from armano2/fix/handle-zero-radi-arcs

fix(math): handle zero radius arcs by converting to "lines"

Author: NaridaL

src/mathUtils.ts

@@ -38,6 +38,16 @@ export function annotateArcCommand(c: CommandA, x1: number, y1: number) {
   let { rX, rY } = c;
   const { x, y } = c;
 
+  if (Math.abs(rX) < 1e-10 || Math.abs(rY) < 1e-10) {
+    c.rX = 0;
+    c.rY = 0;
+    c.cX = (x1 + x) / 2;
+    c.cY = (y1 + y) / 2;
+    c.phi1 = 0;
+    c.phi2 = 0;
+    return;
+  }
+
   rX = Math.abs(c.rX);
   rY = Math.abs(c.rY);
   const [x1_, y1_] = rotate([(x1 - x) / 2, (y1 - y) / 2], (-c.xRot / 180) * PI);
@@ -130,6 +140,9 @@ export function arcAt(c: number, x1: number, x2: number, phiDeg: number) {
 
 export function bezierRoot(x0: number, x1: number, x2: number, x3: number) {
   const EPS = 1e-6;
+  // Coefficients for the derivative of a cubic Bezier curve
+  // B'(t) = 3(1-t)²(P₁-P₀) + 6(1-t)t(P₂-P₁) + 3t²(P₃-P₂)
+  // When rearranged to at² + bt + c:
   const x01 = x1 - x0;
   const x12 = x2 - x1;
   const x23 = x3 - x2;
@@ -139,8 +152,8 @@ export function bezierRoot(x0: number, x1: number, x2: number, x3: number) {
   // solve a * t² + b * t + c = 0
 
   if (Math.abs(a) < EPS) {
-    // equivalent to b * t + c =>
-    return [-c / b];
+    // For near-zero a, it becomes a linear equation: b * t + c = 0
+    return Math.abs(b) < EPS ? [] : [-c / b];
   }
   return pqFormula(b / a, c / a, EPS);
 }
@@ -152,7 +165,10 @@ export function bezierAt(
   x3: number,
   t: number,
 ) {
-  // console.log(x0, y0, x1, y1, x2, y2, x3, y3, t)
+  // Calculates a point on a cubic Bezier curve at parameter t.
+  // B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃
+  // Which is equivalent to:
+  // B(t) = (s³)P₀ + (3s²t)P₁ + (3st²)P₂ + (t³)P₃  where s = 1-t
   const s = 1 - t;
   const c0 = s * s * s;
   const c1 = 3 * s * s * t;
@@ -181,6 +197,22 @@ export function a2c(arc: CommandA, x0: number, y0: number): CommandC[] {
     annotateArcCommand(arc, x0, y0);
   }
 
+  // Handle zero radius case - convert to a straight line represented as a curve
+  if (Math.abs(arc.rX) < 1e-10 || Math.abs(arc.rY) < 1e-10) {
+    return [
+      {
+        relative: arc.relative,
+        type: SVGPathData.CURVE_TO,
+        x1: x0 + (arc.x - x0) / 3,
+        y1: y0 + (arc.y - y0) / 3,
+        x2: x0 + (2 * (arc.x - x0)) / 3,
+        y2: y0 + (2 * (arc.y - y0)) / 3,
+        x: arc.x,
+        y: arc.y,
+      },
+    ];
+  }
+
   const phiMin = Math.min(arc.phi1!, arc.phi2!),
     phiMax = Math.max(arc.phi1!, arc.phi2!),
     deltaPhi = phiMax - phiMin;

src/tests/arctocurve.test.ts

@@ -6,59 +6,65 @@ import { SVGPathData } from '../index.js';
 // Here we have to round output before testing since there is some lil
 // differences across browsers.
 
+function testArcToCurve(input: string) {
+  return new SVGPathData(input).aToC().round().encode();
+}
+
 describe('Converting elliptical arc commands to curves', () => {
   test('should work sweepFlag on 0 and largeArcFlag on 0', () => {
     expect(
-      new SVGPathData('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z')
-        .aToC()
-        .round()
-        .encode(),
+      testArcToCurve('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z'),
     ).toEqual(
       'M80 80C80 104.8528137423857 100.1471862576143 125 125 125L125 80z',
     );
   });
 
   test('should work sweepFlag on 1 and largeArcFlag on 0', () => {
     expect(
-      new SVGPathData('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z')
-        .aToC()
-        .round()
-        .encode(),
+      testArcToCurve('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z'),
     ).toEqual(
       'M230 80C205.1471862576143 80 185 100.1471862576143 185 125C185 149.8528137423857 205.1471862576143 170 230 170C254.8528137423857 170 275 149.8528137423857 275 125L275 80z',
     );
   });
 
   test('should work sweepFlag on 0 and largeArcFlag on 1', () => {
     expect(
-      new SVGPathData('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z')
-        .aToC()
-        .round()
-        .encode(),
+      testArcToCurve('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z'),
     ).toEqual(
       'M80 230C104.8528137423857 230 125 250.1471862576143 125 275L125 230z',
     );
   });
 
   test('should work sweepFlag on 1 and largeArcFlag on 1', () => {
     expect(
-      new SVGPathData('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z')
-        .aToC()
-        .round()
-        .encode(),
+      testArcToCurve('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z'),
     ).toEqual(
       'M230 230C230 205.1471862576143 250.1471862576143 185 275 185C299.8528137423857 185 320 205.1471862576143 320 230C320 254.8528137423857 299.8528137423857 275 275 275L275 230z',
     );
   });
 
   test('should work sweepFlag on 0 and largeArcFlag on 0 with relative arc', () => {
     expect(
-      new SVGPathData('M80 80 a 45 45, 0, 0, 0, 125 125 L 125 80 Z')
-        .aToC()
-        .round()
-        .encode(),
+      testArcToCurve('M80 80 a 45 45, 0, 0, 0, 125 125 L 125 80 Z'),
     ).toEqual(
       'M80 80c-34.5177968644246 34.5177968644246 -34.5177968644246 90.4822031355754 0 125c34.5177968644246 34.5177968644246 90.4822031355754 34.5177968644246 125 0L125 80z',
     );
   });
+
+  test('should handle zero radius arcs by converting to lines', () => {
+    // Zero y-radius
+    expect(testArcToCurve('M0 0A80 0 0 0 0 125 125')).toEqual(
+      'M0 0C41.6666666666667 41.6666666666667 83.3333333333333 83.3333333333333 125 125',
+    );
+
+    // Zero x-radius
+    expect(testArcToCurve('M0 0A0 80 0 0 0 125 125')).toEqual(
+      'M0 0C41.6666666666667 41.6666666666667 83.3333333333333 83.3333333333333 125 125',
+    );
+
+    // Both x and y radius zero
+    expect(testArcToCurve('M0 0A0 0 0 0 0 125 125')).toEqual(
+      'M0 0C41.6666666666667 41.6666666666667 83.3333333333333 83.3333333333333 125 125',
+    );
+  });
 });