modern-path2d 1.4.5 → 1.4.6

package/dist/index.cjs

@@ -1722,44 +1722,110 @@ function getDirectedArea(vertices) {
   return area / 2;
 }
 
-function pointInPolygonEvenOdd(point, polygon) {
-  let inside = false;
-  const [x, y] = point;
-  const len = polygon.length / 2;
-  for (let i = 0, j = len - 1; i < len; j = i++) {
-    const xi = polygon[i * 2];
-    const yi = polygon[i * 2 + 1];
-    const xj = polygon[j * 2];
-    const yj = polygon[j * 2 + 1];
-    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
-      inside = !inside;
-    }
+function toKebabCase(str) {
+  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+}
+function getIntersectionPoint(p1, p2, q1, q2) {
+  const r = p2.clone().sub(p1);
+  const s = q2.clone().sub(q1);
+  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 inside;
+  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 new Vector2(
+    p1.x + t * r.x,
+    p1.y + t * r.y
+  );
+}
+
+function centroid(path) {
+  let sx = 0;
+  let sy = 0;
+  const n = path.length / 2;
+  for (let i = 0; i < path.length; i += 2) {
+    sx += path[i];
+    sy += path[i + 1];
+  }
+  return [sx / n, sy / n];
+}
+function signedArea(pts) {
+  let sum = 0;
+  const len = pts.length / 2;
+  for (let i = 0; i < len; i++) {
+    const xi = pts[2 * i];
+    const yi = pts[2 * i + 1];
+    const j = (i + 1) % len;
+    const xj = pts[2 * j];
+    const yj = pts[2 * j + 1];
+    sum += (xj - xi) * (yj + yi);
+  }
+  return sum;
+}
+function cross(ax, ay, bx, by, cx, cy) {
+  return (bx - ax) * (cy - ay) - (cx - ax) * (by - ay);
 }
-function pointInPolygonNonZero(point, polygon) {
-  const [x, y] = point;
-  const len = polygon.length / 2;
+function windingNumber(px, py, path) {
   let wn = 0;
-  for (let i = 0, j = len - 1; i < len; j = i++) {
-    const xi = polygon[i * 2];
-    const yi = polygon[i * 2 + 1];
-    const xj = polygon[j * 2];
-    const yj = polygon[j * 2 + 1];
-    if (yi <= y) {
-      if (yj > y && cross([xj, yj], [xi, yi], [x, y]) > 0) {
+  for (let i = 0, j = path.length - 2; i < path.length; j = i, i += 2) {
+    const xi = path[i];
+    const yi = path[i + 1];
+    const xj = path[j];
+    const yj = path[j + 1];
+    if (yi <= py) {
+      if (yj > py && cross(xj, yj, xi, yi, px, py) > 0)
         wn++;
-      }
     } else {
-      if (yj <= y && cross([xj, yj], [xi, yi], [x, y]) < 0) {
+      if (yj <= py && cross(xj, yj, xi, yi, px, py) < 0)
         wn--;
-      }
     }
   }
-  return wn !== 0;
+  return wn;
 }
-function cross(p0, p1, p2) {
-  return (p1[0] - p0[0]) * (p2[1] - p0[1]) - (p2[0] - p0[0]) * (p1[1] - p0[1]);
+function nonzeroFillRule(paths) {
+  const results = paths.map((_, i) => ({ index: i, parentIndex: null, wn: 0 }));
+  for (let i = 0; i < paths.length; i++) {
+    let best = null;
+    if (signedArea(paths[i]) < 0) {
+      continue;
+    }
+    const points = [
+      paths[i][0],
+      paths[i][1],
+      ...centroid(paths[i])
+    ];
+    for (let j = 0; j < paths.length; j++) {
+      if (i === j) {
+        continue;
+      }
+      let wn0 = 0;
+      for (let p = 0; p < points.length; p += 2) {
+        wn0 = wn0 || windingNumber(points[p], points[p + 1], paths[j]);
+        if (wn0) {
+          break;
+        }
+      }
+      const absWn = Math.abs(wn0);
+      if (absWn !== 0 && (!best || absWn > Math.abs(best.wn))) {
+        best = { idx: j, wn: wn0 };
+      }
+    }
+    if (best) {
+      results[i].parentIndex = best.idx;
+      results[i].wn = best.wn;
+    }
+  }
+  return results;
 }
 
 function quadraticBezierP0(t, p) {
@@ -3652,33 +3718,6 @@ class CurvePath extends CompositeCurve {
   }
 }
 
-function toKebabCase(str) {
-  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
-}
-function getIntersectionPoint(p1, p2, q1, q2) {
-  const r = p2.clone().sub(p1);
-  const s = q2.clone().sub(q1);
-  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
-    );
-  }
-  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 new Vector2(
-    p1.x + t * r.x,
-    p1.y + t * r.y
-  );
-}
-
 class Path2D extends CompositeCurve {
   currentCurve = new CurvePath();
   style;
@@ -3920,73 +3959,25 @@ class Path2D extends CompositeCurve {
         ...options?.style
       }
     };
-    function signedArea(pts) {
-      let sum = 0;
-      const len = pts.length / 2;
-      for (let i = 0; i < len; i++) {
-        const xi = pts[2 * i];
-        const yi = pts[2 * i + 1];
-        const j = (i + 1) % len;
-        const xj = pts[2 * j];
-        const yj = pts[2 * j + 1];
-        sum += (xj - xi) * (yj + yi);
-      }
-      return sum;
-    }
-    function isHoleFlat(pts) {
-      return signedArea(pts) > 0;
-    }
     const indices = _options.indices ?? [];
     const vertices = _options.vertices ?? [];
     const fillRule = _options.style.fillRule ?? "nonzero";
     if (fillRule === "nonzero") {
-      const pointArrays = this.curves.map((curve) => curve.getFillVertices(_options));
-      const parentMap = /* @__PURE__ */ new Map();
-      const parentd = /* @__PURE__ */ new Set();
-      for (let i = 0; i < pointArrays.length; i++) {
-        if (!isHoleFlat(pointArrays[i])) {
+      const paths = this.curves.map((curve) => curve.getFillVertices(_options));
+      const groups = nonzeroFillRule(paths);
+      for (let i = 0; i < groups.length; i++) {
+        const group = groups[i];
+        const pointArray = paths[i];
+        if (group.wn || !pointArray.length) {
           continue;
         }
-        const parents = [];
-        for (let j = 0; j < pointArrays.length; j++) {
-          if (i === j || isHoleFlat(pointArrays[j]))
-            continue;
-          let flag = false;
-          for (let k = 0; k < pointArrays[i].length; k += 2) {
-            flag = flag || pointInPolygonNonZero(
-              [pointArrays[i][k], pointArrays[i][k + 1]],
-              pointArrays[j]
-            );
-            if (flag) {
-              break;
-            }
-          }
-          if (flag) {
-            parents.push(j);
-          }
-        }
-        if (parents.length) {
-          parents.forEach((pi) => {
-            let set = parentMap.get(pi);
-            if (!set) {
-              set = /* @__PURE__ */ new Set();
-              parentMap.set(pi, set);
-            }
-            set.add(i);
-          });
-          parentd.add(i);
-        }
-      }
-      pointArrays.forEach((pointArray, i) => {
-        if (parentd.has(i) || !pointArray.length) {
-          return;
-        }
         const _pointArray = pointArray.slice();
         const holes = [];
-        parentMap.get(i)?.forEach((ci) => {
+        const child = groups.find((v) => v.parentIndex === i);
+        if (child) {
           holes.push(_pointArray.length / 2);
-          _pointArray.push(...pointArrays[ci]);
-        });
+          _pointArray.push(...paths[child.index]);
+        }
         fillTriangulate(_pointArray, {
           ...options,
           indices,
@@ -3994,7 +3985,7 @@ class Path2D extends CompositeCurve {
           holes,
           style: { ...this.style }
         });
-      });
+      }
     } else {
       this.curves.forEach((curve) => {
         curve.fillTriangulate({
@@ -4117,7 +4108,7 @@ class Path2DSet {
         const p1 = getPoint(indices[i]);
         const p2 = getPoint(indices[i + 1]);
         const p3 = getPoint(indices[i + 2]);
-        polygonStr += `<polygon points="${p1.join(",")} ${p2.join(",")} ${p3.join(",")}" fill="black" />`;
+        polygonStr += `<polygon points="${p1.join(",")} ${p2.join(",")} ${p3.join(",")}" stroke="none" fill="black" />`;
       }
     });
     const viewBox = [min.x, min.y, max.x - min.x, max.y - min.y];
@@ -4239,10 +4230,10 @@ exports.fillTriangulate = fillTriangulate;
 exports.getAdaptiveCubicBezierCurvePoints = getAdaptiveCubicBezierCurvePoints;
 exports.getAdaptiveQuadraticBezierCurvePoints = getAdaptiveQuadraticBezierCurvePoints;
 exports.getDirectedArea = getDirectedArea;
+exports.getIntersectionPoint = getIntersectionPoint;
+exports.nonzeroFillRule = nonzeroFillRule;
 exports.parseArcCommand = parseArcCommand;
 exports.parsePathDataArgs = parsePathDataArgs;
-exports.pointInPolygonEvenOdd = pointInPolygonEvenOdd;
-exports.pointInPolygonNonZero = pointInPolygonNonZero;
 exports.quadraticBezier = quadraticBezier;
 exports.setCanvasContext = setCanvasContext;
 exports.strokeTriangulate = strokeTriangulate;
@@ -4251,3 +4242,4 @@ exports.svgPathCommandsToData = svgPathCommandsToData;
 exports.svgPathDataToCommands = svgPathDataToCommands;
 exports.svgToDom = svgToDom;
 exports.svgToPath2DSet = svgToPath2DSet;
+exports.toKebabCase = toKebabCase;

package/dist/index.d.cts

@@ -3,6 +3,93 @@ interface DrawPointOptions {
 }
 declare function drawPoint(ctx: CanvasRenderingContext2D, x: number, y: number, options?: DrawPointOptions): void;
 
+/**
+ * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
+ */
+type Path2DCommand = {
+    type: 'm' | 'M';
+    x: number;
+    y: number;
+} | {
+    type: 'h' | 'H';
+    x: number;
+} | {
+    type: 'v' | 'V';
+    y: number;
+} | {
+    type: 'l' | 'L';
+    x: number;
+    y: number;
+} | {
+    type: 'c' | 'C';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x: number;
+    y: number;
+} | {
+    type: 's' | 'S';
+    x2: number;
+    y2: number;
+    x: number;
+    y: number;
+} | {
+    type: 'q' | 'Q';
+    x1: number;
+    y1: number;
+    x: number;
+    y: number;
+} | {
+    type: 't' | 'T';
+    x: number;
+    y: number;
+} | {
+    type: 'a' | 'A';
+    rx: number;
+    ry: number;
+    angle: number;
+    largeArcFlag: number;
+    sweepFlag: number;
+    x: number;
+    y: number;
+} | {
+    type: 'z' | 'Z';
+};
+/**
+ * SVG path data
+ *
+ * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
+ */
+type Path2DData = string;
+type FillRule = 'nonzero' | 'evenodd';
+type StrokeLinecap = 'butt' | 'round' | 'square';
+type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
+interface Path2DDrawStyle {
+    fill: string | any;
+    stroke: string | any;
+    shadowColor: string;
+    shadowOffsetX: number;
+    shadowOffsetY: number;
+    shadowBlur: number;
+}
+interface Path2DStyle extends Path2DDrawStyle {
+    [key: string]: any;
+    fillOpacity: number;
+    fillRule: FillRule;
+    opacity: number;
+    strokeOpacity: number;
+    strokeWidth: number;
+    strokeLinecap: StrokeLinecap;
+    strokeLinejoin: StrokeLinejoin;
+    strokeMiterlimit: number;
+    strokeDasharray: number[];
+    strokeDashoffset: number;
+    visibility: string;
+}
+
+declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<Path2DStyle>): void;
+
 declare class Matrix3 {
     elements: number[];
     constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
@@ -109,8 +196,15 @@ declare function getAdaptiveQuadraticBezierCurvePoints(sX: number, sY: number, x
 
 declare function getDirectedArea(vertices: number[]): number;
 
-declare function pointInPolygonEvenOdd(point: number[], polygon: number[]): boolean;
-declare function pointInPolygonNonZero(point: number[], polygon: number[]): boolean;
+declare function toKebabCase(str: string): string;
+declare function getIntersectionPoint(p1: Vector2, p2: Vector2, q1: Vector2, q2: Vector2): Vector2;
+
+interface Grouping {
+    index: number;
+    parentIndex: number | null;
+    wn: number;
+}
+declare function nonzeroFillRule(paths: number[][]): Grouping[];
 
 declare function quadraticBezier(t: number, p0: number, p1: number, p2: number): number;
 
@@ -349,60 +443,6 @@ declare class SplineCurve extends Curve {
     copy(source: SplineCurve): this;
 }
 
-/**
- * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
- */
-type Path2DCommand = {
-    type: 'm' | 'M';
-    x: number;
-    y: number;
-} | {
-    type: 'h' | 'H';
-    x: number;
-} | {
-    type: 'v' | 'V';
-    y: number;
-} | {
-    type: 'l' | 'L';
-    x: number;
-    y: number;
-} | {
-    type: 'c' | 'C';
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    x: number;
-    y: number;
-} | {
-    type: 's' | 'S';
-    x2: number;
-    y2: number;
-    x: number;
-    y: number;
-} | {
-    type: 'q' | 'Q';
-    x1: number;
-    y1: number;
-    x: number;
-    y: number;
-} | {
-    type: 't' | 'T';
-    x: number;
-    y: number;
-} | {
-    type: 'a' | 'A';
-    rx: number;
-    ry: number;
-    angle: number;
-    largeArcFlag: number;
-    sweepFlag: number;
-    x: number;
-    y: number;
-} | {
-    type: 'z' | 'Z';
-};
-
 declare class CurvePath extends CompositeCurve {
     startPoint?: Vector2;
     currentPoint?: Vector2;
@@ -435,39 +475,6 @@ declare class CurvePath extends CompositeCurve {
     copy(source: CurvePath): this;
 }
 
-/**
- * Svg path data
- *
- * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
- */
-type Path2DData = string;
-
-type FillRule = 'nonzero' | 'evenodd';
-type StrokeLinecap = 'butt' | 'round' | 'square';
-type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
-interface Path2DDrawStyle {
-    fill: string | any;
-    stroke: string | any;
-    shadowColor: string;
-    shadowOffsetX: number;
-    shadowOffsetY: number;
-    shadowBlur: number;
-}
-interface Path2DStyle extends Path2DDrawStyle {
-    [key: string]: any;
-    fillOpacity: number;
-    fillRule: FillRule;
-    opacity: number;
-    strokeOpacity: number;
-    strokeWidth: number;
-    strokeLinecap: StrokeLinecap;
-    strokeLinejoin: StrokeLinejoin;
-    strokeMiterlimit: number;
-    strokeDasharray: number[];
-    strokeDashoffset: number;
-    visibility: string;
-}
-
 /**
  * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
  *
@@ -534,8 +541,6 @@ declare class Path2DSet {
     }>): HTMLCanvasElement;
 }
 
-declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<Path2DStyle>): void;
-
 declare class FFDControlGrid {
     rows: number;
     cols: number;
@@ -578,5 +583,5 @@ declare function svgToDom(svg: string | SVGElement): SVGElement;
 
 declare function svgToPath2DSet(svg: string | SVGElement): Path2DSet;
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, parseArcCommand, parsePathDataArgs, pointInPolygonEvenOdd, pointInPolygonNonZero, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet };
+export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, getIntersectionPoint, nonzeroFillRule, parseArcCommand, parsePathDataArgs, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet, toKebabCase };
 export type { DrawPointOptions, FillRule, FillTriangulateOptions, FillTriangulatedResult, LineCap, LineJoin, LineStyle, Path2DCommand, Path2DData, Path2DDrawStyle, Path2DStyle, StrokeLinecap, StrokeLinejoin, StrokeTriangulateOptions, StrokeTriangulatedResult, VectorLike };