modern-path2d 1.2.19 → 1.3.1

package/dist/index.mjs

@@ -56,6 +56,11 @@ class Vector2 {
   get array() {
     return [this.x, this.y];
   }
+  finite() {
+    this.x = Number.isFinite(this.x) ? this.x : 0;
+    this.y = Number.isFinite(this.y) ? this.y : 0;
+    return this;
+  }
   set(x, y) {
     this.x = x;
     this.y = y;
@@ -1746,7 +1751,7 @@ class Curve {
       min.min(p);
       max.max(p);
     }
-    return { min, max };
+    return { min: min.finite(), max: max.finite() };
   }
   getBoundingBox() {
     const { min, max } = this.getMinMax();
@@ -1782,7 +1787,7 @@ class Curve {
       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="none" stroke="black" />`;
+      polygonStr += `<polygon points="${p1.join(",")} ${p2.join(",")} ${p3.join(",")}" fill="none" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />`;
     }
     const viewBox = [min.x, min.y, max.x - min.x, max.y - min.y];
     return `<svg width="${viewBox[2]}" height="${viewBox[3]}" viewBox="${viewBox.join(" ")}" xmlns="http://www.w3.org/2000/svg">${polygonStr}</svg>`;
@@ -1965,76 +1970,24 @@ class RoundCurve extends Curve {
     return [this._center];
   }
   getAdaptivePointArray(output = []) {
-    const { cx, cy, rx, ry, dx, dy } = this;
-    if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
-      return output;
-    }
-    const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
-    const x = cx;
-    const y = cy;
-    const m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
-    if (m === 0) {
+    const { cx, cy, rx, ry, startAngle, endAngle, clockwise } = this;
+    if (!(rx >= 0 && ry >= 0)) {
       return output;
     }
-    if (n === 0) {
-      output[0] = output[6] = x + dx;
-      output[1] = output[3] = y + dy;
-      output[2] = output[4] = x - dx;
-      output[5] = output[7] = y - dy;
-      return output;
-    }
-    let j1 = 0;
-    let j2 = n * 4 + (dx ? 2 : 0) + 2;
-    let j3 = j2;
-    let j4 = m;
-    let x0 = dx + rx;
-    let y0 = dy;
-    let x1 = x + x0;
-    let x2 = x - x0;
-    let y1 = y + y0;
-    output[j1++] = x1;
-    output[j1++] = y1;
-    output[--j2] = y1;
-    output[--j2] = x2;
-    if (dy) {
-      const y22 = y - y0;
-      output[j3++] = x2;
-      output[j3++] = y22;
-      output[--j4] = y22;
-      output[--j4] = x1;
-    }
-    for (let i = 1; i < n; i++) {
-      const a = Math.PI / 2 * (i / n);
-      const x02 = dx + Math.cos(a) * rx;
-      const y02 = dy + Math.sin(a) * ry;
-      const x12 = x + x02;
-      const x22 = x - x02;
-      const y12 = y + y02;
-      const y22 = y - y02;
-      output[j1++] = x12;
-      output[j1++] = y12;
-      output[--j2] = y12;
-      output[--j2] = x22;
-      output[j3++] = x22;
-      output[j3++] = y22;
-      output[--j4] = y22;
-      output[--j4] = x12;
-    }
-    x0 = dx;
-    y0 = dy + ry;
-    x1 = x + x0;
-    x2 = x - x0;
-    y1 = y + y0;
-    const y2 = y - y0;
-    output[j1++] = x1;
-    output[j1++] = y1;
-    output[--j4] = y2;
-    output[--j4] = x1;
-    if (dx) {
-      output[j1++] = x2;
-      output[j1++] = y1;
-      output[--j4] = y2;
-      output[--j4] = x2;
+    let deltaAngle = endAngle - startAngle;
+    if (!clockwise && deltaAngle > 0) {
+      deltaAngle -= 2 * Math.PI;
+    } else if (clockwise && deltaAngle < 0) {
+      deltaAngle += 2 * Math.PI;
+    }
+    const arcLength = Math.abs(deltaAngle);
+    const n = Math.max(1, Math.ceil(arcLength / (Math.PI / 16)));
+    for (let i = 0; i <= n; i++) {
+      const t = i / n;
+      const angle = startAngle + deltaAngle * t;
+      const x = cx + Math.cos(angle) * rx;
+      const y = cy + Math.sin(angle) * ry;
+      output.push(x, y);
     }
     return output;
   }
@@ -2094,7 +2047,7 @@ class RoundCurve extends Curve {
     min.y = Math.min(min.y, cy - halfHeight);
     max.x = Math.max(max.x, cx + halfWidth);
     max.y = Math.max(max.y, cy + halfHeight);
-    return { min, max };
+    return { min: min.finite(), max: max.finite() };
   }
   copy(source) {
     super.copy(source);
@@ -2300,121 +2253,6 @@ class ArcCurve extends RoundCurve {
   }
 }
 
-class LineCurve extends Curve {
-  constructor(p1 = new Vector2(), p2 = new Vector2()) {
-    super();
-    this.p1 = p1;
-    this.p2 = p2;
-  }
-  static from(p1x, p1y, p2x, p2y) {
-    return new LineCurve(
-      new Vector2(p1x, p1y),
-      new Vector2(p2x, p2y)
-    );
-  }
-  getPoint(t, output = new Vector2()) {
-    if (t === 1) {
-      output.copy(this.p2);
-    } else {
-      output.copy(this.p2).sub(this.p1).scale(t).add(this.p1);
-    }
-    return output;
-  }
-  getPointAt(u, output = new Vector2()) {
-    return this.getPoint(u, output);
-  }
-  getTangent(_t, output = new Vector2()) {
-    return output.subVectors(this.p2, this.p1).normalize();
-  }
-  getTangentAt(u, output = new Vector2()) {
-    return this.getTangent(u, output);
-  }
-  getControlPointRefs() {
-    return [this.p1, this.p2];
-  }
-  getAdaptivePointArray(output = []) {
-    output.push(
-      this.p1.x,
-      this.p1.y,
-      this.p2.x,
-      this.p2.y
-    );
-    return output;
-  }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const { p1, p2 } = this;
-    min.x = Math.min(min.x, p1.x, p2.x);
-    min.y = Math.min(min.y, p1.y, p2.y);
-    max.x = Math.max(max.x, p1.x, p2.x);
-    max.y = Math.max(max.y, p1.y, p2.y);
-    return { min, max };
-  }
-  toCommands() {
-    const { p1, p2 } = this;
-    return [
-      { type: "M", x: p1.x, y: p1.y },
-      { type: "L", x: p2.x, y: p2.y }
-    ];
-  }
-  fillTriangulate(options = {}) {
-    let {
-      vertices = [],
-      indices = [],
-      verticesStride = 2,
-      verticesOffset = vertices.length / verticesStride,
-      indicesOffset = indices.length
-    } = options;
-    const x = this.p1.x;
-    const y = this.p1.y;
-    const width = this.p2.x - this.p1.x || 1;
-    const height = this.p2.y - this.p2.y || 1;
-    const points = [
-      x,
-      y,
-      x + width,
-      y,
-      x + width,
-      y + height,
-      x,
-      y + height
-    ];
-    let count = 0;
-    verticesOffset *= verticesStride;
-    vertices[verticesOffset + count] = points[0];
-    vertices[verticesOffset + count + 1] = points[1];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[2];
-    vertices[verticesOffset + count + 1] = points[3];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[6];
-    vertices[verticesOffset + count + 1] = points[7];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[4];
-    vertices[verticesOffset + count + 1] = points[5];
-    count += verticesStride;
-    const verticesIndex = verticesOffset / verticesStride;
-    indices[indicesOffset++] = verticesIndex;
-    indices[indicesOffset++] = verticesIndex + 1;
-    indices[indicesOffset++] = verticesIndex + 2;
-    indices[indicesOffset++] = verticesIndex + 1;
-    indices[indicesOffset++] = verticesIndex + 3;
-    indices[indicesOffset++] = verticesIndex + 2;
-    return { vertices, indices };
-  }
-  drawTo(ctx) {
-    const { p1, p2 } = this;
-    ctx.lineTo(p1.x, p1.y);
-    ctx.lineTo(p2.x, p2.y);
-    return this;
-  }
-  copy(source) {
-    super.copy(source);
-    this.p1.copy(source.p1);
-    this.p2.copy(source.p2);
-    return this;
-  }
-}
-
 class CompositeCurve extends Curve {
   constructor(curves = []) {
     super();
@@ -2492,39 +2330,13 @@ class CompositeCurve extends Curve {
   fillTriangulate(options) {
     const indices = options?.indices ?? [];
     const vertices = options?.vertices ?? [];
-    const lines = [];
-    const fillLines = () => {
-      if (lines.length) {
-        const pointArray = [];
-        lines.forEach((line) => {
-          const x = line.p1.x;
-          const y = line.p1.y;
-          if (pointArray[pointArray.length - 2] !== x || pointArray[pointArray.length - 1] !== y) {
-            pointArray.push(x, y);
-          }
-          pointArray.push(line.p2.x, line.p2.y);
-        });
-        fillTriangulate(pointArray, {
-          ...options,
-          indices,
-          vertices
-        });
-        lines.length = 0;
-      }
-    };
     this.curves.forEach((curve) => {
-      if (curve instanceof LineCurve) {
-        lines.push(curve);
-      } else {
-        fillLines();
-        curve.fillTriangulate({
-          ...options,
-          indices,
-          vertices
-        });
-      }
+      curve.fillTriangulate({
+        ...options,
+        indices,
+        vertices
+      });
     });
-    fillLines();
     return { indices, vertices };
   }
   applyTransform(transform) {
@@ -2533,7 +2345,7 @@ class CompositeCurve extends Curve {
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
-    return { min, max };
+    return { min: min.finite(), max: max.finite() };
   }
   getBoundingBox() {
     const { min, max } = this.getMinMax();
@@ -2633,7 +2445,7 @@ class CubicBezierCurve extends Curve {
       }
     };
     samplePoints(tValues, 10);
-    return { min, max };
+    return { min: min.finite(), max: max.finite() };
   }
   toCommands() {
     const { p1, cp1, cp2, p2 } = this;
@@ -2685,6 +2497,125 @@ class EllipseCurve extends RoundCurve {
   }
 }
 
+class LineCurve extends Curve {
+  constructor(p1 = new Vector2(), p2 = new Vector2()) {
+    super();
+    this.p1 = p1;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, p2x, p2y) {
+    return new LineCurve(
+      new Vector2(p1x, p1y),
+      new Vector2(p2x, p2y)
+    );
+  }
+  getPoint(t, output = new Vector2()) {
+    if (t === 1) {
+      output.copy(this.p2);
+    } else {
+      output.copy(this.p2).sub(this.p1).scale(t).add(this.p1);
+    }
+    return output;
+  }
+  getPointAt(u, output = new Vector2()) {
+    return this.getPoint(u, output);
+  }
+  getTangent(_t, output = new Vector2()) {
+    return output.subVectors(this.p2, this.p1).normalize();
+  }
+  getTangentAt(u, output = new Vector2()) {
+    return this.getTangent(u, output);
+  }
+  getControlPointRefs() {
+    return [this.p1, this.p2];
+  }
+  getAdaptivePointArray(output = []) {
+    output.push(
+      this.p1.x,
+      this.p1.y,
+      this.p2.x,
+      this.p2.y
+    );
+    return output;
+  }
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { p1, p2 } = this;
+    min.x = Math.min(min.x, p1.x, p2.x);
+    min.y = Math.min(min.y, p1.y, p2.y);
+    max.x = Math.max(max.x, p1.x, p2.x);
+    max.y = Math.max(max.y, p1.y, p2.y);
+    return { min: min.finite(), max: max.finite() };
+  }
+  toCommands() {
+    const { p1, p2 } = this;
+    return [
+      { type: "M", x: p1.x, y: p1.y },
+      { type: "L", x: p2.x, y: p2.y }
+    ];
+  }
+  fillTriangulate(options = {}) {
+    let {
+      vertices = [],
+      indices = [],
+      verticesStride = 2,
+      verticesOffset = vertices.length / verticesStride,
+      indicesOffset = indices.length
+    } = options;
+    const minX = Math.min(this.p1.x, this.p2.x);
+    const maxX = Math.max(this.p1.x, this.p2.x);
+    const minY = Math.min(this.p1.y, this.p2.y);
+    const maxY = Math.max(this.p1.y, this.p2.y);
+    const x = minX;
+    const y = minY;
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const points = [
+      x,
+      y,
+      x + width,
+      y,
+      x + width,
+      y + height,
+      x,
+      y + height
+    ];
+    let count = 0;
+    verticesOffset *= verticesStride;
+    vertices[verticesOffset + count] = points[0];
+    vertices[verticesOffset + count + 1] = points[1];
+    count += verticesStride;
+    vertices[verticesOffset + count] = points[2];
+    vertices[verticesOffset + count + 1] = points[3];
+    count += verticesStride;
+    vertices[verticesOffset + count] = points[6];
+    vertices[verticesOffset + count + 1] = points[7];
+    count += verticesStride;
+    vertices[verticesOffset + count] = points[4];
+    vertices[verticesOffset + count + 1] = points[5];
+    count += verticesStride;
+    const verticesIndex = verticesOffset / verticesStride;
+    indices[indicesOffset++] = verticesIndex;
+    indices[indicesOffset++] = verticesIndex + 1;
+    indices[indicesOffset++] = verticesIndex + 2;
+    indices[indicesOffset++] = verticesIndex + 1;
+    indices[indicesOffset++] = verticesIndex + 3;
+    indices[indicesOffset++] = verticesIndex + 2;
+    return { vertices, indices };
+  }
+  drawTo(ctx) {
+    const { p1, p2 } = this;
+    ctx.lineTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    return this;
+  }
+  copy(source) {
+    super.copy(source);
+    this.p1.copy(source.p1);
+    this.p2.copy(source.p2);
+    return this;
+  }
+}
+
 class PloygonCurve extends CompositeCurve {
   //
 }
@@ -2780,7 +2711,7 @@ class QuadraticBezierCurve extends Curve {
     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);
-    return { min, max };
+    return { min: min.finite(), max: max.finite() };
   }
   toCommands() {
     const { p1, cp, p2 } = this;
@@ -3422,7 +3353,7 @@ class Path2D extends CompositeCurve {
         }
       }
     });
-    return { min, max };
+    return { min: min.finite(), max: max.finite() };
   }
   strokeTriangulate(options) {
     const indices = options?.indices ?? [];
@@ -3558,6 +3489,61 @@ class Path2DSet {
   }
 }
 
+class FFDControlGrid {
+  constructor(rows, cols, width = 1, height = 1) {
+    this.rows = rows;
+    this.cols = cols;
+    this.width = width;
+    this.height = height;
+    for (let i = 0; i < rows; i++) {
+      this.controlPoints[i] = [];
+      for (let j = 0; j < cols; j++) {
+        this.controlPoints[i][j] = {
+          x: j / (cols - 1) * width,
+          y: i / (rows - 1) * height
+        };
+      }
+    }
+  }
+  controlPoints = [];
+  moveControlPoint(i, j, dx, dy) {
+    this.controlPoints[i][j].x += dx;
+    this.controlPoints[i][j].y += dy;
+    return this;
+  }
+}
+function bsplineBasis(t) {
+  const B = [];
+  B[0] = (1 - t) ** 3 / 6;
+  B[1] = (3 * t ** 3 - 6 * t ** 2 + 4) / 6;
+  B[2] = (-3 * t ** 3 + 3 * t ** 2 + 3 * t + 1) / 6;
+  B[3] = t ** 3 / 6;
+  return B;
+}
+function applyFFD(point, grid, width = grid.width, height = grid.height) {
+  const s = point.x / width * (grid.cols - 1);
+  const t = point.y / height * (grid.rows - 1);
+  const i = Math.floor(s);
+  const j = Math.floor(t);
+  const u = s - i;
+  const v = t - j;
+  const bu = bsplineBasis(u);
+  const bv = bsplineBasis(v);
+  let x = 0;
+  let y = 0;
+  for (let m = 0; m < 4; m++) {
+    for (let n = 0; n < 4; n++) {
+      const row = Math.min(Math.max(j - 1 + m, 0), grid.rows - 1);
+      const col = Math.min(Math.max(i - 1 + n, 0), grid.cols - 1);
+      const cp = grid.controlPoints[row][col];
+      const weight = bu[n] * bv[m];
+      x += cp.x * weight;
+      y += cp.y * weight;
+    }
+  }
+  point.set(x, y);
+}
+
 const dataUri = "data:image/svg+xml;";
 const base64DataUri = `${dataUri}base64,`;
 const utf8DataUri = `${dataUri}charset=utf8,`;
@@ -4087,4 +4073,4 @@ function svgToPath2DSet(svg) {
   );
 }
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Vector2, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, parseArcCommand, parsePathDataArgs, 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, parseArcCommand, parsePathDataArgs, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDOM, svgToPath2DSet };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "modern-path2d",
   "type": "module",
-  "version": "1.2.19",
+  "version": "1.3.1",
   "packageManager": "pnpm@9.15.1",
-  "description": "A modern Path2D library, fully compatible with Web Path2D, with additional support for path animation, path deformation, path playback, etc.",
+  "description": "A Path2D library, fully compatible with Web Path2D, with additional support for triangulate、animation、deformation etc.",
   "author": "wxm",
   "license": "MIT",
   "homepage": "https://github.com/qq15725/modern-path2d",