modern-path2d 1.6.1 → 1.8.0

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import earcut from 'earcut';
+import polygonClipping from 'polygon-clipping';
 
 function drawPoint(ctx, x, y, options = {}) {
   const { radius = 1 } = options;
@@ -120,7 +121,10 @@ class Vector2 {
     return this.set(this._x * x, this._y * y);
   }
   divide(x = 0, y = x) {
-    return this.set(this._x / x, this._y / y);
+    return this.set(
+      x === 0 ? this._x : this._x / x,
+      y === 0 ? this._y : this._y / y
+    );
   }
   cross(p) {
     return this._x * p.y - this._y * p.x;
@@ -294,6 +298,63 @@ class BoundingBox {
   }
 }
 
+function flatRingToPairs(r) {
+  const ring = [];
+  for (let i = 0; i < r.length; i += 2) {
+    ring.push([r[i], r[i + 1]]);
+  }
+  const first = ring[0];
+  const last = ring[ring.length - 1];
+  if (first && last && (first[0] !== last[0] || first[1] !== last[1])) {
+    ring.push([first[0], first[1]]);
+  }
+  return ring;
+}
+function ringsToGeom(rings) {
+  const valid = rings.filter((r) => r.length >= 6).map(flatRingToPairs);
+  if (!valid.length) {
+    return [];
+  }
+  let geom = [[valid[0]]];
+  for (let i = 1; i < valid.length; i++) {
+    geom = polygonClipping.xor(geom, [[valid[i]]]);
+  }
+  return geom;
+}
+function geomToRings(geom) {
+  const out = [];
+  for (const poly of geom) {
+    for (const ring of poly) {
+      const flat = [];
+      for (const [x, y] of ring) {
+        flat.push(x, y);
+      }
+      out.push(flat);
+    }
+  }
+  return out;
+}
+function polygonBoolean(op, ringsA, ringsB) {
+  const a = ringsToGeom(ringsA);
+  const b = ringsToGeom(ringsB);
+  let res;
+  switch (op) {
+    case "union":
+      res = polygonClipping.union(a, b);
+      break;
+    case "intersection":
+      res = polygonClipping.intersection(a, b);
+      break;
+    case "difference":
+      res = polygonClipping.difference(a, b);
+      break;
+    case "xor":
+      res = polygonClipping.xor(a, b);
+      break;
+  }
+  return geomToRings(res);
+}
+
 function catmullRom(t, p0, p1, p2, p3) {
   const v0 = (p2 - p0) * 0.5;
   const v1 = (p3 - p1) * 0.5;
@@ -313,17 +374,11 @@ function getIntersectionPoint(p1, p2, q1, q2) {
   const q1p1 = q1.clone().sub(p1);
   const crossRS = r.cross(s);
   if (crossRS === 0) {
-    return new Vector2(
-      (p1.x + q1.x) / 2,
-      (p1.y + q1.y) / 2
-    );
+    return null;
   }
   const t = q1p1.cross(s) / crossRS;
   if (Math.abs(t) > 1) {
-    return new Vector2(
-      (p1.x + q1.x) / 2,
-      (p1.y + q1.y) / 2
-    );
+    return null;
   }
   return new Vector2(
     p1.x + t * r.x,
@@ -615,11 +670,16 @@ function distance(p1, p2) {
   const dy = p2[1] - p1[1];
   return Math.sqrt(dx * dx + dy * dy);
 }
+function aabbIntersects(a, b) {
+  return a.minX <= b.maxX && a.maxX >= b.minX && a.minY <= b.maxY && a.maxY >= b.minY;
+}
 function nonzeroFillRule(paths) {
   const results = paths.map((_, i) => ({ index: i }));
-  const testPointsGroups = paths.map((path) => {
+  const bboxes = [];
+  const testPointsGroups = paths.map((path, pathIndex) => {
     const len = path.length;
     if (!len) {
+      bboxes[pathIndex] = null;
       return [];
     }
     let xMinYAuto = [Number.MAX_SAFE_INTEGER, 0];
@@ -642,6 +702,12 @@ function nonzeroFillRule(paths) {
         xAutoYMax = [x, y];
       }
     }
+    bboxes[pathIndex] = {
+      minX: xMinYAuto[0],
+      minY: xAutoYMin[1],
+      maxX: xMaxYAuto[0],
+      maxY: xAutoYMax[1]
+    };
     const mid = [
       (xMinYAuto[0] + xMaxYAuto[0]) / 2,
       (xAutoYMin[1] + xAutoYMax[1]) / 2
@@ -690,9 +756,14 @@ function nonzeroFillRule(paths) {
   for (let i = 0, len = paths.length; i < len; i++) {
     const _results = [];
     const testPoints = testPointsGroups[i];
+    const boxI = bboxes[i];
     for (let j = 0; j < len; j++) {
       if (i === j)
         continue;
+      const boxJ = bboxes[j];
+      if (!boxI || !boxJ || !aabbIntersects(boxI, boxJ)) {
+        continue;
+      }
       const wnMap = {};
       const wnList = [];
       for (let p = 0, pLen = testPoints.length; p < pLen; p++) {
@@ -848,22 +919,35 @@ function quadraticBezier(t, p0, p1, p2) {
   return quadraticBezierP0(t, p0) + quadraticBezierP1(t, p1) + quadraticBezierP2(t, p2);
 }
 
+function resolveLineJoin(join) {
+  switch (join) {
+    case "round":
+    case "bevel":
+    case "miter":
+      return join;
+    default:
+      return "miter";
+  }
+}
+function resolveLineStyle(style) {
+  return {
+    width: style?.strokeWidth ?? 1,
+    alignment: 0.5,
+    join: resolveLineJoin(style?.strokeLinejoin),
+    cap: style?.strokeLinecap ?? "butt",
+    miterLimit: style?.strokeMiterlimit ?? 10
+  };
+}
 const closePointEps = 1e-4;
 const curveEps = 1e-4;
 function strokeTriangulate(points, options = {}) {
   const {
     vertices = [],
     indices = [],
-    lineStyle = {
-      alignment: 0.5,
-      cap: "butt",
-      join: "miter",
-      width: 1,
-      miterLimit: 10
-    },
     flipAlignment = false,
     closed = true
   } = options;
+  const lineStyle = options.lineStyle ?? resolveLineStyle(options.style);
   const eps = closePointEps;
   if (points.length === 0) {
     return { vertices, indices };
@@ -2647,6 +2731,41 @@ function svgToPath2DSet(svg) {
 class Curve {
   arcLengthDivision = 200;
   _lengths = [];
+  _adaptiveCache;
+  /**
+   * Parent composite, set lazily when a composite caches its children. Lets
+   * {@link invalidate} propagate up so an ancestor's caches refresh too.
+   */
+  _owner;
+  _invalidating = false;
+  /**
+   * Drop cached arc lengths and the cached sampled outline used by hit testing, then
+   * bubble up to {@link _owner}. Called automatically by {@link applyTransform} and the
+   * `Path2D` mutators; call it manually after mutating control-point coordinates in place —
+   * the caches cannot observe such mutations.
+   */
+  invalidate() {
+    if (this._invalidating) {
+      return this;
+    }
+    this._invalidating = true;
+    this._invalidateSelf();
+    this._owner?.invalidate();
+    this._invalidating = false;
+    return this;
+  }
+  /** Clears this curve's own caches. Composites also clear their children (see override). */
+  _invalidateSelf() {
+    this._lengths.length = 0;
+    this._adaptiveCache = void 0;
+  }
+  /**
+   * Sampled outline cached for repeated hit tests (read-only — do not mutate the result).
+   * Invalidated by {@link invalidate}.
+   */
+  _getCachedAdaptiveVertices() {
+    return this._adaptiveCache ??= this.getAdaptiveVertices();
+  }
   getPointAt(u, output = new Vector2()) {
     return this.getPoint(this.getUToTMapping(u), output);
   }
@@ -2656,6 +2775,22 @@ class Curve {
   getControlPointRefs() {
     return [];
   }
+  /**
+   * Reverse the traversal direction in place (start ↔ end, same geometry). The base
+   * implementation reverses the order of the control-point *values*, which is correct for
+   * line / Bézier / spline primitives whose {@link getControlPointRefs} order matches their
+   * parametric order. {@link RoundCurve} (angle-based) and composites (child order) override it.
+   */
+  reverse() {
+    const refs = this.getControlPointRefs();
+    const n = refs.length;
+    const snapshot = refs.map((p) => p.clone());
+    for (let i = 0; i < n; i++) {
+      refs[i].copyFrom(snapshot[n - 1 - i]);
+    }
+    this.invalidate();
+    return this;
+  }
   applyTransform(transform) {
     const isFunction = typeof transform === "function";
     this.getControlPointRefs().forEach((p) => {
@@ -2665,6 +2800,7 @@ class Curve {
         transform.apply(p, p);
       }
     });
+    this.invalidate();
     return this;
   }
   getUnevenVertices(count = 5, output = []) {
@@ -2782,6 +2918,22 @@ class Curve {
   getTangentAt(u, output) {
     return this.getTangent(this.getUToTMapping(u), output);
   }
+  /**
+   * PathKit-style sample at an absolute arc-length `distance` along the curve: the point, the unit
+   * tangent, and the tangent `angle` in radians. `distance` is clamped to `[0, getLength()]`, so
+   * passing `0`/`getLength()` always yields the endpoints. See {@link PathMeasure} for a wrapper.
+   */
+  getPosTan(distance) {
+    const length = this.getLength();
+    const u = length > 0 ? Math.min(Math.max(distance / length, 0), 1) : 0;
+    const t = this.getUToTMapping(u);
+    const tangent = this.getTangent(t);
+    return {
+      position: this.getPoint(t),
+      tangent,
+      angle: Math.atan2(tangent.y, tangent.x)
+    };
+  }
   getNormal(t, output = new Vector2()) {
     this.getTangent(t, output);
     return output.set(-output.y, output.x).normalize();
@@ -2809,12 +2961,25 @@ class Curve {
     return mid;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const potins = this.getPoints();
-    for (let i = 0, len = potins.length; i < len; i++) {
-      const p = potins[i];
-      min.clampMin(p);
-      max.clampMax(p);
+    const vertices = this.getAdaptiveVertices();
+    let minX = min.x;
+    let minY = min.y;
+    let maxX = max.x;
+    let maxY = max.y;
+    for (let i = 0, len = vertices.length; i < len; i += 2) {
+      const x = vertices[i];
+      const y = vertices[i + 1];
+      if (x < minX)
+        minX = x;
+      if (y < minY)
+        minY = y;
+      if (x > maxX)
+        maxX = x;
+      if (y > maxY)
+        maxY = y;
     }
+    min.set(minX, minY);
+    max.set(maxX, maxY);
     return { min: min.finite(), max: max.finite() };
   }
   getBoundingBox() {
@@ -2832,7 +2997,7 @@ class Curve {
    * are honored — a single `Curve` is always one ring.
    */
   isPointInFill(point, options = {}) {
-    return pointInPolygon(point, this.getAdaptiveVertices(), options.fillRule);
+    return pointInPolygon(point, this._getCachedAdaptiveVertices(), options.fillRule);
   }
   /**
    * Test whether a point lies on this curve's stroke, i.e. within `strokeWidth / 2 + tolerance`
@@ -2845,7 +3010,7 @@ class Curve {
    */
   isPointInStroke(point, options = {}) {
     const { strokeWidth = 1, tolerance = 0, closed = false } = options;
-    const distance = pointToPolylineDistance(point, this.getAdaptiveVertices(), closed);
+    const distance = pointToPolylineDistance(point, this._getCachedAdaptiveVertices(), closed);
     return distance <= strokeWidth / 2 + tolerance;
   }
   /**
@@ -2864,10 +3029,28 @@ class Curve {
       options
     );
   }
+  /**
+   * Whether this curve forms a closed loop (its outline should be stroked without end caps,
+   * stitching the last vertex back to the first). The base test is purely geometric — the first
+   * sampled vertex coincides with the last. Curves that close without a duplicated endpoint
+   * (a full-revolution {@link RoundCurve}, rectangles, polygons) override this.
+   */
+  isClosed() {
+    const v = this._getCachedAdaptiveVertices();
+    const len = v.length;
+    if (len < 6) {
+      return false;
+    }
+    const eps = 1e-4;
+    return Math.abs(v[0] - v[len - 2]) < eps && Math.abs(v[1] - v[len - 1]) < eps;
+  }
   strokeTriangulate(options) {
     return strokeTriangulate(
       this.getAdaptiveVertices(),
-      options
+      {
+        ...options,
+        closed: options?.closed ?? this.isClosed()
+      }
     );
   }
   toCommands() {
@@ -2962,6 +3145,22 @@ class RoundCurve extends Curve {
   isClockwise() {
     return this.clockwise;
   }
+  /**
+   * A circle/ellipse arc is closed when it sweeps (at least) a full revolution — the sampled
+   * outline does not duplicate the start vertex, so the geometric first==last test in the base
+   * class would wrongly report a full circle as open and leave a seam gap in the stroke.
+   */
+  isClosed() {
+    return Math.abs(this.endAngle - this.startAngle) >= Math.PI * 2 - 1e-9 || super.isClosed();
+  }
+  reverse() {
+    const { startAngle, endAngle } = this;
+    this.startAngle = endAngle;
+    this.endAngle = startAngle;
+    this.clockwise = !this.clockwise;
+    this.invalidate();
+    return this;
+  }
   _getDeltaAngle() {
     const PI_2 = Math.PI * 2;
     let deltaAngle = this.endAngle - this.startAngle;
@@ -2989,6 +3188,64 @@ class RoundCurve extends Curve {
     }
     return output.set(_x, _y);
   }
+  /**
+   * Point on the ellipse at an absolute angle (mirrors {@link getPoint}'s parameterization,
+   * ignoring `_diff`).
+   */
+  _pointAtAngle(angle, output) {
+    let x = this.cx + this.rx * Math.cos(angle);
+    let y = this.cy + this.ry * Math.sin(angle);
+    if (this.rotate !== 0) {
+      const cos = Math.cos(this.rotate);
+      const sin = Math.sin(this.rotate);
+      const tx = x - this.cx;
+      const ty = y - this.cy;
+      x = tx * cos - ty * sin + this.cx;
+      y = tx * sin + ty * cos + this.cy;
+    }
+    return output.set(x, y);
+  }
+  /**
+   * Analytical bounds of the (elliptical) arc: the start/end points plus the per-axis
+   * extrema angles that fall within the swept interval. Matches {@link getPoint}, so it is
+   * exact for `ArcCurve`/`EllipseCurve`. The `_diff` offset (used only by the legacy
+   * `_getAdaptiveVerticesByCircle` path) is intentionally ignored here.
+   */
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { startAngle, rotate } = this;
+    const delta = this._getDeltaAngle();
+    const cosT = Math.cos(rotate);
+    const sinT = Math.sin(rotate);
+    const p = tempV2;
+    let minX = min.x;
+    let minY = min.y;
+    let maxX = max.x;
+    let maxY = max.y;
+    const consider = (angle) => {
+      this._pointAtAngle(angle, p);
+      if (p.x < minX)
+        minX = p.x;
+      if (p.y < minY)
+        minY = p.y;
+      if (p.x > maxX)
+        maxX = p.x;
+      if (p.y > maxY)
+        maxY = p.y;
+    };
+    consider(startAngle);
+    consider(startAngle + delta);
+    const ax = Math.atan2(-this.ry * sinT, this.rx * cosT);
+    const ay = Math.atan2(this.ry * cosT, this.rx * sinT);
+    const bases = [ax, ax + Math.PI, ay, ay + Math.PI];
+    for (let i = 0; i < 4; i++) {
+      if (angleInSweep(bases[i], startAngle, delta)) {
+        consider(bases[i]);
+      }
+    }
+    min.set(minX, minY);
+    max.set(maxX, maxY);
+    return { min: min.finite(), max: max.finite() };
+  }
   toCommands() {
     const { cx, cy, rx, ry, startAngle, endAngle, clockwise, rotate } = this;
     const startX = cx + rx * Math.cos(startAngle) * Math.cos(rotate) - ry * Math.sin(startAngle) * Math.sin(rotate);
@@ -3039,6 +3296,7 @@ class RoundCurve extends Curve {
     } else {
       transfEllipseNoSkew(this, transform);
     }
+    this.invalidate();
     return this;
   }
   getControlPointRefs() {
@@ -3159,9 +3417,25 @@ class RoundCurve extends Curve {
     return output;
   }
   getAdaptiveVertices(output = []) {
-    if (this.startAngle === 0 && this.endAngle === Math.PI * 2) {
+    const PI2 = Math.PI * 2;
+    if (this.startAngle === 0 && this.endAngle === PI2) {
       return this._getAdaptiveVerticesByCircle(output);
     }
+    if (Math.abs(this.endAngle - this.startAngle) >= PI2 - 1e-9) {
+      const tmp = this._getAdaptiveVerticesByCircle([]);
+      const n = tmp.length / 2;
+      if (this.endAngle > this.startAngle) {
+        for (let i = 0; i < tmp.length; i++) {
+          output.push(tmp[i]);
+        }
+      } else {
+        output.push(tmp[0], tmp[1]);
+        for (let i = n - 1; i >= 1; i--) {
+          output.push(tmp[i * 2], tmp[i * 2 + 1]);
+        }
+      }
+      return output;
+    }
     return this._getAdaptiveVerticesByArc(output);
   }
   copyFrom(source) {
@@ -3179,6 +3453,23 @@ class RoundCurve extends Curve {
     return this;
   }
 }
+function angleInSweep(a, start, delta) {
+  const PI_2 = Math.PI * 2;
+  const eps = 1e-9;
+  if (Math.abs(delta) >= PI_2 - eps) {
+    return true;
+  }
+  let off = (a - start) % PI_2;
+  if (delta >= 0) {
+    if (off < -eps)
+      off += PI_2;
+    return off >= -eps && off <= delta + eps;
+  }
+  if (off > eps) {
+    off -= PI_2;
+  }
+  return off <= eps && off >= delta - eps;
+}
 function transfEllipseGeneric(curve, m) {
   const a = curve.rx;
   const b = curve.ry;
@@ -3354,6 +3645,15 @@ class LineCurve extends Curve {
   getControlPointRefs() {
     return [this.p1, this.p2];
   }
+  // Swap endpoint *references* (not values) so corner Vector2s shared with adjacent
+  // segments stay intact and simply re-associate with the reversed segment.
+  reverse() {
+    const { p1, p2 } = this;
+    this.p1 = p2;
+    this.p2 = p1;
+    this.invalidate();
+    return this;
+  }
   getAdaptiveVertices(output = []) {
     output.push(
       this.p1.x,
@@ -3417,6 +3717,22 @@ class CompositeCurve extends Curve {
     super();
     this.curves = curves;
   }
+  _adaptiveCacheLen = -1;
+  _invalidateSelf() {
+    super._invalidateSelf();
+    this._adaptiveCacheLen = -1;
+    this.curves.forEach((curve) => curve.invalidate());
+  }
+  _getCachedAdaptiveVertices() {
+    if (!this._adaptiveCache || this._adaptiveCacheLen !== this.curves.length) {
+      this.curves.forEach((curve) => {
+        curve._owner = this;
+      });
+      this._adaptiveCache = this.getAdaptiveVertices();
+      this._adaptiveCacheLen = this.curves.length;
+    }
+    return this._adaptiveCache;
+  }
   getFlatCurves() {
     return this.curves.flatMap((curve) => {
       if (curve instanceof CompositeCurve) {
@@ -3462,6 +3778,7 @@ class CompositeCurve extends Curve {
   updateLengths() {
     const lengths = [];
     for (let i = 0, sum = 0, len = this.curves.length; i < len; i++) {
+      this.curves[i]._owner = this;
       sum += this.curves[i].getLength();
       lengths.push(sum);
     }
@@ -3500,6 +3817,16 @@ class CompositeCurve extends Curve {
     });
     return output;
   }
+  /**
+   * A composite is closed when its single child is closed (e.g. a lone full-circle arc), or when
+   * its assembled outline returns to its start (rectangles, polygons, multi-segment loops).
+   */
+  isClosed() {
+    if (this.curves.length === 1) {
+      return this.curves[0].isClosed();
+    }
+    return super.isClosed();
+  }
   strokeTriangulate(options) {
     if (this.curves.length === 1) {
       return this.curves[0].strokeTriangulate(options);
@@ -3507,6 +3834,13 @@ class CompositeCurve extends Curve {
       return super.strokeTriangulate(options);
     }
   }
+  /** Reverse the sub-curve order and reverse each sub-curve, so the whole outline runs backwards. */
+  reverse() {
+    this.curves.reverse();
+    this.curves.forEach((curve) => curve.reverse());
+    this.invalidate();
+    return this;
+  }
   getFillVertices(options) {
     if (this.curves.length === 1) {
       return this.curves[0].getFillVertices(options);
@@ -3530,7 +3864,10 @@ class CompositeCurve extends Curve {
     }
   }
   applyTransform(transform) {
+    this._invalidating = true;
     this.curves.forEach((curve) => curve.applyTransform(transform));
+    this._invalidating = false;
+    this.invalidate();
     return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
@@ -3599,6 +3936,16 @@ class CubicBezierCurve extends Curve {
   getControlPointRefs() {
     return [this.p1, this.cp1, this.cp2, this.p2];
   }
+  // Swap endpoint and control-point references; keeps shared corner Vector2s intact.
+  reverse() {
+    const { p1, cp1, cp2, p2 } = this;
+    this.p1 = p2;
+    this.cp1 = cp2;
+    this.cp2 = cp1;
+    this.p2 = p1;
+    this.invalidate();
+    return this;
+  }
   _solveQuadratic(a, b, c) {
     if (Math.abs(a) < 1e-12) {
       if (Math.abs(b) < 1e-12)
@@ -3759,6 +4106,14 @@ class QuadraticBezierCurve extends Curve {
   getControlPointRefs() {
     return [this.p1, this.cp, this.p2];
   }
+  // Swap endpoint references (cp is symmetric); keeps shared corner Vector2s intact.
+  reverse() {
+    const { p1, p2 } = this;
+    this.p1 = p2;
+    this.p2 = p1;
+    this.invalidate();
+    return this;
+  }
   getAdaptiveVertices(output = []) {
     return getAdaptiveQuadraticBezierCurvePoints(
       this.p1.x,
@@ -3869,7 +4224,7 @@ class RectangleCurve extends PolygonCurve {
   }
 }
 
-class RoundRectangleCurve extends RoundCurve {
+class RoundRectangleCurve extends CompositeCurve {
   constructor(x = 0, y = 0, width = 1, height = 1, radius = 1) {
     super();
     this.x = x;
@@ -3880,25 +4235,53 @@ class RoundRectangleCurve extends RoundCurve {
     this.update();
   }
   update() {
-    const { x, y, width, height, radius } = this;
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const cx = x + halfWidth;
-    const cy = y + halfHeight;
-    const rx = Math.max(0, Math.min(radius, Math.min(halfWidth, halfHeight)));
-    const ry = rx;
-    this._center = new Vector2(cx, cy);
-    this._radius = new Vector2(rx, ry);
-    this._diff = new Vector2(halfWidth - rx, halfHeight - ry);
+    const { x, y, width, height } = this;
+    const r = Math.max(0, Math.min(this.radius, Math.abs(width) / 2, Math.abs(height) / 2));
+    const x0 = x;
+    const x1 = x + r;
+    const x2 = x + width - r;
+    const x3 = x + width;
+    const y0 = y;
+    const y1 = y + r;
+    const y2 = y + height - r;
+    const y3 = y + height;
+    if (r <= 0) {
+      this.curves = [
+        LineCurve.from(x0, y0, x3, y0),
+        LineCurve.from(x3, y0, x3, y3),
+        LineCurve.from(x3, y3, x0, y3),
+        LineCurve.from(x0, y3, x0, y0)
+      ];
+    } else {
+      const HALF_PI = Math.PI / 2;
+      this.curves = [
+        LineCurve.from(x1, y0, x2, y0),
+        // top edge
+        new ArcCurve(x2, y1, r, -HALF_PI, 0, true),
+        // top-right corner
+        LineCurve.from(x3, y1, x3, y2),
+        // right edge
+        new ArcCurve(x2, y2, r, 0, HALF_PI, true),
+        // bottom-right corner
+        LineCurve.from(x2, y3, x1, y3),
+        // bottom edge
+        new ArcCurve(x1, y2, r, HALF_PI, Math.PI, true),
+        // bottom-left corner
+        LineCurve.from(x0, y2, x0, y1),
+        // left edge
+        new ArcCurve(x1, y1, r, Math.PI, Math.PI * 1.5, true)
+        // top-left corner
+      ];
+    }
+    this.invalidate();
     return this;
   }
   drawTo(ctx) {
-    const { x, y, width, height, radius } = this;
-    ctx.roundRect(x, y, width, height, radius);
+    ctx.roundRect(this.x, this.y, this.width, this.height, this.radius);
     return this;
   }
   copyFrom(source) {
-    super.copyFrom(source);
+    this.arcLengthDivision = source.arcLengthDivision;
     this.x = source.x;
     this.y = source.y;
     this.width = source.width;
@@ -3932,6 +4315,11 @@ class SplineCurve extends Curve {
   getControlPointRefs() {
     return this.points;
   }
+  reverse() {
+    this.points.reverse();
+    this.invalidate();
+    return this;
+  }
   copyFrom(source) {
     super.copyFrom(source);
     this.points = [];
@@ -3968,6 +4356,22 @@ class CurvePath extends CompositeCurve {
     this.addCommands(svgPathDataToCommands(data));
     return this;
   }
+  /**
+   * A sub-path is closed if it was explicitly closed (`autoClose`, i.e. a `Z`/`closePath`), or if
+   * it forms a geometric loop / wraps a single closed primitive (handled by the base class).
+   */
+  isClosed() {
+    return this.autoClose || super.isClosed();
+  }
+  /** Reverse direction, then refresh the {@link startPoint}/{@link currentPoint} cursors. */
+  reverse() {
+    super.reverse();
+    if (this.curves.length) {
+      this.startPoint = this.getPoint(0);
+      this.currentPoint = this.getPoint(1);
+    }
+    return this;
+  }
   _closeVertices(output) {
     if (this.autoClose && output.length >= 4 && (output[0] !== output[output.length - 2] && output[1] !== output[output.length - 1])) {
       output.push(output[0], output[1]);
@@ -4000,7 +4404,7 @@ class CurvePath extends CompositeCurve {
    */
   isPointInStroke(point, options = {}) {
     const { strokeWidth = 1, tolerance = 0 } = options;
-    const vertices = this.getAdaptiveVertices();
+    const vertices = this._getCachedAdaptiveVertices();
     const len = vertices.length;
     const closed = options.closed ?? (this.autoClose || len >= 6 && vertices[0] === vertices[len - 2] && vertices[1] === vertices[len - 1]);
     return pointToPolylineDistance(point, vertices, closed) <= strokeWidth / 2 + tolerance;
@@ -4178,6 +4582,8 @@ class CurvePath extends CompositeCurve {
 
 class Path2D extends CompositeCurve {
   _meta;
+  _ringsCache;
+  _ringsCacheLen = -1;
   currentCurve = new CurvePath();
   style;
   get startPoint() {
@@ -4296,18 +4702,21 @@ class Path2D extends CompositeCurve {
     this.getControlPointRefs().forEach((point) => {
       point.scale(sx, sy, target);
     });
+    this.invalidate();
     return this;
   }
   skew(ax, ay = 0, target = { x: 0, y: 0 }) {
     this.getControlPointRefs().forEach((point) => {
       point.skew(ax, ay, target);
     });
+    this.invalidate();
     return this;
   }
   rotate(rad, target = { x: 0, y: 0 }) {
     this.getControlPointRefs().forEach((point) => {
       point.rotate(rad, target);
     });
+    this.invalidate();
     return this;
   }
   bold(b) {
@@ -4366,6 +4775,7 @@ class Path2D extends CompositeCurve {
         }
       });
     });
+    this.invalidate();
     return this;
   }
   /**
@@ -4378,13 +4788,70 @@ class Path2D extends CompositeCurve {
    *
    * Defaults `fillRule` to `style.fillRule`, then `'nonzero'` (matching SVG/Canvas).
    */
+  _invalidateSelf() {
+    super._invalidateSelf();
+    this._ringsCache = void 0;
+    this._ringsCacheLen = -1;
+  }
+  /** Per-sub-path sampled rings, cached for repeated hit tests. */
+  _getRings() {
+    if (!this._ringsCache || this._ringsCacheLen !== this.curves.length) {
+      this._ringsCache = this.curves.map((curve) => {
+        curve._owner = this;
+        return curve.getAdaptiveVertices();
+      });
+      this._ringsCacheLen = this.curves.length;
+    }
+    return this._ringsCache;
+  }
   isPointInFill(point, options = {}) {
     const fillRule = options.fillRule ?? this.style.fillRule ?? "nonzero";
-    return pointInPolygons(
-      point,
-      this.curves.map((curve) => curve.getAdaptiveVertices()),
-      fillRule
-    );
+    return pointInPolygons(point, this._getRings(), fillRule);
+  }
+  /** Build a `Path2D` from flat rings (`[x0,y0,…]` per sub-path); closed-and-filled as sub-paths. */
+  static fromRings(rings, style = {}) {
+    const path = new Path2D(void 0, style);
+    for (const ring of rings) {
+      if (ring.length < 6) {
+        continue;
+      }
+      let end = ring.length;
+      if (ring[0] === ring[end - 2] && ring[1] === ring[end - 1]) {
+        end -= 2;
+      }
+      path.moveTo(ring[0], ring[1]);
+      for (let i = 2; i < end; i += 2) {
+        path.lineTo(ring[i], ring[i + 1]);
+      }
+      path.closePath();
+    }
+    return path;
+  }
+  /**
+   * Boolean (path) operation against another path, returning a NEW `Path2D` whose outline is the
+   * polygonal result. Curves are sampled before clipping, so the result is a polygonal
+   * approximation (see {@link polygonBoolean}). The result inherits this path's `style` unless
+   * overridden via `style`. Holes are emitted as oppositely-wound sub-paths (nonzero fill).
+   */
+  booleanOp(op, other, style) {
+    const rings = polygonBoolean(op, this._getRings(), other._getRings());
+    return Path2D.fromRings(rings, { ...this.style, ...style });
+  }
+  /** `this ∪ other` — the combined filled area. */
+  union(other, style) {
+    return this.booleanOp("union", other, style);
+  }
+  /** `this ∩ other` — only the overlapping area. */
+  intersection(other, style) {
+    return this.booleanOp("intersection", other, style);
+  }
+  /** `this − other` — this path with `other` cut away. */
+  difference(other, style) {
+    return this.booleanOp("difference", other, style);
+  }
+  /** `this ⊕ other` — areas covered by exactly one of the two paths. */
+  xor(other, style) {
+    return this.booleanOp("xor", other, style);
   }
   /**
    * Test whether a point lies on this path's stroke. A hit on any sub-path counts.
@@ -4403,35 +4870,17 @@ class Path2D extends CompositeCurve {
     }));
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
-    const strokeWidth = this.strokeWidth;
     this.curves.forEach((curve) => {
       curve.getMinMax(min, max);
-      if (withStyle) {
-        if (strokeWidth > 1) {
-          const halfStrokeWidth = strokeWidth / 2;
-          const isClockwise = curve.isClockwise();
-          const points = [];
-          for (let t = 0; t <= 1; t += 1 / curve.arcLengthDivision) {
-            const point = curve.getPoint(t);
-            const normal = curve.getNormal(t);
-            const dist1 = normal.clone().scale(isClockwise ? halfStrokeWidth : -halfStrokeWidth);
-            const dist2 = normal.clone().scale(isClockwise ? -halfStrokeWidth : halfStrokeWidth);
-            points.push(
-              point.clone().add(dist1),
-              point.clone().add(dist2),
-              point.clone().add({ x: halfStrokeWidth, y: 0 }),
-              point.clone().add({ x: -halfStrokeWidth, y: 0 }),
-              point.clone().add({ x: 0, y: halfStrokeWidth }),
-              point.clone().add({ x: 0, y: -halfStrokeWidth }),
-              point.clone().add({ x: halfStrokeWidth, y: halfStrokeWidth }),
-              point.clone().add({ x: -halfStrokeWidth, y: -halfStrokeWidth })
-            );
-          }
-          min.clampMin(...points);
-          max.clampMax(...points);
-        }
-      }
     });
+    if (withStyle) {
+      const strokeWidth = this.strokeWidth;
+      if (strokeWidth > 1 && Number.isFinite(min.x)) {
+        const half = strokeWidth / 2;
+        min.set(min.x - half, min.y - half);
+        max.set(max.x + half, max.y + half);
+      }
+    }
     return { min: min.finite(), max: max.finite() };
   }
   strokeTriangulate(options) {
@@ -4503,7 +4952,7 @@ class Path2D extends CompositeCurve {
   }
   drawTo(ctx, style = {}) {
     style = { ...this.style, ...style };
-    const { fill = "#000", stroke = "none" } = style;
+    const { fill = "#000", stroke = "none", fillRule = "nonzero" } = style;
     ctx.beginPath();
     ctx.save();
     setCanvasContext(ctx, style);
@@ -4511,7 +4960,7 @@ class Path2D extends CompositeCurve {
       path.drawTo(ctx);
     });
     if (fill !== "none") {
-      ctx.fill();
+      ctx.fill(fillRule);
     }
     if (stroke !== "none") {
       ctx.stroke();
@@ -4717,6 +5166,44 @@ ${content}
   }
 }
 
+class PathMeasure {
+  constructor(curve) {
+    this.curve = curve;
+  }
+  /** Total arc length of the path. */
+  getLength() {
+    return this.curve.getLength();
+  }
+  /** Whether the path forms a closed loop (see {@link Curve.isClosed}). */
+  isClosed() {
+    return this.curve.isClosed();
+  }
+  /** Point + unit tangent + tangent angle at an absolute arc-length `distance` (clamped). */
+  getPosTan(distance) {
+    return this.curve.getPosTan(distance);
+  }
+  /** Point at an absolute arc-length `distance` (clamped to `[0, getLength()]`). */
+  getPosition(distance) {
+    return this.curve.getPosTan(distance).position;
+  }
+  /** Point + tangent at a normalized progress `t ∈ [0, 1]` along the path. */
+  getPosTanAtProgress(t) {
+    return this.curve.getPosTan(this.getLength() * t);
+  }
+  /**
+   * Evenly sample the path into `count + 1` {@link PosTan} entries (arc-length spaced), e.g. to
+   * lay glyphs along a path or drive an `animate(progress)`-style traversal.
+   */
+  sample(count = 100) {
+    const length = this.getLength();
+    const out = [];
+    for (let i = 0; i <= count; i++) {
+      out.push(this.curve.getPosTan(length * i / count));
+    }
+    return out;
+  }
+}
+
 class FFDControlGrid {
   constructor(rows, cols, width = 1, height = 1) {
     this.rows = rows;
@@ -4772,4 +5259,4 @@ function applyFFD(point, grid, width = grid.width, height = grid.height) {
   point.set(x, y);
 }
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPolygonCurve, FFDControlGrid, LineCurve, PI, PI_2, Path2D, Path2DSet, PolygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Transform2D, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, getIntersectionPoint, nonzeroFillRule, parseArcCommand, parseCssArg, parseCssArgs, parseCssFunctions, parsePathDataArgs, pointInPolygon, pointInPolygons, pointToPolylineDistance, pointToSegmentDistance, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet, toKebabCase };
+export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPolygonCurve, FFDControlGrid, LineCurve, PI, PI_2, Path2D, Path2DSet, PathMeasure, PolygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Transform2D, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, getIntersectionPoint, nonzeroFillRule, parseArcCommand, parseCssArg, parseCssArgs, parseCssFunctions, parsePathDataArgs, pointInPolygon, pointInPolygons, pointToPolylineDistance, pointToSegmentDistance, polygonBoolean, quadraticBezier, resolveLineStyle, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet, toKebabCase };