modern-path2d 0.1.18 → 0.2.0

package/dist/index.cjs

@@ -62,6 +62,34 @@ class Vector2 {
     this.y -= vec.y;
     return this;
   }
+  multiply(vec) {
+    this.x *= vec.x;
+    this.y *= vec.y;
+    return this;
+  }
+  divide(vec) {
+    this.x /= vec.x;
+    this.y /= vec.y;
+    return this;
+  }
+  dot(vec) {
+    return this.x * vec.x + this.y * vec.y;
+  }
+  cross(vec) {
+    return this.x * vec.y - this.y * vec.x;
+  }
+  rotate(a, target = { x: 0, y: 0 }) {
+    const rotation = -a / 180 * Math.PI;
+    const x = this.x - target.x;
+    const y = -(this.y - target.y);
+    const sin = Math.sin(rotation);
+    const cos = Math.cos(rotation);
+    this.set(
+      target.x + (x * cos - y * sin),
+      target.y - (x * sin + y * cos)
+    );
+    return this;
+  }
   distanceTo(vec) {
     return Math.sqrt(this.distanceToSquared(vec));
   }
@@ -70,24 +98,48 @@ class Vector2 {
     const dy = this.y - vec.y;
     return dx * dx + dy * dy;
   }
+  lengthSquared() {
+    return this.x * this.x + this.y * this.y;
+  }
   length() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
+    return Math.sqrt(this.lengthSquared());
   }
-  multiplyScalar(scalar) {
-    this.x *= scalar;
-    this.y *= scalar;
+  scale(sx, sy = sx, target = { x: 0, y: 0 }) {
+    const x = sx < 0 ? target.x - this.x + target.x : this.x;
+    const y = sy < 0 ? target.y - this.y + target.y : this.y;
+    this.x = x * Math.abs(sx);
+    this.y = y * Math.abs(sy);
     return this;
   }
-  divideScalar(scalar) {
-    return this.multiplyScalar(1 / scalar);
+  skew(ax, ay = 0, target = { x: 0, y: 0 }) {
+    const dx = this.x - target.x;
+    const dy = this.y - target.y;
+    this.x = target.x + (dx + Math.tan(ax) * dy);
+    this.y = target.y + (dy + Math.tan(ay) * dx);
+    return this;
+  }
+  normalize() {
+    return this.scale(1 / (this.length() || 1));
+  }
+  addVectors(a, b) {
+    this.x = a.x + b.x;
+    this.y = a.y + b.y;
+    return this;
   }
   subVectors(a, b) {
     this.x = a.x - b.x;
     this.y = a.y - b.y;
     return this;
   }
-  normalize() {
-    return this.divideScalar(this.length() || 1);
+  multiplyVectors(a, b) {
+    this.x = a.x * b.x;
+    this.y = a.y * b.y;
+    return this;
+  }
+  divideVectors(a, b) {
+    this.x = a.x / b.x;
+    this.y = a.y / b.y;
+    return this;
   }
   lerpVectors(v1, v2, alpha) {
     this.x = v1.x + (v2.x - v1.x) * alpha;
@@ -915,8 +967,14 @@ class Curve {
     __publicField$5(this, "_cacheArcLengths");
     __publicField$5(this, "_needsUpdate", false);
   }
+  isClockwise() {
+    const prev = this.getPoint(1);
+    const cur = this.getPoint(0.5);
+    const next = this.getPoint(1);
+    return (cur.x - prev.x) * (next.y - cur.y) - (cur.y - prev.y) * (next.x - cur.x) < 0;
+  }
   getPointAt(u, output = new Vector2()) {
-    return this.getPoint(this.getUtoTmapping(u), output);
+    return this.getPoint(this.getUToTMapping(u), output);
   }
   getPoints(divisions = 5) {
     const points = [];
@@ -925,6 +983,10 @@ class Curve {
     }
     return points;
   }
+  forEachControlPoints(cb) {
+    this.getControlPoints().forEach(cb);
+    return this;
+  }
   getSpacedPoints(divisions = 5) {
     const points = [];
     for (let i = 0; i <= divisions; i++) {
@@ -959,22 +1021,22 @@ class Curve {
     this._needsUpdate = true;
     this.getLengths();
   }
-  getUtoTmapping(u, distance) {
-    const arcLengths = this.getLengths();
+  getUToTMapping(u, distance) {
+    const lengths = this.getLengths();
     let i = 0;
-    const il = arcLengths.length;
-    let targetArcLength;
+    const lengthsLen = lengths.length;
+    let targetLength;
     if (distance) {
-      targetArcLength = distance;
+      targetLength = distance;
     } else {
-      targetArcLength = u * arcLengths[il - 1];
+      targetLength = u * lengths[lengthsLen - 1];
     }
     let low = 0;
-    let high = il - 1;
+    let high = lengthsLen - 1;
     let comparison;
     while (low <= high) {
       i = Math.floor(low + (high - low) / 2);
-      comparison = arcLengths[i] - targetArcLength;
+      comparison = lengths[i] - targetLength;
       if (comparison < 0) {
         low = i + 1;
       } else if (comparison > 0) {
@@ -985,14 +1047,14 @@ class Curve {
       }
     }
     i = high;
-    if (arcLengths[i] === targetArcLength) {
-      return i / (il - 1);
+    if (lengths[i] === targetLength) {
+      return i / (lengthsLen - 1);
     }
-    const lengthBefore = arcLengths[i];
-    const lengthAfter = arcLengths[i + 1];
+    const lengthBefore = lengths[i];
+    const lengthAfter = lengths[i + 1];
     const segmentLength = lengthAfter - lengthBefore;
-    const segmentFraction = (targetArcLength - lengthBefore) / segmentLength;
-    return (i + segmentFraction) / (il - 1);
+    const segmentFraction = (targetLength - lengthBefore) / segmentLength;
+    return (i + segmentFraction) / (lengthsLen - 1);
   }
   getTangent(t, output = new Vector2()) {
     const delta = 1e-4;
@@ -1001,15 +1063,36 @@ class Curve {
     return output.copy(this.getPoint(t2).sub(this.getPoint(t1)).normalize());
   }
   getTangentAt(u, output) {
-    return this.getTangent(this.getUtoTmapping(u), output);
+    return this.getTangent(this.getUToTMapping(u), output);
   }
-  /** overrideable */
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  transformPoint(cb) {
-    return this;
+  getNormal(t, output = new Vector2()) {
+    this.getTangent(t, output);
+    return output.set(-output.y, output.x).normalize();
+  }
+  getNormalAt(u, output) {
+    return this.getNormal(this.getUToTMapping(u), output);
   }
-  transform(matrix) {
-    this.transformPoint((point) => point.applyMatrix3(matrix));
+  getTForPoint(target, epsilon = 1e-3) {
+    let low = 0;
+    let high = 1;
+    let mid = (low + high) / 2;
+    while (high - low > epsilon) {
+      mid = (low + high) / 2;
+      const point = this.getPoint(mid);
+      const distance = point.distanceTo(target);
+      if (distance < epsilon) {
+        return mid;
+      }
+      if (point.x < target.x) {
+        low = mid;
+      } else {
+        high = mid;
+      }
+    }
+    return mid;
+  }
+  matrix(matrix) {
+    this.forEachControlPoints((point) => point.applyMatrix3(matrix));
     return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
@@ -1025,7 +1108,7 @@ class Curve {
     const { min, max } = this.getMinMax();
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
-  getCommands() {
+  toCommands() {
     return this.getPoints().map((point, i) => {
       if (i === 0) {
         return { type: "M", x: point.x, y: point.y };
@@ -1034,12 +1117,20 @@ class Curve {
       }
     });
   }
-  getData() {
-    return pathCommandsToPathData(this.getCommands());
+  toData() {
+    return pathCommandsToPathData(this.toCommands());
   }
-  /** overrideable */
-  // eslint-disable-next-line unused-imports/no-unused-vars
   drawTo(ctx) {
+    this.toCommands().forEach((cmd) => {
+      switch (cmd.type) {
+        case "M":
+          ctx.moveTo(cmd.x, cmd.y);
+          break;
+        case "L":
+          ctx.lineTo(cmd.x, cmd.y);
+          break;
+      }
+    });
     return this;
   }
   copy(source) {
@@ -1061,20 +1152,19 @@ class CircleCurve extends Curve {
   }
   getPoint(t) {
     const { radius, center } = this;
-    return center.clone().add(this.getNormal(t).clone().multiplyScalar(radius));
+    return center.clone().add(this.getNormal(t).clone().scale(radius));
   }
-  getTangent(t) {
+  getTangent(t, output = new Vector2()) {
     const { x, y } = this.getNormal(t);
-    return new Vector2(-y, x);
+    return output.set(-y, x);
   }
-  getNormal(t) {
+  getNormal(t, output = new Vector2()) {
     const { start, end } = this;
     const _t = t * (end - start) + start - 0.5 * Math.PI;
-    return new Vector2(Math.cos(_t), Math.sin(_t));
+    return output.set(Math.cos(_t), Math.sin(_t));
   }
-  transformPoint(cb) {
-    cb(this.center);
-    return this;
+  getControlPoints() {
+    return [this.center];
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     min.x = Math.min(min.x, this.center.x - this.radius);
@@ -1133,18 +1223,18 @@ class CubicBezierCurve extends Curve {
   }
   getPoint(t, output = new Vector2()) {
     const { start, startControl, endControl, end } = this;
-    output.set(
+    return output.set(
       cubicBezier(t, start.x, startControl.x, endControl.x, end.x),
       cubicBezier(t, start.y, startControl.y, endControl.y, end.y)
     );
-    return output;
   }
-  transformPoint(cb) {
-    cb(this.start);
-    cb(this.startControl);
-    cb(this.endControl);
-    cb(this.end);
-    return this;
+  getControlPoints() {
+    return [
+      this.start,
+      this.startControl,
+      this.endControl,
+      this.end
+    ];
   }
   _solveQuadratic(a, b, c) {
     const discriminant = b * b - 4 * a * c;
@@ -1187,7 +1277,7 @@ class CubicBezierCurve extends Curve {
     samplePoints(tValues, 10);
     return { min, max };
   }
-  getCommands() {
+  toCommands() {
     const { start, startControl, endControl, end } = this;
     return [
       { type: "M", x: start.x, y: start.y },
@@ -1195,7 +1285,8 @@ class CubicBezierCurve extends Curve {
     ];
   }
   drawTo(ctx) {
-    const { startControl, endControl, end } = this;
+    const { start, startControl, endControl, end } = this;
+    ctx.lineTo(start.x, start.y);
     ctx.bezierCurveTo(startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y);
     return this;
   }
@@ -1224,6 +1315,9 @@ class EllipseCurve extends Curve {
     this.endAngle = endAngle;
     this.clockwise = clockwise;
   }
+  isClockwise() {
+    return this.clockwise;
+  }
   getPoint(t, output = new Vector2()) {
     const twoPi = Math.PI * 2;
     let deltaAngle = this.endAngle - this.startAngle;
@@ -1259,7 +1353,7 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
-  getCommands() {
+  toCommands() {
     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);
@@ -1300,7 +1394,7 @@ class EllipseCurve extends Curve {
     );
     return this;
   }
-  transform(matrix) {
+  matrix(matrix) {
     tempV2.set(this.center.x, this.center.y);
     tempV2.applyMatrix3(matrix);
     this.center.x = tempV2.x;
@@ -1312,9 +1406,8 @@ class EllipseCurve extends Curve {
     }
     return this;
   }
-  transformPoint(cb) {
-    cb(this.center);
-    return this;
+  getControlPoints() {
+    return [this.center];
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     const { center, radiusX: rx, radiusY: ry, rotation: theta } = this;
@@ -1496,7 +1589,7 @@ class LineCurve extends Curve {
     if (t === 1) {
       output.copy(this.end);
     } else {
-      output.copy(this.end).sub(this.start).multiplyScalar(t).add(this.start);
+      output.copy(this.end).sub(this.start).scale(t).add(this.start);
     }
     return output;
   }
@@ -1509,14 +1602,11 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Vector2()) {
     return this.getTangent(u, output);
   }
-  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;
+  getControlPoints() {
+    return [
+      this.start,
+      this.end
+    ];
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     const { start, end } = this;
@@ -1526,7 +1616,7 @@ class LineCurve extends Curve {
     max.y = Math.max(max.y, start.y, end.y);
     return { min, max };
   }
-  getCommands() {
+  toCommands() {
     const { start, end } = this;
     return [
       { type: "M", x: start.x, y: start.y },
@@ -1534,7 +1624,8 @@ class LineCurve extends Curve {
     ];
   }
   drawTo(ctx) {
-    const { end } = this;
+    const { start, end } = this;
+    ctx.lineTo(start.x, start.y);
     ctx.lineTo(end.x, end.y);
     return this;
   }
@@ -1610,22 +1701,21 @@ class HeartCurve extends Curve {
     }
     return this.curves[index];
   }
-  getTangent(t) {
-    return this.getCurve(t).getTangent(this.curveT);
+  getTangent(t, output) {
+    return this.getCurve(t).getTangent(this.curveT, output);
   }
-  getNormal(t) {
-    return this.getCurve(t).getNormal(this.curveT);
+  getNormal(t, output) {
+    return this.getCurve(t).getNormal(this.curveT, output);
   }
-  transformPoint(cb) {
-    this.curves.forEach((curve) => curve.transformPoint(cb));
-    return this;
+  getControlPoints() {
+    return this.curves.flatMap((curve) => curve.getControlPoints());
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
-  getCommands() {
-    return this.curves.flatMap((curve) => curve.getCommands());
+  toCommands() {
+    return this.curves.flatMap((curve) => curve.toCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -1688,16 +1778,15 @@ class PloygonCurve extends Curve {
   getNormal(t, output) {
     return this.getCurve(t).getNormal(this.curveT, output);
   }
-  transformPoint(cb) {
-    this.curves.forEach((curve) => curve.transformPoint(cb));
-    return this;
+  getControlPoints() {
+    return this.curves.flatMap((curve) => curve.getControlPoints());
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
-  getCommands() {
-    return this.curves.flatMap((curve) => curve.getCommands());
+  toCommands() {
+    return this.curves.flatMap((curve) => curve.toCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -1720,11 +1809,12 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  transformPoint(cb) {
-    cb(this.start);
-    cb(this.control);
-    cb(this.end);
-    return this;
+  getControlPoints() {
+    return [
+      this.start,
+      this.control,
+      this.end
+    ];
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     const { start, control, end } = this;
@@ -1738,7 +1828,7 @@ class QuadraticBezierCurve extends Curve {
     max.y = Math.max(max.y, start.y, end.y, y1, y2);
     return { min, max };
   }
-  getCommands() {
+  toCommands() {
     const { start, control, end } = this;
     return [
       { type: "M", x: start.x, y: start.y },
@@ -1746,7 +1836,8 @@ class QuadraticBezierCurve extends Curve {
     ];
   }
   drawTo(ctx) {
-    const { control, end } = this;
+    const { start, control, end } = this;
+    ctx.lineTo(start.x, start.y);
     ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
     return this;
   }
@@ -1836,16 +1927,15 @@ class RectangularCurve extends Curve {
   getNormal(t, output) {
     return this.getCurve(t).getNormal(this.curveT, output);
   }
-  transformPoint(cb) {
-    this.curves.forEach((curve) => curve.transformPoint(cb));
-    return this;
+  getControlPoints() {
+    return this.curves.flatMap((curve) => curve.getControlPoints());
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
-  getCommands() {
-    return this.curves.flatMap((curve) => curve.getCommands());
+  toCommands() {
+    return this.curves.flatMap((curve) => curve.toCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -1873,9 +1963,8 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  transformPoint(cb) {
-    this.points.forEach((point) => cb(point));
-    return this;
+  getControlPoints() {
+    return this.points;
   }
   copy(source) {
     super.copy(source);
@@ -1940,6 +2029,9 @@ class CurvePath extends Curve {
     }
     return output;
   }
+  getControlPoints() {
+    return this.curves.flatMap((curve) => curve.getControlPoints());
+  }
   getLength() {
     const lengths = this.getCurveLengths();
     return lengths[lengths.length - 1];
@@ -2111,10 +2203,6 @@ class CurvePath extends Curve {
     this._setCurrentPoint(points[points.length - 1]);
     return this;
   }
-  transformPoint(cb) {
-    this.curves.forEach((curve) => curve.transformPoint(cb));
-    return this;
-  }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
@@ -2123,8 +2211,8 @@ class CurvePath extends Curve {
     const { min, max } = this.getMinMax();
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
-  getCommands() {
-    return this.curves.flatMap((curve) => curve.getCommands());
+  toCommands() {
+    return this.curves.flatMap((curve) => curve.toCommands());
   }
   drawTo(ctx) {
     const point = this.curves[0]?.getPoint(0);
@@ -2152,6 +2240,29 @@ class CurvePath extends Curve {
 function toKebabCase(str) {
   return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
 }
+function getIntersectionPoint(p1, p2, q1, q2) {
+  const r = p2.clone().sub(p1);
+  const s = q2.clone().sub(q1);
+  const q1p1 = q1.clone().sub(p1);
+  const crossRS = r.cross(s);
+  if (crossRS === 0) {
+    return new Vector2(
+      (p1.x + q1.x) / 2,
+      (p1.y + q1.y) / 2
+    );
+  }
+  const t = q1p1.cross(s) / crossRS;
+  if (Math.abs(t) > 1) {
+    return new Vector2(
+      (p1.x + q1.x) / 2,
+      (p1.y + q1.y) / 2
+    );
+  }
+  return new Vector2(
+    p1.x + t * r.x,
+    p1.y + t * r.y
+  );
+}
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -2254,20 +2365,93 @@ class Path2D {
     this.currentPath.splineThru(points);
     return this;
   }
-  forEachCurve(cb) {
-    this.paths.forEach((path) => path.curves.forEach((curve) => cb(curve)));
+  getControlPoints() {
+    return this.paths.flatMap((path) => path.getControlPoints());
+  }
+  getCurves() {
+    return this.paths.flatMap((path) => path.curves);
+  }
+  scale(sx, sy = sx, target = { x: 0, y: 0 }) {
+    this.getControlPoints().forEach((point) => {
+      point.scale(sx, sy, target);
+    });
+    return this;
+  }
+  skew(ax, ay = 0, target = { x: 0, y: 0 }) {
+    this.getControlPoints().forEach((point) => {
+      point.skew(ax, ay, target);
+    });
+    return this;
+  }
+  rotate(a, target = { x: 0, y: 0 }) {
+    this.getControlPoints().forEach((point) => {
+      point.rotate(a, target);
+    });
     return this;
   }
-  transformPoint(cb) {
-    this.forEachCurve((curve) => curve.transformPoint(cb));
+  bold(b) {
+    if (b === 0) {
+      return this;
+    }
+    const curves = this.getCurves();
+    const _list = [];
+    const _isClockwise = [];
+    const _points = [];
+    curves.forEach((curve, index) => {
+      const points = curve.getControlPoints();
+      const isClockwise = curve.isClockwise();
+      _points[index] = points;
+      _isClockwise[index] = isClockwise;
+      const start = points[0];
+      const end = points[points.length - 1] ?? start;
+      _list.push({
+        start: isClockwise ? end : start,
+        end: isClockwise ? start : end,
+        index
+      });
+    });
+    const list = [];
+    _list.forEach((itemA, indexA) => {
+      list[indexA] = [];
+      _list.forEach((itemB, indexB) => {
+        if (indexB !== indexA && itemB.start.equals(itemA.end)) {
+          list[indexA].push(itemB.index);
+        }
+      });
+    });
+    curves.forEach((curve, index) => {
+      const isClockwise = _isClockwise[index];
+      const points = _points[index];
+      points.forEach((point) => {
+        const t = curve.getTForPoint(point);
+        const dist = curve.getNormal(t).scale(isClockwise ? b : -b);
+        point.add(dist);
+      });
+    });
+    list.forEach((indexes, indexA) => {
+      const pointsA = _points[indexA];
+      indexes.forEach((indexB) => {
+        const pointsB = _points[indexB];
+        const point = getIntersectionPoint(
+          pointsA[pointsA.length - 1],
+          pointsA[pointsA.length - 2] ?? pointsA[pointsA.length - 1],
+          pointsB[0],
+          pointsB[1] ?? pointsB[0]
+        );
+        if (point) {
+          pointsA[pointsA.length - 1].copy(point);
+          pointsB[0].copy(point);
+        }
+      });
+    });
     return this;
   }
-  transform(matrix) {
-    this.forEachCurve((curve) => curve.transform(matrix));
+  matrix(matrix) {
+    this.getCurves().forEach((curve) => curve.matrix(matrix));
     return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
-    this.forEachCurve((curve) => curve.getMinMax(min, max));
+    this.getCurves().forEach((curve) => curve.getMinMax(min, max));
     if (withStyle) {
       const strokeHalfWidth = this.strokeWidth / 2;
       min.x -= strokeHalfWidth;
@@ -2281,13 +2465,50 @@ class Path2D {
     const { min, max } = this.getMinMax(void 0, void 0, withStyle);
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
-  getCommands() {
-    return this.paths.flatMap((path) => path.getCommands());
+  drawTo(ctx, style = {}) {
+    style = { ...this.style, ...style };
+    const { fill = "#000", stroke = "none" } = style;
+    ctx.beginPath();
+    ctx.save();
+    setCanvasContext(ctx, style);
+    this.paths.forEach((path) => {
+      path.drawTo(ctx);
+    });
+    if (fill !== "none") {
+      ctx.fill();
+    }
+    if (stroke !== "none") {
+      ctx.stroke();
+    }
+    ctx.restore();
+    return this;
+  }
+  drawControlPointsTo(ctx, style = {}) {
+    style = { ...this.style, ...style };
+    const { fill = "#000", stroke = "none" } = style;
+    ctx.beginPath();
+    ctx.save();
+    setCanvasContext(ctx, style);
+    this.getControlPoints().forEach((point) => {
+      ctx.moveTo(point.x, point.y);
+      ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
+    });
+    if (fill !== "none") {
+      ctx.fill();
+    }
+    if (stroke !== "none") {
+      ctx.stroke();
+    }
+    ctx.restore();
+    return this;
+  }
+  toCommands() {
+    return this.paths.flatMap((path) => path.toCommands());
   }
-  getData() {
-    return this.paths.map((path) => path.getData()).join(" ");
+  toData() {
+    return this.paths.map((path) => path.toData()).join(" ");
   }
-  getSvgPathXml() {
+  toSvgPathString() {
     const style = {
       ...this.style,
       fill: this.style.fill ?? "#000",
@@ -2308,40 +2529,21 @@ class Path2D {
         cssText += `${key}:${cssStyle[key]};`;
       }
     }
-    return `<path d="${this.getData()}" style="${cssText}"></path>`;
+    return `<path d="${this.toData()}" style="${cssText}"></path>`;
   }
-  getSvgXml() {
+  toSvgString() {
     const { x, y, width, height } = this.getBoundingBox();
-    const path = this.getSvgPathXml();
+    const path = this.toSvgPathString();
     return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${path}</svg>`;
   }
-  getSvgDataUri() {
-    return `data:image/svg+xml;base64,${btoa(this.getSvgXml())}`;
-  }
-  drawTo(ctx, style = {}) {
-    style = { ...this.style, ...style };
-    const { fill = "#000", stroke = "none" } = style;
-    setCanvasContext(ctx, style);
-    this.paths.forEach((path) => {
-      path.drawTo(ctx);
-    });
-    if (fill !== "none") {
-      ctx.fill();
-    }
-    if (stroke !== "none") {
-      ctx.stroke();
-    }
-  }
-  copy(source) {
-    this.currentPath = source.currentPath.clone();
-    this.paths = source.paths.map((path) => path.clone());
-    this.style = { ...source.style };
-    return this;
+  toSvgUrl() {
+    return `data:image/svg+xml;base64,${btoa(this.toSvgString())}`;
   }
   toSvg() {
-    return new DOMParser().parseFromString(this.getSvgXml(), "image/svg+xml").documentElement;
+    return new DOMParser().parseFromString(this.toSvgString(), "image/svg+xml").documentElement;
   }
-  toCanvas(pixelRatio = 2) {
+  toCanvas(options = {}) {
+    const { pixelRatio = 2, ...style } = options;
     const { left, top, width, height } = this.getBoundingBox();
     const canvas = document.createElement("canvas");
     canvas.width = width * pixelRatio;
@@ -2352,10 +2554,16 @@ class Path2D {
     if (ctx) {
       ctx.scale(pixelRatio, pixelRatio);
       ctx.translate(-left, -top);
-      this.drawTo(ctx);
+      this.drawTo(ctx, style);
     }
     return canvas;
   }
+  copy(source) {
+    this.currentPath = source.currentPath.clone();
+    this.paths = source.paths.map((path) => path.clone());
+    this.style = { ...source.style };
+    return this;
+  }
   clone() {
     return new this.constructor().copy(this);
   }
@@ -2832,7 +3040,7 @@ function parseNode(node, style, paths = []) {
   const transformStack = [];
   const transform = getNodeTransform(node, currentTransform, transformStack);
   if (path) {
-    path.transform(currentTransform);
+    path.matrix(currentTransform);
     paths.push(path);
     path.style = style;
   }