modern-path2d 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -181,8 +181,8 @@ class Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(this.getUtoTmapping(u), output);
   }
-  getPathData() {
-    return this.getPathCommands().map((cmd) => {
+  getData() {
+    return this.getCommands().map((cmd) => {
       switch (cmd.type) {
         case "M":
           return `M ${cmd.x} ${cmd.y}`;
@@ -238,7 +238,7 @@ class CircleCurve extends Curve {
     const _t = t * (end - start) + start - 0.5 * Math.PI;
     return new Point2D(Math.cos(_t), Math.sin(_t));
   }
-  getPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -307,7 +307,7 @@ class CubicBezierCurve extends Curve {
     max.y = Math.max(max.y, v0.y, v1.y, v2.y, v3.y);
     return { min, max };
   }
-  getPathCommands() {
+  getCommands() {
     const { v0, v1, v2, v3 } = this;
     return [
       { type: "M", x: v0.x, y: v0.y },
@@ -379,7 +379,7 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
-  getPathCommands() {
+  getCommands() {
     const { x, y, rx, ry, startAngle, endAngle, clockwise } = this;
     const anticlockwise = !clockwise;
     const startX = x + rx * Math.cos(startAngle);
@@ -459,7 +459,7 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(u, output);
   }
-  getPathCommands() {
+  getCommands() {
     const { v1, v2 } = this;
     return [
       { type: "M", x: v1.x, y: v1.y },
@@ -555,8 +555,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();
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -613,8 +613,8 @@ 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();
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
@@ -640,7 +640,7 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  getPathCommands() {
+  getCommands() {
     const { v0, v1, v2 } = this;
     return [
       { type: "M", x: v0.x, y: v0.y },
@@ -747,8 +747,8 @@ class RectangularCurve extends Curve {
     const { v1, v2 } = this.getCurrentLine(value);
     return new Point2D(v2.y - v1.y, -(v2.x - v1.x)).normalize();
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
@@ -782,7 +782,7 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  getPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -975,8 +975,8 @@ class CurvePath extends Curve {
     this.currentPoint.copy(curve.getPoint(1));
     return this;
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
@@ -1005,14 +1005,52 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class Path2D {
-  constructor() {
+  constructor(path) {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
+    if (path) {
+      if (path instanceof Path2D) {
+        this.addPath(path);
+      } else if (Array.isArray(path)) {
+        this.addCommands(path);
+      } else {
+        this.addData(path);
+      }
+    }
   }
   addPath(path) {
     this.paths.push(...path.paths.map((v) => v.clone()));
     return this;
   }
+  addCommands(commands) {
+    for (let i = 0, len = commands.length; i < len; i++) {
+      const cmd = commands[i];
+      switch (cmd.type) {
+        case "M":
+          this.moveTo(cmd.x, cmd.y);
+          break;
+        case "L":
+          this.lineTo(cmd.x, cmd.y);
+          break;
+        case "C":
+          this.bezierCurveTo(cmd.x2, cmd.y2, cmd.x1, cmd.y1, cmd.x, cmd.y);
+          break;
+        case "Q":
+          this.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+          break;
+        case "A":
+          break;
+        case "Z":
+          this.closePath();
+          break;
+      }
+    }
+    return this;
+  }
+  addData(data) {
+    console.error("TODO", data);
+    return this;
+  }
   closePath() {
     this.currentPath.closePath();
     return this;
@@ -1085,11 +1123,11 @@ class Path2D {
     this.paths.forEach((path) => path.curves.forEach((curve) => curve.getMinMax(min, max)));
     return { min, max };
   }
-  getPathCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getPathCommands()));
+  getCommands() {
+    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
   }
-  getPathData() {
-    return this.paths.map((path) => path.getPathData()).join(" ");
+  getData() {
+    return this.paths.map((path) => path.getData()).join(" ");
   }
   getBoundingBox() {
     const min = Point2D.MAX;
@@ -1104,7 +1142,7 @@ class Path2D {
   }
   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.getPathData()}"></path></svg>`;
+    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())}`;

package/dist/index.d.cts

@@ -60,7 +60,7 @@ declare abstract class Curve {
     protected _cacheArcLengths?: number[];
     protected _needsUpdate: boolean;
     abstract getPoint(t: number, output?: Point2D): Point2D;
-    abstract getPathCommands(): PathCommand[];
+    abstract getCommands(): PathCommand[];
     abstract drawTo(ctx: CanvasRenderingContext2D): void;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
@@ -76,7 +76,7 @@ declare abstract class Curve {
     getUtoTmapping(u: number, distance?: number): number;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getPathData(): string;
+    getData(): string;
     clone(): this;
     copy(source: Curve): this;
 }
@@ -106,7 +106,7 @@ declare class CurvePath extends Curve {
     absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
     ellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
     absellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -128,7 +128,7 @@ declare class CircleCurve extends Curve {
     getPoint(t: number): Point2D;
     getTangent(t: number): Point2D;
     getNormal(t: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
 }
 
@@ -143,7 +143,7 @@ declare class CubicBezierCurve extends Curve {
         min: Point2D;
         max: Point2D;
     };
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: CubicBezierCurve): this;
 }
@@ -160,7 +160,7 @@ declare class EllipseCurve extends Curve {
     constructor(x?: number, y?: number, rx?: number, ry?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: EllipseCurve): this;
 }
@@ -178,7 +178,7 @@ declare class HeartCurve extends Curve {
     getCurrentLine(value: number): Curve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -191,7 +191,7 @@ declare class LineCurve extends Curve {
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -216,7 +216,7 @@ declare class PloygonCurve extends Curve {
     getCurrentLine(value: number): LineCurve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -230,7 +230,7 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -257,7 +257,7 @@ declare class RectangularCurve extends Curve {
     getCurrentLine(t: number): LineCurve;
     getTangent(t: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -270,7 +270,7 @@ declare class SplineCurve extends Curve {
     constructor(points?: Point2D[]);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
     copy(source: SplineCurve): this;
 }
@@ -281,7 +281,10 @@ declare class SplineCurve extends Curve {
 declare class Path2D {
     currentPath: CurvePath;
     paths: CurvePath[];
+    constructor(path?: Path2D | PathCommand[] | string);
     addPath(path: Path2D): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
     closePath(): this;
     moveTo(x: number, y: number): this;
     lineTo(x: number, y: number): this;
@@ -289,15 +292,15 @@ declare class Path2D {
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
     arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
     rect(x: number, y: number, w: number, h: number): this;
     splineThru(points: Point2D[]): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    getPathCommands(): PathCommand[];
-    getPathData(): string;
+    getCommands(): PathCommand[];
+    getData(): string;
     getBoundingBox(): {
         x: number;
         y: number;

package/dist/index.d.mts

@@ -60,7 +60,7 @@ declare abstract class Curve {
     protected _cacheArcLengths?: number[];
     protected _needsUpdate: boolean;
     abstract getPoint(t: number, output?: Point2D): Point2D;
-    abstract getPathCommands(): PathCommand[];
+    abstract getCommands(): PathCommand[];
     abstract drawTo(ctx: CanvasRenderingContext2D): void;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
@@ -76,7 +76,7 @@ declare abstract class Curve {
     getUtoTmapping(u: number, distance?: number): number;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getPathData(): string;
+    getData(): string;
     clone(): this;
     copy(source: Curve): this;
 }
@@ -106,7 +106,7 @@ declare class CurvePath extends Curve {
     absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
     ellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
     absellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -128,7 +128,7 @@ declare class CircleCurve extends Curve {
     getPoint(t: number): Point2D;
     getTangent(t: number): Point2D;
     getNormal(t: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
 }
 
@@ -143,7 +143,7 @@ declare class CubicBezierCurve extends Curve {
         min: Point2D;
         max: Point2D;
     };
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: CubicBezierCurve): this;
 }
@@ -160,7 +160,7 @@ declare class EllipseCurve extends Curve {
     constructor(x?: number, y?: number, rx?: number, ry?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: EllipseCurve): this;
 }
@@ -178,7 +178,7 @@ declare class HeartCurve extends Curve {
     getCurrentLine(value: number): Curve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -191,7 +191,7 @@ declare class LineCurve extends Curve {
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -216,7 +216,7 @@ declare class PloygonCurve extends Curve {
     getCurrentLine(value: number): LineCurve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -230,7 +230,7 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -257,7 +257,7 @@ declare class RectangularCurve extends Curve {
     getCurrentLine(t: number): LineCurve;
     getTangent(t: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -270,7 +270,7 @@ declare class SplineCurve extends Curve {
     constructor(points?: Point2D[]);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
     copy(source: SplineCurve): this;
 }
@@ -281,7 +281,10 @@ declare class SplineCurve extends Curve {
 declare class Path2D {
     currentPath: CurvePath;
     paths: CurvePath[];
+    constructor(path?: Path2D | PathCommand[] | string);
     addPath(path: Path2D): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
     closePath(): this;
     moveTo(x: number, y: number): this;
     lineTo(x: number, y: number): this;
@@ -289,15 +292,15 @@ declare class Path2D {
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
     arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
     rect(x: number, y: number, w: number, h: number): this;
     splineThru(points: Point2D[]): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    getPathCommands(): PathCommand[];
-    getPathData(): string;
+    getCommands(): PathCommand[];
+    getData(): string;
     getBoundingBox(): {
         x: number;
         y: number;

package/dist/index.d.ts

@@ -60,7 +60,7 @@ declare abstract class Curve {
     protected _cacheArcLengths?: number[];
     protected _needsUpdate: boolean;
     abstract getPoint(t: number, output?: Point2D): Point2D;
-    abstract getPathCommands(): PathCommand[];
+    abstract getCommands(): PathCommand[];
     abstract drawTo(ctx: CanvasRenderingContext2D): void;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
@@ -76,7 +76,7 @@ declare abstract class Curve {
     getUtoTmapping(u: number, distance?: number): number;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getPathData(): string;
+    getData(): string;
     clone(): this;
     copy(source: Curve): this;
 }
@@ -106,7 +106,7 @@ declare class CurvePath extends Curve {
     absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
     ellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
     absellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -128,7 +128,7 @@ declare class CircleCurve extends Curve {
     getPoint(t: number): Point2D;
     getTangent(t: number): Point2D;
     getNormal(t: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
 }
 
@@ -143,7 +143,7 @@ declare class CubicBezierCurve extends Curve {
         min: Point2D;
         max: Point2D;
     };
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: CubicBezierCurve): this;
 }
@@ -160,7 +160,7 @@ declare class EllipseCurve extends Curve {
     constructor(x?: number, y?: number, rx?: number, ry?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: EllipseCurve): this;
 }
@@ -178,7 +178,7 @@ declare class HeartCurve extends Curve {
     getCurrentLine(value: number): Curve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -191,7 +191,7 @@ declare class LineCurve extends Curve {
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -216,7 +216,7 @@ declare class PloygonCurve extends Curve {
     getCurrentLine(value: number): LineCurve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -230,7 +230,7 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -257,7 +257,7 @@ declare class RectangularCurve extends Curve {
     getCurrentLine(t: number): LineCurve;
     getTangent(t: number): Point2D;
     getNormal(value: number): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -270,7 +270,7 @@ declare class SplineCurve extends Curve {
     constructor(points?: Point2D[]);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
     copy(source: SplineCurve): this;
 }
@@ -281,7 +281,10 @@ declare class SplineCurve extends Curve {
 declare class Path2D {
     currentPath: CurvePath;
     paths: CurvePath[];
+    constructor(path?: Path2D | PathCommand[] | string);
     addPath(path: Path2D): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
     closePath(): this;
     moveTo(x: number, y: number): this;
     lineTo(x: number, y: number): this;
@@ -289,15 +292,15 @@ declare class Path2D {
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
     arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
     rect(x: number, y: number, w: number, h: number): this;
     splineThru(points: Point2D[]): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    getPathCommands(): PathCommand[];
-    getPathData(): string;
+    getCommands(): PathCommand[];
+    getData(): string;
     getBoundingBox(): {
         x: number;
         y: number;

package/dist/index.js

@@ -1 +1 @@
-(function(g,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(g=typeof globalThis<"u"?globalThis:g||self,r(g.modernPath2d={}))})(this,function(g){"use strict";var O=Object.defineProperty;var H=(g,r,x)=>r in g?O(g,r,{enumerable:!0,configurable:!0,writable:!0,value:x}):g[r]=x;var p=(g,r,x)=>H(g,typeof r!="symbol"?r+"":r,x);class r{constructor(e=0,t=0){this.x=e,this.y=t}static get MAX(){return new r(1/0,1/0)}static get MIN(){return new r(-1/0,-1/0)}set(e,t){return this.x=e,this.y=t,this}add(e){return this.x+=e.x,this.y+=e.y,this}sub(e){return this.x-=e.x,this.y-=e.y,this}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,s=this.y-e.y;return t*t+s*s}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}multiplyScalar(e){return this.x*=e,this.y*=e,this}divideScalar(e){return this.multiplyScalar(1/e)}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}normalize(){return this.divideScalar(this.length()||1)}lerpVectors(e,t,s){return this.x=e.x+(t.x-e.x)*s,this.y=e.y+(t.y-e.y)*s,this}equals(e){return this.x===e.x&&this.y===e.y}copy(e){return this.x=e.x,this.y=e.y,this}clone(){return new r(this.x,this.y)}}class x{constructor(){p(this,"arcLengthDivisions",200);p(this,"_cacheArcLengths");p(this,"_needsUpdate",!1)}getMinMax(e=r.MAX,t=r.MIN){return{min:e,max:t}}getDivisions(e){return e}getPointAt(e,t=new r){return this.getPoint(this.getUtoTmapping(e),t)}getPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPoint(s/e));return t}getSpacedPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPointAt(s/e));return t}getLength(){const e=this.getLengths();return e[e.length-1]}getLengths(e=this.arcLengthDivisions){if(this._cacheArcLengths&&this._cacheArcLengths.length===e+1&&!this._needsUpdate)return this._cacheArcLengths;this._needsUpdate=!1;const t=[];let s,n=this.getPoint(0),i=0;t.push(0);for(let h=1;h<=e;h++)s=this.getPoint(h/e),i+=s.distanceTo(n),t.push(i),n=s;return this._cacheArcLengths=t,t}updateArcLengths(){this._needsUpdate=!0,this.getLengths()}getUtoTmapping(e,t){const s=this.getLengths();let n=0;const i=s.length;let h;t?h=t:h=e*s[i-1];let o=0,a=i-1,u;for(;o<=a;)if(n=Math.floor(o+(a-o)/2),u=s[n]-h,u<0)o=n+1;else if(u>0)a=n-1;else{a=n;break}if(n=a,s[n]===h)return n/(i-1);const l=s[n],v=s[n+1]-l,M=(h-l)/v;return(n+M)/(i-1)}getTangent(e,t=new r){let n=e-1e-4,i=e+1e-4;return n<0&&(n=0),i>1&&(i=1),t.copy(this.getPoint(i)).sub(this.getPoint(n)).normalize()}getTangentAt(e,t=new r){return this.getTangent(this.getUtoTmapping(e),t)}getPathData(){return this.getPathCommands().map(e=>{switch(e.type){case"M":return`M ${e.x} ${e.y}`;case"L":return`L ${e.x} ${e.y}`;case"C":return`C ${e.x1} ${e.y1} ${e.x2} ${e.y2} ${e.x} ${e.y}`;case"Q":return`Q ${e.x1} ${e.y1} ${e.x} ${e.y}`;case"A":return`A ${e.rx} ${e.ry} ${e.xAxisRotation} ${e.largeArcFlag} ${e.sweepFlag} ${e.x} ${e.y}`;case"Z":return"Z";default:return""}}).join(" ")}clone(){return new this.constructor().copy(this)}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}}class L extends x{constructor(e,t,s=0,n=Math.PI*2){super(),this.center=e,this.radius=t,this.start=s,this.end=n}getMinMax(e=r.MAX,t=r.MIN){return e.x=Math.min(e.x,this.center.x-this.radius),e.y=Math.min(e.y,this.center.y-this.radius),t.x=Math.max(t.x,this.center.x+this.radius),t.y=Math.max(t.y,this.center.y+this.radius),{min:e,max:t}}getPoint(e){const{radius:t,center:s}=this;return s.clone().add(this.getNormal(e).clone().multiplyScalar(t))}getTangent(e){const{x:t,y:s}=this.getNormal(e);return new r(-s,t)}getNormal(e){const{start:t,end:s}=this,n=e*(s-t)+t-.5*Math.PI;return new r(Math.cos(n),Math.sin(n))}getPathCommands(){return[]}drawTo(e){}}function m(c,e,t,s,n){const i=(s-e)*.5,h=(n-t)*.5,o=c*c,a=c*o;return(2*t-2*s+i+h)*a+(-3*t+3*s-2*i-h)*o+i*c+t}function D(c,e){const t=1-c;return t*t*e}function X(c,e){return 2*(1-c)*c*e}function E(c,e){return c*c*e}function I(c,e,t,s){return D(c,e)+X(c,t)+E(c,s)}function k(c,e){const t=1-c;return t*t*t*e}function F(c,e){const t=1-c;return 3*t*t*c*e}function Q(c,e){return 3*(1-c)*c*c*e}function U(c,e){return c*c*c*e}function z(c,e,t,s,n){return k(c,e)+F(c,t)+Q(c,s)+U(c,n)}class R extends x{constructor(e=new r,t=new r,s=new r,n=new r){super(),this.v0=e,this.v1=t,this.v2=s,this.v3=n}getPoint(e,t=new r){const{v0:s,v1:n,v2:i,v3:h}=this;return t.set(z(e,s.x,n.x,i.x,h.x),z(e,s.y,n.y,i.y,h.y)),t}getMinMax(e=r.MAX,t=r.MIN){const{v0:s,v1:n,v2:i,v3:h}=this;return e.x=Math.min(e.x,s.x,n.x,i.x,h.x),e.y=Math.min(e.y,s.y,n.y,i.y,h.y),t.x=Math.max(t.x,s.x,n.x,i.x,h.x),t.y=Math.max(t.y,s.y,n.y,i.y,h.y),{min:e,max:t}}getPathCommands(){const{v0:e,v1:t,v2:s,v3:n}=this;return[{type:"M",x:e.x,y:e.y},{type:"C",x1:t.x,y1:t.y,x2:s.x,y2:s.y,x:n.x,y:n.y}]}drawTo(e){const{v0:t,v1:s,v2:n,v3:i}=this;e.moveTo(t.x,t.y),e.bezierCurveTo(s.x,s.y,n.x,n.y,i.x,i.y)}copy(e){return super.copy(e),this.v0.copy(e.v0),this.v1.copy(e.v1),this.v2.copy(e.v2),this.v3.copy(e.v3),this}}class S extends x{constructor(e=0,t=0,s=1,n=1,i=0,h=Math.PI*2,o=!1,a=0){super(),this.x=e,this.y=t,this.rx=s,this.ry=n,this.startAngle=i,this.endAngle=h,this.clockwise=o,this.rotation=a}getDivisions(e=12){return e*2}getPoint(e,t=new r){const s=Math.PI*2;let n=this.endAngle-this.startAngle;const i=Math.abs(n)<Number.EPSILON;for(;n<0;)n+=s;for(;n>s;)n-=s;n<Number.EPSILON&&(i?n=0:n=s),this.clockwise&&!i&&(n===s?n=-s:n=n-s);const h=this.startAngle+e*n;let o=this.x+this.rx*Math.cos(h),a=this.y+this.ry*Math.sin(h);if(this.rotation!==0){const u=Math.cos(this.rotation),l=Math.sin(this.rotation),y=o-this.x,v=a-this.y;o=y*u-v*l+this.x,a=y*l+v*u+this.y}return t.set(o,a)}getPathCommands(){const{x:e,y:t,rx:s,ry:n,startAngle:i,endAngle:h,clockwise:o}=this,a=!o,u=e+s*Math.cos(i),l=t+n*Math.sin(i),y=e+s*Math.cos(h),v=t+n*Math.sin(h),M=Math.abs(i-h),d=M>Math.PI?1:0,P=a?0:1,w=e+s*Math.cos(i+(h-i)/2),T=t+n*Math.sin(i+(h-i)/2);return M>=2*Math.PI?[{type:"M",x:u,y:l},{type:"A",rx:s,ry:n,xAxisRotation:0,largeArcFlag:1,sweepFlag:P,x:w,y:T},{type:"A",rx:s,ry:n,xAxisRotation:0,largeArcFlag:1,sweepFlag:P,x:u,y:l}]:[{type:"M",x:u,y:l},{type:"A",rx:s,ry:n,xAxisRotation:0,largeArcFlag:d,sweepFlag:P,x:y,y:v}]}drawTo(e){const{x:t,y:s,rx:n,ry:i,startAngle:h}=this,o=t+n*Math.cos(h),a=s+i*Math.sin(h);e.moveTo(o,a),e.arc(this.x,this.y,this.rx,this.startAngle,this.endAngle,!this.clockwise)}copy(e){return super.copy(e),this.x=e.x,this.y=e.y,this.rx=e.rx,this.ry=e.ry,this.startAngle=e.startAngle,this.endAngle=e.endAngle,this.clockwise=e.clockwise,this.rotation=e.rotation,this}}class f extends x{constructor(e=new r,t=new r){super(),this.v1=e,this.v2=t}getDivisions(){return 1}getPoint(e,t=new r){return e===1?t.copy(this.v2):(t.copy(this.v2).sub(this.v1),t.multiplyScalar(e).add(this.v1)),t}getPointAt(e,t=new r){return this.getPoint(e,t)}getTangent(e,t=new r){return t.subVectors(this.v2,this.v1).normalize()}getTangentAt(e,t=new r){return this.getTangent(e,t)}getPathCommands(){const{v1:e,v2:t}=this;return[{type:"M",x:e.x,y:e.y},{type:"L",x:t.x,y:t.y}]}getMinMax(e=r.MAX,t=r.MIN){const{v1:s,v2:n}=this;return e.x=Math.min(e.x,s.x,n.x),e.y=Math.min(e.y,s.y,n.y),t.x=Math.max(t.x,s.x,n.x),t.y=Math.max(t.y,s.y,n.y),{min:e,max:t}}drawTo(e){const{v1:t,v2:s}=this;e.moveTo(t.x,t.y),e.lineTo(s.x,s.y)}copy(e){return super.copy(e),this.v1.copy(e.v1),this.v2.copy(e.v2),this}}class V extends x{constructor(t,s,n=0,i=1){super();p(this,"curves");p(this,"pointT",0);this.center=t,this.size=s,this.start=n,this.end=i;const{x:h,y:o}=this.center,a=new r(h+.5*this.size,o-.5*this.size),u=new r(h-.5*this.size,o-.5*this.size),l=new r(h,o+.5*this.size),y=new L(a,Math.SQRT1_2*this.size,-.25*Math.PI,.75*Math.PI),v=new L(u,Math.SQRT1_2*this.size,-.75*Math.PI,.25*Math.PI),M=new L(l,.5*Math.SQRT1_2*this.size,.75*Math.PI,1.25*Math.PI),d=new r(h,o+this.size),P=new r(h+this.size,o),w=new r().lerpVectors(P,d,.75),T=new r(h-this.size,o),$=new r().lerpVectors(T,d,.75),C=new f(P,w),_=new f($,T);this.curves=[y,C,M,_,v]}getPoint(t){return this.getCurrentLine(t).getPoint(this.pointT)}getPointAt(t){return this.getPoint(t)}getCurrentLine(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=9*Math.PI/8+1.5;let n;const i=.5*Math.PI;return s<i?(n=0,this.pointT=s/i):s<i+.75?(n=1,this.pointT=(s-i)/.75):s<5*Math.PI/8+.75?(n=2,this.pointT=(s-i-.75)/(Math.PI/8)):s<5*Math.PI/8+1.5?(n=3,this.pointT=(s-5*Math.PI/8-.75)/.75):(n=4,this.pointT=(s-5*Math.PI/8-1.5)/i),this.curves[n]}getTangent(t){return this.getCurrentLine(t).getTangent(this.pointT).normalize()}getNormal(t){const s=this.getCurrentLine(t);return new r(s.v2.y-s.v1.y,-(s.v2.x-s.v1.x)).normalize()}getPathCommands(){return this.curves.flatMap(t=>t.getPathCommands())}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}}class Y extends x{constructor(t,s=0,n=0,i=0,h=1){super();p(this,"curves",[]);p(this,"points",[]);this.center=t,this.radius=s,this.num=n,this.start=i,this.end=h;for(let o=0;o<this.num;o++){let a=o*2*Math.PI/this.num;a-=.5*Math.PI;const u=new r(this.radius*Math.cos(a),this.radius*Math.sin(a));u.add(this.center),this.points.push(u)}for(let o=0;o<this.num;o++)this.curves.push(new f(this.points[o],this.points[(o+1)%this.num]))}getPoint(t){return this.getCurrentLine(t),this.currentLine.getPoint(this.pointK)}getPointAt(t){return this.getPoint(t)}getCurrentLine(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1);const n=s*this.num,i=Math.floor(n);return this.pointK=n-i,this.currentLine=this.curves[i],this.currentLine}getTangent(t){return this.getCurrentLine(t).getTangent(0).normalize()}getNormal(t){const s=this.getCurrentLine(t);return new r(s.v2.y-s.v1.y,-(s.v2.x-s.v1.x)).normalize()}getPathCommands(){return this.curves.flatMap(t=>t.getPathCommands())}getMinMax(t=r.MAX,s=r.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}}class B extends x{constructor(e=new r,t=new r,s=new r){super(),this.v0=e,this.v1=t,this.v2=s}getPoint(e,t=new r){const{v0:s,v1:n,v2:i}=this;return t.set(I(e,s.x,n.x,i.x),I(e,s.y,n.y,i.y)),t}getPathCommands(){const{v0:e,v1:t,v2:s}=this;return[{type:"M",x:e.x,y:e.y},{type:"Q",x1:t.x,y1:t.y,x:s.x,y:s.y}]}getMinMax(e=r.MAX,t=r.MIN){const{v0:s,v1:n,v2:i}=this,h=.5*(s.x+n.x),o=.5*(s.y+n.y),a=.5*(s.x+i.x),u=.5*(s.y+i.y);return e.x=Math.min(e.x,s.x,i.x,h,a),e.y=Math.min(e.y,s.y,i.y,o,u),t.x=Math.max(t.x,s.x,i.x,h,a),t.y=Math.max(t.y,s.y,i.y,o,u),{min:e,max:t}}drawTo(e){const{v0:t,v1:s,v2:n}=this;e.moveTo(t.x,t.y),e.quadraticCurveTo(s.x,s.y,n.x,n.y)}copy(e){return super.copy(e),this.v0.copy(e.v0),this.v1.copy(e.v1),this.v2.copy(e.v2),this}}class q extends x{constructor(t,s,n=1,i=0,h=1){super();p(this,"curves",[]);p(this,"pointT",0);this.center=t,this.rx=s,this.aspectRatio=n,this.start=i,this.end=h;const{x:o,y:a}=this.center,u=this.rx,l=this.rx/this.aspectRatio,y=[new r(o-u,a-l),new r(o+u,a-l),new r(o+u,a+l),new r(o-u,a+l)];for(let v=0;v<4;v++)this.curves.push(new f(y[v],y[(v+1)%4]))}get x(){return this.center.x-this.rx}get y(){return this.center.y-this.rx/this.aspectRatio}get width(){return this.rx*2}get height(){return this.rx/this.aspectRatio*2}getPoint(t){return this.getCurrentLine(t).getPoint(this.pointT)}getPointAt(t){return this.getPoint(t)}getCurrentLine(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=(1+this.aspectRatio)*2;let n;return s<this.aspectRatio?(n=0,this.pointT=s/this.aspectRatio):s<this.aspectRatio+1?(n=1,this.pointT=(s-this.aspectRatio)/1):s<2*this.aspectRatio+1?(n=2,this.pointT=(s-this.aspectRatio-1)/this.aspectRatio):(n=3,this.pointT=(s-2*this.aspectRatio-1)/1),this.curves[n]}getTangent(t){return this.getCurrentLine(t).getTangent(0).normalize()}getNormal(t){const{v1:s,v2:n}=this.getCurrentLine(t);return new r(n.y-s.y,-(n.x-s.x)).normalize()}getPathCommands(){return this.curves.flatMap(t=>t.getPathCommands())}getMinMax(t=r.MAX,s=r.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}}class N extends x{constructor(e=[]){super(),this.points=e}getDivisions(e=12){return e*this.points.length}getPoint(e,t=new r){const{points:s}=this,n=(s.length-1)*e,i=Math.floor(n),h=n-i,o=s[i===0?i:i-1],a=s[i],u=s[i>s.length-2?s.length-1:i+1],l=s[i>s.length-3?s.length-1:i+2];return t.set(m(h,o.x,a.x,u.x,l.x),m(h,o.y,a.y,u.y,l.y)),t}getPathCommands(){return[]}drawTo(e){}copy(e){super.copy(e),this.points=[];for(let t=0,s=e.points.length;t<s;t++)this.points.push(e.points[t].clone());return this}}class b extends x{constructor(t){super();p(this,"curves",[]);p(this,"currentPoint",new r);p(this,"autoClose",!1);p(this,"_cacheLengths",[]);t&&this.setFromPoints(t)}addCurve(t){return this.curves.push(t),this}closePath(){const t=this.curves[0].getPoint(0),s=this.curves[this.curves.length-1].getPoint(1);return t.equals(s)||this.curves.push(new f(s,t)),this}getPoint(t,s=new r){const n=t*this.getLength(),i=this.getCurveLengths();let h=0;for(;h<i.length;){if(i[h]>=n){const o=i[h]-n,a=this.curves[h],u=a.getLength();return a.getPointAt(u===0?0:1-o/u,s)}h++}return s}getLength(){const t=this.getCurveLengths();return t[t.length-1]}updateArcLengths(){super.updateArcLengths(),this._cacheLengths=[],this.getCurveLengths()}getCurveLengths(){if(this._cacheLengths.length===this.curves.length)return this._cacheLengths;const t=[];let s=0;for(let n=0,i=this.curves.length;n<i;n++)s+=this.curves[n].getLength(),t.push(s);return this._cacheLengths=t,t}getSpacedPoints(t=40){const s=[];for(let n=0;n<=t;n++)s.push(this.getPoint(n/t));return this.autoClose&&s.push(s[0]),s}getPoints(t=12){const s=[];let n;for(let i=0,h=this.curves;i<h.length;i++){const o=h[i],a=o.getPoints(o.getDivisions(t));for(let u=0;u<a.length;u++){const l=a[u];n&&n.equals(l)||(s.push(l),n=l)}}return this.autoClose&&s.length>1&&!s[s.length-1].equals(s[0])&&s.push(s[0]),s}setFromPoints(t){this.moveTo(t[0].x,t[0].y);for(let s=1,n=t.length;s<n;s++)this.lineTo(t[s].x,t[s].y);return this}bezierCurveTo(t,s,n,i,h,o){return this.curves.push(new R(this.currentPoint.clone(),new r(t,s),new r(n,i),new r(h,o))),this.currentPoint.set(h,o),this}lineTo(t,s){const n=new f(this.currentPoint.clone(),new r(t,s));return this.curves.push(n),this.currentPoint.set(t,s),this}moveTo(t,s){return this.currentPoint.set(t,s),this}quadraticCurveTo(t,s,n,i){return this.curves.push(new B(this.currentPoint.clone(),new r(t,s),new r(n,i))),this.currentPoint.set(n,i),this}rect(t,s,n,i){return this.curves.push(new q(new r(t+n/2,s+i/2),n/2,n/i)),this.currentPoint.set(t,s),this}splineThru(t){const s=[this.currentPoint.clone()].concat(t);return this.curves.push(new N(s)),this.currentPoint.copy(t[t.length-1]),this}arc(t,s,n,i,h,o=!1){const a=this.currentPoint;return this.absarc(t+a.x,s+a.y,n,i,h,o),this}absarc(t,s,n,i,h,o=!1){return this.absellipse(t,s,n,n,i,h,o),this}ellipse(t,s,n,i,h,o,a=!1,u=0){const l=this.currentPoint;return this.absellipse(t+l.x,s+l.y,n,i,h,o,a,u),this}absellipse(t,s,n,i,h,o,a=!1,u=0){const l=new S(t,s,n,i,h,o,a,u);if(this.curves.length>0){const y=l.getPoint(0);y.equals(this.currentPoint)||this.lineTo(y.x,y.y)}return this.curves.push(l),this.currentPoint.copy(l.getPoint(1)),this}getPathCommands(){return this.curves.flatMap(t=>t.getPathCommands())}getMinMax(t=r.MAX,s=r.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}copy(t){super.copy(t),this.curves=[];for(let s=0,n=t.curves.length;s<n;s++){const i=t.curves[s];this.curves.push(i.clone())}return this.autoClose=t.autoClose,this.currentPoint.copy(t.currentPoint),this}}class j{constructor(){p(this,"currentPath",new b);p(this,"paths",[this.currentPath])}addPath(e){return this.paths.push(...e.paths.map(t=>t.clone())),this}closePath(){return this.currentPath.closePath(),this}moveTo(e,t){return this.currentPath=new b,this.paths.push(this.currentPath),this.currentPath.moveTo(e,t),this}lineTo(e,t){return this.currentPath.lineTo(e,t),this}bezierCurveTo(e,t,s,n,i,h){return this.currentPath.bezierCurveTo(e,t,s,n,i,h),this}quadraticCurveTo(e,t,s,n){return this.currentPath.quadraticCurveTo(e,t,s,n),this}arc(e,t,s,n,i,h){return this.currentPath.absarc(e,t,s,n,i,!h),this}arcTo(e,t,s,n,i){const h=this.currentPath.currentPoint,o=h.x,a=h.y,u=e-o,l=t-a,y=s-e,v=n-t,M=Math.sqrt(u*u+l*l),d=Math.sqrt(y*y+v*v);if(M<i||d<i)return this.lineTo(s,n),this;const P={x:u/M,y:l/M},w={x:y/d,y:v/d},T=e-P.y*i,$=t+P.x*i,C=Math.atan2(P.y,P.x);let A=Math.atan2(w.y,w.x)-C;return A>Math.PI?A-=2*Math.PI:A<-Math.PI&&(A+=2*Math.PI),this.arc(T,$,i,C,C+A,!1),this.lineTo(s,n),this}ellipse(e,t,s,n,i,h,o,a){return this.currentPath.absellipse(e,t,s,n,h,o,!a,i),this}rect(e,t,s,n){return this.currentPath.rect(e,t,s,n),this}splineThru(e){return this.currentPath.splineThru(e),this}getMinMax(e=new r,t=new r){return this.paths.forEach(s=>s.curves.forEach(n=>n.getMinMax(e,t))),{min:e,max:t}}getPathCommands(){return this.paths.flatMap(e=>e.curves.flatMap(t=>t.getPathCommands()))}getPathData(){return this.paths.map(e=>e.getPathData()).join(" ")}getBoundingBox(){const e=r.MAX,t=r.MIN;return this.paths.forEach(s=>s.getMinMax(e,t)),{x:e.x,y:e.y,width:t.x-e.x,height:t.y-e.y}}getSvgString(){const{x:e,y:t,width:s,height:n}=this.getBoundingBox();return`<svg viewBox="${e} ${t} ${s} ${n}" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" d="${this.getPathData()}"></path></svg>`}getSvgDataUri(){return`data:image/svg+xml;base64,${btoa(this.getSvgString())}`}drawTo(e){this.paths.forEach(t=>{t.curves.forEach(s=>{s.drawTo(e)})})}strokeTo(e){this.drawTo(e),e.stroke()}fillTo(e){this.drawTo(e),e.fill()}}g.CircleCurve=L,g.CubicBezierCurve=R,g.Curve=x,g.CurvePath=b,g.EllipseCurve=S,g.HeartCurve=V,g.LineCurve=f,g.Path2D=j,g.PloygonCurve=Y,g.Point2D=r,g.QuadraticBezierCurve=B,g.RectangularCurve=q,g.SplineCurve=N,g.catmullRom=m,g.cubicBezier=z,g.quadraticBezier=I,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+(function(g,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(g=typeof globalThis<"u"?globalThis:g||self,r(g.modernPath2d={}))})(this,function(g){"use strict";var j=Object.defineProperty;var Z=(g,r,x)=>r in g?j(g,r,{enumerable:!0,configurable:!0,writable:!0,value:x}):g[r]=x;var p=(g,r,x)=>Z(g,typeof r!="symbol"?r+"":r,x);class r{constructor(e=0,t=0){this.x=e,this.y=t}static get MAX(){return new r(1/0,1/0)}static get MIN(){return new r(-1/0,-1/0)}set(e,t){return this.x=e,this.y=t,this}add(e){return this.x+=e.x,this.y+=e.y,this}sub(e){return this.x-=e.x,this.y-=e.y,this}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,s=this.y-e.y;return t*t+s*s}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}multiplyScalar(e){return this.x*=e,this.y*=e,this}divideScalar(e){return this.multiplyScalar(1/e)}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}normalize(){return this.divideScalar(this.length()||1)}lerpVectors(e,t,s){return this.x=e.x+(t.x-e.x)*s,this.y=e.y+(t.y-e.y)*s,this}equals(e){return this.x===e.x&&this.y===e.y}copy(e){return this.x=e.x,this.y=e.y,this}clone(){return new r(this.x,this.y)}}class x{constructor(){p(this,"arcLengthDivisions",200);p(this,"_cacheArcLengths");p(this,"_needsUpdate",!1)}getMinMax(e=r.MAX,t=r.MIN){return{min:e,max:t}}getDivisions(e){return e}getPointAt(e,t=new r){return this.getPoint(this.getUtoTmapping(e),t)}getPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPoint(s/e));return t}getSpacedPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPointAt(s/e));return t}getLength(){const e=this.getLengths();return e[e.length-1]}getLengths(e=this.arcLengthDivisions){if(this._cacheArcLengths&&this._cacheArcLengths.length===e+1&&!this._needsUpdate)return this._cacheArcLengths;this._needsUpdate=!1;const t=[];let s,n=this.getPoint(0),i=0;t.push(0);for(let h=1;h<=e;h++)s=this.getPoint(h/e),i+=s.distanceTo(n),t.push(i),n=s;return this._cacheArcLengths=t,t}updateArcLengths(){this._needsUpdate=!0,this.getLengths()}getUtoTmapping(e,t){const s=this.getLengths();let n=0;const i=s.length;let h;t?h=t:h=e*s[i-1];let o=0,a=i-1,u;for(;o<=a;)if(n=Math.floor(o+(a-o)/2),u=s[n]-h,u<0)o=n+1;else if(u>0)a=n-1;else{a=n;break}if(n=a,s[n]===h)return n/(i-1);const l=s[n],v=s[n+1]-l,M=(h-l)/v;return(n+M)/(i-1)}getTangent(e,t=new r){let n=e-1e-4,i=e+1e-4;return n<0&&(n=0),i>1&&(i=1),t.copy(this.getPoint(i)).sub(this.getPoint(n)).normalize()}getTangentAt(e,t=new r){return this.getTangent(this.getUtoTmapping(e),t)}getData(){return this.getCommands().map(e=>{switch(e.type){case"M":return`M ${e.x} ${e.y}`;case"L":return`L ${e.x} ${e.y}`;case"C":return`C ${e.x1} ${e.y1} ${e.x2} ${e.y2} ${e.x} ${e.y}`;case"Q":return`Q ${e.x1} ${e.y1} ${e.x} ${e.y}`;case"A":return`A ${e.rx} ${e.ry} ${e.xAxisRotation} ${e.largeArcFlag} ${e.sweepFlag} ${e.x} ${e.y}`;case"Z":return"Z";default:return""}}).join(" ")}clone(){return new this.constructor().copy(this)}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}}class m extends x{constructor(e,t,s=0,n=Math.PI*2){super(),this.center=e,this.radius=t,this.start=s,this.end=n}getMinMax(e=r.MAX,t=r.MIN){return e.x=Math.min(e.x,this.center.x-this.radius),e.y=Math.min(e.y,this.center.y-this.radius),t.x=Math.max(t.x,this.center.x+this.radius),t.y=Math.max(t.y,this.center.y+this.radius),{min:e,max:t}}getPoint(e){const{radius:t,center:s}=this;return s.clone().add(this.getNormal(e).clone().multiplyScalar(t))}getTangent(e){const{x:t,y:s}=this.getNormal(e);return new r(-s,t)}getNormal(e){const{start:t,end:s}=this,n=e*(s-t)+t-.5*Math.PI;return new r(Math.cos(n),Math.sin(n))}getCommands(){return[]}drawTo(e){}}function L(c,e,t,s,n){const i=(s-e)*.5,h=(n-t)*.5,o=c*c,a=c*o;return(2*t-2*s+i+h)*a+(-3*t+3*s-2*i-h)*o+i*c+t}function _(c,e){const t=1-c;return t*t*e}function X(c,e){return 2*(1-c)*c*e}function E(c,e){return c*c*e}function z(c,e,t,s){return _(c,e)+X(c,t)+E(c,s)}function F(c,e){const t=1-c;return t*t*t*e}function Q(c,e){const t=1-c;return 3*t*t*c*e}function U(c,e){return 3*(1-c)*c*c*e}function V(c,e){return c*c*c*e}function I(c,e,t,s,n){return F(c,e)+Q(c,t)+U(c,s)+V(c,n)}class S extends x{constructor(e=new r,t=new r,s=new r,n=new r){super(),this.v0=e,this.v1=t,this.v2=s,this.v3=n}getPoint(e,t=new r){const{v0:s,v1:n,v2:i,v3:h}=this;return t.set(I(e,s.x,n.x,i.x,h.x),I(e,s.y,n.y,i.y,h.y)),t}getMinMax(e=r.MAX,t=r.MIN){const{v0:s,v1:n,v2:i,v3:h}=this;return e.x=Math.min(e.x,s.x,n.x,i.x,h.x),e.y=Math.min(e.y,s.y,n.y,i.y,h.y),t.x=Math.max(t.x,s.x,n.x,i.x,h.x),t.y=Math.max(t.y,s.y,n.y,i.y,h.y),{min:e,max:t}}getCommands(){const{v0:e,v1:t,v2:s,v3:n}=this;return[{type:"M",x:e.x,y:e.y},{type:"C",x1:t.x,y1:t.y,x2:s.x,y2:s.y,x:n.x,y:n.y}]}drawTo(e){const{v0:t,v1:s,v2:n,v3:i}=this;e.moveTo(t.x,t.y),e.bezierCurveTo(s.x,s.y,n.x,n.y,i.x,i.y)}copy(e){return super.copy(e),this.v0.copy(e.v0),this.v1.copy(e.v1),this.v2.copy(e.v2),this.v3.copy(e.v3),this}}class q extends x{constructor(e=0,t=0,s=1,n=1,i=0,h=Math.PI*2,o=!1,a=0){super(),this.x=e,this.y=t,this.rx=s,this.ry=n,this.startAngle=i,this.endAngle=h,this.clockwise=o,this.rotation=a}getDivisions(e=12){return e*2}getPoint(e,t=new r){const s=Math.PI*2;let n=this.endAngle-this.startAngle;const i=Math.abs(n)<Number.EPSILON;for(;n<0;)n+=s;for(;n>s;)n-=s;n<Number.EPSILON&&(i?n=0:n=s),this.clockwise&&!i&&(n===s?n=-s:n=n-s);const h=this.startAngle+e*n;let o=this.x+this.rx*Math.cos(h),a=this.y+this.ry*Math.sin(h);if(this.rotation!==0){const u=Math.cos(this.rotation),l=Math.sin(this.rotation),y=o-this.x,v=a-this.y;o=y*u-v*l+this.x,a=y*l+v*u+this.y}return t.set(o,a)}getCommands(){const{x:e,y:t,rx:s,ry:n,startAngle:i,endAngle:h,clockwise:o}=this,a=!o,u=e+s*Math.cos(i),l=t+n*Math.sin(i),y=e+s*Math.cos(h),v=t+n*Math.sin(h),M=Math.abs(i-h),f=M>Math.PI?1:0,d=a?0:1,w=e+s*Math.cos(i+(h-i)/2),T=t+n*Math.sin(i+(h-i)/2);return M>=2*Math.PI?[{type:"M",x:u,y:l},{type:"A",rx:s,ry:n,xAxisRotation:0,largeArcFlag:1,sweepFlag:d,x:w,y:T},{type:"A",rx:s,ry:n,xAxisRotation:0,largeArcFlag:1,sweepFlag:d,x:u,y:l}]:[{type:"M",x:u,y:l},{type:"A",rx:s,ry:n,xAxisRotation:0,largeArcFlag:f,sweepFlag:d,x:y,y:v}]}drawTo(e){const{x:t,y:s,rx:n,ry:i,startAngle:h}=this,o=t+n*Math.cos(h),a=s+i*Math.sin(h);e.moveTo(o,a),e.arc(this.x,this.y,this.rx,this.startAngle,this.endAngle,!this.clockwise)}copy(e){return super.copy(e),this.x=e.x,this.y=e.y,this.rx=e.rx,this.ry=e.ry,this.startAngle=e.startAngle,this.endAngle=e.endAngle,this.clockwise=e.clockwise,this.rotation=e.rotation,this}}class P extends x{constructor(e=new r,t=new r){super(),this.v1=e,this.v2=t}getDivisions(){return 1}getPoint(e,t=new r){return e===1?t.copy(this.v2):(t.copy(this.v2).sub(this.v1),t.multiplyScalar(e).add(this.v1)),t}getPointAt(e,t=new r){return this.getPoint(e,t)}getTangent(e,t=new r){return t.subVectors(this.v2,this.v1).normalize()}getTangentAt(e,t=new r){return this.getTangent(e,t)}getCommands(){const{v1:e,v2:t}=this;return[{type:"M",x:e.x,y:e.y},{type:"L",x:t.x,y:t.y}]}getMinMax(e=r.MAX,t=r.MIN){const{v1:s,v2:n}=this;return e.x=Math.min(e.x,s.x,n.x),e.y=Math.min(e.y,s.y,n.y),t.x=Math.max(t.x,s.x,n.x),t.y=Math.max(t.y,s.y,n.y),{min:e,max:t}}drawTo(e){const{v1:t,v2:s}=this;e.moveTo(t.x,t.y),e.lineTo(s.x,s.y)}copy(e){return super.copy(e),this.v1.copy(e.v1),this.v2.copy(e.v2),this}}class Y extends x{constructor(t,s,n=0,i=1){super();p(this,"curves");p(this,"pointT",0);this.center=t,this.size=s,this.start=n,this.end=i;const{x:h,y:o}=this.center,a=new r(h+.5*this.size,o-.5*this.size),u=new r(h-.5*this.size,o-.5*this.size),l=new r(h,o+.5*this.size),y=new m(a,Math.SQRT1_2*this.size,-.25*Math.PI,.75*Math.PI),v=new m(u,Math.SQRT1_2*this.size,-.75*Math.PI,.25*Math.PI),M=new m(l,.5*Math.SQRT1_2*this.size,.75*Math.PI,1.25*Math.PI),f=new r(h,o+this.size),d=new r(h+this.size,o),w=new r().lerpVectors(d,f,.75),T=new r(h-this.size,o),R=new r().lerpVectors(T,f,.75),C=new P(d,w),D=new P(R,T);this.curves=[y,C,M,D,v]}getPoint(t){return this.getCurrentLine(t).getPoint(this.pointT)}getPointAt(t){return this.getPoint(t)}getCurrentLine(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=9*Math.PI/8+1.5;let n;const i=.5*Math.PI;return s<i?(n=0,this.pointT=s/i):s<i+.75?(n=1,this.pointT=(s-i)/.75):s<5*Math.PI/8+.75?(n=2,this.pointT=(s-i-.75)/(Math.PI/8)):s<5*Math.PI/8+1.5?(n=3,this.pointT=(s-5*Math.PI/8-.75)/.75):(n=4,this.pointT=(s-5*Math.PI/8-1.5)/i),this.curves[n]}getTangent(t){return this.getCurrentLine(t).getTangent(this.pointT).normalize()}getNormal(t){const s=this.getCurrentLine(t);return new r(s.v2.y-s.v1.y,-(s.v2.x-s.v1.x)).normalize()}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}}class O extends x{constructor(t,s=0,n=0,i=0,h=1){super();p(this,"curves",[]);p(this,"points",[]);this.center=t,this.radius=s,this.num=n,this.start=i,this.end=h;for(let o=0;o<this.num;o++){let a=o*2*Math.PI/this.num;a-=.5*Math.PI;const u=new r(this.radius*Math.cos(a),this.radius*Math.sin(a));u.add(this.center),this.points.push(u)}for(let o=0;o<this.num;o++)this.curves.push(new P(this.points[o],this.points[(o+1)%this.num]))}getPoint(t){return this.getCurrentLine(t),this.currentLine.getPoint(this.pointK)}getPointAt(t){return this.getPoint(t)}getCurrentLine(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1);const n=s*this.num,i=Math.floor(n);return this.pointK=n-i,this.currentLine=this.curves[i],this.currentLine}getTangent(t){return this.getCurrentLine(t).getTangent(0).normalize()}getNormal(t){const s=this.getCurrentLine(t);return new r(s.v2.y-s.v1.y,-(s.v2.x-s.v1.x)).normalize()}getCommands(){return this.curves.flatMap(t=>t.getCommands())}getMinMax(t=r.MAX,s=r.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}}class B extends x{constructor(e=new r,t=new r,s=new r){super(),this.v0=e,this.v1=t,this.v2=s}getPoint(e,t=new r){const{v0:s,v1:n,v2:i}=this;return t.set(z(e,s.x,n.x,i.x),z(e,s.y,n.y,i.y)),t}getCommands(){const{v0:e,v1:t,v2:s}=this;return[{type:"M",x:e.x,y:e.y},{type:"Q",x1:t.x,y1:t.y,x:s.x,y:s.y}]}getMinMax(e=r.MAX,t=r.MIN){const{v0:s,v1:n,v2:i}=this,h=.5*(s.x+n.x),o=.5*(s.y+n.y),a=.5*(s.x+i.x),u=.5*(s.y+i.y);return e.x=Math.min(e.x,s.x,i.x,h,a),e.y=Math.min(e.y,s.y,i.y,o,u),t.x=Math.max(t.x,s.x,i.x,h,a),t.y=Math.max(t.y,s.y,i.y,o,u),{min:e,max:t}}drawTo(e){const{v0:t,v1:s,v2:n}=this;e.moveTo(t.x,t.y),e.quadraticCurveTo(s.x,s.y,n.x,n.y)}copy(e){return super.copy(e),this.v0.copy(e.v0),this.v1.copy(e.v1),this.v2.copy(e.v2),this}}class k extends x{constructor(t,s,n=1,i=0,h=1){super();p(this,"curves",[]);p(this,"pointT",0);this.center=t,this.rx=s,this.aspectRatio=n,this.start=i,this.end=h;const{x:o,y:a}=this.center,u=this.rx,l=this.rx/this.aspectRatio,y=[new r(o-u,a-l),new r(o+u,a-l),new r(o+u,a+l),new r(o-u,a+l)];for(let v=0;v<4;v++)this.curves.push(new P(y[v],y[(v+1)%4]))}get x(){return this.center.x-this.rx}get y(){return this.center.y-this.rx/this.aspectRatio}get width(){return this.rx*2}get height(){return this.rx/this.aspectRatio*2}getPoint(t){return this.getCurrentLine(t).getPoint(this.pointT)}getPointAt(t){return this.getPoint(t)}getCurrentLine(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=(1+this.aspectRatio)*2;let n;return s<this.aspectRatio?(n=0,this.pointT=s/this.aspectRatio):s<this.aspectRatio+1?(n=1,this.pointT=(s-this.aspectRatio)/1):s<2*this.aspectRatio+1?(n=2,this.pointT=(s-this.aspectRatio-1)/this.aspectRatio):(n=3,this.pointT=(s-2*this.aspectRatio-1)/1),this.curves[n]}getTangent(t){return this.getCurrentLine(t).getTangent(0).normalize()}getNormal(t){const{v1:s,v2:n}=this.getCurrentLine(t);return new r(n.y-s.y,-(n.x-s.x)).normalize()}getCommands(){return this.curves.flatMap(t=>t.getCommands())}getMinMax(t=r.MAX,s=r.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}}class N extends x{constructor(e=[]){super(),this.points=e}getDivisions(e=12){return e*this.points.length}getPoint(e,t=new r){const{points:s}=this,n=(s.length-1)*e,i=Math.floor(n),h=n-i,o=s[i===0?i:i-1],a=s[i],u=s[i>s.length-2?s.length-1:i+1],l=s[i>s.length-3?s.length-1:i+2];return t.set(L(h,o.x,a.x,u.x,l.x),L(h,o.y,a.y,u.y,l.y)),t}getCommands(){return[]}drawTo(e){}copy(e){super.copy(e),this.points=[];for(let t=0,s=e.points.length;t<s;t++)this.points.push(e.points[t].clone());return this}}class b extends x{constructor(t){super();p(this,"curves",[]);p(this,"currentPoint",new r);p(this,"autoClose",!1);p(this,"_cacheLengths",[]);t&&this.setFromPoints(t)}addCurve(t){return this.curves.push(t),this}closePath(){const t=this.curves[0].getPoint(0),s=this.curves[this.curves.length-1].getPoint(1);return t.equals(s)||this.curves.push(new P(s,t)),this}getPoint(t,s=new r){const n=t*this.getLength(),i=this.getCurveLengths();let h=0;for(;h<i.length;){if(i[h]>=n){const o=i[h]-n,a=this.curves[h],u=a.getLength();return a.getPointAt(u===0?0:1-o/u,s)}h++}return s}getLength(){const t=this.getCurveLengths();return t[t.length-1]}updateArcLengths(){super.updateArcLengths(),this._cacheLengths=[],this.getCurveLengths()}getCurveLengths(){if(this._cacheLengths.length===this.curves.length)return this._cacheLengths;const t=[];let s=0;for(let n=0,i=this.curves.length;n<i;n++)s+=this.curves[n].getLength(),t.push(s);return this._cacheLengths=t,t}getSpacedPoints(t=40){const s=[];for(let n=0;n<=t;n++)s.push(this.getPoint(n/t));return this.autoClose&&s.push(s[0]),s}getPoints(t=12){const s=[];let n;for(let i=0,h=this.curves;i<h.length;i++){const o=h[i],a=o.getPoints(o.getDivisions(t));for(let u=0;u<a.length;u++){const l=a[u];n&&n.equals(l)||(s.push(l),n=l)}}return this.autoClose&&s.length>1&&!s[s.length-1].equals(s[0])&&s.push(s[0]),s}setFromPoints(t){this.moveTo(t[0].x,t[0].y);for(let s=1,n=t.length;s<n;s++)this.lineTo(t[s].x,t[s].y);return this}bezierCurveTo(t,s,n,i,h,o){return this.curves.push(new S(this.currentPoint.clone(),new r(t,s),new r(n,i),new r(h,o))),this.currentPoint.set(h,o),this}lineTo(t,s){const n=new P(this.currentPoint.clone(),new r(t,s));return this.curves.push(n),this.currentPoint.set(t,s),this}moveTo(t,s){return this.currentPoint.set(t,s),this}quadraticCurveTo(t,s,n,i){return this.curves.push(new B(this.currentPoint.clone(),new r(t,s),new r(n,i))),this.currentPoint.set(n,i),this}rect(t,s,n,i){return this.curves.push(new k(new r(t+n/2,s+i/2),n/2,n/i)),this.currentPoint.set(t,s),this}splineThru(t){const s=[this.currentPoint.clone()].concat(t);return this.curves.push(new N(s)),this.currentPoint.copy(t[t.length-1]),this}arc(t,s,n,i,h,o=!1){const a=this.currentPoint;return this.absarc(t+a.x,s+a.y,n,i,h,o),this}absarc(t,s,n,i,h,o=!1){return this.absellipse(t,s,n,n,i,h,o),this}ellipse(t,s,n,i,h,o,a=!1,u=0){const l=this.currentPoint;return this.absellipse(t+l.x,s+l.y,n,i,h,o,a,u),this}absellipse(t,s,n,i,h,o,a=!1,u=0){const l=new q(t,s,n,i,h,o,a,u);if(this.curves.length>0){const y=l.getPoint(0);y.equals(this.currentPoint)||this.lineTo(y.x,y.y)}return this.curves.push(l),this.currentPoint.copy(l.getPoint(1)),this}getCommands(){return this.curves.flatMap(t=>t.getCommands())}getMinMax(t=r.MAX,s=r.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}drawTo(t){this.curves.forEach(s=>s.drawTo(t))}copy(t){super.copy(t),this.curves=[];for(let s=0,n=t.curves.length;s<n;s++){const i=t.curves[s];this.curves.push(i.clone())}return this.autoClose=t.autoClose,this.currentPoint.copy(t.currentPoint),this}}class ${constructor(e){p(this,"currentPath",new b);p(this,"paths",[this.currentPath]);e&&(e instanceof $?this.addPath(e):Array.isArray(e)?this.addCommands(e):this.addData(e))}addPath(e){return this.paths.push(...e.paths.map(t=>t.clone())),this}addCommands(e){for(let t=0,s=e.length;t<s;t++){const n=e[t];switch(n.type){case"M":this.moveTo(n.x,n.y);break;case"L":this.lineTo(n.x,n.y);break;case"C":this.bezierCurveTo(n.x2,n.y2,n.x1,n.y1,n.x,n.y);break;case"Q":this.quadraticCurveTo(n.x1,n.y1,n.x,n.y);break;case"A":break;case"Z":this.closePath();break}}return this}addData(e){return console.error("TODO",e),this}closePath(){return this.currentPath.closePath(),this}moveTo(e,t){return this.currentPath=new b,this.paths.push(this.currentPath),this.currentPath.moveTo(e,t),this}lineTo(e,t){return this.currentPath.lineTo(e,t),this}bezierCurveTo(e,t,s,n,i,h){return this.currentPath.bezierCurveTo(e,t,s,n,i,h),this}quadraticCurveTo(e,t,s,n){return this.currentPath.quadraticCurveTo(e,t,s,n),this}arc(e,t,s,n,i,h){return this.currentPath.absarc(e,t,s,n,i,!h),this}arcTo(e,t,s,n,i){const h=this.currentPath.currentPoint,o=h.x,a=h.y,u=e-o,l=t-a,y=s-e,v=n-t,M=Math.sqrt(u*u+l*l),f=Math.sqrt(y*y+v*v);if(M<i||f<i)return this.lineTo(s,n),this;const d={x:u/M,y:l/M},w={x:y/f,y:v/f},T=e-d.y*i,R=t+d.x*i,C=Math.atan2(d.y,d.x);let A=Math.atan2(w.y,w.x)-C;return A>Math.PI?A-=2*Math.PI:A<-Math.PI&&(A+=2*Math.PI),this.arc(T,R,i,C,C+A,!1),this.lineTo(s,n),this}ellipse(e,t,s,n,i,h,o,a){return this.currentPath.absellipse(e,t,s,n,h,o,!a,i),this}rect(e,t,s,n){return this.currentPath.rect(e,t,s,n),this}splineThru(e){return this.currentPath.splineThru(e),this}getMinMax(e=new r,t=new r){return this.paths.forEach(s=>s.curves.forEach(n=>n.getMinMax(e,t))),{min:e,max:t}}getCommands(){return this.paths.flatMap(e=>e.curves.flatMap(t=>t.getCommands()))}getData(){return this.paths.map(e=>e.getData()).join(" ")}getBoundingBox(){const e=r.MAX,t=r.MIN;return this.paths.forEach(s=>s.getMinMax(e,t)),{x:e.x,y:e.y,width:t.x-e.x,height:t.y-e.y}}getSvgString(){const{x:e,y:t,width:s,height:n}=this.getBoundingBox();return`<svg viewBox="${e} ${t} ${s} ${n}" 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(e){this.paths.forEach(t=>{t.curves.forEach(s=>{s.drawTo(e)})})}strokeTo(e){this.drawTo(e),e.stroke()}fillTo(e){this.drawTo(e),e.fill()}}g.CircleCurve=m,g.CubicBezierCurve=S,g.Curve=x,g.CurvePath=b,g.EllipseCurve=q,g.HeartCurve=Y,g.LineCurve=P,g.Path2D=$,g.PloygonCurve=O,g.Point2D=r,g.QuadraticBezierCurve=B,g.RectangularCurve=k,g.SplineCurve=N,g.catmullRom=L,g.cubicBezier=I,g.quadraticBezier=z,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});

package/dist/index.mjs

@@ -179,8 +179,8 @@ class Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(this.getUtoTmapping(u), output);
   }
-  getPathData() {
-    return this.getPathCommands().map((cmd) => {
+  getData() {
+    return this.getCommands().map((cmd) => {
       switch (cmd.type) {
         case "M":
           return `M ${cmd.x} ${cmd.y}`;
@@ -236,7 +236,7 @@ class CircleCurve extends Curve {
     const _t = t * (end - start) + start - 0.5 * Math.PI;
     return new Point2D(Math.cos(_t), Math.sin(_t));
   }
-  getPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -305,7 +305,7 @@ class CubicBezierCurve extends Curve {
     max.y = Math.max(max.y, v0.y, v1.y, v2.y, v3.y);
     return { min, max };
   }
-  getPathCommands() {
+  getCommands() {
     const { v0, v1, v2, v3 } = this;
     return [
       { type: "M", x: v0.x, y: v0.y },
@@ -377,7 +377,7 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
-  getPathCommands() {
+  getCommands() {
     const { x, y, rx, ry, startAngle, endAngle, clockwise } = this;
     const anticlockwise = !clockwise;
     const startX = x + rx * Math.cos(startAngle);
@@ -457,7 +457,7 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(u, output);
   }
-  getPathCommands() {
+  getCommands() {
     const { v1, v2 } = this;
     return [
       { type: "M", x: v1.x, y: v1.y },
@@ -553,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();
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -611,8 +611,8 @@ 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();
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
@@ -638,7 +638,7 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  getPathCommands() {
+  getCommands() {
     const { v0, v1, v2 } = this;
     return [
       { type: "M", x: v0.x, y: v0.y },
@@ -745,8 +745,8 @@ class RectangularCurve extends Curve {
     const { v1, v2 } = this.getCurrentLine(value);
     return new Point2D(v2.y - v1.y, -(v2.x - v1.x)).normalize();
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
@@ -780,7 +780,7 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  getPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -973,8 +973,8 @@ class CurvePath extends Curve {
     this.currentPoint.copy(curve.getPoint(1));
     return this;
   }
-  getPathCommands() {
-    return this.curves.flatMap((curve) => curve.getPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
@@ -1003,14 +1003,52 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class Path2D {
-  constructor() {
+  constructor(path) {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
+    if (path) {
+      if (path instanceof Path2D) {
+        this.addPath(path);
+      } else if (Array.isArray(path)) {
+        this.addCommands(path);
+      } else {
+        this.addData(path);
+      }
+    }
   }
   addPath(path) {
     this.paths.push(...path.paths.map((v) => v.clone()));
     return this;
   }
+  addCommands(commands) {
+    for (let i = 0, len = commands.length; i < len; i++) {
+      const cmd = commands[i];
+      switch (cmd.type) {
+        case "M":
+          this.moveTo(cmd.x, cmd.y);
+          break;
+        case "L":
+          this.lineTo(cmd.x, cmd.y);
+          break;
+        case "C":
+          this.bezierCurveTo(cmd.x2, cmd.y2, cmd.x1, cmd.y1, cmd.x, cmd.y);
+          break;
+        case "Q":
+          this.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+          break;
+        case "A":
+          break;
+        case "Z":
+          this.closePath();
+          break;
+      }
+    }
+    return this;
+  }
+  addData(data) {
+    console.error("TODO", data);
+    return this;
+  }
   closePath() {
     this.currentPath.closePath();
     return this;
@@ -1083,11 +1121,11 @@ class Path2D {
     this.paths.forEach((path) => path.curves.forEach((curve) => curve.getMinMax(min, max)));
     return { min, max };
   }
-  getPathCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getPathCommands()));
+  getCommands() {
+    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
   }
-  getPathData() {
-    return this.paths.map((path) => path.getPathData()).join(" ");
+  getData() {
+    return this.paths.map((path) => path.getData()).join(" ");
   }
   getBoundingBox() {
     const min = Point2D.MAX;
@@ -1102,7 +1140,7 @@ class Path2D {
   }
   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.getPathData()}"></path></svg>`;
+    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())}`;

package/package.json

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