modern-path2d 1.3.0 → 1.3.2

package/dist/index.mjs

@@ -1769,32 +1769,6 @@ class Curve {
       options
     );
   }
-  toTriangulatedSVGString(result = this.fillTriangulate(), padding = 0) {
-    const { vertices, indices } = result;
-    const min = { x: -padding, y: -padding };
-    const max = { x: padding, y: padding };
-    const getPoint = (indice) => {
-      const x = vertices[indice * 2];
-      const y = vertices[indice * 2 + 1];
-      min.x = Math.min(min.x, x + padding);
-      max.x = Math.max(max.x, x + padding);
-      min.y = Math.min(min.y, y + padding);
-      max.y = Math.max(max.y, y + padding);
-      return [x, y];
-    };
-    let polygonStr = "";
-    for (let i = 0, len = indices.length; i < len; i += 3) {
-      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" 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>`;
-  }
-  toTriangulatedSVG(result, padding) {
-    return new DOMParser().parseFromString(this.toTriangulatedSVGString(result, padding), "image/svg+xml").documentElement;
-  }
   toCommands() {
     const comds = [];
     const potins = this.getPoints();
@@ -1970,76 +1944,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)) {
+    const { cx, cy, rx, ry, startAngle, endAngle, clockwise } = this;
+    if (!(rx >= 0 && ry >= 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) {
-      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 deltaAngle = endAngle - startAngle;
+    if (!clockwise && deltaAngle > 0) {
+      deltaAngle -= 2 * Math.PI;
+    } else if (clockwise && deltaAngle < 0) {
+      deltaAngle += 2 * Math.PI;
     }
-    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;
+    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;
   }
@@ -2305,121 +2227,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: 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 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();
@@ -2467,7 +2274,9 @@ class CompositeCurve extends Curve {
     return this.curves.flatMap((curve) => curve.getControlPointRefs());
   }
   _removeNextPointIfEqualPrevPoint(output, offset) {
-    if (output[offset - 1] === output[offset + 1] && output[offset] === output[offset + 2]) {
+    const p1 = [output[offset - 1], output[offset]];
+    const p2 = [output[offset + 1], output[offset + 2]];
+    if (p1[0] === p2[0] && p1[1] === p2[1]) {
       output.splice(offset + 1, 2);
     }
     return output;
@@ -2494,43 +2303,19 @@ class CompositeCurve extends Curve {
     });
     return output;
   }
+  strokeTriangulate(options) {
+    if (this.curves.length === 1) {
+      return this.curves[0].strokeTriangulate(options);
+    } else {
+      return super.strokeTriangulate(options);
+    }
+  }
   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
-        });
-      }
-    });
-    fillLines();
-    return { indices, vertices };
+    if (this.curves.length === 1) {
+      return this.curves[0].fillTriangulate(options);
+    } else {
+      return super.fillTriangulate(options);
+    }
   }
   applyTransform(transform) {
     this.curves.forEach((curve) => curve.applyTransform(transform));
@@ -2690,6 +2475,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 || options.style?.strokeWidth || 1;
+    const height = maxY - minY || options.style?.strokeWidth || 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 PloygonCurve extends CompositeCurve {
   //
 }
@@ -3436,7 +3340,21 @@ class Path2D extends CompositeCurve {
       curve.strokeTriangulate({
         ...options,
         indices,
-        vertices
+        vertices,
+        style: { ...this.style }
+      });
+    });
+    return { indices, vertices };
+  }
+  fillTriangulate(options) {
+    const indices = options?.indices ?? [];
+    const vertices = options?.vertices ?? [];
+    this.curves.forEach((curve) => {
+      curve.fillTriangulate({
+        ...options,
+        indices,
+        vertices,
+        style: { ...this.style }
       });
     });
     return { indices, vertices };
@@ -3532,6 +3450,34 @@ class Path2DSet {
     this.paths.forEach((path) => path.getMinMax(min, max, withStyle));
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
+  toTriangulatedSVGString(result = this.paths.map((p) => p.fillTriangulate()), padding = 0) {
+    let polygonStr = "";
+    const min = { x: -padding, y: -padding };
+    const max = { x: padding, y: padding };
+    const results = Array.isArray(result) ? result : [result];
+    results.forEach(({ vertices, indices }) => {
+      const getPoint = (indice) => {
+        const x = vertices[indice * 2];
+        const y = vertices[indice * 2 + 1];
+        min.x = Math.min(min.x, x + padding);
+        max.x = Math.max(max.x, x + padding);
+        min.y = Math.min(min.y, y + padding);
+        max.y = Math.max(max.y, y + padding);
+        return [x, y];
+      };
+      for (let i = 0, len = indices.length; i < len; i += 3) {
+        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" 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>`;
+  }
+  toTriangulatedSVG(result, padding) {
+    return new DOMParser().parseFromString(this.toTriangulatedSVGString(result, padding), "image/svg+xml").documentElement;
+  }
   toSVGString() {
     const { x, y, width, height } = this.getBoundingBox();
     const content = this.paths.map((path) => path.toSVGPathString()).join("");

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "modern-path2d",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "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",