modern-path2d 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1,5 +1,145 @@
 'use strict';
 
+class Point2D {
+  constructor(x = 0, y = 0) {
+    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;
+    return this;
+  }
+  add(point) {
+    this.x += point.x;
+    this.y += point.y;
+    return this;
+  }
+  sub(point) {
+    this.x -= point.x;
+    this.y -= point.y;
+    return this;
+  }
+  distanceTo(point) {
+    return Math.sqrt(this.distanceToSquared(point));
+  }
+  distanceToSquared(point) {
+    const dx = this.x - point.x;
+    const dy = this.y - point.y;
+    return dx * dx + dy * dy;
+  }
+  length() {
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  }
+  multiplyScalar(scalar) {
+    this.x *= scalar;
+    this.y *= scalar;
+    return this;
+  }
+  divideScalar(scalar) {
+    return this.multiplyScalar(1 / scalar);
+  }
+  subVectors(a, b) {
+    this.x = a.x - b.x;
+    this.y = a.y - b.y;
+    return this;
+  }
+  normalize() {
+    return this.divideScalar(this.length() || 1);
+  }
+  lerpVectors(v1, v2, alpha) {
+    this.x = v1.x + (v2.x - v1.x) * alpha;
+    this.y = v1.y + (v2.y - v1.y) * alpha;
+    return this;
+  }
+  equals(point) {
+    return this.x === point.x && this.y === point.y;
+  }
+  applyMatrix3(matrix3) {
+    const [a, c, tx, b, d, ty] = matrix3.elements;
+    const { x, y } = this;
+    this.set(
+      a * x + c * y + tx,
+      b * x + d * y + ty
+    );
+    return this;
+  }
+  copy(point) {
+    this.x = point.x;
+    this.y = point.y;
+    return this;
+  }
+  clone() {
+    return new Point2D(this.x, this.y);
+  }
+}
+
+class BoundingBox {
+  constructor(left = 0, top = 0, width = 0, height = 0) {
+    this.left = left;
+    this.top = top;
+    this.width = width;
+    this.height = height;
+  }
+  get x() {
+    return this.left;
+  }
+  set x(val) {
+    this.left = val;
+  }
+  get y() {
+    return this.top;
+  }
+  set y(val) {
+    this.top = val;
+  }
+  get right() {
+    return this.left + this.width;
+  }
+  get bottom() {
+    return this.top + this.height;
+  }
+  static from(...boxes) {
+    const firstBox = boxes[0];
+    const merged = boxes.slice(1).reduce(
+      (merged2, box) => {
+        merged2.left = Math.min(merged2.left, box.left);
+        merged2.top = Math.min(merged2.top, box.top);
+        merged2.right = Math.max(merged2.right, box.right);
+        merged2.bottom = Math.max(merged2.bottom, box.bottom);
+        return merged2;
+      },
+      {
+        left: firstBox?.left ?? 0,
+        top: firstBox?.top ?? 0,
+        right: firstBox?.right ?? 0,
+        bottom: firstBox?.bottom ?? 0
+      }
+    );
+    return new BoundingBox(merged.left, merged.top, merged.right - merged.left, merged.bottom - merged.top);
+  }
+  translate(tx, ty) {
+    this.left += tx;
+    this.top += ty;
+    return this;
+  }
+  getCenterPoint() {
+    return new Point2D((this.left + this.right) / 2, (this.top + this.bottom) / 2);
+  }
+  clone() {
+    return new BoundingBox(this.left, this.top, this.width, this.height);
+  }
+  toArray() {
+    return [this.left, this.top, this.width, this.height];
+  }
+}
+
 var __defProp$6 = Object.defineProperty;
 var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$6 = (obj, key, value) => {
@@ -202,86 +342,6 @@ class Matrix3 {
 }
 const _m3 = /* @__PURE__ */ new Matrix3();
 
-class Point2D {
-  constructor(x = 0, y = 0) {
-    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;
-    return this;
-  }
-  add(point) {
-    this.x += point.x;
-    this.y += point.y;
-    return this;
-  }
-  sub(point) {
-    this.x -= point.x;
-    this.y -= point.y;
-    return this;
-  }
-  distanceTo(point) {
-    return Math.sqrt(this.distanceToSquared(point));
-  }
-  distanceToSquared(point) {
-    const dx = this.x - point.x;
-    const dy = this.y - point.y;
-    return dx * dx + dy * dy;
-  }
-  length() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
-  }
-  multiplyScalar(scalar) {
-    this.x *= scalar;
-    this.y *= scalar;
-    return this;
-  }
-  divideScalar(scalar) {
-    return this.multiplyScalar(1 / scalar);
-  }
-  subVectors(a, b) {
-    this.x = a.x - b.x;
-    this.y = a.y - b.y;
-    return this;
-  }
-  normalize() {
-    return this.divideScalar(this.length() || 1);
-  }
-  lerpVectors(v1, v2, alpha) {
-    this.x = v1.x + (v2.x - v1.x) * alpha;
-    this.y = v1.y + (v2.y - v1.y) * alpha;
-    return this;
-  }
-  equals(point) {
-    return this.x === point.x && this.y === point.y;
-  }
-  applyMatrix3(matrix3) {
-    const [a, c, tx, b, d, ty] = matrix3.elements;
-    const { x, y } = this;
-    this.set(
-      a * x + c * y + tx,
-      b * x + d * y + ty
-    );
-    return this;
-  }
-  copy(point) {
-    this.x = point.x;
-    this.y = point.y;
-    return this;
-  }
-  clone() {
-    return new Point2D(this.x, this.y);
-  }
-}
-
 function svgAngle(ux, uy, vx, vy) {
   const dot = ux * vx + uy * vy;
   const len = Math.sqrt(ux * ux + uy * uy) * Math.sqrt(vx * vx + vy * vy);
@@ -979,13 +1039,13 @@ class Curve {
   drawTo(ctx) {
     return this;
   }
-  clone() {
-    return new this.constructor().copy(this);
-  }
   copy(source) {
     this.arcLengthDivisions = source.arcLengthDivisions;
     return this;
   }
+  clone() {
+    return new this.constructor().copy(this);
+  }
 }
 
 class CircleCurve extends Curve {
@@ -1072,6 +1132,13 @@ class CubicBezierCurve extends Curve {
     );
     return output;
   }
+  transform(matrix) {
+    this.v0.applyMatrix3(matrix);
+    this.v1.applyMatrix3(matrix);
+    this.v2.applyMatrix3(matrix);
+    this.v3.applyMatrix3(matrix);
+    return this;
+  }
   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);
@@ -1080,13 +1147,6 @@ class CubicBezierCurve extends Curve {
     max.y = Math.max(max.y, v0.y, v1.y, v2.y, v3.y);
     return { min, max };
   }
-  transform(matrix) {
-    this.v0.applyMatrix3(matrix);
-    this.v1.applyMatrix3(matrix);
-    this.v2.applyMatrix3(matrix);
-    this.v3.applyMatrix3(matrix);
-    return this;
-  }
   getCommands() {
     const { v0, v1, v2, v3 } = this;
     return [
@@ -1126,9 +1186,6 @@ class EllipseCurve extends Curve {
     this.clockwise = clockwise;
     this.rotation = rotation;
   }
-  getDivisions(divisions = 12) {
-    return divisions * 2;
-  }
   getPoint(t, output = new Point2D()) {
     const twoPi = Math.PI * 2;
     let deltaAngle = this.endAngle - this.startAngle;
@@ -1164,6 +1221,9 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
+  getDivisions(divisions = 12) {
+    return divisions * 2;
+  }
   getCommands() {
     const { x, y, radiusX, radiusY, startAngle, endAngle, clockwise } = this;
     const anticlockwise = !clockwise;
@@ -1377,9 +1437,6 @@ class LineCurve extends Curve {
     this.v1 = v1;
     this.v2 = v2;
   }
-  getDivisions() {
-    return 1;
-  }
   getPoint(t, output = new Point2D()) {
     if (t === 1) {
       output.copy(this.v2);
@@ -1398,12 +1455,13 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(u, output);
   }
-  getCommands() {
-    const { v1, v2 } = this;
-    return [
-      { type: "M", x: v1.x, y: v1.y },
-      { type: "L", x: v2.x, y: v2.y }
-    ];
+  transform(matrix) {
+    this.v1.applyMatrix3(matrix);
+    this.v2.applyMatrix3(matrix);
+    return this;
+  }
+  getDivisions() {
+    return 1;
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     const { v1, v2 } = this;
@@ -1413,10 +1471,12 @@ class LineCurve extends Curve {
     max.y = Math.max(max.y, v1.y, v2.y);
     return { min, max };
   }
-  transform(matrix) {
-    this.v1.applyMatrix3(matrix);
-    this.v2.applyMatrix3(matrix);
-    return this;
+  getCommands() {
+    const { v1, v2 } = this;
+    return [
+      { type: "M", x: v1.x, y: v1.y },
+      { type: "L", x: v2.x, y: v2.y }
+    ];
   }
   drawTo(ctx) {
     const { v1, v2 } = this;
@@ -1587,12 +1647,11 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  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 }
-    ];
+  transform(matrix) {
+    this.v0.applyMatrix3(matrix);
+    this.v1.applyMatrix3(matrix);
+    this.v2.applyMatrix3(matrix);
+    return this;
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     const { v0, v1, v2 } = this;
@@ -1606,11 +1665,12 @@ class QuadraticBezierCurve extends Curve {
     max.y = Math.max(max.y, v0.y, v2.y, y1, y2);
     return { min, max };
   }
-  transform(matrix) {
-    this.v0.applyMatrix3(matrix);
-    this.v1.applyMatrix3(matrix);
-    this.v2.applyMatrix3(matrix);
-    return this;
+  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 }
+    ];
   }
   drawTo(ctx) {
     const { v0, v1, v2 } = this;
@@ -1939,9 +1999,8 @@ class CurvePath extends Curve {
   copy(source) {
     super.copy(source);
     this.curves = [];
-    for (let i = 0, l = source.curves.length; i < l; i++) {
-      const curve = source.curves[i];
-      this.curves.push(curve.clone());
+    for (let i = 0, len = source.curves.length; i < len; i++) {
+      this.curves.push(source.curves[i].clone());
     }
     this.autoClose = source.autoClose;
     this.currentPoint.copy(source.currentPoint);
@@ -2066,21 +2125,21 @@ class Path2D {
     this.forEachCurve((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
+  getBoundingBox() {
+    const { min, max } = this.getMinMax();
+    return new BoundingBox(
+      min.x,
+      min.y,
+      max.x - min.x,
+      max.y - min.y
+    );
+  }
   getCommands() {
     return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
   }
   getData() {
     return this.paths.map((path) => path.getData()).join(" ");
   }
-  getBoundingBox() {
-    const { min, max } = this.getMinMax();
-    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>`;
@@ -2101,6 +2160,15 @@ class Path2D {
     this.drawTo(ctx);
     ctx.fill();
   }
+  copy(source) {
+    source.currentPath = this.currentPath.clone();
+    source.paths = this.paths.map((path) => path.clone());
+    source.userData = this.userData;
+    return this;
+  }
+  clone() {
+    return new Path2D().copy(this);
+  }
 }
 
 const defaultUnit = "px";
@@ -2610,6 +2678,7 @@ function parseSvg(svg) {
   });
 }
 
+exports.BoundingBox = BoundingBox;
 exports.CircleCurve = CircleCurve;
 exports.CubicBezierCurve = CubicBezierCurve;
 exports.Curve = Curve;

package/dist/index.d.cts

@@ -42,6 +42,25 @@ declare class Point2D {
     clone(): Point2D;
 }
 
+declare class BoundingBox {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    get x(): number;
+    set x(val: number);
+    get y(): number;
+    set y(val: number);
+    get right(): number;
+    get bottom(): number;
+    constructor(left?: number, top?: number, width?: number, height?: number);
+    static from(...boxes: BoundingBox[]): BoundingBox;
+    translate(tx: number, ty: number): this;
+    getCenterPoint(): Point2D;
+    clone(): BoundingBox;
+    toArray(): [number, number, number, number];
+}
+
 declare class CurvePath extends Curve {
     curves: Curve[];
     currentPoint: Point2D;
@@ -103,19 +122,16 @@ declare class Path2D<T = any> {
         min: Point2D;
         max: Point2D;
     };
+    getBoundingBox(): BoundingBox;
     getCommands(): PathCommand[];
     getData(): string;
-    getBoundingBox(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
     getSvgString(): string;
     getSvgDataUri(): string;
     drawTo(ctx: CanvasRenderingContext2D): void;
     strokeTo(ctx: CanvasRenderingContext2D): void;
     fillTo(ctx: CanvasRenderingContext2D): void;
+    copy(source: Path2D): this;
+    clone(): Path2D;
 }
 
 /**
@@ -200,8 +216,8 @@ declare abstract class Curve {
     getData(): string;
     /** overrideable */
     drawTo(ctx: CanvasRenderingContext2D): this;
-    clone(): this;
     copy(source: Curve): this;
+    clone(): this;
 }
 
 declare class CircleCurve extends Curve {
@@ -226,11 +242,11 @@ declare class CubicBezierCurve extends Curve {
     v3: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D, v3?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
+    transform(matrix: Matrix3): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    transform(matrix: Matrix3): this;
     getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: CubicBezierCurve): this;
@@ -246,8 +262,8 @@ declare class EllipseCurve extends Curve {
     clockwise: boolean;
     rotation: number;
     constructor(x?: number, y?: number, radiusX?: number, radiusY?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
-    getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
+    getDivisions(divisions?: number): number;
     getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     transform(matrix: Matrix3): this;
@@ -275,17 +291,17 @@ declare class LineCurve extends Curve {
     v1: Point2D;
     v2: Point2D;
     constructor(v1?: Point2D, v2?: Point2D);
-    getDivisions(): number;
     getPoint(t: number, output?: Point2D): Point2D;
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
+    transform(matrix: Matrix3): this;
+    getDivisions(): number;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    transform(matrix: Matrix3): this;
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: LineCurve): this;
 }
@@ -320,12 +336,12 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
+    transform(matrix: Matrix3): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    transform(matrix: Matrix3): this;
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: QuadraticBezierCurve): this;
 }
@@ -366,4 +382,4 @@ declare class SplineCurve extends Curve {
 
 declare function parseSvg(svg: string | SVGElement): Path2D[];
 
-export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };
+export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };

package/dist/index.d.mts

@@ -42,6 +42,25 @@ declare class Point2D {
     clone(): Point2D;
 }
 
+declare class BoundingBox {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    get x(): number;
+    set x(val: number);
+    get y(): number;
+    set y(val: number);
+    get right(): number;
+    get bottom(): number;
+    constructor(left?: number, top?: number, width?: number, height?: number);
+    static from(...boxes: BoundingBox[]): BoundingBox;
+    translate(tx: number, ty: number): this;
+    getCenterPoint(): Point2D;
+    clone(): BoundingBox;
+    toArray(): [number, number, number, number];
+}
+
 declare class CurvePath extends Curve {
     curves: Curve[];
     currentPoint: Point2D;
@@ -103,19 +122,16 @@ declare class Path2D<T = any> {
         min: Point2D;
         max: Point2D;
     };
+    getBoundingBox(): BoundingBox;
     getCommands(): PathCommand[];
     getData(): string;
-    getBoundingBox(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
     getSvgString(): string;
     getSvgDataUri(): string;
     drawTo(ctx: CanvasRenderingContext2D): void;
     strokeTo(ctx: CanvasRenderingContext2D): void;
     fillTo(ctx: CanvasRenderingContext2D): void;
+    copy(source: Path2D): this;
+    clone(): Path2D;
 }
 
 /**
@@ -200,8 +216,8 @@ declare abstract class Curve {
     getData(): string;
     /** overrideable */
     drawTo(ctx: CanvasRenderingContext2D): this;
-    clone(): this;
     copy(source: Curve): this;
+    clone(): this;
 }
 
 declare class CircleCurve extends Curve {
@@ -226,11 +242,11 @@ declare class CubicBezierCurve extends Curve {
     v3: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D, v3?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
+    transform(matrix: Matrix3): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    transform(matrix: Matrix3): this;
     getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: CubicBezierCurve): this;
@@ -246,8 +262,8 @@ declare class EllipseCurve extends Curve {
     clockwise: boolean;
     rotation: number;
     constructor(x?: number, y?: number, radiusX?: number, radiusY?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
-    getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
+    getDivisions(divisions?: number): number;
     getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     transform(matrix: Matrix3): this;
@@ -275,17 +291,17 @@ declare class LineCurve extends Curve {
     v1: Point2D;
     v2: Point2D;
     constructor(v1?: Point2D, v2?: Point2D);
-    getDivisions(): number;
     getPoint(t: number, output?: Point2D): Point2D;
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
+    transform(matrix: Matrix3): this;
+    getDivisions(): number;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    transform(matrix: Matrix3): this;
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: LineCurve): this;
 }
@@ -320,12 +336,12 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
+    transform(matrix: Matrix3): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    transform(matrix: Matrix3): this;
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: QuadraticBezierCurve): this;
 }
@@ -366,4 +382,4 @@ declare class SplineCurve extends Curve {
 
 declare function parseSvg(svg: string | SVGElement): Path2D[];
 
-export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };
+export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };