modern-path2d 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -3,6 +3,12 @@ class Point2D {
     this.x = x;
     this.y = y;
   }
+  static get MAX() {
+    return new Point2D(Infinity, Infinity);
+  }
+  static get MIN() {
+    return new Point2D(-Infinity, -Infinity);
+  }
   set(x, y) {
     this.x = x;
     this.y = y;
@@ -75,6 +81,9 @@ class Curve {
     __publicField$5(this, "_cacheArcLengths");
     __publicField$5(this, "_needsUpdate", false);
   }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    return { min, max };
+  }
   getDivisions(divisions) {
     return divisions;
   }
@@ -170,6 +179,26 @@ class Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(this.getUtoTmapping(u), output);
   }
+  getData() {
+    return this.getCommands().map((cmd) => {
+      switch (cmd.type) {
+        case "M":
+          return `M ${cmd.x} ${cmd.y}`;
+        case "L":
+          return `L ${cmd.x} ${cmd.y}`;
+        case "C":
+          return `C ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
+        case "Q":
+          return `Q ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
+        case "A":
+          return `A ${cmd.rx} ${cmd.ry} ${cmd.xAxisRotation} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
+        case "Z":
+          return "Z";
+        default:
+          return "";
+      }
+    }).join(" ");
+  }
   clone() {
     return new this.constructor().copy(this);
   }
@@ -187,26 +216,27 @@ class CircleCurve extends Curve {
     this.start = start;
     this.end = end;
   }
-  getPole(min, max) {
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     min.x = Math.min(min.x, this.center.x - this.radius);
     min.y = Math.min(min.y, this.center.y - this.radius);
     max.x = Math.max(max.x, this.center.x + this.radius);
     max.y = Math.max(max.y, this.center.y + this.radius);
+    return { min, max };
   }
-  getPoint(index) {
+  getPoint(t) {
     const { radius, center } = this;
-    return center.clone().add(this.getNormal(index).clone().multiplyScalar(radius));
+    return center.clone().add(this.getNormal(t).clone().multiplyScalar(radius));
   }
-  getTangent(index) {
-    const { x, y } = this.getNormal(index);
+  getTangent(t) {
+    const { x, y } = this.getNormal(t);
     return new Point2D(-y, x);
   }
-  getNormal(index) {
+  getNormal(t) {
     const { start, end } = this;
-    const t = index * (end - start) + start - 0.5 * Math.PI;
-    return new Point2D(Math.cos(t), Math.sin(t));
+    const _t = t * (end - start) + start - 0.5 * Math.PI;
+    return new Point2D(Math.cos(_t), Math.sin(_t));
   }
-  toPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -267,8 +297,20 @@ class CubicBezierCurve extends Curve {
     );
     return output;
   }
-  toPathCommands() {
-    return [];
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    const { v0, v1, v2, v3 } = this;
+    min.x = Math.min(min.x, v0.x, v1.x, v2.x, v3.x);
+    min.y = Math.min(min.y, v0.y, v1.y, v2.y, v3.y);
+    max.x = Math.max(max.x, v0.x, v1.x, v2.x, v3.x);
+    max.y = Math.max(max.y, v0.y, v1.y, v2.y, v3.y);
+    return { min, max };
+  }
+  getCommands() {
+    const { v0, v1, v2, v3 } = this;
+    return [
+      { type: "M", x: v0.x, y: v0.y },
+      { type: "C", x1: v1.x, y1: v1.y, x2: v2.x, y2: v2.y, x: v3.x, y: v3.y }
+    ];
   }
   drawTo(ctx) {
     const { v0, v1, v2, v3 } = this;
@@ -335,18 +377,30 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
-  toPathCommands() {
+  getCommands() {
     const { x, y, rx, ry, startAngle, endAngle, clockwise } = this;
+    const anticlockwise = !clockwise;
     const startX = x + rx * Math.cos(startAngle);
     const startY = y + ry * Math.sin(startAngle);
     const endX = x + rx * Math.cos(endAngle);
     const endY = y + ry * Math.sin(endAngle);
-    const largeArcFlag = (endAngle - startAngle) % (2 * Math.PI) > Math.PI ? 1 : 0;
-    const sweepFlag = clockwise ? 0 : 1;
-    return [
-      { type: "M", x: startX, y: startY },
-      { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
-    ];
+    const angleDiff = Math.abs(startAngle - endAngle);
+    const largeArcFlag = angleDiff > Math.PI ? 1 : 0;
+    const sweepFlag = anticlockwise ? 0 : 1;
+    const midX = x + rx * Math.cos(startAngle + (endAngle - startAngle) / 2);
+    const midY = y + ry * Math.sin(startAngle + (endAngle - startAngle) / 2);
+    if (angleDiff >= 2 * Math.PI) {
+      return [
+        { type: "M", x: startX, y: startY },
+        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag: 1, sweepFlag, x: midX, y: midY },
+        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag: 1, sweepFlag, x: startX, y: startY }
+      ];
+    } else {
+      return [
+        { type: "M", x: startX, y: startY },
+        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
+      ];
+    }
   }
   drawTo(ctx) {
     const { x, y, rx, ry, startAngle } = this;
@@ -403,12 +457,21 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(u, output);
   }
-  toPathCommands() {
+  getCommands() {
+    const { v1, v2 } = this;
     return [
-      { type: "M", x: this.v1.x, y: this.v1.y },
-      { type: "L", x: this.v2.x, y: this.v2.y }
+      { type: "M", x: v1.x, y: v1.y },
+      { type: "L", x: v2.x, y: v2.y }
     ];
   }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    const { v1, v2 } = this;
+    min.x = Math.min(min.x, v1.x, v2.x);
+    min.y = Math.min(min.y, v1.y, v2.y);
+    max.x = Math.max(max.x, v1.x, v2.x);
+    max.y = Math.max(max.y, v1.y, v2.y);
+    return { min, max };
+  }
   drawTo(ctx) {
     const { v1, v2 } = this;
     ctx.moveTo(v1.x, v1.y);
@@ -490,8 +553,8 @@ class HeartCurve extends Curve {
     const line = this.getCurrentLine(value);
     return new Point2D(line.v2.y - line.v1.y, -(line.v2.x - line.v1.x)).normalize();
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -548,8 +611,12 @@ class PloygonCurve extends Curve {
     const line = this.getCurrentLine(value);
     return new Point2D(line.v2.y - line.v1.y, -(line.v2.x - line.v1.x)).normalize();
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -571,8 +638,24 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  toPathCommands() {
-    return [];
+  getCommands() {
+    const { v0, v1, v2 } = this;
+    return [
+      { type: "M", x: v0.x, y: v0.y },
+      { type: "Q", x1: v1.x, y1: v1.y, x: v2.x, y: v2.y }
+    ];
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    const { v0, v1, v2 } = this;
+    const x1 = 0.5 * (v0.x + v1.x);
+    const y1 = 0.5 * (v0.y + v1.y);
+    const x2 = 0.5 * (v0.x + v2.x);
+    const y2 = 0.5 * (v0.y + v2.y);
+    min.x = Math.min(min.x, v0.x, v2.x, x1, x2);
+    min.y = Math.min(min.y, v0.y, v2.y, y1, y2);
+    max.x = Math.max(max.x, v0.x, v2.x, x1, x2);
+    max.y = Math.max(max.y, v0.y, v2.y, y1, y2);
+    return { min, max };
   }
   drawTo(ctx) {
     const { v0, v1, v2 } = this;
@@ -662,8 +745,12 @@ class RectangularCurve extends Curve {
     const { v1, v2 } = this.getCurrentLine(value);
     return new Point2D(v2.y - v1.y, -(v2.x - v1.x)).normalize();
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -693,7 +780,7 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  toPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -701,9 +788,8 @@ class SplineCurve extends Curve {
   copy(source) {
     super.copy(source);
     this.points = [];
-    for (let i = 0, l = source.points.length; i < l; i++) {
-      const point = source.points[i];
-      this.points.push(point.clone());
+    for (let i = 0, len = source.points.length; i < len; i++) {
+      this.points.push(source.points[i].clone());
     }
     return this;
   }
@@ -887,8 +973,12 @@ class CurvePath extends Curve {
     this.currentPoint.copy(curve.getPoint(1));
     return this;
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -917,16 +1007,12 @@ class Path2D {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
   }
-  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
-    return this;
-  }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.currentPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  addPath(path) {
+    this.paths.push(...path.paths.map((v) => v.clone()));
     return this;
   }
-  lineTo(x, y) {
-    this.currentPath.lineTo(x, y);
+  closePath() {
+    this.currentPath.closePath();
     return this;
   }
   moveTo(x, y) {
@@ -935,10 +1021,56 @@ class Path2D {
     this.currentPath.moveTo(x, y);
     return this;
   }
+  lineTo(x, y) {
+    this.currentPath.lineTo(x, y);
+    return this;
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.currentPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    return this;
+  }
   quadraticCurveTo(cpx, cpy, x, y) {
     this.currentPath.quadraticCurveTo(cpx, cpy, x, y);
     return this;
   }
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
+    return this;
+  }
+  arcTo(x1, y1, x2, y2, radius) {
+    const point = this.currentPath.currentPoint;
+    const currentX = point.x;
+    const currentY = point.y;
+    const dx1 = x1 - currentX;
+    const dy1 = y1 - currentY;
+    const dx2 = x2 - x1;
+    const dy2 = y2 - y1;
+    const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+    if (len1 < radius || len2 < radius) {
+      this.lineTo(x2, y2);
+      return this;
+    }
+    const unitV1 = { x: dx1 / len1, y: dy1 / len1 };
+    const unitV2 = { x: dx2 / len2, y: dy2 / len2 };
+    const centerX = x1 - unitV1.y * radius;
+    const centerY = y1 + unitV1.x * radius;
+    const startAngle = Math.atan2(unitV1.y, unitV1.x);
+    const endAngle = Math.atan2(unitV2.y, unitV2.x);
+    let angleDiff = endAngle - startAngle;
+    if (angleDiff > Math.PI) {
+      angleDiff -= 2 * Math.PI;
+    } else if (angleDiff < -Math.PI) {
+      angleDiff += 2 * Math.PI;
+    }
+    this.arc(centerX, centerY, radius, startAngle, startAngle + angleDiff, false);
+    this.lineTo(x2, y2);
+    return this;
+  }
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    this.currentPath.absellipse(x, y, radiusX, radiusY, startAngle, endAngle, !counterclockwise, rotation);
+    return this;
+  }
   rect(x, y, w, h) {
     this.currentPath.rect(x, y, w, h);
     return this;
@@ -947,8 +1079,33 @@ class Path2D {
     this.currentPath.splineThru(points);
     return this;
   }
-  toPathCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.toPathCommands()));
+  getMinMax(min = new Point2D(), max = new Point2D()) {
+    this.paths.forEach((path) => path.curves.forEach((curve) => curve.getMinMax(min, max)));
+    return { min, max };
+  }
+  getCommands() {
+    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
+  }
+  getData() {
+    return this.paths.map((path) => path.getData()).join(" ");
+  }
+  getBoundingBox() {
+    const min = Point2D.MAX;
+    const max = Point2D.MIN;
+    this.paths.forEach((path) => path.getMinMax(min, max));
+    return {
+      x: min.x,
+      y: min.y,
+      width: max.x - min.x,
+      height: max.y - min.y
+    };
+  }
+  getSvgString() {
+    const { x, y, width, height } = this.getBoundingBox();
+    return `<svg viewBox="${x} ${y} ${width} ${height}" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" d="${this.getData()}"></path></svg>`;
+  }
+  getSvgDataUri() {
+    return `data:image/svg+xml;base64,${btoa(this.getSvgString())}`;
   }
   drawTo(ctx) {
     this.paths.forEach((path) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-path2d",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "packageManager": "pnpm@9.9.0",
   "description": "A modern Path2D library, fully compatible with Web Path2D, with additional support for path animation, path deformation, path playback, etc.",
   "author": "wxm",