modern-path2d 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -1,3 +1,143 @@
+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) => {
@@ -200,86 +340,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);
@@ -977,13 +1037,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 {
@@ -1070,6 +1130,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);
@@ -1078,13 +1145,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 [
@@ -1124,9 +1184,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;
@@ -1162,6 +1219,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;
@@ -1375,9 +1435,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);
@@ -1396,12 +1453,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;
@@ -1411,10 +1469,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;
@@ -1585,12 +1645,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;
@@ -1604,11 +1663,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;
@@ -1937,9 +1997,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);
@@ -2064,21 +2123,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>`;
@@ -2099,6 +2158,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";
@@ -2608,4 +2676,4 @@ function parseSvg(svg) {
   });
 }
 
-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/package.json

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