modern-path2d 1.1.0 → 1.2.1

package/dist/index.mjs

@@ -1589,6 +1589,12 @@ class Curve {
   getControlPointRefs() {
     return [];
   }
+  applyTransform(transform) {
+    this.getControlPointRefs().forEach((p) => {
+      p.applyMatrix3(transform);
+    });
+    return this;
+  }
   getUnevenPointArray(count = 5, output = []) {
     const p = new Vector2();
     for (let i = 0, len = Math.max(1, count) - 1; i <= len; i++) {
@@ -1730,10 +1736,6 @@ class Curve {
     }
     return mid;
   }
-  matrix(matrix) {
-    this.getControlPointRefs().forEach((point) => point.applyMatrix3(matrix));
-    return this;
-  }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     const potins = this.getPoints();
     for (let i = 0, len = potins.length; i < len; i++) {
@@ -1807,18 +1809,53 @@ const tempTransform0$1 = new Matrix3();
 const tempTransform1$1 = new Matrix3();
 const tempTransform2$1 = new Matrix3();
 const tempV2 = new Vector2();
-class EllipseCurve extends Curve {
-  constructor(cx = 0, cy = 0, rx = 1, ry = 1, rotation = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
+class RoundCurve extends Curve {
+  constructor(_center, _radius, _diff, rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
     super();
-    this.rotation = rotation;
+    this._center = _center;
+    this._radius = _radius;
+    this._diff = _diff;
+    this.rotate = rotate;
     this.startAngle = startAngle;
     this.endAngle = endAngle;
     this.clockwise = clockwise;
-    this.center = new Vector2(cx, cy);
-    this.radius = new Vector2(rx, ry);
   }
-  center;
-  radius;
+  get cx() {
+    return this._center.x;
+  }
+  set cx(val) {
+    this._center.x = val;
+  }
+  get cy() {
+    return this._center.y;
+  }
+  set cy(val) {
+    this._center.y = val;
+  }
+  get rx() {
+    return this._radius.x;
+  }
+  set rx(val) {
+    this._radius.x = val;
+  }
+  get ry() {
+    return this._radius.y;
+  }
+  set ry(val) {
+    this._radius.y = val;
+  }
+  get dx() {
+    return this._diff.x;
+  }
+  set dx(val) {
+    this._diff.x = val;
+  }
+  get dy() {
+    return this._diff.y;
+  }
+  set dy(val) {
+    this._diff.y = val;
+  }
   isClockwise() {
     return this.clockwise;
   }
@@ -1843,40 +1880,38 @@ class EllipseCurve extends Curve {
       }
     }
     const angle = this.startAngle + t * deltaAngle;
-    let _x = this.center.x + this.radius.x * Math.cos(angle);
-    let _y = this.center.y + this.radius.y * Math.sin(angle);
-    if (this.rotation !== 0) {
-      const cos = Math.cos(this.rotation);
-      const sin = Math.sin(this.rotation);
-      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;
+    let _x = this.cx + this.rx * Math.cos(angle);
+    let _y = this.cy + this.ry * Math.sin(angle);
+    if (this.rotate !== 0) {
+      const cos = Math.cos(this.rotate);
+      const sin = Math.sin(this.rotate);
+      const tx = _x - this.cx;
+      const ty = _y - this.cy;
+      _x = tx * cos - ty * sin + this.cx;
+      _y = tx * sin + ty * cos + this.cy;
     }
     return output.set(_x, _y);
   }
   toCommands() {
-    const { center, radius, startAngle, endAngle, clockwise, rotation } = this;
-    const { x: cx, y: cy } = center;
-    const { x: rx, y: ry } = radius;
-    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 { cx, cy, rx, ry, startAngle, endAngle, clockwise, rotate } = this;
+    const startX = cx + rx * Math.cos(startAngle) * Math.cos(rotate) - ry * Math.sin(startAngle) * Math.sin(rotate);
+    const startY = cy + rx * Math.cos(startAngle) * Math.sin(rotate) + ry * Math.sin(startAngle) * Math.cos(rotate);
     const angleDiff = Math.abs(startAngle - endAngle);
     const largeArcFlag = angleDiff > Math.PI ? 1 : 0;
     const sweepFlag = clockwise ? 1 : 0;
-    const angle = rotation * 180 / Math.PI;
+    const angle = rotate * 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);
+      const midX = cx + rx * Math.cos(midAngle) * Math.cos(rotate) - ry * Math.sin(midAngle) * Math.sin(rotate);
+      const midY = cy + rx * Math.cos(midAngle) * Math.sin(rotate) + ry * Math.sin(midAngle) * Math.cos(rotate);
       return [
         { type: "M", 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);
+      const endX = cx + rx * Math.cos(endAngle) * Math.cos(rotate) - ry * Math.sin(endAngle) * Math.sin(rotate);
+      const endY = cy + rx * Math.cos(endAngle) * Math.sin(rotate) + ry * Math.sin(endAngle) * Math.cos(rotate);
       return [
         { type: "M", x: startX, y: startY },
         { type: "A", rx, ry, angle, largeArcFlag, sweepFlag, x: endX, y: endY }
@@ -1884,24 +1919,24 @@ class EllipseCurve extends Curve {
     }
   }
   drawTo(ctx) {
-    const { center, radius, rotation, startAngle, endAngle, clockwise } = this;
+    const { cx, cy, rx, ry, rotate, startAngle, endAngle, clockwise } = this;
     ctx.ellipse(
-      center.x,
-      center.y,
-      radius.x,
-      radius.y,
-      rotation,
+      cx,
+      cy,
+      rx,
+      ry,
+      rotate,
       startAngle,
       endAngle,
       !clockwise
     );
     return this;
   }
-  matrix(matrix) {
-    tempV2.set(this.center.x, this.center.y);
+  applyTransform(matrix) {
+    tempV2.set(this.cx, this.cy);
     tempV2.applyMatrix3(matrix);
-    this.center.x = tempV2.x;
-    this.center.y = tempV2.y;
+    this.cx = tempV2.x;
+    this.cy = tempV2.y;
     if (isTransformSkewed(matrix)) {
       transfEllipseGeneric(this, matrix);
     } else {
@@ -1910,71 +1945,80 @@ class EllipseCurve extends Curve {
     return this;
   }
   getControlPointRefs() {
-    return [this.center];
+    return [this._center];
   }
   getAdaptivePointArray(output = []) {
-    const i = output.length - 1;
-    const x = this.center.x;
-    const y = this.center.y;
-    const rx = this.radius.x;
-    const ry = this.radius.y;
-    const dx = 0;
-    const dy = 0;
+    const { cx, cy, rx, ry, dx, dy } = this;
     if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
       return output;
     }
     const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
-    const m = n * 8 + (0) + (0);
+    const m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
     if (m === 0) {
       return output;
     }
+    const array = [];
     if (n === 0) {
-      output[i] = output[i + 6] = x + dx;
-      output[i + 1] = output[i + 3] = y + dy;
-      output[i + 2] = output[i + 4] = x - dx;
-      output[i + 5] = output[i + 7] = y - dy;
-      return output;
+      array[0] = array[6] = cx + dx;
+      array[1] = array[3] = cy + dy;
+      array[2] = array[4] = cx - dx;
+      array[5] = array[7] = cy - dy;
+    } else {
+      let j1 = 0;
+      let j2 = n * 4 + (dx ? 2 : 0) + 2;
+      let j3 = j2;
+      let j4 = m;
+      let x0 = dx + rx;
+      let y0 = dy;
+      let x1 = cx + x0;
+      let x2 = cx - x0;
+      let y1 = cy + y0;
+      array[j1++] = x1;
+      array[j1++] = y1;
+      array[--j2] = y1;
+      array[--j2] = x2;
+      if (dy) {
+        const y22 = cy - y0;
+        array[j3++] = x2;
+        array[j3++] = y22;
+        array[--j4] = y22;
+        array[--j4] = x1;
+      }
+      for (let i = 1; i < n; i++) {
+        const a = Math.PI / 2 * (i / n);
+        const x02 = dx + Math.cos(a) * rx;
+        const y02 = dy + Math.sin(a) * ry;
+        const x12 = cx + x02;
+        const x22 = cx - x02;
+        const y12 = cy + y02;
+        const y22 = cy - y02;
+        array[j1++] = x12;
+        array[j1++] = y12;
+        array[--j2] = y12;
+        array[--j2] = x22;
+        array[j3++] = x22;
+        array[j3++] = y22;
+        array[--j4] = y22;
+        array[--j4] = x12;
+      }
+      x0 = dx;
+      y0 = dy + ry;
+      x1 = cx + x0;
+      x2 = cx - x0;
+      y1 = cy + y0;
+      const y2 = cy - y0;
+      array[j1++] = x1;
+      array[j1++] = y1;
+      array[--j4] = y2;
+      array[--j4] = x1;
+      if (dx) {
+        array[j1++] = x2;
+        array[j1++] = y1;
+        array[--j4] = y2;
+        array[--j4] = x2;
+      }
     }
-    let j1 = i;
-    let j2 = n * 4 + (0) + 2 + i;
-    let j3 = j2;
-    let j4 = m + i;
-    let x0 = dx + rx;
-    let y0 = dy;
-    let x1 = x + x0;
-    let x2 = x - x0;
-    let y1 = y + y0;
-    output[j1++] = x1;
-    output[j1++] = y1;
-    output[--j2] = y1;
-    output[--j2] = x2;
-    for (let i2 = 1; i2 < n; i2++) {
-      const a = Math.PI / 2 * (i2 / n);
-      const x02 = dx + Math.cos(a) * rx;
-      const y02 = dy + Math.sin(a) * ry;
-      const x12 = x + x02;
-      const x22 = x - x02;
-      const y12 = y + y02;
-      const y22 = y - y02;
-      output[j1++] = x12;
-      output[j1++] = y12;
-      output[--j2] = y12;
-      output[--j2] = x22;
-      output[j3++] = x22;
-      output[j3++] = y22;
-      output[--j4] = y22;
-      output[--j4] = x12;
-    }
-    x0 = dx;
-    y0 = dy + ry;
-    x1 = x + x0;
-    x2 = x - x0;
-    y1 = y + y0;
-    const y2 = y - y0;
-    output[j1++] = x1;
-    output[j1++] = y1;
-    output[--j4] = y2;
-    output[--j4] = x1;
+    Array.prototype.push.apply(output, array);
     return output;
   }
   fillTriangulate(options = {}) {
@@ -2020,11 +2064,9 @@ class EllipseCurve extends Curve {
     };
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const { center, radius, rotation: theta } = this;
-    const { x: rx, y: ry } = radius;
-    const { x: cx, y: cy } = center;
-    const cosTheta = Math.cos(theta);
-    const sinTheta = Math.sin(theta);
+    const { cx, cy, rx, ry, rotate } = this;
+    const cosTheta = Math.cos(rotate);
+    const sinTheta = Math.sin(rotate);
     const halfWidth = Math.sqrt(
       rx * rx * cosTheta * cosTheta + ry * ry * sinTheta * sinTheta
     );
@@ -2039,22 +2081,22 @@ class EllipseCurve extends Curve {
   }
   copy(source) {
     super.copy(source);
-    this.center.x = source.center.x;
-    this.center.y = source.center.y;
-    this.radius.x = source.radius.x;
-    this.radius.y = source.radius.y;
+    this.cx = source.cx;
+    this.cy = source.cy;
+    this.rx = source.rx;
+    this.ry = source.ry;
     this.startAngle = source.startAngle;
     this.endAngle = source.endAngle;
     this.clockwise = source.clockwise;
-    this.rotation = source.rotation;
+    this.rotate = source.rotate;
     return this;
   }
 }
 function transfEllipseGeneric(curve, m) {
-  const a = curve.radius.x;
-  const b = curve.radius.y;
-  const cosTheta = Math.cos(curve.rotation);
-  const sinTheta = Math.sin(curve.rotation);
+  const a = curve.rx;
+  const b = curve.ry;
+  const cosTheta = Math.cos(curve.rotate);
+  const sinTheta = Math.sin(curve.rotate);
   const v1 = new Vector2(a * cosTheta, a * sinTheta);
   const v2 = new Vector2(-b * sinTheta, b * cosTheta);
   const f1 = v1.applyMatrix3(m);
@@ -2077,9 +2119,9 @@ function transfEllipseGeneric(curve, m) {
   const ed = eigenDecomposition(mQe[0], mQe[1], mQe[4]);
   const rt1sqrt = Math.sqrt(ed.rt1);
   const rt2sqrt = Math.sqrt(ed.rt2);
-  curve.radius.x = 1 / rt1sqrt;
-  curve.radius.y = 1 / rt2sqrt;
-  curve.rotation = Math.atan2(ed.sn, ed.cs);
+  curve.rx = 1 / rt1sqrt;
+  curve.ry = 1 / rt2sqrt;
+  curve.rotate = Math.atan2(ed.sn, ed.cs);
   const isFullEllipse = (curve.endAngle - curve.startAngle) % (2 * Math.PI) < Number.EPSILON;
   if (!isFullEllipse) {
     const mDsqrt = tempTransform1$1.set(
@@ -2119,10 +2161,10 @@ function transfEllipseGeneric(curve, m) {
 function transfEllipseNoSkew(curve, m) {
   const sx = getTransformScaleX(m);
   const sy = getTransformScaleY(m);
-  curve.radius.x *= sx;
-  curve.radius.y *= sy;
+  curve.rx *= sx;
+  curve.ry *= sy;
   const theta = sx > Number.EPSILON ? Math.atan2(m.elements[1], m.elements[0]) : Math.atan2(-m.elements[3], m.elements[4]);
-  curve.rotation += theta;
+  curve.rotate += theta;
   if (isTransformFlipped(m)) {
     curve.startAngle *= -1;
     curve.endAngle *= -1;
@@ -2190,31 +2232,49 @@ function eigenDecomposition(A, B, C) {
   return { rt1, rt2, cs, sn };
 }
 
-class ArcCurve extends EllipseCurve {
+class ArcCurve extends RoundCurve {
   constructor(cx = 0, cy = 0, radius = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
-    super(cx, cy, radius, radius, 0, startAngle, endAngle, clockwise);
+    super(
+      new Vector2(cx, cy),
+      new Vector2(radius, radius),
+      new Vector2(0, 0),
+      0,
+      startAngle,
+      endAngle,
+      clockwise
+    );
+    this.radius = radius;
+  }
+  drawTo(ctx) {
+    const { cx, cy, radius, startAngle, endAngle, clockwise } = this;
+    ctx.arc(
+      cx,
+      cy,
+      radius,
+      startAngle,
+      endAngle,
+      !clockwise
+    );
+    return this;
   }
   getAdaptivePointArray(output = []) {
-    const start = 0;
-    const end = 1;
-    const x = this.center.x;
-    const y = this.center.y;
-    const clockwise = this.clockwise;
-    const radius = this.radius.x;
-    let dist = Math.abs(start - end);
-    if (clockwise && end > start) {
+    const { cx, cy, radius, startAngle, endAngle, clockwise } = this;
+    let dist = Math.abs(startAngle - endAngle);
+    if (!clockwise && startAngle > endAngle) {
+      dist = 2 * Math.PI - dist;
+    } else if (clockwise && endAngle > startAngle) {
       dist = 2 * Math.PI - dist;
     }
     let steps = Math.max(6, Math.floor(6 * radius ** (1 / 3) * (dist / Math.PI)));
     steps = Math.max(steps, 3);
     let f = dist / steps;
-    let t = start;
-    f *= clockwise ? -1 : 1;
+    let t = startAngle;
+    f *= !clockwise ? -1 : 1;
     for (let i = 0; i < steps + 1; i++) {
       const cs = Math.cos(t);
       const sn = Math.sin(t);
-      const nx = x + cs * radius;
-      const ny = y + sn * radius;
+      const nx = cx + cs * radius;
+      const ny = cy + sn * radius;
       output.push(nx, ny);
       t += f;
     }
@@ -2295,29 +2355,21 @@ class CompositeCurve extends Curve {
 }
 
 class CubicBezierCurve extends Curve {
-  p1;
-  cp1;
-  cp2;
-  p2;
-  static from(p1, cp1, cp2, p2) {
+  constructor(p1, cp1, cp2, p2) {
+    super();
+    this.p1 = p1;
+    this.cp1 = cp1;
+    this.cp2 = cp2;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) {
     return new CubicBezierCurve(
-      p1.x,
-      p1.y,
-      cp1.x,
-      cp1.y,
-      cp2.x,
-      cp2.y,
-      p2.x,
-      p2.y
+      new Vector2(p1x, p1y),
+      new Vector2(cp1x, cp1y),
+      new Vector2(cp2x, cp2y),
+      new Vector2(p2x, p2y)
     );
   }
-  constructor(p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) {
-    super();
-    this.p1 = new Vector2(p1x, p1y);
-    this.cp1 = new Vector2(cp1x, cp1y);
-    this.cp2 = new Vector2(cp2x, cp2y);
-    this.p2 = new Vector2(p2x, p2y);
-  }
   getPoint(t, output = new Vector2()) {
     const { p1, cp1, cp2, p2 } = this;
     return output.set(
@@ -2403,16 +2455,44 @@ class CubicBezierCurve extends Curve {
   }
 }
 
-class LineCurve extends Curve {
-  p1;
-  p2;
-  static from(p1, p2) {
-    return new LineCurve(p1.x, p1.y, p2.x, p2.y);
+class EllipseCurve extends RoundCurve {
+  constructor(cx = 0, cy = 0, rx = 1, ry = 1, rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
+    super(
+      new Vector2(cx, cy),
+      new Vector2(rx, ry),
+      new Vector2(),
+      rotate,
+      startAngle,
+      endAngle,
+      clockwise
+    );
+  }
+  drawTo(ctx) {
+    ctx.ellipse(
+      this.cx,
+      this.cy,
+      this.rx,
+      this.ry,
+      this.rotate,
+      this.startAngle,
+      this.endAngle,
+      !this.clockwise
+    );
+    return this;
   }
-  constructor(p1x, p1y, p2x, p2y) {
+}
+
+class LineCurve extends Curve {
+  constructor(p1, p2) {
     super();
-    this.p1 = new Vector2(p1x, p1y);
-    this.p2 = new Vector2(p2x, p2y);
+    this.p1 = p1;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, p2x, p2y) {
+    return new LineCurve(
+      new Vector2(p1x, p1y),
+      new Vector2(p2x, p2y)
+    );
   }
   getPoint(t, output = new Vector2()) {
     if (t === 1) {
@@ -2473,8 +2553,11 @@ class LineCurve extends Curve {
 }
 
 class PloygonCurve extends CompositeCurve {
-  static equilateral(cx = 0, cy = 0, radius = 1, sideCount = 3) {
-    const ploygon = new PloygonCurve();
+  //
+}
+
+class EquilateralPloygonCurve extends PloygonCurve {
+  constructor(cx = 0, cy = 0, radius = 1, sideCount = 3) {
     const points = [];
     for (let i = 0; i < sideCount; i++) {
       const radian = i * 2 * Math.PI / sideCount - 0.5 * Math.PI;
@@ -2485,35 +2568,37 @@ class PloygonCurve extends CompositeCurve {
         ).add({ x: cx, y: cy })
       );
     }
+    const curves = [];
     for (let i = 0; i < sideCount; i++) {
-      ploygon.curves.push(
-        LineCurve.from(points[i], points[(i + 1) % sideCount])
+      curves.push(
+        new LineCurve(
+          points[i],
+          points[(i + 1) % sideCount]
+        )
       );
     }
-    return ploygon;
+    super(curves);
+    this.cx = cx;
+    this.cy = cy;
+    this.radius = radius;
+    this.sideCount = sideCount;
   }
 }
 
 class QuadraticBezierCurve extends Curve {
-  p1;
-  cp;
-  p2;
-  static from(p1, cp, p2) {
+  constructor(p1, cp, p2) {
+    super();
+    this.p1 = p1;
+    this.cp = cp;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, cpx, cpy, p2x, p2y) {
     return new QuadraticBezierCurve(
-      p1.x,
-      p1.y,
-      cp.x,
-      cp.y,
-      p2.x,
-      p2.y
+      new Vector2(p1x, p1y),
+      new Vector2(cpx, cpy),
+      new Vector2(p2x, p2y)
     );
   }
-  constructor(p1x, p1y, cpx, cpy, p2x, p2y) {
-    super();
-    this.p1 = new Vector2(p1x, p1y);
-    this.cp = new Vector2(cpx, cpy);
-    this.p2 = new Vector2(p2x, p2y);
-  }
   getPoint(t, output = new Vector2()) {
     const { p1, cp, p2 } = this;
     output.set(
@@ -2580,16 +2665,20 @@ class RectangleCurve extends PloygonCurve {
       new Vector2(x, y + height)
     ];
     super([
-      LineCurve.from(points[0], points[1]),
-      LineCurve.from(points[1], points[2]),
-      LineCurve.from(points[2], points[3]),
-      LineCurve.from(points[3], points[0])
+      new LineCurve(points[0], points[1]),
+      new LineCurve(points[1], points[2]),
+      new LineCurve(points[2], points[3]),
+      new LineCurve(points[3], points[0])
     ]);
     this.x = x;
     this.y = y;
     this.width = width;
     this.height = height;
   }
+  drawTo(ctx) {
+    ctx.rect(this.x, this.y, this.width, this.height);
+    return this;
+  }
   fillTriangulate(options = {}) {
     let {
       vertices = [],
@@ -2634,6 +2723,34 @@ class RectangleCurve extends PloygonCurve {
   }
 }
 
+class RoundRectangleCurve extends RoundCurve {
+  constructor(x = 0, y = 0, width = 1, height = 1, radius = 1) {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const cx = x + halfWidth;
+    const cy = y + halfHeight;
+    const rx = Math.max(0, Math.min(radius, Math.min(halfWidth, halfHeight)));
+    const ry = rx;
+    const dx = halfWidth - rx;
+    const dy = halfHeight - ry;
+    super(
+      new Vector2(cx, cy),
+      new Vector2(rx, ry),
+      new Vector2(dx, dy)
+    );
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.radius = radius;
+  }
+  drawTo(ctx) {
+    const { x, y, width, height, radius } = this;
+    ctx.roundRect(x, y, width, height, radius);
+    return this;
+  }
+}
+
 class SplineCurve extends Curve {
   constructor(points = []) {
     super();
@@ -2728,7 +2845,7 @@ class CurvePath extends CompositeCurve {
     if (start) {
       const end = this.currentPoint;
       if (end && !start.equals(end)) {
-        this.curves.push(LineCurve.from(end, start));
+        this.curves.push(new LineCurve(end, start));
         end.copy(start);
       }
       this.startPoint = void 0;
@@ -2744,7 +2861,7 @@ class CurvePath extends CompositeCurve {
     const start = this.currentPoint;
     if (!start?.equals({ x, y })) {
       this.curves.push(
-        new LineCurve(
+        LineCurve.from(
           start?.x ?? 0,
           start?.y ?? 0,
           x,
@@ -2759,7 +2876,7 @@ class CurvePath extends CompositeCurve {
     const start = this.currentPoint;
     if (!start?.equals({ x, y })) {
       this.curves.push(
-        new CubicBezierCurve(
+        CubicBezierCurve.from(
           start?.x ?? 0,
           start?.y ?? 0,
           cp1x,
@@ -2778,7 +2895,7 @@ class CurvePath extends CompositeCurve {
     const start = this.currentPoint;
     if (!start?.equals({ x, y })) {
       this.curves.push(
-        new QuadraticBezierCurve(
+        QuadraticBezierCurve.from(
           start?.x ?? 0,
           start?.y ?? 0,
           cpx,
@@ -2839,8 +2956,15 @@ class CurvePath extends CompositeCurve {
     this.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
     return this;
   }
-  rect(x, y, w, h) {
-    const curve = new RectangleCurve(x, y, w, h);
+  rect(x, y, width, height) {
+    const curve = new RectangleCurve(x, y, width, height);
+    this._connetLineTo(curve);
+    this.curves.push(curve);
+    this._setCurrentPoint({ x, y });
+    return this;
+  }
+  roundRect(x, y, width, height, radii) {
+    const curve = new RoundRectangleCurve(x, y, width, height, radii);
     this._connetLineTo(curve);
     this.curves.push(curve);
     this._setCurrentPoint({ x, y });
@@ -2981,8 +3105,12 @@ class Path2D extends CompositeCurve {
     this.currentCurve.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
     return this;
   }
-  rect(x, y, w, h) {
-    this.currentCurve.rect(x, y, w, h);
+  rect(x, y, width, height) {
+    this.currentCurve.rect(x, y, width, height);
+    return this;
+  }
+  roundRect(x, y, width, height, radii) {
+    this.currentCurve.roundRect(x, y, width, height, radii);
     return this;
   }
   addCommands(commands) {
@@ -3076,8 +3204,8 @@ class Path2D extends CompositeCurve {
     });
     return this;
   }
-  matrix(matrix) {
-    this.curves.forEach((curve) => curve.matrix(matrix));
+  applyTransform(transform) {
+    this.curves.forEach((curve) => curve.applyTransform(transform));
     return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
@@ -3236,6 +3364,33 @@ class Path2DSet {
   }
 }
 
+const dataUri = "data:image/svg+xml;";
+const base64DataUri = `${dataUri}base64,`;
+const utf8DataUri = `${dataUri}charset=utf8,`;
+function svgToDOM(svg) {
+  if (typeof svg === "string") {
+    let xml;
+    if (svg.startsWith(base64DataUri)) {
+      svg = svg.substring(base64DataUri.length, svg.length);
+      xml = atob(svg);
+    } else if (svg.startsWith(utf8DataUri)) {
+      svg = svg.substring(utf8DataUri.length, svg.length);
+      xml = decodeURIComponent(svg);
+    } else {
+      xml = svg;
+    }
+    const doc = new DOMParser().parseFromString(xml, "text/xml");
+    const error = doc.querySelector("parsererror");
+    if (error) {
+      throw new Error(`${error.textContent ?? "parser error"}
+${xml}`);
+    }
+    return doc.documentElement;
+  } else {
+    return svg;
+  }
+}
+
 const defaultUnit = "px";
 const defaultDPI = 90;
 const units = ["mm", "cm", "in", "pt", "pc", "px"];
@@ -3713,7 +3868,7 @@ function parseNode(node, style, paths = [], stylesheets = {}) {
   const transformStack = [];
   const transform = getNodeTransform(node, currentTransform, transformStack);
   if (path) {
-    path.matrix(currentTransform);
+    path.applyTransform(currentTransform);
     paths.push(path);
     path.style = style;
   }
@@ -3735,34 +3890,8 @@ function parseNode(node, style, paths = [], stylesheets = {}) {
   return paths;
 }
 
-const dataUri = "data:image/svg+xml;";
-const base64DataUri = `${dataUri}base64,`;
-const utf8DataUri = `${dataUri}charset=utf8,`;
-function parseSVGToDOM(svg) {
-  if (typeof svg === "string") {
-    let xml;
-    if (svg.startsWith(base64DataUri)) {
-      svg = svg.substring(base64DataUri.length, svg.length);
-      xml = atob(svg);
-    } else if (svg.startsWith(utf8DataUri)) {
-      svg = svg.substring(utf8DataUri.length, svg.length);
-      xml = decodeURIComponent(svg);
-    } else {
-      xml = svg;
-    }
-    const doc = new DOMParser().parseFromString(xml, "text/xml");
-    const error = doc.querySelector("parsererror");
-    if (error) {
-      throw new Error(`${error.textContent ?? "parser error"}
-${xml}`);
-    }
-    return doc.documentElement;
-  } else {
-    return svg;
-  }
-}
-function parseSVG(svg) {
-  return new Path2DSet(parseNode(parseSVGToDOM(svg), {}));
+function svgToPath2DSet(svg) {
+  return new Path2DSet(parseNode(svgToDOM(svg), {}));
 }
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, SplineCurve, Vector2, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, parseArcCommand, parsePathDataArgs, parseSVG, parseSVGToDOM, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands };
+export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Vector2, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, parseArcCommand, parsePathDataArgs, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDOM, svgToPath2DSet };