modern-path2d 1.5.6 → 1.6.1

package/dist/index.mjs

@@ -183,11 +183,9 @@ class Vector2 {
     return Math.sqrt(this.lengthSquared());
   }
   scale(sx, sy = sx, origin = { x: 0, y: 0 }) {
-    const x = sx < 0 ? origin.x - this._x + origin.x : this._x;
-    const y = sy < 0 ? origin.y - this._y + origin.y : this._y;
     return this.set(
-      x * Math.abs(sx),
-      y * Math.abs(sy)
+      origin.x + (this._x - origin.x) * sx,
+      origin.y + (this._y - origin.y) * sy
     );
   }
   skew(ax, ay = 0, origin = { x: 0, y: 0 }) {
@@ -584,7 +582,7 @@ function getDirectedArea(vertices) {
   for (let i = 0; i < n; i += 2) {
     const x0 = vertices[i];
     const y0 = vertices[i + 1];
-    const x1 = vertices[(i + 2) % (n - 1)];
+    const x1 = vertices[(i + 2) % n];
     const y1 = vertices[(i + 3) % n];
     area += x0 * y1 - x1 * y0;
   }
@@ -594,7 +592,7 @@ function getDirectedArea(vertices) {
 function cross(ax, ay, bx, by, cx, cy) {
   return (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
 }
-function windingNumber(px, py, polygon) {
+function windingNumber$1(px, py, polygon) {
   const polygonLen = polygon.length;
   let wn = 0;
   for (let i = 0, j = polygonLen - 2; i < polygonLen; j = i, i += 2) {
@@ -699,7 +697,7 @@ function nonzeroFillRule(paths) {
       const wnList = [];
       for (let p = 0, pLen = testPoints.length; p < pLen; p++) {
         const [x, y] = testPoints[p];
-        const winding = windingNumber(x, y, paths[j]);
+        const winding = windingNumber$1(x, y, paths[j]);
         wnMap[winding] = (wnMap[winding] ?? 0) + 1;
         wnList.push(winding);
       }
@@ -722,6 +720,120 @@ function nonzeroFillRule(paths) {
   return results;
 }
 
+function isLeft(ax, ay, bx, by, px, py) {
+  return (bx - ax) * (py - ay) - (px - ax) * (by - ay);
+}
+function windingNumber(px, py, vertices) {
+  const len = vertices.length;
+  let wn = 0;
+  for (let i = 0; i < len; i += 2) {
+    const ax = vertices[i];
+    const ay = vertices[i + 1];
+    const k = (i + 2) % len;
+    const bx = vertices[k];
+    const by = vertices[k + 1];
+    if (ay <= py) {
+      if (by > py && isLeft(ax, ay, bx, by, px, py) > 0) {
+        wn++;
+      }
+    } else {
+      if (by <= py && isLeft(ax, ay, bx, by, px, py) < 0) {
+        wn--;
+      }
+    }
+  }
+  return wn;
+}
+function crossingNumber(px, py, vertices) {
+  const len = vertices.length;
+  let cn = 0;
+  for (let i = 0; i < len; i += 2) {
+    const ax = vertices[i];
+    const ay = vertices[i + 1];
+    const k = (i + 2) % len;
+    const bx = vertices[k];
+    const by = vertices[k + 1];
+    if (ay <= py && by > py || ay > py && by <= py) {
+      const t = (py - ay) / (by - ay);
+      if (px < ax + t * (bx - ax)) {
+        cn++;
+      }
+    }
+  }
+  return cn;
+}
+function segmentDistance(px, py, ax, ay, bx, by) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const lenSq = dx * dx + dy * dy;
+  let t = lenSq === 0 ? 0 : ((px - ax) * dx + (py - ay) * dy) / lenSq;
+  if (t < 0) {
+    t = 0;
+  } else if (t > 1) {
+    t = 1;
+  }
+  const cx = ax + t * dx;
+  const cy = ay + t * dy;
+  return Math.hypot(px - cx, py - cy);
+}
+function pointInPolygon(point, vertices, fillRule = "nonzero") {
+  if (vertices.length < 6) {
+    return false;
+  }
+  if (fillRule === "evenodd") {
+    return (crossingNumber(point.x, point.y, vertices) & 1) === 1;
+  }
+  return windingNumber(point.x, point.y, vertices) !== 0;
+}
+function pointInPolygons(point, polygons, fillRule = "nonzero") {
+  const { x, y } = point;
+  if (fillRule === "evenodd") {
+    let cn = 0;
+    for (let i = 0, len = polygons.length; i < len; i++) {
+      const ring = polygons[i];
+      if (ring.length >= 6) {
+        cn += crossingNumber(x, y, ring);
+      }
+    }
+    return (cn & 1) === 1;
+  }
+  let wn = 0;
+  for (let i = 0, len = polygons.length; i < len; i++) {
+    const ring = polygons[i];
+    if (ring.length >= 6) {
+      wn += windingNumber(x, y, ring);
+    }
+  }
+  return wn !== 0;
+}
+function pointToSegmentDistance(point, a, b) {
+  return segmentDistance(point.x, point.y, a.x, a.y, b.x, b.y);
+}
+function pointToPolylineDistance(point, vertices, closed = false) {
+  const len = vertices.length;
+  if (len < 2) {
+    return Infinity;
+  }
+  const { x: px, y: py } = point;
+  if (len === 2) {
+    return Math.hypot(px - vertices[0], py - vertices[1]);
+  }
+  let min = Infinity;
+  for (let i = 0; i < len - 2; i += 2) {
+    const d = segmentDistance(px, py, vertices[i], vertices[i + 1], vertices[i + 2], vertices[i + 3]);
+    if (d < min) {
+      min = d;
+    }
+  }
+  if (closed && len >= 6) {
+    const d = segmentDistance(px, py, vertices[len - 2], vertices[len - 1], vertices[0], vertices[1]);
+    if (d < min) {
+      min = d;
+    }
+  }
+  return min;
+}
+
 function quadraticBezierP0(t, p) {
   const k = 1 - t;
   return k * k * p;
@@ -1735,8 +1847,14 @@ function getReflection(a, b) {
 function svgPathCommandsAddToPath2D(commands, path) {
   const current = new Vector2();
   const control = new Vector2();
+  let prevType = "";
   for (let i = 0, l = commands.length; i < l; i++) {
     const cmd = commands[i];
+    if ((cmd.type === "s" || cmd.type === "S") && !"CcSs".includes(prevType)) {
+      control.copyFrom(current);
+    } else if ((cmd.type === "t" || cmd.type === "T") && !"QqTt".includes(prevType)) {
+      control.copyFrom(current);
+    }
     if (cmd.type === "m" || cmd.type === "M") {
       if (cmd.type === "m") {
         current.add(cmd);
@@ -1895,6 +2013,7 @@ function svgPathCommandsAddToPath2D(commands, path) {
     } else {
       console.warn("Unsupported commands", cmd);
     }
+    prevType = cmd.type;
   }
 }
 
@@ -2319,10 +2438,14 @@ function parsePolylineNode(node) {
 function parseRectNode(node) {
   const x = parseFloatWithUnits(node.getAttribute("x") || 0);
   const y = parseFloatWithUnits(node.getAttribute("y") || 0);
-  const rx = parseFloatWithUnits(node.getAttribute("rx") || node.getAttribute("ry") || 0);
-  const ry = parseFloatWithUnits(node.getAttribute("ry") || node.getAttribute("rx") || 0);
+  const rxAttr = node.getAttribute("rx");
+  const ryAttr = node.getAttribute("ry");
+  let rx = parseFloatWithUnits(rxAttr ?? ryAttr ?? 0);
+  let ry = parseFloatWithUnits(ryAttr ?? rxAttr ?? 0);
   const w = parseFloatWithUnits(node.getAttribute("width"));
   const h = parseFloatWithUnits(node.getAttribute("height"));
+  rx = Math.max(0, Math.min(rx, w / 2));
+  ry = Math.max(0, Math.min(ry, h / 2));
   const bci = 1 - 0.551915024494;
   const path = new Path2D();
   path.moveTo(x + rx, y);
@@ -2698,6 +2821,40 @@ class Curve {
     const { min, max } = this.getMinMax();
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
+  /**
+   * Test whether a point lies inside the area enclosed by this curve.
+   *
+   * The curve is sampled via {@link getAdaptiveVertices} into a single implicitly closed
+   * ring. This is purely geometric (it ignores any `fill`/`stroke` style), mirroring
+   * `CanvasRenderingContext2D.isPointInPath`.
+   *
+   * Composites that hold multiple sub-paths (e.g. {@link Path2D}) override this so holes
+   * are honored — a single `Curve` is always one ring.
+   */
+  isPointInFill(point, options = {}) {
+    return pointInPolygon(point, this.getAdaptiveVertices(), options.fillRule);
+  }
+  /**
+   * Test whether a point lies on this curve's stroke, i.e. within `strokeWidth / 2 + tolerance`
+   * of the sampled outline. The point must be in the same coordinate space as the curve.
+   *
+   * Options: `strokeWidth` (path units, default `1`), `tolerance` (extra hit slack in path
+   * units, default `0` — useful for thin strokes; no coordinate scaling is assumed, so convert
+   * pixel tolerance to path units upstream if your path is normalized), and `closed` (whether
+   * to include the closing edge from the last vertex back to the first).
+   */
+  isPointInStroke(point, options = {}) {
+    const { strokeWidth = 1, tolerance = 0, closed = false } = options;
+    const distance = pointToPolylineDistance(point, this.getAdaptiveVertices(), closed);
+    return distance <= strokeWidth / 2 + tolerance;
+  }
+  /**
+   * Concise PathKit-style fill containment test: `contains(x, y)` is shorthand for
+   * {@link isPointInFill} with a `{ x, y }` point.
+   */
+  contains(x, y, options = {}) {
+    return this.isPointInFill({ x, y }, options);
+  }
   getFillVertices(_options) {
     return this.getAdaptiveVertices();
   }
@@ -3108,6 +3265,8 @@ function eigenDecomposition(A, B, C) {
     rt2 = A * t * C - B * t * B;
   } else if (sm < 0) {
     rt2 = 0.5 * (sm - rt);
+    t = 1 / rt2;
+    rt1 = A * t * C - B * t * B;
   } else {
     rt1 = 0.5 * rt;
     rt2 = -0.5 * rt;
@@ -3273,20 +3432,26 @@ class CompositeCurve extends Curve {
   getPoint(t, output = new Vector2()) {
     const d = t * this.getLength();
     const lengths = this.getLengths();
-    let i = 0;
-    while (i < lengths.length) {
-      if (lengths[i] >= d) {
-        const diff = lengths[i] - d;
-        const curve = this.curves[i];
-        const length = curve.getLength();
-        return curve.getPointAt(
-          length === 0 ? 0 : 1 - diff / length,
-          output
-        );
+    const n = lengths.length;
+    if (n === 0)
+      return output;
+    let lo = 0;
+    let hi = n - 1;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (lengths[mid] < d) {
+        lo = mid + 1;
+      } else {
+        hi = mid;
       }
-      i++;
     }
-    return output;
+    const diff = lengths[lo] - d;
+    const curve = this.curves[lo];
+    const length = curve.getLength();
+    return curve.getPointAt(
+      length === 0 ? 0 : 1 - diff / length,
+      output
+    );
   }
   getLengths() {
     if (this._lengths.length !== this.curves.length) {
@@ -3435,6 +3600,12 @@ class CubicBezierCurve extends Curve {
     return [this.p1, this.cp1, this.cp2, this.p2];
   }
   _solveQuadratic(a, b, c) {
+    if (Math.abs(a) < 1e-12) {
+      if (Math.abs(b) < 1e-12)
+        return [];
+      const t = -c / b;
+      return t >= 0 && t <= 1 ? [t] : [];
+    }
     const discriminant = b * b - 4 * a * c;
     if (discriminant < 0)
       return [];
@@ -3446,30 +3617,23 @@ class CubicBezierCurve extends Curve {
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     const { p1, cp1, cp2, p2 } = this;
     const dxRoots = this._solveQuadratic(
-      3 * (cp1.x - p1.x),
-      6 * (cp2.x - cp1.x),
-      3 * (p2.x - cp2.x)
+      3 * (-p1.x + 3 * cp1.x - 3 * cp2.x + p2.x),
+      6 * (p1.x - 2 * cp1.x + cp2.x),
+      3 * (cp1.x - p1.x)
     );
     const dyRoots = this._solveQuadratic(
-      3 * (cp1.y - p1.y),
-      6 * (cp2.y - cp1.y),
-      3 * (p2.y - cp2.y)
+      3 * (-p1.y + 3 * cp1.y - 3 * cp2.y + p2.y),
+      6 * (p1.y - 2 * cp1.y + cp2.y),
+      3 * (cp1.y - p1.y)
     );
     const tValues = [0, 1, ...dxRoots, ...dyRoots];
-    const samplePoints = (tValues2, precision) => {
-      for (const t of tValues2) {
-        for (let i = 0; i <= precision; i++) {
-          const delta = i / precision - 0.5;
-          const refinedT = Math.min(1, Math.max(0, t + delta));
-          const point = this.getPoint(refinedT);
-          min.x = Math.min(min.x, point.x);
-          min.y = Math.min(min.y, point.y);
-          max.x = Math.max(max.x, point.x);
-          max.y = Math.max(max.y, point.y);
-        }
-      }
-    };
-    samplePoints(tValues, 10);
+    for (const t of tValues) {
+      const point = this.getPoint(t);
+      min.x = Math.min(min.x, point.x);
+      min.y = Math.min(min.y, point.y);
+      max.x = Math.max(max.x, point.x);
+      max.y = Math.max(max.y, point.y);
+    }
     return { min: min.finite(), max: max.finite() };
   }
   toCommands() {
@@ -3522,11 +3686,11 @@ class EllipseCurve extends RoundCurve {
   }
 }
 
-class PloygonCurve extends CompositeCurve {
+class PolygonCurve extends CompositeCurve {
   //
 }
 
-class EquilateralPloygonCurve extends PloygonCurve {
+class EquilateralPolygonCurve extends PolygonCurve {
   constructor(cx = 0, cy = 0, radius = 1, sideCount = 3) {
     super();
     this.cx = cx;
@@ -3609,14 +3773,25 @@ class QuadraticBezierCurve extends Curve {
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     const { p1, cp, p2 } = this;
-    const x1 = 0.5 * (p1.x + cp.x);
-    const y1 = 0.5 * (p1.y + cp.y);
-    const x2 = 0.5 * (p1.x + p2.x);
-    const y2 = 0.5 * (p1.y + p2.y);
-    min.x = Math.min(min.x, p1.x, p2.x, x1, x2);
-    min.y = Math.min(min.y, p1.y, p2.y, y1, y2);
-    max.x = Math.max(max.x, p1.x, p2.x, x1, x2);
-    max.y = Math.max(max.y, p1.y, p2.y, y1, y2);
+    const extrema = (a, b, c) => {
+      const denom = a - 2 * b + c;
+      if (Math.abs(denom) < 1e-12)
+        return null;
+      const t = (a - b) / denom;
+      return t > 0 && t < 1 ? t : null;
+    };
+    const tx = extrema(p1.x, cp.x, p2.x);
+    const ty = extrema(p1.y, cp.y, p2.y);
+    const xs = [p1.x, p2.x];
+    const ys = [p1.y, p2.y];
+    if (tx !== null)
+      xs.push(quadraticBezier(tx, p1.x, cp.x, p2.x));
+    if (ty !== null)
+      ys.push(quadraticBezier(ty, p1.y, cp.y, p2.y));
+    min.x = Math.min(min.x, ...xs);
+    min.y = Math.min(min.y, ...ys);
+    max.x = Math.max(max.x, ...xs);
+    max.y = Math.max(max.y, ...ys);
     return { min: min.finite(), max: max.finite() };
   }
   toCommands() {
@@ -3641,7 +3816,7 @@ class QuadraticBezierCurve extends Curve {
   }
 }
 
-class RectangleCurve extends PloygonCurve {
+class RectangleCurve extends PolygonCurve {
   constructor(x = 0, y = 0, width = 0, height = 0) {
     super();
     this.x = x;
@@ -3819,6 +3994,17 @@ class CurvePath extends CompositeCurve {
       super.getFillVertices(options)
     );
   }
+  /**
+   * Same as {@link Curve.isPointInStroke}, but `closed` defaults to this sub-path's actual
+   * closed-ness: explicitly `autoClose`, or geometrically closed (first vertex === last).
+   */
+  isPointInStroke(point, options = {}) {
+    const { strokeWidth = 1, tolerance = 0 } = options;
+    const vertices = this.getAdaptiveVertices();
+    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;
+  }
   _setCurrentPoint(point) {
     this.currentPoint = new Vector2(point.x, point.y);
     if (!this.startPoint) {
@@ -4049,13 +4235,11 @@ class Path2D extends CompositeCurve {
     return this;
   }
   moveTo(x, y) {
-    if (!this.currentCurve.currentPoint?.equals({ x, y })) {
-      if (this.currentCurve.curves.length) {
-        this.currentCurve = new CurvePath();
-        this.curves.push(this.currentCurve);
-      }
-      this.currentCurve.moveTo(x, y);
+    if (this.currentCurve.curves.length) {
+      this.currentCurve = new CurvePath();
+      this.curves.push(this.currentCurve);
     }
+    this.currentCurve.moveTo(x, y);
     return this;
   }
   lineTo(x, y) {
@@ -4184,6 +4368,40 @@ class Path2D extends CompositeCurve {
     });
     return this;
   }
+  /**
+   * Test whether a point lies inside the filled area of this path.
+   *
+   * Each sub-path ({@link CurvePath}) is sampled into its own ring and all rings are
+   * evaluated together via {@link pointInPolygons}, so holes (donut / hollow shapes) are
+   * honored. This is purely geometric and ignores `style.fill` — for the `fill: 'none'`
+   * fallback, gate the call upstream (see {@link Path2DSet.hitTest}).
+   *
+   * Defaults `fillRule` to `style.fillRule`, then `'nonzero'` (matching SVG/Canvas).
+   */
+  isPointInFill(point, options = {}) {
+    const fillRule = options.fillRule ?? this.style.fillRule ?? "nonzero";
+    return pointInPolygons(
+      point,
+      this.curves.map((curve) => curve.getAdaptiveVertices()),
+      fillRule
+    );
+  }
+  /**
+   * Test whether a point lies on this path's stroke. A hit on any sub-path counts.
+   *
+   * Defaults `strokeWidth` to this path's own {@link strokeWidth} (which is `0` when
+   * `style.stroke` is `'none'`). Each sub-path infers its own closed-ness unless `closed`
+   * is given explicitly.
+   */
+  isPointInStroke(point, options = {}) {
+    const strokeWidth = options.strokeWidth ?? this.strokeWidth;
+    const { tolerance = 0, closed } = options;
+    return this.curves.some((curve) => curve.isPointInStroke(point, {
+      strokeWidth,
+      tolerance,
+      closed
+    }));
+  }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
     const strokeWidth = this.strokeWidth;
     this.curves.forEach((curve) => {
@@ -4361,6 +4579,44 @@ class Path2DSet {
     this.paths = paths;
     this.viewBox = viewBox;
   }
+  /**
+   * Test whether a point lies inside the filled area of any path in this set.
+   * Purely geometric (ignores `fill: 'none'`); use {@link hitTest} for style-aware hits.
+   */
+  isPointInFill(point, options = {}) {
+    return this.paths.some((path) => path.isPointInFill(point, options));
+  }
+  /**
+   * Concise PathKit-style fill containment test across the whole set; shorthand for
+   * {@link isPointInFill} with a `{ x, y }` point.
+   */
+  contains(x, y, options = {}) {
+    return this.isPointInFill({ x, y }, options);
+  }
+  /**
+   * Find the topmost path hit by a point, or `undefined` if none.
+   *
+   * Paths are tested top-to-bottom (last drawn first). For each path a fill hit is checked
+   * first (skipped when `style.fill` is `'none'`), then — if `stroke` is enabled — a stroke
+   * hit (skipped when `style.stroke` is `'none'`). This honors the "fill: none falls back to
+   * stroke" rule; the coordinate space of `point` must match the paths (no scaling assumed).
+   *
+   * Options: `stroke` (also test strokes, default `true`), `tolerance` (extra stroke hit slack
+   * in path units, default `0`), and `fillRule` (overrides each path's own fill rule).
+   */
+  hitTest(point, options = {}) {
+    const { stroke = true, tolerance, fillRule } = options;
+    for (let i = this.paths.length - 1; i >= 0; i--) {
+      const path = this.paths[i];
+      if ((path.style.fill ?? "#000") !== "none" && path.isPointInFill(point, { fillRule })) {
+        return path;
+      }
+      if (stroke && (path.style.stroke ?? "none") !== "none" && path.isPointInStroke(point, { tolerance })) {
+        return path;
+      }
+    }
+    return void 0;
+  }
   getBoundingBox(withStyle = true) {
     if (!this.paths.length) {
       return void 0;
@@ -4516,4 +4772,4 @@ function applyFFD(point, grid, width = grid.width, height = grid.height) {
   point.set(x, y);
 }
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, PI, PI_2, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Transform2D, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, getIntersectionPoint, nonzeroFillRule, parseArcCommand, parseCssArg, parseCssArgs, parseCssFunctions, parsePathDataArgs, 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, 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-path2d",
   "type": "module",
-  "version": "1.5.6",
+  "version": "1.6.1",
   "packageManager": "pnpm@9.15.1",
   "description": "A Path2D library, fully compatible with Web Path2D, with additional support for triangulate、animation、deformation etc.",
   "author": "wxm",