Refactor path subdivision to use cubic segments

Updated path subdivision logic to generate cubic Bezier segments instead of lines, improving curve accuracy and handle placement. Refactored related utility functions and updated SVG interpreter tests to reflect new vertex structure and control points.

Author: jonobr1

src/path.js

@@ -34,9 +34,10 @@ import {
 } from './utils/hit-test.js';
 import {
   clearHandleComponent,
+  setHandleComponent,
   inheritRelative,
   isSegmentCurved,
-  setSubdivisionHandles,
+  splitSubdivisionSegment,
   applyGlobalSmooth,
   applyLocalSmooth,
 } from './utils/path.js';
@@ -1202,26 +1203,74 @@ export class Path extends Shape {
       }
 
       const isCurve = isSegmentCurved(currentOriginal, prevOriginal);
-      const subdivided = getSubdivisions(currentOriginal, prevOriginal, limit);
-      const steps = subdivided.length;
-
-      for (let j = 1; j < steps; j += 1) {
-        const anchor = subdivided[j];
-        inheritRelative(anchor, prevOriginal);
-        if (isCurve) {
-          const t = steps ? j / steps : 0;
-          setSubdivisionHandles(anchor, prevOriginal, currentOriginal, t);
-          anchor.command = Commands.curve;
+
+      if (isCurve) {
+        const subdivided = getSubdivisions(currentOriginal, prevOriginal, limit);
+        const steps = subdivided.length;
+        const prevClone = points[points.length - 1];
+        let startSegment = prevClone.clone();
+        let endSegment = currentOriginal.clone();
+        let prevCloneRef = prevClone;
+        let prevT = 0;
+
+        if (steps <= 1) {
+          const currentClone = currentOriginal.clone();
+          points.push(currentClone);
         } else {
+          for (let j = 1; j < steps; j += 1) {
+            const globalT = j / steps;
+            const denom = 1 - prevT;
+            const localT =
+              denom <= Number.EPSILON ? globalT : (globalT - prevT) / denom;
+
+            const split = splitSubdivisionSegment(
+              startSegment,
+              endSegment,
+              localT
+            );
+
+            setHandleComponent(
+              prevCloneRef,
+              'right',
+              split.startOut.x - prevCloneRef.x,
+              split.startOut.y - prevCloneRef.y
+            );
+
+            const newAnchor = split.anchor;
+            points.push(newAnchor);
+
+            prevCloneRef = newAnchor;
+            startSegment = newAnchor.clone();
+            prevT = globalT;
+
+            setHandleComponent(
+              endSegment,
+              'left',
+              split.endIn.x - endSegment.x,
+              split.endIn.y - endSegment.y
+            );
+          }
+
+          const currentClone = currentOriginal.clone();
+          currentClone.controls.left.copy(endSegment.controls.left);
+          points.push(currentClone);
+        }
+      } else {
+        const subdivided = getSubdivisions(currentOriginal, prevOriginal, limit);
+
+        for (let j = 1; j < subdivided.length; j += 1) {
+          const anchor = subdivided[j];
+          inheritRelative(anchor, prevOriginal);
           clearHandleComponent(anchor, 'left');
           clearHandleComponent(anchor, 'right');
           anchor.command = Commands.line;
+          points.push(anchor);
         }
-        points.push(anchor);
+
+        const currentClone = currentOriginal.clone();
+        points.push(currentClone);
       }
 
-      const currentClone = currentOriginal.clone();
-      points.push(currentClone);
       prevOriginal = currentOriginal;
 
       if (currentOriginal.command === Commands.close) {

src/utils/path.js

@@ -2,6 +2,7 @@ import { lerp, mod } from './math.js';
 import { Commands } from './path-commands.js';
 
 import { Vector } from '../vector.js';
+import { Anchor } from '../anchor.js';
 
 const EPSILON = Number.EPSILON;
 
@@ -84,50 +85,53 @@ function isSegmentCurved(a, b) {
   );
 }
 
-function setSubdivisionHandles(anchor, start, end, t) {
-  const right = start.controls && start.controls.right;
-  const left = end.controls && end.controls.left;
+function lerpPoint(a, b, t) {
+  return {
+    x: lerp(a.x, b.x, t),
+    y: lerp(a.y, b.y, t),
+  };
+}
 
-  let x1 = start.x;
-  let y1 = start.y;
-  let x2 = (right || start).x;
-  let y2 = (right || start).y;
-  let x3 = (left || end).x;
-  let y3 = (left || end).y;
-  let x4 = end.x;
-  let y4 = end.y;
-
-  if (right && isRelativeAnchor(start)) {
-    x2 += start.x;
-    y2 += start.y;
+function getAbsoluteHandle(anchor, side) {
+  const controls = anchor.controls && anchor.controls[side];
+  if (!controls) {
+    return { x: anchor.x, y: anchor.y };
   }
-
-  if (left && isRelativeAnchor(end)) {
-    x3 += end.x;
-    y3 += end.y;
+  if (isRelativeAnchor(anchor)) {
+    return { x: anchor.x + controls.x, y: anchor.y + controls.y };
   }
+  return { x: controls.x, y: controls.y };
+}
+
+function splitSubdivisionSegment(start, end, t) {
+  const right = start.controls && start.controls.right;
+  const left = end.controls && end.controls.left;
 
-  const t1x = lerp(x1, x2, t);
-  const t1y = lerp(y1, y2, t);
-  const t2x = lerp(x2, x3, t);
-  const t2y = lerp(y2, y3, t);
-  const t3x = lerp(x3, x4, t);
-  const t3y = lerp(y3, y4, t);
+  const p0 = { x: start.x, y: start.y };
+  const p1 = right ? getAbsoluteHandle(start, 'right') : { ...p0 };
+  const p3 = { x: end.x, y: end.y };
+  const p2 = left ? getAbsoluteHandle(end, 'left') : { ...p3 };
 
-  const brx = lerp(t1x, t2x, t);
-  const bry = lerp(t1y, t2y, t);
-  const alx = lerp(t2x, t3x, t);
-  const aly = lerp(t2y, t3y, t);
-  const px = lerp(brx, alx, t);
-  const py = lerp(bry, aly, t);
+  const q0 = lerpPoint(p0, p1, t);
+  const q1 = lerpPoint(p1, p2, t);
+  const q2 = lerpPoint(p2, p3, t);
 
-  anchor.x = px;
-  anchor.y = py;
+  const r0 = lerpPoint(q0, q1, t);
+  const r1 = lerpPoint(q1, q2, t);
 
+  const point = lerpPoint(r0, r1, t);
+
+  const anchor = new Anchor(point.x, point.y);
   inheritRelative(anchor, start);
+  setHandleComponent(anchor, 'left', r0.x - point.x, r0.y - point.y);
+  setHandleComponent(anchor, 'right', r1.x - point.x, r1.y - point.y);
+  anchor.command = Commands.curve;
 
-  setHandleComponent(anchor, 'left', brx - px, bry - py);
-  setHandleComponent(anchor, 'right', alx - px, aly - py);
+  return {
+    anchor,
+    startOut: q0,
+    endIn: q2,
+  };
 }
 
 function applyGlobalSmooth(vertices, from, to, closed, loop, asymmetric) {
@@ -332,7 +336,7 @@ export {
   updateAnchorCommand,
   inheritRelative,
   isSegmentCurved,
-  setSubdivisionHandles,
+  splitSubdivisionSegment,
   applyGlobalSmooth,
   applyLocalSmooth,
 };