toosoon-utils 4.2.2 → 4.3.0

package/lib/extras/paths/PathContext.js

@@ -1,5 +1,5 @@
-import { EPSILON, PI, TWO_PI } from '../../constants';
-import { angle, distance, toDegrees } from '../../geometry';
+import { EPSILON } from '../../constants';
+import { toDegrees } from '../../geometry';
 import { LineCurve, PolylineCurve, QuadraticBezierCurve, CubicBezierCurve, CatmullRomCurve, SplineCurve, EllipseCurve, ArcCurve } from '../curves';
 import { Vector2 } from '../geometry';
 import Path from './Path';
@@ -12,14 +12,8 @@ import Path from './Path';
  * @implements CanvasRenderingContext2D
  */
 export default class PathContext extends Path {
-    /**
-     * Path current position
-     */
-    currentPosition = new Vector2(NaN, NaN);
-    /**
-     * Path current transformation matrix
-     */
-    currentTransform = new DOMMatrix();
+    _currentPosition = new Vector2(NaN, NaN);
+    _currentTransform = new DOMMatrix();
     _transformStack = [];
     /**
      * Create a path from a given list of points
@@ -50,8 +44,8 @@ export default class PathContext extends Path {
      * @return {this}
      */
     closePath() {
-        const startPoint = this.subpaths[0]?.getPoint(0);
-        const endPoint = this.subpaths[this.subpaths.length - 1]?.getPoint(1);
+        const startPoint = this.curves[0]?.getPoint(0);
+        const endPoint = this.curves[this.curves.length - 1]?.getPoint(1);
         if (!startPoint.equals(endPoint)) {
             const curve = new LineCurve(endPoint.x, endPoint.y, startPoint.x, startPoint.y);
             this.add(curve);
@@ -66,8 +60,8 @@ export default class PathContext extends Path {
      * @return {this}
      */
     moveTo(x, y) {
-        const [tX, tY] = this._transformPoint([x, y]);
-        this._setCurrentPosition(tX, tY);
+        [x, y] = this._transformPoint([x, y]);
+        this._setCurrentPosition(x, y);
         return this;
     }
     /**
@@ -79,12 +73,12 @@ export default class PathContext extends Path {
      * @return {this}
      */
     lineTo(x, y) {
-        const [tX, tY] = this._transformPoint([x, y]);
+        [x, y] = this._transformPoint([x, y]);
         if (!this._hasCurrentPosition())
-            return this._setCurrentPosition(tX, tY);
-        const curve = new LineCurve(this.currentPosition.x, this.currentPosition.y, tX, tY);
+            return this._setCurrentPosition(x, y);
+        const curve = new LineCurve(this._currentPosition.x, this._currentPosition.y, x, y);
         this.add(curve);
-        this._setCurrentPosition(tX, tY);
+        this._setCurrentPosition(x, y);
         return this;
     }
     /**
@@ -95,12 +89,12 @@ export default class PathContext extends Path {
      * @returns {this}
      */
     polylineTo(points) {
-        const tPoints = this._transformPoints(points);
+        points = this._transformPoints(points);
         if (!this._hasCurrentPosition())
-            this._setCurrentPosition(...tPoints[0]);
-        const curve = new PolylineCurve([this.currentPosition.toArray()].concat(tPoints));
+            this._setCurrentPosition(...points[0]);
+        const curve = new PolylineCurve([this._currentPosition.toArray()].concat(points));
         this.add(curve);
-        this._setCurrentPosition(...tPoints[tPoints.length - 1]);
+        this._setCurrentPosition(...points[points.length - 1]);
         return this;
     }
     /**
@@ -114,13 +108,13 @@ export default class PathContext extends Path {
      * @return {this}
      */
     quadraticCurveTo(cpx, cpy, x2, y2) {
-        const [tCpx, tCpy] = this._transformPoint([cpx, cpy]);
-        const [tX2, tY2] = this._transformPoint([x2, y2]);
+        [cpx, cpy] = this._transformPoint([cpx, cpy]);
+        [x2, y2] = this._transformPoint([x2, y2]);
         if (!this._hasCurrentPosition())
-            this._setCurrentPosition(tCpx, tCpy);
-        const curve = new QuadraticBezierCurve(this.currentPosition.x, this.currentPosition.y, tCpx, tCpy, tX2, tY2);
+            this._setCurrentPosition(cpx, cpy);
+        const curve = new QuadraticBezierCurve(this._currentPosition.x, this._currentPosition.y, cpx, cpy, x2, y2);
         this.add(curve);
-        this._setCurrentPosition(tX2, tY2);
+        this._setCurrentPosition(x2, y2);
         return this;
     }
     /**
@@ -136,14 +130,14 @@ export default class PathContext extends Path {
      * @return {this}
      */
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
-        const [tCp1x, tCp1y] = this._transformPoint([cp1x, cp1y]);
-        const [tCp2x, tCp2y] = this._transformPoint([cp2x, cp2y]);
-        const [tX2, tY2] = this._transformPoint([x2, y2]);
+        [cp1x, cp1y] = this._transformPoint([cp1x, cp1y]);
+        [cp2x, cp2y] = this._transformPoint([cp2x, cp2y]);
+        [x2, y2] = this._transformPoint([x2, y2]);
         if (!this._hasCurrentPosition())
-            this._setCurrentPosition(tCp1x, tCp1y);
-        const curve = new CubicBezierCurve(this.currentPosition.x, this.currentPosition.y, tCp1x, tCp1y, tCp2x, tCp2y, tX2, tY2);
+            this._setCurrentPosition(cp1x, cp1y);
+        const curve = new CubicBezierCurve(this._currentPosition.x, this._currentPosition.y, cp1x, cp1y, cp2x, cp2y, x2, y2);
         this.add(curve);
-        this._setCurrentPosition(tX2, tY2);
+        this._setCurrentPosition(x2, y2);
         return this;
     }
     /**
@@ -159,14 +153,14 @@ export default class PathContext extends Path {
      * @return {this}
      */
     catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
-        const [tCp1x, tCp1y] = this._transformPoint([cp1x, cp1y]);
-        const [tCp2x, tCp2y] = this._transformPoint([cp2x, cp2y]);
-        const [tX2, tY2] = this._transformPoint([x2, y2]);
+        [cp1x, cp1y] = this._transformPoint([cp1x, cp1y]);
+        [cp2x, cp2y] = this._transformPoint([cp2x, cp2y]);
+        [x2, y2] = this._transformPoint([x2, y2]);
         if (!this._hasCurrentPosition())
-            this._setCurrentPosition(tCp1x, tCp1y);
-        const curve = new CatmullRomCurve(this.currentPosition.x, this.currentPosition.y, tCp1x, tCp1y, tCp2x, tCp2y, tX2, tY2);
+            this._setCurrentPosition(cp1x, cp1y);
+        const curve = new CatmullRomCurve(this._currentPosition.x, this._currentPosition.y, cp1x, cp1y, cp2x, cp2y, x2, y2);
         this.add(curve);
-        this._setCurrentPosition(tX2, tY2);
+        this._setCurrentPosition(x2, y2);
         return this;
     }
     /**
@@ -177,12 +171,12 @@ export default class PathContext extends Path {
      * @return {this}
      */
     splineTo(points) {
-        const tPoints = this._transformPoints(points);
+        points = this._transformPoints(points);
         if (!this._hasCurrentPosition())
-            this._setCurrentPosition(...tPoints[0]);
-        const curve = new SplineCurve([this.currentPosition.toArray()].concat(tPoints));
+            this._setCurrentPosition(...points[0]);
+        const curve = new SplineCurve([this._currentPosition.toArray()].concat(points));
         this.add(curve);
-        this._setCurrentPosition(...tPoints[tPoints.length - 1]);
+        this._setCurrentPosition(...points[points.length - 1]);
         return this;
     }
     /**
@@ -200,18 +194,16 @@ export default class PathContext extends Path {
      * @return {this}
      */
     ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) {
-        const [tCx, tCy, tRx, tRy, tRotation] = this._transformEllipse(cx, cy, rx, ry, rotation);
-        const start = EllipseCurve.interpolate(0, tCx, tCy, tRx, tRy, tRotation, startAngle, endAngle, counterclockwise);
-        const end = EllipseCurve.interpolate(1, tCx, tCy, tRx, tRy, tRotation, startAngle, endAngle, counterclockwise);
-        if (!this._hasCurrentPosition())
-            this._setCurrentPosition(...start);
-        else if (!this.currentPosition.equals(start)) {
-            const curve = new LineCurve(this.currentPosition.x, this.currentPosition.y, ...start);
-            this.add(curve);
+        [cx, cy, rx, ry, rotation] = this._transformEllipse(cx, cy, rx, ry, rotation);
+        const start = EllipseCurve.interpolate(0, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        const end = EllipseCurve.interpolate(1, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        if (this._hasCurrentPosition() && !this._currentPosition.equals(start)) {
+            const line = new LineCurve(this._currentPosition.x, this._currentPosition.y, ...start);
+            this.add(line);
         }
-        if (tRx <= EPSILON && tRy <= EPSILON)
+        if (rx <= EPSILON && ry <= EPSILON)
             return this;
-        const curve = new EllipseCurve(tCx, tCy, tRx, tRy, tRotation, startAngle, endAngle, counterclockwise);
+        const curve = new EllipseCurve(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
         this.add(curve);
         this._setCurrentPosition(...end);
         return this;
@@ -232,25 +224,23 @@ export default class PathContext extends Path {
         if (!this._isUniform || this._isRotated) {
             return this.ellipse(cx, cy, radius, radius, 0, startAngle, endAngle, counterclockwise);
         }
-        const [tCx, tCy, tRadius] = this._transformEllipse(cx, cy, radius, radius, 0);
-        const start = EllipseCurve.interpolate(0, tCx, tCy, tRadius, tRadius, 0, startAngle, endAngle, counterclockwise);
-        const end = EllipseCurve.interpolate(1, tCx, tCy, tRadius, tRadius, 0, startAngle, endAngle, counterclockwise);
-        if (!this._hasCurrentPosition())
-            this._setCurrentPosition(...start);
-        else if (!this.currentPosition.equals(start)) {
-            const curve = new LineCurve(this.currentPosition.x, this.currentPosition.y, ...start);
-            this.add(curve);
+        [cx, cy, radius] = this._transformEllipse(cx, cy, radius, radius, 0);
+        const start = EllipseCurve.interpolate(0, cx, cy, radius, radius, 0, startAngle, endAngle, counterclockwise);
+        const end = EllipseCurve.interpolate(1, cx, cy, radius, radius, 0, startAngle, endAngle, counterclockwise);
+        if (this._hasCurrentPosition() && !this._currentPosition.equals(start)) {
+            const line = new LineCurve(this._currentPosition.x, this._currentPosition.y, ...start);
+            this.add(line);
         }
-        if (tRadius <= EPSILON)
+        if (radius <= EPSILON)
             return this;
-        const curve = new ArcCurve(tCx, tCy, tRadius, startAngle, endAngle, counterclockwise);
+        const curve = new ArcCurve(cx, cy, radius, startAngle, endAngle, counterclockwise);
         this.add(curve);
         this._setCurrentPosition(...end);
         return this;
     }
     /**
      * Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
-     * Add an instance of {@link ArcCurve} to this path
+     * Add an instance of {@link EllipseCurve} to this path
      *
      * @param {number} x1 X-axis coordinate of the first control point
      * @param {number} y1 Y-axis coordinate of the first control point
@@ -263,35 +253,46 @@ export default class PathContext extends Path {
         if (radius < 0) {
             throw new Error(`IndexSizeError: Failed to execute 'arcTo' on 'PathContext': The radius provided (${radius}) is negative.`);
         }
-        const [x0, y0] = this._inversePoint(this.currentPosition.toArray());
-        if (Vector2.equals([x0, y0], [x1, y1])) {
+        const p0 = new Vector2(...this._currentPosition).applyMatrix(this._currentTransform.inverse());
+        const p1 = new Vector2(x1, y1);
+        const p2 = new Vector2(x2, y2);
+        if (Vector2.equals(p0, p1)) {
             return this;
         }
-        if (Vector2.collinear([x0, y0], [x1, y1], [x2, y2]) || radius === 0) {
+        if (Vector2.collinear(p0, p1, p2) || radius === 0) {
             return this.lineTo(x1, y1);
         }
-        const l01 = distance(x0, y0, x1, y1);
-        const l21 = distance(x2, y2, x1, y1);
-        const [t1x, t1y] = LineCurve.interpolate(radius / l01, x1, y1, x0, y0);
-        const [t2x, t2y] = LineCurve.interpolate(radius / l21, x1, y1, x2, y2);
-        const v1x = (t1x - x1) / radius;
-        const v1y = (t1y - y1) / radius;
-        const v2x = (t2x - x1) / radius;
-        const v2y = (t2y - y1) / radius;
-        const normalX = v2y - v1y;
-        const normalY = v1x - v2x;
-        const cx = x1 + normalX * radius;
-        const cy = y1 + normalY * radius;
-        const startAngle = angle(cx, cy, t1x, t1y);
-        const endAngle = angle(cx, cy, t2x, t2y);
-        let deltaAngle = endAngle - startAngle;
-        while (deltaAngle > PI)
-            deltaAngle -= TWO_PI;
-        while (deltaAngle < -PI)
-            deltaAngle += TWO_PI;
+        const v1 = p0.clone().sub(p1).normalize();
+        const v2 = p2.clone().sub(p1).normalize();
+        const n1 = new Vector2(-v1.y, v1.x);
+        const n2 = new Vector2(-v2.y, v2.x);
+        const angle = Math.acos(v1.dot(v2));
+        const tangentLength = radius / Math.tan(angle / 2);
+        const t1 = p1.clone().add(v1.clone().multiplyScalar(tangentLength));
+        const t2 = p1.clone().add(v2.clone().multiplyScalar(tangentLength));
+        const dx = t2.x - t1.x;
+        const dy = t2.y - t1.y;
+        const determinant = n2.x * n1.y - n2.y * n1.x;
+        if (Math.abs(determinant) <= EPSILON) {
+            throw new Error(`Failed to execute 'arcTo' on 'PathContext': Failed to compute arc center.`);
+        }
+        const normalLength = (n2.x * dy - n2.y * dx) / determinant;
+        const c = t1.clone().add(n1.clone().multiplyScalar(normalLength));
+        const startAngle = Math.atan2(t1.y - c.y, t1.x - c.x);
+        const endAngle = Math.atan2(t2.y - c.y, t2.x - c.x);
+        const deltaAngle = endAngle - startAngle;
         const counterclockwise = deltaAngle < 0;
-        this.lineTo(t1x, t1y);
-        this.arc(cx, cy, radius, startAngle, endAngle, counterclockwise);
+        t1.applyMatrix(this._currentTransform);
+        t2.applyMatrix(this._currentTransform);
+        c.applyMatrix(this._currentTransform);
+        const rx = this._scaleX * radius;
+        const ry = this._scaleY * radius;
+        const rotation = this._rotation;
+        const line = new LineCurve(this._currentPosition.x, this._currentPosition.y, t1.x, t1.y);
+        this.add(line);
+        const ellipse = new EllipseCurve(c.x, c.y, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        this.add(ellipse);
+        this._setCurrentPosition(t2.x, t2.y);
         return this;
     }
     /**
@@ -339,7 +340,6 @@ export default class PathContext extends Path {
         bottomLeftRadius = Math.min(bottomLeftRadius, maxRadius);
         const curve = new PathContext({ autoClose: true });
         curve.setTransform(this.getTransform());
-        this.add(curve);
         // Top-Right corner
         if (topRightRadius > 0) {
             curve.lineTo(x + width - topRightRadius, y);
@@ -372,19 +372,20 @@ export default class PathContext extends Path {
         else {
             curve.lineTo(x, y);
         }
+        this.add(curve);
         return this;
     }
     setTransform(a, b, c, d, e, f) {
         if (a instanceof DOMMatrix) {
             const matrix = a;
-            this.currentTransform = new DOMMatrix([matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f]);
+            this._currentTransform = new DOMMatrix([matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f]);
         }
         else {
-            this.currentTransform = new DOMMatrix([a, b, c, d, e, f]);
+            this._currentTransform = new DOMMatrix([a, b, c, d, e, f]);
         }
     }
     getTransform() {
-        const { a, b, c, d, e, f } = this.currentTransform;
+        const { a, b, c, d, e, f } = this._currentTransform;
         return new DOMMatrix([a, b, c, d, e, f]);
     }
     resetTransform() {
@@ -392,23 +393,23 @@ export default class PathContext extends Path {
     }
     transform(a, b, c, d, e, f) {
         const matrix = new DOMMatrix([a, b, c, d, e, f]);
-        this.currentTransform = this.currentTransform.multiply(matrix);
+        this._currentTransform = this._currentTransform.multiply(matrix);
     }
     translate(x, y) {
-        this.currentTransform = this.currentTransform.translate(x, y);
+        this._currentTransform = this._currentTransform.translate(x, y);
     }
     rotate(angle) {
-        this.currentTransform = this.currentTransform.rotate(toDegrees(angle));
+        this._currentTransform = this._currentTransform.rotate(toDegrees(angle));
     }
     scale(x, y) {
-        this.currentTransform = this.currentTransform.scale(x, y);
+        this._currentTransform = this._currentTransform.scale(x, y);
     }
     save() {
         this._transformStack.push(this.getTransform());
     }
     restore() {
         if (this._transformStack.length > 0) {
-            this.currentTransform = this._transformStack.pop();
+            this._currentTransform = this._transformStack.pop();
         }
     }
     reset() {
@@ -416,79 +417,62 @@ export default class PathContext extends Path {
         this._transformStack = [];
     }
     _hasCurrentPosition() {
-        return !isNaN(this.currentPosition.x) && !isNaN(this.currentPosition.y);
+        return !isNaN(this._currentPosition.x) && !isNaN(this._currentPosition.y);
     }
     _setCurrentPosition(x, y) {
-        this.currentPosition.set(x, y);
+        this._currentPosition.set(x, y);
         return this;
     }
     // ****************************
     // Matrix transformations
     // ****************************
-    _transformPoint(point, matrix = this.currentTransform) {
+    _transformPoint(point) {
         if (this._isIdentity)
             return point;
-        const { x, y } = matrix.transformPoint({ x: point[0], y: point[1] });
+        const { x, y } = this._currentTransform.transformPoint({ x: point[0], y: point[1] });
         return [x, y];
     }
-    _transformPoints(points, matrix) {
+    _transformPoints(points) {
         if (this._isIdentity)
             return points;
-        return points.map((point) => this._transformPoint(point, matrix));
+        return points.map((point) => this._transformPoint(point));
     }
-    _transformVector(vector, matrix) {
+    _transformVector(vector) {
         if (this._isIdentity)
             return vector;
-        const [x0, y0] = this._transformPoint([0, 0], matrix);
-        const [vx, vy] = this._transformPoint(vector, matrix);
+        const [x0, y0] = this._transformPoint([0, 0]);
+        const [vx, vy] = this._transformPoint(vector);
         return [vx - x0, vy - y0];
     }
-    _transformEllipse(cx, cy, rx, ry, rotation, matrix) {
+    _transformEllipse(cx, cy, rx, ry, rotation) {
         if (this._isIdentity)
             return [cx, cy, rx, ry, rotation];
-        const [tCx, tCy] = this._transformPoint([cx, cy], matrix);
-        const [ux1, uy1] = this._transformVector([Math.cos(rotation) * rx, Math.sin(rotation) * rx], matrix);
-        const [ux2, uy2] = this._transformVector([-Math.sin(rotation) * ry, Math.cos(rotation) * ry], matrix);
-        const tRx = Math.hypot(ux1, uy1);
-        const tRy = Math.hypot(ux2, uy2);
-        const tRotation = Math.atan2(uy1, ux1);
-        return [tCx, tCy, tRx, tRy, tRotation];
-    }
-    _inversePoint(point) {
-        return this._transformPoint(point, this.currentTransform.inverse());
+        [cx, cy] = this._transformPoint([cx, cy]);
+        const [u1x, u1y] = this._transformVector([Math.cos(rotation) * rx, Math.sin(rotation) * rx]);
+        const [u2x, u2y] = this._transformVector([-Math.sin(rotation) * ry, Math.cos(rotation) * ry]);
+        rx = Math.hypot(u1x, u1y);
+        ry = Math.hypot(u2x, u2y);
+        rotation = Math.atan2(u1y, u1x);
+        return [cx, cy, rx, ry, rotation];
     }
     get _translateX() {
-        return this.currentTransform.e;
+        return this._currentTransform.e;
     }
     get _translateY() {
-        return this.currentTransform.f;
+        return this._currentTransform.f;
     }
     get _scaleX() {
-        const { a, b } = this.currentTransform;
+        const { a, b } = this._currentTransform;
         return Math.hypot(a, b);
     }
     get _scaleY() {
-        const { c, d } = this.currentTransform;
+        const { c, d } = this._currentTransform;
         return Math.hypot(c, d);
     }
     get _rotation() {
-        const { a, b } = this.currentTransform;
+        const { a, b } = this._currentTransform;
         return Math.atan2(b, a);
     }
-    get _skewX() {
-        const { c, d } = this.currentTransform;
-        const cos = Math.cos(this._rotation);
-        const sin = Math.sin(this._rotation);
-        const m11 = c * cos + d * sin;
-        return Math.atan(m11 / this._scaleX);
-    }
-    get _skewY() {
-        const { a, b } = this.currentTransform;
-        const cos = Math.cos(this._rotation);
-        const sin = Math.sin(this._rotation);
-        const m21 = a * sin - b * cos;
-        return Math.atan(m21 / this._scaleY);
-    }
     get _isTranslated() {
         return Math.abs(this._translateX) > EPSILON || Math.abs(this._translateY) > EPSILON;
     }
@@ -496,20 +480,14 @@ export default class PathContext extends Path {
         return Math.abs(this._scaleX - 1) > EPSILON || Math.abs(this._scaleY - 1) > EPSILON;
     }
     get _isRotated() {
-        const { b, c } = this.currentTransform;
+        const { b, c } = this._currentTransform;
         return Math.abs(b) > EPSILON || Math.abs(c) > EPSILON;
     }
-    get _isSkewed() {
-        const { a, b, c, d } = this.currentTransform;
-        const angleX = Math.atan2(b, a);
-        const angleY = Math.atan2(-c, d);
-        return Math.abs(angleX - angleY) > EPSILON;
-    }
     get _isUniform() {
         return Math.abs(this._scaleX - this._scaleY) <= EPSILON;
     }
     get _isIdentity() {
-        return this.currentTransform.isIdentity;
+        return this._currentTransform.isIdentity;
     }
     // ****************************
     // Canvas 2D interface

package/lib/extras/paths/PathSVG.d.ts

@@ -2,9 +2,18 @@ import { Curve, LineCurve, PolylineCurve, QuadraticBezierCurve, CubicBezierCurve
 import { type Vector2 } from '../geometry';
 import PathContext from './PathContext';
 import Path from './Path';
-export type PathSVGSerializationParams = {
+/**
+ * Parameters used for SVG serialization of a path
+ */
+export type PathSVGSerializationParameters = {
+    /**
+     * Flag indicating if given curve should be approximated into straight lines
+     */
     approximate?: boolean;
-    curveResolution?: number;
+    /**
+     * Resolution used for approximations
+     */
+    resolution?: number;
 };
 /**
  * Utility class for manipulating connected curves and generating SVG path
@@ -19,10 +28,10 @@ export default class PathSVG extends PathContext {
     /**
      * Serialize this path into a SVG path string
      *
-     * @param {object} [params]
+     * @param {PathSVGSerializationParameters} [params] Serialization parameters
      * @returns {string}
      */
-    toString(params?: PathSVGSerializationParams): string;
+    toString(params?: PathSVGSerializationParameters): string;
     /**
      * Convert a {@link Curve} into spaced points
      *
@@ -35,77 +44,74 @@ export default class PathSVG extends PathContext {
      * Serialize a {@link Curve}
      *
      * @param {Curve} curve Curve to serialize
-     * @param {object} [params] Serialization parameters
-     * @param {boolean} [params.approximate]    Flag indicating if given curve should be approximated into straight lines
-     * @param {number} [params.curveResolution] Resolution used for curve approximations
-     * @returns string
+     * @param {PathSVGSerializationParameters} [params] Serialization parameters
+     * @returns {string}
      */
-    static serialize(curve: Curve<Vector2>, { approximate, curveResolution }?: PathSVGSerializationParams): string;
+    static serialize(curve: Curve<Vector2>, { approximate, resolution }?: PathSVGSerializationParameters): string;
     /**
      * Serialize a {@link LineCurve}
      *
      * @param {LineCurve} curve LineCurve to serialize
-     * @returns string
+     * @returns {string}
      */
     static serializeLineCurve(curve: LineCurve): string;
     /**
      * Serialize a {@link PolylineCurve}
      *
      * @param {PolylineCurve} curve PolylineCurve to serialize
-     * @returns string
+     * @returns {string}
      */
     static serializePolylineCurve(curve: PolylineCurve): string;
     /**
      * Serialize a {@link QuadraticBezierCurve}
      *
      * @param {QuadraticBezierCurve} curve QuadraticBezierCurve to serialize
-     * @returns string
+     * @returns {string}
      */
     static serializeQuadraticBezierCurve(curve: QuadraticBezierCurve): string;
     /**
      * Serialize a {@link CubicBezierCurve}
      *
      * @param {CubicBezierCurve} curve CubicBezierCurve to serialize
-     * @returns string
+     * @returns {string}
      */
     static serializeCubicBezierCurve(curve: CubicBezierCurve): string;
     /**
      * Serialize a {@link CatmullRomCurve} by approximating it into straight lines
      *
      * @param {CatmullRomCurve} curve CatmullRomCurve to serialize
-     * @param {number} [curveResolution] Approximation resolution
-     * @returns string
+     * @param {number} [resolution] Approximation resolution
+     * @returns {string}
      */
-    static serializeCatmullRomCurve(curve: CatmullRomCurve, curveResolution?: number): string;
+    static serializeCatmullRomCurve(curve: CatmullRomCurve, resolution?: number): string;
     /**
      * Serialize a {@link SplineCurve} by approximating it into straight lines
      *
      * @param {SplineCurve} curve SplineCurve to serialize
-     * @param {number} [curveResolution] Approximation resolution
-     * @returns string
+     * @param {number} [resolution] Approximation resolution
+     * @returns {string}
      */
-    static serializeSplineCurve(curve: SplineCurve, curveResolution?: number): string;
+    static serializeSplineCurve(curve: SplineCurve, resolution?: number): string;
     /**
      * Serialize an {@link EllipseCurve}
      *
      * @param {EllipseCurve} curve EllipseCurve to serialize
-     * @returns string
+     * @returns {string}
      */
     static serializeEllipseCurve(curve: EllipseCurve): string;
     /**
      * Serialize an {@link ArcCurve}
      *
      * @param {ArcCurve} curve ArcCurve to serialize
-     * @returns string
+     * @returns {string}
      */
     static serializeArcCurve(curve: ArcCurve): string;
     /**
      * Serialize an {@link Path}
      *
      * @param {Path} path Path to serialize
-     * @param {object} [params]
-     * @param {object} [params.curveResolution] Resolution used for curves approximations
-     * @returns string
+     * @param {PathSVGSerializationParameters} [params] Serialization parameters
+     * @returns {string}
      */
-    static serializePath(path: Path<Vector2>, params?: PathSVGSerializationParams): string;
+    static serializePath(path: Path<Vector2>, params?: PathSVGSerializationParameters): string;
 }