modern-path2d 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -1,37 +1,37 @@
 'use strict';
 
-class Point2D {
+class Vector2 {
   constructor(x = 0, y = 0) {
     this.x = x;
     this.y = y;
   }
   static get MAX() {
-    return new Point2D(Infinity, Infinity);
+    return new Vector2(Infinity, Infinity);
   }
   static get MIN() {
-    return new Point2D(-Infinity, -Infinity);
+    return new Vector2(-Infinity, -Infinity);
   }
   set(x, y) {
     this.x = x;
     this.y = y;
     return this;
   }
-  add(point) {
-    this.x += point.x;
-    this.y += point.y;
+  add(vec) {
+    this.x += vec.x;
+    this.y += vec.y;
     return this;
   }
-  sub(point) {
-    this.x -= point.x;
-    this.y -= point.y;
+  sub(vec) {
+    this.x -= vec.x;
+    this.y -= vec.y;
     return this;
   }
-  distanceTo(point) {
-    return Math.sqrt(this.distanceToSquared(point));
+  distanceTo(vec) {
+    return Math.sqrt(this.distanceToSquared(vec));
   }
-  distanceToSquared(point) {
-    const dx = this.x - point.x;
-    const dy = this.y - point.y;
+  distanceToSquared(vec) {
+    const dx = this.x - vec.x;
+    const dy = this.y - vec.y;
     return dx * dx + dy * dy;
   }
   length() {
@@ -58,8 +58,8 @@ class Point2D {
     this.y = v1.y + (v2.y - v1.y) * alpha;
     return this;
   }
-  equals(point) {
-    return this.x === point.x && this.y === point.y;
+  equals(vec) {
+    return this.x === vec.x && this.y === vec.y;
   }
   applyMatrix3(m) {
     const x = this.x;
@@ -69,13 +69,13 @@ class Point2D {
     this.y = e[1] * x + e[4] * y + e[7];
     return this;
   }
-  copy(point) {
-    this.x = point.x;
-    this.y = point.y;
+  copy(vec) {
+    this.x = vec.x;
+    this.y = vec.y;
     return this;
   }
   clone() {
-    return new Point2D(this.x, this.y);
+    return new Vector2(this.x, this.y);
   }
 }
 
@@ -129,7 +129,7 @@ class BoundingBox {
     return this;
   }
   getCenterPoint() {
-    return new Point2D((this.left + this.right) / 2, (this.top + this.bottom) / 2);
+    return new Vector2((this.left + this.right) / 2, (this.top + this.bottom) / 2);
   }
   clone() {
     return new BoundingBox(this.left, this.top, this.width, this.height);
@@ -391,9 +391,9 @@ function getReflection(a, b) {
   return a - (b - a);
 }
 function addPathCommandsToPath2D(commands, path) {
-  const point = new Point2D();
-  const control = new Point2D();
-  const firstPoint = new Point2D();
+  const point = new Vector2();
+  const control = new Vector2();
+  const firstPoint = new Vector2();
   let isFirstPoint = true;
   let doSetFirstPoint = false;
   for (let i = 0, l = commands.length; i < l; i++) {
@@ -920,7 +920,7 @@ class Curve {
     __publicField$5(this, "_cacheArcLengths");
     __publicField$5(this, "_needsUpdate", false);
   }
-  getPointAt(u, output = new Point2D()) {
+  getPointAt(u, output = new Vector2()) {
     return this.getPoint(this.getUtoTmapping(u), output);
   }
   getPoints(divisions = 5) {
@@ -999,35 +999,48 @@ class Curve {
     const segmentFraction = (targetArcLength - lengthBefore) / segmentLength;
     return (i + segmentFraction) / (il - 1);
   }
-  getTangent(t, output = new Point2D()) {
+  getTangent(t, output = new Vector2()) {
     const delta = 1e-4;
-    let t1 = t - delta;
-    let t2 = t + delta;
-    if (t1 < 0)
-      t1 = 0;
-    if (t2 > 1)
-      t2 = 1;
-    return output.copy(this.getPoint(t2)).sub(this.getPoint(t1)).normalize();
-  }
-  getTangentAt(u, output = new Point2D()) {
+    const t1 = Math.max(0, t - delta);
+    const t2 = Math.min(1, t + delta);
+    return output.copy(this.getPoint(t2).sub(this.getPoint(t1)).normalize());
+  }
+  getTangentAt(u, output) {
     return this.getTangent(this.getUtoTmapping(u), output);
   }
   /** overrideable */
   // eslint-disable-next-line unused-imports/no-unused-vars
+  transformPoint(cb) {
+    return this;
+  }
   transform(matrix) {
+    this.transformPoint((point) => point.applyMatrix3(matrix));
     return this;
   }
-  /** overrideable */
   getDivisions(divisions) {
     return divisions;
   }
-  /** overrideable */
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    this.getPoints().forEach((point) => {
+      min.x = Math.min(min.x, point.x);
+      min.y = Math.min(min.y, point.y);
+      max.x = Math.max(max.x, point.x);
+      max.y = Math.max(max.y, point.y);
+    });
     return { min, max };
   }
-  /** overrideable */
+  getBoundingBox() {
+    const { min, max } = this.getMinMax();
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
   getCommands() {
-    return [];
+    return this.getPoints().map((point, i) => {
+      if (i === 0) {
+        return { type: "M", x: point.x, y: point.y };
+      } else {
+        return { type: "L", x: point.x, y: point.y };
+      }
+    });
   }
   getData() {
     return pathCommandsToPathData(this.getCommands());
@@ -1060,14 +1073,18 @@ class CircleCurve extends Curve {
   }
   getTangent(t) {
     const { x, y } = this.getNormal(t);
-    return new Point2D(-y, x);
+    return new Vector2(-y, x);
   }
   getNormal(t) {
     const { start, end } = this;
     const _t = t * (end - start) + start - 0.5 * Math.PI;
-    return new Point2D(Math.cos(_t), Math.sin(_t));
+    return new Vector2(Math.cos(_t), Math.sin(_t));
+  }
+  transformPoint(cb) {
+    cb(this.center);
+    return this;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     min.x = Math.min(min.x, this.center.x - this.radius);
     min.y = Math.min(min.y, this.center.y - this.radius);
     max.x = Math.max(max.x, this.center.x + this.radius);
@@ -1115,54 +1132,54 @@ function cubicBezier(t, p0, p1, p2, p3) {
 }
 
 class CubicBezierCurve extends Curve {
-  constructor(v0 = new Point2D(), v1 = new Point2D(), v2 = new Point2D(), v3 = new Point2D()) {
+  constructor(start = new Vector2(), startControl = new Vector2(), endControl = new Vector2(), end = new Vector2()) {
     super();
-    this.v0 = v0;
-    this.v1 = v1;
-    this.v2 = v2;
-    this.v3 = v3;
+    this.start = start;
+    this.startControl = startControl;
+    this.endControl = endControl;
+    this.end = end;
   }
-  getPoint(t, output = new Point2D()) {
-    const { v0, v1, v2, v3 } = this;
+  getPoint(t, output = new Vector2()) {
+    const { start, startControl, endControl, end } = this;
     output.set(
-      cubicBezier(t, v0.x, v1.x, v2.x, v3.x),
-      cubicBezier(t, v0.y, v1.y, v2.y, v3.y)
+      cubicBezier(t, start.x, startControl.x, endControl.x, end.x),
+      cubicBezier(t, start.y, startControl.y, endControl.y, end.y)
     );
     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);
-    min.y = Math.min(min.y, v0.y, v1.y, v2.y, v3.y);
-    max.x = Math.max(max.x, v0.x, v1.x, v2.x, v3.x);
-    max.y = Math.max(max.y, v0.y, v1.y, v2.y, v3.y);
+  transformPoint(cb) {
+    cb(this.start);
+    cb(this.startControl);
+    cb(this.endControl);
+    cb(this.end);
+    return this;
+  }
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { start, startControl, endControl, end } = this;
+    min.x = Math.min(min.x, start.x, startControl.x, endControl.x, end.x);
+    min.y = Math.min(min.y, start.y, startControl.y, endControl.y, end.y);
+    max.x = Math.max(max.x, start.x, startControl.x, endControl.x, end.x);
+    max.y = Math.max(max.y, start.y, startControl.y, endControl.y, end.y);
     return { min, max };
   }
   getCommands() {
-    const { v0, v1, v2, v3 } = this;
+    const { start, startControl, endControl, end } = this;
     return [
-      { type: "M", x: v0.x, y: v0.y },
-      { type: "C", x1: v1.x, y1: v1.y, x2: v2.x, y2: v2.y, x: v3.x, y: v3.y }
+      { type: "M", x: start.x, y: start.y },
+      { type: "C", x1: startControl.x, y1: startControl.y, x2: endControl.x, y2: endControl.y, x: end.x, y: end.y }
     ];
   }
   drawTo(ctx) {
-    const { v1, v2, v3 } = this;
-    ctx.bezierCurveTo(v1.x, v1.y, v2.x, v2.y, v3.x, v3.y);
+    const { startControl, endControl, end } = this;
+    ctx.bezierCurveTo(startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y);
     return this;
   }
   copy(source) {
     super.copy(source);
-    this.v0.copy(source.v0);
-    this.v1.copy(source.v1);
-    this.v2.copy(source.v2);
-    this.v3.copy(source.v3);
+    this.start.copy(source.start);
+    this.startControl.copy(source.startControl);
+    this.endControl.copy(source.endControl);
+    this.end.copy(source.end);
     return this;
   }
 }
@@ -1170,12 +1187,11 @@ class CubicBezierCurve extends Curve {
 const tempTransform0$1 = new Matrix3();
 const tempTransform1$1 = new Matrix3();
 const tempTransform2$1 = new Matrix3();
-const tempV2 = new Point2D();
+const tempV2 = new Vector2();
 class EllipseCurve extends Curve {
-  constructor(x = 0, y = 0, radiusX = 1, radiusY = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false, rotation = 0) {
+  constructor(center = new Vector2(), radiusX = 1, radiusY = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false, rotation = 0) {
     super();
-    this.x = x;
-    this.y = y;
+    this.center = center;
     this.radiusX = radiusX;
     this.radiusY = radiusY;
     this.startAngle = startAngle;
@@ -1183,7 +1199,7 @@ class EllipseCurve extends Curve {
     this.clockwise = clockwise;
     this.rotation = rotation;
   }
-  getPoint(t, output = new Point2D()) {
+  getPoint(t, output = new Vector2()) {
     const twoPi = Math.PI * 2;
     let deltaAngle = this.endAngle - this.startAngle;
     const samePoints = Math.abs(deltaAngle) < Number.EPSILON;
@@ -1206,15 +1222,15 @@ class EllipseCurve extends Curve {
       }
     }
     const angle = this.startAngle + t * deltaAngle;
-    let _x = this.x + this.radiusX * Math.cos(angle);
-    let _y = this.y + this.radiusY * Math.sin(angle);
+    let _x = this.center.x + this.radiusX * Math.cos(angle);
+    let _y = this.center.y + this.radiusY * Math.sin(angle);
     if (this.rotation !== 0) {
       const cos = Math.cos(this.rotation);
       const sin = Math.sin(this.rotation);
-      const tx = _x - this.x;
-      const ty = _y - this.y;
-      _x = tx * cos - ty * sin + this.x;
-      _y = tx * sin + ty * cos + this.y;
+      const tx = _x - this.center.x;
+      const ty = _y - this.center.y;
+      _x = tx * cos - ty * sin + this.center.x;
+      _y = tx * sin + ty * cos + this.center.y;
     }
     return output.set(_x, _y);
   }
@@ -1222,38 +1238,37 @@ class EllipseCurve extends Curve {
     return divisions * 2;
   }
   getCommands() {
-    const { x, y, radiusX, radiusY, startAngle, endAngle, clockwise } = this;
-    const anticlockwise = !clockwise;
-    const startX = x + radiusX * Math.cos(startAngle);
-    const startY = y + radiusY * Math.sin(startAngle);
-    const endX = x + radiusX * Math.cos(endAngle);
-    const endY = y + radiusY * Math.sin(endAngle);
+    const { center, radiusX: rx, radiusY: ry, startAngle, endAngle, clockwise, rotation } = this;
+    const { x: cx, y: cy } = center;
+    const startX = cx + rx * Math.cos(startAngle) * Math.cos(rotation) - ry * Math.sin(startAngle) * Math.sin(rotation);
+    const startY = cy + rx * Math.cos(startAngle) * Math.sin(rotation) + ry * Math.sin(startAngle) * Math.cos(rotation);
     const angleDiff = Math.abs(startAngle - endAngle);
     const largeArcFlag = angleDiff > Math.PI ? 1 : 0;
-    const sweepFlag = anticlockwise ? 0 : 1;
-    const midX = x + radiusX * Math.cos(startAngle + (endAngle - startAngle) / 2);
-    const midY = y + radiusY * Math.sin(startAngle + (endAngle - startAngle) / 2);
+    const sweepFlag = clockwise ? 1 : 0;
+    const angle = rotation * 180 / Math.PI;
     if (angleDiff >= 2 * Math.PI) {
+      const midAngle = startAngle + Math.PI;
+      const midX = cx + rx * Math.cos(midAngle) * Math.cos(rotation) - ry * Math.sin(midAngle) * Math.sin(rotation);
+      const midY = cy + rx * Math.cos(midAngle) * Math.sin(rotation) + ry * Math.sin(midAngle) * Math.cos(rotation);
       return [
         { type: "M", x: startX, y: startY },
-        { type: "A", rx: radiusX, ry: radiusY, angle: 0, largeArcFlag: 1, sweepFlag, x: midX, y: midY },
-        { type: "A", rx: radiusX, ry: radiusY, angle: 0, largeArcFlag: 1, sweepFlag, x: startX, y: startY }
+        { type: "A", rx, ry, angle, largeArcFlag: 0, sweepFlag, x: midX, y: midY },
+        { type: "A", rx, ry, angle, largeArcFlag: 0, sweepFlag, x: startX, y: startY }
       ];
     } else {
+      const endX = cx + rx * Math.cos(endAngle) * Math.cos(rotation) - ry * Math.sin(endAngle) * Math.sin(rotation);
+      const endY = cy + rx * Math.cos(endAngle) * Math.sin(rotation) + ry * Math.sin(endAngle) * Math.cos(rotation);
       return [
         { type: "M", x: startX, y: startY },
-        { type: "A", rx: radiusX, ry: radiusY, angle: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
+        { type: "A", rx, ry, angle, largeArcFlag, sweepFlag, x: endX, y: endY }
       ];
     }
   }
   drawTo(ctx) {
-    const { x, y, radiusX, radiusY, rotation, startAngle, endAngle, clockwise } = this;
-    const startX = x + radiusX * Math.cos(startAngle);
-    const startY = y + radiusY * Math.sin(startAngle);
-    ctx.moveTo(startX, startY);
+    const { center, radiusX, radiusY, rotation, startAngle, endAngle, clockwise } = this;
     ctx.ellipse(
-      x,
-      y,
+      center.x,
+      center.y,
       radiusX,
       radiusY,
       rotation,
@@ -1264,10 +1279,10 @@ class EllipseCurve extends Curve {
     return this;
   }
   transform(matrix) {
-    tempV2.set(this.x, this.y);
+    tempV2.set(this.center.x, this.center.y);
     tempV2.applyMatrix3(matrix);
-    this.x = tempV2.x;
-    this.y = tempV2.y;
+    this.center.x = tempV2.x;
+    this.center.y = tempV2.y;
     if (isTransformSkewed(matrix)) {
       transfEllipseGeneric(this, matrix);
     } else {
@@ -1275,10 +1290,31 @@ class EllipseCurve extends Curve {
     }
     return this;
   }
+  transformPoint(cb) {
+    cb(this.center);
+    return this;
+  }
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { center, radiusX: rx, radiusY: ry, rotation: theta } = this;
+    const { x: cx, y: cy } = center;
+    const cosTheta = Math.cos(theta);
+    const sinTheta = Math.sin(theta);
+    const halfWidth = Math.sqrt(
+      rx * rx * cosTheta * cosTheta + ry * ry * sinTheta * sinTheta
+    );
+    const halfHeight = Math.sqrt(
+      rx * rx * sinTheta * sinTheta + ry * ry * cosTheta * cosTheta
+    );
+    min.x = Math.min(min.x, cx - halfWidth);
+    min.y = Math.min(min.y, cy - halfHeight);
+    max.x = Math.max(max.x, cx + halfWidth);
+    max.y = Math.max(max.y, cy + halfHeight);
+    return { min, max };
+  }
   copy(source) {
     super.copy(source);
-    this.x = source.x;
-    this.y = source.y;
+    this.center.x = source.center.x;
+    this.center.y = source.center.y;
     this.radiusX = source.radiusX;
     this.radiusY = source.radiusY;
     this.startAngle = source.startAngle;
@@ -1293,8 +1329,8 @@ function transfEllipseGeneric(curve, m) {
   const b = curve.radiusY;
   const cosTheta = Math.cos(curve.rotation);
   const sinTheta = Math.sin(curve.rotation);
-  const v1 = new Point2D(a * cosTheta, a * sinTheta);
-  const v2 = new Point2D(-b * sinTheta, b * cosTheta);
+  const v1 = new Vector2(a * cosTheta, a * sinTheta);
+  const v2 = new Vector2(-b * sinTheta, b * cosTheta);
   const f1 = v1.applyMatrix3(m);
   const f2 = v2.applyMatrix3(m);
   const mF = tempTransform0$1.set(
@@ -1344,7 +1380,7 @@ function transfEllipseGeneric(curve, m) {
     );
     const mDRF = mDsqrt.multiply(mRT).multiply(mF);
     const transformAngle = (phi) => {
-      const { x: cosR, y: sinR } = new Point2D(Math.cos(phi), Math.sin(phi)).applyMatrix3(mDRF);
+      const { x: cosR, y: sinR } = new Vector2(Math.cos(phi), Math.sin(phi)).applyMatrix3(mDRF);
       return Math.atan2(sinR, cosR);
     };
     curve.startAngle = transformAngle(curve.startAngle);
@@ -1429,61 +1465,64 @@ function eigenDecomposition(A, B, C) {
 }
 
 class LineCurve extends Curve {
-  constructor(v1 = new Point2D(), v2 = new Point2D()) {
+  constructor(start = new Vector2(), end = new Vector2()) {
     super();
-    this.v1 = v1;
-    this.v2 = v2;
+    this.start = start;
+    this.end = end;
   }
-  getPoint(t, output = new Point2D()) {
+  getPoint(t, output = new Vector2()) {
     if (t === 1) {
-      output.copy(this.v2);
+      output.copy(this.end);
     } else {
-      output.copy(this.v2).sub(this.v1);
-      output.multiplyScalar(t).add(this.v1);
+      output.copy(this.end).sub(this.start).multiplyScalar(t).add(this.start);
     }
     return output;
   }
-  getPointAt(u, output = new Point2D()) {
+  getPointAt(u, output = new Vector2()) {
     return this.getPoint(u, output);
   }
-  getTangent(t, output = new Point2D()) {
-    return output.subVectors(this.v2, this.v1).normalize();
+  getTangent(_t, output = new Vector2()) {
+    return output.subVectors(this.end, this.start).normalize();
   }
-  getTangentAt(u, output = new Point2D()) {
+  getTangentAt(u, output = new Vector2()) {
     return this.getTangent(u, output);
   }
-  transform(matrix) {
-    this.v1.applyMatrix3(matrix);
-    this.v2.applyMatrix3(matrix);
+  getNormal(t, output = new Vector2()) {
+    const { x, y } = this.getPoint(t).sub(this.start);
+    return output.set(y, -x).normalize();
+  }
+  transformPoint(cb) {
+    cb(this.start);
+    cb(this.end);
     return this;
   }
   getDivisions() {
     return 1;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
-    const { v1, v2 } = this;
-    min.x = Math.min(min.x, v1.x, v2.x);
-    min.y = Math.min(min.y, v1.y, v2.y);
-    max.x = Math.max(max.x, v1.x, v2.x);
-    max.y = Math.max(max.y, v1.y, v2.y);
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { start, end } = this;
+    min.x = Math.min(min.x, start.x, end.x);
+    min.y = Math.min(min.y, start.y, end.y);
+    max.x = Math.max(max.x, start.x, end.x);
+    max.y = Math.max(max.y, start.y, end.y);
     return { min, max };
   }
   getCommands() {
-    const { v1, v2 } = this;
+    const { start, end } = this;
     return [
-      { type: "M", x: v1.x, y: v1.y },
-      { type: "L", x: v2.x, y: v2.y }
+      { type: "M", x: start.x, y: start.y },
+      { type: "L", x: end.x, y: end.y }
     ];
   }
   drawTo(ctx) {
-    const { v2 } = this;
-    ctx.lineTo(v2.x, v2.y);
+    const { end } = this;
+    ctx.lineTo(end.x, end.y);
     return this;
   }
   copy(source) {
     super.copy(source);
-    this.v1.copy(source.v1);
-    this.v2.copy(source.v2);
+    this.start.copy(source.start);
+    this.end.copy(source.end);
     return this;
   }
 }
@@ -1501,66 +1540,68 @@ class HeartCurve extends Curve {
     this.size = size;
     this.start = start;
     this.end = end;
-    __publicField$4(this, "curves");
-    __publicField$4(this, "pointT", 0);
+    __publicField$4(this, "curveT", 0);
+    this.update();
+  }
+  update() {
     const { x, y } = this.center;
-    const A = new Point2D(x + 0.5 * this.size, y - 0.5 * this.size);
-    const t = new Point2D(x - 0.5 * this.size, y - 0.5 * this.size);
-    const i = new Point2D(x, y + 0.5 * this.size);
+    const A = new Vector2(x + 0.5 * this.size, y - 0.5 * this.size);
+    const t = new Vector2(x - 0.5 * this.size, y - 0.5 * this.size);
+    const i = new Vector2(x, y + 0.5 * this.size);
     const curve1 = new CircleCurve(A, Math.SQRT1_2 * this.size, -0.25 * Math.PI, 0.75 * Math.PI);
     const curve5 = new CircleCurve(t, Math.SQRT1_2 * this.size, -0.75 * Math.PI, 0.25 * Math.PI);
     const curve3 = new CircleCurve(i, 0.5 * Math.SQRT1_2 * this.size, 0.75 * Math.PI, 1.25 * Math.PI);
-    const e = new Point2D(x, y + this.size);
-    const l = new Point2D(x + this.size, y);
-    const c = new Point2D().lerpVectors(l, e, 0.75);
-    const h = new Point2D(x - this.size, y);
-    const a = new Point2D().lerpVectors(h, e, 0.75);
+    const e = new Vector2(x, y + this.size);
+    const l = new Vector2(x + this.size, y);
+    const c = new Vector2().lerpVectors(l, e, 0.75);
+    const h = new Vector2(x - this.size, y);
+    const a = new Vector2().lerpVectors(h, e, 0.75);
     const curve2 = new LineCurve(l, c);
     const curve4 = new LineCurve(a, h);
     this.curves = [curve1, curve2, curve3, curve4, curve5];
+    return this;
   }
-  getPoint(value) {
-    return this.getCurrentLine(value).getPoint(this.pointT);
+  getPoint(t) {
+    return this.getCurve(t).getPoint(this.curveT);
   }
-  getPointAt(value) {
-    return this.getPoint(value);
+  getPointAt(t) {
+    return this.getPoint(t);
   }
-  getCurrentLine(value) {
-    let val = (value * (this.end - this.start) + this.start) % 1;
+  getCurve(t) {
+    let val = (t * (this.end - this.start) + this.start) % 1;
     val < 0 && (val += 1);
     val *= 9 * Math.PI / 8 + 1.5;
     let index;
-    const t = 0.5 * Math.PI;
-    if (val < t) {
+    const PI_1_2 = 0.5 * Math.PI;
+    if (val < PI_1_2) {
       index = 0;
-      this.pointT = val / t;
-    } else if (val < t + 0.75) {
+      this.curveT = val / PI_1_2;
+    } else if (val < PI_1_2 + 0.75) {
       index = 1;
-      this.pointT = (val - t) / 0.75;
+      this.curveT = (val - PI_1_2) / 0.75;
     } else if (val < 5 * Math.PI / 8 + 0.75) {
       index = 2;
-      this.pointT = (val - t - 0.75) / (Math.PI / 8);
+      this.curveT = (val - PI_1_2 - 0.75) / (Math.PI / 8);
     } else if (val < 5 * Math.PI / 8 + 1.5) {
       index = 3;
-      this.pointT = (val - 5 * Math.PI / 8 - 0.75) / 0.75;
+      this.curveT = (val - 5 * Math.PI / 8 - 0.75) / 0.75;
     } else {
       index = 4;
-      this.pointT = (val - 5 * Math.PI / 8 - 1.5) / t;
+      this.curveT = (val - 5 * Math.PI / 8 - 1.5) / PI_1_2;
     }
     return this.curves[index];
   }
-  getTangent(value) {
-    return this.getCurrentLine(value).getTangent(this.pointT).normalize();
+  getTangent(t) {
+    return this.getCurve(t).getTangent(this.curveT);
   }
-  getNormal(value) {
-    const line = this.getCurrentLine(value);
-    return new Point2D(line.v2.y - line.v1.y, -(line.v2.x - line.v1.x)).normalize();
+  getNormal(t) {
+    return this.getCurve(t).getNormal(this.curveT);
   }
-  transform(matrix) {
-    this.curves.forEach((curve) => curve.transform(matrix));
+  transformPoint(cb) {
+    this.curves.forEach((curve) => curve.transformPoint(cb));
     return this;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
@@ -1580,54 +1621,59 @@ var __publicField$3 = (obj, key, value) => {
   return value;
 };
 class PloygonCurve extends Curve {
-  constructor(center, radius = 0, num = 0, start = 0, end = 1) {
+  constructor(center, radius = 0, number = 0, start = 0, end = 1) {
     super();
     this.center = center;
     this.radius = radius;
-    this.num = num;
+    this.number = number;
     this.start = start;
     this.end = end;
     __publicField$3(this, "curves", []);
+    __publicField$3(this, "curveT", 0);
     __publicField$3(this, "points", []);
-    for (let i = 0; i < this.num; i++) {
-      let radian = i * 2 * Math.PI / this.num;
+    this.update();
+  }
+  update() {
+    for (let i = 0; i < this.number; i++) {
+      let radian = i * 2 * Math.PI / this.number;
       radian -= 0.5 * Math.PI;
-      const point = new Point2D(this.radius * Math.cos(radian), this.radius * Math.sin(radian));
-      point.add(this.center);
-      this.points.push(point);
+      this.points.push(
+        new Vector2(
+          this.radius * Math.cos(radian),
+          this.radius * Math.sin(radian)
+        ).add(this.center)
+      );
     }
-    for (let i = 0; i < this.num; i++) {
-      this.curves.push(new LineCurve(this.points[i], this.points[(i + 1) % this.num]));
+    for (let i = 0; i < this.number; i++) {
+      this.curves.push(new LineCurve(this.points[i], this.points[(i + 1) % this.number]));
     }
+    return this;
   }
-  getPoint(value) {
-    this.getCurrentLine(value);
-    return this.currentLine.getPoint(this.pointK);
-  }
-  getPointAt(value) {
-    return this.getPoint(value);
-  }
-  getCurrentLine(value) {
-    let pos = (value * (this.end - this.start) + this.start) % 1;
+  getCurve(t) {
+    let pos = (t * (this.end - this.start) + this.start) % 1;
     pos < 0 && (pos += 1);
-    const v = pos * this.num;
+    const v = pos * this.number;
     const index = Math.floor(v);
-    this.pointK = v - index;
-    this.currentLine = this.curves[index];
-    return this.currentLine;
+    this.curveT = v - index;
+    return this.curves[index];
   }
-  getTangent(value) {
-    return this.getCurrentLine(value).getTangent(0).normalize();
+  getPoint(t, output) {
+    return this.getCurve(t).getPoint(this.curveT, output);
   }
-  getNormal(value) {
-    const line = this.getCurrentLine(value);
-    return new Point2D(line.v2.y - line.v1.y, -(line.v2.x - line.v1.x)).normalize();
+  getPointAt(u, output) {
+    return this.getPoint(u, output);
   }
-  transform(matrix) {
-    this.curves.forEach((curve) => curve.transform(matrix));
+  getTangent(t, output) {
+    return this.getCurve(t).getTangent(this.curveT, output);
+  }
+  getNormal(t, output) {
+    return this.getCurve(t).getNormal(this.curveT, output);
+  }
+  transformPoint(cb) {
+    this.curves.forEach((curve) => curve.transformPoint(cb));
     return this;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
@@ -1641,55 +1687,55 @@ class PloygonCurve extends Curve {
 }
 
 class QuadraticBezierCurve extends Curve {
-  constructor(v0 = new Point2D(), v1 = new Point2D(), v2 = new Point2D()) {
+  constructor(start = new Vector2(), control = new Vector2(), end = new Vector2()) {
     super();
-    this.v0 = v0;
-    this.v1 = v1;
-    this.v2 = v2;
+    this.start = start;
+    this.control = control;
+    this.end = end;
   }
-  getPoint(t, output = new Point2D()) {
-    const { v0, v1, v2 } = this;
+  getPoint(t, output = new Vector2()) {
+    const { start, control, end } = this;
     output.set(
-      quadraticBezier(t, v0.x, v1.x, v2.x),
-      quadraticBezier(t, v0.y, v1.y, v2.y)
+      quadraticBezier(t, start.x, control.x, end.x),
+      quadraticBezier(t, start.y, control.y, end.y)
     );
     return output;
   }
-  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;
-    const x1 = 0.5 * (v0.x + v1.x);
-    const y1 = 0.5 * (v0.y + v1.y);
-    const x2 = 0.5 * (v0.x + v2.x);
-    const y2 = 0.5 * (v0.y + v2.y);
-    min.x = Math.min(min.x, v0.x, v2.x, x1, x2);
-    min.y = Math.min(min.y, v0.y, v2.y, y1, y2);
-    max.x = Math.max(max.x, v0.x, v2.x, x1, x2);
-    max.y = Math.max(max.y, v0.y, v2.y, y1, y2);
+  transformPoint(cb) {
+    cb(this.start);
+    cb(this.control);
+    cb(this.end);
+    return this;
+  }
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { start, control, end } = this;
+    const x1 = 0.5 * (start.x + control.x);
+    const y1 = 0.5 * (start.y + control.y);
+    const x2 = 0.5 * (start.x + end.x);
+    const y2 = 0.5 * (start.y + end.y);
+    min.x = Math.min(min.x, start.x, end.x, x1, x2);
+    min.y = Math.min(min.y, start.y, end.y, y1, y2);
+    max.x = Math.max(max.x, start.x, end.x, x1, x2);
+    max.y = Math.max(max.y, start.y, end.y, y1, y2);
     return { min, max };
   }
   getCommands() {
-    const { v0, v1, v2 } = this;
+    const { start, control, end } = this;
     return [
-      { type: "M", x: v0.x, y: v0.y },
-      { type: "Q", x1: v1.x, y1: v1.y, x: v2.x, y: v2.y }
+      { type: "M", x: start.x, y: start.y },
+      { type: "Q", x1: control.x, y1: control.y, x: end.x, y: end.y }
     ];
   }
   drawTo(ctx) {
-    const { v1, v2 } = this;
-    ctx.quadraticCurveTo(v1.x, v1.y, v2.x, v2.y);
+    const { control, end } = this;
+    ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
     return this;
   }
   copy(source) {
     super.copy(source);
-    this.v0.copy(source.v0);
-    this.v1.copy(source.v1);
-    this.v2.copy(source.v2);
+    this.start.copy(source.start);
+    this.control.copy(source.control);
+    this.end.copy(source.end);
     return this;
   }
 }
@@ -1709,19 +1755,8 @@ class RectangularCurve extends Curve {
     this.start = start;
     this.end = end;
     __publicField$2(this, "curves", []);
-    __publicField$2(this, "pointT", 0);
-    const { x, y } = this.center;
-    const offsetX = this.rx;
-    const offsetY = this.rx / this.aspectRatio;
-    const points = [
-      new Point2D(x - offsetX, y - offsetY),
-      new Point2D(x + offsetX, y - offsetY),
-      new Point2D(x + offsetX, y + offsetY),
-      new Point2D(x - offsetX, y + offsetY)
-    ];
-    for (let i = 0; i < 4; i++) {
-      this.curves.push(new LineCurve(points[i].clone(), points[(i + 1) % 4].clone()));
-    }
+    __publicField$2(this, "curveT", 0);
+    this.update();
   }
   get x() {
     return this.center.x - this.rx;
@@ -1735,44 +1770,58 @@ class RectangularCurve extends Curve {
   get height() {
     return this.rx / this.aspectRatio * 2;
   }
-  getPoint(t) {
-    return this.getCurrentLine(t).getPoint(this.pointT);
-  }
-  getPointAt(u) {
-    return this.getPoint(u);
+  update() {
+    const { x, y } = this.center;
+    const offsetX = this.rx;
+    const offsetY = this.rx / this.aspectRatio;
+    const points = [
+      new Vector2(x - offsetX, y - offsetY),
+      new Vector2(x + offsetX, y - offsetY),
+      new Vector2(x + offsetX, y + offsetY),
+      new Vector2(x - offsetX, y + offsetY)
+    ];
+    for (let i = 0; i < 4; i++) {
+      this.curves.push(new LineCurve(points[i].clone(), points[(i + 1) % 4].clone()));
+    }
+    return this;
   }
-  getCurrentLine(t) {
-    let flag = (t * (this.end - this.start) + this.start) % 1;
-    flag < 0 && (flag += 1);
-    flag *= (1 + this.aspectRatio) * 2;
+  getCurve(t) {
+    let current = (t * (this.end - this.start) + this.start) % 1;
+    current < 0 && (current += 1);
+    current *= (1 + this.aspectRatio) * 2;
     let i;
-    if (flag < this.aspectRatio) {
+    if (current < this.aspectRatio) {
       i = 0;
-      this.pointT = flag / this.aspectRatio;
-    } else if (flag < this.aspectRatio + 1) {
+      this.curveT = current / this.aspectRatio;
+    } else if (current < this.aspectRatio + 1) {
       i = 1;
-      this.pointT = (flag - this.aspectRatio) / 1;
-    } else if (flag < 2 * this.aspectRatio + 1) {
+      this.curveT = (current - this.aspectRatio) / 1;
+    } else if (current < 2 * this.aspectRatio + 1) {
       i = 2;
-      this.pointT = (flag - this.aspectRatio - 1) / this.aspectRatio;
+      this.curveT = (current - this.aspectRatio - 1) / this.aspectRatio;
     } else {
       i = 3;
-      this.pointT = (flag - 2 * this.aspectRatio - 1) / 1;
+      this.curveT = (current - 2 * this.aspectRatio - 1) / 1;
     }
     return this.curves[i];
   }
-  getTangent(t) {
-    return this.getCurrentLine(t).getTangent(0).normalize();
+  getPoint(t, output) {
+    return this.getCurve(t).getPoint(this.curveT, output);
   }
-  getNormal(value) {
-    const { v1, v2 } = this.getCurrentLine(value);
-    return new Point2D(v2.y - v1.y, -(v2.x - v1.x)).normalize();
+  getPointAt(u, output) {
+    return this.getPoint(u, output);
   }
-  transform(matrix) {
-    this.curves.forEach((curve) => curve.transform(matrix));
+  getTangent(t, output) {
+    return this.getCurve(t).getTangent(this.curveT, output);
+  }
+  getNormal(t, output) {
+    return this.getCurve(t).getNormal(this.curveT, output);
+  }
+  transformPoint(cb) {
+    this.curves.forEach((curve) => curve.transformPoint(cb));
     return this;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
@@ -1793,7 +1842,7 @@ class SplineCurve extends Curve {
   getDivisions(divisions = 12) {
     return divisions * this.points.length;
   }
-  getPoint(t, output = new Point2D()) {
+  getPoint(t, output = new Vector2()) {
     const { points } = this;
     const p = (points.length - 1) * t;
     const _p = Math.floor(p);
@@ -1808,6 +1857,10 @@ class SplineCurve extends Curve {
     );
     return output;
   }
+  transformPoint(cb) {
+    this.points.forEach((point) => cb(point));
+    return this;
+  }
   copy(source) {
     super.copy(source);
     this.points = [];
@@ -1828,7 +1881,7 @@ class CurvePath extends Curve {
   constructor(points) {
     super();
     __publicField$1(this, "curves", []);
-    __publicField$1(this, "currentPoint", new Point2D());
+    __publicField$1(this, "currentPoint", new Vector2());
     __publicField$1(this, "autoClose", false);
     __publicField$1(this, "_cacheLengths", []);
     if (points) {
@@ -1847,7 +1900,7 @@ class CurvePath extends Curve {
     }
     return this;
   }
-  getPoint(position, output = new Point2D()) {
+  getPoint(position, output = new Vector2()) {
     const d = position * this.getLength();
     const curveLengths = this.getCurveLengths();
     let i = 0;
@@ -1899,10 +1952,10 @@ class CurvePath extends Curve {
     let last;
     for (let i = 0, curves = this.curves; i < curves.length; i++) {
       const curve = curves[i];
-      const pts = curve.getPoints(curve.getDivisions(divisions));
-      for (let i2 = 0; i2 < pts.length; i2++) {
-        const point = pts[i2];
-        if (last && last.equals(point))
+      const curvePoints = curve.getPoints(curve.getDivisions(divisions));
+      for (let i2 = 0; i2 < curvePoints.length; i2++) {
+        const point = curvePoints[i2];
+        if (last?.equals(point))
           continue;
         points.push(point);
         last = point;
@@ -1924,9 +1977,9 @@ class CurvePath extends Curve {
     this.curves.push(
       new CubicBezierCurve(
         this.currentPoint.clone(),
-        new Point2D(cp1x, cp1y),
-        new Point2D(cp2x, cp2y),
-        new Point2D(x, y)
+        new Vector2(cp1x, cp1y),
+        new Vector2(cp2x, cp2y),
+        new Vector2(x, y)
       )
     );
     this.currentPoint.set(x, y);
@@ -1936,7 +1989,7 @@ class CurvePath extends Curve {
     this.curves.push(
       new LineCurve(
         this.currentPoint.clone(),
-        new Point2D(x, y)
+        new Vector2(x, y)
       )
     );
     this.currentPoint.set(x, y);
@@ -1950,8 +2003,8 @@ class CurvePath extends Curve {
     this.curves.push(
       new QuadraticBezierCurve(
         this.currentPoint.clone(),
-        new Point2D(cpx, cpy),
-        new Point2D(x, y)
+        new Vector2(cpx, cpy),
+        new Vector2(x, y)
       )
     );
     this.currentPoint.set(x, y);
@@ -1960,7 +2013,7 @@ class CurvePath extends Curve {
   rect(x, y, w, h) {
     this.curves.push(
       new RectangularCurve(
-        new Point2D(x + w / 2, y + h / 2),
+        new Vector2(x + w / 2, y + h / 2),
         w / 2,
         w / h
       )
@@ -1989,11 +2042,19 @@ class CurvePath extends Curve {
     return this;
   }
   absellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
-    const curve = new EllipseCurve(x, y, radiusX, radiusY, startAngle, endAngle, clockwise, rotation);
+    const curve = new EllipseCurve(
+      new Vector2(x, y),
+      radiusX,
+      radiusY,
+      startAngle,
+      endAngle,
+      clockwise,
+      rotation
+    );
     if (this.curves.length > 0) {
-      const firstPoint = curve.getPoint(0);
-      if (!firstPoint.equals(this.currentPoint)) {
-        this.lineTo(firstPoint.x, firstPoint.y);
+      const first = curve.getPoint(0);
+      if (!first.equals(this.currentPoint)) {
+        this.lineTo(first.x, first.y);
       }
     }
     this.curves.push(curve);
@@ -2003,7 +2064,7 @@ class CurvePath extends Curve {
   getCommands() {
     return this.curves.flatMap((curve) => curve.getCommands());
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
@@ -2091,34 +2152,10 @@ class Path2D {
     this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
     return this;
   }
+  // TODO
+  // eslint-disable-next-line unused-imports/no-unused-vars
   arcTo(x1, y1, x2, y2, radius) {
-    const point = this.currentPath.currentPoint;
-    const currentX = point.x;
-    const currentY = point.y;
-    const dx1 = x1 - currentX;
-    const dy1 = y1 - currentY;
-    const dx2 = x2 - x1;
-    const dy2 = y2 - y1;
-    const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-    if (len1 < radius || len2 < radius) {
-      this.lineTo(x2, y2);
-      return this;
-    }
-    const unitV1 = { x: dx1 / len1, y: dy1 / len1 };
-    const unitV2 = { x: dx2 / len2, y: dy2 / len2 };
-    const centerX = x1 - unitV1.y * radius;
-    const centerY = y1 + unitV1.x * radius;
-    const startAngle = Math.atan2(unitV1.y, unitV1.x);
-    const endAngle = Math.atan2(unitV2.y, unitV2.x);
-    let angleDiff = endAngle - startAngle;
-    if (angleDiff > Math.PI) {
-      angleDiff -= 2 * Math.PI;
-    } else if (angleDiff < -Math.PI) {
-      angleDiff += 2 * Math.PI;
-    }
-    this.arc(centerX, centerY, radius, startAngle, startAngle + angleDiff, false);
-    this.lineTo(x2, y2);
+    console.warn("Method arcTo not supported yet");
     return this;
   }
   ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
@@ -2145,22 +2182,21 @@ class Path2D {
     this.paths.forEach((path) => path.curves.forEach((curve) => cb(curve)));
     return this;
   }
+  transformPoint(cb) {
+    this.forEachCurve((curve) => curve.transformPoint(cb));
+    return this;
+  }
   transform(matrix) {
     this.forEachCurve((curve) => curve.transform(matrix));
     return this;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     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
-    );
+    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()));
@@ -2170,7 +2206,8 @@ 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.getData()}"></path></svg>`;
+    const strokeWidth = 1;
+    return `<svg viewBox="${x - strokeWidth} ${y - strokeWidth} ${width + strokeWidth * 2} ${height + strokeWidth * 2}" 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())}`;
@@ -2707,10 +2744,9 @@ function parseNode(node, style, paths = []) {
 const dataUri = "data:image/svg+xml;";
 const base64DataUri = `${dataUri}base64,`;
 const utf8DataUri = `${dataUri}charset=utf8,`;
-function parseSvg(svg) {
-  let node;
-  let xml;
+function parseSvgToDom(svg) {
   if (typeof svg === "string") {
+    let xml;
     if (svg.startsWith(base64DataUri)) {
       svg = svg.substring(base64DataUri.length, svg.length);
       xml = atob(svg);
@@ -2720,11 +2756,16 @@ function parseSvg(svg) {
     } else {
       xml = svg;
     }
-    node = new DOMParser().parseFromString(xml, "image/svg+xml").documentElement;
+    return new DOMParser().parseFromString(
+      xml,
+      "image/svg+xml"
+    ).documentElement;
   } else {
-    node = svg;
+    return svg;
   }
-  return parseNode(node, {
+}
+function parseSvg(svg) {
+  return parseNode(parseSvgToDom(svg), {
     fill: "#000",
     fillOpacity: 1,
     strokeOpacity: 1,
@@ -2746,8 +2787,9 @@ exports.LineCurve = LineCurve;
 exports.Matrix3 = Matrix3;
 exports.Path2D = Path2D;
 exports.PloygonCurve = PloygonCurve;
-exports.Point2D = Point2D;
 exports.QuadraticBezierCurve = QuadraticBezierCurve;
 exports.RectangularCurve = RectangularCurve;
 exports.SplineCurve = SplineCurve;
+exports.Vector2 = Vector2;
 exports.parseSvg = parseSvg;
+exports.parseSvgToDom = parseSvgToDom;